v0.31.0

src/admin/web/style.css

@@ -165,8 +165,102 @@ html.app-loading {
     background: var(--bg)
 }
 
-html.app-loading body {
-    visibility: hidden
+/* The initial shell may be unavailable; never hide the boot screen itself. */
+html.app-loading .shell {
+    visibility: hidden;
+    pointer-events: none
+}
+
+.app-startup {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    display: grid;
+    place-items: center;
+    padding: 24px;
+    box-sizing: border-box;
+    background: var(--bg, #10151b);
+    color: var(--text, #edf2f7);
+    text-align: center
+}
+
+html:not(.app-loading) .app-startup {
+    display: none
+}
+
+.app-startup-card {
+    width: min(100%, 360px)
+}
+
+.app-startup-brand {
+    font: 700 29px var(--mono, monospace);
+    letter-spacing: -2px;
+    margin-bottom: 24px
+}
+
+.app-startup-brand span {
+    color: var(--accent, #65cfa2)
+}
+
+.app-startup-spinner {
+    box-sizing: border-box;
+    width: 40px;
+    height: 40px;
+    margin: 0 auto 22px;
+    border: 3px solid var(--line, #374352);
+    border-top-color: var(--accent, #65cfa2);
+    border-radius: 50%;
+    animation: app-startup-spin .8s linear infinite
+}
+
+.app-startup h2 {
+    margin: 0;
+    font-size: 19px;
+    font-weight: 600;
+    line-height: 1.4
+}
+
+.app-startup-message,
+.app-startup-recovery p {
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--muted, #b5c0cc)
+}
+
+.app-startup-recovery {
+    visibility: hidden;
+    animation: app-startup-reveal 0s linear 12s forwards
+}
+
+.app-startup-recovery .outline {
+    margin-top: 10px;
+    display: inline-flex
+}
+
+html.app-startup-failed .app-startup-spinner,
+html.app-startup-failed .app-startup-message {
+    display: none
+}
+
+html.app-startup-failed .app-startup-recovery {
+    visibility: visible;
+    animation: none
+}
+
+.app-startup-detail {
+    overflow-wrap: anywhere
+}
+
+@keyframes app-startup-spin {
+    to { transform: rotate(360deg) }
+}
+
+@keyframes app-startup-reveal {
+    to { visibility: visible }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .app-startup-spinner { animation: none }
 }
 
 body {
@@ -9966,3 +10060,67 @@ html[data-chart-style] :is(#workspace, dialog) svg polyline {
 .php-origin-errors > label { max-width: 430px; }
 .php-origin-errors > .check { margin: 0 !important; }
 .php-origin-errors .fine { margin: 0; }
+
+/* Keep the Overview refresh action on the same row as the page title. */
+.page-intro-copy,
+.page-intro-title-row {
+    min-width: 0;
+    width: 100%
+}
+
+.page-intro-title-row {
+    display: flex;
+    align-items: center;
+    gap: 10px
+}
+
+.page-intro-title-row h1 {
+    min-width: 0;
+    flex: 1 1 auto
+}
+
+.page-intro-title-row .overview-refresh {
+    flex: 0 0 auto;
+    margin-left: auto;
+    white-space: nowrap
+}
+
+@media (max-width: 480px) {
+    .page-intro-title-row h1 {
+        font-size: clamp(18px, 5vw, 24px);
+        letter-spacing: -.6px
+    }
+    .page-intro-title-row .overview-refresh {
+        padding: 7px 9px;
+        font-size: 11px
+    }
+}
+
+/* Keep the system API indicator next to its action, aligned as one unit. */
+.system-info-heading-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
+.system-info-heading-actions .pill { white-space: nowrap; }
+
+/* Contextual, keyboard-accessible curl examples next to the cache allowlist. */
+.cache-maintenance-help {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+}
+.cache-maintenance-help .subheading { margin: 0; }
+.cache-maintenance-info { position: static; flex-shrink: 0; }
+.cache-maintenance-info .metric-info-popover {
+    max-height: min(60vh, 420px);
+    overflow-y: auto;
+    width: min(440px, calc(100vw - 56px));
+}
+.cache-maintenance-info .metric-info-popover code {
+    display: block;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    padding: 7px 0;
+    font-size: 11px;
+    line-height: 1.55;
+}
+.cache-maintenance-info .metric-info-popover .fine + code { margin-top: 6px; }
+.cache-maintenance-info .metric-info-popover code + .fine { margin-top: 8px; }