/* ====================================================================== Bootstrap 3 — Dark Theme (consolidated + fixes) Scope: only when is present. Navbar/footer left untouched. ====================================================================== */ body.theme-dark { /* design tokens */ --bg: #0f1318; --panel: #1b2129; --panel-soft: #222934; --panel-border: #2b3442; --text: #e6eaf1; --muted: #b7c0cc; --subtle: #94a0b2; --focus: #8ab4f8; --field: #171c23; --field-border: #2c3644; /* page */ background: #0d1117; /* preferred darker page bg */ color: var(--text); } /* ---------------- Panels ------------------------------------------------ */ body.theme-dark .panel, body.theme-dark .panel-default { background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25); } body.theme-dark .panel > .panel-heading { background-image: linear-gradient(#2b3037, #20262e); border-bottom: 1px solid var(--panel-border); color: var(--text); } body.theme-dark .panel > .panel-footer { background: var(--panel-soft); border-top: 1px solid var(--panel-border); color: var(--muted); } /* panel-primary */ body.theme-dark .panel-primary { background: var(--panel); border: 1px solid #3a475d; color: var(--text); box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.22); } body.theme-dark .panel-primary > .panel-heading { background-image: linear-gradient(#303a4d, #242c3a); border-bottom: 1px solid #3a475d; } body.theme-dark .panel-primary > .panel-heading .panel-title { color: var(--text); } /* panel content split with side nav */ body.theme-dark .panel .panel-navigation { background: var(--panel-soft); border-right: 1px solid var(--panel-border); border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding: 6px 0; color: var(--text); } body.theme-dark .panel .panel-navigation a { display: block; padding: 10px 14px; color: var(--text); text-decoration: none; border-top: 1px solid rgba(255,255,255,.03); border-bottom: 1px solid rgba(0,0,0,.25); } body.theme-dark .panel .panel-navigation a:first-child { border-top-color: transparent; } body.theme-dark .panel .panel-navigation a:last-child { border-bottom-color: transparent; } body.theme-dark .panel .panel-navigation a:hover, body.theme-dark .panel .panel-navigation a:focus { background: #273142; outline: none; } body.theme-dark .panel .panel-navigation a.active { background-image: linear-gradient(#303a4d, #242c3a); color: #fff; border-left: 3px solid #3b6bd8; padding-left: 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.25); } body.theme-dark .panel .panel-content { background: var(--panel); border-left: 1px solid var(--panel-border); border-top-right-radius: 4px; border-bottom-right-radius: 4px; color: var(--text); } /* utility (BS3) */ body.theme-dark .row.no-gutters { margin-right: 0; margin-left: 0; } body.theme-dark .row.no-gutters > [class^="col-"], body.theme-dark .row.no-gutters > [class*=" col-"] { padding-right: 0; padding-left: 0; } .p-4 { padding: 1.5rem !important; } /* optional panel-body for pages without side-nav */ body.theme-dark .panel .panel-body { background: var(--panel); color: var(--text); border-top: 1px solid var(--panel-border); } /* ---------------- Links (targeted) ------------------------------------- */ /* Only style the explicit .link-primary used on login + device edit */ /* Dark mode: improve contrast for .link-primary (login + device edit) */ body.theme-dark a.link-primary { font-weight: bold; color: #d2b48c; /* warm tan with clear contrast */ text-shadow: 0 1px 0 rgba(0,0,0,.35); } body.theme-dark a.link-primary:hover, body.theme-dark a.link-primary:focus { color: #e2c08f; /* slightly brighter on hover/focus */ text-decoration: none; } body.theme-dark a.link-primary:active { color: #c7a773; /* subtle press */ } /* ---------------- Lists / Labels / Tooltips ----------------------------- */ body.theme-dark .list-group .font-weight-bold { background: #141a23; color: var(--muted); border-top: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border); } body.theme-dark .list-group-item { background: var(--panel); color: var(--text); border-color: var(--panel-border); } body.theme-dark .list-group-item + .list-group-item { border-top-color: var(--panel-border); } body.theme-dark .list-group-item:hover { background: var(--panel-soft); } body.theme-dark .label { border-radius: 10px; text-shadow: 0 1px 0 rgba(0,0,0,.35); } body.theme-dark .label-default { background: #485569; } body.theme-dark .label-success { background: #1f9d5a; } body.theme-dark .label-info { background: #2b95c7; border: 1px solid #1a6e98; color: #fff; } body.theme-dark .label-warning { background: #e0a800; color: #111; border: 1px solid #b58600; } body.theme-dark .label-danger { background: #c44b5a; border: 1px solid #9e3946; } /* unified “primary” pill to match dark primary buttons */ body.theme-dark .label-primary { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.45); background-image: linear-gradient(#5a6270, #353b40); border: 1px solid #101317; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.03); } body.theme-dark .btn .label { position: relative; top: -1px; } body.theme-dark .tooltip-inner { background: #202938; color: var(--text); border: 1px solid var(--panel-border); } body.theme-dark .tooltip.top .tooltip-arrow { border-top-color: #202938; } /* ---------------- Forms -------------------------------------------------- */ body.theme-dark .form-group label, body.theme-dark .control-label { color: var(--muted); } body.theme-dark .help-block, body.theme-dark .small, body.theme-dark small { color: var(--subtle); } body.theme-dark .form-control { background: var(--field); border: 1px solid var(--field-border); color: var(--text); box-shadow: none; } body.theme-dark .form-control::placeholder { color: #9aa6b7; } body.theme-dark .form-control:-ms-input-placeholder { color: #9aa6b7; } body.theme-dark .form-control::-ms-input-placeholder { color: #9aa6b7; } body.theme-dark .form-control:focus { background: var(--field); border-color: var(--focus); outline: 0; box-shadow: 0 0 0 3px rgba(138,180,248,.25); } body.theme-dark .input-group-addon { background: var(--panel-soft); border: 1px solid var(--panel-border); color: var(--muted); } body.theme-dark .checkbox label, body.theme-dark .radio label { color: var(--text); } /* validation */ body.theme-dark .has-error .control-label, body.theme-dark .has-error .help-block { color: #ffb3b8; } body.theme-dark .has-error .form-control { border-color: #e56a76; box-shadow: none; } body.theme-dark .has-error .form-control:focus { border-color: #ff8896; box-shadow: 0 0 0 3px rgba(255,136,150,.25); } /* checkboxes (modern) */ body.theme-dark input[type="checkbox"] { width: 16px; height: 16px; accent-color: #2fb36d; } body.theme-dark input[type="checkbox"]:focus { outline: none; box-shadow: 0 0 0 3px rgba(138,180,248,.25); } /* ---------------- Tables ------------------------------------------------- */ body.theme-dark .table { background: transparent; color: var(--text); } body.theme-dark .table-bordered { border-color: var(--panel-border); } body.theme-dark .table > thead > tr > th, body.theme-dark .table > tbody > tr > td { border-color: var(--panel-border); } body.theme-dark .table thead th { background: #1a2230; color: var(--muted); vertical-align: middle; } body.theme-dark .table-hover > tbody > tr:hover { background: var(--panel-soft); } /* inputs inside table rows */ body.theme-dark .table .form-control { background: var(--field); border: 1px solid var(--field-border); color: var(--text); box-shadow: none; } body.theme-dark .table .form-control:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(138,180,248,.25); } body.theme-dark .table .form-control[disabled], body.theme-dark .table .form-control[readonly], body.theme-dark fieldset[disabled] .form-control { background: #1a2029; color: var(--muted); border-color: var(--panel-border); opacity: 1; cursor: not-allowed; } /* ---------------- Dropdowns / Menus ------------------------------------ */ body.theme-dark .btn-group.open .dropdown-toggle { box-shadow: inset 0 0 0 9999px rgba(255,255,255,.03); } body.theme-dark .dropdown-menu { background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25); } /* Regular dropdown options */ body.theme-dark .dropdown-menu > li > a { color: var(--text); } body.theme-dark .dropdown-menu > li > a:hover, body.theme-dark .dropdown-menu > li > a:focus { background: var(--panel-soft); color: var(--text); } /* Divider (and BS4-style .dropdown-divider) */ body.theme-dark .dropdown-menu .divider, body.theme-dark .dropdown-menu .dropdown-divider { height: 1px; margin: 6px 0; background: var(--panel-border); border: 0; } /* Custom select / multiselect */ body.theme-dark .select-button-caret .caret { border-top-color: #e6eaf1; } body.theme-dark .selectpicker-list { background: transparent; } body.theme-dark .selectpicker-list .dropdown-item { display: block; width: 100%; text-align: left; padding: 8px 12px; margin: 0; border: 0; background: transparent; color: var(--text); outline: 0; } body.theme-dark .selectpicker-list .dropdown-item small { color: var(--muted); } body.theme-dark .selectpicker-list .dropdown-item:hover, body.theme-dark .selectpicker-list .dropdown-item:focus { background: var(--panel-soft); color: var(--text); } body.theme-dark .selectpicker-list .dropdown-item.active, body.theme-dark .selectpicker-list .dropdown-item.selected, body.theme-dark .selectpicker-list .dropdown-item[aria-selected="true"] { background: #273142; color: #fff; box-shadow: inset 3px 0 0 #3b6bd8; } /* custom list scrollbar tint */ body.theme-dark .selectpicker-list > div::-webkit-scrollbar { width: 10px; } body.theme-dark .selectpicker-list > div::-webkit-scrollbar-track { background: #131823; } body.theme-dark .selectpicker-list > div::-webkit-scrollbar-thumb { background: #2a3442; border: 3px solid #131823; border-radius: 10px; } /* ---------------- Buttons ------------------------------------------------ */ body.theme-dark .btn-primary { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.4); background-image: linear-gradient(#4a4f57, #2e3339); border: 1px solid #16181b; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.35); } body.theme-dark .btn-primary:hover, body.theme-dark .btn-primary:focus, body.theme-dark .open > .dropdown-toggle.btn-primary { background-image: linear-gradient(#596069, #353b42); border-color: #1b1e22; color: #fff; background-position: initial; } body.theme-dark .btn-primary:active, body.theme-dark .btn-primary.active { background-image: linear-gradient(#2c3036, #262b31); box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.3); } /* info buttons (docs CTA etc.) */ body.theme-dark .btn-info, body.theme-dark a.btn.btn-info { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); background-image: linear-gradient(#49b2e0, #2b95c7); border: 1px solid #1a6e98; } body.theme-dark .btn-info:hover, body.theme-dark .btn-info:focus, body.theme-dark a.btn.btn-info:hover, body.theme-dark a.btn.btn-info:focus { background-image: linear-gradient(#7bd0f0, #43b0dd); border-color: #2391bf; outline: none; } body.theme-dark .btn-info:active, body.theme-dark .btn-info.active, body.theme-dark .open > .dropdown-toggle.btn-info, body.theme-dark a.btn.btn-info:active { background-image: linear-gradient(#2f9dc9, #268cb6); border-color: #1f7ea6; } /* toned-down default, brighter on hover */ body.theme-dark .btn-default, body.theme-dark a.btn.btn-default { color: #1e2530; text-shadow: 0 1px 0 rgba(255,255,255,.55); background-image: linear-gradient(#e4e9f1, #cfd6df); border: 1px solid #9ea9b8; } body.theme-dark .btn-default:hover, body.theme-dark .btn-default:focus, body.theme-dark a.btn.btn-default:hover, body.theme-dark a.btn.btn-default:focus { background-image: linear-gradient(#f2f5f9, #dfe4ec); border-color: #b7c0cc; color: #111922; outline: 0; box-shadow: 0 0 0 3px rgba(138,180,248,.25), inset 0 1px 0 rgba(255,255,255,.85); } body.theme-dark .btn-default:active, body.theme-dark .btn-default.active, body.theme-dark .open > .dropdown-toggle.btn-default, body.theme-dark a.btn.btn-default:active { background-image: linear-gradient(#c4cbd6, #bcc4d0); border-color: #8f9bad; box-shadow: inset 0 2px 6px rgba(0,0,0,.22); } body.theme-dark .btn-default[disabled], body.theme-dark .btn-default.disabled, body.theme-dark fieldset[disabled] .btn-default { color: #7e8794; background-image: linear-gradient(#d9dee6, #c7cfdb); border-color: #b5bfcc; box-shadow: none; } /* ---------------- Nav-pills -------------------------------------------- */ body.theme-dark .panel .nav-pills > li > a { background: transparent; color: var(--text); border: 1px solid var(--panel-border); border-radius: 4px; padding: 8px 14px; } body.theme-dark .panel .nav-pills > li + li { margin-left: 6px; } body.theme-dark .panel .nav-pills > li > a:hover, body.theme-dark .panel .nav-pills > li > a:focus { background: var(--panel-soft); color: var(--text); outline: 0; } body.theme-dark .panel .nav-pills > li.active > a, body.theme-dark .panel .nav-pills > li.active > a:hover, body.theme-dark .panel .nav-pills > li.active > a:focus { color: #fff; background-image: linear-gradient(#4a4f57, #2e3339); border-color: #16181b; } body.theme-dark .panel .nav-pills > li > a .badge { background: #3b6bd8; color: #fff; border-radius: 10px; } /* ---------------- Pagination ------------------------------------------- */ body.theme-dark .pagination > li > a, body.theme-dark .pagination > li > span { background: var(--panel); color: var(--text); border: 1px solid var(--panel-border); text-decoration: none; border-radius: 4px; } body.theme-dark .pagination > li > a:hover, body.theme-dark .pagination > li > a:focus, body.theme-dark .pagination > li > span:hover, body.theme-dark .pagination > li > span:focus { background: var(--panel-soft); color: var(--text); outline: 0; } body.theme-dark .pagination > .active > a, body.theme-dark .pagination > .active > span, body.theme-dark .pagination > .active > a:hover, body.theme-dark .pagination > .active > span:hover, body.theme-dark .pagination > .active > a:focus, body.theme-dark .pagination > .active > span:focus { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.4); background-image: linear-gradient(#4a4f57, #2e3339); border-color: #16181b; cursor: default; } body.theme-dark .pagination > .disabled > a, body.theme-dark .pagination > .disabled > span, body.theme-dark .pagination > .disabled > a:hover, body.theme-dark .pagination > .disabled > span:hover, body.theme-dark .pagination > .disabled > a:focus, body.theme-dark .pagination > .disabled > span:focus { background: #1a2029; color: var(--subtle); border-color: var(--panel-border); cursor: not-allowed; } /* ---------------- Graph page specifics --------------------------------- */ /* status label in header */ body.theme-dark .graph-title-box .label { background: #2b364b; border: 1px solid #3b4a61; color: #e8f0ff; text-shadow: 0 1px 0 rgba(0,0,0,.35); padding: 4px 8px; border-radius: 999px; } /* legend header rows */ body.theme-dark .graph-viewer-legend thead tr:first-child th { background: #1a2230; color: var(--muted); text-transform: none; } body.theme-dark .graph-viewer-legend thead tr:nth-child(2) th { background: #161d28; color: var(--muted); } /* colored series headers: readable text + underline accent */ body.theme-dark .graph-viewer-legend thead th[style*="color"] { position: relative; } body.theme-dark .graph-viewer-legend thead th[style*="color"] > span { color: var(--text) !important; } body.theme-dark .graph-viewer-legend thead th[style*="color"] > span svg { color: var(--subtle) !important; margin-right: 4px; } body.theme-dark .graph-viewer-legend thead th[style*="color"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; opacity: .95; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } /* if any body cells get colored inline, keep text readable */ body.theme-dark .graph-viewer-legend tbody td[style*="color"] > span, body.theme-dark .graph-viewer-legend tbody td[style*="color"] { color: var(--text) !important; } /* plot box stays white; legend/table remains dark */ body.theme-dark .graph-viewer { background: transparent; } body.theme-dark .graph-viewer-box { border: 1px solid var(--panel-border); border-radius: 3px; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; color: #333; } body.theme-dark .dygraph-axis-label, body.theme-dark .dygraph-legend, body.theme-dark .dygraph-label { color: var(--text); } body.theme-dark .graph-viewer-legend-graph { background: var(--panel-soft); color: var(--text); border-color: var(--panel-border); } body.theme-dark .dygraph-rangesel-zoomhandle { background: #e0e6ee; border: 1px solid #78839a; } body.theme-dark .dygraph-rangesel-foreground { border: 1px solid #78839a; } /* ---------------- Modals ------------------------------------------------ */ body.theme-dark .modal-backdrop { background: #0b0f14; } body.theme-dark .modal-backdrop.in { opacity: .75; } body.theme-dark .modal { color: var(--text); } body.theme-dark .modal-content { background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); box-shadow: 0 20px 48px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.35); border-radius: 6px; } body.theme-dark .modal-header { background-image: linear-gradient(#2b3038, #212730); border-bottom: 1px solid var(--panel-border); color: var(--text); border-top-left-radius: 6px; border-top-right-radius: 6px; } body.theme-dark .modal-title { color: var(--text); } body.theme-dark .modal-header .close { color: var(--muted); text-shadow: none; opacity: 1; } body.theme-dark .modal-header .close:hover, body.theme-dark .modal-header .close:focus { color: #fff; opacity: 1; } body.theme-dark .modal-body { background: var(--panel); color: var(--text); } body.theme-dark .modal-body .help-block { color: var(--subtle); } body.theme-dark .modal-body .control-label { color: var(--muted); } body.theme-dark .modal-body fieldset { border: 0; margin-bottom: 16px; } body.theme-dark .modal-body legend { color: var(--text); border-bottom: 1px solid var(--panel-border); padding-bottom: 6px; margin-bottom: 12px; } body.theme-dark .modal-body .input-group-addon { background: var(--panel-soft); border: 1px solid var(--panel-border); color: var(--muted); } body.theme-dark .modal-body .control-label svg { color: var(--subtle); } body.theme-dark .modal-footer { background: var(--panel-soft); border-top: 1px solid var(--panel-border); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } body.theme-dark .modal-body .form-control[disabled], body.theme-dark .modal-body .form-control[readonly], body.theme-dark .modal-body fieldset[disabled] .form-control { background: #1a2029; color: var(--muted); border-color: var(--panel-border); opacity: 1; } body.theme-dark .modal-body .input-group-addon input[type="checkbox"] { accent-color: #2fb36d; } /* ---------------- jQuery MiniColors (Bootstrap theme) ------------------- */ body.theme-dark .minicolors-theme-bootstrap .minicolors-input { background: var(--field); color: var(--text); border: 1px solid var(--field-border); box-shadow: none; } body.theme-dark .minicolors-theme-bootstrap .minicolors-input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(138,180,248,.25); outline: 0; } body.theme-dark .minicolors-theme-bootstrap .minicolors-swatch { background: var(--panel-soft); border: 1px solid var(--panel-border); } body.theme-dark .minicolors-theme-bootstrap .minicolors-swatch-color { border-radius: 2px; } body.theme-dark .minicolors-theme-bootstrap .minicolors-panel { background: var(--panel); border: 1px solid var(--panel-border); box-shadow: 0 8px 24px rgba(0,0,0,.4); } body.theme-dark .minicolors-theme-bootstrap .minicolors-grid, body.theme-dark .minicolors-theme-bootstrap .minicolors-slider, body.theme-dark .minicolors-theme-bootstrap .minicolors-opacity-slider { background-color: #202938; border: 1px solid var(--panel-border); } body.theme-dark .minicolors-theme-bootstrap .minicolors-picker > div { border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55); } /* ======================= NAVBAR (dark) ======================= */ body.theme-dark .navbar, body.theme-dark .navbar-inverse { background-image: linear-gradient(#2b3038, #1d232b); border: 0; border-bottom: 1px solid var(--panel-border); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.35); } /* Brand */ body.theme-dark .navbar .navbar-brand { color: #e9edf4; text-shadow: 0 1px 0 rgba(0,0,0,.4); } body.theme-dark .navbar .navbar-brand:hover, body.theme-dark .navbar .navbar-brand:focus { color: #fff; } /* Links */ body.theme-dark .navbar .navbar-nav > li > a { color: var(--muted); text-shadow: 0 1px 0 rgba(0,0,0,.35); } body.theme-dark .navbar .navbar-nav > li > a:hover, body.theme-dark .navbar .navbar-nav > li > a:focus { color: #fff; background-color: #252c37; /* subtle hover */ outline: 0; } /* Active / open states */ body.theme-dark .navbar .navbar-nav > .active > a, body.theme-dark .navbar .navbar-nav > .active > a:hover, body.theme-dark .navbar .navbar-nav > .active > a:focus, body.theme-dark .navbar .navbar-nav > .open > a, body.theme-dark .navbar .navbar-nav > .open > a:hover, body.theme-dark .navbar .navbar-nav > .open > a:focus { color: #fff; background-image: linear-gradient(#353b44, #262c35); box-shadow: inset 0 -2px 0 #3b6bd8; /* thin primary accent */ outline: 0; } /* Dropdown in navbar (inherits your global dropdown palette) */ body.theme-dark .navbar .dropdown-menu { background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25); } body.theme-dark .navbar .dropdown-menu > li > a { color: var(--text); } body.theme-dark .navbar .dropdown-menu > li > a:hover, body.theme-dark .navbar .dropdown-menu > li > a:focus { background: var(--panel-soft); color: var(--text); } /* Caret + toggler (mobile) */ body.theme-dark .navbar .caret { border-top-color: #cfd6df; border-bottom-color: #cfd6df; } body.theme-dark .navbar-toggle { border-color: var(--panel-border); background: transparent; } body.theme-dark .navbar-toggle .icon-bar { background: #cdd6e3; } body.theme-dark .navbar-toggle:hover, body.theme-dark .navbar-toggle:focus { background: #252c37; } /* Optional: navbar text */ body.theme-dark .navbar .navbar-text { color: var(--muted); } /* ======================= FOOTER (dark) ======================= */ body.theme-dark .footer { background-image: linear-gradient(#212730, #191f26); /* border-top: 1px solid var(--panel-border); */ color: var(--muted); box-shadow: 0 -2px 8px rgba(0,0,0,.25) inset; } body.theme-dark .footer .footer-content { color: var(--muted); } body.theme-dark .footer .footer-content span { color: var(--muted); } body.theme-dark .footer a { color: var(--muted); text-decoration: none; } body.theme-dark .footer a:hover, body.theme-dark .footer a:focus { color: var(--text); text-decoration: none; } /* Footer language chooser */ body.theme-dark .footer .language-box label { color: var(--muted); margin-right: .5rem; } body.theme-dark .footer .language-box .btn-group { margin-left: .25rem; } /* Keep your .btn-info styling for the language buttons (already defined) */ /* Footer: keyboard visibility */ body.theme-dark .footer a:focus-visible, body.theme-dark .footer .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Footer: nicer stacking on mobile */ @media (max-width: 767px) { body.theme-dark .footer { padding: 12px 0; } body.theme-dark .footer .footer-content { text-align: center; } body.theme-dark .footer .language-box { margin-top: 8px; } }