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

openvidu-components: Updated styles name variables

pull/711/head
csantosm 2022-03-28 10:48:52 +02:00
parent 07aa22ed1d
commit 239b7e28bf
10 changed files with 78 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
openvidu-components-angular/e2e/webcomponent-app/index.html
View File

@ -1,30 +1,31 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<title>openvidu-web-component</title> <title>openvidu-web-component</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" <script
crossorigin="anonymous"></script> src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"
></script>
<script src="app.js"></script> <script src="app.js"></script>
<script src="openvidu-webcomponent-dev.js"></script> <script src="openvidu-webcomponent-dev.js"></script>
<link rel="stylesheet" href="openvidu-webcomponent-dev.css"> <link rel="stylesheet" href="openvidu-webcomponent-dev.css" />
<style> <style>
:root {
:root {
--ov-primary-color: #303030; --ov-primary-color: #303030;
--ov-secondary-color: #586063; --ov-secondary-color: #3e3f3f;
--ov-secondary-light-color: #e6e6e6;
--ov-tertiary-color: #598eff; --ov-tertiary-color: #598eff;
--ov-warn-color: #EB5144; --ov-warn-color: #eb5144;
--ov-accent-color: #ffae35; --ov-accent-color: #ffae35;
--ov-dark-color: #1d1d1d; --ov-text-color: #ffffff;
--ov-dark-light-color: #43484A;
--ov-light-color: #ffffff; --ov-panel-text-color: #1d1d1d;
--ov-light-dark-color: #f1f1f1; --ov-panel-background: #ffffff;
--ov-buttons-radius: 50%; --ov-buttons-radius: 50%;
--ov-leave-button-radius: 10px; --ov-leave-button-radius: 10px;
@ -32,14 +33,11 @@
--ov-panel-radius: 5px; --ov-panel-radius: 5px;
} }
</style> </style>
</head> </head>
<body>
<body>
<div id="events"></div> <div id="events"></div>
<!-- OpenVidu Web Component --> <!-- OpenVidu Web Component -->
<openvidu-webcomponent></openvidu-webcomponent> <openvidu-webcomponent></openvidu-webcomponent>
</body>
</body>
</html> </html>

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

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

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.css
View File

@ -10,7 +10,7 @@
height: 70px; height: 70px;
width: 70px; width: 70px;
border-radius: var(--ov-video-radius); border-radius: var(--ov-video-radius);
border: 2px solid var(--ov-light-color); border: 2px solid var(--ov-text-color);
color: #000000; color: #000000;
} }

10
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css
View File

@ -1,6 +1,6 @@
#chat-container { #chat-container {
margin: 20px; margin: 20px;
background-color: var(--ov-light-color); background-color: var(--ov-panel-background);
border-radius: var(--ov-panel-radius); border-radius: var(--ov-panel-radius);
max-height: calc(100% - 40px); max-height: calc(100% - 40px);
min-height: calc(100% - 40px); min-height: calc(100% - 40px);
@ -24,8 +24,8 @@
.text-container{ .text-container{
/* padding: 5px; */ /* padding: 5px; */
background-color: var(--ov-light-dark-color); background-color: var(--ov-secondary-light-color);
color: var(--ov-dark-color); color: var(--ov-panel-text-color);
text-align: center; text-align: center;
/* margin: 5px 5px; */ /* margin: 5px 5px; */
font-size: 12px; font-size: 12px;
@ -41,7 +41,7 @@
.input-container { .input-container {
height: 25px; height: 25px;
display: flex; display: flex;
background-color: var(--ov-light-dark-color); background-color: var(--ov-secondary-light-color);
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-panel-radius);
@ -85,7 +85,7 @@
.nickname-container p { .nickname-container p {
font-size: 13px; font-size: 13px;
font-weight: bold; font-weight: bold;
color: var(--ov-dark-color); color: var(--ov-panel-text-color);
} }
.msg-content { .msg-content {

6
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css
View File

@ -1,6 +1,6 @@
.participants-container { .participants-container {
margin: 20px; margin: 20px;
background-color: var(--ov-light-color); background-color: var(--ov-panel-background);
border-radius: var(--ov-panel-radius); border-radius: var(--ov-panel-radius);
max-height: calc(100% - 40px); max-height: calc(100% - 40px);
min-height: calc(100% - 40px); min-height: calc(100% - 40px);
@ -34,8 +34,8 @@
.message-container{ .message-container{
padding: 5px; padding: 5px;
background-color: var(--ov-light-dark-color); background-color: var(--ov-secondary-light-color);
color: var(--ov-dark-color); color: var(--ov-panel-text-color);
text-align: center; text-align: center;
margin: 5px 5px; margin: 5px 5px;
font-size: 12px; font-size: 12px;

26
openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css
View File

@ -1,7 +1,7 @@
.container { .container {
height: 100%; height: 100%;
padding: 80px; padding: 80px;
background-color: var(--ov-light-dark-color); background-color: var(--ov-secondary-light-color);
} }
#layout-container { #layout-container {
@ -24,7 +24,7 @@ ov-layout {
} }
.media-panel { .media-panel {
background-color: var(--ov-light-dark-color); background-color: var(--ov-secondary-light-color);
} }
.media-panel-container { .media-panel-container {
width: 100%; width: 100%;
@ -48,22 +48,22 @@ ov-layout {
#nickname-input-container button.mat-button-disabled { #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 { #nickname-input-container mat-form-field, .device-container-element mat-form-field {
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
color: var(--ov-primary-color); color: var(--ov-text-color);
} }
#nickname-input-container mat-form-field { #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 { .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); border-radius: var(--ov-video-radius);
} }
@ -78,7 +78,7 @@ ov-layout {
#camera-button { #camera-button {
border-radius: var(--ov-buttons-radius); border-radius: var(--ov-buttons-radius);
/* background-color: var(--ov-secondary-color) !important; */ /* 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 { #join-button {
width: 100%; width: 100%;
font-weight: bold; font-weight: bold;
color: var(--ov-light-color); color: var(--ov-text-color);
background-color: var(--ov-tertiary-color); background-color: var(--ov-tertiary-color);
border-radius: var(--ov-video-radius); border-radius: var(--ov-video-radius);
} }
.warn-btn { .warn-btn {
color: var(--ov-light-color); color: var(--ov-text-color);
background-color: var(--ov-warn-color) !important; background-color: var(--ov-warn-color) !important;
} }
.active-btn { .active-btn {
color: var(--ov-light-color); color: var(--ov-text-color);
background-color: var(--ov-tertiary-color) !important; background-color: var(--ov-tertiary-color) !important;
} }
.media-btn { .media-btn {
@ -114,10 +114,10 @@ ov-layout {
} }
::ng-deep .mat-input-element { ::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) { ::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 { .container, .media-panel-container, .buttons-container {
padding: 0; padding: 0;
} }

16
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
View File

@ -9,21 +9,21 @@
padding: 0px; padding: 0px;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-video-radius);
color: #ffffff; color: var(--ov-text-color);
font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;
} }
.nicknameContainer { .nicknameContainer {
background-color: var(--ov-secondary-color); background-color: var(--ov-secondary-color);
padding: 5px; padding: 5px;
color: #ffffff; color: var(--ov-text-color);
font-weight: bold; font-weight: bold;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-video-radius);
} }
#nickname-input-container { #nickname-input-container {
background-color: #0000005e; background-color: var(--ov-secondary-color);
border-radius: var(--ov-panel-radius); border-radius: var(--ov-video-radius);
} }
@ -78,7 +78,7 @@
} }
.status-icons button, #settings-container button { .status-icons button, #settings-container button {
color: #ffffff; color: var(--ov-text-color);
width: 26px; width: 26px;
height: 26px; height: 26px;
margin: 5px; margin: 5px;
@ -102,7 +102,7 @@
} }
#settings-container button { #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 */ /* Contains the video element, used to fix video letter-boxing */

4
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
View File

@ -1,7 +1,7 @@
#toolbar { #toolbar {
height: 100%; height: 100%;
background-color: transparent; background-color: transparent;
color: var(--ov-light-color); color: var(--ov-text-color);
} }
.buttonsContainer { .buttonsContainer {
@ -46,7 +46,7 @@
} }
#branding-logo { #branding-logo {
background-color: var(--ov-dark-color); background-color: var(--ov-secondary-color);
border-radius: var(--ov-panel-radius); border-radius: var(--ov-panel-radius);
max-width: 35px; max-width: 35px;
max-height: 35px; max-height: 35px;

10
openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css
View File

@ -69,7 +69,7 @@
box-shadow: none; box-shadow: none;
border-radius: var(--ov-buttons-radius); border-radius: var(--ov-buttons-radius);
background-color: var(--ov-secondary-color) !important; background-color: var(--ov-secondary-color) !important;
color: var(--ov-light-color) !important; color: var(--ov-text-color) !important;
} }
.rightSection { .rightSection {
@ -83,7 +83,7 @@
right: 7px; right: 7px;
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent;
color: var(--ov-light-color); color: var(--ov-text-color);
} }
#header_img { #header_img {
@ -151,12 +151,12 @@
.warn-btn { .warn-btn {
color: var(--ov-light-color); color: var(--ov-text-color);
background-color: var(--ov-warn-color) !important; background-color: var(--ov-warn-color) !important;
} }
.active-btn { .active-btn {
color: var(--ov-light-color); color: var(--ov-text-color);
background-color: var(--ov-tertiary-color) !important; background-color: var(--ov-tertiary-color) !important;
} }
@ -927,7 +927,7 @@
.modal { .modal {
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
background-color: var(--ov-light-dark-color); background-color: var(--ov-secondary-light-color);
} }
.modal.fade .modal-dialog { .modal.fade .modal-dialog {

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

@ -39,16 +39,16 @@ $openvidu-components-theme: mat.define-light-theme((
// Custom openvidu-components styles // Custom openvidu-components styles
:root { :root {
--ov-primary-color: #303030; --ov-primary-color: #303030;
--ov-secondary-color: #586063; --ov-secondary-color: #3e3f3f;
--ov-secondary-light-color: #e6e6e6;
--ov-tertiary-color: #598eff; --ov-tertiary-color: #598eff;
--ov-warn-color: #EB5144; --ov-warn-color: #EB5144;
--ov-accent-color: #ffae35; --ov-accent-color: #ffae35;
--ov-dark-color: #1d1d1d; --ov-text-color: #ffffff;
--ov-dark-light-color: #43484A;
--ov-light-color: #ffffff; --ov-panel-text-color: #1d1d1d;
--ov-light-dark-color: #f1f1f1; --ov-panel-background: #ffffff;
--ov-buttons-radius: 50%; // border-radius property --ov-buttons-radius: 50%; // border-radius property
--ov-leave-button-radius: 10px; --ov-leave-button-radius: 10px;