From 612ebc1a6bab052da6b47db6c26ed4b86550c398 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 3 Mar 2023 20:34:53 +0800
Subject: [PATCH] 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.
---
 src/components/shortcuts.css | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/shortcuts.css b/src/components/shortcuts.css
index 5c57a920..ef79e698 100644
--- a/src/components/shortcuts.css
+++ b/src/components/shortcuts.css
@@ -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;