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.
This commit is contained in:
Lim Chee Aun 2023-03-03 20:34:53 +08:00
parent d86a69903f
commit 612ebc1a6b

View file

@ -15,7 +15,9 @@
#shortcuts-button .icon {
transform: translateY(2px); /* Balance the icon's vertical alignment */
}
#app:has(header[hidden]) #shortcuts-button,
#app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(header[hidden])
#shortcuts-button,
#app:has(#home-page ~ .deck-container header[hidden]) #shortcuts-button,
#shortcuts-button[hidden] {
transform: translateY(200%);
pointer-events: none;
@ -39,7 +41,11 @@
top: max(16px, env(safe-area-inset-top));
bottom: auto;
}
#app:has(header[hidden]) #shortcuts-button,
#app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(
header[hidden]
)
#shortcuts-button,
#app:has(#home-page ~ .deck-container header[hidden]) #shortcuts-button,
#shortcuts-button[hidden] {
transform: translateY(-200%);
}
@ -114,7 +120,10 @@
transparent
);
}
#app:has(header[hidden]) #shortcuts .tab-bar,
#app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(header[hidden])
#shortcuts
.tab-bar,
#app:has(#home-page ~ .deck-container header[hidden]) #shortcuts .tab-bar,
shortcuts .tab-bar[hidden] {
transform: translateY(200%);
pointer-events: none;