aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-05-04 09:02:50 +0200
committerChocobozzz <me@florianbigard.com>2022-05-04 09:02:59 +0200
commit26da644eab9ef62a3e559ac5626bb65a0b13a14d (patch)
tree95826f6881c28290ff8a657b07ae5966f9993370 /client/src
parent9295c68b74fe1f1e2e9f72009205d7f0379844c5 (diff)
downloadPeerTube-26da644eab9ef62a3e559ac5626bb65a0b13a14d.tar.gz
PeerTube-26da644eab9ef62a3e559ac5626bb65a0b13a14d.tar.zst
PeerTube-26da644eab9ef62a3e559ac5626bb65a0b13a14d.zip
Fix help component z-index
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/app.component.scss1
-rw-r--r--client/src/app/shared/shared-main/misc/help.component.html1
-rw-r--r--client/src/app/shared/shared-main/misc/help.component.scss1
-rw-r--r--client/src/sass/application.scss6
-rw-r--r--client/src/sass/bootstrap.scss37
-rw-r--r--client/src/sass/primeng-custom.scss1
-rw-r--r--client/src/sass/z-index.scss69
7 files changed, 71 insertions, 45 deletions
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 4a32ad2d7..5f3e15d80 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -21,7 +21,6 @@
21 top: 0; 21 top: 0;
22 width: 100%; 22 width: 100%;
23 background-color: pvar(--mainBackgroundColor); 23 background-color: pvar(--mainBackgroundColor);
24 z-index: z(header);
25 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); 24 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
26 display: flex; 25 display: flex;
27} 26}
diff --git a/client/src/app/shared/shared-main/misc/help.component.html b/client/src/app/shared/shared-main/misc/help.component.html
index af8cb3b17..360a476f6 100644
--- a/client/src/app/shared/shared-main/misc/help.component.html
+++ b/client/src/app/shared/shared-main/misc/help.component.html
@@ -25,7 +25,6 @@
25<span 25<span
26 role="button" 26 role="button"
27 class="help-tooltip-button" 27 class="help-tooltip-button"
28 container="body"
29 [title]="title" 28 [title]="title"
30 tabindex=0 29 tabindex=0
31 popoverClass="help-popover" 30 popoverClass="help-popover"
diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss
index 1427faca4..32fafb446 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -19,7 +19,6 @@
19 19
20::ng-deep { 20::ng-deep {
21 .help-popover { 21 .help-popover {
22 z-index: z(help-popover) !important;
23 max-width: 300px; 22 max-width: 300px;
24 23
25 .popover-body { 24 .popover-body {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 81bbfa43a..84b575eb3 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -17,6 +17,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
17@import './bootstrap'; 17@import './bootstrap';
18@import './primeng-custom'; 18@import './primeng-custom';
19 19
20@import './z-index';
21
20[hidden] { 22[hidden] {
21 display: none !important; 23 display: none !important;
22} 24}
@@ -324,10 +326,6 @@ table {
324 margin-top: 10px; 326 margin-top: 10px;
325} 327}
326 328
327ngx-loading-bar {
328 z-index: z(header) + 1 !important;
329}
330
331@media screen and (max-width: #{breakpoint(xxl)}) { 329@media screen and (max-width: #{breakpoint(xxl)}) {
332 .main-col { 330 .main-col {
333 --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)}; 331 --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)};
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index b0a18e6f2..bc37134dd 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -58,33 +58,12 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
58 } 58 }
59} 59}
60 60
61/* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
62.dropdown,
63.dropup {
64 z-index: z(dropdown) !important;
65}
66
67.list-overflow-menu,
68.parent-entry {
69 z-index: z(menu) - 1 !important;
70}
71
72.btn-group,
73.dropdown-root,
74.action-dropdown,
75.input-group-prepend,
76.column-toggle {
77 z-index: inherit !important;
78}
79
80.btn-group > .btn:not(:first-child) { 61.btn-group > .btn:not(:first-child) {
81 border-top-left-radius: 0 !important; 62 border-top-left-radius: 0 !important;
82 border-bottom-left-radius: 0 !important; 63 border-bottom-left-radius: 0 !important;
83} 64}
84 65
85.dropdown-menu { 66.dropdown-menu {
86 z-index: z(dropdown) + 1 !important;
87
88 border-radius: 3px; 67 border-radius: 3px;
89 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); 68 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
90 font-size: 15px; 69 font-size: 15px;
@@ -302,22 +281,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
302 margin: 0.3rem 0; 281 margin: 0.3rem 0;
303} 282}
304 283
305ngb-modal-backdrop {
306 z-index: z(modal) - 1 !important;
307}
308
309ngb-modal-window {
310 z-index: z(modal) !important;
311}
312
313ngb-popover-window {
314 z-index: z(popover) !important;
315}
316
317ngb-tooltip-window {
318 z-index: z(tooltip) !important;
319}
320
321.btn-outline-secondary { 284.btn-outline-secondary {
322 border-color: $input-border-color; 285 border-color: $input-border-color;
323 286
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index ace0fd63a..9fc010d4f 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -898,7 +898,6 @@ p-toast {
898 width: auto; 898 width: auto;
899 max-width: 300px; 899 max-width: 300px;
900 min-width: 200px; 900 min-width: 200px;
901 z-index: z(notification) !important;
902 901
903 .p-toast-icon-close { 902 .p-toast-icon-close {
904 font-family: "Glyphicons Halflings"; 903 font-family: "Glyphicons Halflings";
diff --git a/client/src/sass/z-index.scss b/client/src/sass/z-index.scss
new file mode 100644
index 000000000..e46813dc3
--- /dev/null
+++ b/client/src/sass/z-index.scss
@@ -0,0 +1,69 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3
4.header {
5 z-index: z(header);
6}
7
8.help-popover {
9 z-index: z(help-popover);
10}
11
12ngx-loading-bar {
13 z-index: z(header) + 1 !important;
14}
15
16/* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
17.dropdown,
18.dropup {
19 z-index: z(dropdown) !important;
20}
21
22.list-overflow-menu,
23.parent-entry {
24 z-index: z(menu) - 1 !important;
25}
26
27.btn-group,
28.dropdown-root,
29.action-dropdown,
30.input-group-prepend,
31.column-toggle {
32 z-index: inherit !important;
33}
34
35.dropdown-menu {
36 z-index: z(dropdown) + 1 !important;
37}
38
39p-toast .p-toast {
40 z-index: z(notification) !important;
41}
42
43ngb-modal-backdrop {
44 z-index: z(modal) - 1 !important;
45}
46
47ngb-popover-window {
48 z-index: z(popover) !important;
49}
50
51ngb-tooltip-window {
52 z-index: z(tooltip) !important;
53}
54
55ngb-modal-window {
56 z-index: z(modal) !important;
57
58 ngb-tooltip-window {
59 z-index: z(modal + 1) !important;
60 }
61
62 ngb-popover-window {
63 z-index: z(modal + 1) !important;
64 }
65
66 .help-popover {
67 z-index: z(modal + 1) !important;
68 }
69}