diff options
Diffstat (limited to 'style')
| -rw-r--r-- | style/main.css | 76 | ||||
| -rw-r--r-- | style/man.css | 12 | ||||
| -rw-r--r-- | style/search.css | 19 |
3 files changed, 74 insertions, 33 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; diff --git a/style/man.css b/style/man.css index 4999be2..e61ad91 100644 --- a/style/man.css +++ b/style/man.css @@ -150,18 +150,6 @@ table.Nm, table.Nm tbody, table.Nm tbody tr, table.Nm tbody tr td table.head, table.foot { display: table; } -/* This looks good, but messes with some semantics -dl.Bl-tag -{ - display: grid; - row-gap: 1em; - grid-template-columns: max-contet auto; -} - -dl.Bl-tag dt { grid-column-start: 1; } -dl.Bl-tag dd { grid-column-start: 2; } -*/ - pre { overflow-x: auto; diff --git a/style/search.css b/style/search.css index 168bb56..2e85c2a 100644 --- a/style/search.css +++ b/style/search.css @@ -45,18 +45,13 @@ flex-grow: 0; } -#logo { margin-right: 1.5rem; } - -#mank -{ - background-color: var(--qbg); - color: var(--fg-light); -} +#query_wrap { max-height: 2.5em; } -#man { padding-left: 5pt; } +#logo { margin-right: 1.5rem; } #man, #mank { + height: 4em; font-size: 13pt; min-width: 25pt; margin: 0; @@ -65,7 +60,7 @@ #mank { - background-color: transparent; + background-color: var(--qbgh); color: var(--fg-light); border-color: transparent; } @@ -76,12 +71,6 @@ box-shadow: none; } -#query_wrap -{ - overflow: hidden; - padding: 0; -} - #query { margin-left: 15pt; } #query_icon |