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

ov-components: update color variables for consistency across components

master
Carlos Santos 2025-10-01 12:39:34 +02:00
parent 89fc82bfd7
commit b2b66477d4
21 changed files with 86 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
.header { .header {
height: 50px; height: 50px;
background-color: var(--ov-secondary-action-color); background-color: var(--ov-primary-action-color);
color: var(--ov-text-primary-color); color: var(--ov-text-primary-color);
} }
@ -42,7 +42,7 @@
#sort-menu-btn { #sort-menu-btn {
margin-left: 5px; margin-left: 5px;
background-color: var(--ov-surface-color); background-color: var(--ov-surface-color);
color: var(--ov-text-primary-color); color: var(--ov-text-surface-color);
} }
.search-bar { .search-bar {
@ -140,7 +140,7 @@
} }
.video-btns button #play { .video-btns button #play {
color: var(--ov-text-primary-color); color: var(--ov-primary-action-color);
} }
.video-btns button #download { .video-btns button #download {
color: var(--ov-accent-action-color); color: var(--ov-accent-action-color);
@ -167,7 +167,7 @@
.video-card-tag { .video-card-tag {
font-size: 13px; font-size: 13px;
color: var(--ov-text-primary-color); color: var(--ov-text-surface-color);
font-weight: bold; font-weight: bold;
} }
@ -236,13 +236,11 @@
text-align: center; text-align: center;
color: var(--ov-text-primary-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 { ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
padding: 0px !important; padding: 0px !important;
background-color: var(--ov-light-color) !important; background-color: var(--ov-light-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-form-field-wrapper { ::ng-deep .mat-form-field-wrapper {
height: 100% !important; height: 100% !important;
} }

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

@ -38,7 +38,7 @@
margin: auto; margin: auto;
height: 80%; height: 80%;
width: 3px; width: 3px;
background: var(--ov-secondary-action-color); background: var(--ov-text-primary-color);
border-radius: 8px; border-radius: 8px;
} }

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

@ -26,12 +26,12 @@ import { MatDialogRef } from '@angular/material/dialog';
} }
#delete-recording-confirm-btn { #delete-recording-confirm-btn {
background-color: var(--ov-error-color) !important; background-color: var(--ov-error-color) !important;
color: var(--ov-secondary-action-color); color: var(--ov-primary-action-color);
} }
.mat-mdc-button, .mat-mdc-button,
.mat-mdc-button:not(:disabled), .mat-mdc-button:not(:disabled),
::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before { ::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
color: var(--ov-secondary-action-color); color: var(--ov-text-primary-color) !important;
background-color: var(--ov-primary-action-color) !important; background-color: var(--ov-primary-action-color) !important;
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
} }

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

@ -28,7 +28,7 @@ import { DialogData } from '../../models/dialog.model';
.mat-mdc-button, .mat-mdc-button,
.mat-mdc-button:not(:disabled), .mat-mdc-button:not(:disabled),
::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before { ::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
color: var(--ov-secondary-action-color); color: var(--ov-text-primary-color);
background-color: var(--ov-primary-action-color) !important; background-color: var(--ov-primary-action-color) !important;
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
} }

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

@ -33,7 +33,7 @@ import { RecordingDialogData } from '../../models/dialog.model';
.mat-mdc-button, .mat-mdc-button,
.mat-mdc-button:not(:disabled), .mat-mdc-button:not(:disabled),
::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before { ::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
color: var(--ov-secondary-action-color); color: var(--ov-text-primary-color);
background-color: var(--ov-primary-action-color) !important; background-color: var(--ov-primary-action-color) !important;
border-radius: var(--ov-surface-radius); 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: var(--ov-secondary-action-color); color: var(--ov-text-primary-color);
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;

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

@ -89,6 +89,10 @@
display: none !important; display: none !important;
} }
::ng-deep .mat-expansion-indicator svg {
fill: var(--ov-text-surface-color) !important;
}
::ng-deep ::ng-deep
.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta
.mdc-list-item__end::before { .mdc-list-item__end::before {

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

@ -12,18 +12,6 @@
color: var(--ov-broadcasting-color, #5903ca) !important; color: var(--ov-broadcasting-color, #5903ca) !important;
} }
.broadcasting-duration {
background-color: var(--ov-secondary-action-color);
padding: 4px 8px;
border-radius: var(--ov-surface-radius);
font-weight: 500;
}
.broadcasting-duration mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.started { .started {
background-color: var(--ov-broadcasting-color, #5903ca) !important; background-color: var(--ov-broadcasting-color, #5903ca) !important;

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

@ -45,10 +45,8 @@
.activity-icon.started, .activity-icon.started,
.failed { .failed {
background-color: var(--ov-error-color) !important; background-color: var(--ov-error-color) !important;
// color: var(--ov-secondary-action-color);
} }
.stopped { .stopped {
// background-color: var(--ov-secondary-action-color);
color: var(--ov-text-surface-color) !important; color: var(--ov-text-surface-color) !important;
} }
@ -545,8 +543,8 @@
#view-recordings-btn { #view-recordings-btn {
width: 100%; width: 100%;
background-color: var(--ov-accent-action-color); background-color: var(--ov-secondary-action-color);
color: var(--ov-secondary-action-color); color: var(--ov-text-surface-color);
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
margin-bottom: 10px; margin-bottom: 10px;
@ -569,7 +567,7 @@
#reset-recording-status-btn { #reset-recording-status-btn {
width: 100%; width: 100%;
background-color: var(--ov-accent-action-color); background-color: var(--ov-primary-action-color);
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
} }

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

@ -27,15 +27,14 @@
.input-container { .input-container {
height: 65px; height: 65px;
display: flex; display: flex;
background-color: var(--ov-input-background, var(--ov-secondary-action-color)); border: 1px solid var(--ov-secondary-action-color);
border: 1px solid var(--ov-border-color, var(--ov-secondary-action-color));
padding: 10px 5px 10px 10px; padding: 10px 5px 10px 10px;
margin: 10px; margin: 10px;
border-radius: var(--ov-surface-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;
color: var(--ov-text-surface-color);
} }
.input-container textarea { .input-container textarea {
@ -57,6 +56,10 @@
box-shadow: none; box-shadow: none;
font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif; font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
color: var(--ov-text-surface-color); color: var(--ov-text-surface-color);
&::placeholder {
color: var(--ov-text-surface-color);
}
} }
.message { .message {
@ -124,5 +127,6 @@
} }
::ng-deep a:-webkit-any-link { ::ng-deep a:-webkit-any-link {
color: var(--ov-accent-action-color); color: var(--ov-primary-action-color);
font-weight: 600;
} }

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

@ -116,14 +116,14 @@
.local-indicator { .local-indicator {
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;
color: var(--ov-focus-color); color: var(--ov-text-surface-color);
background-color: var(--ov-surface-color); background-color: var(--ov-surface-color);
padding: 4px 8px; padding: 4px 8px;
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
flex-shrink: 0; flex-shrink: 0;
border: 1px solid var(--ov-border-focus-color); border: 1px solid var(--ov-accent-action-color);
white-space: nowrap; white-space: nowrap;
} }
} }

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

@ -25,7 +25,7 @@
// Menu styling - Desktop/Tablet default // Menu styling - Desktop/Tablet default
.item-menu { .item-menu {
flex-shrink: 0; flex-shrink: 0;
border-right: 1px solid var(--ov-border-color, var(--ov-secondary-action-color)); border-right: 1px solid var(--ov-secondary-action-color);
width: 180px; width: 180px;
min-width: 180px; min-width: 180px;
padding-right: 16px; padding-right: 16px;

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

@ -75,7 +75,7 @@
} }
.mat-mdc-progress-spinner { .mat-mdc-progress-spinner {
--mdc-circular-progress-active-indicator-color: var(--ov-primary-action-color, #4285f4); --mdc-circular-progress-active-indicator-color: var(--ov-secondary-action-color, #4285f4);
} }
} }
} }
@ -254,12 +254,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2);
&:hover:not([disabled]) { &:hover:not([disabled]) {
background: color-mix(in srgb, var(--ov-primary-action-color), var(--ov-secondary-action-color) 10%); background: color-mix(in srgb, var(--ov-primary-action-color), var(--ov-secondary-action-color) 10%);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(66, 133, 244, 0.3);
} }
&:active:not([disabled]) { &:active:not([disabled]) {

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

@ -8,20 +8,20 @@
@include shared.device-selector-base(); @include shared.device-selector-base();
// Audio-specific overrides for normal mode // Audio-specific overrides for normal mode
&:not(.compact) { // &:not(.compact) {
.normal-device-selector { // .normal-device-selector {
.device-input-selector { // .device-input-selector {
&:not(.disabled) { // &:not(.disabled) {
.selector-button { // .selector-button {
// Audio-specific hover effect (simpler than video) // // Audio-specific hover effect (simpler than video)
&:hover:not([disabled]) { // &:hover:not([disabled]) {
border-color: var(--ov-primary-action-color, #4285f4); // border-color: var(--ov-primary-action-color, #4285f4);
} // }
} // }
} // }
} // }
} // }
} // }
} }
} }

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

@ -8,18 +8,18 @@
.input-wrapper { .input-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
background: var(--ov-input-background, #f8f9fa); background: var(--ov-surface-color, #f8f9fa);
border: 2px solid var(--ov-border-color, #e0e0e0); border: 1px solid var(--ov-secondary-action-color, #e0e0e0);
border-radius: 12px; border-radius: var(--pv-surface-radius, 10px);
padding: 0; padding: 0;
transition: all 0.2s ease; transition: all 0.2s ease;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
&:focus-within { // &:focus-within {
border-color: var(--ov-primary-action-color, #4285f4); // border-color: var(--ov-primary-action-color, #4285f4);
box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1); // box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
} // }
.input-icon { .input-icon {
display: flex; display: flex;
@ -27,7 +27,7 @@
justify-content: center; justify-content: center;
width: 48px; width: 48px;
height: 56px; height: 56px;
background: var(--ov-surface-color, #f0f0f0); background: var(--ov-secondary-action-color, #f0f0f0);
color: var(--ov-text-secondary-color, #666); color: var(--ov-text-secondary-color, #666);
font-size: 20px; font-size: 20px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
@ -41,7 +41,7 @@
padding: 0 16px; padding: 0 16px;
border: none; border: none;
outline: none; outline: none;
background: var(--ov-input-background, #f8f9fa); background: var(--ov-surface-color, #f8f9fa);
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: var(--ov-text-surface-color, #666); color: var(--ov-text-surface-color, #666);
@ -52,7 +52,6 @@
} }
&:disabled { &:disabled {
background: var(--ov-disabled-background, #f5f5f5);
color: var(--ov-disabled-text-color, #999); color: var(--ov-disabled-text-color, #999);
cursor: not-allowed; cursor: not-allowed;
} }

19
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss
View File

@ -106,7 +106,7 @@
height: 48px; height: 48px;
padding: 0 16px; padding: 0 16px;
background: var(--ov-surface-color, #ffffff); background: var(--ov-surface-color, #ffffff);
border: 2px solid var(--ov-border-color, #e0e0e0); border: 1px solid var(--ov-secondary-action-color, #e0e0e0);
border-radius: 8px; border-radius: 8px;
color: var(--ov-text-surface-color); color: var(--ov-text-surface-color);
font-size: 14px; font-size: 14px;
@ -159,7 +159,7 @@
height: 48px; height: 48px;
padding: 0 16px; padding: 0 16px;
background: var(--ov-disabled-background, #f5f5f5); background: var(--ov-disabled-background, #f5f5f5);
border: 2px solid var(--ov-disabled-border-color, #ddd); border: 1px solid var(--ov-disabled-border-color, #ddd);
border-radius: 8px; border-radius: 8px;
color: var(--ov-disabled-text-color, #999); color: var(--ov-disabled-text-color, #999);
font-size: 14px; font-size: 14px;
@ -206,7 +206,7 @@
::ng-deep .device-menu.mat-mdc-menu-panel { ::ng-deep .device-menu.mat-mdc-menu-panel {
border-radius: 12px; border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
border: 1px solid var(--ov-border-color, #e0e0e0); border: 1px solid var(--ov-secondary-action-color, #e0e0e0);
overflow: hidden; overflow: hidden;
background-color: var(--ov-surface-color); background-color: var(--ov-surface-color);
@ -224,7 +224,7 @@
} }
&.selected { &.selected {
background-color: var(--ov-secondary-action-color); background-color: var(--ov-accent-action-color);
mat-icon { mat-icon {
color: var(--ov-text-surface-color); color: var(--ov-text-surface-color);
@ -252,8 +252,8 @@
gap: 8px; gap: 8px;
padding: 12px 16px; padding: 12px 16px;
background: var(--ov-surface-color, #ffffff); background: var(--ov-surface-color, #ffffff);
border: 2px solid var(--ov-border-color, #e0e0e0); border: 1px solid var(--ov-secondary-action-color, #e0e0e0);
border-radius: 12px; border-radius: var(--ov-surface-radius, 8px);
transition: all 0.2s ease; transition: all 0.2s ease;
color: var(--ov-text-primary-color, #333); color: var(--ov-text-primary-color, #333);
font-weight: 500; font-weight: 500;
@ -264,7 +264,6 @@
} }
&:hover { &:hover {
border-color: var(--ov-primary-action-color, #4285f4);
box-shadow: 0 2px 8px rgba(66, 133, 244, 0.1); box-shadow: 0 2px 8px rgba(66, 133, 244, 0.1);
} }
@ -300,9 +299,9 @@
// selector menu mixin // selector menu mixin
@mixin selector-menu($option-class, $option-name-class) { @mixin selector-menu($option-class, $option-name-class) {
border-radius: 12px; border-radius: var(--ov-surface-radius, 8px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
border: 1px solid var(--ov-border-color); border: 1px solid var(--ov-secondary-action-color);
overflow: hidden; overflow: hidden;
background: var(--ov-surface-color); background: var(--ov-surface-color);
@ -321,7 +320,7 @@
} }
&.selected { &.selected {
background-color: var(--ov-secondary-action-color); background-color: var(--ov-accent-action-color);
.check-icon { .check-icon {
color: var(--ov-text-surface-color); color: var(--ov-text-surface-color);

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

@ -17,21 +17,21 @@
} }
// Video-specific overrides for normal mode // Video-specific overrides for normal mode
&:not(.compact) { // &:not(.compact) {
.normal-device-selector { // .normal-device-selector {
.device-input-selector { // .device-input-selector {
&:not(.disabled) { // &:not(.disabled) {
.selector-button { // .selector-button {
// Video-specific hover effect with box-shadow // // Video-specific hover effect with box-shadow
&:hover:not([disabled]) { // &:hover:not([disabled]) {
background-color: var(--ov-surface-color) !important; // background-color: var(--ov-surface-color) !important;
border-color: var(--ov-primary-action-color); // border-color: var(--ov-primary-action-color);
} // }
} // }
} // }
} // }
} // }
} // }
} }
} }

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

@ -6,7 +6,7 @@
} }
.participant-name-container { .participant-name-container {
background-color: var(--ov-primary-action-color); background-color: var(--ov-secondary-action-color);
padding: 5px; padding: 5px;
color: var(--ov-text-primary-color); color: var(--ov-text-primary-color);
font-weight: 400; font-weight: 400;

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.scss
View File

@ -76,10 +76,6 @@
color: #fff; color: #fff;
} }
.divider {
margin: 8px 0px;
}
.blink { .blink {
animation: blinker 1.5s linear infinite; animation: blinker 1.5s linear infinite;
} }
@ -116,7 +112,7 @@
::ng-deep .mat-mdc-menu-panel { ::ng-deep .mat-mdc-menu-panel {
border-radius: var(--ov-surface-radius) !important; border-radius: var(--ov-surface-radius) !important;
background-color: var(--ov-surface-color) !important; background-color: var(--ov-surface-color) !important;
box-shadow: var(--ov-border-shadow) !important; border: 1px solid var(--ov-secondary-action-color) !important;
// Mobile menu improvements // Mobile menu improvements
@media (max-width: 767px) { @media (max-width: 767px) {

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.scss
View File

@ -70,7 +70,7 @@
height: 36px !important; height: 36px !important;
width: 36px !important; width: 36px !important;
display: flex !important; display: flex !important;
box-shadow: 0 2px 4px color-mix(in srgb, var(--ov-text-primary-color) 100%, transparent); // box-shadow: 0 2px 4px color-mix(in srgb, var(--ov-text-primary-color) 100%, transparent);
transition: transition:
box-shadow 0.2s ease, box-shadow 0.2s ease,
transform 0.2s ease; transform 0.2s ease;

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

@ -62,7 +62,7 @@
} }
#branding-logo { #branding-logo {
background-color: var(--ov-primary-action-color); background-color: var(--ov-secondary-action-color);
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
max-width: 35px; max-width: 35px;
max-height: 35px; max-height: 35px;
@ -207,5 +207,10 @@
::ng-deep .mat-mdc-menu-panel { ::ng-deep .mat-mdc-menu-panel {
border-radius: var(--ov-surface-radius) !important; border-radius: var(--ov-surface-radius) !important;
background-color: var(--ov-surface-color) !important; background-color: var(--ov-surface-color) !important;
box-shadow: var(--ov-border-shadow) !important; border: 1px solid var(--ov-secondary-action-color) !important;
.mat-divider {
color: var(--ov-secondary-action-color) !important;
border-top-color: var(--ov-secondary-action-color) !important;
}
} }