jutty/en
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Replace CSS prefers-color-scheme block with light-dark() calls

Browse source
This commit is contained in:
Juno Takano 2026-02-17 21:25:37 -03:00
commit 3ca3f31d8d
1 changed files with 24 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

128
static/public/assets/style.css
View file

@ -1,4 +1,5 @@
:root { :root {
color-scheme: light dark;
--base-font-size: 1em; --base-font-size: 1em;
} }
@ -15,6 +16,8 @@ body {
line-height: 1.75; line-height: 1.75;
box-sizing: border-box; box-sizing: border-box;
min-width: 0; min-width: 0;
background: light-dark(#eee, #222);
color: light-dark(#000, #f1e9e5);
} }
main { main {
@ -61,14 +64,14 @@ code:hover {
} }
pre, code { pre, code {
background: light-dark(#e0e0e0, #333);
font-family: mono, monospace; font-family: mono, monospace;
background: #e0e0e0; border: solid 2px light-dark(#d0d0d0, #434343);
border: solid 2px #d0d0d0;
border-radius: 6px; border-radius: 6px;
} }
a { a {
color: #0f6366; color: light-dark(#0f6366, #1dd7d7);
text-decoration: underline dotted #159b9b; text-decoration: underline dotted #159b9b;
text-decoration-thickness: 2.5px; text-decoration-thickness: 2.5px;
text-underline-offset: 3px; text-underline-offset: 3px;
@ -78,27 +81,27 @@ a {
a.attached:hover, a.attached:hover,
#nav-main a:hover #nav-main a:hover
{ {
color: #117c7c; color: light-dark(#117c7c, #00ffff);
text-shadow: 0px 0px 22px #10afaf; text-shadow: 0px 0px 22px #10afaf;
transition: 1500ms; transition: 1500ms;
} }
a.detached { a.detached {
color: #595959; color: light-dark(#595959, #acacac);
text-decoration-color: #444444; text-decoration-color: light-dark(#444444, #777);
} }
a.external { a.external {
color: #1958a7; color: light-dark(#1958a7, #2fbae4);
text-decoration-color: #2A7CDF; text-decoration-color: light-dark(#2A7CDF, #46c1e7);
text-decoration-style: solid; text-decoration-style: solid;
text-decoration-thickness: 1.5px; text-decoration-thickness: 1.5px;
transition: 1500ms; transition: 1500ms;
} }
a.external:hover { a.external:hover {
color: #0393b2; color: light-dark(#0393b2, #74e5ff);
text-decoration-color: #1ed4f1; text-decoration-color: light-dark(#1ed4f1, #aeffff);
transition: 1500ms; transition: 1500ms;
} }
@ -106,7 +109,7 @@ a:visited,
a.detached:visited, a.detached:visited,
a.external:visited a.external:visited
{ {
text-decoration-color: #bbb; text-decoration-color: light-dark(#bbb, #999);
transition: 1500ms; transition: 1500ms;
} }
@ -143,14 +146,14 @@ span.root-label {
span.id-label { span.id-label {
font-family: mono, monospace; font-family: mono, monospace;
background: #e0e0e0; background: light-dark(#e0e0e0, #444);
border: solid 1px #d0d0d0; border: solid 1px light-dark(#d0d0d0, #666);
} }
span.hidden-label { span.hidden-label {
background: #888; background: light-dark(#888, #000);
color: #eee; color: light-dark(#eee, #969696);
border: solid 1px #d0d0d0; border: solid 1px light-dark(#d0d0d0, #555);
} }
h1 { h1 {
@ -276,8 +279,8 @@ button
border-radius: 5px; border-radius: 5px;
padding: 5px 8px; padding: 5px 8px;
margin-right: 3px; margin-right: 3px;
background: #eeeeff00; background: light-dark(#eeeeff00, #002020);
border-color: #216767; border-color: light-dark(#216767, #138e8e);
border-width: 0.5px; border-width: 0.5px;
transition: 1500ms; transition: 1500ms;
} }
@ -287,7 +290,7 @@ input[type="submit"]:hover,
select:hover, select:hover,
button:hover button:hover
{ {
border-color: #36a9a9; border-color: light-dark(#36a9a9, #00ffff);
box-shadow: 2px 2px #36a9a9ee; box-shadow: 2px 2px #36a9a9ee;
} }
@ -315,9 +318,9 @@ table {
} }
table th { table th {
background: #099; background: light-dark(#099, #002929);
color: #fff; color: #fff;
border-color: #222; border-color: light-dark(#222, #666);
} }
td, th { td, th {
@ -362,92 +365,9 @@ p.verse {
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
* {
background: #222222;
color: #f1e9e5;
}
pre, code {
background: #333333;
border: solid 1px #434343;
}
a {
color: #1dd7d7;
transition: 1500ms;
}
a.attached:hover,
#nav-main a:hover
{
color: #00ffff;
transition: 1500ms;
}
a.external {
color: #2fbae4;
text-decoration-color: #46c1e7;
transition: 1500ms;
}
a.external:hover {
color: #74e5ff;
text-decoration-color: #aeffff;
transition: 1500ms;
}
a.detached {
color: #acacac;
text-decoration-color: #777;
transition: 1500ms;
}
span.id-label {
background: #444;
border-color: #666;
}
span.hidden-label {
background: #000;
border-color: #555;
color: #969696;
}
a:visited,
a.detached:visited,
a.external:visited
{
text-decoration-color: #999;
transition: 1500ms;
}
input[type="text"],
input[type="submit"],
select,
button
{
background: #002020;
border-color: #138e8e;
}
input[type="text"]:hover,
input[type="submit"]:hover,
select:hover,
button:hover
{
border-color: #00ffff;
}
span.root-label { span.root-label {
border-width: 1px; border-width: 1px;
} }
table th {
background: #002929;
border-color: #666;
}
} }
@media (max-width: 600px) { @media (max-width: 600px) {