/* ===== AltaFit Global Styles ===== */ html, body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; } /* ================================================================ THEME CSS VARIABLES — light and dark palettes for custom panels MudBlazor sets .mud-theme-dark on the element in dark mode. ================================================================ */ :root { /* Light mode (default) */ --rail-bg: #eeedf5; --rail-border: #dcdce8; --rail-hover: rgba(108, 63, 197, 0.08); --rail-active: rgba(108, 63, 197, 0.14); --rail-indicator: #6c3fc5; --subnav-bg: #f6f5fa; --subnav-border: #e0e0e8; --subnav-header-text: #2d2d3a; --subnav-group-text: #6c3fc5; --subnav-link-text: #5a5a6e; --subnav-link-active-text: #6c3fc5; --subnav-link-hover-bg: rgba(108, 63, 197, 0.06); --subnav-link-active-bg: rgba(108, 63, 197, 0.10); --content-bg: #f4f5f7; --overlay-bg: rgba(0, 0, 0, 0.2); --scrollbar-track: #eeeef2; --scrollbar-thumb: #c4c4d4; --scrollbar-thumb-hover: #a0a0b4; --auth-gradient: linear-gradient(135deg, #e8e6f0 0%, #d8dae8 50%, #c8cce0 100%); --auth-card-bg: #ffffff; } [data-theme="dark"] { /* Dark mode overrides */ --rail-bg: #111127; --rail-border: #2e2e4a; --rail-hover: rgba(124, 77, 255, 0.10); --rail-active: rgba(124, 77, 255, 0.18); --rail-indicator: #7c4dff; --subnav-bg: #16162b; --subnav-border: #2e2e4a; --subnav-header-text: #e0e0e0; --subnav-group-text: #7c4dff; --subnav-link-text: #b0b0c8; --subnav-link-active-text: #7c4dff; --subnav-link-hover-bg: rgba(124, 77, 255, 0.08); --subnav-link-active-bg: rgba(124, 77, 255, 0.12); --content-bg: #1a1a2e; --overlay-bg: rgba(0, 0, 0, 0.4); --scrollbar-track: #1e1e2d; --scrollbar-thumb: #424263; --scrollbar-thumb-hover: #5a5a8a; --auth-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); --auth-card-bg: #232340; } /* ===== Loading screen — shown while WASM boots ===== */ .loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: #1a1a2e; gap: 8px; } .loading-logo { opacity: 0.9; animation: logoPulse 2s ease-in-out infinite; } @keyframes logoPulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .loading-brand { font-family: 'Inter', sans-serif; font-size: 1.8rem; font-weight: 700; letter-spacing: 1.5px; color: #e0e0e0; margin-bottom: 16px; } .loading-spinner-wrap { position: relative; width: 6rem; height: 6rem; display: flex; align-items: center; justify-content: center; } .loading-progress { position: absolute; inset: 0; width: 100%; height: 100%; } .loading-progress circle { fill: none; stroke: #2e2e4a; stroke-width: 0.4rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: #7c4dff; 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: relative; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; color: #b0b0c8; z-index: 1; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "0%"); } .loading-subtitle { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: #6a6a8a; margin-top: 12px; letter-spacing: 0.3px; } /* ===== Blazor error overlay ===== */ #blazor-error-ui { background: #900; 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; color: white; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: #b32121; padding: 1rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; } /* ================================================================ APP SHELL — Icon Rail + Sub-Nav Panel + Main Content ================================================================ */ /* Container that sits below the fixed 64px top bar */ .app-shell { display: flex; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 1100; } /* ---- Icon Rail (far-left, always visible) ---- */ .icon-rail { width: 60px; min-width: 60px; background: var(--rail-bg); border-right: 1px solid var(--rail-border); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 8px 0; z-index: 1200; overflow-y: auto; transition: background 0.25s; } .icon-rail-top, .icon-rail-bottom { display: flex; flex-direction: column; align-items: center; width: 100%; } .icon-rail-brand { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-bottom: 4px; border-radius: 12px; transition: background 0.15s; } .icon-rail-brand:hover { background: var(--rail-hover); } .icon-rail-item { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 12px; margin: 2px 0; transition: background 0.15s; position: relative; } .icon-rail-item:hover { background: var(--rail-hover); } .icon-rail-item.active { background: var(--rail-active); } /* Active indicator bar on the left edge */ .icon-rail-item.active::before { content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; background: var(--rail-indicator); border-radius: 0 3px 3px 0; } /* ---- Sub-Navigation Panel (slides in from icon rail) ---- */ .sub-nav-panel { width: 220px; min-width: 220px; background: var(--subnav-bg); border-right: 1px solid var(--subnav-border); display: flex; flex-direction: column; overflow-y: auto; animation: slideIn 0.2s ease-out; z-index: 1150; transition: background 0.25s; } @keyframes slideIn { from { width: 0; min-width: 0; opacity: 0; } to { width: 220px; min-width: 220px; opacity: 1; } } .sub-nav-header { padding: 20px 20px 12px 20px; border-bottom: 1px solid var(--subnav-border); } .sub-nav-header .mud-typography { color: var(--subnav-header-text) !important; } .sub-nav-links { padding: 8px 0; flex: 1; } .sub-nav-link { padding: 8px 20px; cursor: pointer; transition: background 0.12s, padding-left 0.12s; } .sub-nav-link:hover { background: var(--subnav-link-hover-bg); padding-left: 24px; } .sub-nav-link.active { background: var(--subnav-link-active-bg); border-left: 3px solid var(--rail-indicator); padding-left: 17px; } /* ---- Overlay (closes sub-nav on mobile) ---- */ .sub-nav-overlay { display: none; } /* ---- Main Content Area ---- */ .app-main-content { flex: 1; overflow-y: auto; padding: 20px 24px; background: var(--content-bg); transition: background 0.25s; } /* ---- Auth pages (Login / Signup) background ---- */ .auth-page-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--auth-gradient); transition: background 0.25s; } .auth-card { background: var(--auth-card-bg) !important; transition: background 0.25s; } /* ================================================================ TOP BAR BRAND TEXT — fluid sizing ================================================================ */ .brand-text { font-size: clamp(0.75rem, 2vw, 1.25rem) !important; } /* ================================================================ RESPONSIVE — Mobile < 960px ================================================================ */ @media (max-width: 959.98px) { /* Icon rail shrinks slightly on mobile */ .icon-rail { width: 52px; min-width: 52px; } .icon-rail-item, .icon-rail-brand { width: 40px; height: 40px; } /* Sub-nav overlays content on mobile instead of pushing */ .sub-nav-panel { position: absolute; left: 52px; top: 0; bottom: 0; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5); } /* Show overlay backdrop on mobile */ .sub-nav-overlay { display: block; position: fixed; inset: 64px 0 0 0; background: var(--overlay-bg); z-index: 1100; } .app-main-content { padding: 16px; } } /* Hide brand text on very small screens */ @media (max-width: 480px) { .brand-text { display: none; } } /* ================================================================ PAGE & MISC ================================================================ */ /* Page transition */ .page-content { animation: fadeIn 0.25s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Scrollbar styling — theme-aware */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ================================================================ NOTIFICATION BADGE — shift the red dot down so it's not clipped ================================================================ */ .notification-badge .mud-badge { top: 0px !important; } /* ================================================================ NOTIFICATION PANEL ================================================================ */ .notification-popover { border-radius: 12px !important; overflow: hidden; } .notification-panel { max-height: 420px; display: flex; flex-direction: column; } .notification-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px 16px; } .notification-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; } .notification-list { overflow-y: auto; max-height: 360px; } .notification-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background 0.15s; position: relative; } .notification-item:hover { background: var(--subnav-link-hover-bg); } .notification-item.unread { background: var(--subnav-link-active-bg); } .notification-item.unread::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--rail-indicator); border-radius: 0 3px 3px 0; } .notification-icon { width: 36px; height: 36px; min-width: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--rail-hover); margin-top: 2px; } .notification-content { flex: 1; min-width: 0; } .notification-dismiss { opacity: 0; transition: opacity 0.15s; margin-top: -2px; } .notification-item:hover .notification-dismiss { opacity: 0.6; } .notification-dismiss:hover { opacity: 1 !important; }