diff options
Diffstat (limited to 'style/main.css')
-rw-r--r-- | style/main.css | 156 |
1 files changed, 82 insertions, 74 deletions
diff --git a/style/main.css b/style/main.css index 78558a6..f373e37 100644 --- a/style/main.css +++ b/style/main.css @@ -11,13 +11,15 @@ --bg: #FFFFFF; --bg-dark: #F2F2F2; --fg: #202124; - --fg-light: #CACACA; + --fg-mid: #5F6368; + --fg-light: #70757A; --border: #DADCE0; /* query input */ --qbg: transparent; --qborder: var(--border); + --qshadow: transparent; --qbgh: transparent; --qborderh: var(--border); @@ -66,73 +68,6 @@ --logo-d: #34A853; } -@media (prefers-color-scheme: dark) -{ - /* TODO: dew it */ - - :root - { - /* general */ - --bg: #202124; - --bg-dark: #171717; - --fg: #E8EAED; - --fg-light: #BDC1C6; - - --border: #3C4043; - - /* query input */ - --qbg: transparent; - --qborder: #5F6368; - - --qbgh: #303134; - --qborderh: transparent; - --qshadowh: #171717; - - /* buttons */ - --btn-bg: #303134; - --btn-fg: var(--fg); - --btn-shad: transparent; - --btn-brd: transparent; - - --btn-bgh: var(--btn-bg); - --btn-fgh: var(--btn-fg); - --btn-shadh: transparent; - --btn-brdh: #5F6368; - - --btn-bgf: var(--btn-bg); - --btn-fgf: var(--btn-fg); - --btn-shadf: transparent; - --btn-brdf: var(--btn-brdh); - - /* accent buttons */ - --abtn-bg: #8AB4F8; - --abtn-fg: #202124; - --abtn-brd: transparent; - --abtn-shad: transparent; - - --abtn-bgh: #93BAF9; - --abtn-fgh: var(--abtn-fg); - --abtn-brdh: transparent; - --abtn-shadh: transparent; - - --abtn-bgf: #A6C6FA; - --abtn-fgf: var(--abtn-fg); - --abtn-brdf: transparent; - --abtn-shadf: transparent; - - /* links */ - --a-unvis: #8AB4F8; - --a-vis: #C58AF9; - - /* misc */ - --logo-a: #FFFFFF; - --logo-b: #FFFFFF; - --logo-c: #FFFFFF; - --logo-d: #FFFFFF; - } - -} - /* TODO: credit fonts */ @font-face { @@ -181,7 +116,6 @@ a:hover { text-decoration: underline; } align-items: center; justify-content: center; - width: 100dvw; height: 100dvh; } @@ -189,7 +123,7 @@ a:hover { text-decoration: underline; } { display: flex; flex-direction: row; - align-items: flex-start; + align-items: baseline; justify-content: flex-end; flex-grow: 0.75; @@ -199,13 +133,19 @@ a:hover { text-decoration: underline; } padding: 0 1rem; } +#topnav +{ + display: flex; + flex-direction: row; + align-items: baseline; +} + #topnav_icon { display: inline-block; - width: 1.25rem; - height: 1.25rem; - line-height: 2.5rem; + width: 12pt; + height: 12pt; margin: 0 1rem; padding: 0; @@ -221,7 +161,6 @@ a:hover { text-decoration: underline; } height: 3rem; margin: 1rem 0.5rem; - border: 1px solid var(--btn-brd); border-radius: 0.35rem; @@ -321,6 +260,8 @@ button, input { all: unset; } background-color: var(--qbg); border: 1px solid var(--qborder); border-radius: 10rem; + + box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadow); } #query_wrap:hover @@ -441,3 +382,70 @@ footer, #about_pane display: inline-block; transform: rotate(180deg); } + + +@media (prefers-color-scheme: dark) +{ + :root + { + /* general */ + --bg: #202124; + --bg-dark: #171717; + --fg: #E8EAED; + --fg-mid: #BDC1C6; + --fg-light: #BDC1C6; + + --border: #3C4043; + + /* query input */ + --qbg: transparent; + --qborder: #5F6368; + + --qbgh: #303134; + --qborderh: transparent; + --qshadowh: #171717; + + /* buttons */ + --btn-bg: #303134; + --btn-fg: var(--fg); + --btn-shad: transparent; + --btn-brd: transparent; + + --btn-bgh: var(--btn-bg); + --btn-fgh: var(--btn-fg); + --btn-shadh: transparent; + --btn-brdh: #5F6368; + + --btn-bgf: var(--btn-bg); + --btn-fgf: var(--btn-fg); + --btn-shadf: transparent; + --btn-brdf: var(--btn-brdh); + + /* accent buttons */ + --abtn-bg: #8AB4F8; + --abtn-fg: #202124; + --abtn-brd: transparent; + --abtn-shad: transparent; + + --abtn-bgh: #93BAF9; + --abtn-fgh: var(--abtn-fg); + --abtn-brdh: transparent; + --abtn-shadh: transparent; + + --abtn-bgf: #A6C6FA; + --abtn-fgf: var(--abtn-fg); + --abtn-brdf: transparent; + --abtn-shadf: transparent; + + /* links */ + --a-unvis: #8AB4F8; + --a-vis: #C58AF9; + + /* misc */ + --logo-a: #FFFFFF; + --logo-b: #FFFFFF; + --logo-c: #FFFFFF; + --logo-d: #FFFFFF; + } + +} |