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>
:root {
--ov-primary-color: #303030;
--ov-secondary-color: #3e3f3f;
--ov-tertiary-color: #598eff;
--ov-warn-color: #eb5144;
--ov-accent-color: #ffae35;
--ov-background-color: #303030;
--ov-secondary-action-color: #3e3f3f;
--ov-accent-action-color: #598eff;
--ov-error-color: #eb5144;
--ov-accent-action-color: #ffae35;
--ov-light-color: #e6e6e6;
--ov-logo-background-color: #3a3d3d;
--ov-text-color: #ffffff;
--ov-secondary-action-color: #3a3d3d;
--ov-text-primary-color: #ffffff;
--ov-panel-text-color: #1d1d1d;
--ov-panel-background: #ffffff;
--ov-text-primary-color: #1d1d1d;
--ov-surface-color: #ffffff;
--ov-buttons-radius: 50%;
--ov-leave-button-radius: 10px;
--ov-video-radius: 5px;
--ov-panel-radius: 5px;
--ov-surface-radius: 5px;
}
</style>
</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
:root {
--ov-primary-color: #303030;
--ov-secondary-color: #3e3f3f;
--ov-tertiary-color: #598eff;
--ov-warn-color: #eb5144;
--ov-accent-color: #ffae35;
--ov-light-color: #e6e6e6;
/* Basic colors */
--ov-background-color: #303030; // Background color
--ov-surface-color: #ffffff; // Surfaces colors (panels, dialogs)
--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;
--ov-panel-background: #ffffff;
/* Status colors */
--ov-error-color: #eb5144; // Error color
--ov-warn-color: #ffba53; // Warning color
/* Radius */
--ov-buttons-radius: 50%;
--ov-leave-button-radius: 10px;
--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 {
height: 50px;
background-color: var(--ov-secondary-color);
color: var(--ov-text-color);
background-color: var(--ov-secondary-action-color);
color: var(--ov-text-primary-color);
}
.logout-btn {
color: var(--ov-text-color);
color: var(--ov-text-primary-color);
}
.dashboard-body {
background-color: var(--ov-secondary-color);
background-color: var(--ov-secondary-action-color);
height: calc(100% - 75px);
}
.toolbar-spacer {
@ -41,17 +41,17 @@
#sort-menu-btn {
margin-left: 5px;
background-color: var(--ov-panel-background);
color: var(--ov-panel-text-color);
background-color: var(--ov-surface-color);
color: var(--ov-text-primary-color);
}
.search-bar {
height: 95%;
width: 30%;
display: flex;
background-color: var(--ov-panel-background);
background-color: var(--ov-surface-color);
padding: 0px 10px;
border-radius: var(--ov-panel-radius);
border-radius: var(--ov-surface-radius);
}
#search-input {
@ -87,7 +87,7 @@
}
.recordings-container {
background-color: var(--ov-secondary-color);
background-color: var(--ov-secondary-action-color);
height: calc(100% - 50px);
overflow-y: auto;
overflow-x: hidden;
@ -106,7 +106,7 @@
display: flex;
justify-content: center;
align-items: center;
background-color: var(--ov-panel-background);
background-color: var(--ov-surface-color);
}
}
@ -135,18 +135,18 @@
margin-right: -50%;
top: 50%;
left: 50%;
background-color: var(--ov-logo-background-color);
border-radius: var(--ov-panel-radius);
background-color: var(--ov-secondary-action-color);
border-radius: var(--ov-surface-radius);
}
.video-btns button #play {
color: var(--ov-text-color);
color: var(--ov-text-primary-color);
}
.video-btns button #download {
color: var(--ov-tertiary-color);
color: var(--ov-accent-action-color);
}
.video-btns button #delete {
color: var(--ov-warn-color);
color: var(--ov-error-color);
}
.video-info-container > div {
@ -167,7 +167,7 @@
.video-card-tag {
font-size: 13px;
color: var(--ov-panel-text-color);
color: var(--ov-text-primary-color);
font-weight: bold;
}
@ -204,16 +204,16 @@
transform: translateX(-50%);
.load-more-btn {
background-color: var(--ov-panel-background);
color: var(--ov-panel-text-color);
border-radius: var(--ov-panel-radius);
background-color: var(--ov-surface-color);
color: var(--ov-text-primary-color);
border-radius: var(--ov-surface-radius);
}
}
.footer {
height: 25px;
background-color: var(--ov-primary-color);
color: var(--ov-text-color);
background-color: var(--ov-background-color);
color: var(--ov-text-primary-color);
position: absolute;
bottom: 0;
left: 0;
@ -225,7 +225,7 @@
gap: 2px;
}
.footer a {
color: var(--ov-tertiary-color);
color: var(--ov-accent-action-color);
padding-left: 5px;
}
@ -234,7 +234,7 @@
width: 100%;
display: table;
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. */
::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 {
height: 50px;
background-color: var(--ov-primary-color);
color: var(--ov-text-color);
background-color: var(--ov-background-color);
color: var(--ov-text-primary-color);
}
.center-container {
@ -9,12 +9,12 @@
justify-content: center;
align-items: center;
height: 100vh;
background-color: var(--ov-secondary-color);
background-color: var(--ov-secondary-action-color);
}
.card-container {
text-align: center;
background-color: var(--ov-panel-background);
background-color: var(--ov-surface-color);
padding: 10px;
max-width: 300px;
min-width: 300px;
@ -23,8 +23,8 @@
}
.form-btn {
background-color: var(--ov-tertiary-color) !important;
color: var(--ov-text-color) !important;
background-color: var(--ov-accent-action-color) !important;
color: var(--ov-text-primary-color) !important;
}
.form-field,
@ -33,5 +33,5 @@
}
::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{
background-color: var(--ov-tertiary-color);
background-color: var(--ov-accent-action-color);
padding: 5px;
max-width: 15px;
max-height: 15px;
height: 15px;
width: 15px;
border-radius: var(--ov-video-radius);
border-radius: var(--ov-surface-radius);
display: flex;
justify-content: space-between;
}
@ -38,7 +38,7 @@
margin: auto;
height: 80%;
width: 3px;
background: var(--ov-text-color);
background: var(--ov-text-primary-color);
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;
width: 70px;
border-radius: var(--ov-video-radius);
border: 2px solid var(--ov-text-color);
border: 2px solid var(--ov-text-primary-color);
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 {
display: grid;
text-align: center;
color: var(--ov-text-color);
color: var(--ov-text-primary-color);
font-size: 18px;
}
@ -43,7 +43,7 @@ mat-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 {
color: var(--ov-text-color);
background-color: var(--ov-secondary-color);
color: var(--ov-text-primary-color);
background-color: var(--ov-secondary-action-color);
}
#caption-settings-icon {
font-size: 15px;
@ -190,12 +190,12 @@ mat-spinner {
.caption-text,
#speaker {
color: var(--ov-text-color);
color: var(--ov-text-primary-color);
font-family: 'Roboto', arial, sans-serif;
}
.caption-text {
background-color: var(--ov-logo-background-color);
background-color: var(--ov-secondary-action-color);
padding: 4.5px;
line-height: 1.6;
word-break: break-word;

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

@ -9,11 +9,31 @@ import { MatDialogRef } from '@angular/material/dialog';
template: `
<div mat-dialog-content>{{ 'PANEL.RECORDING.DELETE_QUESTION' | translate }}</div>
<div mat-dialog-actions>
<button mat-button (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 mat-button [disableRipple]="true" (click)="close()">{{ 'PANEL.RECORDING.CANCEL' | translate }}</button>
<button [disableRipple]="true" mat-button cdkFocusInitial (click)="close(true)" id="delete-recording-confirm-btn">
{{ 'PANEL.RECORDING.DELETE' | translate }}
</button>
</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 {
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>
<div mat-dialog-content id="openvidu-dialog">{{ data.description }}</div>
<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>
`,
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 {
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() {
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>
</div>
<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>
`,
styles: [
`
::ng-deep .mat-mdc-dialog-surface {
background-color: var(--ov-surface-color);
border-radius: var(--ov-surface-radius);
}
video {
max-height: 64vh;
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 * {
color: #ffffff;
color: var(--ov-text-primary-color);
margin: 0;
padding: 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;
width: 100%;
height: 100%;
color: #ffffff;
color: var(--ov-text-primary-color);
margin: 0;
padding: 0;
border: 0;

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

@ -8,14 +8,15 @@
.activity-icon {
display: inherit;
background-color: var(--ov-light-color);
border-radius: var(--ov-panel-radius);
background-color: var(--ov-secondary-action-color);
border-radius: var(--ov-surface-radius);
margin: 10px 0px !important;
padding: 10px;
}
.activity-title, .activity-subtitle {
color: var(--ov-panel-text-color);
.activity-title,
.activity-subtitle {
color: var(--ov-text-surface-color);
}
.activity-subtitle {
@ -46,6 +47,11 @@
::ng-deep .mat-expansion-panel-header {
padding: 0px 5px !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,
@ -53,6 +59,10 @@
padding: 0px !important;
}
::ng-deep mat-list mat-list-item {
cursor: pointer !important;
}
::ng-deep mat-expansion-panel .mat-expansion-panel-body {
padding: 0px !important;
min-height: 400px;
@ -63,14 +73,16 @@
::ng-deep .mat-expansion-panel {
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 {
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;
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-list>
<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 {
color: var(--ov-text-color);
color: var(--ov-text-surface-color);
display: inline;
padding: 3px;
font-size: 11px;
border-radius: var(--ov-panel-radius);
border-radius: var(--ov-surface-radius);
}
.time-container {
@ -11,19 +13,19 @@
}
.error-text {
color: var(--ov-warn-color);
color: var(--ov-error-color);
font-style: italic;
font-size: 14px;
}
#broadcasting-icon {
color: #5903ca;
color: var(--ov-primary-action-color) !important;
}
.broadcasting-duration {
background-color: var(--ov-light-color);
background-color: var(--ov-secondary-action-color);
padding: 4px 8px;
border-radius: var(--ov-panel-radius);
border-radius: var(--ov-surface-radius);
font-weight: 500;
}
@ -34,27 +36,27 @@
}
.started {
background-color: #5903ca !important;
color: var(--ov-text-color);
background-color: $ov-broadcasting-color !important;
color: var(--ov-text-primary-color);
}
.activity-icon.started {
background-color: #5903ca !important;
color: var(--ov-text-color);
background-color: $ov-broadcasting-color !important;
color: var(--ov-text-primary-color);
}
.failed {
background-color: var(--ov-warn-color) !important;
color: var(--ov-text-color);
background-color: var(--ov-error-color) !important;
color: var(--ov-text-primary-color);
}
.stopped {
background-color: var(--ov-light-color);
color: var(--ov-panel-text-color) !important;
background-color: var(--ov-secondary-action-color);
color: var(--ov-text-surface-color) !important;
}
.starting {
background-color: #ffd79b !important;
color: var(--ov-panel-text-color) !important;
background-color: var(--ov-warn-color) !important;
color: var(--ov-text-primary-color) !important;
}
.panel-body-container {
@ -72,7 +74,7 @@
}
.broadcasting-error {
color: var(--ov-warn-color);
color: var(--ov-error-color);
font-weight: 600;
}
.broadcasting-name {
@ -92,13 +94,13 @@
/* #start-broadcasting-btn {
width: 100%;
background-color: var(--ov-tertiary-color);
color: var(--ov-text-color);
background-color: var(--ov-accent-action-color);
color: var(--ov-text-primary-color);
} */
#stop-broadcasting-btn {
/* background-color: var(--ov-warn-color); */
color: var(--ov-warn-color);
/* background-color: var(--ov-error-color); */
color: var(--ov-error-color);
}
#reset-broadcasting-status-btn {
@ -122,10 +124,10 @@ mat-expansion-panel {
.input-container {
height: 25px;
display: flex;
background-color: var(--ov-light-color);
background-color: var(--ov-secondary-action-color);
padding: 10px;
margin: 10px;
border-radius: var(--ov-panel-radius);
border-radius: var(--ov-surface-radius);
order: 3;
justify-content: space-evenly;
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 {
#recording-status {
color: var(--ov-text-color);
color: var(--ov-text-primary-color);
display: inline;
padding: 3px;
font-size: 11px;
border-radius: var(--ov-panel-radius);
border-radius: var(--ov-surface-radius);
}
.recording-title {
@ -23,13 +23,13 @@
flex-wrap: wrap;
height: auto;
align-content: center;
color: var(--ov-panel-text-color) !important;
color: var(--ov-text-surface-color) !important;
}
.recording-duration {
background-color: var(--ov-light-color);
background-color: var(--ov-secondary-action-color);
padding: 4px 8px;
border-radius: var(--ov-panel-radius);
border-radius: var(--ov-surface-radius);
font-weight: 500;
}
@ -41,22 +41,22 @@
.started {
background-color: #3b7430 !important;
color: var(--ov-text-color);
color: var(--ov-text-primary-color);
}
.activity-icon.started,
.failed {
background-color: var(--ov-warn-color) !important;
color: var(--ov-text-color);
background-color: var(--ov-error-color) !important;
color: var(--ov-text-primary-color);
}
.stopped {
background-color: var(--ov-light-color);
color: var(--ov-panel-text-color) !important;
background-color: var(--ov-secondary-action-color);
color: var(--ov-text-surface-color) !important;
}
.starting {
background-color: #ffd79b !important;
color: var(--ov-panel-text-color) !important;
background-color: var(--ov-warn-color) !important;
color: var(--ov-text-surface-color) !important;
}
.panel-body-container {
@ -74,7 +74,7 @@
}
.recording-error {
color: var(--ov-warn-color);
color: var(--ov-error-color);
font-weight: 600;
}
.recording-name {
@ -99,23 +99,23 @@
#start-recording-btn {
width: 100%;
background-color: var(--ov-tertiary-color);
color: var(--ov-text-color);
background-color: var(--ov-primary-action-color);
color: var(--ov-text-primary-color);
}
#stop-recording-btn {
width: 100%;
background-color: var(--ov-warn-color);
color: var(--ov-text-color);
background-color: var(--ov-error-color);
color: var(--ov-text-primary-color);
}
.delete-recording-btn {
color: var(--ov-warn-color);
color: var(--ov-error-color);
}
#reset-recording-status-btn {
width: 100%;
background-color: var(--ov-light-color);
background-color: var(--ov-secondary-action-color);
}
.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 {
margin: 5px;
border-radius: var(--ov-panel-radius);
background-color: var(--ov-light-color);
border-radius: var(--ov-surface-radius);
background-color: var(--ov-secondary-action-color);
color: var(--ov-primary-action-color);
width: 60px;
height: 60px;
line-height: inherit;
@ -19,7 +20,7 @@
}
.active-effect-btn {
border: 2px solid var(--ov-tertiary-color);
border: 2px solid var(--ov-accent-action-color);
}
#hard_blur-btn .mat-icon {
@ -34,7 +35,7 @@
.grid img {
max-width: 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. */

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 {
background-color: var(--ov-light-color);
color: var(--ov-panel-text-color);
color: var(--ov-text-primary-color);
text-align: center;
font-size: 12px;
flex: inherit;
@ -27,10 +28,11 @@
.input-container {
height: 65px;
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;
margin: 10px;
border-radius: var(--ov-panel-radius);
border-radius: var(--ov-surface-radius);
order: 3;
justify-content: space-evenly;
align-items: none;
@ -73,25 +75,27 @@
.participant-name-container p {
font-size: 13px;
font-weight: bold;
color: var(--ov-panel-text-color);
font-style: italic;
color: var(--ov-primary-action-color);
padding: 5px;
}
.chat-message {
position: relative;
border-radius: var(--ov-panel-radius);
border-radius: var(--ov-surface-radius);
padding: 8px;
color: #000000;
color: var(--ov-secondary-action-color);
width: auto;
max-width: 95%;
font-size: 13px;
font-size: 14px;
word-break: break-all;
background-color: var(--ov-primary-action-color);
}
#send-btn {
border-radius: var(--ov-panel-radius);
color: var(--ov-light-color);
background-color: var(--ov-tertiary-color);
border-radius: var(--ov-surface-radius);
color: var(--ov-secondary-action-color);
background-color: var(--ov-primary-action-color);
align-self: center;
height: 75px;
}
@ -119,5 +123,5 @@
}
::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 {
margin: 20px;
background-color: var(--ov-panel-background);
border-radius: var(--ov-panel-radius);
background-color: var(--ov-surface-color);
border-radius: var(--ov-surface-radius);
max-height: calc(100% - 40px);
min-height: calc(100% - 40px);
display: flex;
@ -41,6 +41,6 @@
}
::-webkit-scrollbar-track {
background: var(--ov-light-color);
background: var(--ov-secondary-action-color);
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 {
.participant-avatar {
display: inherit;
border-radius: var(--ov-panel-radius);
border-radius: var(--ov-surface-radius);
margin: auto !important;
padding: 10px;
color: var(--ov-panel-text-color);
color: var(--ov-text-surface-color);
}
.participant-subtitle {
@ -14,7 +14,7 @@
}
.participant-name {
font-weight: bold !important;
color: var(--ov-panel-text-color);
color: var(--ov-text-surface-color);
}
.participant-action-buttons {
@ -53,7 +53,7 @@
}
.warn-btn {
/* background-color: var(--ov-warn-color) !important; */
color: var(--ov-warn-color);
/* background-color: var(--ov-error-color) !important; */
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);
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 {
padding-right: 5px;
border-right: 1px solid var(--ov-secondary-color);
border-right: 1px solid var(--ov-secondary-action-color);
width: 170px;
}
.item-menu.mobile {
@ -29,17 +29,17 @@
}
mat-list-option[aria-selected='true'] {
background: var(--ov-tertiary-color) !important;
border-radius: var(--ov-panel-radius);
background: var(--ov-accent-action-color) !important;
border-radius: var(--ov-surface-radius);
::ng-deep .mat-mdc-list-item-unscoped-content,
mat-icon {
color: var(--ov-panel-background) !important;
color: var(--ov-secondary-action-color) !important;
}
}
mat-list-option[aria-selected='false'] {
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>
</div>
<div *ngIf="!isLoading" id="prejoin-frame">
<!-- <img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/lodgo.png" ovLogo /> -->
<div *ngIf="!isLoading" id="prejoin-card">
<ov-lang-selector *ngIf="!isMinimal" [compact]="true" class="lang-btn" (onLangChanged)="onLangChanged.emit($event)">
</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 {
--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 {
position: absolute;
@ -10,34 +14,19 @@
margin: auto;
text-align: -webkit-center;
text-align: -moz-center;
color: #fff;
color: var(--ov-text-primary-color);
}
.container {
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 {
#prejoin-card {
display: grid;
align-content: center;
margin: auto;
// margin-left: 0px;
border-radius: var(--ov-panel-radius);
border-radius: var(--ov-surface-radius);
width: 70vh;
height: 85vh;
padding: 20px;
background-color: var(--ov-panel-background);
background-color: var(--ov-surface-color);
box-shadow: 6px 4px 20px 0px #0003;
position: relative;
}
@ -50,20 +39,6 @@
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 {
margin: auto;
min-height: 45vh;
@ -77,9 +52,6 @@
position: relative;
}
.media-panel {
background-color: var(--ov-light-color);
}
.media-controls-container {
display: flex;
flex-wrap: wrap;
@ -107,10 +79,10 @@
}
#join-button {
background-color: var(--ov-tertiary-color);
color: var(--ov-text-color);
background-color: var(--ov-primary-action-color);
color: var(--ov-text-primary-color);
font-weight: bold;
border-radius: var(--ov-video-radius);
border-radius: var(--ov-surface-radius);
width: 100%;
height: 50px;
}
@ -119,7 +91,7 @@
font-size: 12px;
font-weight: bold;
font-style: italic;
color: var(--ov-warn-color);
color: var(--ov-error-color);
}
/* Styles for screens up to 768px wide */
@ -128,7 +100,7 @@
.container {
padding: 0px;
}
#prejoin-frame {
#prejoin-card {
margin: auto;
height: 100%;
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 */
@media (max-width: 800) and (orientation: landscape) {
/* 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 {
background-color: var(--ov-primary-color);
background-color: var(--ov-background-color);
/* min-width: 400px; */
height: 100%;
}
@ -12,7 +12,7 @@
margin: auto;
text-align: -webkit-center;
text-align: -moz-center;
color: var(--ov-text-color);
color: var(--ov-text-primary-color);
}
.sidenav-container {
@ -29,7 +29,7 @@
align-items: center;
justify-content: center;
width: 380px;
background-color: var(--ov-primary-color);
background-color: var(--ov-background-color);
border-left: none;
position: absolute;
z-index: 1;
@ -57,21 +57,21 @@
}
.mat-drawer-container {
background-color: var(--ov-primary-color);
background-color: var(--ov-background-color);
}
#toolbar-container,
#footer-container {
background-color: var(--ov-primary-color);
background-color: var(--ov-background-color);
/* min-width: 400px !important; */
width: 100%;
height: 70px;
}
#footer {
color: #ffffff;
color: var(--ov-text-primary-color);
height: 25px;
background-color: #333333;
background-color: var(--ov-background-color);
padding: 0 14px 0 0;
position: absolute;
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. */
::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. */
::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 {

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">
<mat-icon class="audio-icon">mic</mat-icon>
<span class="device-label"> {{ microphoneSelected.label }} </span>
@ -22,7 +22,7 @@
id="microphone-button"
[disableRipple]="true"
[disabled]="!hasAudioDevices || microphoneStatusChanging"
[class.warn-btn]="!isMicrophoneEnabled"
[class.mute-btn]="!isMicrophoneEnabled"
(click)="toggleMic($event)"
[matTooltip]="isMicrophoneEnabled ? ('TOOLBAR.MUTE_AUDIO' | translate) : ('TOOLBAR.UNMUTE_AUDIO' | translate)"
[matTooltipDisabled]="!hasAudioDevices"
@ -46,7 +46,7 @@
<div id="audio-devices-form" *ngIf="microphones.length === 0">
<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>
</button>
<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-light-color-darker: color-mix(in srgb, var(--ov-light-color), #000 15%);
$ov-selection-color: #d4d6d7;
:host {
.device-container-element {
border-radius: var(--ov-panel-radius);
border: 1px solid var(--ov-light-color-darker);
border-radius: var(--ov-surface-radius);
border: 1px solid $ov-selection-color;
}
.device-container-element.mute-btn {
border: 1px solid var(--ov-error-color);
}
#audio-devices-form {
width: 100%;
@ -15,7 +18,7 @@
}
#microphone-button {
color: var(--ov-secondary-color);
color:#000000
}
::ng-deep .mat-mdc-text-field-wrapper,
@ -31,15 +34,15 @@
::ng-deep .mat-mdc-text-field-wrapper {
padding-left: 0px;
padding-right: 10px;
background-color: var(--ov-panel-background) !important;
border-radius: var(--ov-panel-radius);
background-color: var(--ov-surface-color) !important;
border-radius: var(--ov-surface-radius);
}
::ng-deep .mdc-button--unelevated {
border-top-left-radius: var(--ov-panel-radius);
border-bottom-left-radius: var(--ov-panel-radius);
border-top-left-radius: var(--ov-surface-radius);
border-bottom-left-radius: var(--ov-surface-radius);
border-bottom-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;
min-width: 48px !important;
padding: 0;
@ -72,13 +75,28 @@
}
::ng-deep .mat-mdc-button-touch-target {
border-radius: var(--ov-panel-radius) !important;
border-radius: var(--ov-surface-radius) !important;
}
.warn-btn {
color: var(--ov-warn-color) !important;
.mute-btn {
color: #ffffff !important;
background-color: var(--ov-error-color) !important;
}
}
::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 {
color: var(--ov-panel-text-color);
color: var(--ov-text-primary-color);
font-size: 12px;
padding: 0px 5px;
display: block;
}
.lang-button {
background-color: var(--ov-logo-background-color);
color: var(--ov-text-color);
background-color: var(--ov-secondary-action-color);
color: var(--ov-text-primary-color);
}
.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. */
::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. */

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 {
background-color: var(--ov-secondary-color) !important;
color: var(--ov-text-color);
background-color: var(--ov-primary-action-color) !important;
color: var(--ov-secondary-action-color);
}
::ng-deep .mat-mdc-menu-panel {
border-radius: var(--ov-panel-radius) !important;
background-color: var(--ov-panel-background) !important;
border: 1px solid $ov-light-color-lighter !important;
border-radius: var(--ov-surface-radius) !important;
background-color: var(--ov-surface-color) !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 {
--ov-light-color-darker: color-mix(in srgb, var(--ov-light-color), #000 15%);
#name-input-container {
height: 70px;
border-radius: var(--ov-panel-radius);
border-radius: var(--ov-surface-radius);
}
#name-input-container mat-form-field {
width: 100%;
color: var(--ov-secondary-color);
color: var(--ov-secondary-action-color);
}
::ng-deep .mat-mdc-form-field-infix {
@ -18,18 +18,18 @@
::ng-deep .mat-mdc-text-field-wrapper {
padding: 0;
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 {
border: 0px !important;
}
::ng-deep .mdc-button--unelevated {
border-top-left-radius: var(--ov-panel-radius) !important;
border-bottom-left-radius: var(--ov-panel-radius) !important;
border-top-left-radius: var(--ov-surface-radius) !important;
border-bottom-left-radius: var(--ov-surface-radius) !important;
border-bottom-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;
min-width: 48px !important;
padding: 0;
@ -38,7 +38,7 @@
.error {
::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;
font-size: 24px !important;
margin: auto;
color: var(--ov-secondary-color) !important;
color: #000000 !important;
}
input {
padding-left: 10px !important;
border-top-right-radius: var(--ov-panel-radius) !important;
border-bottom-right-radius: var(--ov-panel-radius) !important;
border-top-right-radius: var(--ov-surface-radius) !important;
border-bottom-right-radius: var(--ov-surface-radius) !important;
border-bottom-left-radius: 0px !important;
border-top-left-radius: 0px !important;
border: 1px solid var(--ov-light-color-darker);
color: var(--ov-panel-text-color);
border: 1px solid $ov-selection-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-select
[disabled]="!hasVideoDevices"
@ -12,7 +12,7 @@
id="camera-button"
[disableRipple]="true"
[disabled]="!hasVideoDevices || cameraStatusChanging"
[class.warn-btn]="!isCameraEnabled"
[class.mute-btn]="!isCameraEnabled"
(click)="toggleCam($event)"
[matTooltip]="isCameraEnabled ? ('TOOLBAR.STOP_VIDEO' | translate) : ('TOOLBAR.START_VIDEO' | translate)"
[matTooltipDisabled]="!hasVideoDevices"
@ -31,7 +31,7 @@
<div id="video-devices-form" *ngIf="cameras.length === 0">
<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>
</button>
<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 {
--ov-light-color-darker: color-mix(in srgb, var(--ov-light-color), #000 15%);
.device-container-element {
border-radius: var(--ov-panel-radius);
border: 1px solid var(--ov-light-color-darker);
border-radius: var(--ov-surface-radius);
border: 1px solid $ov-selection-color;
}
.device-container-element.mute-btn {
border: 1px solid var(--ov-error-color);
}
#video-devices-form {
width: 100%;
@ -15,7 +17,7 @@
}
#camera-button {
color: var(--ov-secondary-color);
color: #000000;
}
::ng-deep .mat-mdc-text-field-wrapper,
@ -31,15 +33,15 @@
::ng-deep .mat-mdc-text-field-wrapper {
padding-left: 0px;
padding-right: 10px;
background-color: var(--ov-panel-background) !important;
border-radius: var(--ov-panel-radius);
background-color: var(--ov-surface-color) !important;
border-radius: var(--ov-surface-radius);
}
::ng-deep .mdc-button--unelevated {
border-top-left-radius: var(--ov-panel-radius);
border-bottom-left-radius: var(--ov-panel-radius);
border-top-left-radius: var(--ov-surface-radius);
border-bottom-left-radius: var(--ov-surface-radius);
border-bottom-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;
min-width: 48px !important;
padding: 0;
@ -71,13 +73,32 @@
}
::ng-deep .mat-mdc-button-touch-target {
border-radius: var(--ov-panel-radius) !important;
border-radius: var(--ov-surface-radius) !important;
}
.warn-btn {
color: var(--ov-warn-color) !important;
.mute-btn {
color: #ffffff !important;
background-color: var(--ov-error-color) !important;
}
}
::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 {
/* Fixes layout bug. The OV_root is created with the entire layout width and it has a weird UX behaviour */
.no-size {
@ -5,21 +7,20 @@
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 {
padding: 0px;
position: absolute;
z-index: 999;
border-radius: var(--ov-video-radius);
color: var(--ov-text-color);
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 {
position: absolute;
@ -42,14 +43,14 @@
}
.active-btn {
color: var(--ov-tertiary-color) !important;
color: var(--ov-accent-action-color) !important;
}
.muted-btn {
color: var(--ov-warn-color) !important;
color: var(--ov-error-color) !important;
}
.stream-video-controls {
background-color: var(--ov-secondary-color);
background-color: $ov-video-elements-bg-color;
border-radius: var(--ov-video-radius);
width: fit-content;
height: 50px;
@ -62,9 +63,9 @@
right: 0;
left: 0;
top: 0;
// border: 2px solid var(--ov-text-color);
// border: 2px solid var(--ov-text-primary-color);
button {
color: var(--ov-text-color);
color: $ov-video-elements-text-color;
}
}
@ -81,7 +82,7 @@
#status-mic,
#status-muted-forcibly {
color: var(--ov-warn-color);
color: var(--ov-error-color);
font-size: 24px;
margin: 5px;
}
@ -95,11 +96,11 @@
overflow: hidden;
background-color: transparent;
border-radius: var(--ov-video-radius);
border: 2px solid var(--ov-primary-color);
border: 2px solid var(--ov-background-color);
box-sizing: border-box;
}
.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
*ngIf="!isMinimal && showBroadcastingButton"
mat-menu-item
id="broadcasting-btn"
id="toolbar-broadcasting-btn"
[disabled]="broadcastingStatus === _broadcastingStatus.STARTING || recordingStatus === _broadcastingStatus.STOPPING"
(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 {
--broadcasting-blinking-color: #5903ca;
--recording-blinking-color: var(--ov-warn-color);
#toolbar {
height: 100%;
background-color: transparent;
color: var(--ov-text-color);
color: var(--ov-text-primary-color);
.mat-mdc-icon-button {
--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,
#menu-buttons-container button {
border-radius: var(--ov-buttons-radius);
color: var(--ov-text-color);
color: var(--ov-secondary-action-color);
}
#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 {
// width: 40px;
// height: 40px;
background-color: var(--ov-secondary-color);
color: var(--ov-text-color);
background-color: var(--ov-primary-action-color);
color: var(--ov-secondary-action-color);
margin: 6px;
}
.warn-btn {
background-color: var(--ov-warn-color) !important;
background-color: var(--ov-error-color) !important;
}
#disable-screen-button > mat-icon {
color: var(--ov-warn-color) !important;
color: var(--ov-error-color) !important;
}
.active-btn,
::ng-deep .active-btn {
background-color: var(--ov-tertiary-color) !important;
background-color: var(--ov-accent-action-color) !important;
}
#branding-logo {
background-color: var(--ov-logo-background-color);
border-radius: var(--ov-panel-radius);
background-color: var(--ov-primary-action-color);
border-radius: var(--ov-surface-radius);
max-width: 35px;
max-height: 35px;
padding: 10px;
@ -119,7 +118,7 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
.recording-tag,
.broadcasting-tag {
padding: 0 10px;
border-radius: var(--ov-panel-radius);
border-radius: var(--ov-surface-radius);
width: fit-content;
font-size: 12px;
text-align: center;
@ -128,10 +127,10 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
}
.recording-tag {
background-color: var(--ov-warn-color);
background-color: var(--ov-error-color);
}
.broadcasting-tag {
background-color: var(--broadcasting-blinking-color);
background-color: $ov-broadcasting-blinking-color;
}
.recording-tag mat-icon,
@ -147,7 +146,7 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
}
#leave-btn {
background-color: var(--ov-warn-color) !important;
background-color: var(--ov-error-color) !important;
border-radius: var(--ov-leave-button-radius) !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 */
@keyframes blinker-recording {
50% {
background-color: var(--recording-blinking-color);
background-color: $ov-recording-blinking-color;
}
}
/* Animation for broadcasting blinking */
@keyframes blinker-broadcasting {
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 {
color: #5903ca !important;
::ng-deep #toolbar-broadcasting-btn > .mat-icon {
color: $ov-broadcasting-blinking-color !important;
}
::ng-deep #recording-btn > .mat-icon {
color: $ov-recording-blinking-color !important;
}
::ng-deep .mat-mdc-menu-panel {
border-radius: var(--ov-panel-radius) !important;
background-color: var(--ov-panel-background) !important;
border: 1px solid $ov-light-color-lighter !important;
border-radius: var(--ov-surface-radius) !important;
background-color: var(--ov-surface-color) !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%;
}
#vc-container {
background-color: var(--ov-primary-color);
background-color: var(--ov-background-color);
}
#pre-join-container {
@ -11,7 +11,7 @@
}
.error-icon {
color: var(--ov-warn-color);
color: var(--ov-error-color);
}
#spinner {
@ -26,7 +26,7 @@
}
::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 */

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

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