From b2b66477d434d607dc3986d4a307defefdd33d04 Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Wed, 1 Oct 2025 12:39:34 +0200 Subject: [PATCH] ov-components: update color variables for consistency across components --- .../admin-dashboard.component.scss | 10 +++---- .../audio-wave/audio-wave.component.scss | 2 +- .../dialogs/delete-recording.component.ts | 4 +-- .../components/dialogs/dialog.component.ts | 2 +- .../dialogs/recording-dialog.component.ts | 2 +- .../components/layout/layout.component.scss | 2 +- .../activities-panel.component.scss | 4 +++ .../broadcasting-activity.component.scss | 12 -------- .../recording-activity.component.scss | 8 ++--- .../chat-panel/chat-panel.component.scss | 12 +++++--- .../participant-panel-item.component.scss | 4 +-- .../settings-panel.component.scss | 2 +- .../pre-join/pre-join.component.scss | 4 +-- .../audio-devices.component.scss | 28 ++++++++--------- .../participant-name-input.component.scss | 19 ++++++------ .../components/settings/selector-shared.scss | 19 ++++++------ .../video-devices.component.scss | 30 +++++++++---------- .../components/stream/stream.component.scss | 2 +- .../toolbar-media-buttons.component.scss | 6 +--- .../toolbar-panel-buttons.component.scss | 2 +- .../components/toolbar/toolbar.component.scss | 9 ++++-- 21 files changed, 86 insertions(+), 97 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.scss index ad1280c9..0fc26d0a 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.scss @@ -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; } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.scss index 652729d9..fce7a62d 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.scss @@ -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; } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts index e09c6d9b..0ffc2363 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts @@ -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); } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts index bfd307bd..d22dc73b 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts @@ -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); } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts index abe8c673..92f89619 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts @@ -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); } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.scss index b170b3b1..ac0cb8ec 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.scss @@ -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; diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss index 29c01f03..6c81a2a5 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss @@ -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 { diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss index 3640e5ac..da2a55c4 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss @@ -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; diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss index 5ff965d5..47fb689f 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss @@ -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); } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss index 033cbbd6..d4e191ec 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss @@ -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; } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss index 7ad87b9c..602ba44a 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss @@ -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; } } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss index aa0a6146..92f78844 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss @@ -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; diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss index 95efefb9..e62c2405 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss @@ -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]) { diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss index 2aecba0b..f04cdee5 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss @@ -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); + // } + // } + // } + // } + // } + // } } } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss index 618cb1f4..d12ee865 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss @@ -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; } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss index 8e8d5788..3f2fe3e5 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss @@ -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); diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss index 6c423858..daf3e5ed 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss @@ -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); + // } + // } + // } + // } + // } + // } } } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss index d075ebf1..701dcc93 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss @@ -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; diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.scss index 454c7460..c4d2d3ff 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.scss @@ -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) { diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.scss index 462b9d58..8639d221 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.scss @@ -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; diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss index 678e75a6..75cb1e9a 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss @@ -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; + } }