Fixes some styles and variables (#1809)
* Fixes some toolbox/toolbar styles and variables * [squash] Fixes variable name to fit better its purpose * [squash] Fixes secondary toolbar variable name
This commit is contained in:
yanas
virtuacoplenny
parent
1897c395ec
commit
06234066b6
|
|
@ -2,7 +2,7 @@
|
|||
* Toolbar side panel main container element.
|
||||
*/
|
||||
#sideToolbarContainer {
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
background-color: $sideToolbarContainerBg;
|
||||
height: 100%;
|
||||
left: $defaultToolbarSize;
|
||||
max-width: $sidebarWidth;
|
||||
|
|
|
|||
|
|
@ -19,74 +19,6 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toolbar button styles.
|
||||
*/
|
||||
.button {
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
z-index: $zindex1;
|
||||
display: inline-block;
|
||||
font-size: $toolbarFontSize !important;
|
||||
height: 50px;
|
||||
line-height: 50px !important;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top:0px;
|
||||
vertical-align: middle;
|
||||
width: 50px;
|
||||
|
||||
&_hangup {
|
||||
color: $hangupColor;
|
||||
font-size: $hangupFontSize !important;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not(.toggled) {
|
||||
&:hover, &:active {
|
||||
// sum opacity with background layer should give us 0.8
|
||||
background: $toolbarSelectBackground;
|
||||
}
|
||||
}
|
||||
|
||||
&.toggled {
|
||||
background: $toolbarToggleBackground;
|
||||
|
||||
&.icon-camera {
|
||||
@extend .icon-camera-disabled;
|
||||
}
|
||||
|
||||
&.icon-full-screen {
|
||||
@extend .icon-exit-full-screen;
|
||||
}
|
||||
|
||||
&.icon-microphone {
|
||||
@extend .icon-mic-disabled;
|
||||
}
|
||||
|
||||
&.icon-visibility {
|
||||
@extend .icon-visibility-off;
|
||||
}
|
||||
}
|
||||
|
||||
&.unclickable {
|
||||
cursor: default;
|
||||
|
||||
&:hover, &:active, &.selected {
|
||||
background: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-container {
|
||||
display: block;
|
||||
left:0;
|
||||
|
|
@ -104,28 +36,85 @@
|
|||
* Common toolbar styles.
|
||||
*/
|
||||
.toolbar {
|
||||
background-color: $toolbarBackground;
|
||||
color: $modalTextColor;
|
||||
height: 100%;
|
||||
pointer-events: auto;
|
||||
position: relative;
|
||||
z-index: $toolbarZ;
|
||||
|
||||
/**
|
||||
* Splitter button in the toolbar.
|
||||
* Toolbar button styles.
|
||||
*/
|
||||
&__splitter {
|
||||
background: $splitterColor;
|
||||
.button {
|
||||
color: $toolbarButtonColor;
|
||||
cursor: pointer;
|
||||
z-index: $zindex1;
|
||||
display: inline-block;
|
||||
height: 50%;
|
||||
margin: 0 $splitterToolbarButtonMargin;
|
||||
font-size: $toolbarFontSize;
|
||||
height: $defaultToolbarSize;
|
||||
line-height: $defaultToolbarSize;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top:0px;
|
||||
vertical-align: middle;
|
||||
width: 1px;
|
||||
width: $defaultToolbarSize;
|
||||
|
||||
&_hangup {
|
||||
color: $hangupColor;
|
||||
font-size: $hangupFontSize;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not(.toggled) {
|
||||
&:hover, &:active {
|
||||
// sum opacity with background layer should give us 0.8
|
||||
background: $toolbarSelectBackground;
|
||||
}
|
||||
}
|
||||
|
||||
&.toggled {
|
||||
background: $toolbarToggleBackground;
|
||||
|
||||
&.icon-camera {
|
||||
@extend .icon-camera-disabled;
|
||||
}
|
||||
|
||||
&.icon-full-screen {
|
||||
@extend .icon-exit-full-screen;
|
||||
}
|
||||
|
||||
&.icon-microphone {
|
||||
@extend .icon-mic-disabled;
|
||||
}
|
||||
|
||||
&.icon-visibility {
|
||||
@extend .icon-visibility-off;
|
||||
}
|
||||
}
|
||||
|
||||
&.unclickable {
|
||||
cursor: default;
|
||||
|
||||
&:hover, &:active, &.selected {
|
||||
background: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Primary toolbar styles.
|
||||
*/
|
||||
&_primary {
|
||||
background-color: $toolbarBackground;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 30px;
|
||||
|
|
@ -155,6 +144,7 @@
|
|||
* Secondary toolbar styles.
|
||||
*/
|
||||
&_secondary {
|
||||
background-color: $secondaryToolbarBg;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -174,8 +164,14 @@
|
|||
width: $defaultToolbarSize;
|
||||
-webkit-transform: translateX(-100%);
|
||||
|
||||
.button {
|
||||
font-size: $secToolbarFontSize;
|
||||
height: $secToolbarLineHeight;
|
||||
line-height: $secToolbarLineHeight;
|
||||
}
|
||||
|
||||
.button.toggled:not(.icon-raised-hand):not(.button-active) {
|
||||
background: $toolbarSelectBackground;
|
||||
background: $secondaryToolbarBg;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
|
|
@ -257,11 +253,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
#toolbar_button_profile {
|
||||
height: $toolbarAvatarSize + 2*$toolbarAvatarPadding;
|
||||
}
|
||||
|
||||
a.button>#avatar {
|
||||
border-radius: 50%;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
width: 30px;
|
||||
padding-bottom: $toolbarAvatarPadding;
|
||||
padding-top: $toolbarAvatarPadding;
|
||||
width: $toolbarAvatarSize;
|
||||
}
|
||||
|
||||
#feedbackButton {
|
||||
|
|
|
|||
|
|
@ -35,15 +35,12 @@ $tooltipBg: rgba(0,0,0, 0.7);
|
|||
*/
|
||||
$defaultToolbarSize: 50px;
|
||||
$defaultFilmStripOnlyToolbarSize: 37px;
|
||||
$splitterToolbarButtonMargin: 18px;
|
||||
$toolbarBackground: rgba(0, 0, 0, 0.5);
|
||||
$toolbarBadgeBackground: #165ECC;
|
||||
$toolbarBadgeColor: #FFFFFF;
|
||||
$secToolbarFontSize: 1.9em;
|
||||
$secToolbarLineHeight: 45px;
|
||||
$toolbarAvatarPadding: 10px;
|
||||
$toolbarAvatarSize: 40px;
|
||||
$toolbarFontSize: 1.9em;
|
||||
$toolbarSelectBackground: rgba(0, 0, 0, .6);
|
||||
$toolbarTitleColor: #FFFFFF;
|
||||
$toolbarTitleFontSize: 19px;
|
||||
$toolbarToggleBackground: #12499C;
|
||||
|
||||
/**
|
||||
* Main controls
|
||||
|
|
|
|||
|
|
@ -91,7 +91,18 @@ $popoverFontColor: #ffffff;
|
|||
$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
|
||||
|
||||
// Toolbar
|
||||
$secondaryToolbarBg: rgba(0, 0, 0, 0.5);
|
||||
// TOFIX: Once moved to react rename to match the side panel class name.
|
||||
$sideToolbarContainerBg: rgba(0, 0, 0, 0.75);
|
||||
$splitterColor: #ccc;
|
||||
$toolbarBackground: rgba(0, 0, 0, 0.5);
|
||||
$toolbarBadgeBackground: #165ECC;
|
||||
$toolbarBadgeColor: #FFFFFF;
|
||||
$toolbarButtonColor: #FFFFFF;
|
||||
$toolbarSelectBackground: rgba(0, 0, 0, .6);
|
||||
$toolbarTitleColor: #FFFFFF;
|
||||
$toolbarToggleBackground: #12499C;
|
||||
|
||||
|
||||
/**
|
||||
* Forms
|
||||
|
|
|
|||
Loading…
Reference in New Issue