mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Parametrized styles properties
csantosm
parent
f23f39dd6f
commit
3e21207f8c
|
|
@ -29,7 +29,7 @@
|
|||
max-height: 15px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 50%;
|
||||
border-radius: var(--ov-buttons-radius);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
#chat-container {
|
||||
margin: 20px;
|
||||
background-color: var(--ov-light-color);
|
||||
border-radius: 5px;
|
||||
border-radius: var(--ov-panel-radius);
|
||||
height: -webkit-fill-available;
|
||||
height: -moz-available;
|
||||
}
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
|
||||
.header-container button {
|
||||
margin-left: auto;
|
||||
border-radius: var(--ov-buttons-radius);
|
||||
}
|
||||
|
||||
.text-container{
|
||||
|
|
@ -43,7 +44,7 @@
|
|||
background-color: var(--ov-light-dark-color);
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
border-radius: var(--ov-panel-radius);
|
||||
}
|
||||
|
||||
.input-container textarea {
|
||||
|
|
@ -89,14 +90,17 @@
|
|||
|
||||
.msg-content {
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
border-radius: var(--ov-panel-radius);
|
||||
padding: 8px;
|
||||
color: #000000;
|
||||
width: auto;
|
||||
max-width: 95%;
|
||||
font-size: 13px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
#send-btn {
|
||||
border-radius: var(--ov-buttons-radius);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -53,8 +53,10 @@ export class ChatPanelComponent implements OnInit, AfterViewInit {
|
|||
}
|
||||
|
||||
sendMessage(): void {
|
||||
this.chatService.sendMessage(this.message);
|
||||
this.message = '';
|
||||
if(!!this.message) {
|
||||
this.chatService.sendMessage(this.message);
|
||||
this.message = '';
|
||||
}
|
||||
}
|
||||
|
||||
scrollToBottom(): void {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.participants-container {
|
||||
margin: 20px;
|
||||
background-color: var(--ov-light-color);
|
||||
border-radius: 5px;
|
||||
border-radius: var(--ov-panel-radius);
|
||||
height: -webkit-fill-available;
|
||||
height: -moz-available;
|
||||
}
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
|
||||
.header-container button {
|
||||
margin-left: auto;
|
||||
border-radius: var(--ov-buttons-radius);
|
||||
}
|
||||
|
||||
.local-participant-container, .remote-participants-container {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
padding: 0px;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
border-radius: 5px;
|
||||
border-radius: var(--ov-panel-radius);
|
||||
color: #ffffff;
|
||||
font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;
|
||||
}
|
||||
|
|
@ -18,12 +18,12 @@
|
|||
padding: 5px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
border-radius: 2px;
|
||||
border-radius: var(--ov-panel-radius);
|
||||
}
|
||||
|
||||
#dialogNickname {
|
||||
background-color: #0000005e;
|
||||
border-radius: 3px;
|
||||
border-radius: var(--ov-panel-radius);
|
||||
}
|
||||
|
||||
#closeButton {
|
||||
|
|
@ -81,6 +81,7 @@
|
|||
width: 26px;
|
||||
height: 26px;
|
||||
margin: 5px;
|
||||
border-radius: var(--ov-buttons-radius);
|
||||
}
|
||||
|
||||
.status-icons button {
|
||||
|
|
@ -110,7 +111,7 @@
|
|||
position: absolute;
|
||||
overflow: hidden;
|
||||
background-color: #000000;
|
||||
border-radius: 5px;
|
||||
border-radius: var(--ov-video-radius);
|
||||
}
|
||||
|
||||
mat-error,
|
||||
|
|
|
|||
|
|
@ -27,8 +27,6 @@
|
|||
</mat-form-field>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Custom network quality element -->
|
||||
<ng-content select="[network-quality]"></ng-content>
|
||||
</div>
|
||||
|
||||
<div id="audio-wave-container" *ngIf="showAudioDetection && _stream.type === 'CAMERA'">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { OpenViduService } from '../../services/openvidu/openvidu.service';
|
|||
import { LayoutService } from '../../services/layout/layout.service';
|
||||
import { StorageService } from '../../services/storage/storage.service';
|
||||
import { Signal } from '../../models/signal.model';
|
||||
import { LayoutClass } from '../../models/layout.model';
|
||||
import { PublisherProperties } from 'openvidu-browser';
|
||||
import { StreamModel } from '../../models/participant.model';
|
||||
import { ParticipantService } from '../../services/participant/participant.service';
|
||||
|
|
|
|||
|
|
@ -34,13 +34,17 @@
|
|||
font-size: 24px;
|
||||
}
|
||||
|
||||
#company-logo {
|
||||
#media-buttons-container button, #menu-buttons-container button {
|
||||
border-radius: var(--ov-buttons-radius);
|
||||
}
|
||||
|
||||
#branding-logo {
|
||||
background-color: var(--ov-dark-color);
|
||||
border-radius: 5px;
|
||||
border-radius: var(--ov-panel-radius);
|
||||
max-width: 35px;
|
||||
max-height: 35px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#session-title {
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
|
|
@ -56,7 +60,7 @@
|
|||
position: absolute;
|
||||
top: 12px;
|
||||
right: 33px;
|
||||
border-radius: 50%;
|
||||
border-radius: var(--ov-buttons-radius);
|
||||
background-color: #ffa600;
|
||||
border: 1px solid #000;
|
||||
z-index: 99999;
|
||||
|
|
@ -64,7 +68,7 @@
|
|||
|
||||
#leave-btn {
|
||||
background-color: var(--ov-warn-color) !important;
|
||||
border-radius: 10px !important;
|
||||
border-radius: var(--ov-leave-button-radius) !important;
|
||||
width: 60px !important;
|
||||
}
|
||||
|
||||
|
|
@ -92,7 +96,7 @@
|
|||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
#company-logo {
|
||||
#branding-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
|
||||
<div fxFlex="20%" fxLayoutAlign="start center">
|
||||
<div id="img-container">
|
||||
<img id="company-logo" alt="OpenVidu Logo" [src]="logoUrl" />
|
||||
<img id="branding-logo" src='assets/images/openvidu_globe.png'/>
|
||||
<span id="session-title" *ngIf="session && session.sessionId">{{ session.sessionId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,6 @@ export class ToolbarComponent implements OnInit, OnDestroy {
|
|||
isFullscreenActive: boolean = false;
|
||||
isChatOpened: boolean = false;
|
||||
isParticipantsOpened: boolean = false;
|
||||
logoUrl = 'assets/images/openvidu_globe.png';
|
||||
|
||||
protected log: ILogger;
|
||||
protected menuTogglingSubscription: Subscription;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.card-header {
|
||||
background-color: var(--ov-primary-color);
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
border-radius: var(--ov-panel-radius) var(--ov-panel-radius) 0px 0px;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
}
|
||||
|
|
@ -67,6 +67,7 @@
|
|||
}
|
||||
.deviceButton {
|
||||
box-shadow: none;
|
||||
border-radius: var(--ov-buttons-radius);
|
||||
background-color: var(--ov-secondary-color) !important;
|
||||
color: var(--ov-light-color) !important;
|
||||
}
|
||||
|
|
@ -965,7 +966,7 @@
|
|||
background-clip: padding-box;
|
||||
border: 1px solid #999999;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10px;
|
||||
border-radius: var(--ov-panel-radius);
|
||||
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
|
||||
outline: 0;
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ video {
|
|||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
border-radius: 5px;
|
||||
border-radius: var(--ov-video-radius);
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.poster_img {
|
||||
.poster {
|
||||
position: absolute;
|
||||
z-index: 888;
|
||||
max-width: 60%;
|
||||
|
|
|
|||
|
|
@ -50,6 +50,11 @@ $openvidu-components-theme: mat.define-light-theme((
|
|||
|
||||
--ov-light-color: #ffffff;
|
||||
--ov-light-dark-color: #f1f1f1;
|
||||
|
||||
--ov-buttons-radius: 50%; // border-radius property
|
||||
--ov-leave-button-radius: 10px;
|
||||
--ov-video-radius: 5px;
|
||||
--ov-panel-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue