Files
xamxam/app/public/assets/css/base.css
T
Pontoporeia a8dcc4bba5 Consistent scrollbar styling across browsers
- colors.css: added --scrollbar-thumb, --scrollbar-thumb-hover, --scrollbar-track, --scrollbar-corner custom properties
- base.css: consolidated all scrollbar rules (WebKit ::-webkit-scrollbar* + Firefox scrollbar-width/color), added ::-webkit-scrollbar-corner, changed selector from * to html (scrollbar-width inherits), added scrollbar-gutter: stable
- admin.css: removed redundant scrollbar-width: thin on header nav
- toc.css: removed redundant scrollbar-width: thin on desktop .toc
2026-07-10 12:00:36 +02:00

82 lines
2.0 KiB
CSS

/* ============================================================
BASE — Minimal site-wide rules. Keep this extremely small
(≤ 5 rules). Promote a pattern from a component to base
only once it's clearly universal.
============================================================ */
/* Full-height flex layout: header → main → (optional footer) */
html,
body {
height: 100%;
overflow: hidden;
}
/* ── Discreet scrollbars (WebKit / Blink / Firefox) ──────────────── */
/* CSS custom properties defined in colors.css:
--scrollbar-thumb, --scrollbar-thumb-hover, --scrollbar-track, --scrollbar-corner */
::-webkit-scrollbar {
width: var(--scrollbar-width, 5px);
height: var(--scrollbar-width, 5px);
}
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-corner { background: var(--scrollbar-corner); }
html {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
scrollbar-gutter: stable;
}
body {
font-family: var(--font-body);
font-weight: 300;
color: var(--text-primary);
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 85%,
rgba(149, 87, 181, 0.8) 100%
);
display: flex;
flex-direction: column;
}
main {
flex: 1;
min-height: 0;
overflow-wrap: anywhere;
}
main * {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Global heading scale — used by admin + public pages */
h1 {
font-size: var(--step-4);
}
h2 {
font-size: var(--step-3);
}
h3 {
font-size: var(--step-2);
}
h4 {
font-size: var(--step-1);
}
h5 {
font-size: var(--step--1);
}
h6 {
font-size: var(--step--2);
}
:where(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-display);
font-weight: 400;
margin: 0 0 var(--space-m) 0;
line-height: 1.15;
}