heonian.org/heonian-webdic
1
0
Fork 0
Code Issues 19 Pull Requests Projects Releases Wiki Activity

dark mode

Browse Source
This commit is contained in:
remi 2022-06-09 02:18:01 +02:00
parent a4f1a04c72
commit af8a9e6763
1 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
main.css
View File

@ -32,19 +32,33 @@
:root { :root {
--font: "Helvetica Neue", Helvetica, Arial, sans-serif; --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-h: "heonian", "Helvatica Neue", Helvetica, Arial, sans-serif; --font-h: "heonian", "Helvatica Neue", Helvetica, Arial, sans-serif;
--nice-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); --fg: rgb(0,0,0);
--grey: rgb(226, 226, 226); --bg: rgb(255,255,255);
--darkgrey: rgb(150, 150, 150); --grey: rgb(152, 152, 152);
--darkgrey: rgb(100, 100, 100);
--link: rgb(27 120 151);
}
@media (prefers-color-scheme: dark) {
:root {
--fg: rgb(255,255,255);
--bg: rgb(0,0,0);
--grey: rgb(226, 226, 226);
--darkgrey: rgb(215, 215, 215);
--link: rgb(27 120 151);
}
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: var(--font); font-family: var(--font);
color: var(--fg);
background-color: var(--bg);
} }
a { a {
color: rgb(27 120 151); color: var(--link);
text-decoration: none; text-decoration: none;
} }
@ -100,6 +114,8 @@ header input {
font-weight: 100; font-weight: 100;
transition: border-color 0.3s; transition: border-color 0.3s;
width: calc(100% - 52px - 24px); width: calc(100% - 52px - 24px);
background-color: var(--bg);
color: var(--fg);
} }
header input:focus { header input:focus {
@ -145,7 +161,7 @@ main {
opacity: 0; opacity: 0;
max-width: 600px; max-width: 600px;
margin: auto; margin: auto;
margin-top: 1rem; margin-top: calc(1rem + 24px);
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
@ -168,6 +184,10 @@ main {
border-bottom: 1px solid var(--darkgrey); border-bottom: 1px solid var(--darkgrey);
} }
.result:first-child {
padding-top: 0;
}
.result-meaning { .result-meaning {
padding-bottom: 8px; padding-bottom: 8px;
} }