/* Herne — custom overrides on top of WebBlocks UI (loaded via CDN in layout) */ :root { --herne-product-primary: #0F3A5A; --herne-product-primary-dark: #08283F; --herne-product-accent: #38D39F; --herne-product-tint: #DDFBF1; } .product-mark { display: block; flex: 0 0 auto; inline-size: 2rem; block-size: 2rem; } .wb-auth-brand { display: inline-flex; align-items: center; justify-content: center; gap: var(--wb-s3); } .product-mark-auth-panel { color: var(--wb-accent-on); inline-size: 3rem; block-size: 3rem; } .product-mark-auth-card, .product-mark-sidebar { color: var(--wb-accent); } .wb-sidebar-brand-logo .product-mark { inline-size: 1.75rem; block-size: 1.75rem; } /* ── 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: var(--herne-product-primary); --wb-accent-hover: var(--herne-product-primary-dark); --wb-accent-subtle: rgba(15,58,90,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); } .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 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem; font-size: 0.88rem; line-height: 1.25; list-style: none; margin: 0; padding: 0; } .herne-fm-breadcrumb__item, .herne-fm-breadcrumb__separator { display: inline-flex; align-items: center; flex: 0 0 auto; width: auto; } .herne-fm-breadcrumb .wb-crumb a, .herne-fm-breadcrumb__link, .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-domain-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .herne-domain-dns-table { width: 100%; min-width: 56rem; table-layout: fixed; } .herne-domain-subdomains-table { width: 100%; min-width: 44rem; table-layout: fixed; } .herne-domain-dns-col-type { width: 5.5rem; } .herne-domain-dns-col-name { width: 11rem; } .herne-domain-dns-col-value { width: auto; } .herne-domain-dns-col-priority { width: 6.5rem; } .herne-domain-dns-col-ttl { width: 5.5rem; } .herne-domain-dns-col-actions { width: 6.5rem; } .herne-domain-subdomains-col-domain { width: 13rem; } .herne-domain-subdomains-col-type { width: 6.5rem; } .herne-domain-subdomains-col-target { width: auto; } .herne-domain-subdomains-col-status { width: 8rem; } .herne-domain-subdomains-col-actions { width: 6rem; } .herne-domain-nameserver-panel { padding: 1rem; border: 1px dashed var(--wb-border); border-radius: var(--wb-r-md); background: var(--wb-surface-subtle); } .herne-domain-config-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .herne-domain-subdomains-card-table-wrap { max-height: 22rem; overflow: auto; } .herne-domain-dns-table :is( .herne-domain-dns-cell-type, .herne-domain-dns-cell-name, .herne-domain-dns-cell-priority, .herne-domain-dns-cell-ttl, .herne-domain-dns-cell-actions ), .herne-domain-subdomains-table :is( .herne-domain-subdomains-cell-domain, .herne-domain-subdomains-cell-type, .herne-domain-subdomains-cell-status, .herne-domain-subdomains-cell-actions ) { white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; } .herne-domain-cell-nowrap { white-space: nowrap; } .herne-domain-dns-table .herne-domain-dns-cell-value, .herne-domain-subdomains-table .herne-domain-subdomains-cell-target { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; } .herne-domain-record-value { line-height: 1.35; } .herne-domain-record-value-preview { display: -webkit-box; max-height: 2.7em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .herne-domain-dns-table .herne-domain-dns-cell-actions, .herne-domain-subdomains-table .herne-domain-subdomains-cell-actions { text-align: left; } .herne-domain-dns-table .herne-domain-dns-cell-actions .wb-action-group, .herne-domain-subdomains-table .herne-domain-subdomains-cell-actions .wb-action-group { display: inline-flex; flex-wrap: nowrap; } .herne-domain-record-detail-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.9rem; } .herne-domain-record-detail-table th, .herne-domain-record-detail-table td { padding: 0.65rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wb-border); } .herne-domain-record-detail-table thead th { color: var(--wb-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; background: var(--wb-surface-subtle); } .herne-domain-record-detail-table th:first-child { width: 9rem; } .herne-domain-record-detail-table tbody th { color: var(--wb-muted); font-weight: 600; } .herne-domain-record-detail-table td { min-width: 0; overflow-wrap: anywhere; } .herne-domain-record-detail-code { display: block; max-height: 14rem; padding: 0.75rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; border: 1px solid var(--wb-border); border-radius: var(--wb-r-md); background: var(--wb-surface-subtle); } .herne-domain-record-form-table label { margin: 0; color: inherit; font: inherit; } .herne-domain-record-form-table .wb-select, .herne-domain-record-form-table .wb-input { width: 100%; } .herne-domain-record-form-table .wb-field-meta { margin-top: 0.35rem; } @media (max-width: 560px) { .herne-domain-record-detail-table, .herne-domain-record-detail-table tbody, .herne-domain-record-detail-table tr, .herne-domain-record-detail-table th, .herne-domain-record-detail-table td { display: block; width: 100%; } .herne-domain-record-detail-table thead { display: none; } .herne-domain-record-detail-table th:first-child { width: 100%; } .herne-domain-record-detail-table tbody th { padding-bottom: 0.2rem; border-bottom: 0; } .herne-domain-record-detail-table td { padding-top: 0; } } .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; color: var(--wb-muted); padding-inline: 0.15rem; } @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%; } }