/* * Light/dark theming. * * Three states, not two: System, Light, Dark. A plain two-way switch would throw away "follow the machine * I am on", which is the right answer for most visitors and the only one that stays right when they change * their own setting later. * * How the choice is applied: * - nothing stored -> no data-theme attribute, the prefers-color-scheme block below decides; * - data-theme="dark" -> dark regardless of the system; * - data-theme="light" -> light regardless of the system, which is why the media block excludes it. * The attribute is stamped on by theme.js before the body paints, so the page never flashes the * wrong theme on the way in. * * The colours below are variables because the pages used hard-coded greys in inline style attributes, which * no stylesheet can override without !important. As variables an inline colour re-resolves per theme, so * the markup stops carrying a light-mode assumption. * * NOT themed on purpose: * - the digital card pages, whose palette is chosen by the card's owner and must look the same to everyone; * - the white plate behind a QR code, which a scanner needs; * - the status colours (green/blue/orange/red), mid-tones that carry on both backgrounds. */ /* ------------------------------------------------------------------ light (the default) */ :root { --fbc-muted: #6b7280; /* captions, secondary lines */ --fbc-text-soft: #4b5563; /* body text one step down from primary */ --fbc-danger-text: #c00000; --fbc-rule: #e6e6e6; /* hairline separators */ --fbc-panel-soft: #f7f7f7; /* the "where do I get these?" help panels */ --fbc-surface: #ffffff; /* cards */ --fbc-surface-muted: #f8f9fa; /* .bg-light */ --fbc-input-bg: #ffffff; --fbc-btn-light-bg: #f8f9fa; --fbc-link: #0071c1; --bs-body-color: #212529; --bs-body-bg: #ffffff; } /* ------------------------------------------------------------------ dark * The two blocks below carry the SAME declarations and have to stay identical — one covers "the system * says dark and the visitor has not overridden it", the other "the visitor asked for dark". CSS has no way * to combine a media query and a selector into one rule, so this is the duplication the language forces. * Everything derived from these values is written once, further down, and needs no dark counterpart. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fbc-muted: #98a2b3; --fbc-text-soft: #c3cad6; --fbc-danger-text: #ff7b72; --fbc-rule: rgba(255, 255, 255, 0.14); --fbc-panel-soft: rgba(255, 255, 255, 0.05); --fbc-surface: #1d2027; --fbc-surface-muted: #1a1d23; --fbc-input-bg: #14161a; --fbc-btn-light-bg: #2a2e37; --fbc-link: #6ea8fe; --bs-body-color: #e6e6e6; --bs-body-bg: #16181d; } } :root[data-theme="dark"] { --fbc-muted: #98a2b3; --fbc-text-soft: #c3cad6; --fbc-danger-text: #ff7b72; --fbc-rule: rgba(255, 255, 255, 0.14); --fbc-panel-soft: rgba(255, 255, 255, 0.05); --fbc-surface: #1d2027; --fbc-surface-muted: #1a1d23; --fbc-input-bg: #14161a; --fbc-btn-light-bg: #2a2e37; --fbc-link: #6ea8fe; --bs-body-color: #e6e6e6; --bs-body-bg: #16181d; } /* ------------------------------------------------------------------ surfaces * Written once and applied in both themes: every value here resolves to what Bootstrap already used in * light mode, so turning this on changed nothing for a light-mode visitor. * * These matter most on sign-in, sign-up and verify-email, which set Layout = null, carry their own * and never load Radzen at all — they are plain Bootstrap, so the component theme does not reach them. */ html, body { background-color: var(--bs-body-bg); } a, .btn-link { color: var(--fbc-link); } /* !important only because Bootstrap's own utility carries it. */ .bg-light { background-color: var(--fbc-surface-muted) !important; } .card { background-color: var(--fbc-surface); border-color: var(--fbc-rule); } .form-control, .form-select { background-color: var(--fbc-input-bg); border-color: var(--fbc-rule); color: var(--bs-body-color); } .form-control:focus, .form-select:focus { background-color: var(--fbc-input-bg); color: var(--bs-body-color); } .form-control::placeholder { color: var(--fbc-muted); } .btn-light { background-color: var(--fbc-btn-light-bg); border-color: var(--fbc-rule); color: var(--bs-body-color); } .text-muted { color: var(--fbc-muted) !important; } /* The error bar keeps its light-yellow plate in both themes, so its text stays dark to stay legible. */ #blazor-error-ui { color: #212529; } /* ------------------------------------------------------------------ announcements * Built from the theme variables, so a message reads correctly in both schemes without the author having * to think about it. The banner is deliberately quiet: it says something exists, it does not take the page. */ .fbc-ann-banner { display: flex; align-items: center; gap: 10px; padding: 7px 16px; font-size: 0.86rem; background: var(--fbc-panel-soft); border-bottom: 1px solid var(--fbc-rule); } .fbc-ann-banner-text { flex: 1; min-width: 0; } .fbc-ann-banner-link { flex: 0 0 auto; background: none; border: 0; padding: 0; font: inherit; color: var(--fbc-link); text-decoration: underline; cursor: pointer; } .fbc-ann-x { flex: 0 0 auto; background: none; border: 0; padding: 0 4px; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--fbc-muted); } .fbc-ann-x:hover { color: var(--bs-body-color); } .fbc-ann-inline { margin: 12px 16px; padding: 14px 16px; border: 1px solid var(--fbc-rule); border-radius: 10px; background: var(--fbc-panel-soft); } .fbc-ann-inline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } /* The author's own markup lives in here. Constrained to a readable measure and stopped from pushing the page sideways, because an announcement is not the place to discover that an image had no max-width. */ .fbc-ann-body { margin-top: 6px; line-height: 1.55; overflow-x: auto; } .fbc-ann-body img { max-width: 100%; height: auto; } .fbc-ann-body > :last-child { margin-bottom: 0; } .fbc-ann-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; } .fbc-ann-dialog { width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto; background: var(--fbc-surface); color: var(--bs-body-color); border: 1px solid var(--fbc-rule); border-radius: 12px; padding: 20px 22px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3); } .fbc-ann-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .fbc-ann-dialog-head h4 { margin: 0; } /* The way out of the dialog sits on the right where it is expected; the way DEEPER — the archive — sits on the left, so it reads as an aside rather than as one more thing to decide between. */ .fbc-ann-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; } .fbc-ann-dialog-more { font-size: 0.85rem; } .fbc-ann-dialog-actions { display: flex; gap: 8px; margin-left: auto; } @media (max-width: 560px) { .fbc-ann-banner { flex-wrap: wrap; } .fbc-ann-inline { margin: 12px 8px; } }