/* elossync — theme overrides Loaded after AdminLTE / Falcon CSS. Reference: docs/BRANDING.md (OKLCH palette, JetBrains Mono, bracket wordmark) */ :root { --el-bg: oklch(0.98 0.005 250); --el-ink: oklch(0.18 0.02 260); --el-ink-soft: oklch(0.45 0.02 260); --el-line: oklch(0.9 0.01 260); --el-accent: oklch(0.6 0.15 145); --el-accent-bright: oklch(0.7 0.18 145); --el-dark-bg: oklch(0.16 0.02 260); --el-dark-line: oklch(0.26 0.02 260); --el-dark-ink: oklch(0.96 0.01 260); --el-dark-soft: oklch(0.65 0.02 260); --bs-primary: oklch(0.6 0.15 145); --bs-primary-rgb: 92, 153, 89; } [data-bs-theme="dark"] { --el-bg: var(--el-dark-bg); --el-ink: var(--el-dark-ink); --el-ink-soft: var(--el-dark-soft); --el-line: var(--el-dark-line); } .btn-primary, .btn-primary:focus { background-color: var(--el-accent); border-color: var(--el-accent); } .btn-primary:hover, .btn-primary:active { background-color: var(--el-accent-bright); border-color: var(--el-accent-bright); } .text-primary { color: var(--el-accent) !important; } .bg-primary { background: var(--el-accent) !important; } .bg-primary-subtle { background-color: oklch(0.95 0.04 145) !important; } .text-primary-emphasis { color: var(--el-accent) !important; } a { color: var(--el-accent); } a:hover { color: var(--el-accent-bright); } /* Wordmark — light mode */ .el-wordmark { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 500; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 0.25em; line-height: 1; } .el-wordmark .br { color: var(--el-accent); font-weight: 400; } .el-wordmark .name { color: var(--el-ink); } .el-wordmark.on-dark .br { color: var(--el-accent-bright); } .el-wordmark.on-dark .name { color: var(--el-dark-ink); } [data-bs-theme="dark"] .el-wordmark .br { color: var(--el-accent-bright); } [data-bs-theme="dark"] .el-wordmark .name { color: var(--el-dark-ink); } /* Symbol [e] — compact monogram for collapsed sidebar / favicon-equivalents */ .el-symbol { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; letter-spacing: -0.05em; display: inline-flex; align-items: center; line-height: 1; } .el-symbol .br { color: var(--el-accent); font-weight: 400; } .el-symbol .e { color: var(--el-ink); } [data-bs-theme="dark"] .el-symbol .br { color: var(--el-accent-bright); } [data-bs-theme="dark"] .el-symbol .e { color: var(--el-dark-ink); } /* Sidebar brand — show wordmark when expanded, [e] symbol when collapsed */ .el-brand .el-brand-full { /* Slightly tighter so [ elossync ] fits inside the ~12.625rem sidebar without clipping at the right bracket */ font-size: 1.125rem; letter-spacing: -0.03em; gap: 0.18em; } .el-brand .el-brand-compact { /* Hidden when sidebar is fully expanded */ display: none; font-size: 1.5rem; gap: 0.05em; } /* Falcon adds .navbar-vertical-collapsed to when sidebar collapses to icons. When NOT hovering (hover re-expands the sidebar temporarily), swap to monogram. */ body.navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .el-brand .el-brand-full { display: none; } body.navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .el-brand .el-brand-compact { display: inline-flex; } /* Tenant indicator next to wordmark in topbar */ .tenant-indicator { margin-left: 16px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14px; color: var(--el-ink-soft); display: inline-flex; align-items: center; line-height: 1; } .tenant-indicator .separator { margin-right: 8px; opacity: 0.5; } .tenant-indicator .tenant-name { color: var(--el-accent); } [data-bs-theme="dark"] .tenant-indicator .tenant-name { color: var(--el-accent-bright); }