Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Style changes

master
Håvar Aambø Fosstveit 2018-10-26 11:51:02 +02:00
parent d564ff0be7
commit 15ead03a7d
5 changed files with 82 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/stylus/components/Chat.styl
View File

@ -53,21 +53,22 @@
[data-component='Sender'] { [data-component='Sender'] {
display: flex; display: flex;
background-color: rgba(0, 0, 0, 0.1); background-color: #fff;
padding: 1rem; padding: 1rem;
flex-shrink: 0; flex-shrink: 0;
border-radius: 5px; border-radius: 5px;
margin-top: 0.5rem; margin-top: 0.5rem;
height: 3rem; height: 3rem;
box-shadow: 0vmin 0.3vmin 1vmin 0.2vmin rgba(17,17,17,0.5);
> .new-message { > .new-message {
width: 100%; width: 100%;
border: 0; border: 0;
color: #FFF; color: #000;
font-size: 1rem; font-size: 1rem;
&.focus { &.focus {
outline: none; outline: none;
} }
} }
} }

9
app/stylus/components/FileSharing.styl
View File

@ -7,11 +7,10 @@
> .share-file { > .share-file {
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
background: #252525; background: #aef;
border: 1px solid #151515;
padding: 1rem; padding: 1rem;
border-bottom: 5px solid #151515; border-radius: 1vmin;
border-radius: 3px 3px 0 0; box-shadow: 0vmin 0.3vmin 1vmin 0.2vmin rgba(17,17,17,0.5);
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
@ -96,4 +95,4 @@
justify-content: center; justify-content: center;
font-size: 2rem; font-size: 2rem;
z-index: 3000; z-index: 3000;
} }

130
app/stylus/components/Filmstrip.styl
View File

@ -1,78 +1,78 @@
[data-component='Filmstrip'] { [data-component='Filmstrip'] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
height: 100%; height: 100%;
> .active-peer-container { > .active-peer-container {
width: 100%; width: 100%;
height: 80vh; height: 80vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
> .active-peer { > .active-peer {
width: 100%; width: 100%;
padding: 1vmin; padding: 1vmin;
> [data-component='Peer'] { > [data-component='Peer'] {
border: 5px solid rgba(255, 255, 255, 0.15); border: 5px solid rgba(255, 255, 255, 0.15);
box-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5); box-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
} }
} }
} }
> .filmstrip { > .filmstrip {
display: flex; display: flex;
background: rgba(0, 0, 0 , 0.5); background: rgba(0, 0, 0 , 0.5);
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
height: 20vh; height: 20vh;
align-items: center; align-items: center;
> .filmstrip-content { > .filmstrip-content {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
height: 100%; height: 100%;
align-items: center; align-items: center;
> .film { > .film {
height: 18vh; height: 18vh;
flex-shrink: 0; flex-shrink: 0;
padding-left: 1vh; padding-left: 1vh;
&:last-child { &:last-child {
padding-right: 1vh; padding-right: 1vh;
} }
> .film-content { > .film-content {
height: 100%; height: 100%;
width: 100%; width: 100%;
border: 1px solid rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.15);
> [data-component='Peer'] { > [data-component='Peer'] {
max-width: 18vh * (4 / 3); max-width: 18vh * (4 / 3);
cursor: pointer; cursor: pointer;
&.screen { &.screen {
max-width: 18vh * (2 * 4 / 3); max-width: 18vh * (2 * 4 / 3);
border: 0; border: 0;
} }
} }
} }
&.active { &.active {
> .film-content { > .film-content {
border-color: #FFF; border-color: #FFF;
} }
} }
&.selected { &.selected {
> .film-content { > .film-content {
border-color: #377EFF; border-color: #377EFF;
} }
} }
} }
} }
} }
} }

3
app/stylus/components/ParticipantList.styl
View File

@ -2,8 +2,9 @@
width: 100%; width: 100%;
> .list { > .list {
box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), \ box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), \
0 4px 20px 0 rgba(0,0,0,0.19); 0 4px 20px 0 rgba(0,0,0,0.19);
background-color: #fff;
> .list-item { > .list-item {
padding: 0.5rem; padding: 0.5rem;

12
app/stylus/components/ToolArea.styl
View File

@ -153,13 +153,13 @@
[data-component='ToolArea'] { [data-component='ToolArea'] {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #fff; color: #000;
position: fixed; position: fixed;
width: 0; width: 0;
top: 0; top: 0;
right: 0; right: 0;
height: 100%; height: 100%;
background: rgba(50, 50, 50, 0.9); background: #fff;
transition: width 0.3s; transition: width 0.3s;
z-index: 1010; z-index: 1010;
display: flex; display: flex;
@ -168,7 +168,7 @@
> .tab-headers { > .tab-headers {
display: flex; display: flex;
background: rgba(0, 0, 0, 0.1); background: #ddd;
flex-shrink: 0; flex-shrink: 0;
> .tab-header { > .tab-header {
@ -179,7 +179,9 @@
text-align: center; text-align: center;
&.checked { &.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 { > .badge {
@ -201,4 +203,4 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }