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

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

@ -1,45 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>openvidu-web-component</title>
<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="
crossorigin="anonymous"
></script>
<head>
<title>openvidu-web-component</title>
<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="
crossorigin="anonymous"></script>
<script src="app.js"></script>
<script src="openvidu-webcomponent-dev.js"></script>
<link rel="stylesheet" href="openvidu-webcomponent-dev.css" />
<script src="app.js"></script>
<script src="openvidu-webcomponent-dev.js"></script>
<link rel="stylesheet" href="openvidu-webcomponent-dev.css">
<style>
:root {
--ov-primary-color: #303030;
--ov-secondary-color: #3e3f3f;
--ov-secondary-light-color: #e6e6e6;
--ov-tertiary-color: #598eff;
--ov-warn-color: #eb5144;
--ov-accent-color: #ffae35;
<style>
--ov-text-color: #ffffff;
:root {
--ov-primary-color: #303030;
--ov-secondary-color: #586063;
--ov-tertiary-color: #598eff;
--ov-warn-color: #EB5144;
--ov-accent-color: #ffae35;
--ov-panel-text-color: #1d1d1d;
--ov-panel-background: #ffffff;
--ov-dark-color: #1d1d1d;
--ov-dark-light-color: #43484A;
--ov-buttons-radius: 50%;
--ov-leave-button-radius: 10px;
--ov-video-radius: 5px;
--ov-panel-radius: 5px;
}
</style>
</head>
--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;
}
</style>
</head>
<body>
<div id="events"></div>
<!-- OpenVidu Web Component -->
<openvidu-webcomponent></openvidu-webcomponent>
</body>
</html>
<body>
<div id="events"></div>
<!-- OpenVidu Web Component -->
<openvidu-webcomponent></openvidu-webcomponent>
</body>
</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;
height: 80%;
width: 3px;
background: var(--ov-light-color);
background: var(--ov-text-color);
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;
width: 70px;
border-radius: var(--ov-video-radius);
border: 2px solid var(--ov-light-color);
border: 2px solid var(--ov-text-color);
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 {
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 {

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 {
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;

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

@ -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;
}

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

@ -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 */

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

@ -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;

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;
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 {

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

@ -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;