/* F-421: the failed-initial-connect banner. See circuit-watch.js for what raises it and why at 10s. A file of its own rather than an addition to app.css: this must render correctly on a page whose interactivity is already broken, so it depends on nothing but itself — no design tokens, no MudBlazor classes, no cascade from a sheet that may have been the thing that failed to load. PLACEMENT IS THE POINT. #blazor-error-ui sits at the BOTTOM of the page, and the F-379 investigation recorded that it is easy to miss. A user whose controls have stopped responding is looking at the control they clicked and then at the top of the page — so this is a top bar, above the app bar, in the first place they look. It overlays rather than reflows because reflowing the whole shell to announce a problem is its own small disaster. */ #circuit-connect-ui { align-items: center; background: #fff4cc; border-bottom: 1px solid rgba(44, 62, 80, 0.22); box-shadow: 0 2px 6px rgba(44, 62, 80, 0.22); box-sizing: border-box; color: #2c3e50; display: flex; flex-wrap: wrap; font-size: 0.95rem; gap: 0.5rem 1rem; left: 0; line-height: 1.35; padding: 0.7rem 1rem; position: fixed; right: 0; top: 0; /* Above MudBlazor's app bar (1100) and drawers (1200), and above #blazor-error-ui (1000). A message about the page being dead is worth more than whatever it covers. */ z-index: 2000; } /* The `hidden` attribute's user-agent rule is `display: none`, which the `display: flex` above would otherwise defeat — this is what keeps the banner hidden on a healthy page. #id[hidden] outranks #id, so no !important. */ #circuit-connect-ui[hidden] { display: none; } #circuit-connect-ui .circuit-connect-ui__text { display: flex; flex: 1 1 20rem; flex-direction: column; gap: 0.15rem; } #circuit-connect-ui .circuit-connect-ui__title { font-weight: 700; } #circuit-connect-ui .circuit-connect-ui__reload { background: #2c3e50; border: 1px solid #2c3e50; border-radius: 0.35rem; color: #fff; cursor: pointer; font: inherit; font-weight: 600; padding: 0.4rem 0.9rem; } #circuit-connect-ui .circuit-connect-ui__reload:hover { background: #1c2a36; } #circuit-connect-ui .circuit-connect-ui__dismiss { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 1.25rem; line-height: 1; padding: 0.2rem 0.4rem; } #circuit-connect-ui :focus-visible { outline: 2px solid #2c3e50; outline-offset: 2px; } /* Dark theme. theme-boot.js resolves the choice onto before anything paints, so the attribute is the authority; prefers-color-scheme is the fallback for the window before it runs, or if it ever does not. Amber-on-dark rather than the light sheet's amber-on-white, both measured >= 4.5:1 against their background. */ :root[data-theme="dark"] #circuit-connect-ui { background: #4a3a12; border-bottom-color: rgba(255, 255, 255, 0.28); color: #ffe9b0; } :root[data-theme="dark"] #circuit-connect-ui .circuit-connect-ui__reload { background: #ffe9b0; border-color: #ffe9b0; color: #33280c; } :root[data-theme="dark"] #circuit-connect-ui .circuit-connect-ui__reload:hover { background: #fff4cc; } :root[data-theme="dark"] #circuit-connect-ui :focus-visible { outline-color: #ffe9b0; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #circuit-connect-ui { background: #4a3a12; border-bottom-color: rgba(255, 255, 255, 0.28); color: #ffe9b0; } :root:not([data-theme="light"]) #circuit-connect-ui .circuit-connect-ui__reload { background: #ffe9b0; border-color: #ffe9b0; color: #33280c; } :root:not([data-theme="light"]) #circuit-connect-ui :focus-visible { outline-color: #ffe9b0; } } /* ---- F-599: the mid-session reconnect modal --------------------------------------------------------------------- blazor.web.js drives #components-reconnect-modal's className through components-reconnect-{show,failed,rejected, hide}; everything below keys off those framework classes and nothing else, because the framework REPLACES the className wholesale. Hidden is the default — an unknown class value degrades to the status quo (no overlay), never to a false alarm. Same self-containment rule as the banner above: no tokens, no MudBlazor, no cascade. F-630: also covers components-reconnect-paused and components-reconnect-resume-failed, two states this rule set did not name until this pass. Confirmed by reading the shipped _framework/blazor.web.js directly (10.0.9): the framework's reconnection-display wrapper has grown a "paused"/"resume" pair of states alongside the four this file originally covered, and — because the framework REPLACES className wholesale — a class value this sheet does not style falls through to the bare `#components-reconnect-modal { display: none }` rule above, i.e. the modal goes invisible in exactly the state it most needs to be seen. Treated as aliases of the closest state a user-facing message already exists for: 'paused' reads as 'show' (an attempt is pending, nothing has failed yet) and 'resume-failed' reads as 'failed' (the honest action is the same — reload). */ #components-reconnect-modal { display: none; } #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-paused, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-resume-failed, #components-reconnect-modal.components-reconnect-rejected { align-items: center; background: rgba(44, 62, 80, 0.45); display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; /* Above the connect banner (2000): a dead-mid-session page supersedes a slow-to-start one. */ z-index: 2100; } #components-reconnect-modal .circuit-reconnect__card { background: #fff; border-radius: 0.5rem; box-shadow: 0 8px 28px rgba(44, 62, 80, 0.35); box-sizing: border-box; color: #2c3e50; display: flex; flex-direction: column; font-size: 0.95rem; gap: 0.6rem; line-height: 1.4; max-width: 26rem; padding: 1.25rem 1.4rem; width: 100%; } #components-reconnect-modal .circuit-reconnect__title { display: none; font-weight: 700; } /* One message per framework state; the others stay dark. F-630: 'paused' and 'resume-failed' reuse the 'show' and 'failed' copy respectively (see the F-630 note above) rather than adding new markup + i18n keys for a message that would say the same thing. */ #components-reconnect-modal.components-reconnect-show .circuit-reconnect__title--show, #components-reconnect-modal.components-reconnect-paused .circuit-reconnect__title--show, #components-reconnect-modal.components-reconnect-failed .circuit-reconnect__title--failed, #components-reconnect-modal.components-reconnect-resume-failed .circuit-reconnect__title--failed, #components-reconnect-modal.components-reconnect-rejected .circuit-reconnect__title--rejected { display: block; } #components-reconnect-modal .circuit-reconnect__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } #components-reconnect-modal .circuit-reconnect__retry, #components-reconnect-modal .circuit-reconnect__reload { background: #2c3e50; border: 1px solid #2c3e50; border-radius: 0.35rem; color: #fff; cursor: pointer; font: inherit; font-weight: 600; padding: 0.4rem 0.9rem; } #components-reconnect-modal .circuit-reconnect__retry:hover, #components-reconnect-modal .circuit-reconnect__reload:hover { background: #1c2a36; } /* While an attempt is in flight (or paused, pending one) there is nothing to retry, and after a REJECTION or a failed RESUME a retry cannot succeed (the server no longer knows this circuit) — reload is the only honest action in every one of those states. */ #components-reconnect-modal.components-reconnect-show .circuit-reconnect__retry, #components-reconnect-modal.components-reconnect-paused .circuit-reconnect__retry, #components-reconnect-modal.components-reconnect-rejected .circuit-reconnect__retry, #components-reconnect-modal.components-reconnect-resume-failed .circuit-reconnect__retry { display: none; } #components-reconnect-modal :focus-visible { outline: 2px solid #2c3e50; outline-offset: 2px; } :root[data-theme="dark"] #components-reconnect-modal .circuit-reconnect__card { background: #22303c; color: #e8eef4; } :root[data-theme="dark"] #components-reconnect-modal .circuit-reconnect__retry, :root[data-theme="dark"] #components-reconnect-modal .circuit-reconnect__reload { background: #e8eef4; border-color: #e8eef4; color: #22303c; } :root[data-theme="dark"] #components-reconnect-modal .circuit-reconnect__retry:hover, :root[data-theme="dark"] #components-reconnect-modal .circuit-reconnect__reload:hover { background: #fff; } :root[data-theme="dark"] #components-reconnect-modal :focus-visible { outline-color: #e8eef4; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #components-reconnect-modal .circuit-reconnect__card { background: #22303c; color: #e8eef4; } :root:not([data-theme="light"]) #components-reconnect-modal .circuit-reconnect__retry, :root:not([data-theme="light"]) #components-reconnect-modal .circuit-reconnect__reload { background: #e8eef4; border-color: #e8eef4; color: #22303c; } :root:not([data-theme="light"]) #components-reconnect-modal :focus-visible { outline-color: #e8eef4; } }