haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
virtuacoplenny 2017-03-30 10:13:00 -07:00 committed by Saúl Ibarra Corretgé
parent 24ee8eb16a
commit 2301732e2d
12 changed files with 52 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/_base.scss
View File

@ -84,7 +84,7 @@ form {
height: 74px; height: 74px;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: 2; z-index: $zindex2;
} }
.leftwatermark { .leftwatermark {
@ -106,7 +106,7 @@ form {
font-size: 11pt; font-size: 11pt;
color: rgba(255,255,255,.50); color: rgba(255,255,255,.50);
text-decoration: none; text-decoration: none;
z-index: 100; z-index: $poweredByZ;
} }
.connected { .connected {

4
css/_filmstrip.scss
View File

@ -17,7 +17,7 @@
flex-direction: column-reverse; flex-direction: column-reverse;
flex-wrap: nowrap; flex-wrap: nowrap;
position: relative; position: relative;
z-index: 1; // Set z-index to make element visible z-index: $zindex1; // Set z-index to make element visible
width: $hideFilmstripButtonWidth; width: $hideFilmstripButtonWidth;
button { button {
@ -55,7 +55,7 @@
bottom: 0; bottom: 0;
width:auto; width:auto;
border: $thumbnailsBorder solid transparent; border: $thumbnailsBorder solid transparent;
z-index: 5; z-index: $filmstripVideosZ;
transition: bottom 2s; transition: bottom 2s;
overflow: visible !important; overflow: visible !important;
/*!!!Removes the gap between the local video container and the remote /*!!!Removes the gap between the local video container and the remote

2
css/_jitsi_popover.scss
View File

@ -2,7 +2,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1010; z-index: $jitsipopoverZ;
display: none; display: none;
max-width: 300px; max-width: 300px;
min-width: 100px; min-width: 100px;

2
css/_jquery.contextMenu.scss
View File

@ -143,7 +143,7 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 8px; right: 8px;
z-index: 1; z-index: $zindex1;
width: 0; width: 0;
height: 0; height: 0;
content: ''; content: '';

2
css/_keyboard-shortcuts.scss
View File

@ -6,7 +6,7 @@
overflow: hidden; overflow: hidden;
padding: 20px; padding: 20px;
margin-left: 10px; margin-left: 10px;
z-index: 10; z-index: $zindex10;
border-radius: $borderRadius; border-radius: $borderRadius;
background-attachment: scroll; background-attachment: scroll;
background-size: auto auto; background-size: auto auto;

2
css/_notice.scss
View File

@ -1,6 +1,6 @@
.notice { .notice {
position: relative; position: relative;
z-index: 3; z-index: $zindex3;
margin-top: 6px; margin-top: 6px;
&__message { &__message {

2
css/_popover.scss
View File

@ -2,7 +2,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1015; z-index: $popoverZ;
display: none; display: none;
max-width: 300px; max-width: 300px;
min-width: 100px; min-width: 100px;

2
css/_side_toolbar_container.scss
View File

@ -10,7 +10,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
width: 0; width: 0;
z-index: 800; z-index: $sideToolbarContainerZ;
/** /**
* Labels inside the side panel. * Labels inside the side panel.

4
css/_toolbars.scss
View File

@ -33,7 +33,7 @@
#subject { #subject {
position: relative; position: relative;
z-index: 3; z-index: $zindex3;
width: auto; width: auto;
padding: 5px; padding: 5px;
margin-left: 40%; margin-left: 40%;
@ -106,7 +106,7 @@
height: 50px; height: 50px;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
z-index: 1; z-index: $zindex1;
font-size: $toolbarFontSize !important; font-size: $toolbarFontSize !important;
line-height: 50px !important; line-height: 50px !important;
vertical-align: middle; vertical-align: middle;

25
css/_variables.scss
View File

@ -104,13 +104,26 @@ $happySoftwareBackground: transparent;
/** /**
* Z-indexes. TODO: Replace this by a function. * Z-indexes. TODO: Replace this by a function.
*/ */
$tooltipsZ: 901; $zindex0: 0;
$toolbarZ: 900; $zindex1: 1;
$overlayZ: 902; $zindex2: 2;
$notificationZ: 1012; $zindex3: 3;
$ringingZ: 800; $filmstripVideosZ: 5;
$dropdownZ: 901; $zindex10: 10;
$reloadZ: 20;
$poweredByZ: 100;
$ringingZ: 300;
$sideToolbarContainerZ: 300;
$toolbarZ: 400;
$tooltipsZ: 401;
$dropdownMaskZ: 900; $dropdownMaskZ: 900;
$dropdownZ: 901;
$overlayZ: 902;
$jitsipopoverZ: 1010;
$centeredVideoLabelZ: 1011;
$notificationZ: 1012;
$popoverZ: 1015;
/** /**
* Font Colors * Font Colors

32
css/_videolayout_default.scss
View File

@ -31,7 +31,7 @@
&__toptoolbar { &__toptoolbar {
position: absolute; position: absolute;
left: 0; left: 0;
z-index: 3; z-index: $zindex3;
width: 100%; width: 100%;
box-sizing: border-box; // Includes the padding in the 100% width. box-sizing: border-box; // Includes the padding in the 100% width.
} }
@ -59,7 +59,7 @@
float: left; float: left;
@include circle($thumbnailIndicatorSize); @include circle($thumbnailIndicatorSize);
box-sizing: border-box; box-sizing: border-box;
z-index: 3; z-index: $zindex3;
background: $dominantSpeakerBg; background: $dominantSpeakerBg;
color: $thumbnailPictogramColor; color: $thumbnailPictogramColor;
border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor; border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
@ -113,7 +113,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
visibility: hidden; visibility: hidden;
z-index: 2; z-index: $zindex2;
} }
} }
@ -161,7 +161,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
z-index: 1; z-index: $zindex1;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -171,7 +171,7 @@
} }
#etherpad { #etherpad {
z-index: 0; z-index: $zindex0;
} }
/** /**
@ -193,7 +193,7 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
line-height: $thumbnailToolbarHeight; line-height: $thumbnailToolbarHeight;
z-index: 2; z-index: $zindex2;
} }
/** /**
@ -233,7 +233,7 @@
padding: 3px 5px; padding: 3px 5px;
font-size: 9pt; font-size: 9pt;
cursor: pointer; cursor: pointer;
z-index: 2; z-index: $zindex2;
} }
/** /**
@ -283,7 +283,7 @@
top: 0px; top: 0px;
right: 0; right: 0;
margin: 7px; margin: 7px;
z-index: 3; z-index: $zindex3;
width: 18px; width: 18px;
height: 13px; height: 13px;
color: #FFF; color: #FFF;
@ -301,7 +301,7 @@
margin-top: -17px; margin-top: -17px;
width: 6px; width: 6px;
height: 35px; height: 35px;
z-index: 2; z-index: $zindex2;
border: none; border: none;
.audiodot-top, .audiodot-top,
@ -344,13 +344,13 @@
background-clip: padding-box; background-clip: padding-box;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-webkit-background-clip: padding-box; -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 { .audiolevel {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
z-index: 0; z-index: $zindex0;
border-radius:1px; border-radius:1px;
pointer-events: none; pointer-events: none;
} }
@ -408,7 +408,7 @@
.noMic { .noMic {
position: absolute; position: absolute;
border-radius: 8px; border-radius: 8px;
z-index: 1; z-index: $zindex1;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url("../images/noMic.png"); background-image: url("../images/noMic.png");
@ -420,7 +420,7 @@
.noVideo { .noVideo {
position: absolute; position: absolute;
border-radius: 8px; border-radius: 8px;
z-index: 1; z-index: $zindex1;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url("../images/noVideo.png"); background-image: url("../images/noVideo.png");
@ -453,7 +453,7 @@
display: none; display: none;
position: absolute; position: absolute;
width: auto; width: auto;
z-index: 2; z-index: $zindex2;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
@ -477,7 +477,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
top:50%; top:50%;
z-index: 2; z-index: $zindex2;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
@ -506,7 +506,7 @@
#videoResolutionLabel, #videoResolutionLabel,
.centeredVideoLabel { .centeredVideoLabel {
display: none; display: none;
z-index: 1011; z-index: $centeredVideoLabelZ;
} }
.centeredVideoLabel { .centeredVideoLabel {

10
css/_welcome_page.scss
View File

@ -22,7 +22,7 @@
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
color: #acacac; color: #acacac;
z-index: 2; z-index: $zindex2;
} }
#disable_welcome:checked + label #disable_welcome:checked + label
@ -35,7 +35,7 @@
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
color: #acacac; color: #acacac;
z-index: 2; z-index: $zindex2;
} }
#enter_room_form { #enter_room_form {
@ -74,7 +74,7 @@
float: left; float: left;
background-color: #FFFFFF; background-color: #FFFFFF;
position: relative; position: relative;
z-index: 2; z-index: $zindex2;
} }
&__reload { &__reload {
@ -83,7 +83,7 @@
color: #acacac; color: #acacac;
font-size: 1.9em; font-size: 1.9em;
line-height: 55px; line-height: 55px;
z-index: 3; z-index: $zindex3;
float: left; float: left;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
@ -104,7 +104,7 @@
outline: none; outline: none;
float:left; float:left;
position: relative; position: relative;
z-index: 2; z-index: $zindex2;
} }
} }