/* ============================================================================ JA Teline V — DARK MODE (templates/ja_teline_v/css/darkmode.css) ---------------------------------------------------------------------------- DEDICATED dark-mode stylesheet — NOT the owner's custom.css. It is loaded LAST in (after template.css and custom.css) by tpls/blocks/head.php, and by the standalone error.php / offline.php. Keep all dark rules here so custom.css stays a clean, owner-editable stub. Light mode is the original, approved design and is NOT modified by this file. Every dark rule is scoped under html[data-theme="dark"] (set pre-paint by the script in tpls/blocks/head.php; toggled by the two-button .ja-theme-switch). The only unscoped rules below are the toggle button itself. This template has NO CSS custom properties of its own (all LESS-compiled literals), so dark mode overrides literal values per rule. The palette is centralised in the --dm-* variables below: edit those to retune the whole dark theme. Brand accent #cc0000 and the per-category cat-* accents are intentionally unchanged. ========================================================================== */ /* ---- Theme switch (both modes) ------------------------------------------ A two-segment control (sun | moon) in the topbar's top-right, next to the search module — one consistent location on every page (the topbar .top-right is position:fixed on mobile, so it stays reachable there too). The active segment shows the current theme; clicking the other one switches. */ .t3-topbar .top-right .ja-theme-switch { float: left; height: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 12px; border-right: 1px solid #e5e5e5; /* same separator the topbar uses in light */ } .ja-theme-switch { gap: 4px; } .ja-ts-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 26px; height: 26px; margin: 0 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #999999; cursor: pointer; line-height: 1; } .ja-ts-btn:hover { color: #cc0000; } .ja-ts-btn svg { display: block; } /* active segment — light mode: sun selected, dark chip (the topnav's own #111-on-light language); dark mode: moon selected, inverted light chip */ .ja-ts-light { background: #111111; color: #ffffff; } .ja-ts-light:hover { color: #ffffff; } html[data-theme="dark"] .ja-ts-light { background: transparent; color: var(--dm-text-muted); } html[data-theme="dark"] .ja-ts-light:hover { color: var(--dm-accent-soft); } html[data-theme="dark"] .ja-ts-dark { background: #f0f0f0; color: #111111; } html[data-theme="dark"] .ja-ts-dark:hover { color: #111111; } html[data-theme="dark"] .t3-topbar .top-right .ja-theme-switch { border-right-color: var(--dm-border); } /* off-canvas header copy (panel is dark in both modes) */ .t3-off-canvas-header .ja-theme-switch { position: absolute; top: 16px; right: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; } .t3-off-canvas-header .ja-ts-btn { color: #888888; } /* the off-canvas panel is dark in BOTH modes — the active chip must be light there (the #111 chip used on the light topbar would vanish on #000) */ .t3-off-canvas-header .ja-ts-light { background: #e5e5e5; color: #111111; } .t3-off-canvas-header .ja-ts-light:hover { color: #111111; } html[data-theme="dark"] .t3-off-canvas-header .ja-ts-light { background: transparent; color: #888888; } html[data-theme="dark"] .t3-off-canvas-header .ja-ts-light:hover { color: var(--dm-accent-soft); } /* ---- Dark palette (single source of truth) ------------------------------ */ html[data-theme="dark"] { --dm-bg: #141414; /* page background (footer stays #111) */ --dm-band: #1a1a1a; /* section bands (light: #f8f8f8) */ --dm-surface: #1d1d1d; /* opaque cards/panels (light: #fff surfaces) */ --dm-surface-2: #262626; /* elevated: dropdowns, inputs, hovers */ --dm-border: #2e2e2e; /* dividers (light: #e5e5e5) */ --dm-text: #c9c9c9; /* body copy (light: #333) */ --dm-text-muted: #8f8f8f; /* meta/muted (light: #999/#666) */ --dm-heading: #f0f0f0; /* headings (light: inherit #333) */ --dm-accent: #cc0000; /* brand — unchanged */ --dm-accent-soft: #ff6666; /* hover/lift shade for text on dark */ --dm-link: #e85555; /* text links (mirrors light's #cc0000/white) */ --dm-link-hover: #ff7777; /* link hover */ color-scheme: dark; /* native widgets: scrollbars, selects, etc. */ } /* ---- Base --------------------------------------------------------------- */ html[data-theme="dark"] body { background-color: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] .t3-wrapper { background-color: var(--dm-bg); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--dm-heading); } /* Links: light is #cc0000 on white (5.9:1). Same red on the dark page is 3:1, so dark uses a lifted red to mirror light's readability. Class-styled links (buttons, on-image titles, nav) keep their own colors. */ html[data-theme="dark"] a { color: var(--dm-link); } html[data-theme="dark"] a:hover, html[data-theme="dark"] a:focus { color: var(--dm-link-hover); } /* The rule above outranks light's single-class color rules (labels, semantic buttons, on-fill chips) because of the scope's extra specificity — restore the white-on-fill text those elements have in light: */ html[data-theme="dark"] .label, html[data-theme="dark"] a.label, html[data-theme="dark"] a.label:hover, html[data-theme="dark"] a.label:focus { color: #ffffff; } html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-primary:focus, html[data-theme="dark"] .btn-success, html[data-theme="dark"] .btn-success:hover, html[data-theme="dark"] .btn-success:focus, html[data-theme="dark"] .btn-info, html[data-theme="dark"] .btn-info:hover, html[data-theme="dark"] .btn-info:focus, html[data-theme="dark"] .btn-warning, html[data-theme="dark"] .btn-warning:hover, html[data-theme="dark"] .btn-warning:focus, html[data-theme="dark"] .btn-danger, html[data-theme="dark"] .btn-danger:hover, html[data-theme="dark"] .btn-danger:focus { color: #ffffff; } html[data-theme="dark"] .magazine-category-title h2 > a { color: #ffffff; } /* ---- Topbar / topnav ----------------------------------------------------- */ html[data-theme="dark"] .t3-topbar { background: var(--dm-band); border-bottom-color: var(--dm-border); } html[data-theme="dark"] .t3-topnav .nav > li > a, html[data-theme="dark"] .t3-topnav .nav > li > span { color: var(--dm-text); border-right-color: var(--dm-border); } html[data-theme="dark"] .t3-topnav .nav > li > a:hover, html[data-theme="dark"] .t3-topnav .nav > li > span:hover, html[data-theme="dark"] .t3-topnav .nav > li > a:focus, html[data-theme="dark"] .t3-topnav .nav > li > span:focus { color: #ffffff; background-color: var(--dm-surface-2); border-color: var(--dm-surface-2); } /* light's active = page-color island on the band; mirror with the dark page color */ html[data-theme="dark"] .t3-topnav .nav > .active > a, html[data-theme="dark"] .t3-topnav .nav > .active > a:hover, html[data-theme="dark"] .t3-topnav .nav > .active > a:focus { color: var(--dm-heading); background-color: var(--dm-bg); border-color: var(--dm-border); } html[data-theme="dark"] .t3-topnav .nav > li .caret { border-top-color: var(--dm-border); border-bottom-color: var(--dm-border); } html[data-theme="dark"] .t3-topnav .nav > li > span:before { border-top-color: var(--dm-border); border-bottom-color: var(--dm-border); } /* ---- Header -------------------------------------------------------------- */ html[data-theme="dark"] .header-right .calendar { background: var(--dm-surface-2); color: var(--dm-text); } html[data-theme="dark"] .header-right .whatsnew { border-left-color: var(--dm-border); } /* mobile fixed header is a #f8f8f8 bar with the red brand border — darken the bar only */ @media (max-width: 992px) { html[data-theme="dark"] .t3-header { background: var(--dm-band); } /* the mobile search box wrapper has its own #f8f8f8 fill (template.less: .form-search form,.module-search form{background:#f8f8f8} @max-992) which leaves a near-white box on the dark header bar — mirror to the band tone (the input inside already darkens to --dm-surface-2). */ html[data-theme="dark"] .form-search form, html[data-theme="dark"] .module-search form { background: var(--dm-band); } } /* ---- Main nav + dropdowns / megamenu ------------------------------------- */ html[data-theme="dark"] .t3-mainnav { background: var(--dm-bg); border-bottom-color: var(--dm-border); } /* base top bar is #111-on-white in light; keep cat-* accent bars (cat-* class on ). A bright bar reads too heavy on the dark page — use the standard border tone. */ html[data-theme="dark"]:not([class*="cat-"]) .t3-mainnav { border-top-color: var(--dm-border); } html[data-theme="dark"] .navbar-default .navbar-nav > li > a { color: var(--dm-text); } html[data-theme="dark"] .navbar-default .navbar-nav > li > a:hover, html[data-theme="dark"] .navbar-default .navbar-nav > li > a:focus, html[data-theme="dark"] .navbar-default .navbar-nav > .open > a, html[data-theme="dark"] .navbar-default .navbar-nav > .active > a { color: #ffffff; background-color: var(--dm-surface-2); } /* the white corner notch on the active item (navbar.less ::before) */ html[data-theme="dark"] .navbar-default .navbar-nav > .active::before { border-right-color: var(--dm-bg); } html[data-theme="dark"] .dropdown-menu { background-color: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .dropdown-menu > li > a { color: var(--dm-text); } html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .dropdown-menu > li > a:focus { color: var(--dm-heading); background-color: var(--dm-surface-2); } html[data-theme="dark"] .dropdown-submenu > a:after { border-left-color: var(--dm-text); } html[data-theme="dark"] .t3-megamenu .mega-nav > li, html[data-theme="dark"] .t3-megamenu .dropdown-menu .mega-nav > li { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .t3-megamenu .mega-nav > li a, html[data-theme="dark"] .t3-megamenu .dropdown-menu .mega-nav > li a { color: var(--dm-text); } /* light hover = #f5f5f5 chip + dark text; dark mirrors with the elevated surface */ html[data-theme="dark"] .t3-megamenu .mega-nav > li a:hover, html[data-theme="dark"] .t3-megamenu .dropdown-menu .mega-nav > li a:hover, html[data-theme="dark"] .t3-megamenu .mega-nav > li a:focus, html[data-theme="dark"] .t3-megamenu .dropdown-menu .mega-nav > li a:focus { color: var(--dm-heading); background-color: var(--dm-surface-2); } html[data-theme="dark"] .t3-megamenu .dropdown-menu .mega-group .mega-nav > li.active > a { color: var(--dm-text); } /* category-module links (megamenu columns + sidebars): light is #666 on white (≈5.7:1) — #666 on the dark panel drops to 3.5:1, so lift to mirror the ratio */ html[data-theme="dark"] .categories-module h4 a, html[data-theme="dark"] ul.categories-module h4 a, html[data-theme="dark"] .category-module h4 a, html[data-theme="dark"] ul.category-module h4 a { color: #9f9f9f; } html[data-theme="dark"] .t3-megamenu .mega-left { background: var(--dm-band); border-right-color: var(--dm-border); } html[data-theme="dark"] .t3-megamenu .mega-right { background: var(--dm-band); } /* per-cat mega panels are white with a !important cat border — keep the border, darken the panel */ html[data-theme="dark"] .t3-megamenu [class*="cat-"] { background-color: var(--dm-surface); } /* grid-view tiles (mega menu latest-news grid, category modules): light is white tiles + faint #f2f2f2 !important borders on a white panel — mirror */ html[data-theme="dark"] .category-module ul.grid-view li { background: var(--dm-surface); border-color: var(--dm-border) !important; } /* ---- Magazine sections (home) -------------------------------------------- */ html[data-theme="dark"] .magazine-section-heading { background: var(--dm-band); } /* "More News"-style decorative side bars: light uses a dark 5px PNG (line-head.png) that disappears on a dark band — recreate the stacked lines in a light tone */ html[data-theme="dark"] .line-head:before, html[data-theme="dark"] .line-head:after { background: repeating-linear-gradient(to bottom, #555555 0, #555555 1px, transparent 1px, transparent 2px); } html[data-theme="dark"] .magazine-category-title { background: var(--dm-band); /* light uses bg-stripes.png — flat dark band mirrors the subtle texture */ border-color: var(--dm-border); } html[data-theme="dark"].home .t3-sl-1 { background: var(--dm-bg); } html[data-theme="dark"] .link-item { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .item-list .item { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .item-image { background-color: var(--dm-surface-2); } /* ---- Off-canvas (panel is dark in BOTH modes — only fix the dark-mode hover; light keeps its original behavior untouched) ------------------------- */ html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body a:hover { color: #ffffff; } /* ---- Sidebar ------------------------------------------------------------- */ html[data-theme="dark"] .t3-sidebar { background: var(--dm-band); box-shadow: inset 0 0 0 1px var(--dm-border); } /* ---- Tabs ---------------------------------------------------------------- */ html[data-theme="dark"] .nav-tabs { background: var(--dm-surface-2); } html[data-theme="dark"] .nav-tabs > li > a { color: var(--dm-text); border-right-color: var(--dm-bg); } html[data-theme="dark"] .nav-tabs > li > a:hover { background: #444444; color: var(--dm-heading); border-right-color: #444444; } /* active tab keeps the brand red fill (same as light) */ /* ---- Banners module ------------------------------------------------------- */ html[data-theme="dark"] .mod-banners.bannergroup, html[data-theme="dark"] .mod-banners { background: var(--dm-band); } html[data-theme="dark"] .mod-banners__footer, html[data-theme="dark"] .bannerfooter { background: var(--dm-surface-2); color: #999999; /* light is #666 on #e5e5e5 (≈4.6:1) — #999 mirrors that ratio */ } /* ---- Blog layout ----------------------------------------------------------- .t3-mainbody is a white card pulled up (-24px) over the #111 blog header — the overlap case: opaque surface (corners are square in this template). */ html[data-theme="dark"].layout-blog .t3-mainbody { background: var(--dm-surface); } html[data-theme="dark"].layout-blog .blog-items { border-bottom-color: var(--dm-border); } html[data-theme="dark"].layout-blog .blog-item .article-title a { color: var(--dm-heading); } html[data-theme="dark"].layout-blog .blog-item .article-title a:hover, html[data-theme="dark"].layout-blog .blog-item .article-title a:focus, html[data-theme="dark"].layout-blog .blog-item .article-title a:active { color: var(--dm-link); } html[data-theme="dark"].layout-blog .blog-item .article-aside { border-top-color: var(--dm-border); border-bottom-color: var(--dm-border); } html[data-theme="dark"].layout-blog .blog-item .article-info dd { color: var(--dm-text); border-right-color: var(--dm-border); } html[data-theme="dark"].layout-blog .blog-item .col-media { background: var(--dm-surface-2); } /* mobile blog header flips to white in light; keep it dark in dark mode */ @media (max-width: 992px) { html[data-theme="dark"].layout-blog .t3-header { background: var(--dm-band); } html[data-theme="dark"].layout-blog .logo-text a { color: var(--dm-heading); } } /* ---- Breadcrumb (navhelper bar) -------------------------------------------- Light: #f8f8f8 chips + rotated-diamond ::after arrows (#f8f8f8 + #ccc shadow); active chip #e5e5e5; hover turns brand red (kept). */ html[data-theme="dark"] .breadcrumb > li > a, html[data-theme="dark"] .breadcrumb > li > span { color: var(--dm-text); background: var(--dm-band); border-right-color: var(--dm-border); } html[data-theme="dark"] .breadcrumb > li > a:after, html[data-theme="dark"] .breadcrumb > li > span:after { background: var(--dm-band); box-shadow: 1px -1px 0 0 var(--dm-border); } html[data-theme="dark"] .breadcrumb > .active, html[data-theme="dark"] .breadcrumb > li.active { color: var(--dm-text); background: var(--dm-surface-2); border-right-color: var(--dm-border); } html[data-theme="dark"] .breadcrumb > li.active:after { background: var(--dm-surface-2); box-shadow: 1px -1px 0 0 var(--dm-border); } /* hover stays brand red (chip + arrow), same as light */ /* ---- Article detail ---------------------------------------------------------- */ html[data-theme="dark"] blockquote.article-intro { color: var(--dm-heading); } html[data-theme="dark"] .article-aside-full { color: var(--dm-text); } html[data-theme="dark"] .article-aside-full dd:after { color: var(--dm-text-muted); } html[data-theme="dark"] .article-aside-full .createdby a, html[data-theme="dark"] .article-aside-full .author a { color: var(--dm-link); } html[data-theme="dark"] .article-tools h6 { background: var(--dm-surface-2); color: var(--dm-text); } html[data-theme="dark"] .article-tools ul li, html[data-theme="dark"] .article-tools .default-tools ul li { border-bottom-color: var(--dm-border); } /* font-size / font-style control icon buttons: keep #333 in light (on white), but on the dark page #333 is invisible — lift to body text like the sibling labels (which already recolor). Cover the button AND its FontAwesome glyph; hover lifts to heading like other controls. */ html[data-theme="dark"] .article-tools a.btn, html[data-theme="dark"] .article-tools a.btn i { color: var(--dm-text); } html[data-theme="dark"] .article-tools a.btn:hover, html[data-theme="dark"] .article-tools a.btn:focus, html[data-theme="dark"] .article-tools a.btn:hover i, html[data-theme="dark"] .article-tools a.btn:focus i { color: var(--dm-heading); } html[data-theme="dark"] #article-index ul li + li, html[data-theme="dark"] .article-index ul li + li { border-top-color: var(--dm-border); } /* article prev/next pager: light = white box, #f8f8f8 tiles, #666 text; hover tile merges with the box and text darkens — mirrored */ html[data-theme="dark"] .pagenav { background: var(--dm-surface); border-color: var(--dm-border); border-left: 0; /* the mainbody frame already draws this edge — avoid a 2px stack */ } html[data-theme="dark"] .pagenav > li.pagenav-prev, html[data-theme="dark"] .pagenav > li.previous { border-right-color: var(--dm-border); } html[data-theme="dark"] .pagenav > li.pagenav-next, html[data-theme="dark"] .pagenav > li.next { border-left-color: var(--dm-border); } html[data-theme="dark"] .pagenav li > a { color: var(--dm-text-muted); background: var(--dm-band); } html[data-theme="dark"] .pagenav li > a:hover, html[data-theme="dark"] .pagenav li > a:active, html[data-theme="dark"] .pagenav li > a:focus { background-color: var(--dm-surface); color: var(--dm-heading); } /* ---- Featured-articles "more" box + pagination ------------------------------ */ html[data-theme="dark"] .items-more { background: var(--dm-band); } html[data-theme="dark"] .items-more .nav > li { border-top-color: var(--dm-border); } html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span { color: var(--dm-text); background-color: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .pagination > li > a:hover, html[data-theme="dark"] .pagination > li > a:focus { color: var(--dm-link); background-color: var(--dm-surface-2); border-color: var(--dm-border); } /* active page keeps the brand red fill (same as light) */ html[data-theme="dark"] .pagination > .disabled > span, html[data-theme="dark"] .pagination > .disabled > span:hover, html[data-theme="dark"] .pagination > .disabled > span:focus, html[data-theme="dark"] .pagination > .disabled > a, html[data-theme="dark"] .pagination > .disabled > a:hover, html[data-theme="dark"] .pagination > .disabled > a:focus { color: var(--dm-text-muted); background: var(--dm-surface-2); border-color: var(--dm-border); } /* page counter: the template's own .pagination .counter is #111/#fff (leave); the bare white variant (com_content/com_tags) gets a dark surface */ html[data-theme="dark"] .counter { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .pagination .counter { background: #111111; color: #ffffff; border-color: #111111; } /* ---- Joomla core / Bootstrap components (typography page, com_tags, …) ------ */ html[data-theme="dark"] legend { color: var(--dm-heading); border-bottom-color: var(--dm-border); } html[data-theme="dark"] .well { background-color: var(--dm-band); border-color: var(--dm-border); } html[data-theme="dark"] .jumbotron { background: var(--dm-band); } html[data-theme="dark"] .navbar-default { background-color: var(--dm-bg); border-color: var(--dm-border); } html[data-theme="dark"] .navbar-default .navbar-brand, html[data-theme="dark"] .navbar-default .navbar-text { color: var(--dm-text); } html[data-theme="dark"] .list-group-item { background-color: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .list-group-item.disabled, html[data-theme="dark"] .list-group-item.disabled:hover, html[data-theme="dark"] .list-group-item.disabled:focus { color: var(--dm-text-muted); background-color: var(--dm-surface-2); } html[data-theme="dark"] a.list-group-item:hover, html[data-theme="dark"] a.list-group-item:focus, html[data-theme="dark"] .list-group-item-action:hover, html[data-theme="dark"] .list-group-item-action:focus { background-color: var(--dm-surface-2); color: var(--dm-heading); } html[data-theme="dark"] .panel { background-color: var(--dm-surface); } html[data-theme="dark"] .panel-default { border-color: var(--dm-border); } html[data-theme="dark"] .panel-default > .panel-heading { background-color: var(--dm-band); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .panel-footer { background-color: var(--dm-band); border-top-color: var(--dm-border); } /* semantic panels (success/info/…) keep pastel headings with their own dark text in light — let the title inherit that instead of the dark heading color */ html[data-theme="dark"] .panel .panel-title { color: inherit; } /* tables: theme the neutral chrome, keep semantic (pastel) rows but pin their text dark so the light row backgrounds stay readable */ html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table > tbody > tr > th, html[data-theme="dark"] .table > tfoot > tr > th, html[data-theme="dark"] .table > thead > tr > td, html[data-theme="dark"] .table > tbody > tr > td, html[data-theme="dark"] .table > tfoot > tr > td { border-color: var(--dm-border); } html[data-theme="dark"] .table > thead > tr > th { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered > thead > tr > th, html[data-theme="dark"] .table-bordered > tbody > tr > td { border-color: var(--dm-border); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--dm-band); } html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: var(--dm-surface-2); } html[data-theme="dark"] .table > tbody > tr.success > td, html[data-theme="dark"] .table > tbody > tr.warning > td, html[data-theme="dark"] .table > tbody > tr.danger > td, html[data-theme="dark"] .table > tbody > tr.info > td, html[data-theme="dark"] .table > tbody > tr.active > td, html[data-theme="dark"] .table > tbody > tr > td.success, html[data-theme="dark"] .table > tbody > tr > td.warning, html[data-theme="dark"] .table > tbody > tr > td.danger, html[data-theme="dark"] .table > tbody > tr > td.info, html[data-theme="dark"] .table > tbody > tr > td.active { color: #333333; } /* alerts / code / colored badges are self-contained (own bg + own dark text) — by design, left as light */ html[data-theme="dark"] .text-primary { color: var(--dm-link); } html[data-theme="dark"] .text-muted { color: var(--dm-text-muted); } /* ---- Bloggers avatar (blog sidebar) ----------------------------------------- */ html[data-theme="dark"] .bloggers-wrap .avatar { background: var(--dm-surface-2); } /* ---- Error page (standalone doc; loads error.css + this file) --------------- */ html[data-theme="dark"] .page-error { background: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] .page-error .error { border-color: #444444; } html[data-theme="dark"] .page-error #error-outline { border-color: #444444; } html[data-theme="dark"] .page-error #error-outline .error-message h2 { background: rgba(20, 20, 20, 0.95); } html[data-theme="dark"] .page-error #errorboxbody a { background: #f0f0f0; color: #111111; } html[data-theme="dark"] .page-error #errorboxbody a:hover { background: #cc0000; color: #ffffff; } /* ---- Popular-tags pills: light = #e5e5e5 pill / #666 text, hover red fill ----- NB: this file's base rule (html[data-theme] … ul li a = 4 elements) outranks light's a:hover (3 elements), so the red hover must be RESTATED here or it never fires (same specificity trap as the category pills). */ html[data-theme="dark"] .tagspopular ul > li > a { background: var(--dm-surface-2); color: var(--dm-text); } html[data-theme="dark"] .tagspopular ul > li > a:hover, html[data-theme="dark"] .tagspopular ul > li > a:focus, html[data-theme="dark"] .tagspopular ul > li > a:active { background: var(--dm-accent); color: #ffffff; } /* ---- Single-contact view (com_contact) + zebra-striped category/feed/tag lists Light: the .contact panel is white-on-white (blends into the page), thumbnails are white framed boxes, and the SEF category/newsfeed/tag lists zebra-stripe with #f9f9f9. Mirror: the panel blends into the dark page, the thumbnail frame becomes a dark surface, and the stripes become a faint dark band. */ /* NB: .com_contact sits on (not a descendant) → compound selector, not the descendant form, or it silently never matches (gotcha: page class on html). */ html[data-theme="dark"].com_contact .contact { background: transparent; } html[data-theme="dark"] .thumbnail { background-color: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .contact .contact-address, html[data-theme="dark"] .contact dl.dl-horizontal dt, html[data-theme="dark"] .contact .jicons-text { color: var(--dm-text); } html[data-theme="dark"] .contact .contact-form .control-label label { color: var(--dm-text); } /* zebra striping shared by the contact / newsfeed / tag category list views */ html[data-theme="dark"] .row-even, html[data-theme="dark"] .list-striped li:nth-child(odd), html[data-theme="dark"] .list-striped dd:nth-child(odd), html[data-theme="dark"] .row-striped .row:nth-child(odd), html[data-theme="dark"] .row-striped .row-fluid:nth-child(odd) { background-color: var(--dm-band); } /* Bootstrap close button (alert / system-message dismiss) */ html[data-theme="dark"] .btn-close { background-color: var(--dm-surface-2); color: var(--dm-text); } /* com_users remind/reset intro note: light = #e5e5e5 box / #333 text → dark box */ html[data-theme="dark"] .remind .form-validate p, html[data-theme="dark"] .reset .form-validate p { background: var(--dm-surface-2); color: var(--dm-text); } /* ---- Forms / buttons ------------------------------------------------------ */ html[data-theme="dark"] .form-control, html[data-theme="dark"] input.form-control, html[data-theme="dark"] input.inputbox, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus { background-color: var(--dm-surface-2); color: var(--dm-heading); border-color: #555555; } html[data-theme="dark"] .form-control::placeholder { color: var(--dm-text-muted); } html[data-theme="dark"] .btn-default { color: var(--dm-text); background-color: var(--dm-surface-2); border-color: var(--dm-border); } html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-default:focus, html[data-theme="dark"] .btn-default:active { color: var(--dm-heading); background-color: #383838; border-color: #555555; } /* ---- Trending strip (header-1 module) ------------------------------------ */ html[data-theme="dark"] .header-right .trending .link-item .article-title h3 a { color: var(--dm-link); } html[data-theme="dark"] .header-right .trending .link-item .col-content > a, html[data-theme="dark"] .header-right .trending .link-item .col-content > a:hover, html[data-theme="dark"] .header-right .trending .link-item .col-content > a:active, html[data-theme="dark"] .header-right .trending .link-item .col-content > a:focus { color: var(--dm-text); } html[data-theme="dark"] .header-right .trending .link-item .item-image { background-color: var(--dm-surface-2); } /* ---- Mainnav separator ("More") + nav header -------------------------------- */ html[data-theme="dark"] .navbar-default .navbar-nav > li > .separator { color: var(--dm-text); border-right-color: var(--dm-border); } html[data-theme="dark"] .navbar-default .navbar-nav > li > .separator:hover, html[data-theme="dark"] .navbar-default .navbar-nav > li > .separator:focus, html[data-theme="dark"] .navbar-default .navbar-nav > .open > .separator, html[data-theme="dark"] .navbar-default .navbar-nav > .open > .separator:hover, html[data-theme="dark"] .navbar-default .navbar-nav > .open > .separator:focus { color: #ffffff; background-color: var(--dm-surface-2); } html[data-theme="dark"] .navbar-default .navbar-nav > li > .nav-header { color: var(--dm-text); } /* ---- Magazine section tools (List/Grid buttons) --------------------------- */ html[data-theme="dark"] .magazine-section-tools .btn { color: var(--dm-text); border-color: #555555; } html[data-theme="dark"] .magazine-section-tools .btn:hover { background: var(--dm-surface-2); } /* .active keeps the brand red fill (same as light) */ /* ---- Category-name pill --------------------------------------------------- REST state mirrors light's white pill as a page-colored pill (list) or keeps the white chip when it sits on a photo. HOVER mirrors LIGHT EXACTLY: the category accent (cc0000/0077bb/669900/…) fills the pill and the text goes white. The colored background is what gives the contrast on the dark page — we do NOT swap in a grey/black chip. These hover rules are a faithful copy of light's .category-name hover block so they outrank this file's dark base rules (incl. the white over-photo pill). */ html[data-theme="dark"] .category-name a { background: var(--dm-bg); border-color: #4a4a4a; color: var(--dm-text); } /* pills sitting ON a photo keep light's white chip at rest (the photo is the same surface in both modes); the accent hover rules below still fill them. */ html[data-theme="dark"] .magazine-item-media .category-name a, html[data-theme="dark"] .item-image .category-name a { background: #ffffff; border-color: #666666; color: #333333; } /* HOVER = light's hover, verbatim (generic dark chip for uncategorised, accent fill + white text per cat-*). */ html[data-theme="dark"] .category-name a:hover, html[data-theme="dark"] .category-name a:focus, html[data-theme="dark"] .category-name a:active { background-color: #111111; border-color: #111111; color: #ffffff; } html[data-theme="dark"] .category-name.cat-red a:hover, html[data-theme="dark"] .category-name.cat-red a:focus, html[data-theme="dark"] .category-name.cat-red a:active { background-color: #cc0000; border-color: #cc0000; } html[data-theme="dark"] .category-name.cat-blue a:hover, html[data-theme="dark"] .category-name.cat-blue a:focus, html[data-theme="dark"] .category-name.cat-blue a:active { background-color: #0077bb; border-color: #0077bb; } html[data-theme="dark"] .category-name.cat-green a:hover, html[data-theme="dark"] .category-name.cat-green a:focus, html[data-theme="dark"] .category-name.cat-green a:active { background-color: #669900; border-color: #669900; } html[data-theme="dark"] .category-name.cat-violet a:hover, html[data-theme="dark"] .category-name.cat-violet a:focus, html[data-theme="dark"] .category-name.cat-violet a:active { background-color: #bf5fff; border-color: #bf5fff; } html[data-theme="dark"] .category-name.cat-orange a:hover, html[data-theme="dark"] .category-name.cat-orange a:focus, html[data-theme="dark"] .category-name.cat-orange a:active { background-color: #ff8800; border-color: #ff8800; } html[data-theme="dark"] .category-name.cat-cyan a:hover, html[data-theme="dark"] .category-name.cat-cyan a:focus, html[data-theme="dark"] .category-name.cat-cyan a:active { background-color: #0099cc; border-color: #0099cc; } html[data-theme="dark"] .category-name.cat-purple a:hover, html[data-theme="dark"] .category-name.cat-purple a:focus, html[data-theme="dark"] .category-name.cat-purple a:active { background-color: #8c5de4; border-color: #8c5de4; } /* ---- Events ACM (home events block + events home) ------------------------- In light these are white wrappers on the white page (blend) → page color. */ html[data-theme="dark"] .magazine-featured.events-featured { background: var(--dm-bg); } html[data-theme="dark"] .magazine-featured.events-featured .magazine-featured-leading .event-info { background: var(--dm-bg); border-top-color: var(--dm-border); } html[data-theme="dark"] .events-list { background: var(--dm-bg); } html[data-theme="dark"] .events-list .magazine-section-heading { border-bottom-color: var(--dm-border); } /* the blue #0077bb event headings/overlays are by-design — unchanged */ /* ---- News-featured ACM ----------------------------------------------------- */ /* style-2 leading: white card absolutely positioned OVER the photo → opaque surface */ html[data-theme="dark"] .magazine-featured.style-2 .magazine-featured-leading .magazine-item { background: var(--dm-surface); } /* style-3 intro: white wrapper blending on the white page → page color */ html[data-theme="dark"] .magazine-featured.style-3 .magazine-featured-intro { background: var(--dm-bg); } html[data-theme="dark"] .magazine-carousel .magazine-item-media .item-image, html[data-theme="dark"] .magazine-featured.events-featured .magazine-carousel .magazine-item-media .item-image { background: var(--dm-surface-2); } /* (light's .magazine-carousel .carousel-number has no box/border — none added) */ html[data-theme="dark"] .magazine-featured-links .magazine-section-heading { background: var(--dm-band); box-shadow: inset 0 0 0 1px var(--dm-border); } html[data-theme="dark"] .magazine-featured-links { box-shadow: inset 0 0 0 1px var(--dm-border); } html[data-theme="dark"] .magazine-featured-links .magazine-links { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .magazine-featured-intro { border-top-color: var(--dm-border); } html[data-theme="dark"] .magazine-featured.style-1 .event-info ul li { border-bottom-color: var(--dm-border); } /* leading article title in the featured/carousel block (light: #111 on white) */ html[data-theme="dark"] .magazine-featured-leading .magazine-item-main .article-title h3 a { color: var(--dm-heading); } html[data-theme="dark"] .magazine-featured-leading .magazine-item-main .article-title h3 a:hover, html[data-theme="dark"] .magazine-featured-leading .magazine-item-main .article-title h3 a:active, html[data-theme="dark"] .magazine-featured-leading .magazine-item-main .article-title h3 a:focus { color: var(--dm-link); } /* ============================================================================ BORDER CONSISTENCY PASS — every light #e5e5e5-family divider the first pass missed, normalised to var(--dm-border) so dark borders are uniform and as subtle relative to the dark page as light's are to white. ========================================================================== */ /* main nav: link/separator dividers, collapse panel, "MORE" item, carets */ html[data-theme="dark"] .navbar-default .navbar-nav { border-left-color: var(--dm-border); } html[data-theme="dark"] .navbar-default .navbar-nav > li > a { border-right-color: var(--dm-border); } html[data-theme="dark"] .navbar-default .navbar-nav > .item-more { border-left-color: var(--dm-border); } html[data-theme="dark"] .navbar-default .navbar-collapse, html[data-theme="dark"] .navbar-default .navbar-form { border-color: var(--dm-border); } html[data-theme="dark"] .navbar-default .navbar-nav > .dropdown > a .caret, html[data-theme="dark"] .navbar-default .navbar-nav > .dropdown > .separator .caret, html[data-theme="dark"] .t3-megamenu .caret { border-top-color: #555555; border-bottom-color: #555555; } /* OPEN-state caret: light fires `.open > a .caret{border-top-color:#000!important;opacity:.5}` — black@.5 reads on the white nav, but vanishes on the dark nav. Mirror light's visibility with a light caret (must match the !important to win). */ html[data-theme="dark"] .navbar-default .navbar-nav > .open > a .caret, html[data-theme="dark"] .navbar-default .navbar-nav > .open > .separator .caret, html[data-theme="dark"] .navbar-default .navbar-nav > .open > a:hover .caret, html[data-theme="dark"] .navbar-default .navbar-nav > .open > .separator:hover .caret, html[data-theme="dark"] .navbar-default .navbar-nav > .open > a:focus .caret, html[data-theme="dark"] .navbar-default .navbar-nav > .open > .separator:focus .caret { border-top-color: #cccccc !important; border-bottom-color: #cccccc !important; } html[data-theme="dark"] .t3-megamenu .row + .row { border-top-color: var(--dm-border); } /* header trending box frame */ html[data-theme="dark"] .header-right .trending .magazine-links { border-color: var(--dm-border); } /* breadcrumb bar container frame */ html[data-theme="dark"] .t3-navhelper .container { border-color: var(--dm-border); } /* magazine grid separators (dotted col/row dividers) */ html[data-theme="dark"] .row-articles { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .row-articles .magazine-item { border-right-color: var(--dm-border); } html[data-theme="dark"] .magazine-list .magazine-section-heading { border-top-color: var(--dm-border); } html[data-theme="dark"] .list-view .magazine-category .magazine-item { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .style-2.magazine-list .row-articles .magazine-category { border-right-color: var(--dm-border); } html[data-theme="dark"] .style-2.magazine-list .row-articles .magazine-category:last-child .magazine-category-title { border-right-color: var(--dm-border); } html[data-theme="dark"] .style-2.magazine-list .magazine-leading { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .style-2.magazine-list.list-view .link-item { border-left-color: var(--dm-border); } /* typography elements */ html[data-theme="dark"] blockquote { border-left-color: var(--dm-border); } html[data-theme="dark"] blockquote.pull-right { border-right-color: var(--dm-border); } html[data-theme="dark"] .page-header { border-bottom-color: var(--dm-border); } html[data-theme="dark"] hr { border-top-color: var(--dm-border); } /* events list rows */ html[data-theme="dark"] .events-list .event-info ul li { border-bottom-color: var(--dm-border); color: var(--dm-text-muted); } /* blog sidebar: blogger rows + social icon circles */ html[data-theme="dark"] .bloggers-wrap .blogger-list li { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .bloggers-wrap .social-list li a { border-color: #4a4a4a; color: var(--dm-text-muted); } /* inset box-shadow "frames" (light: inset 0 0 0 1px #e5e5e5) the border pass missed — box-shadow is not a border, so the scanner didn't see these. The mainbody ring is KEPT (light has this frame), but in light the INNER boxes' rings coincide with it on the white page invisibly — in dark the stacked 1px lines read as one fat 2px line. So each inner box draws ONLY the edges the mainbody frame doesn't already cover: every component edge ends up with exactly one subtle line, the same contrast light shows. */ html[data-theme="dark"] .t3-mainbody { box-shadow: inset 0 0 0 1px var(--dm-border); } /* sidebar (right column): top/bottom/right lines come from the mainbody frame — draw only its own LEFT boundary against the content column */ html[data-theme="dark"] .t3-sidebar { box-shadow: inset 1px 0 0 0 var(--dm-border); } /* TOP-STORIES box sits in the frame's top-right corner: top/right come from the mainbody frame — draw only its LEFT and BOTTOM edges */ html[data-theme="dark"] .magazine-featured-links { box-shadow: inset 1px 0 0 0 var(--dm-border), inset 0 -1px 0 0 var(--dm-border); } /* its heading: band background is the separator; the extra ring would double the box edges */ html[data-theme="dark"] .magazine-featured-links .magazine-section-heading { box-shadow: none; } html[data-theme="dark"] .ja-weather .panel-default { box-shadow: inset 0 0 0 1px var(--dm-border); } html[data-theme="dark"] .ja-finance { box-shadow: inset 0 0 0 1px var(--dm-border); } html[data-theme="dark"] .whatsnew-wrap .magazine-links { box-shadow: inset 0 0 0 1px var(--dm-border); } /* ============================================================================ FULL-SWEEP FIXES (light↔dark screenshot + hover/focus audit) ========================================================================== */ /* events leading overlay: light keeps the title WHITE on the blue panel in every state — the generic dark link/hover red dropped it to 1.35:1 there */ html[data-theme="dark"] .magazine-featured.events-featured .article-title a, html[data-theme="dark"] .magazine-featured.events-featured .article-title a:hover, html[data-theme="dark"] .magazine-featured.events-featured .article-title a:focus, html[data-theme="dark"] .magazine-featured.events-featured .article-title a:active, html[data-theme="dark"] .magazine-featured.events-featured .article-title h3 a, html[data-theme="dark"] .magazine-featured.events-featured .article-title h3 a:hover, html[data-theme="dark"] .magazine-featured.events-featured .article-title h3 a:focus, html[data-theme="dark"] .magazine-featured.events-featured .article-title h3 a:active { color: #ffffff; } /* carousel prev/next arrows are white in light (over the photo) — the generic dark link color painted them red */ html[data-theme="dark"] .carousel-control, html[data-theme="dark"] .carousel-control:hover, html[data-theme="dark"] .carousel-control:focus { color: #ffffff; } /* form fields: light's border (#ccc on a white fill) is clearly visible; --dm-border on the --dm-surface-2 fill was near-invisible — lift one step */ html[data-theme="dark"] .form-control, html[data-theme="dark"] input.form-control, html[data-theme="dark"] input.inputbox, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { border-color: #4a4a4a; } html[data-theme="dark"] .btn-default { border-color: #4a4a4a; } /* Joomla-core .btn-secondary (tags filter bar) has no BS3 styling — the UA color-scheme:dark default gave weak 2.2:1 text; style it like btn-default */ html[data-theme="dark"] .btn-secondary { color: var(--dm-text); background-color: var(--dm-surface-2); border-color: #4a4a4a; } html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .btn-secondary:focus { color: var(--dm-heading); background-color: #383838; } /* blog-items divider also appears on non-blog layouts (com_content featured view) */ html[data-theme="dark"] .blog-items { border-bottom-color: var(--dm-border); } /* ---- Content dividers (default Joomla category-blog / list / article-tools / topic / search / article-index) ------------------------------------------ Light draws all of these in #e5e5e5 (subtle on white). On the dark page that reads as a bright/heavy bar — the #1 owner complaint. Re-point every one to the subtle --dm-border; the dotted/double style + width are kept, only the color changes. (Sub-categories without the ja_teline_v:blank layout fall back to Joomla's default .items-leading/.items-row blog markup, which is why these weren't caught by the styled magazine category pages.) */ html[data-theme="dark"] .items-leading, html[data-theme="dark"] .items-row, html[data-theme="dark"] .item-list .item, html[data-theme="dark"] .article-tools ul li, html[data-theme="dark"] .article-tools .default-tools ul li, html[data-theme="dark"] .article-tools .article-index ul li + li, html[data-theme="dark"] .topic-links, html[data-theme="dark"] .topic-links .nav > li, html[data-theme="dark"] .topic-articles .link-item:first-child, html[data-theme="dark"] .topic-articles .link-item:last-child, html[data-theme="dark"] .search-results, html[data-theme="dark"] .article-index, html[data-theme="dark"] .article-index ul li + li { border-color: var(--dm-border); }