Major cleanup. Moved a lot of CSS variables out too root of CSS for easier styling.
This commit is contained in:
Håvar Aambø Fosstveit
@@ -23,7 +23,7 @@
|
||||
}
|
||||
|
||||
> .client, > .response {
|
||||
background-color: rgba(#000, 0.1);
|
||||
background-color: var(--chat-message-color);
|
||||
border-radius: 5px;
|
||||
max-width: 85%;
|
||||
display: flex;
|
||||
@@ -70,8 +70,8 @@
|
||||
|
||||
[data-component='Sender'] {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
background-color: var(--chat-input-bg-color);
|
||||
color: var(--chat-input-text-color);
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.5rem;
|
||||
height: 3rem;
|
||||
@@ -84,7 +84,6 @@
|
||||
margin-right: 1vmin;
|
||||
border-radius: 0.5vmin;
|
||||
padding-left: 1vmin;
|
||||
color: #000;
|
||||
|
||||
&.focus {
|
||||
outline: none;
|
||||
@@ -95,8 +94,7 @@
|
||||
width: 20%;
|
||||
box-shadow: 0vmin 0vmin 1vmin 0vmin rgba(17,17,17,0.5);
|
||||
border: 0;
|
||||
background-color: #aef;
|
||||
color: #000;
|
||||
background-color: var(--chat-send-bg-color);
|
||||
font-size: 1rem;
|
||||
border-radius: 0.5vmin;
|
||||
}
|
||||
|
||||
@@ -7,11 +7,15 @@
|
||||
> .share-file {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
background: #aef;
|
||||
background: var(--filesharing-bg-color);
|
||||
padding: 1rem;
|
||||
border-radius: 1vmin;
|
||||
box-shadow: 0vmin 0vmin 1vmin 0vmin rgba(17,17,17,0.5);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -63,13 +63,13 @@
|
||||
|
||||
&.active {
|
||||
> .film-content {
|
||||
border-color: #FFF;
|
||||
border-color: var(--active-speaker-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
> .film-content {
|
||||
border-color: #377EFF;
|
||||
border-color: var(--selected-peer-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,37 +69,4 @@
|
||||
filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
||||
> .spinner-container {
|
||||
position: absolute;
|
||||
top: 0
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(#000, 0.75);
|
||||
|
||||
.react-spinner {
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
.react-spinner_bar {
|
||||
position: absolute;
|
||||
width: 20%;
|
||||
height: 7.8%;
|
||||
top: -3.9%;
|
||||
left: -10%;
|
||||
animation: PeerView-spinner 1.2s linear infinite;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(#fff, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes FullView-spinner {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0.15; }
|
||||
}
|
||||
|
||||
+13
-38
@@ -1,4 +1,4 @@
|
||||
[data-component='HiddenPeersView'] {
|
||||
[data-component='HiddenPeers'] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -31,6 +31,8 @@
|
||||
background-position: bottom;
|
||||
background-size: auto 85%;
|
||||
background-repeat: no-repeat;
|
||||
border: var(--peer-border);
|
||||
box-shadow: var(--peer-shadow);
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 1.8vmin;
|
||||
@@ -39,55 +41,28 @@
|
||||
animation: none;
|
||||
|
||||
&.pulse {
|
||||
animation: pulse 2s;
|
||||
animation: pulse 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.view-container>p{
|
||||
transform: translate(0%,50%);
|
||||
}
|
||||
|
||||
.view-container,
|
||||
.view-container::before,
|
||||
.view-container::after {
|
||||
/* Add shadow to distinguish sheets from one another */
|
||||
box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.view-container::before,
|
||||
.view-container::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #2a4b58;
|
||||
}
|
||||
|
||||
/* Second sheet of paper */
|
||||
.view-container::before {
|
||||
left: .7vmin;
|
||||
top: .7vmin;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Third sheet of paper */
|
||||
.view-container::after {
|
||||
left: 1.4vmin;
|
||||
top: 1.4vmin;
|
||||
z-index: -2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 1.0);
|
||||
0%
|
||||
{
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
|
||||
50%
|
||||
{
|
||||
transform: scale3d(1.2, 1.2, 1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
||||
100%
|
||||
{
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
@@ -1,19 +1,18 @@
|
||||
[data-component='Logo'] {
|
||||
position: absolute;
|
||||
height: 4%;
|
||||
width: 8%;
|
||||
position: absolute;
|
||||
width: var(--logo-width);
|
||||
height: var(--logo-height);
|
||||
top: 1%;
|
||||
left: 1%;
|
||||
z-index: 20;
|
||||
background-position: left;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
+desktop() {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
}
|
||||
background-image: url('/resources/images/logo.svg');
|
||||
background-image: var(--logo);
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
|
||||
> .view-container {
|
||||
position: relative;
|
||||
width: 20vmin;
|
||||
height: 15vmin;
|
||||
width: var(--me-width);
|
||||
height: var(--me-height);
|
||||
|
||||
&.webcam {
|
||||
order: 2;
|
||||
@@ -23,9 +23,7 @@
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction:; row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
padding: 0.4vmin;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
@@ -41,41 +39,37 @@
|
||||
background-position: center;
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(#000, 0.5);
|
||||
background-color: var(--media-control-button-color);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition-property: opacity, background-color;
|
||||
transition-duration: 0.15s;
|
||||
width: var(--media-control-button-size);
|
||||
height: var(--media-control-button-size);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.visible {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
+desktop() {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
background-color: var(--media-control-botton-disabled);
|
||||
}
|
||||
|
||||
&.on {
|
||||
background-color: rgba(#fff, 0.7);
|
||||
background-color: var(--media-control-botton-on);
|
||||
}
|
||||
|
||||
&.off {
|
||||
background-color: var(--media-control-botton-off);
|
||||
}
|
||||
|
||||
&.mic {
|
||||
@@ -85,7 +79,6 @@
|
||||
|
||||
&.off {
|
||||
background-image: url('/resources/images/icon_remote_mic_white_off.svg');
|
||||
background-color: rgba(#d42241, 0.7);
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
@@ -100,33 +93,12 @@
|
||||
|
||||
&.off {
|
||||
background-image: url('/resources/images/icon_remote_webcam_white_off.svg');
|
||||
background-color: rgba(#d42241, 0.7);
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
background-image: url('/resources/images/icon_webcam_white_unsupported.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.screen {
|
||||
&.on {
|
||||
background-image: url('/resources/images/share-screen-black.svg');
|
||||
}
|
||||
|
||||
&.off {
|
||||
background-image: url('/resources/images/no-share-screen-white.svg');
|
||||
background-color: rgba(#d42241, 0.7);
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
background-image: url('/resources/images/no-share-screen-white.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.fullscreen {
|
||||
background-image: url('/resources/images/icon_fullscreen_black.svg');
|
||||
background-color: rgba(#fff, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,8 +84,8 @@
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: rgba(#0a1d26, 0.75);
|
||||
color: rgba(#fff, 0.65);
|
||||
background-color: var(--notification-info-bg-color);
|
||||
color: var(--notification-info-text-color);
|
||||
|
||||
>.icon {
|
||||
opacity: 0.65;
|
||||
@@ -94,8 +94,8 @@
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: rgba(#ff1914, 0.65);
|
||||
color: rgba(#fff, 0.85);
|
||||
background-color: var(--notification-error-bg-color);
|
||||
color: var(--notification-error-text-color);
|
||||
|
||||
>.icon {
|
||||
opacity: 0.85;
|
||||
|
||||
@@ -51,20 +51,12 @@
|
||||
background-color: rgba(#000, 0.5);
|
||||
transition-property: opacity, background-color;
|
||||
transition-duration: 0.15s;
|
||||
width: var(--media-control-button-size);
|
||||
height: var(--media-control-button-size);
|
||||
opacity: 0.85;
|
||||
|
||||
+desktop() {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
opacity: 0.85;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.on {
|
||||
@@ -102,19 +94,20 @@
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
|
||||
&.level0 { height: 0; background-color: rgba(#000, 0.8); }
|
||||
&.level1 { height: 0.2vh; background-color: rgba(#000, 0.8); }
|
||||
&.level2 { height: 0.4vh; background-color: rgba(#000, 0.8); }
|
||||
&.level3 { height: 0.6vh; background-color: rgba(#000, 0.8); }
|
||||
&.level4 { height: 0.8vh; background-color: rgba(#000, 0.8); }
|
||||
&.level5 { height: 1.0vh; background-color: rgba(#000, 0.8); }
|
||||
&.level6 { height: 1.2vh; background-color: rgba(#000, 0.8); }
|
||||
&.level7 { height: 1.4vh; background-color: rgba(#000, 0.8); }
|
||||
&.level8 { height: 1.6vh; background-color: rgba(#000, 0.8); }
|
||||
&.level9 { height: 1.8vh; background-color: rgba(#000, 0.8); }
|
||||
&.level10 { height: 2.0vh; background-color: rgba(#000, 0.8); }
|
||||
&.level0 { height: 0; }
|
||||
&.level1 { height: 0.2vh; }
|
||||
&.level2 { height: 0.4vh; }
|
||||
&.level3 { height: 0.6vh; }
|
||||
&.level4 { height: 0.8vh; }
|
||||
&.level5 { height: 1.0vh; }
|
||||
&.level6 { height: 1.2vh; }
|
||||
&.level7 { height: 1.4vh; }
|
||||
&.level8 { height: 1.6vh; }
|
||||
&.level9 { height: 1.8vh; }
|
||||
&.level10 { height: 2.0vh; }
|
||||
}
|
||||
}
|
||||
|
||||
> .controls {
|
||||
float: right;
|
||||
display: flex;
|
||||
@@ -133,20 +126,12 @@
|
||||
cursor: pointer;
|
||||
transition-property: opacity, background-color;
|
||||
transition-duration: 0.15s;
|
||||
width: var(--media-control-button-size);
|
||||
height: var(--media-control-button-size);
|
||||
opacity: 0.85;
|
||||
|
||||
+desktop() {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
opacity: 0.85;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
@@ -155,11 +140,15 @@
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
background-color: var(--media-control-botton-disabled);
|
||||
}
|
||||
|
||||
&.on {
|
||||
background-color: rgba(#fff, 0.7);
|
||||
background-color: var(--media-control-botton-on);
|
||||
}
|
||||
|
||||
&.off {
|
||||
background-color: var(--media-control-botton-off);
|
||||
}
|
||||
|
||||
&.mic {
|
||||
@@ -169,7 +158,6 @@
|
||||
|
||||
&.off {
|
||||
background-image: url('/resources/images/icon_remote_mic_white_off.svg');
|
||||
background-color: rgba(#d42241, 0.7);
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
@@ -184,7 +172,6 @@
|
||||
|
||||
&.off {
|
||||
background-image: url('/resources/images/icon_remote_webcam_white_off.svg');
|
||||
background-color: rgba(#d42241, 0.7);
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
@@ -199,7 +186,6 @@
|
||||
|
||||
&.off {
|
||||
background-image: url('/resources/images/no-share-screen-white.svg');
|
||||
background-color: rgba(#d42241, 0.7);
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
@@ -210,16 +196,16 @@
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
border-radius: 50%;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
> .peer-info {
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
display: flex;
|
||||
padding-left: 0.5rem;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
display: flex;
|
||||
padding-left: 0.5rem;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,20 +54,12 @@
|
||||
background-color: rgba(#000, 0.5);
|
||||
transition-property: opacity, background-color;
|
||||
transition-duration: 0.15s;
|
||||
width: var(--media-control-button-size);
|
||||
height: var(--media-control-button-size);
|
||||
opacity: 0.85;
|
||||
|
||||
+desktop() {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
opacity: 0.85;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.on {
|
||||
@@ -107,24 +99,16 @@
|
||||
background-position: center;
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(#000, 0.5);
|
||||
background-color: var(--media-control-button-color);
|
||||
cursor: pointer;
|
||||
transition-property: opacity, background-color;
|
||||
transition-duration: 0.15s;
|
||||
width: var(--media-control-button-size);
|
||||
height: var(--media-control-button-size);
|
||||
opacity: 0.85;
|
||||
|
||||
+desktop() {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
opacity: 0.85;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
@@ -133,11 +117,15 @@
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
background-color: var(--media-control-botton-disabled);
|
||||
}
|
||||
|
||||
&.on {
|
||||
background-color: rgba(#fff, 0.7);
|
||||
background-color: var(--media-control-botton-on);
|
||||
}
|
||||
|
||||
&.off {
|
||||
background-color: var(--media-control-botton-off);
|
||||
}
|
||||
|
||||
&.mic {
|
||||
@@ -147,7 +135,6 @@
|
||||
|
||||
&.off {
|
||||
background-image: url('/resources/images/icon_remote_mic_white_off.svg');
|
||||
background-color: rgba(#d42241, 0.7);
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
@@ -155,21 +142,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.webcam {
|
||||
&.on {
|
||||
background-image: url('/resources/images/icon_webcam_black_on.svg');
|
||||
}
|
||||
|
||||
&.off {
|
||||
background-image: url('/resources/images/icon_remote_webcam_white_off.svg');
|
||||
background-color: rgba(#d42241, 0.7);
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
background-image: url('/resources/images/icon_webcam_white_unsupported.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.screen {
|
||||
&.on {
|
||||
background-image: url('/resources/images/share-screen-black.svg');
|
||||
@@ -177,7 +149,6 @@
|
||||
|
||||
&.off {
|
||||
background-image: url('/resources/images/no-share-screen-white.svg');
|
||||
background-color: rgba(#d42241, 0.7);
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
@@ -187,12 +158,10 @@
|
||||
|
||||
&.fullscreen {
|
||||
background-image: url('/resources/images/icon_fullscreen_black.svg');
|
||||
background-color: rgba(#fff, 0.7);
|
||||
}
|
||||
|
||||
&.newwindow {
|
||||
background-image: url('/resources/images/icon_new_window_black.svg');
|
||||
background-color: rgba(#fff, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,15 +6,13 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: rgba(#2a4b58, 0.9);
|
||||
background-image: url('/resources/images/buddy.svg');
|
||||
background-color: var(--peer-bg-color);
|
||||
background-image: var(--peer-empty-avatar);
|
||||
background-position: bottom;
|
||||
background-size: auto 85%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
> .info {
|
||||
$backgroundTint = #000;
|
||||
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0.6vmin;
|
||||
@@ -178,7 +176,7 @@
|
||||
user-select: none;
|
||||
transition-property: opacity;
|
||||
transition-duration: .15s;
|
||||
background-color: rgba(#000, 0.75);
|
||||
background-color: var(--peer-video-bg-color);
|
||||
|
||||
&.is-me {
|
||||
transform: scaleX(-1);
|
||||
@@ -225,37 +223,4 @@
|
||||
&.level10 { height: 100%; background-color: rgba(#000, 0.65); }
|
||||
}
|
||||
}
|
||||
|
||||
> .spinner-container {
|
||||
position: absolute;
|
||||
top: 0
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(#000, 0.75);
|
||||
|
||||
.react-spinner {
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
.react-spinner_bar {
|
||||
position: absolute;
|
||||
width: 20%;
|
||||
height: 7.8%;
|
||||
top: -3.9%;
|
||||
left: -10%;
|
||||
animation: PeerView-spinner 1.2s linear infinite;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(#fff, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes PeerView-spinner {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0.15; }
|
||||
}
|
||||
|
||||
@@ -31,18 +31,18 @@
|
||||
+desktop() {
|
||||
flex: 0 0 auto;
|
||||
margin: 6px;
|
||||
border: 1px solid rgba(#fff, 0.15);
|
||||
box-shadow: 0px 5px 12px 2px rgba(#111, 0.5);
|
||||
border: var(--peer-border);
|
||||
box-shadow: var(--peer-shadow);
|
||||
transition-property: border-color;
|
||||
transition-duration: 0.15s;
|
||||
|
||||
&.active-speaker {
|
||||
border-color: #fff;
|
||||
border-color: var(--active-speaker-border-color);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
> .peer-content {
|
||||
border: 1px solid #377eff;
|
||||
border-color: var(--selected-peer-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,24 +143,15 @@
|
||||
position: fixed;
|
||||
z-index: 110;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 5px 12px 2px rgba(#111, 0.5);
|
||||
box-shadow: var(--me-shadow);
|
||||
transition-property: border-color;
|
||||
transition-duration: 0.15s;
|
||||
top: 6%;
|
||||
left:1%;
|
||||
border: var(--me-border);
|
||||
|
||||
&.active-speaker {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
+desktop() {
|
||||
top: 6%;
|
||||
left:1%;
|
||||
border: 1px solid rgba(#fff, 0.15);
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
top: 6%;
|
||||
left: 1%;
|
||||
border: 1px solid rgba(#fff, 0.25);
|
||||
border-color: var(--active-speaker-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,15 +6,13 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: rgba(#2a4b58, 0.9);
|
||||
background-image: url('/resources/images/buddy.svg');
|
||||
background-color: var(--peer-bg-color);
|
||||
background-image: var(--peer-empty-avatar);
|
||||
background-position: bottom;
|
||||
background-size: auto 85%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
> .info {
|
||||
$backgroundTint = #000;
|
||||
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0.6vmin;
|
||||
@@ -58,7 +56,7 @@
|
||||
user-select: none;
|
||||
transition-property: opacity;
|
||||
transition-duration: .15s;
|
||||
background-color: rgba(#000, 0.75);
|
||||
background-color: var(--peer-video-bg-color);
|
||||
|
||||
&.is-me {
|
||||
transform: scaleX(-1);
|
||||
@@ -73,37 +71,4 @@
|
||||
filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
||||
> .spinner-container {
|
||||
position: absolute;
|
||||
top: 0
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(#000, 0.75);
|
||||
|
||||
.react-spinner {
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
.react-spinner_bar {
|
||||
position: absolute;
|
||||
width: 20%;
|
||||
height: 7.8%;
|
||||
top: -3.9%;
|
||||
left: -10%;
|
||||
animation: PeerView-spinner 1.2s linear infinite;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(#fff, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ScreenView-spinner {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0.15; }
|
||||
}
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
[data-component='Settings'] {
|
||||
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
[data-component='Sidebar'] {
|
||||
position: fixed;
|
||||
z-index: 500;
|
||||
top: calc(50% - 60px);
|
||||
height: 120px;
|
||||
top: 50%;
|
||||
transform: translate(0%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -24,7 +24,7 @@
|
||||
background-position: center;
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(#fff, 0.3);
|
||||
background-color: var(--circle-button-color);
|
||||
cursor: pointer;
|
||||
transition-property: opacity, background-color;
|
||||
transition-duration: 0.15s;
|
||||
@@ -32,24 +32,20 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
+desktop() {
|
||||
height: 2.5em;
|
||||
width: 2.5em;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
height: 2.5em;
|
||||
width: 2.5em;
|
||||
}
|
||||
height: var(--circle-button-size);
|
||||
width: var(--circle-button-size);
|
||||
|
||||
&.on {
|
||||
background-color: rgba(#fff, 0.7);
|
||||
background-color: var(--circle-button-toggled-color);
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
background-color: var(--circle-button-unsupported-color);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
background-color: var(--circle-button-diabled-color);
|
||||
}
|
||||
|
||||
&.login {
|
||||
@@ -93,7 +89,6 @@
|
||||
|
||||
&.unsupported {
|
||||
background-image: url('/resources/images/no-share-screen-white.svg');
|
||||
background-color: rgba(#d42241, 0.7);
|
||||
}
|
||||
|
||||
&.need-extension {
|
||||
|
||||
@@ -27,35 +27,6 @@
|
||||
.toolarea-shade.open {
|
||||
display: block;
|
||||
}
|
||||
> .button {
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(#aef);
|
||||
cursor: pointer;
|
||||
border-radius: 15%;
|
||||
padding: 1px;
|
||||
|
||||
+desktop() {
|
||||
height: 36px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
height: 32px;
|
||||
width: 16px;
|
||||
}
|
||||
&.toolarea-close-button {
|
||||
background-image: url('/resources/images/arrow_right.svg');
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -22px;
|
||||
display: none;
|
||||
&.on {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .toolarea-button {
|
||||
text-align: center;
|
||||
|
||||
+50
-4
@@ -7,6 +7,53 @@ global-reset();
|
||||
@import './reset';
|
||||
@import './keyframes';
|
||||
|
||||
:root {
|
||||
--logo: url('/resources/images/logo.svg');
|
||||
--logo-width: 8%;
|
||||
--logo-height: 4%;
|
||||
|
||||
--background: url('/resources/images/background.svg');
|
||||
--background-color: rgba(51, 51, 51, 1.0);
|
||||
|
||||
--circle-button-color: rgba(255, 255, 255, 0.3);
|
||||
--circle-button-toggled-color: rgba(255, 255, 255, 0.7);
|
||||
--circle-button-unsupported-color: rgba(212, 34, 65, 0.7);
|
||||
--circle-button-diabled-color: rgba(255, 255, 255, 0.5);
|
||||
--circle-button-size: 2.5em;
|
||||
|
||||
--media-control-button-color: rgba(255, 255, 255, 0.85);
|
||||
--media-control-botton-on: rgba(255, 255, 255, 0.7);
|
||||
--media-control-botton-off: rgba(212, 34, 65, 0.7);
|
||||
--media-control-botton-disabled: rgba(255, 255, 255, 0.5)
|
||||
--media-control-button-size: 1.5em;
|
||||
|
||||
--me-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
|
||||
--me-border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
--me-width: 20vmin;
|
||||
--me-height: 15vmin;
|
||||
|
||||
--peer-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
|
||||
--peer-border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
--peer-empty-avatar: url('/resources/images/buddy.svg');
|
||||
--peer-bg-color: rgba(42, 75, 88, 0.9);
|
||||
--peer-video-bg-color: rgba(0, 0, 0, 0.75);
|
||||
|
||||
--chat-message-color: rgba(0, 0, 0, 0.1);
|
||||
--chat-input-bg-color: rgba(255, 255, 255, 1.0);
|
||||
--chat-input-text-color: rgba(0, 0, 0, 1.0);
|
||||
--chat-send-bg-color: rgba(170, 238, 255, 1.0);
|
||||
|
||||
--filesharing-bg-color: rgba(170, 238, 255, 1.0);
|
||||
|
||||
--notification-info-bg-color: rgba(10, 29, 38, 0.75);
|
||||
--notification-info-text-color: rgba(255, 255, 255, 0.65);
|
||||
--notification-error-bg-color: rgba(255, 25, 20, 0.65);
|
||||
--notification-error-text-color: rgba(255, 255, 255, 0.85);
|
||||
|
||||
--active-speaker-border-color: rgba(255, 255, 255, 1.0);
|
||||
--selected-peer-border-color: rgba(55, 126, 255, 1.0);
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
font-family: 'Roboto';
|
||||
@@ -23,11 +70,11 @@ body {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
background-color: #333;
|
||||
background-color: var(--background-color);
|
||||
|
||||
+desktop() {
|
||||
font-size: 16px;
|
||||
background-image: url('/resources/images/background.svg');
|
||||
background-image: var(--background);
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@@ -48,11 +95,10 @@ body {
|
||||
@import './components/Peers';
|
||||
@import './components/Peer';
|
||||
@import './components/PeerView';
|
||||
@import './components/HiddenPeersView';
|
||||
@import './components/HiddenPeers';
|
||||
@import './components/ScreenView';
|
||||
@import './components/Notifications';
|
||||
@import './components/Chat';
|
||||
@import './components/Settings';
|
||||
@import './components/ToolArea';
|
||||
@import './components/ParticipantList';
|
||||
@import './components/FullScreenView';
|
||||
|
||||
Reference in New Issue
Block a user