/* ===================================================================== Customer-portal themes — Bootstrap-3 skin matching the operator site. Applied by adding `theme-slate` / `theme-ocean` / `theme-matrix` to . Default is slate (set in portalController). Remembered via the `portal_theme` cookie. Light/default Bootstrap remains when no class set. Palettes (shared with the operator themes): slate bg #1a1d21 panels #24282e head #2a2f36 accent #6ea8fe text #c8ccd2 border #383d45 muted #8a9099 ocean bg #0a1622 panels #0f2233 head #123047 accent #22d3ee text #c2d6e6 border #1e3a52 muted #6b8aa3 matrix bg #000000 panels #07120a head #0a1f10 accent #39ff14 text #b9f5c0 border #143d1f muted #5f8f68 ===================================================================== */ /* ---------- Action buttons: bright + readable across all portal themes ---------- */ body[class*="theme-"] .btn-success { background:#2faa4a !important; border-color:#268a3c !important; color:#ffffff !important; } body[class*="theme-"] .btn-success:hover, body[class*="theme-"] .btn-success:focus { background:#37c456 !important; color:#ffffff !important; } body[class*="theme-"] .btn-info { background:#2aa3c4 !important; border-color:#2389a6 !important; color:#ffffff !important; } body[class*="theme-"] .btn-info:hover, body[class*="theme-"] .btn-info:focus { background:#33bbe0 !important; color:#ffffff !important; } body[class*="theme-"] .btn-primary { background:#3f86d6 !important; border-color:#346fb3 !important; color:#ffffff !important; } body[class*="theme-"] .btn-primary:hover, body[class*="theme-"] .btn-primary:focus { background:#5b9be6 !important; color:#ffffff !important; } body[class*="theme-"] .btn-warning { background:#e0a52b !important; border-color:#c08c1f !important; color:#ffffff !important; } body[class*="theme-"] .btn-success.disabled, body[class*="theme-"] .btn-success[disabled] { background:#3a5a42 !important; border-color:#2f4a36 !important; color:#cde6d4 !important; } /* ---------- SLATE ---------- */ body.theme-slate { background:#1a1d21 !important; color:#c8ccd2 !important; } body.theme-slate h1,body.theme-slate h2,body.theme-slate h3,body.theme-slate h4,body.theme-slate h5,body.theme-slate h6, body.theme-slate strong,body.theme-slate b { color:#eceef1 !important; } body.theme-slate a { color:#6ea8fe !important; } body.theme-slate a:hover,body.theme-slate a:focus { color:#9ec5ff !important; } body.theme-slate .text-muted,body.theme-slate small { color:#8a9099 !important; } body.theme-slate hr { border-color:#2f343b !important; } body.theme-slate .navbar-default { background:#16191d !important; border-color:#383d45 !important; } body.theme-slate .navbar-default .navbar-brand,body.theme-slate .navbar-default .navbar-nav > li > a, body.theme-slate .navbar-default .navbar-text { color:#dfe3e8 !important; } body.theme-slate .panel { background:#24282e !important; border-color:#383d45 !important; } body.theme-slate .panel-body { background:#24282e !important; color:#c8ccd2 !important; } body.theme-slate .panel-heading { background:#2a2f36 !important; color:#eceef1 !important; border-color:#383d45 !important; } body.theme-slate .panel-primary { border-color:#3a6ea5 !important; } body.theme-slate .panel-warning > .panel-heading { background:#2f2a16 !important; color:#ffcc33 !important; border-color:#5a4a12 !important; } body.theme-slate .panel-danger > .panel-heading { background:#2f1818 !important; color:#ff6666 !important; border-color:#5a1212 !important; } body.theme-slate .well { background:#1e2228 !important; border-color:#383d45 !important; color:#c8ccd2 !important; } body.theme-slate .table { color:#c8ccd2 !important; } body.theme-slate .table > thead > tr > th { color:#eceef1 !important; border-color:#383d45 !important; border-bottom-color:#6ea8fe !important; } body.theme-slate .table > tbody > tr > td,body.theme-slate .table > tbody > tr > th { border-color:#2f343b !important; } body.theme-slate .table-striped > tbody > tr:nth-of-type(odd) { background:#1e2228 !important; } body.theme-slate .table-hover > tbody > tr:hover { background:#2e333b !important; } body.theme-slate .form-control { background:#1e2228 !important; border-color:#383d45 !important; color:#dfe3e8 !important; } body.theme-slate .form-control::placeholder { color:#6b7178 !important; } body.theme-slate .btn-default { background:#2a2f36 !important; border-color:#3a4049 !important; color:#dfe3e8 !important; } body.theme-slate .btn-primary { background:#3a6ea5 !important; border-color:#2f5a86 !important; color:#fff !important; } body.theme-slate .modal-content { background:#24282e !important; color:#c8ccd2 !important; border-color:#383d45 !important; } body.theme-slate .modal-header,body.theme-slate .modal-footer { border-color:#383d45 !important; } body.theme-slate .list-group-item { background:#24282e !important; border-color:#383d45 !important; color:#c8ccd2 !important; } body.theme-slate .traffic-card .traffic-label { color:#8a9099 !important; } /* ---------- OCEAN ---------- */ body.theme-ocean { background:#0a1622 !important; color:#c2d6e6 !important; } body.theme-ocean h1,body.theme-ocean h2,body.theme-ocean h3,body.theme-ocean h4,body.theme-ocean h5,body.theme-ocean h6, body.theme-ocean strong,body.theme-ocean b { color:#eaf4fb !important; } body.theme-ocean a { color:#22d3ee !important; } body.theme-ocean a:hover,body.theme-ocean a:focus { color:#67e8f9 !important; } body.theme-ocean .text-muted,body.theme-ocean small { color:#6b8aa3 !important; } body.theme-ocean hr { border-color:#1e3a52 !important; } body.theme-ocean .navbar-default { background:#07111c !important; border-color:#1e3a52 !important; } body.theme-ocean .navbar-default .navbar-brand,body.theme-ocean .navbar-default .navbar-nav > li > a, body.theme-ocean .navbar-default .navbar-text { color:#d4e6f2 !important; } body.theme-ocean .panel { background:#0f2233 !important; border-color:#1e3a52 !important; } body.theme-ocean .panel-body { background:#0f2233 !important; color:#c2d6e6 !important; } body.theme-ocean .panel-heading { background:#123047 !important; color:#eaf4fb !important; border-color:#1e3a52 !important; } body.theme-ocean .panel-primary { border-color:#22d3ee !important; } body.theme-ocean .panel-warning > .panel-heading { background:#2f2a16 !important; color:#ffcc33 !important; border-color:#5a4a12 !important; } body.theme-ocean .panel-danger > .panel-heading { background:#2f1818 !important; color:#ff6666 !important; border-color:#5a1212 !important; } body.theme-ocean .well { background:#0c1c2b !important; border-color:#1e3a52 !important; color:#c2d6e6 !important; } body.theme-ocean .table { color:#c2d6e6 !important; } body.theme-ocean .table > thead > tr > th { color:#eaf4fb !important; border-color:#1e3a52 !important; border-bottom-color:#22d3ee !important; } body.theme-ocean .table > tbody > tr > td,body.theme-ocean .table > tbody > tr > th { border-color:#16293b !important; } body.theme-ocean .table-striped > tbody > tr:nth-of-type(odd) { background:#0c1c2b !important; } body.theme-ocean .table-hover > tbody > tr:hover { background:#15334a !important; } body.theme-ocean .form-control { background:#0c1c2b !important; border-color:#1e3a52 !important; color:#d4e6f2 !important; } body.theme-ocean .form-control::placeholder { color:#557289 !important; } body.theme-ocean .btn-default { background:#123047 !important; border-color:#1e3a52 !important; color:#d4e6f2 !important; } body.theme-ocean .btn-primary { background:#0e7490 !important; border-color:#0b5e74 !important; color:#fff !important; } body.theme-ocean .modal-content { background:#0f2233 !important; color:#c2d6e6 !important; border-color:#1e3a52 !important; } body.theme-ocean .modal-header,body.theme-ocean .modal-footer { border-color:#1e3a52 !important; } body.theme-ocean .list-group-item { background:#0f2233 !important; border-color:#1e3a52 !important; color:#c2d6e6 !important; } body.theme-ocean .traffic-card .traffic-label { color:#6b8aa3 !important; } /* ---------- MATRIX ---------- */ body.theme-matrix { background:#000000 !important; color:#b9f5c0 !important; } body.theme-matrix h1,body.theme-matrix h2,body.theme-matrix h3,body.theme-matrix h4,body.theme-matrix h5,body.theme-matrix h6, body.theme-matrix strong,body.theme-matrix b { color:#39ff14 !important; } body.theme-matrix a { color:#39ff14 !important; } body.theme-matrix a:hover,body.theme-matrix a:focus { color:#7dff5e !important; } body.theme-matrix .text-muted,body.theme-matrix small { color:#5f8f68 !important; } body.theme-matrix hr { border-color:#143d1f !important; } body.theme-matrix .navbar-default { background:#050d07 !important; border-color:#143d1f !important; } body.theme-matrix .navbar-default .navbar-brand,body.theme-matrix .navbar-default .navbar-nav > li > a, body.theme-matrix .navbar-default .navbar-text { color:#b9f5c0 !important; } body.theme-matrix .panel { background:#07120a !important; border-color:#143d1f !important; } body.theme-matrix .panel-body { background:#07120a !important; color:#b9f5c0 !important; } body.theme-matrix .panel-heading { background:#0a1f10 !important; color:#39ff14 !important; border-color:#143d1f !important; } body.theme-matrix .panel-primary { border-color:#39ff14 !important; } body.theme-matrix .panel-warning > .panel-heading { background:#2a2706 !important; color:#ffe14d !important; border-color:#4d4710 !important; } body.theme-matrix .panel-danger > .panel-heading { background:#2a0a0a !important; color:#ff5e5e !important; border-color:#4d1010 !important; } body.theme-matrix .well { background:#08140a !important; border-color:#143d1f !important; color:#b9f5c0 !important; } body.theme-matrix .table { color:#b9f5c0 !important; } body.theme-matrix .table > thead > tr > th { color:#39ff14 !important; border-color:#143d1f !important; border-bottom-color:#39ff14 !important; } body.theme-matrix .table > tbody > tr > td,body.theme-matrix .table > tbody > tr > th { border-color:#0f2d17 !important; } body.theme-matrix .table-striped > tbody > tr:nth-of-type(odd) { background:#08140a !important; } body.theme-matrix .table-hover > tbody > tr:hover { background:#0f2d17 !important; } body.theme-matrix .form-control { background:#08140a !important; border-color:#143d1f !important; color:#b9f5c0 !important; } body.theme-matrix .form-control::placeholder { color:#3f6346 !important; } body.theme-matrix .btn-default { background:#0a1f10 !important; border-color:#143d1f !important; color:#b9f5c0 !important; } body.theme-matrix .btn-primary { background:#1e7a12 !important; border-color:#155c0d !important; color:#eaffe6 !important; } body.theme-matrix .modal-content { background:#07120a !important; color:#b9f5c0 !important; border-color:#143d1f !important; } body.theme-matrix .modal-header,body.theme-matrix .modal-footer { border-color:#143d1f !important; } body.theme-matrix .list-group-item { background:#07120a !important; border-color:#143d1f !important; color:#b9f5c0 !important; } body.theme-matrix .traffic-card .traffic-label { color:#5f8f68 !important; } /* ---------- THEME SWITCHER / navbar dropdown (readable on every theme) ---------- */ .portal-theme-menu .dropdown-menu { min-width: 180px; padding: 4px 0; } .portal-theme-menu .dropdown-header { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; } .portal-theme-menu .dropdown-menu > li > a { padding: 7px 16px; } /* Stop the navbar items from colliding on small screens — let them wrap neatly. */ .navbar-default .navbar-nav.navbar-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; } .navbar-default .navbar-nav.navbar-right > li { float: none; } @media (max-width: 767px) { .navbar-default .navbar-nav.navbar-right { padding: 6px 0; } .navbar-default .navbar-nav.navbar-right > li > a { padding-top: 8px; padding-bottom: 8px; } } /* Dark themes: make the dropdown match the panels instead of a bright white box. */ body.theme-slate .dropdown-menu { background:#24282e !important; border-color:#383d45 !important; } body.theme-slate .dropdown-menu > li > a { color:#dfe3e8 !important; } body.theme-slate .dropdown-menu > li > a:hover { background:#2e333b !important; color:#fff !important; } body.theme-slate .dropdown-menu > .active > a, body.theme-slate .dropdown-menu > .active > a:hover { background:#3a6ea5 !important; color:#fff !important; } body.theme-slate .dropdown-header { color:#8a9099 !important; } body.theme-ocean .dropdown-menu { background:#0f2233 !important; border-color:#1e3a52 !important; } body.theme-ocean .dropdown-menu > li > a { color:#d4e6f2 !important; } body.theme-ocean .dropdown-menu > li > a:hover { background:#15334a !important; color:#fff !important; } body.theme-ocean .dropdown-menu > .active > a, body.theme-ocean .dropdown-menu > .active > a:hover { background:#0e7490 !important; color:#fff !important; } body.theme-ocean .dropdown-header { color:#6b8aa3 !important; } body.theme-matrix .dropdown-menu { background:#07120a !important; border-color:#143d1f !important; } body.theme-matrix .dropdown-menu > li > a { color:#b9f5c0 !important; } body.theme-matrix .dropdown-menu > li > a:hover { background:#0f2d17 !important; color:#39ff14 !important; } body.theme-matrix .dropdown-menu > .active > a, body.theme-matrix .dropdown-menu > .active > a:hover { background:#1e7a12 !important; color:#eaffe6 !important; } body.theme-matrix .dropdown-header { color:#5f8f68 !important; } /* ---------- LOGIN PAGE (Bootstrap 4/5 .form-signin) ---------- */ body.theme-slate.text-center { background:#1a1d21 !important; color:#c8ccd2 !important; } body.theme-slate .form-signin h1,body.theme-slate .form-signin label { color:#eceef1 !important; } body.theme-slate .form-signin .form-control { background:#1e2228 !important; border-color:#383d45 !important; color:#dfe3e8 !important; } body.theme-slate .form-signin .text-muted { color:#8a9099 !important; } body.theme-slate .form-signin .btn-primary { background:#3a6ea5 !important; border-color:#2f5a86 !important; } body.theme-ocean.text-center { background:#0a1622 !important; color:#c2d6e6 !important; } body.theme-ocean .form-signin h1,body.theme-ocean .form-signin label { color:#eaf4fb !important; } body.theme-ocean .form-signin .form-control { background:#0c1c2b !important; border-color:#1e3a52 !important; color:#d4e6f2 !important; } body.theme-ocean .form-signin .text-muted { color:#6b8aa3 !important; } body.theme-ocean .form-signin .btn-primary { background:#0e7490 !important; border-color:#0b5e74 !important; } body.theme-matrix.text-center { background:#000000 !important; color:#b9f5c0 !important; } body.theme-matrix .form-signin h1,body.theme-matrix .form-signin label { color:#39ff14 !important; } body.theme-matrix .form-signin .form-control { background:#08140a !important; border-color:#143d1f !important; color:#b9f5c0 !important; } body.theme-matrix .form-signin .text-muted { color:#5f8f68 !important; } body.theme-matrix .form-signin .btn-primary { background:#1e7a12 !important; border-color:#155c0d !important; }