-
@@ -123,31 +110,51 @@
-
-
-
diff --git a/css/_base.scss b/css/_base.scss index 8ecc084c8..4a78f4572 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -17,139 +17,10 @@ html, body, input, textarea, keygen, select, button { font-family: $baseFontFamily !important; } -.right-panel { - display:none; - position:absolute; - float: right; - top: 0px; - bottom: 0px; - right: 0px; - width: 0px; - max-width: 200px; - overflow: hidden; - /* background-color:#dfebf1;*/ - background-color:#FFFFFF; - border-left:1px solid #424242; - z-index: 5; -} - #nowebrtc { display:none; } -#header_container { - z-index: 1014; -} - -.toolbar_span { - display: inline-block; - position: relative; -} - -#toolbar a.button:last-child::after { - content: none; -} - -.button { - display: inline-block; - position: relative; - color: #FFFFFF; - top:0px; - padding-top: 10px; - width: 38px; - height: 28px; - cursor: pointer; - text-align: center; - text-shadow: 0 1px 0 rgba(255,255,255,.3), 0 -1px 0 rgba(0,0,0,.6); - z-index: 1; - font-size: 1.44em !important; - vertical-align: middle; -} - -.button[disabled] { - opacity: 0.5; -} - -.toolbar_span>span { - display: inline-block; - position: absolute; - font-size: 7pt; - color: #ffffff; - text-align:center; - cursor: pointer; -} - -#toolbar_button_chat, #chatBottomButton, #contactListButton, #numberOfParticipants { - -webkit-transition: all .5s ease-in-out; - -moz-transition: all .5s ease-in-out; - transition: all .5s ease-in-out; -} -/*#ffde00*/ -#toolbar_button_chat.active, #contactListButton.glowing, #chatBottomButton.glowing { - -webkit-text-shadow: -1px 0 10px #21B9FC, - 0 1px 10px #21B9FC, - 1px 0 10px #21B9FC, - 0 -1px 10px #21B9FC; - -moz-text-shadow: 1px 0 10px #21B9FC, - 0 1px 10px #21B9FC, - 1px 0 10px #21B9FC, - 0 -1px 10px #21B9FC; - text-shadow: -1px 0 10px #21B9FC, - 0 1px 10px #21B9FC, - 1px 0 10px #21B9FC, - 0 -1px 10px #21B9FC; -} - -#toolbar_button_hangup { - color: #ff0000; - font-size: 1.4em; -} - -#numberOfParticipants { - position: absolute; - top: 0px; - right: -1px; - color: white; - width: 13px; - height: 13px; - line-height: 13px; - font-weight: bold; - border-radius: 1px; - font-size: 11px; - text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; -} - -#contactListButton.active #numberOfParticipants { - color: #21B9FC; -} - -#toolbar { - display:inline-block; - position:relative; - top:5px; - margin-left:auto; - margin-right:auto; - height:38px; - width:auto; - background-color: rgba(0,0,0,0.5); - border-radius: 1px; - pointer-events: auto; -} - -#toolbar_button_record { - -webkit-transition: all .5s ease-in-out; - -moz-transition: all .5s ease-in-out; - transition: all .5s ease-in-out; -} - -a.button:hover, -a.bottomToolbarButton:hover { - cursor: pointer; - background: rgba(255, 255, 255, 0.1); - border-radius: 1px; - -webkit-border-radius: 1px; -} - .no-fa-video-camera, .fa-microphone-slash { color: #636363; } @@ -222,78 +93,10 @@ form { color: rgba(255,255,255,.50); } -#feedbackButton { - position: absolute; - bottom: 60; - left: 60; - overflow: visible; - color: rgba(255,255,255,.50); -} - -#feedbackButtonDiv { - display: none; - position: absolute; - background-color: rgba(0,0,0,.50); - border-radius: 50%; - width: 100px; - height: 100px; - bottom: -50px; - left: -50px; - z-index: 100; - overflow: hidden; - transition: all 2s ease-in-out; -} - -#feedbackButtonDiv.hidden { - bottom: -246px; -} - -div.feedbackButton:hover { - transform: scale(1.3); -} - -#bottomToolbar { - display:block; - position: absolute; - right: 0; - margin-right: 5px; - bottom: 40px; - width: 29px; - border-radius: 1px; - color: #FFF; - background: rgba(0,0,0,0.5); - z-index: 6; /*+1 from #remoteVideos*/ -} - -.bottomToolbarButton { - display: inline-block; - position: relative; - color: #FFFFFF; - top: 0; - padding-top: 6px; - margin: 2px; - width: 25px; - height: 20px; - cursor: pointer; - font-size: 10pt; - text-align: center; - text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7); - z-index: 1; -} - .active { background-color: #00ccff; } -.bottomToolbar_span>span { - display: inline-block; - position: absolute; - font-size: 7pt; - color: #ffffff; - text-align: center; - cursor: pointer; -} - .glow { text-shadow: 0px 0px 30px #06a5df, 0px 0px 10px #06a5df, 0px 0px 5px #06a5df,0px 0px 3px #06a5df; @@ -381,3 +184,35 @@ div.feedbackButton:hover { .toast-message .nickname { font-weight: bold; } + +/** + * Hides an element. + */ +.hide { + display: none !important; +} + +/** + * Shows an element. + */ +.show { + display: block !important; +} + +/** + * Shows an inline element. + */ +.show-inline { + display: inline-block !important; +} + +/** + * Shows a flex element. + */ +.show-flex { + display: -webkit-box !important; + display: -moz-box !important; + display: -ms-flexbox !important; + display: -webkit-flex !important; + display: flex !important; +} \ No newline at end of file diff --git a/css/_chat.scss b/css/_chat.scss index 7b4a0be89..54665bc22 100644 --- a/css/_chat.scss +++ b/css/_chat.scss @@ -1,9 +1,3 @@ -#chatspace { - display: none; - background-color: black; - border-left: 1px solid #424242; -} - #chatspace * { -webkit-user-select: text; user-select: text; @@ -98,13 +92,6 @@ position: absolute; } -#bottomUnreadMessages { - top: 5px; - left: 10px; - position: absolute; - font-size: 8px; -} - #chatspace .username { float: left; padding-left: 5px; diff --git a/css/_contact_list.scss b/css/_contact_list.scss index 6e69a9637..fa11d3c7a 100644 --- a/css/_contact_list.scss +++ b/css/_contact_list.scss @@ -1,21 +1,6 @@ #contactlist { - display: none; - background-color: black; cursor: default; - > div.title { - text-align: left; - padding: 7px 10px; - margin: 2px; - color: #21B9FC; - font-size: 11pt; - border-bottom: 1px solid #676767; - - > span { - margin-left: 5px; - } - } - > ul#contacts { position: absolute; top: 31px; @@ -37,6 +22,7 @@ >li { list-style-type: none; text-align: left; + white-space: nowrap; color: #FFF; font-size: 10pt; padding: 7px 10px; diff --git a/css/_settingsmenu.scss b/css/_settingsmenu.scss index f21aafcf4..3c5ab3bff 100644 --- a/css/_settingsmenu.scss +++ b/css/_settingsmenu.scss @@ -1,10 +1,3 @@ -#settingsmenu { - display: none; - background: black; - color: #21B9FC; - overflow-y: auto; -} - #settingsmenu input, select { margin-top: 10px; margin-left: 10%; @@ -16,18 +9,6 @@ color: #a7a7a7; } -#settingsmenu>div.title { - text-align: left; - padding: 7px 10px; - margin: 2px; - font-size: 11pt; - border-bottom: 1px solid #676767; -} - -#settingsmenu>div.title>span { - margin-left: 5px; -} - #settingsmenu .arrow-up { width: 0; height: 0; diff --git a/css/_variables.scss b/css/_variables.scss index e93e97dce..4469eb64a 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -1,5 +1,10 @@ /** -* Style variables -*/ - + * Style variables + */ $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif; + +/** + * Size variables. + */ +$defaultToolbarSize: 50px; + diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 7cc883ba3..102253886 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -141,10 +141,6 @@ z-index: 0; } -#toolbar_button_etherpad { - display: none; -} - #remoteVideos .videocontainer>span.focusindicator, #remoteVideos .videocontainer>div.remotevideomenu { position: absolute; @@ -357,33 +353,6 @@ z-index: 20; /*The reload button should appear on top of the header!*/ } -#header{ - display:none; - position:absolute; - text-align:center; - top:0; - left:0; - right:0; - z-index:10; - pointer-events: none; - min-height: 100px; -} - -#subject { - position: relative; - z-index: 3; - width: auto; - padding: 5px; - margin-left: 40%; - margin-right: 40%; - text-align: center; - background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35)); - box-shadow: 0 0 2px #000000, 0 0 10px #000000; - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; - display: none; -} - .audiolevel { display: inline-block; position: absolute; diff --git a/index.html b/index.html index b094a525e..a01f69676 100644 --- a/index.html +++ b/index.html @@ -96,25 +96,12 @@