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 {
height: 50px;
background-color: var(--ov-secondary-action-color);
background-color: var(--ov-primary-action-color);
color: var(--ov-text-primary-color);
}
@ -42,7 +42,7 @@
#sort-menu-btn {
margin-left: 5px;
background-color: var(--ov-surface-color);
color: var(--ov-text-primary-color);
color: var(--ov-text-surface-color);
}
.search-bar {
@ -140,7 +140,7 @@
}
.video-btns button #play {
color: var(--ov-text-primary-color);
color: var(--ov-primary-action-color);
}
.video-btns button #download {
color: var(--ov-accent-action-color);
@ -167,7 +167,7 @@
.video-card-tag {
font-size: 13px;
color: var(--ov-text-primary-color);
color: var(--ov-text-surface-color);
font-weight: bold;
}
@ -236,13 +236,11 @@
text-align: center;
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 {
padding: 0px !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 {
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;
height: 80%;
width: 3px;
background: var(--ov-secondary-action-color);
background: var(--ov-text-primary-color);
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 {
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:not(:disabled),
::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;
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:not(:disabled),
::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;
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:not(:disabled),
::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;
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: var(--ov-secondary-action-color);
color: var(--ov-text-primary-color);
margin: 0;
padding: 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;
}
::ng-deep .mat-expansion-indicator svg {
fill: var(--ov-text-surface-color) !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 {

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;
}
.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 {
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,
.failed {
background-color: var(--ov-error-color) !important;
// color: var(--ov-secondary-action-color);
}
.stopped {
// background-color: var(--ov-secondary-action-color);
color: var(--ov-text-surface-color) !important;
}
@ -545,8 +543,8 @@
#view-recordings-btn {
width: 100%;
background-color: var(--ov-accent-action-color);
color: var(--ov-secondary-action-color);
background-color: var(--ov-secondary-action-color);
color: var(--ov-text-surface-color);
border-radius: var(--ov-surface-radius);
margin-bottom: 10px;
@ -569,7 +567,7 @@
#reset-recording-status-btn {
width: 100%;
background-color: var(--ov-accent-action-color);
background-color: var(--ov-primary-action-color);
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 {
height: 65px;
display: flex;
background-color: var(--ov-input-background, var(--ov-secondary-action-color));
border: 1px solid var(--ov-border-color, var(--ov-secondary-action-color));
border: 1px solid var(--ov-secondary-action-color);
padding: 10px 5px 10px 10px;
margin: 10px;
border-radius: var(--ov-surface-radius);
order: 3;
justify-content: space-evenly;
align-items: none;
color: var(--ov-text-surface-color);
}
.input-container textarea {
@ -57,6 +56,10 @@
box-shadow: none;
font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
color: var(--ov-text-surface-color);
&::placeholder {
color: var(--ov-text-surface-color);
}
}
.message {
@ -124,5 +127,6 @@
}
::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 {
font-size: 10px;
font-weight: 600;
color: var(--ov-focus-color);
color: var(--ov-text-surface-color);
background-color: var(--ov-surface-color);
padding: 4px 8px;
border-radius: var(--ov-surface-radius);
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
border: 1px solid var(--ov-border-focus-color);
border: 1px solid var(--ov-accent-action-color);
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
.item-menu {
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;
min-width: 180px;
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 {
--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;
justify-content: center;
gap: 8px;
box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2);
&:hover:not([disabled]) {
background: color-mix(in srgb, var(--ov-primary-action-color), var(--ov-secondary-action-color) 10%);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(66, 133, 244, 0.3);
}
&: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();
// Audio-specific overrides for normal mode
&:not(.compact) {
.normal-device-selector {
.device-input-selector {
&:not(.disabled) {
.selector-button {
// Audio-specific hover effect (simpler than video)
&:hover:not([disabled]) {
border-color: var(--ov-primary-action-color, #4285f4);
}
}
}
}
}
}
// &:not(.compact) {
// .normal-device-selector {
// .device-input-selector {
// &:not(.disabled) {
// .selector-button {
// // Audio-specific hover effect (simpler than video)
// &:hover:not([disabled]) {
// 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 {
display: flex;
align-items: center;
background: var(--ov-input-background, #f8f9fa);
border: 2px solid var(--ov-border-color, #e0e0e0);
border-radius: 12px;
background: var(--ov-surface-color, #f8f9fa);
border: 1px solid var(--ov-secondary-action-color, #e0e0e0);
border-radius: var(--pv-surface-radius, 10px);
padding: 0;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
&:focus-within {
border-color: var(--ov-primary-action-color, #4285f4);
box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}
// &:focus-within {
// border-color: var(--ov-primary-action-color, #4285f4);
// box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
// }
.input-icon {
display: flex;
@ -27,7 +27,7 @@
justify-content: center;
width: 48px;
height: 56px;
background: var(--ov-surface-color, #f0f0f0);
background: var(--ov-secondary-action-color, #f0f0f0);
color: var(--ov-text-secondary-color, #666);
font-size: 20px;
border-top-left-radius: 10px;
@ -41,7 +41,7 @@
padding: 0 16px;
border: none;
outline: none;
background: var(--ov-input-background, #f8f9fa);
background: var(--ov-surface-color, #f8f9fa);
font-size: 16px;
font-weight: 500;
color: var(--ov-text-surface-color, #666);
@ -52,7 +52,6 @@
}
&:disabled {
background: var(--ov-disabled-background, #f5f5f5);
color: var(--ov-disabled-text-color, #999);
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;
padding: 0 16px;
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;
color: var(--ov-text-surface-color);
font-size: 14px;
@ -159,7 +159,7 @@
height: 48px;
padding: 0 16px;
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;
color: var(--ov-disabled-text-color, #999);
font-size: 14px;
@ -206,7 +206,7 @@
::ng-deep .device-menu.mat-mdc-menu-panel {
border-radius: 12px;
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;
background-color: var(--ov-surface-color);
@ -224,7 +224,7 @@
}
&.selected {
background-color: var(--ov-secondary-action-color);
background-color: var(--ov-accent-action-color);
mat-icon {
color: var(--ov-text-surface-color);
@ -252,8 +252,8 @@
gap: 8px;
padding: 12px 16px;
background: var(--ov-surface-color, #ffffff);
border: 2px solid var(--ov-border-color, #e0e0e0);
border-radius: 12px;
border: 1px solid var(--ov-secondary-action-color, #e0e0e0);
border-radius: var(--ov-surface-radius, 8px);
transition: all 0.2s ease;
color: var(--ov-text-primary-color, #333);
font-weight: 500;
@ -264,7 +264,6 @@
}
&:hover {
border-color: var(--ov-primary-action-color, #4285f4);
box-shadow: 0 2px 8px rgba(66, 133, 244, 0.1);
}
@ -300,9 +299,9 @@
// selector menu mixin
@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);
border: 1px solid var(--ov-border-color);
border: 1px solid var(--ov-secondary-action-color);
overflow: hidden;
background: var(--ov-surface-color);
@ -321,7 +320,7 @@
}
&.selected {
background-color: var(--ov-secondary-action-color);
background-color: var(--ov-accent-action-color);
.check-icon {
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
&:not(.compact) {
.normal-device-selector {
.device-input-selector {
&:not(.disabled) {
.selector-button {
// Video-specific hover effect with box-shadow
&:hover:not([disabled]) {
background-color: var(--ov-surface-color) !important;
border-color: var(--ov-primary-action-color);
}
}
}
}
}
}
// &:not(.compact) {
// .normal-device-selector {
// .device-input-selector {
// &:not(.disabled) {
// .selector-button {
// // Video-specific hover effect with box-shadow
// &:hover:not([disabled]) {
// background-color: var(--ov-surface-color) !important;
// 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 {
background-color: var(--ov-primary-action-color);
background-color: var(--ov-secondary-action-color);
padding: 5px;
color: var(--ov-text-primary-color);
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;
}
.divider {
margin: 8px 0px;
}
.blink {
animation: blinker 1.5s linear infinite;
}
@ -116,7 +112,7 @@
::ng-deep .mat-mdc-menu-panel {
border-radius: var(--ov-surface-radius) !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
@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;
width: 36px !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:
box-shadow 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 {
background-color: var(--ov-primary-action-color);
background-color: var(--ov-secondary-action-color);
border-radius: var(--ov-surface-radius);
max-width: 35px;
max-height: 35px;
@ -207,5 +207,10 @@
::ng-deep .mat-mdc-menu-panel {
border-radius: var(--ov-surface-radius) !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;
}
}