From 239b7e28bf482a3eed35edafa643c660a54d59e1 Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Mon, 28 Mar 2022 10:48:52 +0200 Subject: [PATCH] openvidu-components: Updated styles name variables --- .../e2e/webcomponent-app/index.html | 72 +++++++++---------- .../audio-wave/audio-wave.component.css | 2 +- .../avatar-profile.component.css | 2 +- .../panel/chat-panel/chat-panel.component.css | 10 +-- .../participants-panel.component.css | 6 +- .../pre-join/pre-join.component.css | 26 +++---- .../components/stream/stream.component.css | 16 ++--- .../components/toolbar/toolbar.component.css | 4 +- .../user-settings/user-settings.component.css | 10 +-- openvidu-components-angular/src/styles.scss | 10 +-- 10 files changed, 78 insertions(+), 80 deletions(-) diff --git a/openvidu-components-angular/e2e/webcomponent-app/index.html b/openvidu-components-angular/e2e/webcomponent-app/index.html index 457c4719..e9df7764 100644 --- a/openvidu-components-angular/e2e/webcomponent-app/index.html +++ b/openvidu-components-angular/e2e/webcomponent-app/index.html @@ -1,45 +1,43 @@ + + openvidu-web-component + + - - openvidu-web-component - - + + + - - - + + - --ov-light-color: #ffffff; - --ov-light-dark-color: #f1f1f1; - - --ov-buttons-radius: 50%; - --ov-leave-button-radius: 10px; - --ov-video-radius: 5px; - --ov-panel-radius: 5px; - } - - - - - -
- - - - - - \ No newline at end of file + +
+ + + + diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css index 3c9a16f0..877ed18a 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css @@ -38,7 +38,7 @@ margin: auto; height: 80%; width: 3px; - background: var(--ov-light-color); + background: var(--ov-text-color); border-radius: 8px; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.css index c942b6f6..aa067873 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.css @@ -10,7 +10,7 @@ height: 70px; width: 70px; border-radius: var(--ov-video-radius); - border: 2px solid var(--ov-light-color); + border: 2px solid var(--ov-text-color); color: #000000; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css index fc1a9fc0..75d3247d 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css @@ -1,6 +1,6 @@ #chat-container { margin: 20px; - background-color: var(--ov-light-color); + background-color: var(--ov-panel-background); border-radius: var(--ov-panel-radius); max-height: calc(100% - 40px); min-height: calc(100% - 40px); @@ -24,8 +24,8 @@ .text-container{ /* padding: 5px; */ - background-color: var(--ov-light-dark-color); - color: var(--ov-dark-color); + background-color: var(--ov-secondary-light-color); + color: var(--ov-panel-text-color); text-align: center; /* margin: 5px 5px; */ font-size: 12px; @@ -41,7 +41,7 @@ .input-container { height: 25px; display: flex; - background-color: var(--ov-light-dark-color); + background-color: var(--ov-secondary-light-color); padding: 10px; margin: 10px; border-radius: var(--ov-panel-radius); @@ -85,7 +85,7 @@ .nickname-container p { font-size: 13px; font-weight: bold; - color: var(--ov-dark-color); + color: var(--ov-panel-text-color); } .msg-content { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css index ed5b7984..4688a8d5 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css @@ -1,6 +1,6 @@ .participants-container { margin: 20px; - background-color: var(--ov-light-color); + background-color: var(--ov-panel-background); border-radius: var(--ov-panel-radius); max-height: calc(100% - 40px); min-height: calc(100% - 40px); @@ -34,8 +34,8 @@ .message-container{ padding: 5px; - background-color: var(--ov-light-dark-color); - color: var(--ov-dark-color); + background-color: var(--ov-secondary-light-color); + color: var(--ov-panel-text-color); text-align: center; margin: 5px 5px; font-size: 12px; diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css index 20fbd25b..5d0fa2e0 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css @@ -1,7 +1,7 @@ .container { height: 100%; padding: 80px; - background-color: var(--ov-light-dark-color); + background-color: var(--ov-secondary-light-color); } #layout-container { @@ -24,7 +24,7 @@ ov-layout { } .media-panel { - background-color: var(--ov-light-dark-color); + background-color: var(--ov-secondary-light-color); } .media-panel-container { width: 100%; @@ -48,22 +48,22 @@ ov-layout { #nickname-input-container button.mat-button-disabled { - color: #000000 !important; + color: var(--ov-text-color) !important; } #nickname-input-container mat-form-field, .device-container-element mat-form-field { width: 100%; margin-top: 10px; - color: var(--ov-primary-color); + color: var(--ov-text-color); } #nickname-input-container mat-form-field { - color: var(--ov-primary-color); + color: var(--ov-text-color); } .mat-form-field-appearance-fill .mat-form-field-flex { - background-color: var(--ov-light-color); + /* background-color: var(--ov-text-color); */ border-radius: var(--ov-video-radius); } @@ -78,7 +78,7 @@ ov-layout { #camera-button { border-radius: var(--ov-buttons-radius); /* background-color: var(--ov-secondary-color) !important; */ - /* color: var(--ov-light-color) !important; */ + /* color: var(--ov-text-color) !important; */ } @@ -90,19 +90,19 @@ ov-layout { #join-button { width: 100%; font-weight: bold; - color: var(--ov-light-color); + color: var(--ov-text-color); background-color: var(--ov-tertiary-color); border-radius: var(--ov-video-radius); } .warn-btn { - color: var(--ov-light-color); + color: var(--ov-text-color); background-color: var(--ov-warn-color) !important; } .active-btn { - color: var(--ov-light-color); + color: var(--ov-text-color); background-color: var(--ov-tertiary-color) !important; } .media-btn { @@ -114,10 +114,10 @@ ov-layout { } ::ng-deep .mat-input-element { - caret-color: #000000; + caret-color: var(--ov-text-color) !important; } ::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) { - color: #000000; + color: var(--ov-text-color) !important; } @@ -137,7 +137,7 @@ ov-layout { } } -@media only screen and (min-width: 480px) and (max-width: 960px) { +@media only screen and (min-width: 480px) and (max-width: 959px) { .container, .media-panel-container, .buttons-container { padding: 0; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css index 960f7bed..794baf8a 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css @@ -9,21 +9,21 @@ padding: 0px; position: absolute; z-index: 999; - border-radius: var(--ov-panel-radius); - color: #ffffff; + border-radius: var(--ov-video-radius); + color: var(--ov-text-color); font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif; } .nicknameContainer { background-color: var(--ov-secondary-color); padding: 5px; - color: #ffffff; + color: var(--ov-text-color); font-weight: bold; - border-radius: var(--ov-panel-radius); + border-radius: var(--ov-video-radius); } #nickname-input-container { - background-color: #0000005e; - border-radius: var(--ov-panel-radius); + background-color: var(--ov-secondary-color); + border-radius: var(--ov-video-radius); } @@ -78,7 +78,7 @@ } .status-icons button, #settings-container button { - color: #ffffff; + color: var(--ov-text-color); width: 26px; height: 26px; margin: 5px; @@ -102,7 +102,7 @@ } #settings-container button { - background-color: var(--ov-dark-color); + background-color: var(--ov-secondary-color); } /* Contains the video element, used to fix video letter-boxing */ diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css index cae1d351..65126fa0 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css @@ -1,7 +1,7 @@ #toolbar { height: 100%; background-color: transparent; - color: var(--ov-light-color); + color: var(--ov-text-color); } .buttonsContainer { @@ -46,7 +46,7 @@ } #branding-logo { - background-color: var(--ov-dark-color); + background-color: var(--ov-secondary-color); border-radius: var(--ov-panel-radius); max-width: 35px; max-height: 35px; diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css index 8400a4a5..bc923c74 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css @@ -69,7 +69,7 @@ box-shadow: none; border-radius: var(--ov-buttons-radius); background-color: var(--ov-secondary-color) !important; - color: var(--ov-light-color) !important; + color: var(--ov-text-color) !important; } .rightSection { @@ -83,7 +83,7 @@ right: 7px; box-shadow: none; background-color: transparent; - color: var(--ov-light-color); + color: var(--ov-text-color); } #header_img { @@ -151,12 +151,12 @@ .warn-btn { - color: var(--ov-light-color); + color: var(--ov-text-color); background-color: var(--ov-warn-color) !important; } .active-btn { - color: var(--ov-light-color); + color: var(--ov-text-color); background-color: var(--ov-tertiary-color) !important; } @@ -927,7 +927,7 @@ .modal { height: 100%; max-width: 100%; - background-color: var(--ov-light-dark-color); + background-color: var(--ov-secondary-light-color); } .modal.fade .modal-dialog { diff --git a/openvidu-components-angular/src/styles.scss b/openvidu-components-angular/src/styles.scss index 96eaf828..6fb8e6b6 100644 --- a/openvidu-components-angular/src/styles.scss +++ b/openvidu-components-angular/src/styles.scss @@ -39,16 +39,16 @@ $openvidu-components-theme: mat.define-light-theme(( // Custom openvidu-components styles :root { --ov-primary-color: #303030; - --ov-secondary-color: #586063; + --ov-secondary-color: #3e3f3f; + --ov-secondary-light-color: #e6e6e6; --ov-tertiary-color: #598eff; --ov-warn-color: #EB5144; --ov-accent-color: #ffae35; - --ov-dark-color: #1d1d1d; - --ov-dark-light-color: #43484A; + --ov-text-color: #ffffff; - --ov-light-color: #ffffff; - --ov-light-dark-color: #f1f1f1; + --ov-panel-text-color: #1d1d1d; + --ov-panel-background: #ffffff; --ov-buttons-radius: 50%; // border-radius property --ov-leave-button-radius: 10px;