Add dark mode

phpcs-errors:253 phpunit-status:successful
This commit is contained in:
Joshua Ramon Enslin 2020-01-07 10:07:26 +01:00 committed by Stefan Rohde-Enslin
parent f8365094f5
commit c6147293f6

View File

@ -100,3 +100,43 @@ ul.fieldList > li.humanTLToggled { border-color: #CB9B8C; background: #CB9B8C; b
.actionList { margin: 1em 0 1em 1em; padding: .5em 0; }
.actionList > li a { display: inline-block; padding: .3em; border-radius: .3em; transition: background .4s; }
.actionList > li a:hover { background: #CB9B8C; }
/* =============
| Dark mode
|============ */
@media (prefers-color-scheme: dark) {
body { background: #263238; color: #ECEFF1; }
input, select, textarea { background: inherit; color: inherit; border: 3px solid #37474F; transition: border .4s, box-shadow .4s; }
a.buttonLike:focus,
.options > a.buttonLike:focus,
button:focus,
select:focus,
textarea:focus,
input:focus,
textarea:active,
input:active,
a.buttonLike:hover,
.options > a.buttonLike:hover,
ul.fieldList > li:hover,
button:hover,
select:hover,
textarea:hover,
input:hover { background: inherit; border-color: #FFF; box-shadow: initial; border-radius: .2em; }
ul.fieldList > li,
.options > a.buttonLike,
a.buttonLike, button, input[type="submit"] { background: inherit; color: #FFF; border: 3px solid #FFC107; border-radius: .2em; transition: background .4s, color .4s, border .4s; }
ul.fieldList > li { border-color: #37474F; }
ul.fieldList > li.humanTLToggled,
.options > a.buttonLike:hover,
a.buttonLike:hover, button:hover { background: #FFC107; color: #000; border-color: #FFA000; }
a { color: #CFD8DC; }
.tiles > section h2 { background: #37474F; color: inherit; }
.tiles > section:hover h2 { background: rgba(0,0,0,.2); color: inherit; }
h1, h1 > * { color: #CFD8DC; }
body > div.uploader { background: inherit; border-color: #37474F; }
}