diff options
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | style/main.css | 70 |
2 files changed, 46 insertions, 25 deletions
@@ -63,6 +63,7 @@ <nav id="about_pane"> <section> <a href="#">About</a> + <a href="#">Source</a> </section> <section> <a href="#">Credits</a> diff --git a/style/main.css b/style/main.css index 2ae2210..78558a6 100644 --- a/style/main.css +++ b/style/main.css @@ -15,6 +15,14 @@ --border: #DADCE0; + /* query input */ + --qbg: transparent; + --qborder: var(--border); + + --qbgh: transparent; + --qborderh: var(--border); + --qshadowh: var(--qborder); + /* buttons */ --btn-bg: #F8F9FA; --btn-fg: var(--fg); @@ -65,54 +73,62 @@ :root { /* general */ - --bg: #FFFFFF; - --bg-dark: #F2F2F2; - --fg: #202124; - --fg-light: #CACACA; + --bg: #202124; + --bg-dark: #171717; + --fg: #E8EAED; + --fg-light: #BDC1C6; + + --border: #3C4043; + + /* query input */ + --qbg: transparent; + --qborder: #5F6368; - --border: #DADCE0; + --qbgh: #303134; + --qborderh: transparent; + --qshadowh: #171717; /* buttons */ - --btn-bg: #F8F9FA; + --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: var(--border); - --btn-brdh: var(--border); + --btn-shadh: transparent; + --btn-brdh: #5F6368; --btn-bgf: var(--btn-bg); --btn-fgf: var(--btn-fg); - --btn-shadf: var(--border); - --btn-brdf: #4285F4; + --btn-shadf: transparent; + --btn-brdf: var(--btn-brdh); /* accent buttons */ - --abtn-bg: #1A73E8; - --abtn-fg: #FFFFFF; + --abtn-bg: #8AB4F8; + --abtn-fg: #202124; --abtn-brd: transparent; - --abtn-shad: #424043; + --abtn-shad: transparent; - --abtn-bgh: #1B66C9; + --abtn-bgh: #93BAF9; --abtn-fgh: var(--abtn-fg); --abtn-brdh: transparent; - --abtn-shadh: #424043; + --abtn-shadh: transparent; - --abtn-bgf: #1C5FBA; + --abtn-bgf: #A6C6FA; --abtn-fgf: var(--abtn-fg); --abtn-brdf: transparent; - --abtn-shadf: var(--abtn-shadh); + --abtn-shadf: transparent; /* links */ - --a-unvis: #2317AE; - --a-vis: #681DA8; + --a-unvis: #8AB4F8; + --a-vis: #C58AF9; /* misc */ - --logo-a: #4284F4; - --logo-b: #EA4335; - --logo-c: #FBBC05; - --logo-d: #34A853; + --logo-a: #FFFFFF; + --logo-b: #FFFFFF; + --logo-c: #FFFFFF; + --logo-d: #FFFFFF; } } @@ -302,13 +318,16 @@ button, input { all: unset; } padding: 1rem 1.5rem; margin: 1rem; - border: 1px solid rgb(218, 220, 224); + background-color: var(--qbg); + border: 1px solid var(--qborder); border-radius: 10rem; } #query_wrap:hover { - box-shadow: 0.5pt 0.75pt 0.5rem var(--border); + background-color: var(--qbgh); + border: 1px solid var(--qborderh); + box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadowh); } #query @@ -343,6 +362,7 @@ button, input[type=submit] text-align: center; cursor: pointer; + user-select: none; } button:hover, input[type=submit]:hover |