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

ov-components: Updated css color variables

pull/850/merge
Carlos Santos 2024-11-05 12:37:34 +01:00
parent 1d91d6fa9d
commit ada5984a32
37 changed files with 433 additions and 348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
openvidu-components-angular/e2e/webcomponent-app/index.html
View File

@ -11,23 +11,23 @@
<style> <style>
:root { :root {
--ov-primary-color: #303030; --ov-background-color: #303030;
--ov-secondary-color: #3e3f3f; --ov-secondary-action-color: #3e3f3f;
--ov-tertiary-color: #598eff; --ov-accent-action-color: #598eff;
--ov-warn-color: #eb5144; --ov-error-color: #eb5144;
--ov-accent-color: #ffae35; --ov-accent-action-color: #ffae35;
--ov-light-color: #e6e6e6; --ov-light-color: #e6e6e6;
--ov-logo-background-color: #3a3d3d; --ov-secondary-action-color: #3a3d3d;
--ov-text-color: #ffffff; --ov-text-primary-color: #ffffff;
--ov-panel-text-color: #1d1d1d; --ov-text-primary-color: #1d1d1d;
--ov-panel-background: #ffffff; --ov-surface-color: #ffffff;
--ov-buttons-radius: 50%; --ov-buttons-radius: 50%;
--ov-leave-button-radius: 10px; --ov-leave-button-radius: 10px;
--ov-video-radius: 5px; --ov-video-radius: 5px;
--ov-panel-radius: 5px; --ov-surface-radius: 5px;
} }
</style> </style>
</head> </head>

26
openvidu-components-angular/projects/openvidu-components-angular/README.md
View File

@ -54,24 +54,28 @@ You can also customize the styles in your `styles.scss` file:
```scss ```scss
:root { :root {
--ov-primary-color: #303030; /* Basic colors */
--ov-secondary-color: #3e3f3f; --ov-background-color: #303030; // Background color
--ov-tertiary-color: #598eff; --ov-surface-color: #ffffff; // Surfaces colors (panels, dialogs)
--ov-warn-color: #eb5144;
--ov-accent-color: #ffae35;
--ov-light-color: #e6e6e6;
--ov-logo-background-color: #3a3d3d; /* Text colors */
--ov-text-primary-color: #ffffff; // Text color over primary background
--ov-text-surface-color: #1d1d1d; // Text color over surface background
--ov-text-color: #ffffff; /* Action colors */
--ov-primary-action-color: #273235; // Primary color for buttons, etc.
--ov-secondary-action-color: #f1f1f1; // Secondary color for buttons, etc.
--ov-accent-action-color: #0089ab; // Color for highlighted elements
--ov-panel-text-color: #1d1d1d; /* Status colors */
--ov-panel-background: #ffffff; --ov-error-color: #eb5144; // Error color
--ov-warn-color: #ffba53; // Warning color
/* Radius */
--ov-buttons-radius: 50%; --ov-buttons-radius: 50%;
--ov-leave-button-radius: 10px; --ov-leave-button-radius: 10px;
--ov-video-radius: 5px; --ov-video-radius: 5px;
--ov-panel-radius: 5px; --ov-surface-radius: 5px;
} }
``` ```

46
openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.scss
View File

@ -4,16 +4,16 @@
.header { .header {
height: 50px; height: 50px;
background-color: var(--ov-secondary-color); background-color: var(--ov-secondary-action-color);
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
.logout-btn { .logout-btn {
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
.dashboard-body { .dashboard-body {
background-color: var(--ov-secondary-color); background-color: var(--ov-secondary-action-color);
height: calc(100% - 75px); height: calc(100% - 75px);
} }
.toolbar-spacer { .toolbar-spacer {
@ -41,17 +41,17 @@
#sort-menu-btn { #sort-menu-btn {
margin-left: 5px; margin-left: 5px;
background-color: var(--ov-panel-background); background-color: var(--ov-surface-color);
color: var(--ov-panel-text-color); color: var(--ov-text-primary-color);
} }
.search-bar { .search-bar {
height: 95%; height: 95%;
width: 30%; width: 30%;
display: flex; display: flex;
background-color: var(--ov-panel-background); background-color: var(--ov-surface-color);
padding: 0px 10px; padding: 0px 10px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
} }
#search-input { #search-input {
@ -87,7 +87,7 @@
} }
.recordings-container { .recordings-container {
background-color: var(--ov-secondary-color); background-color: var(--ov-secondary-action-color);
height: calc(100% - 50px); height: calc(100% - 50px);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@ -106,7 +106,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--ov-panel-background); background-color: var(--ov-surface-color);
} }
} }
@ -135,18 +135,18 @@
margin-right: -50%; margin-right: -50%;
top: 50%; top: 50%;
left: 50%; left: 50%;
background-color: var(--ov-logo-background-color); background-color: var(--ov-secondary-action-color);
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
} }
.video-btns button #play { .video-btns button #play {
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
.video-btns button #download { .video-btns button #download {
color: var(--ov-tertiary-color); color: var(--ov-accent-action-color);
} }
.video-btns button #delete { .video-btns button #delete {
color: var(--ov-warn-color); color: var(--ov-error-color);
} }
.video-info-container > div { .video-info-container > div {
@ -167,7 +167,7 @@
.video-card-tag { .video-card-tag {
font-size: 13px; font-size: 13px;
color: var(--ov-panel-text-color); color: var(--ov-text-primary-color);
font-weight: bold; font-weight: bold;
} }
@ -204,16 +204,16 @@
transform: translateX(-50%); transform: translateX(-50%);
.load-more-btn { .load-more-btn {
background-color: var(--ov-panel-background); background-color: var(--ov-surface-color);
color: var(--ov-panel-text-color); color: var(--ov-text-primary-color);
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
} }
} }
.footer { .footer {
height: 25px; height: 25px;
background-color: var(--ov-primary-color); background-color: var(--ov-background-color);
color: var(--ov-text-color); color: var(--ov-text-primary-color);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -225,7 +225,7 @@
gap: 2px; gap: 2px;
} }
.footer a { .footer a {
color: var(--ov-tertiary-color); color: var(--ov-accent-action-color);
padding-left: 5px; padding-left: 5px;
} }
@ -234,7 +234,7 @@
width: 100%; width: 100%;
display: table; display: table;
text-align: center; text-align: center;
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex { ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {

14
openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.scss
View File

@ -1,7 +1,7 @@
.header { .header {
height: 50px; height: 50px;
background-color: var(--ov-primary-color); background-color: var(--ov-background-color);
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
.center-container { .center-container {
@ -9,12 +9,12 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
background-color: var(--ov-secondary-color); background-color: var(--ov-secondary-action-color);
} }
.card-container { .card-container {
text-align: center; text-align: center;
background-color: var(--ov-panel-background); background-color: var(--ov-surface-color);
padding: 10px; padding: 10px;
max-width: 300px; max-width: 300px;
min-width: 300px; min-width: 300px;
@ -23,8 +23,8 @@
} }
.form-btn { .form-btn {
background-color: var(--ov-tertiary-color) !important; background-color: var(--ov-accent-action-color) !important;
color: var(--ov-text-color) !important; color: var(--ov-text-primary-color) !important;
} }
.form-field, .form-field,
@ -33,5 +33,5 @@
} }
::ng-deep .mat-mdc-progress-spinner { ::ng-deep .mat-mdc-progress-spinner {
--mdc-circular-progress-active-indicator-color: var(--ov-tertiary-color); --mdc-circular-progress-active-indicator-color: var(--ov-accent-action-color);
} }

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.scss
View File

@ -23,13 +23,13 @@
} }
.audio-container{ .audio-container{
background-color: var(--ov-tertiary-color); background-color: var(--ov-accent-action-color);
padding: 5px; padding: 5px;
max-width: 15px; max-width: 15px;
max-height: 15px; max-height: 15px;
height: 15px; height: 15px;
width: 15px; width: 15px;
border-radius: var(--ov-video-radius); border-radius: var(--ov-surface-radius);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
@ -38,7 +38,7 @@
margin: auto; margin: auto;
height: 80%; height: 80%;
width: 3px; width: 3px;
background: var(--ov-text-color); background: var(--ov-text-primary-color);
border-radius: 8px; border-radius: 8px;
} }

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/avatar-profile/avatar-profile.component.scss
View File

@ -19,7 +19,7 @@
height: 70px; height: 70px;
width: 70px; width: 70px;
border-radius: var(--ov-video-radius); border-radius: var(--ov-video-radius);
border: 2px solid var(--ov-text-color); border: 2px solid var(--ov-text-primary-color);
color: #000000; color: #000000;
} }

12
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/captions/captions.component.scss
View File

@ -29,7 +29,7 @@
.error-container { .error-container {
display: grid; display: grid;
text-align: center; text-align: center;
color: var(--ov-text-color); color: var(--ov-text-primary-color);
font-size: 18px; font-size: 18px;
} }
@ -43,7 +43,7 @@ mat-spinner {
} }
::ng-deep .mat-mdc-progress-spinner { ::ng-deep .mat-mdc-progress-spinner {
--mdc-circular-progress-active-indicator-color: var(--ov-tertiary-color); --mdc-circular-progress-active-indicator-color: var(--ov-accent-action-color);
} }
/* /*
@ -160,8 +160,8 @@ mat-spinner {
} }
#caption-settings-btn { #caption-settings-btn {
color: var(--ov-text-color); color: var(--ov-text-primary-color);
background-color: var(--ov-secondary-color); background-color: var(--ov-secondary-action-color);
} }
#caption-settings-icon { #caption-settings-icon {
font-size: 15px; font-size: 15px;
@ -190,12 +190,12 @@ mat-spinner {
.caption-text, .caption-text,
#speaker { #speaker {
color: var(--ov-text-color); color: var(--ov-text-primary-color);
font-family: 'Roboto', arial, sans-serif; font-family: 'Roboto', arial, sans-serif;
} }
.caption-text { .caption-text {
background-color: var(--ov-logo-background-color); background-color: var(--ov-secondary-action-color);
padding: 4.5px; padding: 4.5px;
line-height: 1.6; line-height: 1.6;
word-break: break-word; word-break: break-word;

28
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts
View File

@ -7,13 +7,33 @@ import { MatDialogRef } from '@angular/material/dialog';
@Component({ @Component({
selector: 'app-delete-dialog', selector: 'app-delete-dialog',
template: ` template: `
<div mat-dialog-content>{{'PANEL.RECORDING.DELETE_QUESTION' | translate}}</div> <div mat-dialog-content>{{ 'PANEL.RECORDING.DELETE_QUESTION' | translate }}</div>
<div mat-dialog-actions> <div mat-dialog-actions>
<button mat-button (click)="close()">{{'PANEL.RECORDING.CANCEL' | translate }}</button> <button mat-button [disableRipple]="true" (click)="close()">{{ 'PANEL.RECORDING.CANCEL' | translate }}</button>
<button mat-button cdkFocusInitial (click)="close(true)" id="delete-recording-confirm-btn">{{'PANEL.RECORDING.DELETE' | translate}}</button> <button [disableRipple]="true" mat-button cdkFocusInitial (click)="close(true)" id="delete-recording-confirm-btn">
{{ 'PANEL.RECORDING.DELETE' | translate }}
</button>
</div> </div>
`, `,
styles: [``] styles: [
`
::ng-deep .mat-mdc-dialog-surface {
background-color: var(--ov-surface-color);
border-radius: var(--ov-surface-radius);
}
#delete-recording-confirm-btn {
background-color: var(--ov-error-color);
color: var(--ov-text-primary-color);
}
.mat-mdc-button,
.mat-mdc-button:not(:disabled),
::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
color: var(--ov-text-primary-color);
background-color: var(--ov-primary-action-color) !important;
border-radius: var(--ov-surface-radius);
}
`
]
}) })
export class DeleteDialogComponent { export class DeleteDialogComponent {
constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>) {} constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>) {}

22
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts
View File

@ -12,12 +12,30 @@ import { DialogData } from '../../models/dialog.model';
<h1 mat-dialog-title>{{ data.title }}</h1> <h1 mat-dialog-title>{{ data.title }}</h1>
<div mat-dialog-content id="openvidu-dialog">{{ data.description }}</div> <div mat-dialog-content id="openvidu-dialog">{{ data.description }}</div>
<div mat-dialog-actions *ngIf="data.showActionButtons"> <div mat-dialog-actions *ngIf="data.showActionButtons">
<button mat-button (click)="close()">{{'PANEL.CLOSE' | translate}}</button> <button mat-button [disableRipple]="true" (click)="close()">{{ 'PANEL.CLOSE' | translate }}</button>
</div> </div>
`,
styles: [
` `
::ng-deep .mat-mdc-dialog-surface {
background-color: var(--ov-surface-color);
border-radius: var(--ov-surface-radius);
}
.mat-mdc-button,
.mat-mdc-button:not(:disabled),
::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
color: var(--ov-text-primary-color);
background-color: var(--ov-primary-action-color) !important;
border-radius: var(--ov-surface-radius);
}
`
]
}) })
export class DialogTemplateComponent { export class DialogTemplateComponent {
constructor(public dialogRef: MatDialogRef<DialogTemplateComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData) {} constructor(
public dialogRef: MatDialogRef<DialogTemplateComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData
) {}
close() { close() {
this.dialogRef.close(); this.dialogRef.close();

14
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts
View File

@ -12,15 +12,27 @@ import { RecordingDialogData } from '../../models/dialog.model';
<video #videoElement controls autoplay [src]="src" (error)="handleError()"></video> <video #videoElement controls autoplay [src]="src" (error)="handleError()"></video>
</div> </div>
<div mat-dialog-actions *ngIf="data.showActionButtons" align="end"> <div mat-dialog-actions *ngIf="data.showActionButtons" align="end">
<button mat-button (click)="close()">{{ 'PANEL.CLOSE' | translate }}</button> <button mat-button [disableRipple]="true" (click)="close()">{{ 'PANEL.CLOSE' | translate }}</button>
</div> </div>
`, `,
styles: [ styles: [
` `
::ng-deep .mat-mdc-dialog-surface {
background-color: var(--ov-surface-color);
border-radius: var(--ov-surface-radius);
}
video { video {
max-height: 64vh; max-height: 64vh;
max-width: 100%; max-width: 100%;
} }
.mat-mdc-button,
.mat-mdc-button:not(:disabled),
::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
color: var(--ov-text-primary-color);
background-color: var(--ov-primary-action-color) !important;
border-radius: var(--ov-surface-radius);
}
` `
] ]
}) })

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.scss
View File

@ -31,7 +31,7 @@
.OV_root, .OV_root,
.OV_root * { .OV_root * {
color: #ffffff; color: var(--ov-text-primary-color);
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.scss
View File

@ -3,7 +3,7 @@ video {
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #ffffff; color: var(--ov-text-primary-color);
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;

26
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss
View File

@ -1,4 +1,4 @@
:host{ :host {
.activities-body-container { .activities-body-container {
display: block !important; display: block !important;
overflow-y: auto; overflow-y: auto;
@ -8,14 +8,15 @@
.activity-icon { .activity-icon {
display: inherit; display: inherit;
background-color: var(--ov-light-color); background-color: var(--ov-secondary-action-color);
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
margin: 10px 0px !important; margin: 10px 0px !important;
padding: 10px; padding: 10px;
} }
.activity-title, .activity-subtitle { .activity-title,
color: var(--ov-panel-text-color); .activity-subtitle {
color: var(--ov-text-surface-color);
} }
.activity-subtitle { .activity-subtitle {
@ -46,6 +47,11 @@
::ng-deep .mat-expansion-panel-header { ::ng-deep .mat-expansion-panel-header {
padding: 0px 5px !important; padding: 0px 5px !important;
height: 65px !important; height: 65px !important;
cursor: pointer !important;
}
::ng-deep .mat-expansion-panel-header:hover {
background: none !important;
} }
::ng-deep .mat-mdc-list-base .mat-mdc-list-item .mat-list-item-content, ::ng-deep .mat-mdc-list-base .mat-mdc-list-item .mat-list-item-content,
@ -53,6 +59,10 @@
padding: 0px !important; padding: 0px !important;
} }
::ng-deep mat-list mat-list-item {
cursor: pointer !important;
}
::ng-deep mat-expansion-panel .mat-expansion-panel-body { ::ng-deep mat-expansion-panel .mat-expansion-panel-body {
padding: 0px !important; padding: 0px !important;
min-height: 400px; min-height: 400px;
@ -63,14 +73,16 @@
::ng-deep .mat-expansion-panel { ::ng-deep .mat-expansion-panel {
box-shadow: none !important; box-shadow: none !important;
background-color: var(--ov-panel-background) !important; background-color: var(--ov-surface-color) !important;
} }
::ng-deep .no-body .mat-expansion-panel-content { ::ng-deep .no-body .mat-expansion-panel-content {
display: none !important; display: none !important;
} }
::ng-deep .mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before{ ::ng-deep
.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta
.mdc-list-item__end::before {
max-height: 24px; max-height: 24px;
height: 24px; height: 24px;
} }

7
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
View File

@ -1,4 +1,9 @@
<mat-expansion-panel (opened)="setPanelOpened(true)" (closed)="setPanelOpened(false)" [expanded]="expanded" [ngClass]="{ 'no-body': !isPanelOpened }"> <mat-expansion-panel
(opened)="setPanelOpened(true)"
(closed)="setPanelOpened(false)"
[expanded]="expanded"
[ngClass]="{ 'no-body': !isPanelOpened }"
>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-list> <mat-list>
<mat-list-item> <mat-list-item>

48
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss
View File

@ -1,9 +1,11 @@
$ov-broadcasting-color: #5903ca;
#broadcasting-status { #broadcasting-status {
color: var(--ov-text-color); color: var(--ov-text-surface-color);
display: inline; display: inline;
padding: 3px; padding: 3px;
font-size: 11px; font-size: 11px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
} }
.time-container { .time-container {
@ -11,19 +13,19 @@
} }
.error-text { .error-text {
color: var(--ov-warn-color); color: var(--ov-error-color);
font-style: italic; font-style: italic;
font-size: 14px; font-size: 14px;
} }
#broadcasting-icon { #broadcasting-icon {
color: #5903ca; color: var(--ov-primary-action-color) !important;
} }
.broadcasting-duration { .broadcasting-duration {
background-color: var(--ov-light-color); background-color: var(--ov-secondary-action-color);
padding: 4px 8px; padding: 4px 8px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
font-weight: 500; font-weight: 500;
} }
@ -34,27 +36,27 @@
} }
.started { .started {
background-color: #5903ca !important; background-color: $ov-broadcasting-color !important;
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
.activity-icon.started { .activity-icon.started {
background-color: #5903ca !important; background-color: $ov-broadcasting-color !important;
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
.failed { .failed {
background-color: var(--ov-warn-color) !important; background-color: var(--ov-error-color) !important;
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
.stopped { .stopped {
background-color: var(--ov-light-color); background-color: var(--ov-secondary-action-color);
color: var(--ov-panel-text-color) !important; color: var(--ov-text-surface-color) !important;
} }
.starting { .starting {
background-color: #ffd79b !important; background-color: var(--ov-warn-color) !important;
color: var(--ov-panel-text-color) !important; color: var(--ov-text-primary-color) !important;
} }
.panel-body-container { .panel-body-container {
@ -72,7 +74,7 @@
} }
.broadcasting-error { .broadcasting-error {
color: var(--ov-warn-color); color: var(--ov-error-color);
font-weight: 600; font-weight: 600;
} }
.broadcasting-name { .broadcasting-name {
@ -92,13 +94,13 @@
/* #start-broadcasting-btn { /* #start-broadcasting-btn {
width: 100%; width: 100%;
background-color: var(--ov-tertiary-color); background-color: var(--ov-accent-action-color);
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} */ } */
#stop-broadcasting-btn { #stop-broadcasting-btn {
/* background-color: var(--ov-warn-color); */ /* background-color: var(--ov-error-color); */
color: var(--ov-warn-color); color: var(--ov-error-color);
} }
#reset-broadcasting-status-btn { #reset-broadcasting-status-btn {
@ -122,10 +124,10 @@ mat-expansion-panel {
.input-container { .input-container {
height: 25px; height: 25px;
display: flex; display: flex;
background-color: var(--ov-light-color); background-color: var(--ov-secondary-action-color);
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
order: 3; order: 3;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;

38
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss
View File

@ -1,10 +1,10 @@
:host { :host {
#recording-status { #recording-status {
color: var(--ov-text-color); color: var(--ov-text-primary-color);
display: inline; display: inline;
padding: 3px; padding: 3px;
font-size: 11px; font-size: 11px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
} }
.recording-title { .recording-title {
@ -23,13 +23,13 @@
flex-wrap: wrap; flex-wrap: wrap;
height: auto; height: auto;
align-content: center; align-content: center;
color: var(--ov-panel-text-color) !important; color: var(--ov-text-surface-color) !important;
} }
.recording-duration { .recording-duration {
background-color: var(--ov-light-color); background-color: var(--ov-secondary-action-color);
padding: 4px 8px; padding: 4px 8px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
font-weight: 500; font-weight: 500;
} }
@ -41,22 +41,22 @@
.started { .started {
background-color: #3b7430 !important; background-color: #3b7430 !important;
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
.activity-icon.started, .activity-icon.started,
.failed { .failed {
background-color: var(--ov-warn-color) !important; background-color: var(--ov-error-color) !important;
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
.stopped { .stopped {
background-color: var(--ov-light-color); background-color: var(--ov-secondary-action-color);
color: var(--ov-panel-text-color) !important; color: var(--ov-text-surface-color) !important;
} }
.starting { .starting {
background-color: #ffd79b !important; background-color: var(--ov-warn-color) !important;
color: var(--ov-panel-text-color) !important; color: var(--ov-text-surface-color) !important;
} }
.panel-body-container { .panel-body-container {
@ -74,7 +74,7 @@
} }
.recording-error { .recording-error {
color: var(--ov-warn-color); color: var(--ov-error-color);
font-weight: 600; font-weight: 600;
} }
.recording-name { .recording-name {
@ -99,23 +99,23 @@
#start-recording-btn { #start-recording-btn {
width: 100%; width: 100%;
background-color: var(--ov-tertiary-color); background-color: var(--ov-primary-action-color);
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
#stop-recording-btn { #stop-recording-btn {
width: 100%; width: 100%;
background-color: var(--ov-warn-color); background-color: var(--ov-error-color);
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
.delete-recording-btn { .delete-recording-btn {
color: var(--ov-warn-color); color: var(--ov-error-color);
} }
#reset-recording-status-btn { #reset-recording-status-btn {
width: 100%; width: 100%;
background-color: var(--ov-light-color); background-color: var(--ov-secondary-action-color);
} }
.recording-item { .recording-item {

9
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss
View File

@ -7,8 +7,9 @@
.effect-button { .effect-button {
margin: 5px; margin: 5px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
background-color: var(--ov-light-color); background-color: var(--ov-secondary-action-color);
color: var(--ov-primary-action-color);
width: 60px; width: 60px;
height: 60px; height: 60px;
line-height: inherit; line-height: inherit;
@ -19,7 +20,7 @@
} }
.active-effect-btn { .active-effect-btn {
border: 2px solid var(--ov-tertiary-color); border: 2px solid var(--ov-accent-action-color);
} }
#hard_blur-btn .mat-icon { #hard_blur-btn .mat-icon {
@ -34,7 +35,7 @@
.grid img { .grid img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
} }
/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */

30
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss
View File

@ -1,6 +1,7 @@
$ov-selection-color: #d4d6d7;
.text-container { .text-container {
background-color: var(--ov-light-color); color: var(--ov-text-primary-color);
color: var(--ov-panel-text-color);
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
flex: inherit; flex: inherit;
@ -27,10 +28,11 @@
.input-container { .input-container {
height: 65px; height: 65px;
display: flex; display: flex;
background-color: var(--ov-light-color); background-color: var(--ov-surface-color);
border: 1px solid $ov-selection-color;
padding: 10px 5px 10px 10px; padding: 10px 5px 10px 10px;
margin: 10px; margin: 10px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
order: 3; order: 3;
justify-content: space-evenly; justify-content: space-evenly;
align-items: none; align-items: none;
@ -73,25 +75,27 @@
.participant-name-container p { .participant-name-container p {
font-size: 13px; font-size: 13px;
font-weight: bold; font-style: italic;
color: var(--ov-panel-text-color); color: var(--ov-primary-action-color);
padding: 5px;
} }
.chat-message { .chat-message {
position: relative; position: relative;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
padding: 8px; padding: 8px;
color: #000000; color: var(--ov-secondary-action-color);
width: auto; width: auto;
max-width: 95%; max-width: 95%;
font-size: 13px; font-size: 14px;
word-break: break-all; word-break: break-all;
background-color: var(--ov-primary-action-color);
} }
#send-btn { #send-btn {
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
color: var(--ov-light-color); color: var(--ov-secondary-action-color);
background-color: var(--ov-tertiary-color); background-color: var(--ov-primary-action-color);
align-self: center; align-self: center;
height: 75px; height: 75px;
} }
@ -119,5 +123,5 @@
} }
::ng-deep a:-webkit-any-link { ::ng-deep a:-webkit-any-link {
color: var(--ov-tertiary-color); color: var(--ov-accent-action-color);
} }

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.scss
View File

@ -1,7 +1,7 @@
.panel-container { .panel-container {
margin: 20px; margin: 20px;
background-color: var(--ov-panel-background); background-color: var(--ov-surface-color);
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
max-height: calc(100% - 40px); max-height: calc(100% - 40px);
min-height: calc(100% - 40px); min-height: calc(100% - 40px);
display: flex; display: flex;
@ -41,6 +41,6 @@
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: var(--ov-light-color); background: var(--ov-secondary-action-color);
border-radius: 4px; border-radius: 4px;
} }

10
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss
View File

@ -1,10 +1,10 @@
:host { :host {
.participant-avatar { .participant-avatar {
display: inherit; display: inherit;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
margin: auto !important; margin: auto !important;
padding: 10px; padding: 10px;
color: var(--ov-panel-text-color); color: var(--ov-text-surface-color);
} }
.participant-subtitle { .participant-subtitle {
@ -14,7 +14,7 @@
} }
.participant-name { .participant-name {
font-weight: bold !important; font-weight: bold !important;
color: var(--ov-panel-text-color); color: var(--ov-text-surface-color);
} }
.participant-action-buttons { .participant-action-buttons {
@ -53,7 +53,7 @@
} }
.warn-btn { .warn-btn {
/* background-color: var(--ov-warn-color) !important; */ /* background-color: var(--ov-error-color) !important; */
color: var(--ov-warn-color); color: var(--ov-error-color);
} }
} }

13
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.scss
View File

@ -8,16 +8,3 @@
max-height: calc(100% - 60px); max-height: calc(100% - 60px);
overflow: auto; overflow: auto;
} }
.message-container {
padding: 5px;
background-color: var(--ov-light-color);
color: var(--ov-panel-text-color);
text-align: center;
margin: 5px 5px;
font-size: 12px;
}
.message-container p {
margin: 0;
}

10
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss
View File

@ -11,7 +11,7 @@
.item-menu { .item-menu {
padding-right: 5px; padding-right: 5px;
border-right: 1px solid var(--ov-secondary-color); border-right: 1px solid var(--ov-secondary-action-color);
width: 170px; width: 170px;
} }
.item-menu.mobile { .item-menu.mobile {
@ -29,17 +29,17 @@
} }
mat-list-option[aria-selected='true'] { mat-list-option[aria-selected='true'] {
background: var(--ov-tertiary-color) !important; background: var(--ov-accent-action-color) !important;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
::ng-deep .mat-mdc-list-item-unscoped-content, ::ng-deep .mat-mdc-list-item-unscoped-content,
mat-icon { mat-icon {
color: var(--ov-panel-background) !important; color: var(--ov-secondary-action-color) !important;
} }
} }
mat-list-option[aria-selected='false'] { mat-list-option[aria-selected='false'] {
mat-icon { mat-icon {
color: var(--ov-panel-text-color) !important; color: var(--ov-text-surface-color) !important;
} }
} }

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

@ -5,8 +5,7 @@
<span>{{ 'PREJOIN.PREPARING' | translate }}</span> <span>{{ 'PREJOIN.PREPARING' | translate }}</span>
</div> </div>
<div *ngIf="!isLoading" id="prejoin-frame"> <div *ngIf="!isLoading" id="prejoin-card">
<!-- <img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/lodgo.png" ovLogo /> -->
<ov-lang-selector *ngIf="!isMinimal" [compact]="true" class="lang-btn" (onLangChanged)="onLangChanged.emit($event)"> <ov-lang-selector *ngIf="!isMinimal" [compact]="true" class="lang-btn" (onLangChanged)="onLangChanged.emit($event)">
</ov-lang-selector> </ov-lang-selector>

76
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
View File

@ -1,5 +1,9 @@
:host { :host {
--ov-primary-color-lighter: color-mix(in srgb, var(--ov-primary-color), #fff 15%); .container {
height: 100%;
background-color: var(--ov-background-color);
display: flex;
}
#loading-container { #loading-container {
position: absolute; position: absolute;
@ -10,34 +14,19 @@
margin: auto; margin: auto;
text-align: -webkit-center; text-align: -webkit-center;
text-align: -moz-center; text-align: -moz-center;
color: #fff; color: var(--ov-text-primary-color);
} }
.container { #prejoin-card {
height: 100%;
background-color: var(--ov-secondary-color);
display: flex;
}
#features-container {
margin: auto;
width: 70vh;
height: 70vh;
margin-right: 0;
box-shadow: -6px 2px 20px 0px #0003;
background-color: var(--ov-accent-color);
}
#prejoin-frame {
display: grid; display: grid;
align-content: center; align-content: center;
margin: auto; margin: auto;
// margin-left: 0px; // margin-left: 0px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
width: 70vh; width: 70vh;
height: 85vh; height: 85vh;
padding: 20px; padding: 20px;
background-color: var(--ov-panel-background); background-color: var(--ov-surface-color);
box-shadow: 6px 4px 20px 0px #0003; box-shadow: 6px 4px 20px 0px #0003;
position: relative; position: relative;
} }
@ -50,20 +39,6 @@
font-size: 14px !important; font-size: 14px !important;
} }
#branding-logo {
position: absolute;
top: 10px;
left: 10px;
max-width: 50px;
}
#branding-logo {
border-radius: var(--ov-panel-radius);
max-width: 35px;
max-height: 35px;
margin-right: 10px;
}
.video-container { .video-container {
margin: auto; margin: auto;
min-height: 45vh; min-height: 45vh;
@ -77,9 +52,6 @@
position: relative; position: relative;
} }
.media-panel {
background-color: var(--ov-light-color);
}
.media-controls-container { .media-controls-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -107,10 +79,10 @@
} }
#join-button { #join-button {
background-color: var(--ov-tertiary-color); background-color: var(--ov-primary-action-color);
color: var(--ov-text-color); color: var(--ov-text-primary-color);
font-weight: bold; font-weight: bold;
border-radius: var(--ov-video-radius); border-radius: var(--ov-surface-radius);
width: 100%; width: 100%;
height: 50px; height: 50px;
} }
@ -119,7 +91,7 @@
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
color: var(--ov-warn-color); color: var(--ov-error-color);
} }
/* Styles for screens up to 768px wide */ /* Styles for screens up to 768px wide */
@ -128,7 +100,7 @@
.container { .container {
padding: 0px; padding: 0px;
} }
#prejoin-frame { #prejoin-card {
margin: auto; margin: auto;
height: 100%; height: 100%;
padding: 0px; padding: 0px;
@ -145,26 +117,6 @@
} }
} }
/* Styles for screens from 768px to 992px wide */
@media (min-width: 768px) and (max-width: 992px) {
/* Specific styles for medium screens */
}
/* Styles for screens from 992px to 1200px wide */
@media (min-width: 992px) and (max-width: 1200px) {
/* Specific styles for large screens */
}
/* Styles for screens over 1200px wide */
@media (min-width: 1200px) {
/* Specific styles for extra-large screens */
}
/* Styles for screens with vertical orientation */
@media (orientation: portrait) {
/* Specific styles for screens in portrait orientation */
}
/* Styles for screens with horizontal orientation */ /* Styles for screens with horizontal orientation */
@media (max-width: 800) and (orientation: landscape) { @media (max-width: 800) and (orientation: landscape) {
/* Specific styles for screens in landscape orientation */ /* Specific styles for screens in landscape orientation */

18
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss
View File

@ -1,5 +1,5 @@
#session-container { #session-container {
background-color: var(--ov-primary-color); background-color: var(--ov-background-color);
/* min-width: 400px; */ /* min-width: 400px; */
height: 100%; height: 100%;
} }
@ -12,7 +12,7 @@
margin: auto; margin: auto;
text-align: -webkit-center; text-align: -webkit-center;
text-align: -moz-center; text-align: -moz-center;
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
.sidenav-container { .sidenav-container {
@ -29,7 +29,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 380px; width: 380px;
background-color: var(--ov-primary-color); background-color: var(--ov-background-color);
border-left: none; border-left: none;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
@ -57,21 +57,21 @@
} }
.mat-drawer-container { .mat-drawer-container {
background-color: var(--ov-primary-color); background-color: var(--ov-background-color);
} }
#toolbar-container, #toolbar-container,
#footer-container { #footer-container {
background-color: var(--ov-primary-color); background-color: var(--ov-background-color);
/* min-width: 400px !important; */ /* min-width: 400px !important; */
width: 100%; width: 100%;
height: 70px; height: 70px;
} }
#footer { #footer {
color: #ffffff; color: var(--ov-text-primary-color);
height: 25px; height: 25px;
background-color: #333333; background-color: var(--ov-background-color);
padding: 0 14px 0 0; padding: 0 14px 0 0;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -111,12 +111,12 @@
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
::ng-deep .mat-form-field-label { ::ng-deep .mat-form-field-label {
color: var(--ov-panel-text-color) !important; color: var(--ov-text-primary-color) !important;
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
::ng-deep .mat-mdc-form-field.mat-focused .mat-form-field-ripple { ::ng-deep .mat-mdc-form-field.mat-focused .mat-form-field-ripple {
background-color: var(--ov-panel-text-color) !important; background-color: var(--ov-text-primary-color) !important;
} }
::ng-deep .mat-drawer { ::ng-deep .mat-drawer {

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.html
View File

@ -1,4 +1,4 @@
<div class="device-container-element"> <div class="device-container-element" [class.mute-btn]="!isMicrophoneEnabled">
<!-- <button mat-stroked-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" id="audio-devices-menu"> <!-- <button mat-stroked-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" id="audio-devices-menu">
<mat-icon class="audio-icon">mic</mat-icon> <mat-icon class="audio-icon">mic</mat-icon>
<span class="device-label"> {{ microphoneSelected.label }} </span> <span class="device-label"> {{ microphoneSelected.label }} </span>
@ -22,7 +22,7 @@
id="microphone-button" id="microphone-button"
[disableRipple]="true" [disableRipple]="true"
[disabled]="!hasAudioDevices || microphoneStatusChanging" [disabled]="!hasAudioDevices || microphoneStatusChanging"
[class.warn-btn]="!isMicrophoneEnabled" [class.mute-btn]="!isMicrophoneEnabled"
(click)="toggleMic($event)" (click)="toggleMic($event)"
[matTooltip]="isMicrophoneEnabled ? ('TOOLBAR.MUTE_AUDIO' | translate) : ('TOOLBAR.UNMUTE_AUDIO' | translate)" [matTooltip]="isMicrophoneEnabled ? ('TOOLBAR.MUTE_AUDIO' | translate) : ('TOOLBAR.UNMUTE_AUDIO' | translate)"
[matTooltipDisabled]="!hasAudioDevices" [matTooltipDisabled]="!hasAudioDevices"
@ -46,7 +46,7 @@
<div id="audio-devices-form" *ngIf="microphones.length === 0"> <div id="audio-devices-form" *ngIf="microphones.length === 0">
<div id="mat-select-trigger"> <div id="mat-select-trigger">
<button mat-icon-button id="microphone-button" class="warn-btn" [disabled]="true"> <button mat-icon-button id="microphone-button" class="mute-btn" [disabled]="true">
<mat-icon id="mic_off"> mic_off </mat-icon> <mat-icon id="mic_off"> mic_off </mat-icon>
</button> </button>
<span id="audio-devices-not-found"> {{ 'PREJOIN.NO_AUDIO_DEVICE' | translate }} </span> <span id="audio-devices-not-found"> {{ 'PREJOIN.NO_AUDIO_DEVICE' | translate }} </span>

46
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss
View File

@ -1,9 +1,12 @@
:host { $ov-selection-color: #d4d6d7;
--ov-light-color-darker: color-mix(in srgb, var(--ov-light-color), #000 15%);
:host {
.device-container-element { .device-container-element {
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
border: 1px solid var(--ov-light-color-darker); border: 1px solid $ov-selection-color;
}
.device-container-element.mute-btn {
border: 1px solid var(--ov-error-color);
} }
#audio-devices-form { #audio-devices-form {
width: 100%; width: 100%;
@ -15,7 +18,7 @@
} }
#microphone-button { #microphone-button {
color: var(--ov-secondary-color); color:#000000
} }
::ng-deep .mat-mdc-text-field-wrapper, ::ng-deep .mat-mdc-text-field-wrapper,
@ -31,15 +34,15 @@
::ng-deep .mat-mdc-text-field-wrapper { ::ng-deep .mat-mdc-text-field-wrapper {
padding-left: 0px; padding-left: 0px;
padding-right: 10px; padding-right: 10px;
background-color: var(--ov-panel-background) !important; background-color: var(--ov-surface-color) !important;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
} }
::ng-deep .mdc-button--unelevated { ::ng-deep .mdc-button--unelevated {
border-top-left-radius: var(--ov-panel-radius); border-top-left-radius: var(--ov-surface-radius);
border-bottom-left-radius: var(--ov-panel-radius); border-bottom-left-radius: var(--ov-surface-radius);
border-bottom-right-radius: 0px !important; border-bottom-right-radius: 0px !important;
border-top-right-radius: 0px !important; border-top-right-radius: 0px !important;
background-color: var(--ov-light-color-darker) !important; background-color: $ov-selection-color !important;
width: 48px !important; width: 48px !important;
min-width: 48px !important; min-width: 48px !important;
padding: 0; padding: 0;
@ -72,13 +75,28 @@
} }
::ng-deep .mat-mdc-button-touch-target { ::ng-deep .mat-mdc-button-touch-target {
border-radius: var(--ov-panel-radius) !important; border-radius: var(--ov-surface-radius) !important;
} }
.warn-btn { .mute-btn {
color: var(--ov-warn-color) !important; color: #ffffff !important;
background-color: var(--ov-error-color) !important;
} }
} }
::ng-deep .mat-mdc-select-panel { ::ng-deep .mat-mdc-select-panel {
background-color: var(--ov-panel-background) !important; background-color: var(--ov-surface-color) !important;
}
::ng-deep .mat-mdc-option {
padding: 10px 10px !important;
}
::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
color: var(--ov-primary-action-color) !important;
}
::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
border-bottom-color: var(--ov-primary-action-color) !important;
}
::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple) {
background-color: $ov-selection-color !important;
} }

8
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/captions/captions.component.scss
View File

@ -3,15 +3,15 @@
} }
.section-description { .section-description {
color: var(--ov-panel-text-color); color: var(--ov-text-primary-color);
font-size: 12px; font-size: 12px;
padding: 0px 5px; padding: 0px 5px;
display: block; display: block;
} }
.lang-button { .lang-button {
background-color: var(--ov-logo-background-color); background-color: var(--ov-secondary-action-color);
color: var(--ov-text-color); color: var(--ov-text-primary-color);
} }
.pro-feature { .pro-feature {
@ -24,7 +24,7 @@
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar { ::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar {
background-color: var(--ov-tertiary-color); background-color: var(--ov-accent-action-color);
} }
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */

10
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.scss
View File

@ -1,12 +1,10 @@
$ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
.lang-button { .lang-button {
background-color: var(--ov-secondary-color) !important; background-color: var(--ov-primary-action-color) !important;
color: var(--ov-text-color); color: var(--ov-secondary-action-color);
} }
::ng-deep .mat-mdc-menu-panel { ::ng-deep .mat-mdc-menu-panel {
border-radius: var(--ov-panel-radius) !important; border-radius: var(--ov-surface-radius) !important;
background-color: var(--ov-panel-background) !important; background-color: var(--ov-surface-color) !important;
border: 1px solid $ov-light-color-lighter !important;
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2) !important; box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2) !important;
} }

30
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss
View File

@ -1,14 +1,14 @@
$ov-selection-color: #d4d6d7;
:host { :host {
--ov-light-color-darker: color-mix(in srgb, var(--ov-light-color), #000 15%);
#name-input-container { #name-input-container {
height: 70px; height: 70px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
} }
#name-input-container mat-form-field { #name-input-container mat-form-field {
width: 100%; width: 100%;
color: var(--ov-secondary-color); color: var(--ov-secondary-action-color);
} }
::ng-deep .mat-mdc-form-field-infix { ::ng-deep .mat-mdc-form-field-infix {
@ -18,18 +18,18 @@
::ng-deep .mat-mdc-text-field-wrapper { ::ng-deep .mat-mdc-text-field-wrapper {
padding: 0; padding: 0;
height: 70px; height: 70px;
background-color: var(--ov-panel-background) !important; background-color: var(--ov-surface-color) !important;
} }
::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before { ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
border: 0px !important; border: 0px !important;
} }
::ng-deep .mdc-button--unelevated { ::ng-deep .mdc-button--unelevated {
border-top-left-radius: var(--ov-panel-radius) !important; border-top-left-radius: var(--ov-surface-radius) !important;
border-bottom-left-radius: var(--ov-panel-radius) !important; border-bottom-left-radius: var(--ov-surface-radius) !important;
border-bottom-right-radius: 0px !important; border-bottom-right-radius: 0px !important;
border-top-right-radius: 0px !important; border-top-right-radius: 0px !important;
background-color: var(--ov-light-color-darker) !important; background-color: $ov-selection-color !important;
width: 48px !important; width: 48px !important;
min-width: 48px !important; min-width: 48px !important;
padding: 0; padding: 0;
@ -38,7 +38,7 @@
.error { .error {
::ng-deep .mdc-button--unelevated { ::ng-deep .mdc-button--unelevated {
background-color: var(--ov-warn-color) !important; background-color: var(--ov-error-color) !important;
} }
} }
@ -47,16 +47,20 @@
width: 24px; width: 24px;
font-size: 24px !important; font-size: 24px !important;
margin: auto; margin: auto;
color: var(--ov-secondary-color) !important; color: #000000 !important;
} }
input { input {
padding-left: 10px !important; padding-left: 10px !important;
border-top-right-radius: var(--ov-panel-radius) !important; border-top-right-radius: var(--ov-surface-radius) !important;
border-bottom-right-radius: var(--ov-panel-radius) !important; border-bottom-right-radius: var(--ov-surface-radius) !important;
border-bottom-left-radius: 0px !important; border-bottom-left-radius: 0px !important;
border-top-left-radius: 0px !important; border-top-left-radius: 0px !important;
border: 1px solid var(--ov-light-color-darker); border: 1px solid $ov-selection-color;
color: var(--ov-panel-text-color); color: #000000;
} }
} }
::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
color: var(--ov-primary-action-color) !important;
}

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html
View File

@ -1,4 +1,4 @@
<div class="device-container-element"> <div class="device-container-element" [class.mute-btn]="!isCameraEnabled">
<mat-form-field id="video-devices-form" *ngIf="cameras.length > 0"> <mat-form-field id="video-devices-form" *ngIf="cameras.length > 0">
<mat-select <mat-select
[disabled]="!hasVideoDevices" [disabled]="!hasVideoDevices"
@ -12,7 +12,7 @@
id="camera-button" id="camera-button"
[disableRipple]="true" [disableRipple]="true"
[disabled]="!hasVideoDevices || cameraStatusChanging" [disabled]="!hasVideoDevices || cameraStatusChanging"
[class.warn-btn]="!isCameraEnabled" [class.mute-btn]="!isCameraEnabled"
(click)="toggleCam($event)" (click)="toggleCam($event)"
[matTooltip]="isCameraEnabled ? ('TOOLBAR.STOP_VIDEO' | translate) : ('TOOLBAR.START_VIDEO' | translate)" [matTooltip]="isCameraEnabled ? ('TOOLBAR.STOP_VIDEO' | translate) : ('TOOLBAR.START_VIDEO' | translate)"
[matTooltipDisabled]="!hasVideoDevices" [matTooltipDisabled]="!hasVideoDevices"
@ -31,7 +31,7 @@
<div id="video-devices-form" *ngIf="cameras.length === 0"> <div id="video-devices-form" *ngIf="cameras.length === 0">
<div id="mat-select-trigger"> <div id="mat-select-trigger">
<button mat-icon-button id="camera-button" class="warn-btn" [disabled]="true"> <button mat-icon-button id="camera-button" class="mute-btn" [disabled]="true">
<mat-icon id="videocam_off"> videocam_off </mat-icon> <mat-icon id="videocam_off"> videocam_off </mat-icon>
</button> </button>
<span id="video-devices-not-found"> {{ 'PREJOIN.NO_VIDEO_DEVICE' | translate }} </span> <span id="video-devices-not-found"> {{ 'PREJOIN.NO_VIDEO_DEVICE' | translate }} </span>

49
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss
View File

@ -1,9 +1,11 @@
$ov-selection-color: #d4d6d7;
:host { :host {
--ov-light-color-darker: color-mix(in srgb, var(--ov-light-color), #000 15%);
.device-container-element { .device-container-element {
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
border: 1px solid var(--ov-light-color-darker); border: 1px solid $ov-selection-color;
}
.device-container-element.mute-btn {
border: 1px solid var(--ov-error-color);
} }
#video-devices-form { #video-devices-form {
width: 100%; width: 100%;
@ -15,7 +17,7 @@
} }
#camera-button { #camera-button {
color: var(--ov-secondary-color); color: #000000;
} }
::ng-deep .mat-mdc-text-field-wrapper, ::ng-deep .mat-mdc-text-field-wrapper,
@ -31,15 +33,15 @@
::ng-deep .mat-mdc-text-field-wrapper { ::ng-deep .mat-mdc-text-field-wrapper {
padding-left: 0px; padding-left: 0px;
padding-right: 10px; padding-right: 10px;
background-color: var(--ov-panel-background) !important; background-color: var(--ov-surface-color) !important;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
} }
::ng-deep .mdc-button--unelevated { ::ng-deep .mdc-button--unelevated {
border-top-left-radius: var(--ov-panel-radius); border-top-left-radius: var(--ov-surface-radius);
border-bottom-left-radius: var(--ov-panel-radius); border-bottom-left-radius: var(--ov-surface-radius);
border-bottom-right-radius: 0px !important; border-bottom-right-radius: 0px !important;
border-top-right-radius: 0px !important; border-top-right-radius: 0px !important;
background-color: var(--ov-light-color-darker) !important; background-color: $ov-selection-color !important;
width: 48px !important; width: 48px !important;
min-width: 48px !important; min-width: 48px !important;
padding: 0; padding: 0;
@ -71,13 +73,32 @@
} }
::ng-deep .mat-mdc-button-touch-target { ::ng-deep .mat-mdc-button-touch-target {
border-radius: var(--ov-panel-radius) !important; border-radius: var(--ov-surface-radius) !important;
} }
.warn-btn { .mute-btn {
color: var(--ov-warn-color) !important; color: #ffffff !important;
background-color: var(--ov-error-color) !important;
} }
} }
::ng-deep .mat-mdc-select-panel { ::ng-deep .mat-mdc-select-panel {
background-color: var(--ov-panel-background) !important; background-color: var(--ov-surface-color) !important;
}
::ng-deep .mat-mdc-select-panel {
background-color: var(--ov-surface-color) !important;
}
::ng-deep .mat-mdc-option {
padding: 10px 10px !important;
}
::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
color: var(--ov-primary-action-color-lighter) !important;
}
::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
border-bottom-color: var(--ov-primary-action-color-lighter) !important;
}
::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple) {
background-color: $ov-selection-color !important;
} }

33
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss
View File

@ -1,3 +1,5 @@
$ov-video-elements-bg-color: var(--ov-primary-action-color);;
$ov-video-elements-text-color: #ffffff;
:host { :host {
/* Fixes layout bug. The OV_root is created with the entire layout width and it has a weird UX behaviour */ /* Fixes layout bug. The OV_root is created with the entire layout width and it has a weird UX behaviour */
.no-size { .no-size {
@ -5,21 +7,20 @@
width: 0px !important; width: 0px !important;
} }
.participant-name-container {
background-color: $ov-video-elements-bg-color;
padding: 5px;
color: $ov-video-elements-text-color;
font-weight: bold;
border-radius: var(--ov-video-radius);
}
.participant-name { .participant-name {
padding: 0px; padding: 0px;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
border-radius: var(--ov-video-radius); border-radius: var(--ov-video-radius);
color: var(--ov-text-color);
font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif; font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
} }
.participant-name-container {
background-color: var(--ov-secondary-color);
padding: 5px;
color: var(--ov-text-color);
font-weight: bold;
border-radius: var(--ov-video-radius);
}
#audio-wave-container { #audio-wave-container {
position: absolute; position: absolute;
@ -42,14 +43,14 @@
} }
.active-btn { .active-btn {
color: var(--ov-tertiary-color) !important; color: var(--ov-accent-action-color) !important;
} }
.muted-btn { .muted-btn {
color: var(--ov-warn-color) !important; color: var(--ov-error-color) !important;
} }
.stream-video-controls { .stream-video-controls {
background-color: var(--ov-secondary-color); background-color: $ov-video-elements-bg-color;
border-radius: var(--ov-video-radius); border-radius: var(--ov-video-radius);
width: fit-content; width: fit-content;
height: 50px; height: 50px;
@ -62,9 +63,9 @@
right: 0; right: 0;
left: 0; left: 0;
top: 0; top: 0;
// border: 2px solid var(--ov-text-color); // border: 2px solid var(--ov-text-primary-color);
button { button {
color: var(--ov-text-color); color: $ov-video-elements-text-color;
} }
} }
@ -81,7 +82,7 @@
#status-mic, #status-mic,
#status-muted-forcibly { #status-muted-forcibly {
color: var(--ov-warn-color); color: var(--ov-error-color);
font-size: 24px; font-size: 24px;
margin: 5px; margin: 5px;
} }
@ -95,11 +96,11 @@
overflow: hidden; overflow: hidden;
background-color: transparent; background-color: transparent;
border-radius: var(--ov-video-radius); border-radius: var(--ov-video-radius);
border: 2px solid var(--ov-primary-color); border: 2px solid var(--ov-background-color);
box-sizing: border-box; box-sizing: border-box;
} }
.OV_stream.speaking { .OV_stream.speaking {
border-color: var(--ov-tertiary-color); border-color: var(--ov-accent-action-color);
} }
} }

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
View File

@ -137,7 +137,7 @@
<button <button
*ngIf="!isMinimal && showBroadcastingButton" *ngIf="!isMinimal && showBroadcastingButton"
mat-menu-item mat-menu-item
id="broadcasting-btn" id="toolbar-broadcasting-btn"
[disabled]="broadcastingStatus === _broadcastingStatus.STARTING || recordingStatus === _broadcastingStatus.STOPPING" [disabled]="broadcastingStatus === _broadcastingStatus.STARTING || recordingStatus === _broadcastingStatus.STOPPING"
(click)="toggleBroadcasting()" (click)="toggleBroadcasting()"
> >

47
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
View File

@ -1,13 +1,12 @@
$ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%); $ov-broadcasting-blinking-color: #5903ca;
$ov-recording-blinking-color: #eb5144;
:host { :host {
--broadcasting-blinking-color: #5903ca;
--recording-blinking-color: var(--ov-warn-color);
#toolbar { #toolbar {
height: 100%; height: 100%;
background-color: transparent; background-color: transparent;
color: var(--ov-text-color); color: var(--ov-text-primary-color);
.mat-mdc-icon-button { .mat-mdc-icon-button {
--mat-mdc-button-persistent-ripple-color: transparent !important; --mat-mdc-button-persistent-ripple-color: transparent !important;
@ -59,7 +58,7 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
#media-buttons-container button, #media-buttons-container button,
#menu-buttons-container button { #menu-buttons-container button {
border-radius: var(--ov-buttons-radius); border-radius: var(--ov-buttons-radius);
color: var(--ov-text-color); color: var(--ov-secondary-action-color);
} }
#media-buttons-container > button, #media-buttons-container > button,
@ -69,26 +68,26 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
::ng-deep #media-buttons-container:not(#media-buttons-container > button) button { ::ng-deep #media-buttons-container:not(#media-buttons-container > button) button {
// width: 40px; // width: 40px;
// height: 40px; // height: 40px;
background-color: var(--ov-secondary-color); background-color: var(--ov-primary-action-color);
color: var(--ov-text-color); color: var(--ov-secondary-action-color);
margin: 6px; margin: 6px;
} }
.warn-btn { .warn-btn {
background-color: var(--ov-warn-color) !important; background-color: var(--ov-error-color) !important;
} }
#disable-screen-button > mat-icon { #disable-screen-button > mat-icon {
color: var(--ov-warn-color) !important; color: var(--ov-error-color) !important;
} }
.active-btn, .active-btn,
::ng-deep .active-btn { ::ng-deep .active-btn {
background-color: var(--ov-tertiary-color) !important; background-color: var(--ov-accent-action-color) !important;
} }
#branding-logo { #branding-logo {
background-color: var(--ov-logo-background-color); background-color: var(--ov-primary-action-color);
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
max-width: 35px; max-width: 35px;
max-height: 35px; max-height: 35px;
padding: 10px; padding: 10px;
@ -119,7 +118,7 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
.recording-tag, .recording-tag,
.broadcasting-tag { .broadcasting-tag {
padding: 0 10px; padding: 0 10px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-surface-radius);
width: fit-content; width: fit-content;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
@ -128,10 +127,10 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
} }
.recording-tag { .recording-tag {
background-color: var(--ov-warn-color); background-color: var(--ov-error-color);
} }
.broadcasting-tag { .broadcasting-tag {
background-color: var(--broadcasting-blinking-color); background-color: $ov-broadcasting-blinking-color;
} }
.recording-tag mat-icon, .recording-tag mat-icon,
@ -147,7 +146,7 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
} }
#leave-btn { #leave-btn {
background-color: var(--ov-warn-color) !important; background-color: var(--ov-error-color) !important;
border-radius: var(--ov-leave-button-radius) !important; border-radius: var(--ov-leave-button-radius) !important;
width: 65px !important; width: 65px !important;
} }
@ -181,14 +180,14 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
/* Animation for recording blinking */ /* Animation for recording blinking */
@keyframes blinker-recording { @keyframes blinker-recording {
50% { 50% {
background-color: var(--recording-blinking-color); background-color: $ov-recording-blinking-color;
} }
} }
/* Animation for broadcasting blinking */ /* Animation for broadcasting blinking */
@keyframes blinker-broadcasting { @keyframes blinker-broadcasting {
50% { 50% {
background-color: var(--broadcasting-blinking-color); background-color: $ov-broadcasting-blinking-color;
} }
} }
@ -234,13 +233,15 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
} }
} }
::ng-deep #broadcasting-btn > .mat-icon { ::ng-deep #toolbar-broadcasting-btn > .mat-icon {
color: #5903ca !important; color: $ov-broadcasting-blinking-color !important;
}
::ng-deep #recording-btn > .mat-icon {
color: $ov-recording-blinking-color !important;
} }
::ng-deep .mat-mdc-menu-panel { ::ng-deep .mat-mdc-menu-panel {
border-radius: var(--ov-panel-radius) !important; border-radius: var(--ov-surface-radius) !important;
background-color: var(--ov-panel-background) !important; background-color: var(--ov-surface-color) !important;
border: 1px solid $ov-light-color-lighter !important;
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2) !important; box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2) !important;
} }

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.scss
View File

@ -3,7 +3,7 @@
height: 100%; height: 100%;
} }
#vc-container { #vc-container {
background-color: var(--ov-primary-color); background-color: var(--ov-background-color);
} }
#pre-join-container { #pre-join-container {
@ -11,7 +11,7 @@
} }
.error-icon { .error-icon {
color: var(--ov-warn-color); color: var(--ov-error-color);
} }
#spinner { #spinner {
@ -26,7 +26,7 @@
} }
::ng-deep .mat-mdc-progress-spinner { ::ng-deep .mat-mdc-progress-spinner {
--mdc-circular-progress-active-indicator-color: var(--ov-tertiary-color); --mdc-circular-progress-active-indicator-color: var(--ov-accent-action-color);
} }
/* Private css variables */ /* Private css variables */

48
openvidu-components-angular/src/styles.scss
View File

@ -27,21 +27,47 @@ body {
// Custom openvidu-components styles // Custom openvidu-components styles
:root { :root {
--ov-primary-color: #303030; --ov-background-color: #1f2020;
--ov-secondary-color: #3e3f3f; --ov-surface-color: #ffffff;
--ov-tertiary-color: #598eff;
--ov-warn-color: #eb5144;
--ov-accent-color: #ffae35;
--ov-light-color: #e6e6e6;
--ov-logo-background-color: #3a3d3d; --ov-primary-action-color: #273235;
--ov-text-color: #ffffff; --ov-secondary-action-color: #f1f1f1;
--ov-accent-action-color: #0089ab;
--ov-panel-text-color: #1d1d1d; --ov-error-color: #eb5144;
--ov-panel-background: #ffffff; --ov-warn-color: #ffba53;
--ov-text-primary-color: #ffffff;
--ov-text-surface-color: #1d1d1d;
--ov-buttons-radius: 50%; --ov-buttons-radius: 50%;
--ov-leave-button-radius: 10px; --ov-leave-button-radius: 10px;
--ov-video-radius: 5px; --ov-video-radius: 5px;
--ov-panel-radius: 5px; --ov-surface-radius: 5px;
} }
/*
--ov-primary-color: #303030; -> --ov-background-color
+ -> --ov-primary-action-color
--ov-secondary-color: #3e3f3f; -> --ov-secondary-action-color
--ov-tertiary-color: #598eff; -> REMOVED (se usará --ov-accent-color)
--ov-warn-color: #eb5144; -> --ov-warn-color
+ -> --ov-error-color
--ov-accent-color: #ffae35; -> --ov-accent-action-color
--ov-light-color: #e6e6e6; -> REMOVED
--ov-logo-background-color: #3a3d3d; -> REMOVED (se usará --ov-secondary-color)
--ov-text-color: #ffffff; -> --ov-text-primary-color
-> --ov-text-secondary-color
--ov-panel-text-color: #1d1d1d; -> --ov-text-color-surface
--ov-panel-background: #ffffff; -> --ov-surface-color
--ov-buttons-radius: 50%;
--ov-leave-button-radius: 10px;
--ov-video-radius: 5px;
--ov-panel-radius: 5px; -> --ov-surface-radius
*/