/* /Components/Layout/MainLayout.razor.rz.scp.css */ /* ───────────────────────────────────────────────────────────────────────────── HORIZON SHELL — sidebar + top bar (spec 029, US1) Tokens come from six18.css; light/dark switch via . ───────────────────────────────────────────────────────────────────────────── */ .hz-layout[b-ms61e5j75x] { display: flex; height: 100vh; background: var(--hz-bg); color: var(--hz-text); overflow: hidden; } /* ── Sidebar ─────────────────────────────────────────────────────────────────── */ /* 224px + zero horizontal padding: nav rows run edge to edge so the active item's gold rule sits flush against the sidebar edge, as in the mockup. */ .hz-sidebar[b-ms61e5j75x] { flex: 0 0 224px; width: 224px; display: flex; flex-direction: column; background: var(--hz-sidebar); border-right: 1px solid var(--hz-border); overflow-y: auto; z-index: 30; } .hz-brand[b-ms61e5j75x] { display: flex; align-items: center; justify-content: center; padding: 1.15rem 1rem 1rem 1rem; border-bottom: 1px solid var(--hz-border); color: var(--hz-text); text-decoration: none; } /* Full 618 lockup, stacked as in the original logo (BrandLockup renders the mark inline so the digits' currentColor follows --hz-text in both modes). */ .hz-brand[b-ms61e5j75x] .hz-lockup { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; } .hz-brand[b-ms61e5j75x] .hz-lockup__mark { width: 8.75rem; height: auto; } .hz-brand[b-ms61e5j75x] .hz-lockup__wordmark { font-family: var(--hz-font-display); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.42em; text-indent: 0.42em; color: var(--hz-text); } .hz-nav[b-ms61e5j75x] { display: flex; flex-direction: column; gap: 0; padding: 0.5rem 0; flex: 1; } /* Re-homed nav items keep their original .botley-nav__link class (rendered both directly and by child components, so ::deep is required) — restyled here for a vertical sidebar. */ /* Nav items follow the approved mockup: quiet 500-weight labels at body size, a fixed icon gutter so the labels align, and a 2px gold rule on the active item rather than a heavy rounded bar. Spec 078 retuned these from the spec-029 shell, which ran a size and two weights heavier than the design. */ .hz-nav[b-ms61e5j75x] .botley-nav__link { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 1rem; border-left: 2px solid transparent; color: var(--hz-text-muted); text-decoration: none; font-weight: 500; font-size: 0.93rem; background: transparent; border-top: none; border-right: none; border-bottom: none; width: 100%; text-align: left; cursor: pointer; } .hz-nav[b-ms61e5j75x] .botley-nav__link:hover { color: var(--hz-text); background: rgba(255, 255, 255, 0.02); } :root[data-appearance="light"] .hz-nav[b-ms61e5j75x] .botley-nav__link:hover { background: rgba(0, 0, 0, 0.03); } .hz-nav[b-ms61e5j75x] .botley-nav__link.active { color: var(--hz-text); background: var(--hz-brand-soft); border-left-color: var(--hz-brand); font-weight: 600; } /* Icon gutter — fixed width so labels line up whether or not an item has an icon. */ .hz-nav[b-ms61e5j75x] .botley-nav__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; flex: none; font-size: 1.05rem; line-height: 1; color: var(--hz-text-faint); } /* Radzen sizes .rzi at its own scale; pin it to the gutter so icons don't overpower the label they sit beside. */ .hz-nav[b-ms61e5j75x] .botley-nav__icon .rzi { font-size: 1.05rem; line-height: 1; width: auto; height: auto; } .hz-nav[b-ms61e5j75x] .botley-nav__link:hover .botley-nav__icon { color: var(--hz-text-muted); } .hz-nav[b-ms61e5j75x] .botley-nav__link.active .botley-nav__icon { color: var(--hz-brand); } /* Trading sub-group (Order Stats dropdown): slot links indent to line up under the parent's label, past the icon gutter. */ .hz-nav[b-ms61e5j75x] .trading-nav__slot { font-size: 0.86rem; padding-left: 2.85rem; } /* Chevron sits at the far end of the toggle row, away from the label. */ .hz-nav[b-ms61e5j75x] .trading-nav__chevron { margin-left: auto; font-size: 0.75rem; color: var(--hz-text-faint); } /* Coinbase links live in their own labeled group, divided from the trading items above. */ .hz-nav[b-ms61e5j75x] .hz-nav__section { display: flex; flex-direction: column; gap: 0; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--hz-border); } /* Collapse a role section whose child nav components rendered no links. six18.css carries the same rule globally, but the scoped `.hz-nav ::deep .hz-nav__section` above compiles to a higher-specificity selector and was silently overriding it — so a user saw headings for roles they don't hold (in Local mode, every remote-only group). Restated here at scoped specificity so it actually wins. */ .hz-nav[b-ms61e5j75x] .hz-nav__section:not(:has(.botley-nav__link)) { display: none; } .hz-nav[b-ms61e5j75x] .hz-nav__heading { padding: 0.6rem 1rem 0.3rem 1rem; font-family: var(--hz-font-display); font-size: 0.71rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--hz-text-faint); } /* ── Main column ─────────────────────────────────────────────────────────────── */ .hz-main[b-ms61e5j75x] { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* Fixed 52px bar on the card surface, matching the mockup — the translucent bg the spec-029 shell used made the sidebar/topbar corner read as two different darks. */ .hz-topbar[b-ms61e5j75x] { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; height: 52px; padding: 0 1.5rem; background: var(--hz-card); border-bottom: 1px solid var(--hz-border); } /* Appearance toggle (spec 037, FR-003) — crisp control, no pill. */ [b-ms61e5j75x] .hz-theme-toggle { font-size: 1rem; line-height: 1; padding: 0.4rem 0.6rem; border-radius: var(--hz-radius-control); border: 1px solid var(--hz-border-strong); background: var(--hz-card); color: var(--hz-text); cursor: pointer; } [b-ms61e5j75x] .hz-theme-toggle:hover { border-color: var(--hz-brand); color: var(--hz-brand-strong); } /* Page identity in the bar (spec 078) — before this the top bar was empty and the app had no consistent page-title pattern at all. Title comes from RouteTitleMap, or from a page's override for dynamic routes. */ .hz-topbar__title[b-ms61e5j75x] { font-family: var(--hz-font-display); font-size: 1.07rem; font-weight: 600; letter-spacing: 0.01em; color: var(--hz-text); margin: 0; white-space: nowrap; } .hz-topbar__crumb[b-ms61e5j75x] { font-family: var(--hz-font-mono); font-size: 0.79rem; color: var(--hz-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hz-topbar__spacer[b-ms61e5j75x] { flex: 1; } /* Signed-in identity (Remote mode only). */ [b-ms61e5j75x] .hz-identity { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } [b-ms61e5j75x] .hz-identity__avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; flex: none; border-radius: var(--hz-radius-badge); background: var(--hz-brand-gradient); color: var(--hz-on-brand); font-family: var(--hz-font-display); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.02em; } [b-ms61e5j75x] .hz-identity__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } [b-ms61e5j75x] .hz-identity__name { font-size: 0.76rem; font-weight: 600; color: var(--hz-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; } [b-ms61e5j75x] .hz-identity__roles { font-family: var(--hz-font-mono); font-size: 0.6rem; color: var(--hz-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; } /* Below tablet the bar keeps title + status only; breadcrumb and the identity text are the first things to go, the avatar stays as the account affordance. */ @media (max-width: 1100px) { .hz-topbar__crumb[b-ms61e5j75x] { display: none; } [b-ms61e5j75x] .hz-identity__text { display: none; } } @media (max-width: 700px) { .hz-topbar__title[b-ms61e5j75x] { overflow: hidden; text-overflow: ellipsis; } } .hz-nav-toggle[b-ms61e5j75x] { display: none; font-size: 1.25rem; line-height: 1; padding: 0.4rem 0.6rem; border-radius: var(--hz-radius-control); border: 1px solid var(--hz-border); background: var(--hz-card); color: var(--hz-text); cursor: pointer; } .hz-content[b-ms61e5j75x] { flex: 1; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; min-height: 0; padding: 0.5rem 1.5rem 2rem 1.5rem; } /* ── Mobile scrim (off-canvas sidebar) ───────────────────────────────────────── */ .hz-scrim[b-ms61e5j75x] { display: none; position: fixed; inset: 0; border: none; background: rgba(0, 0, 0, 0.55); z-index: 25; } @media (max-width: 900px) { .hz-sidebar[b-ms61e5j75x] { position: fixed; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--hz-shadow-card); } .hz-layout--nav-open .hz-sidebar[b-ms61e5j75x] { transform: translateX(0); } .hz-layout--nav-open .hz-scrim[b-ms61e5j75x] { display: block; } .hz-nav-toggle[b-ms61e5j75x] { display: inline-flex; } } /* ── Error UI ───────────────────────────────────────────────────────────────── Was a hard-coded lightyellow bar with `color-scheme: light only`, which fought the dark shell and duplicated a token-based rule in app.css. Now on tokens: it reads as a deliberate danger banner in both appearances. */ #blazor-error-ui[b-ms61e5j75x] { background: var(--hz-danger-soft); color: var(--hz-text); border-top: 2px solid var(--hz-danger); bottom: 0; box-sizing: border-box; display: none; left: 0; font-size: 0.82rem; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; backdrop-filter: blur(6px); } #blazor-error-ui .reload[b-ms61e5j75x] { color: var(--hz-brand-strong); font-weight: 600; } #blazor-error-ui .dismiss[b-ms61e5j75x] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* /Components/Layout/SafetyStatusBadge.razor.rz.scp.css */ .safety-badge[b-00yk578had] { display: inline-flex; align-items: center; min-height: 2.4rem; padding: 0 0.95rem; border-radius: var(--hz-radius-badge); font-weight: 700; text-decoration: none; letter-spacing: 0.02em; } .safety-badge--on[b-00yk578had] { border: 1px solid color-mix(in srgb, var(--hz-success) 45%, transparent); background: color-mix(in srgb, var(--hz-success) 14%, transparent); color: var(--hz-success); } .safety-badge--off[b-00yk578had] { border: 1px solid color-mix(in srgb, var(--hz-danger) 55%, transparent); background: color-mix(in srgb, var(--hz-danger) 14%, transparent); color: var(--hz-danger); animation: safety-badge-pulse-b-00yk578had 1.6s ease-in-out infinite; } .safety-badge--unavailable[b-00yk578had] { border: 1px solid color-mix(in srgb, var(--hz-warning) 45%, transparent); background: color-mix(in srgb, var(--hz-warning) 14%, transparent); color: var(--hz-warning); } @keyframes safety-badge-pulse-b-00yk578had { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hz-danger) 35%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } } /* /Components/Layout/TradingNav.razor.rz.scp.css */ .trading-nav__group[b-a4otp5bmr4] { position: relative; display: inline-flex; } .trading-nav__toggle[b-a4otp5bmr4] { cursor: pointer; font: inherit; } .trading-nav__dropdown[b-a4otp5bmr4] { position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 30; display: flex; flex-direction: column; gap: 0.35rem; min-width: 16rem; max-height: 24rem; overflow-y: auto; padding: 0.6rem; border: 1px solid var(--hz-border-strong); border-radius: var(--hz-radius-card); background: var(--hz-raised); box-shadow: var(--hz-shadow-overlay); } .trading-nav__dropdown[b-a4otp5bmr4] .trading-nav__slot { border-radius: var(--hz-radius-control); } /* /Components/Pages/Admin/BlockoutKeywords.razor.rz.scp.css */ /* Spec 078 — page-scoped layout for /admin/blockout-keywords. Shapes come from six18-ui.css (.hz-panel / .hz-table / .hz-field); only genuinely page-specific layout lives here. Colors are tokens only, so light mode follows. */ /* ── Add-keyword form row ────────────────────────────────────────────────────── */ .bk-form[b-ktgexk6uic] { display: flex; align-items: flex-end; gap: var(--hz-space-3) var(--hz-space-4); flex-wrap: wrap; } .bk-hint[b-ktgexk6uic] { margin: var(--hz-space-3) 0 0 0; font-size: 0.72rem; line-height: 1.45; color: var(--hz-text-faint); } /* ── Rule rows ───────────────────────────────────────────────────────────────── */ /* The "inert" marker rides beside the kind badge, never on its own line. */ .bk-tag[b-ktgexk6uic] { margin-left: var(--hz-space-1); } .bk-rowactions[b-ktgexk6uic] { display: flex; align-items: center; justify-content: flex-end; gap: var(--hz-space-1); flex-wrap: nowrap; } /* ── Loading ─────────────────────────────────────────────────────────────────── */ .bk-loading[b-ktgexk6uic] { display: flex; align-items: center; justify-content: center; padding: var(--hz-space-6); } /* /Components/Pages/Admin/Contracts.razor.rz.scp.css */ /* Contract ids — page-scoped layout only; every shape comes from six18-ui.css. Replaces the old inline