diff --git a/css/_animations.scss b/css/_animations.scss index 506f1ec4f9..ae1a0776b6 100644 --- a/css/_animations.scss +++ b/css/_animations.scss @@ -2,42 +2,6 @@ * Project animations **/ -/** - * Slide in animation for extended toolbar. - */ -@include keyframes(slideInX) { - 0% { transform: translateX(-100%); } - 100% { transform: translateX(0%); } -} - -@include keyframes(slideOutX) { - 0% { transform: translateX(0%); } - 100% { transform: translateX(-100%); } -} - -@include keyframes(slideInExtX) { - 0% { transform: translateX(-500%); } - 100% { transform: translateX(0%); } -} - -@include keyframes(slideOutExtX) { - 0% { transform: translateX(0%); } - 100% { transform: translateX(-500%); } -} - -/** - * Slide in / out animation for main toolbar. - */ - -@include keyframes(slideInY) { - 100% { transform: translateY(0%); } -} - -@include keyframes(slideOutY) { - 0% { transform: translateY(0%); } - 100% { transform: translateY(-100%); } -} - /** * Slide in animation for extended toolbar (inner) panel. */ @@ -53,17 +17,3 @@ from { left: 0; } to { left: -$sidebarWidth; } } - -/** -* Slide in animation for extended toolbar container -**/ - -@include keyframes(slideOutExtContainer) { - from { width: $sidebarWidth; } - to { width: 0; } -} - -@include keyframes(slideInExtContainer) { - from { width: 0; } - to { width: $sidebarWidth; } -} \ No newline at end of file diff --git a/css/_toolbars.scss b/css/_toolbars.scss index 0539db421a..61c7a28073 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -30,248 +30,6 @@ } } -.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%)); - - > a:first-child.button, - > div:first-child .button { - border-bottom-left-radius: 3px; - border-top-left-radius: 3px; - } - - > a:last-child.button, - > 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; - } -} - /** * TODO: when the old filmstrip has been removed, remove the "new-" prefix. */ @@ -527,119 +285,6 @@ } } -.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. */ diff --git a/css/_variables.scss b/css/_variables.scss index 541edad981..51a7e32e31 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -35,27 +35,14 @@ $defaultDarkColor: #2b3d5c; $alwaysOnTopToolbarFontSize: 1em; $alwaysOnTopToolbarSize: 30px; $defaultToolbarSize: 50px; -$defaultFilmStripOnlyToolbarSize: 37px; $newToolbarBackgroundColor: rgba(22, 38, 55, 0.8); $newToolbarButtonHoverColor: rgba(14, 20, 35, 0.6); $newToolbarButtonToggleColor: rgba(14, 20, 35, 1); $newToolbarFontSize: 1.9em; $newToolbarSize: 32px; $newToolbarSizeWithPadding: calc(32px + 32px); -$secToolbarFontSize: 1.9em; -$secToolbarLineHeight: 45px; -$toolbarAvatarPadding: 10px; -$toolbarAvatarSize: 40px; -$toolbarFontSize: 1.9em; $toolbarTitleFontSize: 19px; -/** - * Main controls - * TODO: looks like we don't use it - */ -$inputSemiBackground: rgba(132, 132, 132, .8); -$inputLightBackground: #EBEBEB; - /** * Video layout */ diff --git a/css/_vertical_filmstrip_overrides.scss b/css/_vertical_filmstrip_overrides.scss index 51cc758f1e..899d74fb35 100644 --- a/css/_vertical_filmstrip_overrides.scss +++ b/css/_vertical_filmstrip_overrides.scss @@ -66,8 +66,9 @@ &#remoteVideos { /** * Remove horizontal filmstrip padding used to prevent videos - * from overlapping the left-side toolbar. An id selector is - * used to match id specificity with filmstrip styles. + * from overlapping getting near the left-side of the screen. + * An id selector is used to match id specificity with filmstrip + * styles. */ padding-left: 0; transition: right 2s; @@ -168,20 +169,6 @@ .filmstrip__videos-filmstripOnly { height: 100%; } - - /** - * In filmstrip only mode, the toolbar is normally displayed in the - * vertical center of the filmstrip strip. In vertical filmstrip mode, - * that alignment makes the toolbar appear floating and detached from - * the filmstrip. So, instead anchor the toolbar next to the local - * video. - */ - .toolbar_filmstrip-only { - bottom: 0; - top: auto; - transform: none; - } - } /**