MeowcaTheoRange/abtmtr-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve legibility

Browse source
This commit is contained in:
MeowcaTheoRange 2023-12-21 03:12:17 -06:00
parent 7417aa331f
commit cc1fe52591
1 changed files with 23 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
views/styles/normal.css
View file

@ -58,6 +58,8 @@
--color: hsl(var(--base-color), 85%); --color: hsl(var(--base-color), 85%);
/* The accent color of the page. */ /* The accent color of the page. */
--accent-color: hsl(var(--base-color), 50%); --accent-color: hsl(var(--base-color), 50%);
/* The background-adjacent accent color of the page. */
--accent-color-bg: hsl(var(--base-color), 50%);
/* The foreground accent color of the page. */ /* The foreground accent color of the page. */
--accent-color-fg: hsl(var(--base-color), 95%); --accent-color-fg: hsl(var(--base-color), 95%);
@ -75,8 +77,9 @@ html.base {
--underlay-color: #fff !important; --underlay-color: #fff !important;
--background-color: transparent !important; --background-color: transparent !important;
--color: #000 !important; --color: #000 !important;
--accent-color: #000 !important; --accent-color: #c0c0c0 !important;
--accent-color-fg: #fff !important; --accent-color-bg: #000 !important;
--accent-color-fg: #000 !important;
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
@ -91,6 +94,19 @@ html.base {
transition: none; transition: none;
} }
@media (prefers-color-scheme: dark) {
html.base {
--underlay-color: #000 !important;
--background-color: transparent !important;
--color: #fff !important;
--accent-color: #404040 !important;
--accent-color-bg: #fff !important;
--accent-color-fg: #fff !important;
--border-color: var(--color);
}
}
html.base body { html.base body {
margin: 0; margin: 0;
} }
@ -225,7 +241,7 @@ html {
} }
*:focus { *:focus {
outline: 2px solid var(--accent-color-fg); outline: 2px solid var(--accent-color-bg);
} }
fieldset { fieldset {
@ -257,7 +273,7 @@ iframe {
/* Interactive normalize */ /* Interactive normalize */
a { a {
color: var(--accent-color); color: var(--accent-color-bg);
text-decoration: underline; text-decoration: underline;
} }
@ -377,7 +393,7 @@ label.checkbox input[type="checkbox"] + span.checkbox {
} }
label.checkbox input[type="checkbox"]:focus + span.checkbox { label.checkbox input[type="checkbox"]:focus + span.checkbox {
outline: 2px solid var(--accent-color-fg); outline: 2px solid var(--accent-color-bg);
} }
label.checkbox input[type="checkbox"]:checked + span.checkbox { label.checkbox input[type="checkbox"]:checked + span.checkbox {
@ -426,7 +442,7 @@ input[type="range"]::-webkit-slider-thumb {
} }
input[type="range"]:focus::-webkit-slider-thumb { input[type="range"]:focus::-webkit-slider-thumb {
outline: 2px solid var(--accent-color-fg); outline: 2px solid var(--accent-color-bg);
} }
/******** Firefox styles ********/ /******** Firefox styles ********/
@ -441,5 +457,5 @@ input[type="range"]::-moz-range-thumb {
} }
input[type="range"]:focus::-moz-range-thumb { input[type="range"]:focus::-moz-range-thumb {
outline: 2px solid var(--accent-color-fg); outline: 2px solid var(--accent-color-bg);
} }