/* * Luminfra — Blesta Client Theme Override * Matches the Luminfra WordPress dark theme palette. * * Drop this file into your Blesta client template directory and * reference it from the template's AFTER the core stylesheets, * or paste its contents into a custom.css if your theme supports one. * * Palette reference: * Slate Navy #1B2430 — page background * Soft Graphite #2E3A48 — cards, panels, nav bar * Cloud Gray #F0F2F4 — body text * Steel Gray #8A97A5 — muted / secondary text * White #FFFFFF — headings * Lumin Pink #E66A89 — primary accent / CTA * Lumin Glow #F28FA7 — hover accent * Amber Gold #D4A847 — warning / badge */ /* ============================================================ CSS Custom Properties ============================================================ */ :root { --lf-bg: #1B2430; --lf-surface: #2E3A48; --lf-surface-alt: #253040; --lf-border: rgba(138, 151, 165, 0.18); --lf-text: #F0F2F4; --lf-text-muted: #8A97A5; --lf-heading: #FFFFFF; --lf-pink: #E66A89; --lf-glow: #F28FA7; --lf-gold: #D4A847; --lf-radius: 8px; } /* ============================================================ Base / Body ============================================================ */ body { background-color: var(--lf-bg) !important; color: var(--lf-text) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important; } /* ============================================================ Links ============================================================ */ a:not(.btn), a:not(.btn):visited { color: var(--lf-pink) !important; text-decoration: none; transition: color 0.18s ease-in-out; } a:not(.btn):hover, a:not(.btn):focus { color: var(--lf-glow) !important; text-decoration: none; } /* Prevent link color rules from bleeding into buttons */ .btn, .btn:visited { color: inherit; } /* ============================================================ Header (.header) ============================================================ */ .header { background: #1B2430 !important; border-bottom: 1px solid var(--lf-border); padding-top: 16px !important; padding-bottom: 16px !important; } .logo { margin: 10px 0 10px 15px !important; } .logo img { height: 48px !important; } .header a, .header a:hover { color: var(--lf-text) !important; } /* Badge / notification counter in header */ .header .badge, .header .label { background-color: var(--lf-pink) !important; color: var(--lf-bg) !important; } /* ============================================================ Top utility nav (.top-nav) — account menu, language, etc. ============================================================ */ .top-nav .dropdown a.dropdown-toggle, .top-nav .dropdown a.dropdown-toggle:focus { color: var(--lf-text-muted) !important; } .top-nav .dropdown a.dropdown-toggle:hover { color: var(--lf-glow) !important; } /* ============================================================ Page title bar (.title) ============================================================ */ .title { background: var(--lf-surface-alt) !important; border-bottom: 1px solid var(--lf-border); } .title h3 { color: var(--lf-heading) !important; } /* ============================================================ Main navigation bar (.nav-content) ============================================================ */ .nav-content nav.navbar, .nav-content div.navbar.pagination { background: var(--lf-surface) !important; border-bottom: 1px solid var(--lf-border); } /* Nav link text */ .nav-content .navbar-nav > li > a, .nav-content .navbar-nav > li > a.nav-link { color: var(--lf-text) !important; transition: color 0.18s ease-in-out; } .nav-content .navbar-nav > li > a:hover, .nav-content .navbar-nav > li > a:focus, .nav-content .navbar-nav > .active > a, .nav-content .navbar-nav > .active > a:hover, .nav-content .navbar-nav > .active > a:focus, .nav-content .navbar-nav > .open > a, .nav-content .navbar-nav > .open > a:hover, .nav-content .navbar-nav > .open > a:focus { color: var(--lf-pink) !important; background: transparent !important; } /* Dropdown menus */ .nav-content .navbar-nav .dropdown-menu, .dropdown-menu { background-color: var(--lf-surface) !important; border: 1px solid var(--lf-border) !important; border-radius: var(--lf-radius) !important; } .nav-content .navbar-nav .dropdown-menu a.dropdown-item, .nav-content .navbar-nav ul.dropdown-menu li a, .dropdown-menu .dropdown-item { color: var(--lf-text) !important; } .nav-content .navbar-nav .dropdown-menu a.dropdown-item:hover, .nav-content .navbar-nav ul.dropdown-menu li a:hover, .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { color: var(--lf-glow) !important; background-color: rgba(230, 106, 137, 0.1) !important; } .dropdown-divider { border-top-color: var(--lf-border) !important; } /* ============================================================ Cards & Panels (.card-blesta, .panel-blesta, .well) ============================================================ */ .card-blesta, .panel-blesta, .card, .panel { background-color: var(--lf-surface) !important; border: 1px solid var(--lf-border) !important; border-radius: var(--lf-radius) !important; color: var(--lf-text) !important; } /* Card / panel header bar */ .card-blesta > .card-header, .panel .card-blesta > .panel-heading, .card-header, .panel-heading { background: var(--lf-surface-alt) !important; color: var(--lf-heading) !important; border-bottom: 1px solid var(--lf-border) !important; border-radius: var(--lf-radius) var(--lf-radius) 0 0 !important; } .card-body, .panel .panel-body { background-color: var(--lf-surface) !important; color: var(--lf-text) !important; } /* Card footer */ .card-footer, .panel .panel-footer { background-color: var(--lf-surface-alt) !important; border-top: 1px solid var(--lf-border) !important; color: var(--lf-text-muted) !important; } /* Well (used for filter forms, info boxes) */ .well, .bg-light { background-color: var(--lf-surface-alt) !important; border: 1px solid var(--lf-border) !important; color: var(--lf-text) !important; } /* Summary/stat cards on the client home */ .cards .card { background: var(--lf-surface) !important; color: var(--lf-text) !important; border: 1px solid var(--lf-border) !important; border-radius: var(--lf-radius) !important; } .cards .card .card-content .card-label { color: var(--lf-text-muted) !important; } /* ============================================================ List groups ============================================================ */ .list-group-item { background-color: var(--lf-surface) !important; border-color: var(--lf-border) !important; color: var(--lf-text) !important; } .list-group-item h4 { color: var(--lf-pink) !important; } .list-group-item.active { background-color: var(--lf-surface-alt) !important; border-color: var(--lf-border) !important; color: var(--lf-text) !important; } .list-group.list-options a.list-group-item:hover, .list-group.list-options a.list-group-item:focus, a.list-group-item:hover, a.list-group-item:focus { background-color: rgba(230, 106, 137, 0.08) !important; color: var(--lf-glow) !important; } /* ============================================================ Tables ============================================================ */ table, .table { color: var(--lf-text) !important; border-color: var(--lf-border) !important; } .table th, .table td, .table thead th { border-color: var(--lf-border) !important; } .table > thead > tr > th { background: var(--lf-surface-alt) !important; color: var(--lf-text-muted) !important; } .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped-alt > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th, .table-striped-alt > tbody > tr:nth-child(2n+1) > th { background-color: var(--lf-bg) !important; } .table-striped > tbody > tr:nth-child(2n) > td, .table-striped-alt > tbody > tr:nth-child(2n) > td { background-color: var(--lf-surface) !important; } .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: rgba(230, 106, 137, 0.07) !important; } .table > tbody > tr.expand_details > td { background-color: var(--lf-surface-alt) !important; border-top: 2px solid var(--lf-pink) !important; } /* ============================================================ Forms & Inputs ============================================================ */ input, textarea, select, .form-control { background-color: var(--lf-bg) !important; color: var(--lf-text) !important; border: 1px solid var(--lf-border) !important; border-radius: 6px !important; } input:focus, textarea:focus, select:focus, .form-control:focus { border-color: var(--lf-pink) !important; box-shadow: 0 0 0 3px rgba(230, 106, 137, 0.2) !important; outline: none !important; } input::placeholder, textarea::placeholder { color: var(--lf-text-muted) !important; } label { color: var(--lf-text-muted) !important; } /* Top focus box (sits above first form row) */ .top-focus-box { background-color: var(--lf-surface-alt) !important; border: 1px solid var(--lf-border) !important; border-radius: var(--lf-radius) !important; } /* ============================================================ Primary Buttons ============================================================ */ .btn-primary { color: var(--lf-bg) !important; background-color: var(--lf-pink) !important; border-color: var(--lf-pink) !important; border-radius: var(--lf-radius) !important; font-weight: 600 !important; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important; } .btn-primary:visited { color: var(--lf-bg) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--lf-glow) !important; border-color: var(--lf-glow) !important; box-shadow: 0 6px 18px rgba(242, 143, 167, 0.35) !important; transform: translateY(-1px) !important; } .btn-primary:focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(242, 143, 167, 0.8), 0 0 0 6px rgba(242, 143, 167, 0.25) !important; } .bg-primary, .badge-primary { background-color: var(--lf-pink) !important; color: var(--lf-bg) !important; } .text-primary { color: var(--lf-pink) !important; } .border-primary { border-color: var(--lf-pink) !important; } .btn-outline-primary { color: var(--lf-pink) !important; border-color: var(--lf-pink) !important; background: transparent !important; border-radius: var(--lf-radius) !important; } .btn-outline-primary:hover { color: var(--lf-bg) !important; background-color: var(--lf-pink) !important; } /* ============================================================ Secondary Buttons ============================================================ */ .btn-secondary { color: var(--lf-text) !important; background-color: var(--lf-surface) !important; border-color: var(--lf-border) !important; border-radius: var(--lf-radius) !important; } .btn-secondary:hover { background-color: var(--lf-surface-alt) !important; border-color: var(--lf-text-muted) !important; } /* ============================================================ Other Button Variants (keep readable on dark bg) ============================================================ */ .btn-light { color: var(--lf-bg) !important; background-color: var(--lf-text) !important; border-color: var(--lf-text) !important; border-radius: var(--lf-radius) !important; } .btn-light:hover { background-color: #d0d6db !important; } .btn-dark { color: var(--lf-text) !important; background-color: #101621 !important; border-color: var(--lf-border) !important; border-radius: var(--lf-radius) !important; } /* Warning button — use amber gold */ .btn-warning { color: var(--lf-bg) !important; background-color: var(--lf-gold) !important; border-color: var(--lf-gold) !important; border-radius: var(--lf-radius) !important; } .btn-warning:hover { background-color: #c2983a !important; border-color: #c2983a !important; } /* ============================================================ Alerts ============================================================ */ .alert { border-radius: var(--lf-radius) !important; border: 1px solid; } .alert-primary { background: rgba(230, 106, 137, 0.12) !important; border-color: rgba(230, 106, 137, 0.35) !important; color: var(--lf-glow) !important; } .alert-success { background: rgba(40, 167, 69, 0.12) !important; border-color: rgba(40, 167, 69, 0.35) !important; color: #6ddb8a !important; } .alert-danger { background: rgba(220, 53, 69, 0.12) !important; border-color: rgba(220, 53, 69, 0.35) !important; color: #f07880 !important; } .alert-warning { background: rgba(212, 168, 71, 0.12) !important; border-color: rgba(212, 168, 71, 0.35) !important; color: var(--lf-gold) !important; } .alert-info { background: rgba(23, 162, 184, 0.12) !important; border-color: rgba(23, 162, 184, 0.35) !important; color: #5bc8d8 !important; } /* ============================================================ Badges ============================================================ */ .badge-warning, .bg-warning { background-color: var(--lf-gold) !important; color: var(--lf-bg) !important; } .badge-success, .bg-success { background-color: #28a745 !important; color: #fff !important; } .btn-success { color: #fff !important; background-color: #28a745 !important; border-color: #28a745 !important; border-radius: var(--lf-radius) !important; } .btn-success:visited { color: #fff !important; } .btn-success:hover { color: #fff !important; background-color: #218838 !important; border-color: #1e7e34 !important; } .badge-danger, .bg-danger { background-color: #dc3545 !important; color: #fff !important; } .badge-info, .bg-info { background-color: #17a2b8 !important; color: #fff !important; } /* ============================================================ Pagination ============================================================ */ .pagination .page-item.active .page-link, div.pagination ul.pagination li.active .page-link, div.pagination ul.pagination li.active a { background-color: var(--lf-pink) !important; border-color: var(--lf-pink) !important; color: var(--lf-bg) !important; } .page-link { background-color: var(--lf-surface) !important; border-color: var(--lf-border) !important; color: var(--lf-text) !important; } .page-link:hover { background-color: var(--lf-surface-alt) !important; color: var(--lf-pink) !important; } /* ============================================================ Modals ============================================================ */ .modal-content { background-color: var(--lf-surface) !important; border: 1px solid var(--lf-border) !important; border-radius: var(--lf-radius) !important; color: var(--lf-text) !important; } .modal-header { border-bottom: 1px solid var(--lf-border) !important; } .modal-header h5, .modal-title { color: var(--lf-heading) !important; } .modal-footer { border-top: 1px solid var(--lf-border) !important; } /* ============================================================ Tabs ============================================================ */ .nav-tabs { border-bottom: 1px solid var(--lf-border) !important; } .nav-tabs .nav-link { color: var(--lf-text-muted) !important; background: transparent !important; border-color: transparent !important; border-radius: var(--lf-radius) var(--lf-radius) 0 0 !important; } .nav-tabs .nav-link:hover { color: var(--lf-text) !important; border-color: var(--lf-border) var(--lf-border) transparent !important; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--lf-heading) !important; background-color: var(--lf-surface) !important; border-color: var(--lf-border) var(--lf-border) var(--lf-surface) !important; } /* ============================================================ Footer ============================================================ */ .footer { background-color: var(--lf-surface) !important; border-top: 1px solid var(--lf-border) !important; color: var(--lf-text-muted) !important; } .footer a { color: var(--lf-text-muted) !important; } .footer a:hover { color: var(--lf-glow) !important; } /* ============================================================ Headings ============================================================ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--lf-heading) !important; } /* ============================================================ Miscellaneous ============================================================ */ /* Horizontal rules */ hr { border-color: var(--lf-border) !important; } /* Settings credits link */ .list-group-item.credits { color: var(--lf-text-muted) !important; } /* Card links separator pipe */ .card-links > li + li:before, .panel-links > li + li:before { color: var(--lf-border) !important; } /* Package description text */ .pkg-description { color: var(--lf-text-muted) !important; } /* Column border dividers */ .col-border { border-right: 1px solid var(--lf-border) !important; } /* Login page centering — keep bg consistent */ .row.login { background-color: var(--lf-bg); } /* Code blocks */ code, pre { background-color: var(--lf-bg) !important; color: var(--lf-glow) !important; border: 1px solid var(--lf-border) !important; border-radius: 4px !important; }