/* ── Custom fonts ─────────────────────────────────────────────── */ @font-face { font-family: 'Tommy Soft'; src: url('fonts/Tommy Soft Light.otf') format('opentype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Tommy Soft'; src: url('fonts/Tommy Soft Regular.otf') format('opentype'); font-weight: 400; font-style: normal; } /* Overrides MudBlazor's bundled Material Icons with the local copy (site.css loads after MudBlazor.min.css) */ @font-face { font-family: 'Material Icons'; src: url('fonts/MaterialIcons_Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } /* Tommy Soft everywhere — Light (300) default, Regular (400) for bold/headings */ html, body { font-family: 'Tommy Soft', sans-serif !important; font-weight: 300; } body *:not(.material-icons) { font-family: 'Tommy Soft', sans-serif !important; } /* ── Blazor error overlay ──────────────────────────────────────── */ /* Blazor error overlay */ #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 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; } /* ── Full-page radial gradient background ───────────────────── */ /* Light: near-white glow (#FAFAFA) → light grey (#E0E0E0) */ /* Dark: dark grey glow (#252830) → near-black grey (#0E0E11) */ /* data-bs-theme set on by both _Host.cshtml and Identity _Layout.cshtml */ html { min-height: 100%; background: radial-gradient(circle at 50% 40%, #FAFAFA 0%, #E0E0E0 100%) no-repeat fixed; } @media (prefers-color-scheme: dark) { html { background: radial-gradient(circle at 50% 50%, #252830 0%, #0E0E11 100%) no-repeat fixed; } } html[data-bs-theme="light"] { background: radial-gradient(circle at 50% 40%, #FAFAFA 0%, #E0E0E0 100%) no-repeat fixed; } html[data-bs-theme="dark"] { background: radial-gradient(circle at 50% 50%, #252830 0%, #0E0E11 100%) no-repeat fixed; } /* MudBlazor paints solid backgrounds on these layers — make them transparent so the html gradient shows through on Blazor pages */ body, .mud-layout, .mud-main-content { background: transparent !important; } /* ── Bootstrap link color override (Identity pages) ─────────── */ a { color: #202020; } a:hover { color: #404040; } html[data-bs-theme="dark"] a { color: #E0E0E0; } html[data-bs-theme="dark"] a:hover { color: #C8C8C8; } /* ── Bootstrap btn-primary override (Identity pages) ────────── */ /* Replaces Bootstrap's default blue with the app's primary color palette */ .btn-primary { background-color: #202020; border-color: #202020; color: #FFFFFF; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background-color: #404040; border-color: #404040; color: #FFFFFF; } .btn-primary:disabled, .btn-primary.disabled { background-color: #ACACAC; border-color: #ACACAC; color: #FFFFFF; } html[data-bs-theme="dark"] .btn-primary { background-color: #E0E0E0; border-color: #E0E0E0; color: #1F1F1F; } html[data-bs-theme="dark"] .btn-primary:hover, html[data-bs-theme="dark"] .btn-primary:focus, html[data-bs-theme="dark"] .btn-primary:active { background-color: #C8C8C8; border-color: #C8C8C8; color: #1F1F1F; } /* ── Transparent surface for app content cards only ─────────── */ /* .app-card is applied manually to content MudPaper elements. */ /* Menus, dialogs, popovers, pickers are left untouched. */ /* overflow: visible allows filter drop-shadow on img children. */ .app-card { background-color: rgba(255, 255, 255, 0.72) !important; overflow: visible !important; } html[data-bs-theme="dark"] .app-card { background-color: rgba(255, 255, 255, 0.07) !important; } @media (prefers-color-scheme: dark) { html:not([data-bs-theme="light"]) .app-card { background-color: rgba(255, 255, 255, 0.07) !important; } } /* App-like cursor and caret: suppress I-beam and blinking insertion caret globally */ body { cursor: default; caret-color: transparent; } input, textarea, [contenteditable] { cursor: text; caret-color: auto; } /* Prevent text-selection I-beam cursor on access code list items */ .access-code-item, .access-code-item * { cursor: pointer !important; user-select: none; } /* Monospace display for MQTT message payloads */ .message-payload { font-family: monospace; white-space: pre-wrap; word-break: break-all; } /* ── Blazor reconnection overlay ─────────────────────────────── */ #components-reconnect-modal { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: center; justify-content: center; } #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: flex; } .reconnect-panel { background: rgba(36, 36, 40, 0.92); color: #f0f0f0; border-radius: 12px; padding: 2rem 2.5rem; text-align: center; max-width: 360px; font-family: 'Tommy Soft', sans-serif; } .reconnect-msg { display: none; } #components-reconnect-modal.components-reconnect-show .reconnect-msg-show, #components-reconnect-modal.components-reconnect-failed .reconnect-msg-failed, #components-reconnect-modal.components-reconnect-rejected .reconnect-msg-rejected { display: block; } .reconnect-reload { display: inline-block; margin-top: 0.75rem; color: #90caf9; font-weight: 500; text-decoration: none; } .reconnect-reload:hover { text-decoration: underline; } /* ── History / log secondary text — silver/grey instead of amber ─ */ .log-secondary { color: var(--mud-palette-text-secondary) !important; } /* ── Snackbar: bottom-center, semi-transparent ───────────────── */ .mud-snackbar-item .mud-alert { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Success → neutral grey instead of green */ .mud-snackbar-item .mud-alert-filled-success { background-color: rgba(75, 80, 84, 0.5) !important; color: #ffffff !important; } /* Info → same neutral grey as success MudBlazor 9.x applies mud-theme-info directly on .mud-snackbar (not inside mud-alert-filled-info), so the ID selector is needed to beat mud-theme-info's own !important rule */ .mud-snackbar-item .mud-alert-filled-info, #mud-snackbar-container .mud-snackbar.mud-theme-info { background-color: rgba(75, 80, 84, 0.5) !important; color: #ffffff !important; } .mud-snackbar-item .mud-alert-filled-warning { background-color: rgba(185, 120, 20, 0.5) !important; } .mud-snackbar-item .mud-alert-filled-error { background-color: rgba(175, 45, 35, 0.5) !important; }