a653816f90
- Modify Etherpad and SharedVideo so their resizing takes into account the width of the filmstrip in vertical filmstrip mode. - Modify Filmstrip's getFilmstripWidth to account for when the filmstrip is hidden. - modify VideoContainer so in vertical filmstrip mode it centers the shared desktop stream in the middle of the available space not taken by filmstrip. - Also allow clickthrough on the secondary toolbar itself while still allowing clicks on the toolbar's buttons. This allows clicks on shared videos to go through.
409 lines
8.8 KiB
SCSS
409 lines
8.8 KiB
SCSS
/**
|
|
* Round badge.
|
|
*/
|
|
.badge-round {
|
|
background-color: $toolbarBadgeBackground;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
color: $toolbarBadgeColor;
|
|
// Do not inherit the font-family from the toolbar button, because it's an
|
|
// icon style.
|
|
font-family: $baseFontFamily;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
line-height: 13px;
|
|
min-width: 13px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.toolbar-container {
|
|
display: block;
|
|
left:0;
|
|
min-height: 100px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right:0;
|
|
text-align: center;
|
|
top:0;
|
|
z-index: $toolbarZ;
|
|
}
|
|
|
|
/**
|
|
* Common toolbar styles.
|
|
*/
|
|
.toolbar {
|
|
height: 100%;
|
|
pointer-events: auto;
|
|
position: relative;
|
|
z-index: $toolbarZ;
|
|
|
|
/**
|
|
* Ensure nested elements that don't have a button class, maybe because they
|
|
* are wrapped in a React Element, still display in a line.
|
|
*/
|
|
> div {
|
|
display: inline-block;
|
|
}
|
|
|
|
/**
|
|
* Always on top overrides.
|
|
*/
|
|
&.always-on-top {
|
|
/**
|
|
* Toolbar button styles for always on top.
|
|
*/
|
|
.button {
|
|
font-size: $alwaysOnTopToolbarFontSize;
|
|
height: $alwaysOnTopToolbarSize;
|
|
line-height: $alwaysOnTopToolbarSize;
|
|
width: $alwaysOnTopToolbarSize;
|
|
&_hangup, &_hangup:hover {
|
|
font-size: $alwaysOnTopToolbarFontSize;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Toolbar button styles.
|
|
*/
|
|
.button {
|
|
color: $toolbarButtonColor;
|
|
cursor: pointer;
|
|
z-index: $zindex1;
|
|
display: inline-block;
|
|
font-size: $toolbarFontSize;
|
|
height: $defaultToolbarSize;
|
|
line-height: $defaultToolbarSize;
|
|
position: relative;
|
|
text-align: center;
|
|
top:0px;
|
|
vertical-align: middle;
|
|
width: $defaultToolbarSize;
|
|
|
|
&[disabled] {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&:hover, &:active {
|
|
color: $toolbarButtonColor;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&_hangup, &_hangup:hover {
|
|
color: $hangupColor;
|
|
font-size: $hangupFontSize;
|
|
}
|
|
|
|
&: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;
|
|
}
|
|
}
|
|
|
|
&.unclickable {
|
|
cursor: default;
|
|
|
|
&:hover, &:active, &.selected {
|
|
background: none;
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Primary toolbar styles.
|
|
*/
|
|
&_primary {
|
|
background-color: $toolbarBackground;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 30px;
|
|
display: inline-block;
|
|
width: auto;
|
|
height: $defaultToolbarSize;
|
|
border-radius: 3px;
|
|
opacity: 0;
|
|
|
|
&.always-on-top {
|
|
height: $alwaysOnTopToolbarSize;
|
|
top: 10px;
|
|
}
|
|
|
|
@include transform(translateX(-50%));
|
|
|
|
> div:first-child .button {
|
|
border-bottom-left-radius: 3px;
|
|
border-top-left-radius: 3px;
|
|
}
|
|
> div:last-child .button {
|
|
border-bottom-right-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
}
|
|
}
|
|
|
|
&_primary a.button:last-child::after {
|
|
content: none;
|
|
}
|
|
|
|
/**
|
|
* Secondary toolbar styles.
|
|
*/
|
|
&_secondary {
|
|
background-color: $secondaryToolbarBg;
|
|
position: absolute;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
height: 100%;
|
|
justify-content: flex-start;
|
|
left: 0;
|
|
padding-top: 24px;
|
|
pointer-events: none;
|
|
top: 0;
|
|
transform: translateX(-100%);
|
|
width: $defaultToolbarSize;
|
|
-webkit-transform: translateX(-100%);
|
|
|
|
.button {
|
|
font-size: $secToolbarFontSize;
|
|
height: $secToolbarLineHeight;
|
|
line-height: $secToolbarLineHeight;
|
|
}
|
|
|
|
> * {
|
|
pointer-events: auto
|
|
}
|
|
|
|
.button.toggled:not(.icon-raised-hand):not(.button-active) {
|
|
background: $secondaryToolbarBg;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
|
|
&.unclickable {
|
|
cursor: default;
|
|
|
|
&:hover, &:active, &.selected {
|
|
background: none;
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Styles the toolbar in filmstrip-only mode.
|
|
*/
|
|
&_filmstrip-only {
|
|
background-color: $toolbarBackground;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
height: auto;
|
|
width: $defaultFilmStripOnlyToolbarSize;
|
|
|
|
.button {
|
|
height: 37px;
|
|
line-height: 37px !important;
|
|
width: 37px;
|
|
}
|
|
|
|
.button-popover-message {
|
|
width: 100px;
|
|
}
|
|
|
|
.toolbar-button-wrapper:first-child .button {
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
}
|
|
.toolbar-button-wrapper:last-child .button {
|
|
border-bottom-right-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Toolbar specific round badge.
|
|
*/
|
|
.badge-round {
|
|
bottom: 9px;
|
|
position: absolute;
|
|
right: 9px;
|
|
}
|
|
}
|
|
|
|
.filmstrip-only {
|
|
.toolbox,
|
|
.toolbox-toolbars {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.subject {
|
|
background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35));
|
|
border-bottom-left-radius: 12px;
|
|
border-bottom-right-radius: 12px;
|
|
box-shadow: 0 0 2px #000000, 0 0 10px #000000;
|
|
margin-left: 40%;
|
|
margin-right: 40%;
|
|
padding: 5px;
|
|
position: relative;
|
|
text-align: center;
|
|
width: auto;
|
|
z-index: $zindex3;
|
|
|
|
&.subject_slide-in {
|
|
top: 80px;
|
|
@include transition(top .3s ease-in);
|
|
}
|
|
|
|
&.subject_slide-out {
|
|
top: 0;
|
|
@include transition(top .3s ease-out);
|
|
}
|
|
}
|
|
|
|
#toolbar_button_profile {
|
|
height: $toolbarAvatarSize + 2*$toolbarAvatarPadding;
|
|
}
|
|
|
|
a.button>#avatar {
|
|
border-radius: 50%;
|
|
padding-bottom: $toolbarAvatarPadding;
|
|
padding-top: $toolbarAvatarPadding;
|
|
width: $toolbarAvatarSize;
|
|
}
|
|
|
|
#feedbackButton {
|
|
margin-top: auto;
|
|
}
|
|
|
|
/**
|
|
* START of slide in animation for extended toolbar.
|
|
*/
|
|
@include keyframes(slideInX) {
|
|
0% { transform: translateX(-100%); }
|
|
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(slideInExtX) {
|
|
0% { transform: translateX(-500%); }
|
|
100% { transform: translateX(0%); }
|
|
}
|
|
|
|
.slideInExtX {
|
|
@include animation('slideInExtX .5s forwards');
|
|
}
|
|
|
|
@include keyframes(slideOutExtX) {
|
|
0% { transform: translateX(0%); }
|
|
100% { transform: translateX(-500%); }
|
|
}
|
|
|
|
.slideOutExtX {
|
|
@include animation('slideOutExtX .5s forwards');
|
|
}
|
|
|
|
/**
|
|
* END of slide out animation for extended toolbar.
|
|
*/
|
|
|
|
/**
|
|
* START of slide in / out animation for main toolbar.
|
|
*/
|
|
@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');
|
|
}
|
|
/**
|
|
* END of slide in / out animation for main toolbar.
|
|
*/
|
|
|
|
/**
|
|
* START of slide in animation for extended toolbar panel.
|
|
*/
|
|
@include keyframes(slideInExt) {
|
|
from { width: 0px; }
|
|
to { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
|
|
}
|
|
|
|
.slideInExt {
|
|
@include animation("slideInExt .5s forwards");
|
|
}
|
|
|
|
@include keyframes(slideOutExt) {
|
|
from { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
|
|
to { width: 0px; }
|
|
}
|
|
|
|
.slideOutExt {
|
|
@include animation("slideOutExt .5s forwards");
|
|
}
|
|
|
|
/**
|
|
* START of fade in animation for main toolbar
|
|
*/
|
|
.fadeIn {
|
|
opacity: 1;
|
|
|
|
@include transition(all .3s ease-in);
|
|
}
|
|
|
|
.fadeOut {
|
|
opacity: 0;
|
|
|
|
@include transition(all .3s ease-out);
|
|
}
|