/* Herne — custom overrides on top of WebBlocks UI (loaded via CDN in layout) */ /* ── Site nav: hide default title when breadcrumb is present ──────────────── When .wb-navbar-breadcrumb exists as a sibling, hide the default title. ─────────────────────────────────────────────────────────────────────────── */ .wb-navbar-start:has(.wb-navbar-breadcrumb) .wb-navbar-default-title { display: none; } /* ── Site nav: active state for wb-btn-ghost dropdown triggers ────────────── Dropdown buttons in the sub-nav row that represent the active section. ─────────────────────────────────────────────────────────────────────────── */ .herne-site-nav .herne-nav-active { color: var(--wb-accent); background: var(--wb-accent-subtle); } .herne-site-nav .wb-dropdown { display: inline-flex; } .herne-site-nav .wb-dropdown > .wb-navbar-link { width: 100%; } .herne-site-nav-mobile-menu { display: none; } .herne-site-nav-status { flex-wrap: wrap; } /* ── Mobile: sidebar toggle ───────────────────────────────────────────────── Show hamburger on small screens, hide sidebar by default. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .wb-sidebar-toggle-btn { display: inline-flex !important; } .wb-dashboard-shell .wb-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; transform: translateX(-100%); transition: transform 0.25s ease; } .wb-dashboard-shell .wb-sidebar.is-open { transform: translateX(0); } .herne-site-nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .herne-site-nav-mobile-menu { display: inline-flex; flex: 1 1 100%; } .herne-site-nav-mobile-menu > .wb-navbar-link { width: 100%; justify-content: space-between; } .herne-site-nav-desktop { display: none !important; } .herne-site-nav-status { margin-left: 0 !important; width: 100%; justify-content: flex-start; padding-top: 0.15rem; } } @media (min-width: 769px) { .herne-site-nav-mobile-menu { display: none !important; } } /* ── Accent theme tokens ───────────────────────────────────────────────────── WebBlocks uses --wb-accent-* tokens. We remap the user's DB theme value (blue/green/purple/orange/red) to override those tokens here. The attribute is set by the layout inline script (reading from auth user's DB theme column). ─────────────────────────────────────────────────────────────────────────── */ [data-herne-accent="blue"] { --wb-accent: #3b82f6; --wb-accent-hover: #2563eb; --wb-accent-subtle: rgba(59,130,246,0.12); } [data-herne-accent="green"] { --wb-accent: #22c55e; --wb-accent-hover: #16a34a; --wb-accent-subtle: rgba(34,197,94,0.12); } [data-herne-accent="purple"] { --wb-accent: #a855f7; --wb-accent-hover: #9333ea; --wb-accent-subtle: rgba(168,85,247,0.12); } [data-herne-accent="orange"] { --wb-accent: #f97316; --wb-accent-hover: #ea580c; --wb-accent-subtle: rgba(249,115,22,0.12); } [data-herne-accent="red"] { --wb-accent: #ef4444; --wb-accent-hover: #dc2626; --wb-accent-subtle: rgba(239,68,68,0.12); } /* ── Sidebar footer card ──────────────────────────────────────────────────── Make the version badge feel like a polished product footer instead of a plain text line. ─────────────────────────────────────────────────────────────────────────── */ .herne-sidebar-footer { padding: 0.85rem 1rem 1rem; border-top: 1px solid color-mix(in srgb, var(--wb-border) 82%, transparent); background: transparent; } .herne-sidebar-footer-copy { display: flex; align-items: center; gap: 0.5rem; min-width: 0; line-height: 1.2; color: var(--wb-text); } .herne-sidebar-footer-name, .herne-sidebar-footer-version { white-space: nowrap; } .herne-sidebar-footer-name { font-size: 1rem; font-weight: 600; } .herne-sidebar-footer-version { font-size: 0.88rem; color: var(--wb-muted); } @media (max-width: 768px) { .herne-sidebar-footer { padding-bottom: 1rem; } } .herne-deploy-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.9fr); gap: 1.5rem; align-items: start; } .herne-deploy-config-card { min-width: 0; } .herne-fm-toolbar-card { position: sticky; top: 0.75rem; z-index: 20; backdrop-filter: blur(10px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); } .herne-fm-toolbar-body { padding: 0.45rem 0.8rem !important; } .herne-fm-toolbar-card-compact .herne-fm-toolbar-body { padding-block: 0.38rem !important; } .herne-fm-toolbar-row { row-gap: 0.45rem; } .herne-fm-breadcrumb-wrap { min-width: 0; flex: 1 1 24rem; } .herne-fm-breadcrumb { align-items: center; flex-wrap: wrap; gap: 0; font-size: 0.88rem; line-height: 1.25; } .herne-fm-breadcrumb .wb-crumb a, .herne-fm-breadcrumb .wb-crumb-active { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.75rem; border-radius: 999px; padding: 0.12rem 0.45rem; } .herne-fm-breadcrumb .wb-crumb a { color: var(--wb-text); text-decoration: none; } .herne-fm-breadcrumb .wb-crumb a:hover { background: var(--wb-accent-subtle); color: var(--wb-accent); } .herne-fm-breadcrumb .wb-crumb-active { font-weight: 600; } .herne-fm-breadcrumb .wb-crumb.is-active a { font-weight: 600; } .herne-container-wide { max-width: min(1680px, calc(100vw - 3rem)); } .herne-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .herne-page-header-copy { min-width: 0; flex: 1 1 24rem; } .herne-page-title { margin: 0; font-size: 1.3rem; line-height: 1.2; font-weight: 700; } .herne-page-subtitle { margin: 0.35rem 0 0; max-width: 68ch; color: var(--wb-muted); font-size: 0.92rem; } .herne-page-header-extra { margin-top: 0.6rem; } .herne-page-actions, .herne-action-group, .herne-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; } .herne-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .herne-card-heading { min-width: 0; flex: 1 1 16rem; } .herne-card-title { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 600; } .herne-card-description { margin: 0.3rem 0 0; color: var(--wb-muted); font-size: 0.9rem; } .herne-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; } .herne-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .herne-stat-card .wb-card-body { display: grid; gap: 0.35rem; } .herne-stat-label { color: var(--wb-muted); font-size: 0.75rem; } .herne-stat-value { font-size: 1.6rem; line-height: 1.1; font-weight: 700; } .herne-stat-value-sm { font-size: 1.25rem; } .herne-stat-accent { color: var(--wb-accent); } .herne-stat-success { color: var(--wb-success); } .herne-stat-muted { color: var(--wb-muted); } .herne-meta-grid, .herne-form-grid, .herne-filter-grid, .herne-info-grid, .herne-wide-grid { display: grid; gap: 1rem; } .herne-meta-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .herne-form-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .herne-filter-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; } .herne-info-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; } .herne-wide-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; } .herne-meta-item { display: grid; gap: 0.35rem; } .herne-meta-label { color: var(--wb-muted); font-size: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase; } .herne-meta-value { font-weight: 600; word-break: break-word; } .herne-meta-stack { display: grid; gap: 0.75rem; } .herne-empty-state { display: grid; justify-items: center; gap: 0.7rem; padding: 2rem 1.25rem; text-align: center; } .herne-empty-state-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--wb-surface-alt); color: var(--wb-muted); } .herne-empty-state-title { margin: 0; font-size: 1rem; font-weight: 600; } .herne-empty-state-description { margin: 0.35rem 0 0; color: var(--wb-muted); max-width: 38rem; } .herne-danger-zone { border-color: color-mix(in srgb, var(--wb-danger) 24%, var(--wb-border)); } .herne-danger-zone-title { margin: 0; color: var(--wb-danger); font-size: 1rem; font-weight: 600; } .herne-danger-zone-description { margin: 0.35rem 0 0; color: var(--wb-muted); max-width: 60ch; font-size: 0.9rem; } .herne-form-wrap { max-width: 50rem; } .herne-stack { display: grid; gap: 1rem; } .herne-section-spaced { margin-bottom: 1.5rem; } .herne-split-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; } .herne-code-surface { background: var(--wb-surface-alt); border-radius: var(--wb-radius-md); padding: 0.75rem; } .herne-code-surface-sm { padding: 0.5rem; font-size: 0.75rem; } .herne-note-list { display: grid; gap: 0.75rem; } .herne-list-tight { display: grid; gap: 0.5rem; } .herne-fm-breadcrumb .wb-crumb-separator { display: inline-flex; align-items: center; font-size: 0.82rem; } @media (max-width: 1100px) { .herne-deploy-grid { grid-template-columns: 1fr; } .herne-split-layout { grid-template-columns: 1fr; } .herne-container-wide { max-width: calc(100vw - 2rem); } } @media (max-width: 768px) { .herne-fm-toolbar-card { top: 0.5rem; } .herne-fm-toolbar-body { padding-inline: 0.7rem !important; } .herne-fm-breadcrumb-wrap { flex-basis: 100%; } }