css: make vbariables for alternative colour variants
This commit is contained in:
parent
625360c4e3
commit
6065f05950
|
@ -38,6 +38,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-alt: color-mix(in srgb, var(--bg) 70%, var(--semitrans));
|
||||
--fg-alt: color-mix(in srgb, var(--fg) 70%, var(--semitrans));
|
||||
--link-alt: color-mix(in srgb, var(--link) 50%, var(--fg));
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
|
@ -82,7 +88,7 @@ a {
|
|||
}
|
||||
|
||||
a:visited {
|
||||
color: color-mix(in srgb, var(--link) 50%, var(--fg));
|
||||
color: var(--link-alt);
|
||||
}
|
||||
|
||||
a:hover, a:hover:visited {
|
||||
|
@ -176,7 +182,7 @@ div.admonitionblock td.icon {
|
|||
}
|
||||
|
||||
div.admonitionblock table {
|
||||
background-color: color-mix(in srgb, var(--bg) 70%, var(--semitrans));
|
||||
background-color: var(--bg-alt);
|
||||
}
|
||||
|
||||
div.note td.icon {
|
||||
|
@ -233,14 +239,14 @@ kbd {
|
|||
padding: 0.05em;
|
||||
background-color: var(--fg);
|
||||
color: var(--bg);
|
||||
border: 0.15em inset color-mix(in srgb, var(--fg) 50%, var(--semitrans));
|
||||
border: 0.15em inset var(--fg-alt);
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0 0.1em;
|
||||
border: 0.15em outset color-mix(in srgb, var(--bg) 50%, var(--semitrans));
|
||||
border: 0.15em outset var(--bg-alt);
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
|
@ -271,7 +277,7 @@ kbd {
|
|||
.pagination {
|
||||
margin-top: 0.5em;
|
||||
font-family: sans-serif;
|
||||
background-color: color-mix(in srgb, var(--bg) 70%, var(--semitrans));
|
||||
background-color: var(--bg-alt);
|
||||
padding-left: 0.2em;
|
||||
border-top: 0.1em dotted var(--accent);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user