aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-02-13 15:09:31 +0100
committerRigel Kent <sendmemail@rigelk.eu>2020-02-13 15:09:36 +0100
commit36f2981f7d586cea206e4c143c18cf866a4e3acd (patch)
treeb1704dc4711499e226fd108c5b8062ec5731b664 /client/src
parent5a208b004ad147091586f2d3eafaca07eaa021c4 (diff)
downloadPeerTube-36f2981f7d586cea206e4c143c18cf866a4e3acd.tar.gz
PeerTube-36f2981f7d586cea206e4c143c18cf866a4e3acd.tar.zst
PeerTube-36f2981f7d586cea206e4c143c18cf866a4e3acd.zip
Manage z-indexes in variables
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/app.component.scss4
-rw-r--r--client/src/app/core/hotkeys/hotkeys.component.scss4
-rw-r--r--client/src/app/menu/menu.component.scss2
-rw-r--r--client/src/sass/bootstrap.scss8
-rw-r--r--client/src/sass/include/_variables.scss20
-rw-r--r--client/src/sass/loading-bar.scss5
-rw-r--r--client/src/sass/primeng-custom.scss3
7 files changed, 34 insertions, 12 deletions
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 51a7a3dd1..7a6710829 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -16,12 +16,12 @@
16 top: 0; 16 top: 0;
17 width: 100%; 17 width: 100%;
18 background-color: var(--mainBackgroundColor); 18 background-color: var(--mainBackgroundColor);
19 z-index: 1000; 19 z-index: z(header);
20 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); 20 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
21 display: flex; 21 display: flex;
22 22
23 .top-left-block { 23 .top-left-block {
24 z-index: 1001; 24 z-index: z(headerLeft);
25 height: $header-height; 25 height: $header-height;
26 display: flex; 26 display: flex;
27 align-items: center; 27 align-items: center;
diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss
index 3aa0b6252..02c8c59aa 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.scss
+++ b/client/src/app/core/hotkeys/hotkeys.component.scss
@@ -1,3 +1,5 @@
1@import '_mixins';
2
1.cfp-hotkeys-container { 3.cfp-hotkeys-container {
2 display: flex !important; 4 display: flex !important;
3 align-items: center; 5 align-items: center;
@@ -23,7 +25,7 @@
23} 25}
24 26
25.cfp-hotkeys-container.fade.in { 27.cfp-hotkeys-container.fade.in {
26 z-index: 10002; 28 z-index: z(hotkeys);
27 visibility: visible; 29 visibility: visible;
28 opacity: 1; 30 opacity: 1;
29} 31}
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index dd718a091..43654504c 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -6,7 +6,7 @@
6 height: calc(100vh - #{$header-height}); 6 height: calc(100vh - #{$header-height});
7 padding: 0; 7 padding: 0;
8 width: $menu-width; 8 width: $menu-width;
9 z-index: 11000; 9 z-index: z(menu);
10} 10}
11 11
12menu { 12menu {
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 035270e89..a17d9c048 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -19,7 +19,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
19} 19}
20 20
21.dropdown { 21.dropdown {
22 z-index: 10001 !important; 22 z-index: z(dropdown) !important;
23} 23}
24 24
25.dropdown-menu { 25.dropdown-menu {
@@ -176,7 +176,11 @@ ngb-tabset.bootstrap {
176} 176}
177 177
178ngb-modal-backdrop { 178ngb-modal-backdrop {
179 z-index: 10000 !important; 179 z-index: z(modal) - 1 !important;
180}
181
182ngb-modal-window {
183 z-index: z(modal) !important;
180} 184}
181 185
182.btn-outline-tertiary { 186.btn-outline-tertiary {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index e087a2548..d0e1a8c9c 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -93,8 +93,24 @@ $variables: (
93 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) 93 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
94); 94);
95 95
96/*** theme helper ***/
97
98@function var($variable) { 96@function var($variable) {
99 @return map-get($variables, $variable); 97 @return map-get($variables, $variable);
100} 98}
99
100/*** z-index groups ***/
101
102$zindex: (
103 header : 1000,
104 /* header context */
105 headerLeft : 10,
106 menu : 11000,
107 dropdown : 12000,
108 loadbar : 13000,
109 modal : 14000,
110 notification : 15000,
111 hotkeys : 16000
112);
113
114@function z($label) {
115 @return map-get($zindex, $label);
116}
diff --git a/client/src/sass/loading-bar.scss b/client/src/sass/loading-bar.scss
index 7d687d479..d584b7c67 100644
--- a/client/src/sass/loading-bar.scss
+++ b/client/src/sass/loading-bar.scss
@@ -1,3 +1,4 @@
1@import '_mixins';
1// Thanks: https://github.com/aitboudad/ngx-loading-bar/blob/master/loading-bar.css 2// Thanks: https://github.com/aitboudad/ngx-loading-bar/blob/master/loading-bar.css
2 3
3/* Make clicks pass-through */ 4/* Make clicks pass-through */
@@ -20,7 +21,7 @@
20 21
21 background: var(--mainColor); 22 background: var(--mainColor);
22 position: fixed; 23 position: fixed;
23 z-index: 10002; 24 z-index: z(loadbar);
24 top: 0; 25 top: 0;
25 left: 0; 26 left: 0;
26 width: 100%; 27 width: 100%;
@@ -50,7 +51,7 @@
50#loading-bar-spinner { 51#loading-bar-spinner {
51 display: block; 52 display: block;
52 position: fixed; 53 position: fixed;
53 z-index: 10002; 54 z-index: z(loadbar);
54 top: 10px; 55 top: 10px;
55 left: 10px; 56 left: 10px;
56} 57}
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 753fdf5c9..4d2d6cb67 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -383,8 +383,7 @@ p-inputswitch {
383 383
384p-toast { 384p-toast {
385 .ui-toast { 385 .ui-toast {
386 // Modal is 10005 386 z-index: z(notification) !important;
387 z-index: 10010 !important;
388 } 387 }
389 388
390 .ui-toast-message { 389 .ui-toast-message {