Add mixins for animations and separate toolbar css
This commit is contained in:
yanas
parent
978c0f2f31
commit
ed29db290e
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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");
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue