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 styles for improving custom color support

pull/850/merge
Carlos Santos 2024-11-05 15:54:18 +01:00
parent ada5984a32
commit 02e3fb0d4e
24 changed files with 153 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,18 +17,21 @@ import { MatDialogRef } from '@angular/material/dialog';
`,
styles: [
`
::ng-deep .mat-mdc-dialog-content {
color: var(--ov-text-surface-color) !important;
}
::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);
background-color: var(--ov-error-color) !important;
color: var(--ov-secondary-action-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);
color: var(--ov-secondary-action-color);
background-color: var(--ov-primary-action-color) !important;
border-radius: var(--ov-surface-radius);
}

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

@ -17,6 +17,10 @@ import { DialogData } from '../../models/dialog.model';
`,
styles: [
`
::ng-deep .mat-mdc-dialog-content {
color: var(--ov-text-surface-color) !important;
}
::ng-deep .mat-mdc-dialog-surface {
background-color: var(--ov-surface-color);
border-radius: var(--ov-surface-radius);
@ -24,7 +28,7 @@ import { DialogData } from '../../models/dialog.model';
.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);
color: var(--ov-secondary-action-color);
background-color: var(--ov-primary-action-color) !important;
border-radius: var(--ov-surface-radius);
}

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

@ -17,6 +17,10 @@ import { RecordingDialogData } from '../../models/dialog.model';
`,
styles: [
`
::ng-deep .mat-mdc-dialog-content {
color: var(--ov-text-surface-color) !important;
}
::ng-deep .mat-mdc-dialog-surface {
background-color: var(--ov-surface-color);
border-radius: var(--ov-surface-radius);
@ -29,7 +33,7 @@ import { RecordingDialogData } from '../../models/dialog.model';
.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);
color: var(--ov-secondary-action-color);
background-color: var(--ov-primary-action-color) !important;
border-radius: var(--ov-surface-radius);
}

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

@ -1,3 +1,5 @@
$ov-activity-status-color: #afafaf;
:host {
.activities-body-container {
display: block !important;
@ -6,9 +8,18 @@
padding: 10px;
}
.activity-status {
color: var(--ov-text-surface-color);
display: inline;
padding: 3px;
font-size: 11px;
border-radius: var(--ov-surface-radius);
background-color: $ov-activity-status-color;
}
.activity-icon {
display: inherit;
background-color: var(--ov-secondary-action-color);
background-color: $ov-activity-status-color;;
border-radius: var(--ov-surface-radius);
margin: 10px 0px !important;
padding: 10px;

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

@ -34,6 +34,7 @@
<div class="activity-action-buttons" matListItemMeta>
<div
id="broadcasting-status"
class="activity-status"
[ngClass]="{
started: broadcastingStatus === broadcastingStatusEnum.STARTED,
stopped: broadcastingStatus === broadcastingStatusEnum.STOPPED,

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

@ -1,13 +1,5 @@
$ov-broadcasting-color: #5903ca;
#broadcasting-status {
color: var(--ov-text-surface-color);
display: inline;
padding: 3px;
font-size: 11px;
border-radius: var(--ov-surface-radius);
}
.time-container {
padding: 2px;
}
@ -19,7 +11,7 @@ $ov-broadcasting-color: #5903ca;
}
#broadcasting-icon {
color: var(--ov-primary-action-color) !important;
color: $ov-broadcasting-color !important;
}
.broadcasting-duration {
@ -128,9 +120,9 @@ mat-expansion-panel {
padding: 10px;
margin: 10px;
border-radius: var(--ov-surface-radius);
order: 3;
justify-content: space-evenly;
align-items: center;
order: 3;
justify-content: space-evenly;
align-items: center;
}
.input-container input {

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

@ -26,6 +26,7 @@
<div class="activity-action-buttons" matListItemMeta>
<div
id="recording-status"
class="activity-status"
[ngClass]="{
started: recordingStatus === recStatusEnum.STARTED,
stopped: recordingStatus === recStatusEnum.STOPPED,
@ -48,8 +49,8 @@
/>
</div>
<h2 *ngIf="recordingList.length === 0">{{ 'PANEL.RECORDING.CONTENT_TITLE' | translate }}</h2>
<span *ngIf="recordingList.length === 0">{{ 'PANEL.RECORDING.CONTENT_SUBTITLE' | translate }}</span>
<h2 *ngIf="recordingList.length === 0" class="recording-title">{{ 'PANEL.RECORDING.CONTENT_TITLE' | translate }}</h2>
<span *ngIf="recordingList.length === 0" class="recording-subtitle">{{ 'PANEL.RECORDING.CONTENT_SUBTITLE' | translate }}</span>
<!-- Recording button -->
<div class="item recording-action-buttons">

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

@ -1,10 +1,8 @@
:host {
#recording-status {
color: var(--ov-text-primary-color);
display: inline;
padding: 3px;
font-size: 11px;
border-radius: var(--ov-surface-radius);
$ov-activity-status-color: #afafaf;
.recording-title,
.recording-subtitle {
color: var(--ov-text-surface-color);
}
.recording-title {
@ -27,10 +25,11 @@
}
.recording-duration {
background-color: var(--ov-secondary-action-color);
background-color: $ov-activity-status-color;
padding: 4px 8px;
border-radius: var(--ov-surface-radius);
font-weight: 500;
color: var(--ov-text-surface-color);
}
.recording-duration mat-icon {
@ -41,22 +40,22 @@
.started {
background-color: #3b7430 !important;
color: var(--ov-text-primary-color);
color: #ffffff !important;
}
.activity-icon.started,
.failed {
background-color: var(--ov-error-color) !important;
color: var(--ov-text-primary-color);
// color: var(--ov-secondary-action-color);
}
.stopped {
background-color: var(--ov-secondary-action-color);
// background-color: var(--ov-secondary-action-color);
color: var(--ov-text-surface-color) !important;
}
.starting {
background-color: var(--ov-warn-color) !important;
color: var(--ov-text-surface-color) !important;
color: #000000 !important;
}
.panel-body-container {
@ -100,17 +99,13 @@
#start-recording-btn {
width: 100%;
background-color: var(--ov-primary-action-color);
color: var(--ov-text-primary-color);
color: var(--ov-secondary-action-color);
}
#stop-recording-btn {
width: 100%;
background-color: var(--ov-error-color);
color: var(--ov-text-primary-color);
}
.delete-recording-btn {
color: var(--ov-error-color);
color: var(--ov-secondary-action-color);
}
#reset-recording-status-btn {
@ -133,6 +128,7 @@
width: 40px !important;
height: 40px !important;
padding: 5px !important;
color: var(--ov-text-surface-color);
}
#play-recording-btn > .mat-icon,
#download-recording-btn > .mat-icon,
@ -140,6 +136,13 @@
height: 20px !important;
}
#delete-recording-btn {
color: var(--ov-error-color);
}
#download-recording-btn {
color: var(--ov-accent-action-color);
}
mat-expansion-panel {
margin: 0px 0px 5px 0px;
}
@ -156,6 +159,18 @@
height: 0px !important;
}
::ng-deep .mdc-list-item__secondary-text,
::ng-deep .mdc-list-item__primary-text {
color: var(--ov-text-surface-color);
}
// ::ng-deep .mat-mdc-list-item:hover {
// color: #000000 !important;
// }
::ng-deep .mat-mdc-list-item:hover .mat-mdc-list-item-title {
color: var(--ov-text-surface-color) !important;
}
.blink {
animation: blinker 1.5s linear infinite !important;
}

4
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html
View File

@ -8,7 +8,7 @@
<div class="effects-container" fxFlex="100%" fxLayoutAlign="space-evenly none">
<div>
<h4>{{ 'PANEL.BACKGROUND.BLURRED_SECTION' | translate }}</h4>
<h4 class="background-title">{{ 'PANEL.BACKGROUND.BLURRED_SECTION' | translate }}</h4>
<div>
<button
*ngFor="let effect of noEffectAndBlurredBackground"
@ -29,7 +29,7 @@
</div>
<hr />
<div>
<h4>{{ 'PANEL.BACKGROUND.IMAGES_SECTION' | translate }}</h4>
<h4 class="background-title">{{ 'PANEL.BACKGROUND.IMAGES_SECTION' | translate }}</h4>
<div class="grid">
<div

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

@ -1,3 +1,6 @@
.background-title {
color: var(--ov-text-surface-color);
}
.effects-container {
display: block !important;
overflow-y: auto;

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

@ -9,6 +9,7 @@ $ov-selection-color: #d4d6d7;
.text-info {
margin: auto;
color: var(--ov-text-surface-color);
}
.vertical-align {
@ -36,6 +37,7 @@ $ov-selection-color: #d4d6d7;
order: 3;
justify-content: space-evenly;
align-items: none;
}
.input-container textarea {
@ -56,6 +58,7 @@ $ov-selection-color: #d4d6d7;
-moz-box-shadow: none;
box-shadow: none;
font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
color: var(--ov-text-surface-color);
}
.message {
@ -76,7 +79,7 @@ $ov-selection-color: #d4d6d7;
.participant-name-container p {
font-size: 13px;
font-style: italic;
color: var(--ov-primary-action-color);
color: var(--ov-text-surface-color);
padding: 5px;
}

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

@ -16,6 +16,11 @@
align-items: center;
}
.panel-title,
.panel-close-button {
color: var(--ov-text-surface-color);
}
.panel-title {
margin-left: 5px;
margin-top: auto;

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

@ -4,13 +4,14 @@
border-radius: var(--ov-surface-radius);
margin: auto !important;
padding: 10px;
color: var(--ov-text-surface-color);
color: #000000;
}
.participant-subtitle {
font-style: italic;
font-size: 11px !important;
margin: 0;
color: var(--ov-text-surface-color);
}
.participant-name {
font-weight: bold !important;
@ -34,6 +35,13 @@
padding-bottom: 10px !important;
}
::ng-deep .mat-mdc-list-item:hover {
color: #000000 !important;
}
::ng-deep .mat-mdc-list-item:hover .mat-mdc-list-item-title {
color: var(--ov-text-surface-color) !important;
}
mat-list {
padding: 3px;
}
@ -50,6 +58,7 @@
#mute-btn {
border-radius: var(--ov-buttons-radius);
color: var(--ov-text-surface-color);
}
.warn-btn {

4
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html
View File

@ -57,10 +57,10 @@
<div class="item-content">
<div *ngIf="selectedOption === settingsOptions.GENERAL">
<mat-label>{{ 'PREJOIN.NICKNAME' | translate }}</mat-label>
<mat-label class="input-label">{{ 'PREJOIN.NICKNAME' | translate }}</mat-label>
<ov-participant-name-input></ov-participant-name-input>
<mat-list>
<mat-list-item>
<mat-list-item class="lang-selector">
<mat-icon matListItemIcon>translate</mat-icon>
<div matListItemTitle>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
<ov-lang-selector matListItemMeta (onLangChanged)="onLangChanged.emit($event)"></ov-lang-selector>

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

@ -38,6 +38,7 @@
}
mat-list-option[aria-selected='false'] {
::ng-deep .mdc-list-item__primary-text,
mat-icon {
color: var(--ov-text-surface-color) !important;
}
@ -50,4 +51,13 @@
.mat-mdc-list-base {
--mdc-list-list-item-focus-state-layer-color: transparent !important;
}
::ng-deep .lang-selector .expand-more-icon {
color: var(--ov-secondary-action-color) !important;
}
::ng-deep .lang-selector div,
.input-label {
color: var(--ov-text-surface-color) !important;
}
}

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

@ -39,6 +39,10 @@
font-size: 14px !important;
}
::ng-deep .lang-btn mat-icon {
color: var(--ov-text-surface-color) !important;
}
.video-container {
margin: auto;
min-height: 45vh;
@ -80,7 +84,7 @@
#join-button {
background-color: var(--ov-primary-action-color);
color: var(--ov-text-primary-color);
color: var(--ov-secondary-action-color);
font-weight: bold;
border-radius: var(--ov-surface-radius);
width: 100%;

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

@ -1,9 +1,10 @@
$ov-selection-color: #d4d6d7;
$ov-selection-color-btn: #afafaf;
$ov-selection-color: #cccccc;
:host {
.device-container-element {
border-radius: var(--ov-surface-radius);
border: 1px solid $ov-selection-color;
border: 1px solid $ov-selection-color-btn;
}
.device-container-element.mute-btn {
border: 1px solid var(--ov-error-color);
@ -34,7 +35,7 @@ $ov-selection-color: #d4d6d7;
::ng-deep .mat-mdc-text-field-wrapper {
padding-left: 0px;
padding-right: 10px;
background-color: var(--ov-surface-color) !important;
background-color: $ov-selection-color !important;
border-radius: var(--ov-surface-radius);
}
::ng-deep .mdc-button--unelevated {
@ -42,7 +43,7 @@ $ov-selection-color: #d4d6d7;
border-bottom-left-radius: var(--ov-surface-radius);
border-bottom-right-radius: 0px !important;
border-top-right-radius: 0px !important;
background-color: $ov-selection-color !important;
background-color: $ov-selection-color-btn !important;
width: 48px !important;
min-width: 48px !important;
padding: 0;
@ -84,7 +85,7 @@ $ov-selection-color: #d4d6d7;
}
}
::ng-deep .mat-mdc-select-panel {
background-color: var(--ov-surface-color) !important;
background-color: #ffffff !important;
}
::ng-deep .mat-mdc-option {

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.html
View File

@ -1,6 +1,6 @@
<button *ngIf="!compact" mat-flat-button [matMenuTriggerFor]="menu" class="lang-button" id="lang-btn">
<span id="lang-selected-name">{{ langSelected?.name }}</span>
<mat-icon>expand_more</mat-icon>
<mat-icon class="expand-more-icon">expand_more</mat-icon>
</button>
<button id="lang-btn-compact" *ngIf="compact" mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>translate</mat-icon>

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

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

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

@ -1,6 +1,6 @@
$ov-selection-color: #d4d6d7;
$ov-selection-color-btn: #afafaf;
$ov-selection-color: #cccccc;
:host {
#name-input-container {
height: 70px;
border-radius: var(--ov-surface-radius);
@ -18,8 +18,8 @@ $ov-selection-color: #d4d6d7;
::ng-deep .mat-mdc-text-field-wrapper {
padding: 0;
height: 70px;
background-color: var(--ov-surface-color) !important;
background-color: $ov-selection-color !important;
border-radius: var(--ov-surface-radius);
}
::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
border: 0px !important;
@ -29,7 +29,7 @@ $ov-selection-color: #d4d6d7;
border-bottom-left-radius: var(--ov-surface-radius) !important;
border-bottom-right-radius: 0px !important;
border-top-right-radius: 0px !important;
background-color: $ov-selection-color !important;
background-color: $ov-selection-color-btn !important;
width: 48px !important;
min-width: 48px !important;
padding: 0;
@ -56,11 +56,12 @@ $ov-selection-color: #d4d6d7;
border-bottom-right-radius: var(--ov-surface-radius) !important;
border-bottom-left-radius: 0px !important;
border-top-left-radius: 0px !important;
border: 1px solid $ov-selection-color;
border: 1px solid $ov-selection-color-btn;
color: #000000;
caret-color: #000000 !important;
}
}
::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
color: var(--ov-primary-action-color) !important;
}
}

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

@ -1,8 +1,10 @@
$ov-selection-color: #d4d6d7;
$ov-selection-color-btn: #afafaf;
$ov-selection-color: #cccccc;
:host {
.device-container-element {
border-radius: var(--ov-surface-radius);
border: 1px solid $ov-selection-color;
border: 1px solid $ov-selection-color-btn;
}
.device-container-element.mute-btn {
border: 1px solid var(--ov-error-color);
@ -33,7 +35,7 @@ $ov-selection-color: #d4d6d7;
::ng-deep .mat-mdc-text-field-wrapper {
padding-left: 0px;
padding-right: 10px;
background-color: var(--ov-surface-color) !important;
background-color: $ov-selection-color !important;
border-radius: var(--ov-surface-radius);
}
::ng-deep .mdc-button--unelevated {
@ -41,7 +43,7 @@ $ov-selection-color: #d4d6d7;
border-bottom-left-radius: var(--ov-surface-radius);
border-bottom-right-radius: 0px !important;
border-top-right-radius: 0px !important;
background-color: $ov-selection-color !important;
background-color: $ov-selection-color-btn !important;
width: 48px !important;
min-width: 48px !important;
padding: 0;
@ -86,7 +88,7 @@ $ov-selection-color: #d4d6d7;
}
::ng-deep .mat-mdc-select-panel {
background-color: var(--ov-surface-color) !important;
background-color: #e2e2e2 !important;
}
::ng-deep .mat-mdc-option {

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

@ -2,7 +2,6 @@ $ov-broadcasting-blinking-color: #5903ca;
$ov-recording-blinking-color: #eb5144;
:host {
#toolbar {
height: 100%;
background-color: transparent;
@ -61,6 +60,8 @@ $ov-recording-blinking-color: #eb5144;
color: var(--ov-secondary-action-color);
}
#media-buttons-container > button,
::ng-deep #media-buttons-container > button,
#media-buttons-container:not(#media-buttons-container > button) button,
@ -99,6 +100,7 @@ $ov-recording-blinking-color: #eb5144;
font-size: 15px;
height: fit-content;
padding: 0px 5px;
color: var(--ov-text-primary-color);
}
#session-info-container {
display: flex;
@ -233,6 +235,12 @@ $ov-recording-blinking-color: #eb5144;
}
}
::ng-deep .mat-mdc-menu-item {
color: var(--ov-text-surface-color) !important;
}
::ng-deep .mat-mdc-menu-item mat-icon {
color: var(--ov-text-surface-color) !important;
}
::ng-deep #toolbar-broadcasting-btn > .mat-icon {
color: $ov-broadcasting-blinking-color !important;
}

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json
View File

@ -114,7 +114,7 @@
"SUBTITLE": "Graba tus llamadas para la posteridad",
"CONTENT_TITLE": "Graba tu video conferencia",
"CONTENT_SUBTITLE": "Cuando la grabación haya finalizado, podrás descargarla con facilidad",
"STARTING": "Iniciando grabación",
"STARTING": "Iniciando grabación...",
"STOPPING": "Parando grabación",
"IN_PROGRESS": "Grabación en curso",
"PLAY": "Reproducir",

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

@ -45,29 +45,3 @@ body {
--ov-video-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
*/