LeoVasanko/pagerite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style inline code; drop explicit colorspace from color-mix

Browse Source 
Inline code gets padding-inline, keep-all word-break, and a color nudged
30% toward --muted from the inherited color, so code inside
accent-colored text keeps its hue.

All color-mix calls now rely on the default interpolation space (oklab)
instead of declaring srgb/oklab explicitly.
This commit is contained in:
LeoVasanko
2026-08-30 01:22:22 +00:00
parent 31895065f8
commit fbebddeaa9
5 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/pagerite.css
+26 -11
View File
@@ -17,7 +17,7 @@
--line: #0000001a;
/* Links stay quiet — mostly text color with a hint of the accent —
and light up to the full accent on hover. */
--link: color-mix(in oklab, var(--text) 50%, var(--accent));
--link: color-mix(var(--text) 50%, var(--accent));
/* Selection fill for page text and the CodeMirror editors; themes
override when the accent tint clashes with accent-colored text. */
--selection-bg: color-mix(var(--accent) 30%, transparent);
@@ -111,13 +111,13 @@ html {
auto-hidden scrollbars styled by the --os-* variables below, so they
never reserve layout space or shift the page when appearing. */
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
scrollbar-color: color-mix(var(--muted) 45%, transparent) transparent;
}
.os-scrollbar {
--os-size: 0.5rem;
--os-thumb-bg: color-mix(in srgb, var(--muted) 45%, transparent);
--os-thumb-hover-bg: color-mix(in srgb, var(--muted) 65%, transparent);
--os-thumb-bg: color-mix(var(--muted) 45%, transparent);
--os-thumb-hover-bg: color-mix(var(--muted) 65%, transparent);
--os-thumb-active-bg: var(--muted);
--os-track-bg: transparent;
--os-thumb-border-radius: 0.25rem;
@@ -406,7 +406,7 @@ body.editing #sidebar {
overflow-y: auto;
padding: 1rem 1rem 1rem 1.25rem;
border-radius: 0 0 0.5rem 0;
background: color-mix(in srgb, var(--bg) 75%, transparent);
background: color-mix(var(--bg) 75%, transparent);
backdrop-filter: blur(0.5rem);
}
@@ -1020,7 +1020,7 @@ blockquote p + p {
padding: 0.4rem 0.9rem;
border-left: 0.25rem solid var(--admonition-color, var(--accent));
border-radius: 0 0.3rem 0.3rem 0;
background: color-mix(in srgb, var(--admonition-color, var(--accent)) 7%, transparent);
background: color-mix(var(--admonition-color, var(--accent)) 7%, transparent);
}
.admonition> :last-child,
@@ -1110,7 +1110,7 @@ blockquote p + p {
padding: 0.6rem 0.9rem;
font-size: 0.9rem;
color: var(--muted);
background: color-mix(in srgb, var(--accent) 6%, transparent);
background: color-mix(var(--accent) 6%, transparent);
border-radius: 0.3rem;
}
@@ -1169,6 +1169,21 @@ code {
font-size-adjust: ex-height var(--code-x-height);
}
/* Inline code: a slight nudge toward the muted tone rather than a fixed
color, so code inside accent-colored headings keeps the heading's hue
and the distinction stays subtle everywhere. color-mix resolves against
the inherited color (currentColor in a color declaration refers to the
inherited value), shifting it 30% toward --muted. */
code:not(pre code) {
padding-inline: 0.2em;
word-break: keep-all;
color: color-mix(currentColor 70%, var(--muted));
}
code:not(pre code):first-child {
padding-left: 0;
}
/* Click-to-copy button (added by pagerite.js) */
.copy {
position: absolute;
@@ -1213,18 +1228,18 @@ td {
th {
text-align: left;
background: linear-gradient(180deg,
var(--table-head-a, color-mix(in srgb, var(--accent) 10%, var(--surface))),
var(--table-head-b, color-mix(in srgb, var(--accent) 18%, var(--surface))));
var(--table-head-a, color-mix(var(--accent) 10%, var(--surface))),
var(--table-head-b, color-mix(var(--accent) 18%, var(--surface))));
}
td {
background: linear-gradient(160deg,
color-mix(in srgb, var(--table-tint, var(--accent)) 5%, transparent),
color-mix(var(--table-tint, var(--accent)) 5%, transparent),
transparent 75%);
}
tbody tr+tr td {
border-top: 1px solid color-mix(in srgb, var(--table-tint, var(--accent)) 12%, transparent);
border-top: 1px solid color-mix(var(--table-tint, var(--accent)) 12%, transparent);
}
/* Definition lists are laid out as a lightweight two-column grid — terms