/* * Pluggie — apiserver Tabler theme override * * This file rebrands Tabler 1.0 to match the web-new (pluggie.net) marketing site: * - Indigo accent (#6366f1) instead of Tabler blue (#206bc4) * - Inter font instead of system stack * - Pluggie dark palette (#1e1e2e family) * - Light palette tuned to match marketing-site light theme * * Tabler 1.0 uses [data-bs-theme="dark"|"light"] (Bootstrap 5.3 dark mode). * The theme-toggle.js script sets data-bs-theme on . * For "system" mode, data-bs-theme is unset and the @media block below applies. * * Load order in base.html: * 1) tabler.min.css (vendor) * 2) tabler-icons.min.css (vendor) * 3) pluggie-theme.css (THIS FILE — overrides vendor) */ /* ============================================================ * FONT * ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root, [data-bs-theme] { --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --tblr-font-monospace: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, Menlo, Monaco, Consolas, monospace; --bs-font-sans-serif: var(--tblr-font-sans-serif); --bs-font-monospace: var(--tblr-font-monospace); /* Radii — match web-new (Tabler default is sharper) */ --tblr-border-radius: 8px; --tblr-border-radius-sm: 6px; --tblr-border-radius-lg: 12px; --tblr-border-radius-xl: 16px; --bs-border-radius: 8px; --bs-border-radius-sm: 6px; --bs-border-radius-lg: 12px; --bs-border-radius-xl: 16px; } /* ============================================================ * DARK THEME — explicit + default * ============================================================ */ [data-bs-theme="dark"], html[data-bs-theme="dark"] { /* Pluggie dark palette */ --tblr-body-bg: #1e1e2e; --tblr-body-bg-rgb: 30, 30, 46; --tblr-bg-surface: #232336; --tblr-bg-surface-rgb: 35, 35, 54; --tblr-bg-surface-secondary: #2a2a3e; --tblr-bg-surface-tertiary: #1e1e2e; --tblr-body-color: #f0f0f5; --tblr-body-color-rgb: 240, 240, 245; --tblr-secondary-color: #b0b0c4; --tblr-tertiary-color: #8888a0; --tblr-muted: #8888a0; --tblr-border-color: rgba(255,255,255,0.12); --tblr-border-color-translucent: rgba(255,255,255,0.12); /* Cards */ --tblr-card-bg: #232336; --tblr-card-color: #f0f0f5; --tblr-card-border-color: rgba(255,255,255,0.10); --tblr-card-cap-bg: transparent; --tblr-card-cap-color: #f0f0f5; --tblr-card-box-shadow: 0 1px 2px rgba(0,0,0,0.30); /* Forms */ --tblr-form-control-bg: rgba(255,255,255,0.04); --tblr-form-control-color: #f0f0f5; --tblr-form-control-border-color: rgba(255,255,255,0.14); --tblr-input-bg: rgba(255,255,255,0.04); --tblr-input-color: #f0f0f5; --tblr-input-border-color: rgba(255,255,255,0.14); --tblr-input-placeholder-color: #6b6b80; --bs-body-bg: #1e1e2e; --bs-body-bg-rgb: 30, 30, 46; --bs-body-color: #f0f0f5; --bs-body-color-rgb: 240, 240, 245; --bs-secondary-color: #b0b0c4; --bs-tertiary-color: #8888a0; --bs-border-color: rgba(255,255,255,0.12); --bs-border-color-translucent: rgba(255,255,255,0.12); --bs-tertiary-bg: #2a2a3e; --bs-secondary-bg: #2a2a3e; color-scheme: dark; } /* ============================================================ * SYSTEM PREFERENCE — handled in JS (theme-toggle.js + FOUC guard) * data-bs-theme is always set explicitly, so :root:not([data-bs-theme]) * only applies on the very first paint before JS runs (< 1 frame). * Keep a minimal dark fallback just in case. * ============================================================ */ :root:not([data-bs-theme]) { --tblr-body-bg: #1e1e2e; --tblr-bg-surface: #232336; --tblr-body-color: #f0f0f5; color-scheme: dark; } /* ============================================================ * LIGHT THEME — explicit * ============================================================ */ [data-bs-theme="light"], html[data-bs-theme="light"] { --tblr-body-bg: #fafafa; --tblr-body-bg-rgb: 250, 250, 250; --tblr-bg-surface: #ffffff; --tblr-bg-surface-rgb: 255, 255, 255; --tblr-bg-surface-secondary: #f4f4f8; --tblr-bg-surface-tertiary: #ffffff; --tblr-body-color: #1a1a2e; --tblr-body-color-rgb: 26, 26, 46; --tblr-secondary-color: #4a4a5e; --tblr-tertiary-color: #6b6b80; --tblr-muted: #6b6b80; --tblr-border-color: rgba(15,15,30,0.10); --tblr-border-color-translucent: rgba(15,15,30,0.10); --tblr-card-bg: #ffffff; --tblr-card-color: #1a1a2e; --tblr-card-border-color: rgba(15,15,30,0.08); --tblr-card-cap-bg: transparent; --tblr-card-cap-color: #1a1a2e; --tblr-card-box-shadow: 0 1px 2px rgba(15,15,30,0.06); --tblr-form-control-bg: #ffffff; --tblr-form-control-color: #1a1a2e; --tblr-form-control-border-color: rgba(15,15,30,0.16); --tblr-input-bg: #ffffff; --tblr-input-color: #1a1a2e; --tblr-input-border-color: rgba(15,15,30,0.16); --tblr-input-placeholder-color: #6b6b80; --bs-body-bg: #fafafa; --bs-body-bg-rgb: 250, 250, 250; --bs-body-color: #1a1a2e; --bs-body-color-rgb: 26, 26, 46; --bs-secondary-color: #4a4a5e; --bs-tertiary-color: #6b6b80; --bs-border-color: rgba(15,15,30,0.10); --bs-border-color-translucent: rgba(15,15,30,0.10); --bs-tertiary-bg: #f4f4f8; --bs-secondary-bg: #f4f4f8; color-scheme: light; } /* ============================================================ * BODY + LAYOUT * ============================================================ */ body { font-family: var(--tblr-font-sans-serif); background-color: var(--tblr-body-bg); color: var(--tblr-body-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .page, .page-wrapper, .page-body { background-color: var(--tblr-body-bg); } /* ============================================================ * NAVBAR — always dark surface (matches web-new invariant) * The white Pluggie logo is only legible on a dark background. * Page body and cards still follow active theme. * ============================================================ */ .navbar { background-color: rgba(26,26,40,0.92) !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; /* backdrop-filter on the element itself creates a stacking context that clips position:absolute children (dropdowns). Use ::before instead. */ position: relative; overflow: visible !important; } .navbar::before { content: ''; position: absolute; inset: 0; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); z-index: -1; pointer-events: none; } /* container inside navbar must not clip dropdowns */ .navbar > .container-xl { overflow: visible !important; } /* Nav links — keep readable on dark navbar regardless of page theme */ .navbar .nav-link, .navbar .nav-link.dropdown-toggle { color: #b0b0c4 !important; font-weight: 500; font-size: 14px; transition: color 0.2s ease; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: #f0f0f5 !important; } /* Toggler icon — visible on dark navbar */ .navbar-toggler-icon { filter: brightness(2); } /* Logo — always white on dark navbar; no inversion needed */ .navbar-brand img { filter: none !important; } /* ============================================================ * CARDS * ============================================================ */ .card { background-color: var(--tblr-card-bg); color: var(--tblr-card-color); border: 1px solid var(--tblr-card-border-color); border-radius: 12px; box-shadow: var(--tblr-card-box-shadow); } .card-header, .card-footer { background-color: transparent; border-color: var(--tblr-card-border-color); color: var(--tblr-card-color); } .card-title { color: var(--tblr-card-color); font-weight: 700; letter-spacing: -0.01em; } /* ============================================================ * BUTTONS * ============================================================ */ .btn { font-weight: 600; letter-spacing: 0.01em; border-radius: 8px; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .btn-primary { background-color: var(--tblr-primary); border-color: var(--tblr-primary); color: #ffffff; } .btn-primary:hover, .btn-primary:focus { background-color: var(--tblr-primary-darken, var(--tblr-primary)); border-color: var(--tblr-primary-darken, var(--tblr-primary)); color: #ffffff; box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25); } .btn-primary:active, .btn-primary.active { background-color: var(--tblr-primary-darken) !important; border-color: var(--tblr-primary-darken) !important; } .btn-outline-primary { color: var(--tblr-primary); border-color: var(--tblr-primary); } .btn-outline-primary:hover { background-color: var(--tblr-primary); border-color: var(--tblr-primary); color: #ffffff; } /* Ghost / icon buttons need theme-aware contrast */ .btn-ghost-secondary { color: var(--tblr-secondary-color); } .btn-ghost-secondary:hover { background-color: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); } /* ============================================================ * FORMS * ============================================================ */ .form-control, .form-select { background-color: var(--tblr-form-control-bg); color: var(--tblr-form-control-color); border-color: var(--tblr-form-control-border-color); border-radius: 8px; transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .form-control:focus, .form-select:focus { background-color: var(--tblr-form-control-bg); color: var(--tblr-form-control-color); border-color: var(--tblr-primary); box-shadow: 0 0 0 0.2rem rgba(var(--tblr-primary-rgb), 0.20); } .form-control::placeholder { color: var(--tblr-input-placeholder-color); opacity: 1; } .form-label { color: var(--tblr-body-color); font-weight: 500; } .form-text, .form-hint { color: var(--tblr-secondary-color); } /* ============================================================ * TABLES * ============================================================ */ .table { --tblr-table-bg: transparent; --tblr-table-color: var(--tblr-body-color); --tblr-table-border-color: var(--tblr-border-color); --tblr-table-striped-bg: rgba(127,127,127,0.04); --tblr-table-hover-bg: rgba(var(--tblr-primary-rgb), 0.06); color: var(--tblr-body-color); border-color: var(--tblr-border-color); } .table > :not(caption) > * > * { background-color: transparent; color: var(--tblr-body-color); border-bottom-color: var(--tblr-border-color); } .table thead th { color: var(--tblr-secondary-color); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom-color: var(--tblr-border-color); } /* ============================================================ * DROPDOWNS / MODALS / TOOLTIPS / POPOVERS * ============================================================ */ .dropdown-menu { background-color: var(--tblr-bg-surface); color: var(--tblr-body-color); border: 1px solid var(--tblr-border-color); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.25); padding: 6px; } [data-bs-theme="light"] .dropdown-menu { box-shadow: 0 12px 32px rgba(15,15,30,0.10); } .dropdown-item { color: var(--tblr-body-color); border-radius: 6px; padding: 8px 12px; font-size: 14px; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); } .dropdown-divider { border-color: var(--tblr-border-color); } .modal-content { background-color: var(--tblr-bg-surface); color: var(--tblr-body-color); border: 1px solid var(--tblr-border-color); border-radius: 16px; } .modal-header, .modal-footer { border-color: var(--tblr-border-color); } .tooltip-inner { background-color: var(--tblr-bg-surface); color: var(--tblr-body-color); border: 1px solid var(--tblr-border-color); font-size: 12px; } /* ============================================================ * ALERTS * ============================================================ */ .alert { border-radius: 12px; border: 1px solid transparent; } [data-bs-theme="dark"] .alert-info, :root:not([data-bs-theme]) .alert-info { background-color: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.25); color: #93c5fd; } [data-bs-theme="dark"] .alert-success, :root:not([data-bs-theme]) .alert-success { background-color: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.25); color: #86efac; } [data-bs-theme="dark"] .alert-warning, :root:not([data-bs-theme]) .alert-warning { background-color: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.25); color: #fcd34d; } [data-bs-theme="dark"] .alert-danger, :root:not([data-bs-theme]) .alert-danger { background-color: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.25); color: #fca5a5; } /* ============================================================ * BADGES & PILLS * ============================================================ */ .badge { font-weight: 600; letter-spacing: 0.02em; } /* ============================================================ * PAGE HEADER * ============================================================ */ .page-header { background-color: transparent; } .page-title { color: var(--tblr-body-color); font-weight: 700; letter-spacing: -0.01em; } .page-pretitle { color: var(--tblr-secondary-color); } /* ============================================================ * SMOOTH THEME TRANSITIONS * ============================================================ */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, fill 0.25s ease, stroke 0.25s ease, box-shadow 0.25s ease !important; transition-delay: 0s !important; } /* ============================================================ * PAGE ENTRANCE FADE — softens the hard-cut when navigating * from web-new (or any other page) into the apiserver app. * The animation runs once per page load, not on theme switch. * ============================================================ */ @keyframes pluggie-page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .page-body { animation: pluggie-page-enter 0.28s cubic-bezier(0.4, 0, 0.2, 1) both; } /* ============================================================ * NAVBAR DROPDOWNS — follow page theme (light/dark) * Navbar is always dark but its dropdowns open into page area * and should match the active page theme. * ============================================================ */ .navbar .dropdown-menu { background-color: var(--tblr-bg-surface) !important; border-color: var(--tblr-border-color) !important; backdrop-filter: none; -webkit-backdrop-filter: none; } .navbar .dropdown-item { color: var(--tblr-body-color) !important; } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background-color: var(--tblr-bg-surface-secondary) !important; color: var(--tblr-body-color) !important; } .navbar .dropdown-divider { border-color: var(--tblr-border-color) !important; } /* Active theme option — indigo tint */ .navbar .theme-toggle__menu .theme-toggle__option.dropdown-item[aria-current="true"] { color: var(--tblr-primary) !important; background: var(--tblr-primary-lt) !important; } /* ============================================================ * THEME TOGGLE — native Bootstrap dropdown in the navbar * Button is always dark-styled (navbar is always dark). * Menu follows page theme via .navbar .dropdown-menu above. * ============================================================ */ .theme-toggle { position: relative; display: inline-flex; align-items: center; margin-right: 4px; } /* Button: always dark, hide Bootstrap's caret */ .theme-toggle__btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; padding: 0 !important; background: transparent !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 8px !important; color: #b0b0c4 !important; cursor: pointer; box-shadow: none !important; transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease !important; } .theme-toggle__btn:hover, .theme-toggle__btn:focus, .theme-toggle__btn:active, .theme-toggle__btn.show { color: #f0f0f5 !important; border-color: rgba(255,255,255,0.35) !important; background: rgba(255,255,255,0.08) !important; box-shadow: none !important; } /* Hide Bootstrap's auto-generated dropdown caret */ .theme-toggle__btn::after { display: none !important; } .theme-toggle__btn svg { width: 18px; height: 18px; display: block; } /* Option layout — flex row with icon + label + checkmark */ .theme-toggle__menu .theme-toggle__option.dropdown-item { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 14px; font-weight: 500; } .theme-toggle__option-check { margin-left: auto; opacity: 0; display: flex; align-items: center; color: var(--tblr-primary); } .theme-toggle__option.dropdown-item[aria-current="true"] .theme-toggle__option-check { opacity: 1; }