:root { --surface: #ffffff; --surface-sunken: #f9fafb; --border: #f3f4f6; --text: #111827; --muted: #6b7280; --accent: #111827; --accent-hover: #030712; --accent-text: #f9fafb; --error: #dc2626; --base-size: 4px; /* Spacing */ --space-inline: var(--base-size); --space-tight: calc(var(--base-size) * 2); --space: calc(var(--base-size) * 3); --space-section: calc(var(--base-size) * 5); /* Controls */ --control-height: calc(var(--base-size) * 8); --control-icon-inset: calc((var(--control-height) - var(--text-sm)) / 2); --control-padding-y: var(--space-tight); --control-padding-x: var(--space); --control-padding: var(--control-padding-y) var(--control-padding-x); /* Radius */ --radius-sm: calc(var(--base-size) * 2); --radius-md: calc(var(--base-size) * 4); --radius-lg: calc(var(--base-size) * 8); /* Type */ --text-xs: 0.8rem; --text-sm: 0.9rem; --text-md: 1rem; --text-lg: 1.1rem; --text-xl: 1.5rem; --text-2xl: 1.8rem; /* Shared by more than one stylesheet */ --shadow: 0 0 1px rgba(48, 48, 48, 0.1); --measure: 720px; --transition-speed: 200ms; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --surface: #111827; --surface-sunken: #030712; --border: #1f2937; --text: #f9fafb; --muted: #9ca3af; --accent: #f9fafb; --accent-hover: #ffffff; --accent-text: #111827; --error: #f87171; } } * { box-sizing: border-box; } /* On alone: a percentage is a share of the parent, so would take it twice. */ html { font-size: 83.333%; } body { margin: 0; background: var(--surface); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } h1, h2, h3, h4, h5, h6, p { margin: 0 0 var(--space) 0; outline: none; } h1, .h1 { font-size: var(--text-2xl); font-weight: 500; } h2, .h2 { font-size: var(--text-xl); font-weight: 500; } h3, .h3, .h3::placeholder, .title, .title ::placeholder { font-size: var(--text-lg); font-weight: 500; } a { color: var(--accent); } .text-muted { color: var(--muted); } .text-danger { color: var(--error); } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-wrap { white-space: normal; } .text-nowrap { white-space: nowrap; } .text-sm { font-size: var(--text-sm); } .cursor-pointer { cursor: pointer; } .pad-tight { padding: var(--space-tight); } .pad { padding: var(--space); } .m-0 { margin: 0 !important; } .p-0 { padding: 0 !important; } .show { display: contents; } .hide { display: none; } hr { border: none; border-top: solid 1px var(--border); margin: var(--space) 0; } /* Text edited where it is drawn: a caret rather than a box, and nothing to say it is a field but the words in it. Here rather than beside the pages that do it, since more than one now does. */ [contenteditable] { cursor: text; } [contenteditable]:focus { outline: none; } /* A field emptied by hand is not empty to the browser: deleting the last character leaves a
behind for the caret to sit on, and :empty stops matching from then on. The second selector is that same field — nothing in it but the browser's own line break. Text nodes do not count against :only-child, so an empty one left beside the
does not hide the placeholder either. */ [contenteditable]:empty::before, [contenteditable]:has(> br:only-child)::before { content: attr(data-placeholder); color: var(--muted); /* Out of the line rather than in it: text on the line is text the caret sits after, which is what puts it past the placeholder in a field that was emptied by hand. Absolute with no offsets leaves the words exactly where they were drawn — at the start of the first line. */ position: absolute; } /* Blazor */ #blazor-error-ui { color-scheme: light only; background: lightyellow; color: #111827; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 10px 20px 11px 20px; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; } .loading-progress { position: absolute; display: block; width: 128px; height: 128px; inset: 20vh 0 auto 0; margin: 0 auto 0 auto; } .loading-progress circle { fill: none; stroke: var(--border); stroke-width: 10px; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 52px) 0 auto 3px; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } /* Responsive Paired with .hide, which takes the element out; the show-* for the breakpoint puts it back at that width and below. `revert` rather than a named type: it drops the declaration and lets the element have the display it would have had with neither class on it — table-cell for a , block for a
, list-item for an
  • — so one rule serves every element instead of a class per type. It reverts to the browser's own default, not to ours, so an element whose display comes from a class of ours — .btn, .grid, .flex-row — comes back as the plain element underneath. Wrap those in a and put the pair on that. */ @media (max-width: 1200px) { .show-lg { display: revert; } .hide-lg { display: none; } } @media (max-width: 900px) { .show-md { display: revert; } .hide-md { display: none; } } @media (max-width: 720px) { .show-sm { display: revert; } .hide-sm { display: none; } }