ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Improved prejoin styles

pull/743/head
csantosm 2022-07-11 15:32:36 +02:00
parent f93b55818d
commit 65025c4e33
3 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css
View File

@ -5,17 +5,29 @@
} }
.prejoin-toolbar { .prejoin-toolbar {
max-height: 40px;
height: 40px;
}
#toolbar {
background-color: var(--ov-light-color); background-color: var(--ov-light-color);
height: 100%;
}
#toolbar ::ng-deep .lang-button {
height: 25px !important;
font-size: 14px !important;
line-height: 0px;
align-items: unset !important;
} }
.spacer { .spacer {
flex: 1 1 auto; flex: 1 1 auto;
} }
#branding-logo { #branding-logo {
background-color: var(--ov-logo-background-color);
border-radius: var(--ov-panel-radius); border-radius: var(--ov-panel-radius);
max-width: 35px; max-width: 35px;
max-height: 35px; max-height: 35px;
height: -webkit-fill-available;
height: -moz-available;
padding: 10px; padding: 10px;
margin-right: 10px; margin-right: 10px;
} }
@ -32,9 +44,13 @@ hr {
margin: 0; margin: 0;
} }
#prejoin-container {
height: calc(100% - 40px);
}
#prejoin-container ::ng-deep .sidenav-container { #prejoin-container ::ng-deep .sidenav-container {
padding-top: 0px !important; padding-top: 0px !important;
} }
#prejoin-container ::ng-deep #background-effects-container { #prejoin-container ::ng-deep #background-effects-container {
margin: 0px !important; margin: 0px !important;
max-height: 100% !important; max-height: 100% !important;
@ -53,6 +69,10 @@ hr {
min-width: 0px !important; min-width: 0px !important;
} }
#prejoin-container ::ng-deep .OT_root {
padding: 0px !important;
}
#background-effects-btn { #background-effects-btn {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
@ -88,7 +108,6 @@ hr {
display: block !important; display: block !important;
} }
.join-btn-container { .join-btn-container {
width: inherit; width: inherit;
text-align: center; text-align: center;
@ -102,7 +121,6 @@ hr {
border-radius: var(--ov-video-radius); border-radius: var(--ov-video-radius);
} }
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
.container, .container,
.media-panel-container, .media-panel-container,

14
openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html
View File

@ -1,10 +1,12 @@
<mat-toolbar class="prejoin-toolbar"> <div class="prejoin-toolbar">
<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo /> <mat-toolbar id="toolbar">
<!-- <span>OpenVidu Call</span> --> <img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo />
<span class="spacer"></span> <!-- <span>OpenVidu Call</span> -->
<span class="spacer"></span>
<ov-lang-selector *ngIf="!isMinimal" (onLangSelectorClicked)="onDeviceSelectorClicked()"></ov-lang-selector> <ov-lang-selector *ngIf="!isMinimal" (onLangSelectorClicked)="onDeviceSelectorClicked()"></ov-lang-selector>
</mat-toolbar> </mat-toolbar>
</div>
<div class="container" id="prejoin-container" fxLayout.gt-sm="row" fxLayout.lt-md="column"> <div class="container" id="prejoin-container" fxLayout.gt-sm="row" fxLayout.lt-md="column">
<div fxFlex.gt-sm="65%" fxFlex.lt-md="55%" fxLayoutAlign="center center" id="layout-container"> <div fxFlex.gt-sm="65%" fxFlex.lt-md="55%" fxLayoutAlign="center center" id="layout-container">

6
openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css
View File

@ -1,6 +1,6 @@
#session-container { #session-container {
background-color: var(--ov-primary-color); background-color: var(--ov-primary-color);
min-width: 400px; /* min-width: 400px; */
height: 100%; height: 100%;
} }
@ -52,7 +52,7 @@
#toolbar-container, #toolbar-container,
#footer-container { #footer-container {
background-color: var(--ov-primary-color); background-color: var(--ov-primary-color);
min-width: 400px !important; /* min-width: 400px !important; */
width: 100%; width: 100%;
height: 70px; height: 70px;
} }
@ -66,7 +66,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 999999; z-index: 999999;
min-width: 400px !important; /* min-width: 400px !important; */
} }
.reconnecting-container { .reconnecting-container {