/* ===================================================== SENAPI APP STYLES — the "Software" theme, applied to Blazor's own component structure rather than flattened into plain HTML: index.html's is the "wall" the whole app floats on. MainLayout.razor renders the ".window" (titlebar + frame-body) with a visible wall margin on every side — the one non-negotiable design principle carried over from the mockup. NavMenu.razor renders the sidebar's contents (nav items + the theme toggle). ===================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-mono); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2.5rem; background-color: var(--wall-base); background-image: radial-gradient(circle at 12% 18%, var(--wall-blot-a) 0%, transparent 38%), radial-gradient(circle at 82% 12%, var(--wall-blot-c) 0%, transparent 42%), radial-gradient(circle at 70% 80%, var(--wall-blot-a) 0%, transparent 45%), radial-gradient(circle at 20% 85%, var(--wall-blot-c) 0%, transparent 40%), radial-gradient(circle at 50% 50%, var(--wall-blot-b) 0%, transparent 60%), radial-gradient(circle at 95% 55%, var(--wall-blot-b) 0%, transparent 35%); background-blend-mode: soft-light, soft-light, soft-light, soft-light, overlay, soft-light; } #app { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } h1:focus { outline: none; } a { color: var(--icon-blue); } code { color: var(--icon-blue); } /* ========================== WINDOW ========================== */ .window { position: relative; width: 100%; max-width: 1400px; height: calc(100vh - 5rem); display: flex; flex-direction: column; background: var(--window-bg); border-radius: 16px; box-shadow: 0 20px 60px rgba(20, 30, 55, 0.35), 0 2px 8px rgba(20, 30, 55, 0.2); overflow: hidden; transition: background-color .25s ease; } .titlebar { flex: 0 0 auto; position: relative; height: 42px; display: flex; align-items: center; padding: 0 16px; background: var(--titlebar-bg); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2); } .dots { display: flex; gap: 8px; } .dot { width: 12px; height: 12px; border-radius: 50%; } .dot.red { background: var(--dot-red); } .dot.yellow { background: var(--dot-yellow); } .dot.green { background: var(--dot-green); } .titlebar-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--titlebar-text); } /* ========================== SHARED — blue-box treatment ========================== */ .blue-box { background: var(--blue-box-bg); border-radius: var(--uk-card-radius); transition: transform var(--uk-base) var(--uk-ease-out), box-shadow var(--uk-base) var(--uk-ease-out); } /* ========================== FRAME BODY ========================== */ .frame-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 16px; } /* ========================== TOPBAR ========================== */ .topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 8px; } .topbar-brand { padding-left: 8px; font-size: 13px; font-weight: 700; color: var(--text-dark); letter-spacing: .3px; } .topbar-menus { display: flex; gap: 6px; } .menu-dropdown { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12.5px; color: var(--text-muted); text-decoration: none; background: var(--blue-box-bg); border-radius: 999px; cursor: default; user-select: none; transition: background var(--uk-base) var(--uk-ease-out), color var(--uk-base) var(--uk-ease-out); } .menu-dropdown:hover { background: var(--dropdown-hover); color: var(--text-dark); } .menu-dropdown .chevron { font-size: 9px; color: var(--text-faint); } /* ========================== APP ROW (sidebar + content) ========================== */ .app-row { flex: 1 1 auto; min-height: 0; display: flex; gap: 16px; } /* ========================== SIDEBAR ========================== */ .sidebar { flex: 0 0 220px; display: flex; flex-direction: column; padding: 16px 12px; } .sidebar-nav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; } .sidebar-label { font-size: 10.5px; letter-spacing: 1.5px; color: var(--text-faint); text-transform: uppercase; padding: 6px 10px 8px; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text-muted); text-decoration: none; font-size: 13px; transition: transform var(--uk-fast) var(--uk-ease-out), background var(--uk-base) var(--uk-ease-out), color var(--uk-base) var(--uk-ease-out); } .sidebar-item .icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: var(--icon-blue-soft); display: flex; align-items: center; justify-content: center; font-size: 12px; } .sidebar-item.active { background: var(--dropdown-hover); color: var(--text-dark); } .sidebar-item.active .icon { background: var(--icon-blue); color: #1C2E4A; } .sidebar-item:hover { background: var(--dropdown-hover); transform: translateX(3px); } .sidebar-divider { height: 1px; margin: 10px 4px; background: var(--text-faint); opacity: .3; } /* ========================== SIDEBAR FOOTER — theme switch ========================== */ .sidebar-footer { flex: 0 0 auto; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--text-faint); } .theme-toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: none; border: none; border-radius: 10px; font-family: inherit; font-size: 12.5px; color: var(--text-muted); cursor: pointer; transition: transform var(--uk-fast) var(--uk-ease-out), background var(--uk-base) var(--uk-ease-out); } .theme-toggle:hover { background: var(--dropdown-hover); transform: translateX(3px); } .theme-toggle-icon { flex: 0 0 auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 13px; } .theme-toggle-label { flex: 1 1 auto; text-align: left; color: var(--text-dark); } .theme-toggle-switch { flex: 0 0 auto; position: relative; width: 34px; height: 19px; border-radius: 999px; background: var(--switch-track-off); transition: background var(--uk-base) var(--uk-ease-out); } :root[data-theme="dark"] .theme-toggle-switch { background: var(--switch-track-on); } .theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--switch-knob); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform var(--uk-base) var(--uk-ease-spring); } :root[data-theme="dark"] .theme-toggle-knob { transform: translateX(15px); } /* ========================== MAIN CONTENT Adapted from the mockup's centered placeholder box: real page content (headings, buttons, tables) needs normal top-aligned block flow and its own scroll region, not a single centered label. ========================== */ .main-content { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; } .content-area { padding: 20px 28px; color: var(--text-dark); } .content-area h1 { font-size: 1.5rem; margin: 0 0 .75rem; color: var(--text-dark); } .content-area p { color: var(--text-muted); } /* ========================== BUTTONS + TABLE (Bootstrap removed — Counter/Weather still use these class names, so they're restyled to fit the theme) ========================== */ .btn { display: inline-block; padding: 8px 18px; font-family: inherit; font-size: 13px; border: none; border-radius: 999px; background: var(--blue-box-bg); color: var(--text-dark); cursor: pointer; transition: transform var(--uk-fast) var(--uk-ease-out), background var(--uk-base) var(--uk-ease-out); } .btn:hover { background: var(--dropdown-hover); transform: translateY(-2px); } .btn:active { transform: scale(.97); } .btn-primary { background: var(--icon-blue); color: #1C2E4A; font-weight: 600; } .btn-primary:hover { background: var(--icon-blue); filter: brightness(1.08); } .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th, .table td { text-align: left; padding: 8px 12px; border-bottom: 1px dashed var(--text-faint); color: var(--text-dark); } .table th { color: var(--text-faint); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; font-weight: 600; } /* ========================== STATUS BAR ========================== */ .statusbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: var(--status-bar-height); padding: 0 10px; background: var(--statusbar-bg); color: var(--statusbar-text); font-size: 11px; } .statusbar-segments { display: flex; align-items: center; height: 100%; } .statusbar-item { display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 8px; cursor: default; user-select: none; transition: background .1s ease; } .statusbar-item:hover { background: var(--statusbar-hover); } /* ========================== FRAMEWORK CHROME (Blazor's own loading/error UI — kept functional, recolored to fit the theme instead of Bootstrap blue) ========================== */ #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; 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; } .blazor-error-boundary { background: #b32121; padding: 1rem; color: white; border-radius: 8px; } .blazor-error-boundary::after { content: "An error has occurred."; } .loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto 0 auto; } .loading-progress circle { fill: none; stroke: var(--skeleton-bg-strong); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--icon-blue); 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: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; font-family: var(--font-mono); } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } /* ========================== RESPONSIVE ========================== */ @media (max-width: 700px) { body { padding: 0; } .window { max-width: 100%; height: 100vh; border-radius: 0; } .app-row { flex-direction: column; } .sidebar { flex: 0 0 auto; } }