/* base.css - split from app.css; load order fixed in index.html */ /* === THEME === */ /* base values = "modern"; the [data-theme="default"] block below overrides them */ html { --surface-grad: linear-gradient(155deg, rgba(15, 14, 20, 0.94) 0%, rgba(6, 5, 10, 0.96) 100%); --surface-solid: #0e0c14; --surface-border: rgba(140, 110, 230, 0.10); --surface-border-hover: rgba(140, 110, 230, 0.45); --surface-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(200, 195, 225, 0.05); --surface-shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(200, 195, 225, 0.07); --accent: #8a6bff; --accent-soft: #a07fff; --accent-text: #cdbfff; --icon-grad: linear-gradient(135deg, rgba(140, 110, 230, 0.22), rgba(140, 110, 230, 0.05)); --icon-border: rgba(140, 110, 230, 0.3); --content-bg: linear-gradient(180deg, #08070f 0%, #040308 100%); --panel-bg: rgba(20, 19, 24, 0.9); --text-primary: #fff; --body-bg: radial-gradient(circle at center, #0a0a0a 0%, rgba(0, 0, 0, 0.6) 550%); --app-shell-bg: linear-gradient(160deg, #0b0b0b, #000000); /* system font on iOS/macOS, Century Gothic on Windows */ --app-font: -apple-system, BlinkMacSystemFont, 'Century Gothic', 'Segoe UI', sans-serif; /* on so iOS overscroll / notch stay dark */ background-color: #0a0a0a; } html[data-theme="default"] { --surface-grad: linear-gradient(145deg, rgba(26, 26, 26, 0.9), rgba(17, 17, 17, 0.9)); --surface-solid: #18181b; --surface-border: rgba(255, 255, 255, 0.1); --surface-border-hover: rgba(255, 255, 255, 0.22); --surface-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04); --surface-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); --accent: #4a90e2; --accent-soft: #6aa9ee; --accent-text: #b8d4f5; --icon-grad: linear-gradient(135deg, rgba(74, 144, 226, 0.22), rgba(74, 144, 226, 0.05)); --icon-border: rgba(74, 144, 226, 0.25); --content-bg: #111; --panel-bg: #1a1a1d; --app-shell-bg: linear-gradient(160deg, #0b0b0b, #000000); } html[data-theme="crimson"] { /* surfaces are neutral dark - red shows through the --accent on buttons, focus rings, hovers */ --surface-grad: linear-gradient(155deg, rgba(20, 18, 19, 0.94) 0%, rgba(10, 8, 9, 0.96) 100%); --surface-solid: #161416; --surface-border: rgba(255, 255, 255, 0.08); --surface-border-hover: rgba(220, 38, 38, 0.40); --surface-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04); --surface-shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06); --accent: #dc2626; --accent-soft: #ef4444; --accent-text: #fca5a5; --icon-grad: linear-gradient(135deg, rgba(220, 38, 38, 0.22), rgba(220, 38, 38, 0.05)); --icon-border: rgba(220, 38, 38, 0.3); --content-bg: linear-gradient(180deg, #0a0a0c 0%, #050507 100%); --panel-bg: rgba(22, 20, 22, 0.9); --app-shell-bg: linear-gradient(160deg, #0a0a0c, #000000); } html[data-theme="tropical"] { --surface-grad: linear-gradient(155deg, rgba(22, 16, 12, 0.94) 0%, rgba(12, 8, 14, 0.96) 100%); --surface-solid: #14110a; --surface-border: rgba(251, 146, 60, 0.10); --surface-border-hover: rgba(251, 146, 60, 0.45); --surface-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(225, 210, 195, 0.05); --surface-shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(225, 210, 195, 0.07); --accent: #fb923c; --accent-soft: #fdba74; --accent-text: #fed7aa; --icon-grad: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(251, 146, 60, 0.10)); --icon-border: rgba(251, 146, 60, 0.3); --content-bg: linear-gradient(180deg, #110a07 0%, #08050c 100%); --panel-bg: rgba(26, 20, 16, 0.9); --app-shell-bg: linear-gradient(160deg, #0c0805, #050308); } html[data-theme="light"] { --surface-grad: linear-gradient(145deg, #ffffff 0%, #f5f5f7 100%); --surface-solid: #ffffff; --surface-border: rgba(0, 0, 0, 0.1); --surface-border-hover: rgba(0, 0, 0, 0.22); --surface-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5); --surface-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6); --accent: #0071e3; --accent-soft: #2997ff; --accent-text: #0058b3; --icon-grad: linear-gradient(135deg, rgba(0, 113, 227, 0.18), rgba(0, 113, 227, 0.04)); --icon-border: rgba(0, 113, 227, 0.25); --content-bg: #ffffff; --panel-bg: #f5f5f7; --text-primary: #1a1a1a; --body-bg: #f5f5f7; --app-shell-bg: #ffffff; } html[data-theme="forest"] { --surface-grad: linear-gradient(155deg, rgba(14, 28, 18, 0.94) 0%, rgba(6, 14, 10, 0.96) 100%); --surface-solid: #0c1c12; --surface-border: rgba(22, 163, 74, 0.12); --surface-border-hover: rgba(22, 163, 74, 0.45); --surface-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(195, 225, 200, 0.05); --surface-shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(195, 225, 200, 0.07); --accent: #16a34a; --accent-soft: #4ade80; --accent-text: #86efac; --icon-grad: linear-gradient(135deg, rgba(22, 163, 74, 0.22), rgba(22, 163, 74, 0.05)); --icon-border: rgba(22, 163, 74, 0.3); --content-bg: linear-gradient(180deg, #081609 0%, #030804 100%); --panel-bg: rgba(16, 28, 20, 0.9); --app-shell-bg: linear-gradient(160deg, #061008, #000000); } /* kill the iOS gray tap-highlight; manipulation drops double-tap-to-zoom (still allows pinch + scroll). Must be per-element - Safari only checks the tapped node. */ * { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } body { margin: 0; font-family: var(--app-font); background: var(--body-bg, radial-gradient(circle at center, #0a0a0a 0%, rgba(0, 0, 0, 0.6) 550%)); display: flex; justify-content: center; align-items: center; height: 100vh; color: var(--text-primary, white); } .app-container { position: relative; display: flex; flex-direction: row; height: 90vh; width: 96vw; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--app-shell-bg, linear-gradient(160deg, #0b0b0b, #000000)); border-radius: 20px; overflow: hidden; box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), 0 0 120px rgba(0, 0, 0, 0.6), inset 0 0 80px rgba(255, 255, 255, 0.02); transition: transform 0.4s ease, box-shadow 0.4s ease; } .app-container:hover { transform: translateY(-3px); box-shadow: 0 0 90px rgba(0, 0, 0, 1), 0 0 160px rgba(0, 0, 0, 0.8), inset 0 0 100px rgba(255, 255, 255, 0.03); } /* === Button === */ .button-main { background-color: #151313; color: #aaa; border: 1px solid #333; padding: 12px 26px; font-size: 1.1rem; font-weight: 500; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; display: inline-block; z-index: 5; align-self: center; } .button-main:hover { background-color: #333; color: #ccc; } .button-main:active { background-color: #111; color: #999; } /* === Textfield === */ .textfield-main { background-color: rgba(255, 255, 255, 0.03); color: #aaa; border: 1px solid #333; padding: 12px; font-size: 1.1rem; font-family: inherit; border-radius: 4px; resize: vertical; width: auto; min-height: 120px; min-width: 70%; box-sizing: border-box; transition: border-color 0.2s ease; margin: 8px 0; margin-bottom: 15px; } .textfield-main:focus { outline: none; border-color: #555; box-shadow: 0 0 0 2px rgba(85, 85, 85, 0.2); } /* === Textfield Num === */ .textfield-num { background-color: rgba(255, 255, 255, 0.03); color: #aaa; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; background-clip: padding-box; border: 1px solid #333; border-radius: 4px; transition: border-color 0.2s ease; margin-bottom: 5px; width: auto; min-width: 60px; } .textfield-num::-webkit-inner-spin-button, .textfield-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* === RICH THEME OVERRIDES === */ /* applies to every theme except default + light - i.e. Modern, Crimson, Tropical, Liquid */ /* uses var(--accent) so the same rules tint differently per theme */ html:not([data-theme="default"]):not([data-theme="light"]) .content { background: var(--content-bg, linear-gradient(180deg, #08070f 0%, #040308 100%)); } html:not([data-theme="default"]):not([data-theme="light"]) .tool-card, html:not([data-theme="default"]):not([data-theme="light"]) .group-card { background: var(--surface-grad); border-color: var(--surface-border); } html:not([data-theme="default"]):not([data-theme="light"]) .tool-card:hover { border-color: var(--surface-border-hover); } html:not([data-theme="default"]):not([data-theme="light"]) .schedule-grid, html:not([data-theme="default"]):not([data-theme="light"]) .totals, html:not([data-theme="default"]):not([data-theme="light"]) .gantt-chart, html:not([data-theme="default"]):not([data-theme="light"]) .coverage-stats, html:not([data-theme="default"]):not([data-theme="light"]) .timeline-container, html:not([data-theme="default"]):not([data-theme="light"]) .employee-add-container, html:not([data-theme="default"]):not([data-theme="light"]) .employee-card, html:not([data-theme="default"]):not([data-theme="light"]) .info-popup { background: var(--panel-bg, rgba(20, 19, 24, 0.9)); border-color: var(--surface-border); } html:not([data-theme="default"]):not([data-theme="light"]) .tool-card-title i, html:not([data-theme="default"]):not([data-theme="light"]) .stat-value { color: var(--accent); } html:not([data-theme="default"]):not([data-theme="light"]) .gantt-cell.working { background: color-mix(in srgb, var(--accent) 12%, transparent); } html:not([data-theme="default"]):not([data-theme="light"]) .tool-result { background: rgba(0, 0, 0, 0.25); border-color: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent-text); } html:not([data-theme="default"]):not([data-theme="light"]) .required-input:focus, html:not([data-theme="default"]):not([data-theme="light"]) .tool-input:focus, html:not([data-theme="default"]):not([data-theme="light"]) .tool-input-small:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); } html:not([data-theme="default"]):not([data-theme="light"]) .option-row input[type="checkbox"] { accent-color: var(--accent); } html:not([data-theme="default"]):not([data-theme="light"]) .page-title::before, html:not([data-theme="default"]):not([data-theme="light"]) .page-title::after { background-image: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%); } html:not([data-theme="default"]):not([data-theme="light"]) .button-main, html:not([data-theme="default"]):not([data-theme="light"]) .tool-btn, html:not([data-theme="default"]):not([data-theme="light"]) .employee-add-btn { background-color: rgba(0, 0, 0, 0.25); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); color: #e0e0e0; } html:not([data-theme="default"]):not([data-theme="light"]) .btn-outline-light { background-color: rgba(0, 0, 0, 0.25); border-color: color-mix(in srgb, var(--accent) 28%, transparent) !important; } html:not([data-theme="default"]):not([data-theme="light"]) .button-main:hover, html:not([data-theme="default"]):not([data-theme="light"]) .tool-btn:hover:not(:disabled), html:not([data-theme="default"]):not([data-theme="light"]) .employee-add-btn:hover { background-color: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: #fff; } html:not([data-theme="default"]):not([data-theme="light"]) .total-cell:hover { background: color-mix(in srgb, var(--accent) 30%, #000); } html:not([data-theme="default"]):not([data-theme="light"]) .btn-outline-light:hover { background-color: color-mix(in srgb, var(--accent) 16%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important; } html:not([data-theme="default"]):not([data-theme="light"]) .hour-slot:hover { background: color-mix(in srgb, var(--accent) 14%, #1a1818); } html:not([data-theme="default"]):not([data-theme="light"]) .group-item:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); } html:not([data-theme="default"]):not([data-theme="light"]) .info-icon { background-color: var(--surface-solid); } html:not([data-theme="default"]):not([data-theme="light"]) .info-icon:hover { background-color: color-mix(in srgb, var(--accent) 18%, var(--surface-solid)); } html:not([data-theme="default"]):not([data-theme="light"]) .employee-input { background: var(--surface-solid); border-color: color-mix(in srgb, var(--accent) 22%, transparent); } /* === LIGHT THEME EXTRAS === */ /* flip key text + sidebar surfaces so they're readable on a white page */ html[data-theme="light"] body { color: #1a1a1a; } html[data-theme="light"] .sidebar { background: linear-gradient(to bottom, #f5f5f7 0%, #ebebed 60%, #e0e0e3 100%); } html[data-theme="light"] .nav-item { color: #444; } html[data-theme="light"] .nav-item:hover, html[data-theme="light"] .nav-item.active { background: rgba(0, 0, 0, 0.08); color: #000; } html[data-theme="light"] .page-title, html[data-theme="light"] .home-tagline-title, html[data-theme="light"] .home-livestats-title, html[data-theme="light"] .home-feature-title, html[data-theme="light"] .home-stat-value, html[data-theme="light"] .home-livestat-value, html[data-theme="light"] .movies-title, html[data-theme="light"] .movies-filter-head h2, html[data-theme="light"] .movies-rating-score, html[data-theme="light"] .movies-stat-tile-value, html[data-theme="light"] .movies-cast-name, html[data-theme="light"] .movies-award-count, html[data-theme="light"] .movies-overview, html[data-theme="light"] .settings-section-title, html[data-theme="light"] .settings-theme-name, html[data-theme="light"] .tool-card-title, html[data-theme="light"] .tool-result, html[data-theme="light"] .planner-section-title, html[data-theme="light"] .gantt-header-label, html[data-theme="light"] .gantt-name-text, html[data-theme="light"] .employee-name, html[data-theme="light"] .stat-value, html[data-theme="light"] .contact-card, html[data-theme="light"] .contact-field-label { color: #1a1a1a; } html[data-theme="light"] .home-tagline-text, html[data-theme="light"] .home-feature-desc, html[data-theme="light"] .home-stat-label, html[data-theme="light"] .home-livestat-label, html[data-theme="light"] .movies-rating-votes, html[data-theme="light"] .movies-stat-tile-label, html[data-theme="light"] .movies-cast-char, html[data-theme="light"] .movies-award-label, html[data-theme="light"] .movies-meta, html[data-theme="light"] .settings-section-hint, html[data-theme="light"] .settings-theme-desc, html[data-theme="light"] .tool-card-hint, html[data-theme="light"] .tool-result-empty { color: #555; } /* Light needs the dark homepage backdrop swapped out */ html[data-theme="light"] .home-bg::before { background: radial-gradient(ellipse 65% 55% at 50% 45%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 75%), linear-gradient(180deg, #fafafa 0%, #f0f0f3 100%); } html[data-theme="light"] .movies-result { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .movies-hero-fade { background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.92) 18%, #ffffff 40%); } /* tool surfaces - inputs/results need dark text on Light's white cards */ html[data-theme="light"] .tool-input, html[data-theme="light"] .tool-input-small, html[data-theme="light"] .tool-textarea, html[data-theme="light"] .tool-result { color: #1a1a1a; background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); } html[data-theme="light"] .tool-card-title { border-bottom-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .tool-btn { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); color: #1a1a1a; } html[data-theme="light"] .tool-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); color: #1a1a1a; } /* logo wordmark is white text - invert it so it reads as black on Light */ html[data-theme="light"] .home-hero-img { filter: invert(1); } /* homepage animations don't fit the clean Light look - hide them */ html[data-theme="light"] .home-bg, html[data-theme="light"] .home-waves, html[data-theme="light"] .home-shoot, html[data-theme="light"] .home-particle, html[data-theme="light"] .home-hero::before { display: none !important; } /* shadow softer than the dark themes' deep glow */ html[data-theme="light"] .app-container { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08); } html[data-theme="light"] .app-container:hover { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); } /* divider lines that were rgba(white) - need to be rgba(black) on Light */ html[data-theme="light"] .home-tagline .home-stats-grid, html[data-theme="light"] .home-livestats-card .home-stats-grid, html[data-theme="light"] .home-livestats-card .home-livestats-grid > .home-livestat-pill + .home-livestat-pill, html[data-theme="light"] .sidebar-footer, html[data-theme="light"] .movies-section, html[data-theme="light"] .movies-awards-summary { border-color: rgba(0, 0, 0, 0.08) !important; } /* group shuffler */ html[data-theme="light"] .group-card, html[data-theme="light"] .shuffler-panel { background: var(--surface-grad); border-color: var(--surface-border); color: #1a1a1a; } html[data-theme="light"] .group-title-input, html[data-theme="light"] .group-item { color: #1a1a1a; } html[data-theme="light"] .group-list, html[data-theme="light"] .shuffler-summary { color: #555; } /* shift planner */ html[data-theme="light"] .planner-card, html[data-theme="light"] .employee-card, html[data-theme="light"] .employee-add-container, html[data-theme="light"] .timeline-bar, html[data-theme="light"] .timeline-container, html[data-theme="light"] .schedule-grid, html[data-theme="light"] .gantt-chart, html[data-theme="light"] .totals, html[data-theme="light"] .coverage-stats, html[data-theme="light"] .info-popup { background: var(--surface-grad); border-color: var(--surface-border); color: #1a1a1a; } /* moon icons, chips, hour labels - need contrast on light */ html[data-theme="light"] .nextday-checkbox i, html[data-theme="light"] .hour-label, html[data-theme="light"] .planner-chip, html[data-theme="light"] .demand-custom-label, html[data-theme="light"] .gantt-hour-marker { color: #1a1a1a; } html[data-theme="light"] .planner-chip { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); } html[data-theme="light"] .required-input, html[data-theme="light"] .employee-form input, html[data-theme="light"] .employee-input { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); color: #1a1a1a; } /* hour-slot grid cells visible on light */ html[data-theme="light"] .hour-slot, html[data-theme="light"] .gantt-cell { border-color: rgba(0, 0, 0, 0.08); } /* hour-slot and group-item hover - dark themes use accent tint, Light needs a soft dark hint */ html[data-theme="light"] .hour-slot:hover, html[data-theme="light"] .group-item:hover, html[data-theme="light"] .total-cell:hover { background: rgba(0, 0, 0, 0.04); } /* movies sections used 25% black overlay - reads as grey on the white card */ html[data-theme="light"] .movies-section { background: rgba(0, 0, 0, 0.02); border-top-color: rgba(0, 0, 0, 0.06); } /* movies filter bar chips + labels were dark-mode coloured */ html[data-theme="light"] .movies-filter { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .movies-filter-head p, html[data-theme="light"] .movies-min-rating-label, html[data-theme="light"] .movies-pool { color: #555; } html[data-theme="light"] .movies-min-rating-label strong, html[data-theme="light"] .movies-pool strong { color: #1a1a1a; } html[data-theme="light"] .movies-type-opt { color: #555; } html[data-theme="light"] .movies-type-opt.active { color: #1a1a1a; } html[data-theme="light"] .movies-genre-chip { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); color: #555; } html[data-theme="light"] .movies-genre-chip:hover:not(:disabled) { color: #1a1a1a; border-color: rgba(0, 0, 0, 0.22); } html[data-theme="light"] .movies-genre-chip.active { color: #1a1a1a; } html[data-theme="light"] .movies-genre-clear { color: #777; } /* movies result inner tiles - need dark text + soft borders */ html[data-theme="light"] .movies-rating, html[data-theme="light"] .movies-stat-tile, html[data-theme="light"] .movies-award, html[data-theme="light"] .movies-cast-card { background: rgba(0, 0, 0, 0.025); border-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .movies-tagline { color: #555; } html[data-theme="light"] .movies-meta, html[data-theme="light"] .movies-meta span:not(:last-child)::after { color: #555; } html[data-theme="light"] .movies-genre-pill { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); color: #333; } html[data-theme="light"] .movies-link { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); color: #1a1a1a !important; } /* "Where to watch" - provider chips + row labels were dark-mode-grey */ html[data-theme="light"] .movies-provider { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .movies-provider-name { color: #1a1a1a; } html[data-theme="light"] .movies-providers-row-label { color: #555; } html[data-theme="light"] .movies-providers-attr { color: #777; } /* awards summary numbers + label */ html[data-theme="light"] .movies-awards-summary { color: #555; border-top-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .movies-awards-summary strong { color: #1a1a1a; } html[data-theme="light"] .movies-awards-sep { color: #999; } /* === BLAZOR === */ .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid red; } .validation-message { color: red; } #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." } /* === App boot loader (themed; Blazor swaps it out once it mounts) === --accent / --app-font come from the active theme since base.css + the data-theme script run before Blazor downloads. */ .app-loading { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; /* a soft accent pool glowing out of the dark page centre */ background: radial-gradient(closest-side at 50% 45%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%), #0a0a0a; } .app-loading-ring { position: relative; width: 9rem; height: 9rem; display: grid; place-items: center; } .loading-progress { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .loading-progress circle { fill: none; /* faint full ring = the track */ stroke: color-mix(in srgb, var(--accent) 16%, transparent); stroke-width: 0.4rem; transform-origin: 50% 50%; transform: rotate(-90deg); /* start the fill at 12 o'clock */ } .loading-progress circle:last-child { /* accent arc that grows with the real download % (Blazor's formula) */ stroke: var(--accent); stroke-linecap: round; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.1s ease-in-out; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); } .app-loading-logo { width: 4.6rem; height: 4.6rem; object-fit: contain; /* breathe + glow so the screen feels alive even while the % ticks up */ animation: app-loading-pulse 2.2s ease-in-out infinite; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 45%, transparent)); } @keyframes app-loading-pulse { 0%, 100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.06); opacity: 1; } } .app-loading-word { font-family: var(--app-font); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #f0f0f2; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); } .loading-progress-text { font-family: var(--app-font); font-size: 0.95rem; font-weight: 600; color: color-mix(in srgb, var(--accent) 75%, #cccccc); font-variant-numeric: tabular-nums; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } @media (prefers-reduced-motion: reduce) { .app-loading-logo { animation: none; } } code { color: #c02d76; } .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; }