From 15ead03a7d29536dfa3651751b2330bc884354a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= Date: Fri, 26 Oct 2018 11:51:02 +0200 Subject: [PATCH] Style changes --- app/stylus/components/Chat.styl | 7 +- app/stylus/components/FileSharing.styl | 9 +- app/stylus/components/Filmstrip.styl | 130 ++++++++++----------- app/stylus/components/ParticipantList.styl | 3 +- app/stylus/components/ToolArea.styl | 12 +- 5 files changed, 82 insertions(+), 79 deletions(-) diff --git a/app/stylus/components/Chat.styl b/app/stylus/components/Chat.styl index eeaa916..ee5b01e 100644 --- a/app/stylus/components/Chat.styl +++ b/app/stylus/components/Chat.styl @@ -53,21 +53,22 @@ [data-component='Sender'] { display: flex; - background-color: rgba(0, 0, 0, 0.1); + background-color: #fff; padding: 1rem; flex-shrink: 0; border-radius: 5px; margin-top: 0.5rem; height: 3rem; + box-shadow: 0vmin 0.3vmin 1vmin 0.2vmin rgba(17,17,17,0.5); > .new-message { width: 100%; border: 0; - color: #FFF; + color: #000; font-size: 1rem; &.focus { outline: none; } } -} \ No newline at end of file +} diff --git a/app/stylus/components/FileSharing.styl b/app/stylus/components/FileSharing.styl index 45ef52a..e99d5f7 100644 --- a/app/stylus/components/FileSharing.styl +++ b/app/stylus/components/FileSharing.styl @@ -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 0.3vmin 1vmin 0.2vmin rgba(17,17,17,0.5); &.disabled { cursor: not-allowed; @@ -96,4 +95,4 @@ justify-content: center; font-size: 2rem; z-index: 3000; -} \ No newline at end of file +} diff --git a/app/stylus/components/Filmstrip.styl b/app/stylus/components/Filmstrip.styl index 65b94ef..5753049 100644 --- a/app/stylus/components/Filmstrip.styl +++ b/app/stylus/components/Filmstrip.styl @@ -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; - } - } - } - } - } -} \ No newline at end of file + &.selected { + > .film-content { + border-color: #377EFF; + } + } + } + } + } +} diff --git a/app/stylus/components/ParticipantList.styl b/app/stylus/components/ParticipantList.styl index 2096b35..becb317 100644 --- a/app/stylus/components/ParticipantList.styl +++ b/app/stylus/components/ParticipantList.styl @@ -2,8 +2,9 @@ width: 100%; > .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); + background-color: #fff; > .list-item { padding: 0.5rem; diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl index 8aed834..ac78300 100644 --- a/app/stylus/components/ToolArea.styl +++ b/app/stylus/components/ToolArea.styl @@ -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 { @@ -201,4 +203,4 @@ display: flex; flex-direction: column; } -} \ No newline at end of file +}