From 2301732e2dabad6910ab5c00af6667e2f3763c0d Mon Sep 17 00:00:00 2001 From: virtuacoplenny Date: Thu, 30 Mar 2017 10:13:00 -0700 Subject: [PATCH] style: catalog all z-indexes and move toolbar down All z-indexes found in css files have been moved into css variables. If the z-index is used only once, the variable name will be the same as the selector it is used in. If the z-index is used multiple times, then the plain name of $zindex# was used. This allowed a more confident moving down of the toolbar so that the new modal dialog, with z-index 500, could display on top of it. #1436 --- css/_base.scss | 4 ++-- css/_filmstrip.scss | 4 ++-- css/_jitsi_popover.scss | 2 +- css/_jquery.contextMenu.scss | 2 +- css/_keyboard-shortcuts.scss | 2 +- css/_notice.scss | 2 +- css/_popover.scss | 2 +- css/_side_toolbar_container.scss | 2 +- css/_toolbars.scss | 4 ++-- css/_variables.scss | 23 ++++++++++++++++++----- css/_videolayout_default.scss | 32 ++++++++++++++++---------------- css/_welcome_page.scss | 10 +++++----- 12 files changed, 51 insertions(+), 38 deletions(-) diff --git a/css/_base.scss b/css/_base.scss index e08b775f5b..eb6ca7fb73 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -84,7 +84,7 @@ form { height: 74px; background-size: contain; background-repeat: no-repeat; - z-index: 2; + z-index: $zindex2; } .leftwatermark { @@ -106,7 +106,7 @@ form { font-size: 11pt; color: rgba(255,255,255,.50); text-decoration: none; - z-index: 100; + z-index: $poweredByZ; } .connected { diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss index 21c8836190..43fd1a0806 100644 --- a/css/_filmstrip.scss +++ b/css/_filmstrip.scss @@ -17,7 +17,7 @@ flex-direction: column-reverse; flex-wrap: nowrap; position: relative; - z-index: 1; // Set z-index to make element visible + z-index: $zindex1; // Set z-index to make element visible width: $hideFilmstripButtonWidth; button { @@ -55,7 +55,7 @@ bottom: 0; width:auto; border: $thumbnailsBorder solid transparent; - z-index: 5; + z-index: $filmstripVideosZ; transition: bottom 2s; overflow: visible !important; /*!!!Removes the gap between the local video container and the remote diff --git a/css/_jitsi_popover.scss b/css/_jitsi_popover.scss index 82c96e3a6e..77e983703a 100644 --- a/css/_jitsi_popover.scss +++ b/css/_jitsi_popover.scss @@ -2,7 +2,7 @@ position: absolute; top: 0; left: 0; - z-index: 1010; + z-index: $jitsipopoverZ; display: none; max-width: 300px; min-width: 100px; diff --git a/css/_jquery.contextMenu.scss b/css/_jquery.contextMenu.scss index 501091e126..7380541c76 100644 --- a/css/_jquery.contextMenu.scss +++ b/css/_jquery.contextMenu.scss @@ -143,7 +143,7 @@ position: absolute; top: 50%; right: 8px; - z-index: 1; + z-index: $zindex1; width: 0; height: 0; content: ''; diff --git a/css/_keyboard-shortcuts.scss b/css/_keyboard-shortcuts.scss index a2b2073c01..1a277807b2 100644 --- a/css/_keyboard-shortcuts.scss +++ b/css/_keyboard-shortcuts.scss @@ -6,7 +6,7 @@ overflow: hidden; padding: 20px; margin-left: 10px; - z-index: 10; + z-index: $zindex10; border-radius: $borderRadius; background-attachment: scroll; background-size: auto auto; diff --git a/css/_notice.scss b/css/_notice.scss index 9d915434bb..86085bb5df 100644 --- a/css/_notice.scss +++ b/css/_notice.scss @@ -1,6 +1,6 @@ .notice { position: relative; - z-index: 3; + z-index: $zindex3; margin-top: 6px; &__message { diff --git a/css/_popover.scss b/css/_popover.scss index a72f9706a1..6978ce7332 100644 --- a/css/_popover.scss +++ b/css/_popover.scss @@ -2,7 +2,7 @@ position: absolute; top: 0; left: 0; - z-index: 1015; + z-index: $popoverZ; display: none; max-width: 300px; min-width: 100px; diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss index afd64f897d..528ce39fb2 100644 --- a/css/_side_toolbar_container.scss +++ b/css/_side_toolbar_container.scss @@ -10,7 +10,7 @@ position: absolute; top: 0; width: 0; - z-index: 800; + z-index: $sideToolbarContainerZ; /** * Labels inside the side panel. diff --git a/css/_toolbars.scss b/css/_toolbars.scss index 7b7216fe59..4d9a9b80ad 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -33,7 +33,7 @@ #subject { position: relative; - z-index: 3; + z-index: $zindex3; width: auto; padding: 5px; margin-left: 40%; @@ -106,7 +106,7 @@ height: 50px; cursor: pointer; text-align: center; - z-index: 1; + z-index: $zindex1; font-size: $toolbarFontSize !important; line-height: 50px !important; vertical-align: middle; diff --git a/css/_variables.scss b/css/_variables.scss index b474c278b3..2061601b18 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -104,13 +104,26 @@ $happySoftwareBackground: transparent; /** * Z-indexes. TODO: Replace this by a function. */ -$tooltipsZ: 901; -$toolbarZ: 900; +$zindex0: 0; +$zindex1: 1; +$zindex2: 2; +$zindex3: 3; +$filmstripVideosZ: 5; +$zindex10: 10; +$reloadZ: 20; +$poweredByZ: 100; +$ringingZ: 300; +$sideToolbarContainerZ: 300; +$toolbarZ: 400; +$tooltipsZ: 401; +$dropdownMaskZ: 900; +$dropdownZ: 901; $overlayZ: 902; +$jitsipopoverZ: 1010; +$centeredVideoLabelZ: 1011; $notificationZ: 1012; -$ringingZ: 800; -$dropdownZ: 901; -$dropdownMaskZ: 900; +$popoverZ: 1015; + /** * Font Colors diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index a06cb570eb..dc3cbc4fdb 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -31,7 +31,7 @@ &__toptoolbar { position: absolute; left: 0; - z-index: 3; + z-index: $zindex3; width: 100%; box-sizing: border-box; // Includes the padding in the 100% width. } @@ -59,7 +59,7 @@ float: left; @include circle($thumbnailIndicatorSize); box-sizing: border-box; - z-index: 3; + z-index: $zindex3; background: $dominantSpeakerBg; color: $thumbnailPictogramColor; border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor; @@ -113,7 +113,7 @@ width: 100%; height: 100%; visibility: hidden; - z-index: 2; + z-index: $zindex2; } } @@ -161,7 +161,7 @@ position: absolute; left: 0; top: 0; - z-index: 1; + z-index: $zindex1; width: 100%; height: 100%; } @@ -171,7 +171,7 @@ } #etherpad { - z-index: 0; + z-index: $zindex0; } /** @@ -193,7 +193,7 @@ overflow: hidden; white-space: nowrap; line-height: $thumbnailToolbarHeight; - z-index: 2; + z-index: $zindex2; } /** @@ -233,7 +233,7 @@ padding: 3px 5px; font-size: 9pt; cursor: pointer; - z-index: 2; + z-index: $zindex2; } /** @@ -283,7 +283,7 @@ top: 0px; right: 0; margin: 7px; - z-index: 3; + z-index: $zindex3; width: 18px; height: 13px; color: #FFF; @@ -301,7 +301,7 @@ margin-top: -17px; width: 6px; height: 35px; - z-index: 2; + z-index: $zindex2; border: none; .audiodot-top, @@ -344,13 +344,13 @@ background-clip: padding-box; -webkit-border-radius: 5px; -webkit-background-clip: padding-box; - z-index: 20; /*The reload button should appear on top of the header!*/ + z-index: $reloadZ; /*The reload button should appear on top of the header!*/ } .audiolevel { display: inline-block; position: absolute; - z-index: 0; + z-index: $zindex0; border-radius:1px; pointer-events: none; } @@ -408,7 +408,7 @@ .noMic { position: absolute; border-radius: 8px; - z-index: 1; + z-index: $zindex1; width: 100%; height: 100%; background-image: url("../images/noMic.png"); @@ -420,7 +420,7 @@ .noVideo { position: absolute; border-radius: 8px; - z-index: 1; + z-index: $zindex1; width: 100%; height: 100%; background-image: url("../images/noVideo.png"); @@ -453,7 +453,7 @@ display: none; position: absolute; width: auto; - z-index: 2; + z-index: $zindex2; font-weight: 600; font-size: 14px; text-align: center; @@ -477,7 +477,7 @@ left: 0; width: 100%; top:50%; - z-index: 2; + z-index: $zindex2; font-weight: 600; font-size: 14px; text-align: center; @@ -506,7 +506,7 @@ #videoResolutionLabel, .centeredVideoLabel { display: none; - z-index: 1011; + z-index: $centeredVideoLabelZ; } .centeredVideoLabel { diff --git a/css/_welcome_page.scss b/css/_welcome_page.scss index 4a67dda4d7..193231a551 100644 --- a/css/_welcome_page.scss +++ b/css/_welcome_page.scss @@ -22,7 +22,7 @@ font-weight: 500; font-size: 16px; color: #acacac; - z-index: 2; + z-index: $zindex2; } #disable_welcome:checked + label @@ -35,7 +35,7 @@ font-weight: 500; font-size: 16px; color: #acacac; - z-index: 2; + z-index: $zindex2; } #enter_room_form { @@ -74,7 +74,7 @@ float: left; background-color: #FFFFFF; position: relative; - z-index: 2; + z-index: $zindex2; } &__reload { @@ -83,7 +83,7 @@ color: #acacac; font-size: 1.9em; line-height: 55px; - z-index: 3; + z-index: $zindex3; float: left; cursor: pointer; text-align: center; @@ -104,7 +104,7 @@ outline: none; float:left; position: relative; - z-index: 2; + z-index: $zindex2; } }