html, body {
--font-display: "Michroma", sans-serif;
--font-teleprinter: "Roboto Mono", monospace;
--font-body: "Roboto", sans-serif;
--font-size-body: 14px;
--font-size-teleprinter: 13px;
--line-height-body: 1.6;
--line-height-teleprinter: 1.45;
font-family: var(--font-body);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
/* Shared palette, matching the guest console (Components/Pages/Token.razor.css) —
cream/paper text, near-black ink background, amber/green/burgundy accents. */
--paper: #f4ead2;
--ink: #11100d;
--field: #201d18;
--amber: #d3a348;
--green: #5f7f55;
--burgundy: #5f1d2b;
--muted: #b9aa8a;
background-color: var(--ink);
color: var(--paper);
/* Ground Bootstrap's dark theme (data-bs-theme="dark" on ) to this palette instead
of its generic gray defaults, so plain Bootstrap pages (forms, tables, nav) share the
guest console's feel rather than looking like a different app. */
--bs-body-bg: var(--ink);
--bs-body-color: var(--paper);
--bs-body-color-rgb: 244, 234, 210;
--bs-secondary-bg: var(--field);
--bs-tertiary-bg: #171410;
--bs-border-color: #3a352c;
--bs-emphasis-color: var(--paper);
}
body,
button,
input,
select,
textarea {
font-family: var(--font-body) !important;
}
p,
li,
label,
a,
button,
input,
select,
textarea,
table,
.guest-name,
.init-guest-name,
.muted,
.lede {
font-family: var(--font-body) !important;
font-size: var(--font-size-body);
line-height: var(--line-height-body);
}
.teleprinter-output,
.teleprinter-output pre,
.terminal-form,
.terminal-form *,
.crt-screen .console-session,
.crt-screen .console-session *,
.command-row,
.command-output,
.field-prompt,
.console-kicker,
.console-prompt,
.console-line,
.console-art,
.console-error,
.console-help,
.scan-header,
.live-typing,
.live-typing pre,
.console-line-input {
font-family: var(--font-teleprinter) !important;
font-size: var(--font-size-teleprinter);
line-height: var(--line-height-teleprinter);
}
h1,
h2,
h3,
h4,
h5,
h6,
.crt-label {
font-family: var(--font-display) !important;
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 400;
}
/* Global, not per-page: no admin page's sidebar/nav should end up on a printed page, and the
dark guest-console theme would otherwise print a solid black page + unreadable pale text. */
@media print {
.sidebar {
display: none !important;
}
html, body {
background-color: #fff !important;
color: #000 !important;
}
}
.btn-outline-dark, .btn-outline-secondary {
--bs-btn-color: var(--paper);
--bs-btn-border-color: var(--muted);
--bs-btn-hover-color: var(--ink);
--bs-btn-hover-bg: var(--amber);
--bs-btn-hover-border-color: var(--amber);
--bs-btn-active-color: var(--ink);
--bs-btn-active-bg: var(--amber);
--bs-btn-active-border-color: var(--amber);
--bs-btn-disabled-color: var(--muted);
--bs-btn-disabled-border-color: var(--muted);
}
.btn-dark {
--bs-btn-bg: var(--field);
--bs-btn-border-color: var(--muted);
--bs-btn-hover-bg: var(--burgundy);
--bs-btn-hover-border-color: var(--burgundy);
--bs-btn-active-bg: var(--burgundy);
--bs-btn-active-border-color: var(--burgundy);
}
/* The rules above assume a dark (--ink) background. Admin pages also use cream "cards"
(.admin-panel/.compact-panel/.overlay-panel) over that dark backdrop -- inside one of those,
Bootstrap's dark-theme .text-muted and the paper-colored outline buttons above become
unreadable (light text on cream), so darken them back down in that specific context. */
.admin-panel .text-muted,
.compact-panel .text-muted,
.overlay-panel .text-muted {
color: #7a6b5d !important;
}
.admin-panel .btn-outline-dark,
.compact-panel .btn-outline-dark,
.overlay-panel .btn-outline-dark,
.admin-panel .btn-outline-secondary,
.compact-panel .btn-outline-secondary,
.overlay-panel .btn-outline-secondary {
--bs-btn-color: #241f1b;
--bs-btn-border-color: #8a7d6a;
--bs-btn-hover-color: var(--paper);
--bs-btn-hover-bg: #241f1b;
--bs-btn-hover-border-color: #241f1b;
--bs-btn-disabled-color: #a89a86;
}
.boot-splash {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: var(--ink);
}
/* Same "static burst that clears" technique as Alert.razor's .alert-snow, but defined globally
(not Blazor-scoped) since this markup lives in the static index.html shell, shown before the
WASM runtime has even started -- long before any component-scoped stylesheet could apply. */
.boot-snow {
position: absolute;
inset: 0;
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 96px 96px;
image-rendering: pixelated;
filter: grayscale(1) contrast(2.4) brightness(1.15);
mix-blend-mode: screen;
animation:
boot-snow-shift 0.1s steps(5) 5,
boot-snow-clear 0.5s step-end forwards;
pointer-events: none;
}
@keyframes boot-snow-shift {
20% { background-position: 18px -12px; }
40% { background-position: -22px 16px; }
60% { background-position: 12px 28px; }
80% { background-position: -16px -20px; }
}
@keyframes boot-snow-clear {
100% { visibility: hidden; }
}
.boot-mark {
position: relative;
z-index: 2;
max-width: min(55vw, 280px);
max-height: 40vh;
animation: boot-mark-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Holds the logo invisible until the snow above has cleared, so it appears second rather than
racing/overlapping the snow burst -- only used on the static index.html shell (Token.razor's
own splash keeps its original un-delayed pop-in). */
.boot-mark.boot-mark-delayed {
opacity: 0;
animation: boot-mark-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both;
}
@keyframes boot-mark-pop {
0% {
opacity: 0;
transform: scale(0.4);
}
70% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
a, .btn-link {
color: #006bb7;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
#blazor-error-ui {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
.status-bar-safe-area {
display: none;
}
@supports (-webkit-touch-callout: none) {
.status-bar-safe-area {
display: flex;
position: sticky;
top: 0;
height: env(safe-area-inset-top);
background-color: #f7f7f7;
width: 100%;
z-index: 1;
}
.flex-column, .navbar-brand {
padding-left: env(safe-area-inset-left);
}
}