summaryrefslogtreecommitdiff
path: root/style/main.css
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--style/main.css76
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;