v2
This commit is contained in:
Iñaki Baz Castillo
@@ -1,5 +0,0 @@
|
||||
[data-component='App'] {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
[data-component='LocalVideo'] {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
|
||||
TransitionAppear(500ms);
|
||||
|
||||
+desktop() {
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
border: 2px solid rgba(#fff, 0.5);
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
border: 2px solid rgba(#fff, 0.5);
|
||||
}
|
||||
|
||||
&.state-checking {
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
&.state-checking {
|
||||
animation: LocalVideo-state-checking .5s infinite linear;
|
||||
}
|
||||
|
||||
&.state-connected,
|
||||
&.state-completed {
|
||||
border-color: rgba(#49ce3e, 0.9);
|
||||
}
|
||||
|
||||
&.state-failed,
|
||||
&.state-disconnected,
|
||||
&.state-closed {
|
||||
border-color: rgba(#ff2000, 0.75);
|
||||
}
|
||||
|
||||
&.active-speaker {
|
||||
border-color: rgba(#fff, 0.9);
|
||||
}
|
||||
|
||||
> .controls {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.25s;
|
||||
|
||||
> .control {
|
||||
pointer-events: auto;
|
||||
flex: 0 0 auto;
|
||||
margin: 4px !important;
|
||||
margin-left: 0 !important;
|
||||
height: 32px !important;
|
||||
width: 32px !important;
|
||||
padding: 0 !important;
|
||||
background-color: rgba(#000, 0.25) !important;
|
||||
border-radius: 100%;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#000, 0.85) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .info {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .peer-id {
|
||||
padding: 4px 14px;
|
||||
font-size: 14px;
|
||||
color: rgba(#fff, 0.75);
|
||||
background: rgba(#000, 0.6);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes LocalVideo-state-checking {
|
||||
50% {
|
||||
border-color: rgba(orange, 0.9);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
[data-component='Me'] {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
> .controls {
|
||||
position: absolute;
|
||||
z-index: 10
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction:; row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
> .button {
|
||||
flex: 0 0 auto;
|
||||
margin: 4px;
|
||||
margin-left: 0;
|
||||
border-radius: 2px;
|
||||
background-position: center;
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(#000, 0.5);
|
||||
cursor: pointer;
|
||||
transition-property: opacity, background-color;
|
||||
transition-duration: 0.15s;
|
||||
|
||||
+desktop() {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
opacity: 0.85;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.on {
|
||||
background-color: rgba(#fff, 0.7);
|
||||
}
|
||||
|
||||
&.mic {
|
||||
&.on {
|
||||
background-image: url('/resources/images/icon_mic_black_on.svg');
|
||||
}
|
||||
|
||||
&.off {
|
||||
background-image: url('/resources/images/icon_mic_white_off.svg');
|
||||
background-color: rgba(#d42241, 0.7);
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
background-image: url('/resources/images/icon_mic_white_unsupported.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.webcam {
|
||||
&.on {
|
||||
background-image: url('/resources/images/icon_webcam_black_on.svg');
|
||||
}
|
||||
|
||||
&.off {
|
||||
background-image: url('/resources/images/icon_webcam_white_on.svg');
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
background-image: url('/resources/images/icon_webcam_white_unsupported.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.change-webcam {
|
||||
&.on {
|
||||
background-image: url('/resources/images/icon_change_webcam_black.svg');
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
background-image: url('/resources/images/icon_change_webcam_white_unsupported.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
[data-component='Notifications'] {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
|
||||
+desktop() {
|
||||
padding: 10px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
padding: 4px;
|
||||
width: 65%;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
> .notification {
|
||||
pointer-events: auto;
|
||||
margin-top: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.Appear-appear {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all 0.15s ease-in-out 0s, visibility 0s linear 0.25s;
|
||||
transform: translateX(200px);
|
||||
}
|
||||
|
||||
&.Appear-appear.Appear-appear-active {
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
transition-delay: 0s, 0s;
|
||||
}
|
||||
|
||||
+desktop() {
|
||||
padding: 16px 24px 16px 12px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
padding: 6px 16px 6px 12px;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
flex: 0 0 auto;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 12px;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
> .text {
|
||||
font-size: 13px;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
|
||||
+desktop() {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: rgba(#0a1d26, 0.75);
|
||||
color: rgba(#fff, 0.65);
|
||||
|
||||
>.icon {
|
||||
opacity: 0.65;
|
||||
background-image: url('/resources/images/icon_notification_info_white.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: rgba(#ff1914, 0.65);
|
||||
color: rgba(#fff, 0.85);
|
||||
|
||||
>.icon {
|
||||
opacity: 0.85;
|
||||
background-image: url('/resources/images/icon_notification_error_white.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
[data-component='Peer'] {
|
||||
flex: 100 100 auto;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
+mobile() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
> .indicators {
|
||||
position: absolute;
|
||||
z-index: 10
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction:; row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
> .icon {
|
||||
flex: 0 0 auto;
|
||||
margin: 4px;
|
||||
margin-left: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-position: center;
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.15s;
|
||||
|
||||
+desktop() {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
&.mic-off {
|
||||
background-image: url('/resources/images/icon_remote_mic_white_off.svg');
|
||||
}
|
||||
|
||||
&.webcam-off {
|
||||
background-image: url('/resources/images/icon_remote_webcam_white_off.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.incompatible-video {
|
||||
position: absolute;
|
||||
z-index: 2
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> p {
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
font-size: 15px;
|
||||
color: rgba(#fff, 0.55);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,262 @@
|
||||
[data-component='PeerView'] {
|
||||
position: relative;
|
||||
flex: 100 100 auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: rgba(#2a4b58, 0.9);
|
||||
background-image: url('/resources/images/buddy.svg');
|
||||
background-position: bottom;
|
||||
background-size: auto 85%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
> .info {
|
||||
$backgroundTint = #000;
|
||||
|
||||
position: absolute;
|
||||
z-index: 5
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba($backgroundTint, 0) 0%,
|
||||
rgba($backgroundTint, 0) 60%,
|
||||
rgba($backgroundTint, 0.1) 70%,
|
||||
rgba($backgroundTint, 0.8) 100%);
|
||||
|
||||
> .media {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
> .box {
|
||||
margin: 4px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(#000, 0.25);
|
||||
|
||||
> p {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
margin-bottom: 2px;
|
||||
color: rgba(#fff, 0.7);
|
||||
font-size: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .peer {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
+desktop() {
|
||||
&.is-me {
|
||||
padding: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&:not(.is-me) {
|
||||
padding: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
&.is-me {
|
||||
padding: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&:not(.is-me) {
|
||||
padding: 10px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
> .display-name {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(#fff, 0.85);
|
||||
}
|
||||
|
||||
> span.display-name {
|
||||
user-select: none;
|
||||
cursor: text;
|
||||
|
||||
&:not(.editable) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.editable {
|
||||
+desktop() {
|
||||
&:hover {
|
||||
background-color: rgba(#aeff00, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.loading {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
> input.display-name {
|
||||
border: none;
|
||||
border-bottom: 1px solid #aeff00;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
> .row {
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
|
||||
> .device-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
margin-right: 3px;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('/resources/images/devices/unknown.svg');
|
||||
|
||||
&.chrome {
|
||||
background-image: url('/resources/images/devices/chrome_16x16.png');
|
||||
}
|
||||
|
||||
&.firefox {
|
||||
background-image: url('/resources/images/devices/firefox_16x16.png');
|
||||
}
|
||||
|
||||
&.safari {
|
||||
background-image: url('/resources/images/devices/safari_16x16.png');
|
||||
}
|
||||
|
||||
&.msedge {
|
||||
background-image: url('/resources/images/devices/edge_16x16.png');
|
||||
}
|
||||
|
||||
&.opera {
|
||||
background-image: url('/resources/images/devices/opera_16x16.png');
|
||||
}
|
||||
|
||||
&.sipendpoint {
|
||||
background-image: url('/resources/images/devices/sip_endpoint.svg');
|
||||
}
|
||||
}
|
||||
|
||||
> .device-version {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
font-size: 11px;
|
||||
color: rgba(#fff, 0.55);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> video {
|
||||
flex: 100 100 auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
transition-property: opacity;
|
||||
transition-duration: .15s;
|
||||
background-color: rgba(#000, 0.75);
|
||||
|
||||
&.is-me {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
||||
> .volume-container {
|
||||
position: absolute;
|
||||
top: 0
|
||||
bottom: 0;
|
||||
right: 2px;
|
||||
width: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .bar {
|
||||
width: 6px;
|
||||
border-radius: 6px;
|
||||
background: rgba(yellow, 0.65);
|
||||
transition-property: height background-color;
|
||||
transition-duration: 0.25s;
|
||||
|
||||
&.level0 { height: 0; background-color: rgba(yellow, 0.65); }
|
||||
&.level1 { height: 10%; background-color: rgba(yellow, 0.65); }
|
||||
&.level2 { height: 20%; background-color: rgba(yellow, 0.65); }
|
||||
&.level3 { height: 30%; background-color: rgba(yellow, 0.65); }
|
||||
&.level4 { height: 40%; background-color: rgba(orange, 0.65); }
|
||||
&.level5 { height: 50%; background-color: rgba(orange, 0.65); }
|
||||
&.level6 { height: 60%; background-color: rgba(red, 0.65); }
|
||||
&.level7 { height: 70%; background-color: rgba(red, 0.65); }
|
||||
&.level8 { height: 80%; background-color: rgba(#000, 0.65); }
|
||||
&.level9 { height: 90%; background-color: rgba(#000, 0.65); }
|
||||
&.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; }
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
[data-component='Peers'] {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
|
||||
+desktop() {
|
||||
width: 100%;
|
||||
padding: 40px 0 140px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
> .peer-container {
|
||||
overflow: hidden;
|
||||
|
||||
AppearFadeIn(1000ms);
|
||||
|
||||
+desktop() {
|
||||
flex: 0 0 auto;
|
||||
height: 382px;
|
||||
width: 450px;
|
||||
margin: 6px;
|
||||
border: 1px solid rgba(#fff, 0.15);
|
||||
box-shadow: 0px 5px 12px 2px rgba(#111, 0.5);
|
||||
transition-property: border-color;
|
||||
transition-duration: 0.15s;
|
||||
|
||||
&.active-speaker {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
flex: 100 100 auto;
|
||||
order: 2;
|
||||
min-height: 25vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.active-speaker {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
[data-component='RemoteVideo'] {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
transition-duration: 0.25s;
|
||||
|
||||
TransitionAppear(500ms);
|
||||
|
||||
&.fullsize {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
|
||||
> .info {
|
||||
justify-content: flex-end;
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
+desktop() {
|
||||
height: 350px;
|
||||
width: 400px;
|
||||
margin: 4px;
|
||||
border: 4px solid rgba(#fff, 0.2);
|
||||
|
||||
&.fullsize {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
height: 50vh;
|
||||
width: 100%;
|
||||
border: 4px solid rgba(#fff, 0.2);
|
||||
border-bottom-width: 0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width: 4px;
|
||||
}
|
||||
|
||||
&.fullsize {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.active-speaker {
|
||||
border-color: rgba(#fff, 0.9);
|
||||
}
|
||||
|
||||
> .controls {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.25s;
|
||||
opacity: 0.8;
|
||||
|
||||
> .control {
|
||||
pointer-events: auto;
|
||||
flex: 0 0 auto;
|
||||
margin: 4px !important;
|
||||
margin-left: 0 !important;
|
||||
height: 32px !important;
|
||||
width: 32px !important;
|
||||
padding: 0 !important;
|
||||
background-color: rgba(#000, 0.25) !important;
|
||||
border-radius: 100%;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#000, 0.85) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .info {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
+desktop() {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
justify-content: flex-end;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
> .peer-id {
|
||||
padding: 6px 16px;
|
||||
font-size: 16px;
|
||||
color: rgba(#fff, 0.75);
|
||||
background: rgba(#000, 0.6);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+173
-47
@@ -1,14 +1,91 @@
|
||||
[data-component='Room'] {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
+desktop() {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
AppearFadeIn(300ms);
|
||||
|
||||
> .state {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 25px;
|
||||
background-color: rgba(#fff, 0.2);
|
||||
|
||||
+desktop() {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 124px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 100%;
|
||||
|
||||
+desktop() {
|
||||
margin: 5px;
|
||||
margin-right: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
margin: 4px;
|
||||
margin-right: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&.new, &.closed {
|
||||
background-color: rgba(#aaa, 0.5);
|
||||
}
|
||||
|
||||
&.connecting {
|
||||
animation: Room-info-state-connecting .75s infinite linear;
|
||||
}
|
||||
|
||||
&.connected {
|
||||
background-color: rgba(#30bd18, 0.75);
|
||||
|
||||
+mobile() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .text {
|
||||
flex: 100 0 auto;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Roboto';
|
||||
font-weight: 400;
|
||||
color: rgba(#fff, 0.75);
|
||||
|
||||
+desktop() {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
&.connected {
|
||||
+mobile() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .room-link-wrapper {
|
||||
@@ -24,7 +101,7 @@
|
||||
|
||||
> .room-link {
|
||||
width: auto;
|
||||
background-color: rgba(#fff, 0.8);
|
||||
background-color: rgba(#fff, 0.75);
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
box-shadow: 0px 3px 12px 2px rgba(#111, 0.4);
|
||||
@@ -33,15 +110,24 @@
|
||||
display: block;;
|
||||
user-select: none;
|
||||
pointer-events: auto;
|
||||
padding: 10px 20px;
|
||||
color: #104758;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.25s;
|
||||
opacity: 0.8;
|
||||
|
||||
+desktop() {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
text-decoration: underline;
|
||||
@@ -50,65 +136,105 @@
|
||||
}
|
||||
}
|
||||
|
||||
> .remote-videos {
|
||||
> .me-container {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 5px 12px 2px rgba(#111, 0.5);
|
||||
transition-property: border-color;
|
||||
transition-duration: 0.15s;
|
||||
|
||||
&.active-speaker {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
+desktop() {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
padding-bottom: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
height: 200px;
|
||||
width: 235px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
border: 1px solid rgba(#fff, 0.15);
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 175px;
|
||||
width: 150px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
border: 1px solid rgba(#fff, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
> .local-video {
|
||||
> .sidebar {
|
||||
position: fixed;
|
||||
z-index: 101;
|
||||
top: calc(50% - 60px);
|
||||
height: 120px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
z-index: 100;
|
||||
box-shadow: 0px 5px 12px 2px rgba(#111, 0.5);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
+desktop() {
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> .show-stats {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: -40px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-image: url('/resources/images/stats.svg');
|
||||
> .button {
|
||||
flex: 0 0 auto;
|
||||
margin: 4px 0;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(#000, 0.25);
|
||||
border-radius: 4px;
|
||||
background-color: rgba(#fff, 0.15);
|
||||
cursor: pointer;
|
||||
opacity: 0.85;
|
||||
transition-duration: 0.25s;
|
||||
transition-property: opacity, background-color;
|
||||
transition-duration: 0.15s;
|
||||
border-radius: 100%;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
+desktop() {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
&.on {
|
||||
background-color: rgba(#fff, 0.7);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.audio-only {
|
||||
background-image: url('/resources/images/icon_audio_only_white.svg');
|
||||
|
||||
&.on {
|
||||
background-image: url('/resources/images/icon_audio_only_black.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.restart-ice {
|
||||
background-image: url('/resources/images/icon_restart_ice_white.svg');
|
||||
|
||||
&.on {
|
||||
background-image: url('/resources/images/icon_restart_ice__black.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes Room-info-state-connecting {
|
||||
50% { background-color: rgba(orange, 0.75); }
|
||||
}
|
||||
|
||||
@@ -1,114 +0,0 @@
|
||||
[data-component='Stats'] {
|
||||
TransitionAppear(500ms);
|
||||
|
||||
+desktop() {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 0;
|
||||
min-width: 100px;
|
||||
background-color: rgba(#1c446f, 0.75);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
position: fixed;
|
||||
z-index: 3000;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(#1c446f, 0.75);
|
||||
padding: 40px 10px;
|
||||
font-size: 0.9rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
> .close {
|
||||
background-image: url('/resources/images/close.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
transition-duration: 0.25s;
|
||||
|
||||
+desktop() {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
> .block {
|
||||
padding: 5px;
|
||||
|
||||
+desktop() {
|
||||
border-right: 1px solid rgba(#fff, 0.15);
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> h1 {
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
> .item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 3px 0;
|
||||
font-size: 0.95em;
|
||||
font-weight: 300;
|
||||
|
||||
> .key {
|
||||
text-align: right;
|
||||
color: rgba(#fff, 0.9);
|
||||
|
||||
+desktop() {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
> .value {
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
color: #aae22b;
|
||||
|
||||
+desktop() {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
[data-component='Video'] {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
background-color: rgba(#041918, 0.65);
|
||||
background-image: url('/resources/images/buddy.svg');
|
||||
background-position: bottom;
|
||||
background-size: auto 85%;
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
|
||||
> .resolution {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 4px 8px;
|
||||
border-bottom-right-radius: 5px;
|
||||
background: rgba(#000, 0.5);
|
||||
transition-property: background;
|
||||
transition-duration: 0.25s;
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba(#000, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
> p {
|
||||
font-size: 11px;
|
||||
color: rgba(#fff, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
> .volume {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 0
|
||||
bottom: 0;
|
||||
right: 2px;
|
||||
width: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .bar {
|
||||
width: 6px;
|
||||
border-radius: 6px;
|
||||
background: rgba(yellow, 0.65);
|
||||
transition-property: height background-color;
|
||||
transition-duration: 0.25s;
|
||||
|
||||
&.level0 { height: 0; background-color: rgba(yellow, 0.65); }
|
||||
&.level1 { height: 10%; background-color: rgba(yellow, 0.65); }
|
||||
&.level2 { height: 20%; background-color: rgba(yellow, 0.65); }
|
||||
&.level3 { height: 30%; background-color: rgba(yellow, 0.65); }
|
||||
&.level4 { height: 40%; background-color: rgba(orange, 0.65); }
|
||||
&.level5 { height: 50%; background-color: rgba(orange, 0.65); }
|
||||
&.level6 { height: 60%; background-color: rgba(red, 0.65); }
|
||||
&.level7 { height: 70%; background-color: rgba(red, 0.65); }
|
||||
&.level8 { height: 80%; background-color: rgba(#000, 0.65); }
|
||||
&.level9 { height: 90%; background-color: rgba(#000, 0.65); }
|
||||
&.level10 { height: 100%; background-color: rgba(#000, 0.65); }
|
||||
}
|
||||
}
|
||||
|
||||
> video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
|
||||
&.mirror {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
+12
-16
@@ -4,17 +4,18 @@ global-reset();
|
||||
|
||||
@import './mixins';
|
||||
@import './fonts';
|
||||
@import './reset';
|
||||
|
||||
html {
|
||||
font-family: 'Roboto';
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background-image: url('/resources/images/body-bg-2.jpg');
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
font-weight: 400;
|
||||
font-family: 'Roboto';
|
||||
font-weight: 300;
|
||||
|
||||
+desktop() {
|
||||
font-size: 16px;
|
||||
@@ -26,25 +27,20 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#mediasoup-demo-app-container {
|
||||
min-height: 100vh;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
// Components
|
||||
@import './components/App';
|
||||
@import './components/Room';
|
||||
@import './components/LocalVideo';
|
||||
@import './components/RemoteVideo';
|
||||
@import './components/Video';
|
||||
@import './components/Stats';
|
||||
@import './components/Me';
|
||||
@import './components/Peers';
|
||||
@import './components/Peer';
|
||||
@import './components/PeerView';
|
||||
@import './components/Notifications';
|
||||
}
|
||||
|
||||
// Hack to detect in JS the current media query
|
||||
|
||||
@@ -21,13 +21,13 @@ desktop()
|
||||
@media (min-device-width: 721px)
|
||||
{block}
|
||||
|
||||
TransitionAppear($duration = 1s, $appearOpacity = 0, $activeOpacity = 1)
|
||||
AppearFadeIn($duration = 1s, $enterOpacity = 0, $activeOpacity = 1)
|
||||
will-change: opacity;
|
||||
|
||||
&.transition-appear
|
||||
opacity: $appearOpacity;
|
||||
&.Appear-appear
|
||||
opacity: $enterOpacity;
|
||||
|
||||
&.transition-appear.transition-appear-active
|
||||
&.Appear-appear.Appear-appear-active
|
||||
transition-property: opacity;
|
||||
transition-duration: $duration;
|
||||
opacity: $activeOpacity;
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
Reference in New Issue
Block a user