this repo has no description
Fix shortcuts button/tab-bar hidden on other pages
This is because the CSS only check the home-page's hidden header, not the other pages.
This fixes it with a super advanced CSS selector.
+12
-3
+12
-3
src/components/shortcuts.css
+12
-3
src/components/shortcuts.css
···
15
15
#shortcuts-button .icon {
16
16
transform: translateY(2px); /* Balance the icon's vertical alignment */
17
17
}
18
-
#app:has(header[hidden]) #shortcuts-button,
18
+
#app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(header[hidden])
19
+
#shortcuts-button,
20
+
#app:has(#home-page ~ .deck-container header[hidden]) #shortcuts-button,
19
21
#shortcuts-button[hidden] {
20
22
transform: translateY(200%);
21
23
pointer-events: none;
···
39
41
top: max(16px, env(safe-area-inset-top));
40
42
bottom: auto;
41
43
}
42
-
#app:has(header[hidden]) #shortcuts-button,
44
+
#app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(
45
+
header[hidden]
46
+
)
47
+
#shortcuts-button,
48
+
#app:has(#home-page ~ .deck-container header[hidden]) #shortcuts-button,
43
49
#shortcuts-button[hidden] {
44
50
transform: translateY(-200%);
45
51
}
···
114
120
transparent
115
121
);
116
122
}
117
-
#app:has(header[hidden]) #shortcuts .tab-bar,
123
+
#app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(header[hidden])
124
+
#shortcuts
125
+
.tab-bar,
126
+
#app:has(#home-page ~ .deck-container header[hidden]) #shortcuts .tab-bar,
118
127
shortcuts .tab-bar[hidden] {
119
128
transform: translateY(200%);
120
129
pointer-events: none;