hide query options (-s -S). fml that took some work, esp. on iOS

1 files changed, 70 insertions, 6 deletions

diff --git a/style/main.css b/style/main.css
index 886dedd..ce8c5df 100644
--- a/style/main.css
+++ b/style/main.css
@@ -17,11 +17,11 @@
     --border:     #DADCE0;
 
     /* query input */
-    --qbg:        transparent;
+    --qbg:        white;
     --qborder:    var(--border);
     --qshadow:    transparent;
 
-    --qbgh:       transparent;
+    --qbgh:       white;
     --qborderh:   var(--border);
     --qshadowh:   var(--qborder);
 
@@ -96,7 +96,10 @@ body { height: 100dvh; }
 
 #js_tmp
 {
-    position:    absolute;
+    position:    fixed;
+    top:         0;
+    left:        0;
+    z-index:     -1;
     height:      auto;
     width:       auto;
     visibility:  hidden;
@@ -251,17 +254,19 @@ form
 
 button, input { all: unset; }
 
+/* NOTE: if you wanna change the height of the wrap, it's actually the #qfill height */
 #query_wrap
 {
+    z-index: 2;
     display:         flex;
     flex-direction:  row;
     justify-content: flex-start;
     align-items:     center;
 
     font-size: large;
-    width:     min(42rem, 80vw);
+    width:     min(42rem, 90vw);
 
-    padding: 1rem 1.5rem;
+    padding: 0;
     margin:  1rem;
 
     background-color: var(--qbg);
@@ -269,8 +274,24 @@ button, input { all: unset; }
     border-radius: 10rem;
 
     box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadow);
+
+    overflow: hidden;
+}
+
+#qfill
+{
+    z-index: 1;
+    flex-grow:   0;
+    flex-shrink: 0;
+    align-self:  flex-end;
+
+    height: 4rem;
+    width:  2rem;
+    background-color: var(--qbg);
 }
 
+#query_wrap:hover > #qfill { background-color: var(--qbgh); }
+
 #query_wrap:hover
 {
     background-color: var(--qbgh);
@@ -286,11 +307,22 @@ button, input { all: unset; }
     background-size: contain;
     background-position: center;
     margin-right: 1rem;
+    margin-left:  1.5rem;
     flex-shrink:  0;
     width:  14pt;
     height: 14pt;
 }
 
+#query_opts_toggle { display: none; }
+
+#query_opts
+{
+    display:         flex;
+    flex-direction:  row;
+    justify-content: flex-start;
+    align-items:     center;
+}
+
 .query_opt
 {
     flex-shrink: 0;
@@ -302,6 +334,9 @@ button, input { all: unset; }
 #sect { margin-right: 6pt; }
 #sect, #arch
 {
+    flex-grow: 0;
+    height: 3em;
+
     background-color: transparent;
     color:  var(--fg-mid);
     border: none;
@@ -317,6 +352,7 @@ button, input { all: unset; }
 
 button, input[type=submit]
 {
+    z-index: 1;
     color:            var(--btn-fg);
     background-color: var(--btn-bg);
 
@@ -424,6 +460,34 @@ footer, #about_pane
 }
 
 
+@media (max-width: 800px)
+{
+    #query_opts_toggle
+    {
+        display: inline;
+        flex-shrink: 0;
+
+        width:  2em;
+        height: 3em;
+
+        background: no-repeat url("/imgs/chevron.svg");
+        background-size: 1em;
+        background-position: center;
+    }
+
+    #query_opts_toggle:checked { transform: rotate(180deg); }
+
+    #query_opts_toggle ~ div
+    {
+        max-width: 0;
+        z-index:   0;
+
+        transition: max-width 500ms linear;
+    }
+
+    #query_opts_toggle:checked ~ div { max-width: 75%; }
+}
+
 @media (prefers-color-scheme: dark)
 {
     :root
@@ -438,7 +502,7 @@ footer, #about_pane
         --border:     #3C4043;
 
         /* query input */
-        --qbg:        transparent;
+        --qbg:        var(--bg);
         --qborder:    #5F6368;
 
         --qbgh:       #303134;