From ed29db290e48f867b0b43af080e537d26440a56e Mon Sep 17 00:00:00 2001 From: yanas Date: Thu, 8 Sep 2016 12:19:15 -0500 Subject: [PATCH] Add mixins for animations and separate toolbar css --- css/_mixins.scss | 37 ++++++ css/_toolbars.scss | 289 +++++++++++++++++++++++++++++++++++++++++++++ css/main.scss | 7 ++ 3 files changed, 333 insertions(+) create mode 100644 css/_mixins.scss create mode 100644 css/_toolbars.scss diff --git a/css/_mixins.scss b/css/_mixins.scss new file mode 100644 index 000000000..167a25b9d --- /dev/null +++ b/css/_mixins.scss @@ -0,0 +1,37 @@ +/** + * Animation mixin. + */ +@mixin animation($animate...) { + $max: length($animate); + $animations: ''; + + @for $i from 1 through $max { + $animations: #{$animations + nth($animate, $i)}; + + @if $i < $max { + $animations: #{$animations + ", "}; + } + } + -webkit-animation: $animations; + -moz-animation: $animations; + -o-animation: $animations; + animation: $animations; +} + +/** + * Keyframes mixin. + */ +@mixin keyframes($animationName) { + @-webkit-keyframes #{$animationName} { + @content; + } + @-moz-keyframes #{$animationName} { + @content; + } + @-o-keyframes #{$animationName} { + @content; + } + @keyframes #{$animationName} { + @content; + } +} \ No newline at end of file diff --git a/css/_toolbars.scss b/css/_toolbars.scss new file mode 100644 index 000000000..f8be98134 --- /dev/null +++ b/css/_toolbars.scss @@ -0,0 +1,289 @@ +.toolbar { + background-color: rgba(0,0,0,0.5); + position: relative; + z-index: 900; + height: 100%; + pointer-events: auto; +} + +#mainToolbarContainer{ + display: block; + position: absolute; + text-align: center; + top:0; + left:0; + right:0; + z-index:10; + pointer-events: none; + min-height: 100px; + transform: translateY(-100%); + -webkit-transform: translateY(-100%); +} + +#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; +} + +#mainToolbar { + height: $defaultToolbarSize; + display: inline-block; + position: relative; + top: 30px; + margin-left: auto; + margin-right: auto; + width: auto; + border-radius: 4px; +} + +#mainToolbar .first { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; +} + +#mainToolbar .last { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; +} + +#extendedToolbar { + display: flex; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + width: $defaultToolbarSize; + height: 100%; + top: 0px; + left: 0px; + padding-top: 10px; + flex-direction: column; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: center; + transform: translateX(-100%); + -webkit-transform: translateX(-100%); +} + +#extendedToolbarPanel { + display: inline-block; + position:absolute; + top: 0px; + left: $defaultToolbarSize; + width:0%; + height: 100%; + max-width: 200px; + background-color: rgba(0,0,0,0.8); + z-index: 800; + overflow: hidden; + + .extendedToolbarPanel__inner { + display: none; + width: 200px; + color: #FFF; + + > div.title { + text-align: left; + padding: 10px; + margin: 2px; + font-size: 12pt; + } + } +} + +#toolbar_button_hangup { + color: #ff0000; + font-size: 2.2em !important; +} + +#toolbar_button_etherpad { + display: none; +} + +#toolbar_button_chat, +#chatBottomButton, +#contactListButton, +#numberOfParticipants, +#toolbar_button_record { + -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; +} + +#numberOfParticipants { + position: absolute; + top: 5px; + line-height: 13px; + font-weight: bold; + font-size: 11px; +} + +#contactListButton.active #numberOfParticipants { + color: #21B9FC; +} + +#mainToolbar a.button:last-child::after { + content: none; +} + +#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; +} + +.toolbar_span>span { + display: inline-block; + position: absolute; + font-size: 7pt; + color: #ffffff; + text-align:center; + cursor: pointer; +} + +.bottomToolbar_span>span { + display: inline-block; + position: absolute; + font-size: 7pt; + color: #ffffff; + text-align: center; + cursor: pointer; +} + +.button { + display: inline-block; + position: relative; + color: #FFFFFF; + top:0px; + width: 50px; + height: 50px; + cursor: pointer; + text-align: center; + z-index: 1; + font-size: 1.44em !important; + line-height: 50px !important; + vertical-align: middle; +} + +.button[disabled] { + opacity: 0.5; +} + +a.button:hover, +a.bottomToolbarButton:hover { + cursor: pointer; + background: rgba(0, 0, 0, 0.8); +} + +a.button>#avatar { + width: 30px; + border-radius: 50%; + padding-top: 10px; + padding-bottom: 10px; +} + +#feedbackButton { + margin-top: auto; +} + +@include keyframes(slideInX) { + 100% { transform: translateX(0%); } +} + +.slideInX { + @include animation('slideInX .5s forwards'); +} + +@include keyframes(slideOutX) { + 0% { transform: translateX(0%); } + 100% { transform: translateX(-100%); } +} + +.slideOutX { + @include animation('slideOutX .5s forwards'); +} + +@include keyframes(slideInY) { + 100% { transform: translateY(0%); } +} + +.slideInY { + @include animation('slideInY .5s forwards'); +} + +@include keyframes(slideOutY) { + 0% { transform: translateY(0%); } + 100% { transform: translateY(-100%); } +} + +.slideOutY { + @include animation('slideOutY .5s forwards'); +} + +@include keyframes(slideInExt) { + from { width: 0%; } + to { width: 20%; } +} + +.slideInExt { + @include animation("slideInExt .5s forwards"); +} + +@include keyframes(slideOutExt) { + from { width: 20%; } + to { width: 0%; } +} + +.slideOutExt { + @include animation("slideOutExt .5s forwards"); +} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 3185d20e0..85cfd2679 100644 --- a/css/main.scss +++ b/css/main.scss @@ -4,6 +4,12 @@ /* Variables END */ +/* Mixins BEGIN */ + +@import "mixins"; + +/* Mixins END */ + /* Fonts BEGIN */ @import 'font'; @@ -30,6 +36,7 @@ @import 'welcome_page'; @import 'settingsmenu'; @import 'feedback'; +@import 'toolbars'; @import 'jquery.contextMenu'; @import 'keyboard-shortcuts';