/* * The single file with the app's own design — everything else is MudBlazor default. * Intent: a minimal skeleton that can be completely restyled by replacing this file * (plus the MudBlazor theme in MainLayout.razor). No scoped CSS (.razor.css) is used. */ :root { --app-loader-track: #e0e0e0; --app-loader-bar: #594ae2; /* MudBlazor default primary */ --app-text: #424242; --app-background: #ffffff; } html, body { margin: 0; background: var(--app-background); color: var(--app-text); font-family: "Roboto", "Segoe UI", Helvetica, Arial, sans-serif; } /* --------------------------------------------------------------------------- * Startup loader — ONE piece of markup (index.html), TWO styles: * - download mode (html.first-run without .downloaded): the ring arc follows * --blazor-load-percentage* set by the Blazor runtime, download texts shown; * - startup mode (everything else): the very same ring spins as an * indeterminate quarter arc, startup text shown. * The switch is just CSS classes on (see the inline script in index.html), * so the transition at 100 % is a smooth morph of the same element — the arc * animates from full circle to a spinning quarter, no reflow, no flicker. * On cached launches the loader fades in after a delay, so a fast refresh * finishes before it ever becomes visible. * The loader disappears when Blazor renders and replaces the #app content. * ------------------------------------------------------------------------- */ .app-loader { text-align: center; padding-top: 20vh; } html:not(.first-run) .app-loader { opacity: 0; animation: app-loader-appear 0.2s ease-out 0.4s forwards; } @keyframes app-loader-appear { to { opacity: 1; } } .app-loader-ring { display: block; width: 8rem; height: 8rem; margin: 0 auto 1rem auto; } .app-loader-ring circle { fill: none; stroke: var(--app-loader-track); stroke-width: 0.6rem; transform-origin: 50% 50%; } .app-loader-ring circle:last-child { stroke: var(--app-loader-bar); transform: rotate(-90deg); /* Startup mode default: fixed quarter arc (full circle at r=40% is ~251%). */ stroke-dasharray: 63%, 500%; transition: stroke-dasharray 0.5s ease; } /* Download mode: the arc is driven by the download percentage instead. */ html.first-run:not(.downloaded) .app-loader-ring circle:last-child { stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; } /* Startup mode: spin the whole ring. */ html:not(.first-run) .app-loader-ring, html.downloaded .app-loader-ring { animation: app-loader-spin 0.9s linear infinite; } @keyframes app-loader-spin { to { transform: rotate(360deg); } } /* Fixed height so the layout below does not move when the number disappears. */ .app-loader-percentage { height: 1.5rem; font-weight: bold; margin-top: -5.4rem; margin-bottom: 4rem; } html.first-run:not(.downloaded) .app-loader-percentage::after { content: var(--blazor-load-percentage-text, "…"); } .app-loader-title { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.5rem; } .app-loader-detail { max-width: 28rem; margin: 0 auto; opacity: 0.7; } /* Text variants — the only thing that differs between the two modes. */ .when-downloading { display: none; } html.first-run:not(.downloaded) .when-downloading { display: inline; } html.first-run:not(.downloaded) .when-starting { display: none; } /* --------------------------------------------------------------------------- * Navigation skeleton (structure only — the visual design comes with the theme): * ≥ 960px (Mud "md"): the MudDrawer side menu; below that the drawer hides and * the fixed bottom bar (Layout/BottomNav.razor) takes over — mirrors the * mobile .tabbar / desktop .sidebar pattern in Templates/12templates.html. * Colors reference MudBlazor palette variables so a future theme propagates. * ------------------------------------------------------------------------- */ .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; display: flex; background: var(--mud-palette-surface, #ffffff); border-top: 1px solid var(--mud-palette-lines-default, #e0e0e0); padding-bottom: env(safe-area-inset-bottom); /* phone gesture bar */ } .bottom-nav-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 8px; font-size: 0.6875rem; letter-spacing: 0.02em; text-decoration: none; color: var(--mud-palette-text-secondary, #666666); } .bottom-nav-item.active { color: var(--mud-palette-primary, #594ae2); } /* Keep page content clear of the fixed bottom bar on mobile. */ @media (max-width: 959.98px) { .app-content { padding-bottom: 64px; } } /* --------------------------------------------------------------------------- * "New version available" banner (driven by the script in index.html; * it must work even without Blazor running, hence not a Mud component) * ------------------------------------------------------------------------- */ #update-banner { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000; padding: 0.75rem 1.25rem; background: #323232; color: #ffffff; text-align: center; } #update-banner.visible { display: block; } #update-banner button { margin-left: 1rem; padding: 0.35rem 1rem; border: none; border-radius: 4px; background: var(--app-loader-bar); color: #ffffff; cursor: pointer; } /* --------------------------------------------------------------------------- * Standard Blazor error UI * ------------------------------------------------------------------------- */ #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2100; padding: 0.6rem 1.25rem 0.7rem 1.25rem; background: #b32121; color: #ffffff; } #blazor-error-ui .reload { color: #ffffff; text-decoration: underline; margin-left: 0.5rem; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }