/* ============================================================================ * EonScribe.Web — App entry stylesheet * * Only contains: imports of the shared utility files, a minimal reset, * / defaults, Blazor boot/error UI, and tiny global helpers. * No component-specific rules, no token definitions — those live in their * dedicated files below. * * Order matters: tokens first (others depend on them), typography next * (consumed by buttons), then the rest. * * See EonScribe.Web/docs/web-design.md for the full design system. * ========================================================================== */ @import url('tokens.css'); @import url('typography.css'); @import url('buttons.css'); @import url('overlays.css'); @import url('forms.css'); @import url('comic.css'); /* ===== Reset ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* ===== Document defaults =============================================== */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; background-color: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 0.875rem; line-height: 1.5; overflow: hidden; } #app { width: 100%; height: 100%; } /* ===== Loading state (Blazor boot) ===================================== */ .loading-progress { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6rem; height: 6rem; } .loading-progress circle { fill: none; stroke: var(--bg-elevated); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--cyan); 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(50% + 0.75rem) 0 auto 0; color: var(--tan); } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } /* ===== Blazor error UI ================================================= */ #blazor-error-ui { background: var(--danger-bg); color: var(--danger-text); bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4); display: none; left: 0; padding: 0.8rem 1.4rem 0.9rem 1.4rem; position: fixed; width: 100%; z-index: var(--z-error); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } #blazor-error-ui a { color: var(--accent); } /* ===== Page chrome ====================================================== Shared layout primitives used across full-screen pages (NewGame, LoadGame, ScenarioList, Settings, etc.). Each page composes these instead of redefining its own header/status/back-button. */ .page-header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-3); padding: 14px var(--sp-4); background: linear-gradient(180deg, var(--page-chrome-from) 0%, var(--page-chrome-to) 100%); border-bottom: 1px solid rgba(var(--c-cyan), 0.25); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); } .page-title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.5px; color: var(--accent); text-shadow: 0 0 12px rgba(var(--c-cyan), 0.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status { align-self: start; padding: 32px var(--sp-4); text-align: center; color: var(--tan); font-size: 15px; } .status.error { color: var(--text-danger); } @media (max-width: 540px) { .page-title { font-size: 18px; } } /* ===== Tiny helpers ==================================================== */ .chip-icon { margin-right: 4px; }