Merge branch 'feature-lastn' into develop
This commit is contained in:
Stefan Otto
@@ -0,0 +1,6 @@
|
||||
[data-component='AudioPeers'] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
[data-component='MessageList'] {
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
|
||||
> .message {
|
||||
@@ -49,25 +49,55 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 20vmin;
|
||||
|
||||
> p {
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-component='Sender'] {
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
padding: 1rem;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
flex-shrink: 0;
|
||||
border-radius: 5px;
|
||||
margin-top: 0.5rem;
|
||||
height: 3rem;
|
||||
|
||||
> .new-message {
|
||||
width: 100%;
|
||||
width: 80%;
|
||||
box-shadow: 0vmin 0vmin 1vmin 0vmin rgba(17,17,17,0.5);
|
||||
border: 0;
|
||||
color: #FFF;
|
||||
font-size: 1rem;
|
||||
margin-right: 1vmin;
|
||||
border-radius: 0.5vmin;
|
||||
padding-left: 1vmin;
|
||||
color: #000;
|
||||
|
||||
&.focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .send {
|
||||
width: 20%;
|
||||
box-shadow: 0vmin 0vmin 1vmin 0vmin rgba(17,17,17,0.5);
|
||||
border: 0;
|
||||
background-color: #aef;
|
||||
color: #000;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.5vmin;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,11 +7,10 @@
|
||||
> .share-file {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
background: #252525;
|
||||
border: 1px solid #151515;
|
||||
background: #aef;
|
||||
padding: 1rem;
|
||||
border-bottom: 5px solid #151515;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border-radius: 1vmin;
|
||||
box-shadow: 0vmin 0vmin 1vmin 0vmin rgba(17,17,17,0.5);
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
@@ -21,7 +20,7 @@
|
||||
|
||||
> .shared-files {
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
margin-top: 0.5rem;
|
||||
|
||||
> .file-entry {
|
||||
@@ -76,6 +75,23 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 20vmin;
|
||||
|
||||
> p {
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -96,4 +112,4 @@
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
z-index: 3000;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,78 +1,78 @@
|
||||
[data-component='Filmstrip'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
> .active-peer-container {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
> .active-peer-container {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .active-peer {
|
||||
width: 100%;
|
||||
padding: 1vmin;
|
||||
> .active-peer {
|
||||
width: 100%;
|
||||
padding: 1vmin;
|
||||
|
||||
> [data-component='Peer'] {
|
||||
border: 5px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
> [data-component='Peer'] {
|
||||
border: 5px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .filmstrip {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0 , 0.5);
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
height: 20vh;
|
||||
align-items: center;
|
||||
> .filmstrip {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0 , 0.5);
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
height: 20vh;
|
||||
align-items: center;
|
||||
|
||||
> .filmstrip-content {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
> .filmstrip-content {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
|
||||
> .film {
|
||||
height: 18vh;
|
||||
flex-shrink: 0;
|
||||
padding-left: 1vh;
|
||||
> .film {
|
||||
height: 18vh;
|
||||
flex-shrink: 0;
|
||||
padding-left: 1vh;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 1vh;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 1vh;
|
||||
}
|
||||
|
||||
> .film-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
> .film-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
|
||||
> [data-component='Peer'] {
|
||||
max-width: 18vh * (4 / 3);
|
||||
cursor: pointer;
|
||||
> [data-component='Peer'] {
|
||||
max-width: 18vh * (4 / 3);
|
||||
cursor: pointer;
|
||||
|
||||
&.screen {
|
||||
max-width: 18vh * (2 * 4 / 3);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.screen {
|
||||
max-width: 18vh * (2 * 4 / 3);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .film-content {
|
||||
border-color: #FFF;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
> .film-content {
|
||||
border-color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
> .film-content {
|
||||
border-color: #377EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
> .film-content {
|
||||
border-color: #377EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
[data-component='HiddenPeersView'] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
> .info {
|
||||
$backgroundTint = #000;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0.6vmin;
|
||||
left: 0.6vmin;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
> .view-container {
|
||||
width: 12vmin;
|
||||
height: 9vmin;
|
||||
position: absolute;
|
||||
bottom: 3%;
|
||||
right: 3%;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
background-image: url('/resources/images/buddy.svg');
|
||||
background-color: rgba(#2a4b58, 1);
|
||||
background-position: bottom;
|
||||
background-size: auto 85%;
|
||||
background-repeat: no-repeat;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 1.8vmin;
|
||||
font-size: 1.7vmin;
|
||||
font-weight: bolder;
|
||||
animation: none;
|
||||
|
||||
&.pulse {
|
||||
animation: pulse 2s;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,16 @@
|
||||
[data-component='ParticipantList'] {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 6px;
|
||||
|
||||
> .list {
|
||||
box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), \
|
||||
0 4px 20px 0 rgba(0,0,0,0.19);
|
||||
box-shadow: 0 2px 5px 2px rgba(0,0,0,0.2);
|
||||
background-color: #fff;
|
||||
|
||||
> .list-header {
|
||||
padding: 0.5rem;
|
||||
font-weight: bolder;
|
||||
}
|
||||
> .list-item {
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid #CBCBCB;
|
||||
@@ -17,7 +23,7 @@
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-bottom-color: #377EFF;
|
||||
background-color: #377eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -25,7 +31,6 @@
|
||||
|
||||
[data-component='ListPeer'] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .indicators {
|
||||
left: 0;
|
||||
@@ -75,6 +80,41 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
> .volume-container {
|
||||
float: right;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
width: 1vmin;
|
||||
position: relative;
|
||||
background-size: 75%;
|
||||
|
||||
> .bar {
|
||||
flex: 0 0 auto;
|
||||
margin: 0.3rem;
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
transition-property: opacity, background-color;
|
||||
width: 3px;
|
||||
border-radius: 6px;
|
||||
transition-duration: 0.25s;
|
||||
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); }
|
||||
}
|
||||
}
|
||||
> .controls {
|
||||
float: right;
|
||||
display: flex;
|
||||
|
||||
@@ -193,6 +193,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
.paused-video {
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
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: 20px;
|
||||
color: rgba(#fff, 0.55);
|
||||
}
|
||||
}
|
||||
|
||||
.incompatible-video {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
@@ -210,7 +232,7 @@
|
||||
border-radius: 6px;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
font-size: 15px;
|
||||
font-size: 20px;
|
||||
color: rgba(#fff, 0.55);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,6 +39,12 @@
|
||||
&.active-speaker {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
> .peer-content {
|
||||
border: 1px solid #377eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
|
||||
@@ -195,6 +195,7 @@
|
||||
outline: none;
|
||||
padding: 8px 52px 8px 10px;
|
||||
transition: all 200ms ease;
|
||||
box-shadow: 0vmin 0vmin 0.2vmin 0vmin rgba(17,17,17,0.5);
|
||||
}
|
||||
|
||||
.Dropdown-control:hover {
|
||||
|
||||
@@ -153,13 +153,13 @@
|
||||
[data-component='ToolArea'] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
background: rgba(50, 50, 50, 0.9);
|
||||
background: #fff;
|
||||
transition: width 0.3s;
|
||||
z-index: 1010;
|
||||
display: flex;
|
||||
@@ -168,7 +168,7 @@
|
||||
|
||||
> .tab-headers {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
background: #ddd;
|
||||
flex-shrink: 0;
|
||||
|
||||
> .tab-header {
|
||||
@@ -179,7 +179,9 @@
|
||||
text-align: center;
|
||||
|
||||
&.checked {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: #fff;
|
||||
border-radius: 1vmin 1vmin 0vmin 0vmin;
|
||||
box-shadow: 0.5vmin 0vmin 1vmin -0.5vmin #aaa;
|
||||
}
|
||||
|
||||
> .badge {
|
||||
@@ -200,5 +202,6 @@
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,6 +48,7 @@ body {
|
||||
@import './components/Peers';
|
||||
@import './components/Peer';
|
||||
@import './components/PeerView';
|
||||
@import './components/HiddenPeersView';
|
||||
@import './components/ScreenView';
|
||||
@import './components/Notifications';
|
||||
@import './components/Chat';
|
||||
@@ -58,6 +59,7 @@ body {
|
||||
@import './components/FullView';
|
||||
@import './components/Filmstrip';
|
||||
@import './components/FileSharing';
|
||||
@import './components/AudioPeers';
|
||||
|
||||
// Hack to detect in JS the current media query
|
||||
#multiparty-meeting-media-query-detector {
|
||||
|
||||
Reference in New Issue
Block a user