60 lines
4.4 KiB
CSS
60 lines
4.4 KiB
CSS
:root {
|
|
--ground: #12141a; --side: #181b22; --raised: #232733; --line: #262a33; --line2: #343947;
|
|
--text: #d9dce3; --read: #d9d4c8; --head: #f2efe8; --muted: #a4abb8; --faint: #8c93a0;
|
|
--accent: #f1b44c; --accent-dim: #8c7440; --on-accent: #12141a;
|
|
--ok: #86c79f; --bad: #ee8f8f;
|
|
--sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--serif: "Literata", Georgia, "Times New Roman", serif;
|
|
--mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
|
|
--top: 52px; --sidew: 296px; --fast: 140ms;
|
|
color-scheme: dark;
|
|
}
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
body { margin: 0; background: var(--ground); color: var(--text); font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
|
|
a { color: inherit; }
|
|
button, input, textarea { font: inherit; color: inherit; }
|
|
button { cursor: pointer; }
|
|
code, pre { font-family: var(--mono); }
|
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
|
|
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
|
|
|
.reading { font-family: var(--serif); font-size: 19px; line-height: 1.75; color: var(--read); max-width: 660px; }
|
|
.work { font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--text); max-width: 760px; }
|
|
|
|
/* shell */
|
|
.stc-top { position: sticky; top: 0; z-index: 30; height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--ground); border-bottom: 1px solid var(--line); }
|
|
.stc-shell { display: flex; align-items: flex-start; }
|
|
.stc-side { position: sticky; top: var(--top); flex: none; width: var(--sidew); height: calc(100vh - var(--top)); overflow-y: auto; background: var(--side); border-right: 1px solid var(--line); }
|
|
.stc-main { flex: 1; min-width: 0; padding: 44px 40px 0; }
|
|
|
|
/* pill */
|
|
.stc-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px; border: 1px solid var(--line2); border-radius: 18px; background: none; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background var(--fast), color var(--fast), border-color var(--fast); }
|
|
.stc-pill:hover { background: var(--raised); }
|
|
.stc-pill--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
|
|
.stc-pill--primary:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
|
|
.stc-pill--ghost { border-color: transparent; color: var(--muted); }
|
|
.stc-pill--ghost:hover { color: var(--text); }
|
|
.stc-pill:disabled { opacity: .45; cursor: default; }
|
|
|
|
/* segmented toggle */
|
|
.stc-seg { display: inline-flex; padding: 2px; border: 1px solid var(--line2); border-radius: 20px; flex: none; }
|
|
.stc-seg button { border: 0; background: none; height: 28px; padding: 0 13px; border-radius: 16px; font-size: 12.5px; font-weight: 500; color: var(--faint); transition: background var(--fast), color var(--fast); }
|
|
.stc-seg button:hover { color: var(--text); }
|
|
.stc-seg button[aria-pressed="true"] { background: var(--raised); color: var(--head); }
|
|
|
|
/* progress */
|
|
.stc-bar { display: block; flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
|
|
.stc-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
|
|
.stc-bar--dim > i { background: var(--accent-dim); }
|
|
|
|
/* floating action bar */
|
|
.stc-dock { position: sticky; bottom: 18px; z-index: 10; display: flex; width: max-content; max-width: 100%; margin: 56px auto 18px; gap: 4px; padding: 5px; background: var(--raised); border: 1px solid var(--line2); border-radius: 24px; box-shadow: 0 0 0 10px var(--ground); }
|
|
.stc-dock .stc-pill { height: 36px; border-color: transparent; }
|
|
.stc-dock .stc-pill:hover { background: var(--line2); }
|
|
.stc-dock .stc-pill--primary:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
|
|
|
|
/* cover */
|
|
.stc-cover { flex: none; position: relative; width: var(--cw, 44px); aspect-ratio: 3 / 4; border-radius: 6px; background: var(--cbg, var(--raised)); color: var(--cfg, var(--accent)); border: 1px solid color-mix(in srgb, var(--cfg, var(--accent)) 18%, transparent); overflow: hidden; font: 600 calc(var(--cw, 44px) * .34) / 1 var(--sans); letter-spacing: -.03em; display: flex; align-items: flex-end; padding: calc(var(--cw, 44px) * .12); }
|
|
.stc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|