/* ============================================================ Lelware theme — drop-in on top of Bootstrap 5 Place at: wwwroot/css/lelware.css Load order in _ThemeStyles.cshtml: 1. bootstrap.min.css 2. lelware.css <-- THIS FILE (overrides) Requires on Layout. ============================================================ */ /* License-activation gate theme (marker-class based, reads the tokens below). Kept in its own file so a chromeless host (a module SPA) can ship its own copy with the same markers; @import MUST precede the rule blocks. */ @import url("license-gate.css"); :root { --bg-0:#0a0b0d; --bg-1:#0f1113; --bg-2:#141619; --bg-3:#1a1d21; --bg-4:#22262b; --border-1:#1f2226; --border-2:#2a2e34; --border-3:#3a4047; --fg-0:#f2f3f5; --fg-1:#c9ccd1; --fg-2:#8b9097; --fg-3:#5c6169; --fg-4:#3d4147; --accent: oklch(0.82 0.19 230); --accent-dim: oklch(0.82 0.19 230 / 0.14); --accent-ring: oklch(0.82 0.19 230 / 0.35); --accent-ink:#0a0b0d; --ok: oklch(0.78 0.16 155); --ok-dim: oklch(0.78 0.16 155 / 0.14); --warn: oklch(0.82 0.15 80); --warn-dim: oklch(0.82 0.15 80 / 0.14); --danger: oklch(0.72 0.18 25); --danger-dim: oklch(0.72 0.18 25 / 0.14); --info: oklch(0.78 0.12 235); --info-dim: oklch(0.78 0.12 235 / 0.14); --radius-1:4px; --radius-2:6px; --radius-3:10px; --radius-4:14px; --font-sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono:"Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; } /* --------- Base --------- */ html, body.lw { background: var(--bg-1); color: var(--fg-1); font-family: var(--font-sans); font-size: 13.5px; line-height: 1.45; -webkit-font-smoothing: antialiased; } body.lw .mono, .lw code, .lw pre, .lw .text-monospace { font-family: var(--font-mono); } body.lw a { color: var(--accent); text-decoration: none; } body.lw a:hover { color: var(--accent); filter: brightness(1.1); } body.lw ::-webkit-scrollbar { width:10px; height:10px; } body.lw ::-webkit-scrollbar-thumb { background:#2a2e34; border-radius:6px; border:2px solid var(--bg-1); } body.lw ::-webkit-scrollbar-track { background: transparent; } /* --------- Layout shell --------- */ body.lw #app-shell { display:flex; min-height:100vh; } body.lw #app-shell > main { flex:1; min-width:0; display:flex; flex-direction:column; } /* Cap reading width on wide screens so the eye doesn't have to sweep */ body.lw { --content-max: 1600px; } /* Content blocks: capped reading width, CENTERED in the main area. */ body.lw #app-shell > main > .section-header, body.lw #app-shell > main > .content-pad, body.lw #app-shell > main > .tab-bar, body.lw #app-shell > main > form, body.lw #app-shell > main > div:not(#editor) { width: 100%; max-width: var(--content-max); margin-left: auto; margin-right: auto; } /* Topbar is the exception — spans the full main width, edge to edge, regardless of the content reading-width cap. */ body.lw #app-shell > main > .topbar { width: 100%; max-width: none; margin: 0; } /* --------- Sidebar --------- */ .lw .sidenav { width: 232px; min-width:232px; background: var(--bg-0); border-right: 1px solid var(--border-1); display:flex; flex-direction:column; padding:14px 10px; position:sticky; top:0; height:100vh; } .lw .sidenav .proj-switch { display:flex; align-items:center; gap:10px; padding:8px 10px; background: var(--bg-2); border:1px solid var(--border-2); border-radius:8px; color: var(--fg-0); text-align:left; width:100%; margin-bottom:18px; cursor:pointer; } .lw .sidenav .proj-avatar { width:26px; height:26px; border-radius:6px; background: var(--accent); display:grid; place-items:center; flex-shrink:0; } .lw .sidenav .proj-avatar span { font-family: var(--font-mono); color: var(--accent-ink); font-size:11px; font-weight:700; } .lw .sidenav .proj-name { font-size:12.5px; font-weight:600; color: var(--fg-0); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lw .sidenav .proj-id { font-family: var(--font-mono); font-size:10.5px; color: var(--fg-3); } .lw .sidenav .env-row { padding:0 10px 10px; display:flex; align-items:center; gap:6px; } .lw .sidenav .env-label { font-size:10.5px; color: var(--fg-3); text-transform:uppercase; letter-spacing:.08em; font-weight:500; } .lw .sidenav .nav { display:flex; flex-direction:column; gap:1px; list-style:none; padding:0; margin:0; } .lw .sidenav .nav-link { display:flex; align-items:center; gap:10px; padding:7px 10px; background: transparent; border:1px solid transparent; border-radius:6px; color: var(--fg-1); font: 500 12.5px/1 var(--font-sans); text-decoration: none; position:relative; } .lw .sidenav .nav-link:hover { background: var(--bg-3); color: var(--fg-0); } .lw .sidenav .nav-link i { color: var(--fg-2); width:14px; font-size:13px; } .lw .sidenav .nav-link.active { background: var(--bg-3); border-color: var(--border-2); color: var(--fg-0); font-weight:600; } .lw .sidenav .nav-link.active::before { content:""; position:absolute; left:-11px; top:6px; bottom:6px; width:2px; background: var(--accent); border-radius:2px; } .lw .sidenav .nav-link.active i { color: var(--accent); } .lw .sidenav hr { border-color: var(--border-1); margin:12px 0; } .lw .sidenav-footer { margin-top:auto; padding:10px 10px 0; border-top:1px solid var(--border-1); } .lw .status-dot { display:inline-block; width:7px; height:7px; border-radius:4px; background: var(--ok); box-shadow: 0 0 6px var(--ok); margin-right:8px; } /* --------- Topbar --------- */ .lw .topbar { height:48px; border-bottom:1px solid var(--border-1); background: var(--bg-1); display:flex; align-items:center; padding:0 18px; gap:14px; flex-shrink:0; } .lw .topbar .breadcrumb { display:flex; align-items:center; gap:7px; min-width:0; margin:0; padding:0; background:transparent; } .lw .topbar .breadcrumb .sep { color: var(--fg-4); } .lw .topbar .breadcrumb a, .lw .topbar .breadcrumb span { font-size:12.5px; color: var(--fg-2); font-weight:500; text-decoration:none; } .lw .topbar .breadcrumb .active { color: var(--fg-0); font-weight:600; } .lw .search-trigger { display:inline-flex; align-items:center; gap:10px; height:30px; padding:0 10px; background: var(--bg-2); border:1px solid var(--border-2); border-radius:6px; color: var(--fg-2); font: 500 12px/1 var(--font-sans); cursor:pointer; } /* --------- Buttons --------- */ .lw .btn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius: var(--radius-2); background: var(--bg-3); border:1px solid var(--border-2); color: var(--fg-0); font:500 12.5px/1 var(--font-sans); letter-spacing:-0.005em; cursor:pointer; transition: background .12s, border-color .12s, transform .05s; white-space:nowrap; } .lw .btn:hover { background:#20242a; border-color: var(--border-3); color: var(--fg-0); } .lw .btn:active { transform: translateY(.5px); } .lw .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .lw .btn-primary:hover { background: oklch(0.86 0.19 230); color: var(--accent-ink); } .lw .btn-ghost { background: transparent; border-color: transparent; color: var(--fg-1); } .lw .btn-ghost:hover { background: var(--bg-3); color: var(--fg-0); } .lw .btn-danger, .lw .btn-outline-danger { background: var(--danger); color:#1a0606; border-color: transparent; } .lw .btn-danger:hover { background: oklch(0.76 0.18 25); color:#1a0606; } .lw .btn-success { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .lw .btn-secondary { background: var(--bg-3); color: var(--fg-0); border-color: var(--border-2); } /* Loading state — hides button text and shows a spinner */ .lw .btn.loading { position:relative; color: transparent !important; pointer-events:none; } .lw .btn.loading > * { visibility: hidden; } .lw .btn.loading::after { content:""; position:absolute; inset:0; margin:auto; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-top-color: transparent; color: var(--accent-ink); animation: lw-spin .7s linear infinite; } .lw .btn-danger.loading::after, .lw .btn-ghost.loading::after, .lw .btn-secondary.loading::after { color: var(--fg-0); } .lw .btn.disabled, .lw .btn:disabled { opacity:.55; pointer-events:none; } @keyframes lw-spin { to { transform: rotate(360deg); } } .lw .btn-sm { height:26px; padding:0 10px; font-size:12px; } .lw .btn-icon { width:28px; padding:0; justify-content:center; } .lw .btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:none; } /* --------- Cards --------- */ .lw .card { background: var(--bg-2); border:1px solid var(--border-1); border-radius: var(--radius-3); color: var(--fg-1); } .lw .card-header { background: transparent; border-bottom:1px solid var(--border-1); padding:14px 18px; font:600 13px/1 var(--font-sans); color: var(--fg-0); } .lw .card-body { padding:18px; } /* BS4 doesn't know g-* gutter utilities — mimic BS5 gaps on .row.g-N */ .lw .row.g-1 { margin-left:-4px; margin-right:-4px; } .lw .row.g-1 > [class*="col"] { padding-left:4px; padding-right:4px; margin-bottom:8px; } .lw .row.g-2 { margin-left:-6px; margin-right:-6px; } .lw .row.g-2 > [class*="col"] { padding-left:6px; padding-right:6px; margin-bottom:12px; } .lw .row.g-3 { margin-left:-10px; margin-right:-10px; } .lw .row.g-3 > [class*="col"] { padding-left:10px; padding-right:10px; margin-bottom:20px; } .lw .row.g-1 > [class*="col"]:last-child, .lw .row.g-2 > [class*="col"]:last-child, .lw .row.g-3 > [class*="col"]:last-child { margin-bottom:0; } .lw .mb-2 { margin-bottom:12px !important; } /* --------- Stat card --------- */ .lw .stat-card { padding:18px; display:flex; flex-direction:column; gap:8px; } .lw .stat-label { font-size:11px; color: var(--fg-3); text-transform:uppercase; letter-spacing:.08em; font-weight:500; } .lw .stat-value { font:600 24px/1.1 var(--font-sans); color: var(--fg-0); letter-spacing:-0.02em; } .lw .stat-sub { font-size:12px; color: var(--fg-2); } .lw .stat-delta { font-size:11px; font-weight:600; font-family: var(--font-mono); } .lw .stat-delta.up { color: var(--ok); } .lw .stat-delta.down { color: var(--danger); } /* --------- Tables --------- */ .lw .table, .lw table.table { --bs-table-bg: transparent; --bs-table-color: var(--fg-1); --bs-table-border-color: var(--border-1); --bs-table-hover-bg: var(--bg-3); --bs-table-hover-color: var(--fg-0); --bs-table-striped-bg: transparent; color: var(--fg-1); font-size:12.5px; margin:0; } .lw .table > :not(caption) > * > * { padding:10px 14px; border-top: 0; border-bottom: 1px solid var(--border-1); } .lw .table th, .lw .table td { border-top: 0 !important; } .lw .table thead th { text-align:left; padding:8px 14px; font:500 11px/1 var(--font-sans); letter-spacing:.04em; text-transform:uppercase; color: var(--fg-3); background: var(--bg-2); border-bottom:1px solid var(--border-1); position:sticky; top:0; z-index:1; } .lw .table tbody tr { transition: background .1s; } .lw .table tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); } .lw .table tbody tr:hover { background: var(--bg-3); } .lw .table tbody tr:hover td { color: var(--fg-0); } .lw .table tbody tr:hover .row-actions { opacity:1; } .lw .table tbody tr:last-child td { border-bottom: none; } .lw .row-actions { opacity:0; display:inline-flex; gap:4px; transition: opacity .1s; } /* --------- Pills (replace badge) --------- */ .lw .pill { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font:500 11px/1.4 var(--font-sans); letter-spacing:.01em; border:1px solid transparent; } .lw .pill .dot { width:6px; height:6px; border-radius:50%; background: currentColor; } .lw .pill.ok { color: var(--ok); background: var(--ok-dim); } .lw .pill.warn { color: var(--warn); background: var(--warn-dim); } .lw .pill.danger { color: var(--danger); background: var(--danger-dim); } .lw .pill.info { color: var(--info); background: var(--info-dim); } .lw .pill.accent { color: var(--accent); background: var(--accent-dim); } .lw .pill.neutral { color: var(--fg-2); background: var(--bg-3); border-color: var(--border-2); } /* --------- Forms --------- */ .lw .form-control, .lw .form-select { background: var(--bg-2); border:1px solid var(--border-2); color: var(--fg-0); border-radius: var(--radius-2); font:400 12.5px/1 var(--font-sans); height:30px; padding:0 10px; } .lw .form-control::placeholder { color: var(--fg-3); } .lw .form-control:focus, .lw .form-select:focus { background: var(--bg-2); color: var(--fg-0); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .lw .form-label { font-size:12px; font-weight:500; color: var(--fg-1); margin-bottom:6px; } .lw .form-check-input { background-color: var(--bg-4); border-color: var(--border-2); } .lw .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .lw .form-switch .form-check-input:checked { background-color: var(--accent); } /* --------- Modal --------- */ .lw .modal-backdrop.show { opacity:.55; background:#000; } .lw .modal-content, .lw .modal-content.bg-secondary, .lw .modal-content.bg-default, .lw .modal-content.bg-dark { background: var(--bg-2) !important; border:1px solid var(--border-2); border-radius:12px; box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25); color: var(--fg-1); } .lw .modal-header .close { color: var(--fg-2); opacity:1; background:transparent; border:none; font-size:20px; line-height:1; } .lw .modal-header .close:hover { color: var(--fg-0); } .lw .modal label, .lw .modal .form-control-label { color: var(--fg-2); font:500 11px/1.4 var(--font-sans); letter-spacing:.02em; text-transform:uppercase; margin-bottom:6px; display:block; } .lw .modal .form-control, .lw .modal textarea.form-control, .lw .modal select.form-control { width:100%; height:auto; background: var(--bg-1); color: var(--fg-0); border:1px solid var(--border-2); border-radius:6px; padding:8px 10px; font:400 13px/1.4 var(--font-sans); } .lw .modal textarea.form-control { min-height:72px; } .lw .modal .form-control:focus { outline:none; border-color: var(--accent); box-shadow:0 0 0 3px var(--accent-ring); } .lw .modal .form-group { margin-bottom:14px; } .lw .modal .input-group { display:flex; width:100%; } .lw .modal .custom-control-label { text-transform:none; letter-spacing:0; font-size:13px; color: var(--fg-1); } .lw .modal-header { padding:16px 20px; border-bottom:1px solid var(--border-1); font:600 14px/1 var(--font-sans); color: var(--fg-0); } .lw .modal-header .btn-close { filter: invert(1) brightness(.6); opacity:1; } .lw .modal-body { padding:20px; } .lw .modal-footer { padding:12px 20px; border-top:1px solid var(--border-1); background: var(--bg-1); gap:8px; } /* --------- Kbd --------- */ .lw .kbd { display:inline-flex; align-items:center; min-width:18px; height:18px; padding:0 5px; font:500 10.5px/1 var(--font-mono); color: var(--fg-2); background: var(--bg-3); border:1px solid var(--border-2); border-bottom-width:2px; border-radius:4px; } /* --------- Section header --------- */ .lw .section-header { display:flex; align-items:flex-end; justify-content:space-between; padding:24px 28px 18px; gap:18px; } .lw .section-header h1 { margin:0; font:600 22px/1.15 var(--font-sans); letter-spacing:-0.015em; color: var(--fg-0); } .lw .section-header .desc { margin-top:6px; color: var(--fg-2); font-size:13px; } .lw .section-header .actions { display:flex; align-items:center; gap:8px; } .lw .content-pad { padding:0 28px 28px; } /* --------- Tabs --------- */ .lw .tab-bar { padding:0 28px; display:flex; gap:4px; border-bottom:1px solid var(--border-1); } .lw .tab-bar .tab { background: transparent; border:none; padding:10px 14px; font-size:13px; font-weight:500; color: var(--fg-2); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; } .lw .tab-bar .tab.active { color: var(--fg-0); border-bottom-color: var(--accent); } .lw .tab-bar .tab .count { font-family: var(--font-mono); font-size:11px; color: var(--fg-3); } /* AJAX tab shells (Products / Profile / Players edit). No focus ring — these are mouse-driven tab switchers and the outline looked out of place. */ .tab-btn { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--fg-2); padding: 8px 14px; font: 500 13px/1 var(--font-sans); cursor: pointer; transition: color .12s, border-color .12s; outline: none; } .tab-btn:hover { color: var(--fg-0); } .tab-btn:focus, .tab-btn:focus-visible { outline: none; box-shadow: none; } .tab-btn.active { color: var(--fg-0); border-bottom-color: var(--accent); } /* --------- Avatar --------- */ .lw .avatar { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:22px; background: var(--bg-3); color: var(--fg-1); font:600 10px/1 var(--font-mono); text-transform:uppercase; flex-shrink:0; } .lw .avatar.lg { width:44px; height:44px; font-size:15px; } /* --------- Progress bar (license distribution) --------- */ .lw .dist-bar { display:flex; height:6px; border-radius:3px; overflow:hidden; background: var(--bg-3); } .lw .dist-bar > span { display:block; height:100%; } /* --------- Code block --------- */ .lw .code { background: var(--bg-0); border:1px solid var(--border-1); border-radius:8px; padding:12px; font-family: var(--font-mono); font-size:11.5px; line-height:1.55; color: var(--fg-1); white-space: pre; overflow-x: auto; } /* --------- Monaco editor wrapper --------- */ .lw #editor { background: var(--bg-0); border:1px solid var(--border-1); border-radius:8px; } /* --------- Utility --------- */ .lw .text-muted-2 { color: var(--fg-2) !important; } .lw .text-muted-3 { color: var(--fg-3) !important; } .lw .text-fg-0 { color: var(--fg-0) !important; } .lw .text-accent { color: var(--accent) !important; } .lw .uppercase-label { font-size:10.5px; color: var(--fg-3); text-transform:uppercase; letter-spacing:.08em; font-weight:500; } .lw .bg-bg-0 { background: var(--bg-0) !important; } .lw .bg-bg-2 { background: var(--bg-2) !important; } .lw hr { border-color: var(--border-1); } /* --------- Auth (Login / Register) --------- */ body.lw .auth-shell { min-height: 100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 32px 16px; gap: 20px; background: radial-gradient(circle at 30% 20%, rgba(56,189,248,0.06), transparent 50%), radial-gradient(circle at 70% 80%, rgba(56,189,248,0.04), transparent 50%); } .lw .auth-brand { display:flex; align-items:center; gap:10px; } .lw .auth-brand-name { font:600 14px/1 var(--font-sans); letter-spacing:-0.01em; color: var(--fg-0); } .lw .auth-card { width:100%; max-width:380px; padding:28px; background: var(--bg-2); border:1px solid var(--border-1); border-radius: var(--radius-3); } .lw .auth-card h1 { margin:0 0 4px; font:600 18px/1.2 var(--font-sans); letter-spacing:-0.01em; color: var(--fg-0); } .lw .auth-card .auth-sub { color: var(--fg-2); font-size:13px; margin-bottom:20px; } .lw .auth-card .form-group { margin-bottom:14px; } .lw .auth-card label { display:block; margin-bottom:6px; font:500 11px/1.4 var(--font-sans); letter-spacing:.02em; text-transform:uppercase; color: var(--fg-2); } .lw .auth-card .form-control { width:100%; height:36px; background: var(--bg-1); color: var(--fg-0); border:1px solid var(--border-2); border-radius:6px; padding:0 10px; font:400 13px/1.4 var(--font-sans); } .lw .auth-card .form-control:focus { outline:none; border-color: var(--accent); box-shadow:0 0 0 3px var(--accent-ring); } .lw .auth-card .btn-block { width:100%; height:36px; } .lw .auth-card .field-validation-error, .lw .auth-card .text-danger, .lw .auth-card .invalid-feedback { display:block; color: var(--danger); font-size:11.5px; margin-top:4px; } /* Native-checkbox row, accent-tinted. The portal's single checkbox style — reused in modals (custom-page settings, setting editor) so every checkbox matches the login one. Qualified as `label.auth-check` so it out-specifies `.lw .modal label` (line ~280), which would otherwise force display:block + uppercase + margin and break the row alignment inside modals. align-items is flex-start (+1px nudge) so the box stays put against the first line even when a hint wraps. Login keeps its own bottom spacing below. */ .lw label.auth-check { display:flex; align-items:flex-start; gap:8px; margin:0; font:500 12.5px/1.5 var(--font-sans); letter-spacing:0; text-transform:none; color: var(--fg-2); cursor:pointer; } .lw label.auth-check input { accent-color: var(--accent); flex-shrink:0; margin:0; margin-top:2px; } .lw .auth-card label.auth-check { margin-bottom:16px; } .lw .auth-card .auth-links { margin-top:14px; display:flex; justify-content:space-between; font-size:12px; } .lw .auth-card .auth-links a { color: var(--fg-2); } .lw .auth-card .auth-links a:hover { color: var(--accent); } .lw .auth-card .alert-danger { background: rgba(255,80,80,0.08); border:1px solid rgba(255,80,80,0.25); color: var(--danger); padding:10px 12px; border-radius:6px; font-size:12.5px; margin-bottom:14px; } .lw .auth-footer { color: var(--fg-3); font-size:11.5px; display:flex; gap:8px; align-items:center; } .lw .auth-footer a { color: var(--fg-2); } .lw .auth-footer .sep { color: var(--fg-4); } /* --------- User menu (avatar foldout) --------- */ .lw .user-menu { position: relative; } .lw .user-menu-trigger { border: none; padding: 0; cursor: pointer; } .lw .user-menu-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; z-index: 1000; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--radius-2); padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25); } .lw .user-menu.open .user-menu-dropdown { display: block; } .lw .user-menu-header { padding: 8px 10px 6px; border-bottom: 1px solid var(--border-1); margin-bottom: 4px; } .lw .user-menu-name { display: block; font: 600 12.5px/1.2 var(--font-sans); color: var(--fg-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lw .user-menu form { margin: 0; } .lw .user-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: none; background: transparent; font: 400 13px/1 var(--font-sans); color: var(--fg-1); text-align: left; border-radius: var(--radius-1); cursor: pointer; text-decoration: none; } .lw .user-menu-item:hover { background: var(--bg-3); color: var(--fg-0); } .lw .user-menu-item i { width: 14px; font-size: 12px; color: var(--fg-3); } .lw .user-menu-item:hover i { color: var(--fg-1); } .lw .user-menu-sep { height: 1px; background: var(--border-1); margin: 4px 0; } .lw .user-menu-danger, .lw .user-menu-danger i { color: var(--danger); } .lw .user-menu-danger:hover { background: var(--danger-dim); color: var(--danger); } .lw .user-menu-danger:hover i { color: var(--danger); } /* --------- Error banner (reusable, layout-level) --------- */ .lw .error-banner { display:flex; align-items:center; gap:10px; margin:14px 28px 0; padding:10px 14px; background: rgba(255,80,80,0.10); border:1px solid rgba(255,80,80,0.30); border-radius: var(--radius-2); color: var(--danger); font-size:13px; } .lw .error-banner > i { font-size:13px; flex-shrink:0; } .lw .error-banner-msg { flex:1; } .lw .error-banner-close { background:transparent; border:none; color: var(--danger); font-size:18px; line-height:1; cursor:pointer; opacity:.7; padding:0 4px; } .lw .error-banner-close:hover { opacity:1; } /* kill Bootstrap gradients on btn that sneak in via Argon */ .lw .bg-gradient-primary, .lw .bg-gradient-success, .lw .bg-gradient-info, .lw .bg-gradient-warning, .lw .bg-gradient-danger { background-image: none !important; } /* --------- Error / status pages (404, 4xx, 500) --------- */ .lw .error-shell { min-height: calc(100vh - 48px); display:flex; align-items:center; justify-content:center; padding: 32px 20px; } .lw .error-card { width:100%; max-width: 460px; text-align:center; background: var(--bg-1); border:1px solid var(--border-1); border-radius: var(--radius-4); padding: 40px 36px; } .lw .error-code { font: 700 64px/1 var(--font-mono); letter-spacing:-0.03em; color: var(--accent); margin-bottom: 14px; } .lw .error-title { font: 600 19px/1.3 var(--font-sans); letter-spacing:-0.01em; color: var(--fg-0); margin: 0 0 10px; } .lw .error-text { font: 400 13.5px/1.6 var(--font-sans); color: var(--fg-2); margin: 0 0 6px; } .lw .error-path { margin: 14px 0 0; font-size: 12px; color: var(--fg-3); } .lw .error-path-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: var(--fg-4); margin-bottom:4px; } .lw .error-path code { font: 500 12px/1.5 var(--font-mono); color: var(--fg-2); word-break: break-all; } .lw .error-actions { display:flex; gap:10px; justify-content:center; margin-top: 26px; } /* --------- Custom page layout --------- */ /* Default page content padding (sidenav/topbar handled by #app-shell rules) */ .lw .cp-content { padding: 28px 32px; max-width: var(--content-max, 1400px); margin: 0 auto; } /* Page-settings toggles — stacked switches with a hint line */ .lw .cp-toggles { display:flex; flex-direction:column; gap:10px; } .lw .cp-hint { color: var(--fg-3); font-size:12px; text-transform:none; letter-spacing:0; } /* Fixed project-base prefix shown before the editable route input */ .lw .cp-route-prefix { display:flex; align-items:center; padding:0 8px; white-space:nowrap; background: var(--bg-3); color: var(--fg-2); border:1px solid var(--border-2); border-right:none; border-radius:6px 0 0 6px; font-size:12.5px; } .lw .input-group .cp-route-prefix + .form-control { border-top-left-radius:0; border-bottom-left-radius:0; } /* Tint the BS4 custom-switch with the accent colour so toggles match the theme */ .lw .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--accent) !important; border-color: var(--accent) !important; } .lw .custom-control-label::before { background-color: var(--bg-4); border-color: var(--border-2); } /* Per-block spacing */ .lw .cp-block { margin-bottom: 20px; } .lw .cp-block-heading h1,.lw .cp-block-heading h2,.lw .cp-block-heading h3,.lw .cp-block-heading h4 { color: var(--fg-0); font-family: var(--font-sans); font-weight: 700; } .lw .cp-block-richtext p { color: var(--fg-1); line-height: 1.7; } .lw .cp-block-image img { max-width: 100%; border-radius: var(--radius-3); } .lw .cp-image-caption { font-size: 12px; color: var(--fg-3); margin-top: 6px; } .lw .cp-block-button { display: flex; } .lw .cp-block-divider hr { border-color: var(--border-2); }