/* --------------------------------------------------------------------------- Module identity. One accent per module, set on , consumed by exactly four surfaces: the active navbar target, the page signature/header, active tabs, and section heading indicators. Status semantics (success/warning/danger/ in-progress) never read these tokens. Accent values are mirrored from core/module_identity.py ACCENTS. --------------------------------------------------------------------------- */ :root { --module-accent: #7c8db5; } body[data-module="dashboard"] { --module-accent: #94a3b8; } body[data-module="requests"] { --module-accent: #38bdf8; } body[data-module="subscriptions"] { --module-accent: #3b82f6; } body[data-module="clients"] { --module-accent: #6366f1; } body[data-module="operations"] { --module-accent: #8b5cf6; } body[data-module="releases"] { --module-accent: #a855f7; } body[data-module="backups"] { --module-accent: #d946ef; } body[data-module="admin"] { --module-accent: #64748b; } body { --module-accent-soft: color-mix(in srgb, var(--module-accent) 14%, transparent); --module-accent-line: color-mix(in srgb, var(--module-accent) 34%, transparent); --module-accent-text: color-mix(in srgb, var(--module-accent) 78%, #ffffff); } /* --- Navbar: the persistent identity carrier ------------------------------ */ .navbar { position: sticky; top: 0; z-index: 1030; } /* Accent rail along the navbar's bottom edge, continuing into the page header. */ .navbar::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--module-accent); opacity: .85; } body:not([data-module]) .navbar::after, body[data-module=""] .navbar::after { display: none; } .navbar-nav .nav-link { border: 1px solid transparent; border-radius: 7px; padding-inline: .6rem; } .navbar-nav .nav-link.active { background: var(--module-accent-soft); border-color: var(--module-accent-line); color: #f8fafc !important; font-weight: 650; } .navbar-nav .nav-link.active > i { color: var(--module-accent-text); } .navbar-nav .nav-link.active:hover { color: #ffffff !important; transform: none; } /* Below lg the collapse hides the nav, so the chip carries the module name. */ .navbar-module-chip { display: inline-flex; align-items: center; gap: .4rem; margin-right: auto; margin-left: .75rem; padding: .22rem .55rem; border: 1px solid var(--module-accent-line); border-radius: 999px; background: var(--module-accent-soft); color: #e2e8f0; font-size: .72rem; font-weight: 650; white-space: nowrap; } .navbar-module-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--module-accent); } /* --- Page header: identity anchored to the heading ------------------------ */ header.page-identity-header { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center !important; gap: 1rem 1.5rem !important; padding-bottom: 1.25rem; margin-bottom: 1.25rem !important; border-bottom: 1px solid rgba(148, 163, 184, .2); position: relative; } /* Short accent rule that fades into the neutral border. */ .page-identity-header::after { content: ""; position: absolute; bottom: -1px; left: 0; width: min(210px, 40%); height: 2px; background: linear-gradient(90deg, var(--module-accent), transparent); } .page-identity-header .page-heading { display: flex; align-items: center; gap: 1.1rem; min-width: 0; } .page-identity-header .page-heading-copy { min-width: 0; } .page-identity-header .page-heading-copy h1 { margin: .15rem 0 .35rem; font-size: 1.75rem; line-height: 1.25; letter-spacing: 0; overflow-wrap: anywhere; } .page-identity-header .page-heading-copy p { margin: 0; max-width: 760px; overflow-wrap: anywhere; } .page-identity-header .page-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; min-width: 0; /* No max-width: the grid's `auto` track already sizes to the buttons and shrinks them before the minmax(0,1fr) heading overflows. A percentage cap here would resolve against that track and shrink the actions inside it. */ } /* Action groups wrap; every row stays flush with the right edge so a 4-5 button header reads as one cluster instead of two ragged rows. */ .page-identity-header .page-header-actions > div { min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: .5rem; } .page-identity-header .page-header-actions .btn { white-space: nowrap; min-height: 40px; } /* One geometry for every module; the icon does the distinguishing. */ .page-identity-header .page-signature { position: relative; display: grid; place-items: center; isolation: isolate; width: 92px; height: 92px; flex: 0 0 92px; color: var(--module-accent); pointer-events: none; } .page-identity-header .page-signature::before { content: ""; position: absolute; z-index: -1; inset: 0; background: color-mix(in srgb, var(--module-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--module-accent) 28%, transparent); border-radius: 14px; } .page-identity-header .page-signature > i { font-size: 44px; line-height: 1; } /* --- Shared identity hooks ------------------------------------------------ */ /* Eyebrows: one accent instead of six hardcoded hues. */ .page-identity-header .crud-eyebrow, .page-identity-header .dashboard-eyebrow, .page-identity-header .subscriptions-eyebrow, .page-identity-header .clients-eyebrow, .page-identity-header .users-eyebrow, .page-identity-header .inventory-eyebrow, .page-identity-header .activity-eyebrow { color: var(--module-accent); } /* Active tab state, shared by the four per-module tab strips. */ .backup-tab.active::after, .backup-tab--system.active::after, .operations-tab.active::after, .operations-tab--k3s.active::after, .release-tab.active::after { background: var(--module-accent); } .backup-tab.active .backup-tab-count, .operations-tab.active .operations-tab-count, .operations-tab--k3s.active .operations-tab-count, .release-tab.active .release-tab-count { background: var(--module-accent-soft); color: #f8fafc; } .access-tab.active { border-color: var(--module-accent); color: #fff; } /* Section heading indicators. */ .crud-panel-heading h2 i, .crud-form-section-heading > span, .inventory-panel-heading h2 i, .inventory-table-heading h2 i, .table-heading h2 i { color: var(--module-accent); } .crud-form-section-heading > span { background: var(--module-accent-soft); } .crud-count { border-color: var(--module-accent-line); color: var(--module-accent-text); } @media (max-width: 1199.98px) { header.page-identity-header { grid-template-columns: minmax(0, 1fr); } .page-identity-header .page-header-actions { max-width: none; justify-content: flex-start; padding-left: calc(92px + 1.1rem); } .page-identity-header .page-header-actions > div { justify-content: flex-start; } } @media (max-width: 991.98px) { /* Collapsed nav: the pill has no rail to sit against, so keep the tint only. */ .navbar-nav .nav-link.active { border-radius: 6px; } } @media (max-width: 575.98px) { .page-identity-header .page-heading { gap: .8rem; align-items: flex-start; } .page-identity-header .page-signature { width: 64px; height: 64px; flex-basis: 64px; } .page-identity-header .page-signature > i { font-size: 32px; } .page-identity-header .page-signature::before { border-radius: 11px; } .page-identity-header .page-heading-copy h1 { font-size: 1.35rem; } .page-identity-header .page-heading-copy p { font-size: .8rem; } .page-identity-header .page-header-actions { padding-left: 0; width: 100%; } .page-identity-header .page-header-actions > div { width: 100%; } .navbar-module-chip { font-size: .68rem; margin-left: .5rem; } }