Add dark mode
phpcs-errors:253 phpunit-status:successful
This commit is contained in:
parent
f8365094f5
commit
c6147293f6
|
@ -100,3 +100,43 @@ ul.fieldList > li.humanTLToggled { border-color: #CB9B8C; background: #CB9B8C; b
|
||||||
.actionList { margin: 1em 0 1em 1em; padding: .5em 0; }
|
.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 { display: inline-block; padding: .3em; border-radius: .3em; transition: background .4s; }
|
||||||
.actionList > li a:hover { background: #CB9B8C; }
|
.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; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user