/* ========================================================================= WCF Dark Mode — orionkit_one (wcf J3 site) Client-side only (data-theme on via head script + localStorage). No server variation -> CDN/GTranslate-safe (CloudFlare/GCore). SCOPE: content canvas + #content area + content cards/tabs/forms/tables. DELIBERATELY UNTOUCHED: header (.ok-header / .tm-*navbar* / toolbar) and footer (.tm-footer / .ok-copyright) — they are already dark by design. Light & dark BOTH get: page texture + raised content panels (textareas). Dark additionally restyles text/links/tables/forms/tabs to a dark palette. ========================================================================= */ /* ---- light-mode tokens (defaults) -------------------------------------- */ :root{ --wcf-surface:#ffffff; /* white textareas */ --wcf-surface-2:#eef3f4; --wcf-text:#2a2f36; --wcf-heading:#1c2128; --wcf-muted:#6b7a85; --wcf-link:#0a6470; --wcf-link-hover:#00B1BE; --wcf-accent:#00B1BE; --wcf-border:#dfe5ea; --wcf-danger:#b23b3b; --wcf-panel-shadow:0 2px 10px rgba(20,30,45,.12); } :root[data-theme="dark"]{ /* Tonal scale (canvas darkest -> surfaces lighter), sister-site #121620 base. Footer is #333 (untouched) -> the raised surfaces give a clear step toward it. */ --wcf-bg:#121620; /* page canvas (matches web3 html base) */ --wcf-surface:#1c2532; /* article/content panels — clearly raised vs canvas */ --wcf-surface-2:#26313f; /* inner / hover / table head */ --wcf-text:#c7ced6; /* body text — softened, not pure white */ --wcf-heading:#a8c0e2; /* plain headings h1/h2 — light steel-blue 'ink', mirrors BM blue-black #08091e */ --wcf-heading-muted:#9fb4c8;/* sub-headings h3-h6/.page-header — lightened from #567190 */ --wcf-muted:#9aa7b1; /* secondary text */ --wcf-link:#1fa2d6; /* native link blue (body links + linked titles) */ --wcf-link-hover:#5cc6d6; --wcf-accent:#00B1BE; /* brand cyan */ --wcf-border:#2c3848; --wcf-danger:#ff9e94; /* legacy darkred note -> lighter on dark */ --wcf-panel-shadow:0 2px 12px rgba(0,0,0,.45); } /* ---- canvas: subtle baked texture on the BODY BACKGROUND ONLY ----------- A pre-faded STATIC tile (web3-like monochrome grain, baked into the image) lives in the body background. NO overlay, NO opacity layer, NO filter. Opaque elements — the header WhiteCloud image and the content panels — sit ON TOP of the body, so they are NOT veiled or made restless. The grain shows only in the real page background (gutters / gaps). */ /* Texture on the ROOT element: its background covers the ENTIRE canvas (full scroll height), so it never stops below the first viewport (body may be height:100%). body is transparent so the canvas shows in the gutters. */ :root{ background-color:#ffffff; background-image:url("../images/wcf-bg-light.png"); background-repeat:repeat; } :root[data-theme="dark"]{ background-color:var(--wcf-bg); background-image:url("../images/wcf-bg-dark.png"); } body{ background:transparent !important; } :root[data-theme="dark"] body{ color:var(--wcf-text); } /* DM header banner: swap the inline white_cloud.jpg for the dark variant */ :root[data-theme="dark"] header.ok-header{ background-image:url("/images/site/white_cloud_dm.jpg") !important; } /* ---- main content column transparent (texture shows behind panels) ------ */ /* BOTH modes (NOT header/footer) */ :root #content, :root #content .uk-container, :root #content .tab-content, :root #content .rl_tabs .tab-content{ background-color:transparent; } :root[data-theme="dark"] #content{ color:var(--wcf-text); } /* ---- raised content panels (the "textareas") — BOTH modes --------------- */ /* light = white panels, dark = navy panels; both lift off the textured bg */ :root #content .item-page, :root #content .items-leading > .leading-0, :root #content .uk-article, :root #content .content-category, :root #content .uk-panel, :root #content .uk-panel-box, :root #content .ok-card, :root #content .ok-card-content, :root #content .panel{ background-color:var(--wcf-surface); color:var(--wcf-text); border:1px solid var(--wcf-border); border-radius:8px; box-shadow:var(--wcf-panel-shadow); padding:18px 20px; } :root[data-theme="dark"] #content .djacc__header{ background-color:var(--wcf-surface-2); color:var(--wcf-text); border-color:var(--wcf-border); } /* ---- headings ----------------------------------------------------------- */ :root[data-theme="dark"] #content h1, :root[data-theme="dark"] #content h2, :root[data-theme="dark"] #content .uk-article-title{ color:var(--wcf-heading); border-color:var(--wcf-border); } :root[data-theme="dark"] #content h3, :root[data-theme="dark"] #content h4, :root[data-theme="dark"] #content h5, :root[data-theme="dark"] #content h6, :root[data-theme="dark"] #content .page-header{ color:var(--wcf-heading-muted); border-color:var(--wcf-border); } /* section/module titles (.page-header, e.g. "Must watch!") were too dark -> brighter */ :root[data-theme="dark"] #content .page-header, :root[data-theme="dark"] .page-header{ color:#c4d4e6 !important; } /* teal CTA buttons (.ok-card-button, bg #009688): white label, not the blue link colour */ :root[data-theme="dark"] .ok-card-button{ color:#ffffff !important; } /* img.pull-* shadow: BM uses a grey shadow (light on white). On dark, grey reads as a glow -> swap to a dark halo. SAME geometry (10/10/25) -> no layout shift. .no-shadow opt-out is preserved. */ :root[data-theme="dark"] #content img.pull-right:not(.no-shadow), :root[data-theme="dark"] #content img.pull-left:not(.no-shadow), :root[data-theme="dark"] #content img.pull-center:not(.no-shadow){ box-shadow:10px 10px 25px rgba(0,0,0,.75) !important; } /* B/W images: invert in DM (white bg -> dark, black content -> light, readable, no white box). uan-planet-symbols-{de,en,es} matched by src (all 3 langs at once); .dm-invert = reusable opt-in. */ :root[data-theme="dark"] #content img[src*="uan-planet-symbols"], :root[data-theme="dark"] #content img.dm-invert{ filter:invert(1); } /* linked titles keep the native link blue (#1fa2d6), not the plain-heading neutral */ :root[data-theme="dark"] #content h1 a, :root[data-theme="dark"] #content h2 a, :root[data-theme="dark"] #content h3 a, :root[data-theme="dark"] #content h4 a, :root[data-theme="dark"] #content h5 a, :root[data-theme="dark"] #content h6 a{ color:var(--wcf-link); } /* legacy blue video titles (custom.css: color #0000FF) */ :root[data-theme="dark"] #content div.titlendesc h5{ color:var(--wcf-link); } /* ---- links -------------------------------------------------------------- */ :root[data-theme="dark"] #content a, :root[data-theme="dark"] #content a:visited{ color:var(--wcf-link); } :root[data-theme="dark"] #content a:hover, :root[data-theme="dark"] #content a:focus{ color:var(--wcf-link-hover); } /* ---- muted / meta ------------------------------------------------------- */ :root[data-theme="dark"] #content .uk-text-muted, :root[data-theme="dark"] #content .uk-article-meta, :root[data-theme="dark"] #content small, :root[data-theme="dark"] #content time{ color:var(--wcf-muted); } /* ---- dividers / hr (custom.css .divider uses #DDD) ---------------------- */ :root[data-theme="dark"] #content hr, :root[data-theme="dark"] #content .uk-article-divider{ border-color:var(--wcf-border); } :root[data-theme="dark"] #content div.divider{ background-color:var(--wcf-border); box-shadow:0 0 5px var(--wcf-border); } /* ---- tables ------------------------------------------------------------- */ :root[data-theme="dark"] #content table, :root[data-theme="dark"] #content .uk-table{ color:var(--wcf-text); } :root[data-theme="dark"] #content .uk-table th{ background-color:var(--wcf-surface-2); color:var(--wcf-heading); } :root[data-theme="dark"] #content .uk-table td, :root[data-theme="dark"] #content .uk-table th{ border-color:var(--wcf-border); } :root[data-theme="dark"] #content .uk-table-striped tbody tr:nth-of-type(odd){ background-color:rgba(255,255,255,.03); } /* ---- forms -------------------------------------------------------------- */ :root[data-theme="dark"] #content input:not([type=submit]):not([type=button]), :root[data-theme="dark"] #content textarea, :root[data-theme="dark"] #content select, :root[data-theme="dark"] #content .uk-input, :root[data-theme="dark"] #content .uk-textarea, :root[data-theme="dark"] #content .uk-select{ background-color:var(--wcf-surface); color:var(--wcf-text); border-color:var(--wcf-border); } :root[data-theme="dark"] #content ::placeholder{ color:var(--wcf-muted); } /* ---- RegularLabs Tabs (Bootstrap nav-tabs) ----------------------------- */ /* FONT (both modes): undo the Literata 19px reading-typography bleed on the tab handles */ :root #content .rl_tabs .nav-tabs > li > a, :root #content .rl_tabs .nav-link{ font-family:'Quattrocento Sans',Arial,sans-serif !important; font-size:16px !important; line-height:1.4 !important; } /* DM: darken only the GREY frame borders; KEEP the 5px coloured TOP accents (.green/.red/.blue/.orange/.grey) */ :root[data-theme="dark"] #content .rl_tabs .nav-tabs > li > a, :root[data-theme="dark"] #content .rl_tabs .nav-link{ border-left-color:var(--wcf-border) !important; border-right-color:var(--wcf-border) !important; border-bottom-color:var(--wcf-border) !important; } :root[data-theme="dark"] #content .rl_tabs .nav-tabs, :root[data-theme="dark"] #content .rl_tabs > .tab-content, :root[data-theme="dark"] #content .rl_tabs .tab-content, :root[data-theme="dark"] #content .rl_tabs.outline_content > .tab-content, :root[data-theme="dark"] #content .rl_tabs.outline_content > .tab-content > .tab-pane{ border-color:var(--wcf-border) !important; } /* rest / hover */ :root[data-theme="dark"] #content .rl_tabs .nav-tabs > li > a{ color:var(--wcf-muted) !important; background-color:transparent !important; } :root[data-theme="dark"] #content .rl_tabs .nav-tabs > li > a:hover{ color:var(--wcf-text) !important; background-color:#26313f !important; } /* ACTIVE tab: clearly lighter fill so it stands out (coloured top stays) */ :root[data-theme="dark"] #content .rl_tabs .nav-tabs > li.active > a, :root[data-theme="dark"] #content .rl_tabs .nav-tabs > li.active > a:hover, :root[data-theme="dark"] #content .rl_tabs .nav-link.active{ background-color:#303d4d !important; color:var(--wcf-heading) !important; border-left-color:var(--wcf-border) !important; border-right-color:var(--wcf-border) !important; border-bottom-color:#303d4d !important; } /* ---- misc content ------------------------------------------------------- */ :root[data-theme="dark"] #content blockquote{ border-color:var(--wcf-border); color:var(--wcf-muted); } :root[data-theme="dark"] #content code, :root[data-theme="dark"] #content pre{ background-color:var(--wcf-surface); color:var(--wcf-text); } :root[data-theme="dark"] #content .video-note-archived{ color:var(--wcf-danger); } /* ---- legacy inline editor colours unreadable on dark ------------------- */ :root[data-theme="dark"] #content .auto-style41{ color:#6fb7e8; } /* was #004e93 dark blue */ /* .auto-style3 emphasis: harsh #DF0000 -> refined crimson, both modes */ :root #content .auto-style3{ color:#c0392b; } /* BM crimson */ :root[data-theme="dark"] #content .auto-style3{ color:#e8574b; } /* DM saturated crimson (ef8a7d war zu blass) */ /* ---- scripture .bible: warm 'illuminated' tone instead of muddy darkgoldenrod (both modes) ---- */ :root #content .bible{ color:#a86a32; position:relative; padding-left:1.7em; } /* BM bronze + gutter for the symbol (hanging indent) */ :root[data-theme="dark"] #content .bible{ color:#e2b487; } /* DM amber */ /* footnote plugin (cdfootnotes): scripture quotes are authored as -> same warm .bible colour, both modes (colour only, no icon) */ :root .cdfootnotes_superscript_content em,:root .cdfootnotes_superscript_content i, :root .cdfootnotes_tooltip_content em,:root .cdfootnotes_tooltip_content i{ color:#a86a32; } :root[data-theme="dark"] .cdfootnotes_superscript_content em,:root[data-theme="dark"] .cdfootnotes_superscript_content i, :root[data-theme="dark"] .cdfootnotes_tooltip_content em,:root[data-theme="dark"] .cdfootnotes_tooltip_content i{ color:#e2b487; } /* Bible symbol before each scripture block — inline SVG mask (FA-independent, no FA7 global load -> no FA4/FA7 conflict); tinted via currentColor (warm). */ :root #content .bible::before{ content:""; position:absolute; left:0; top:.22em; width:1.05em; height:1.05em; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cpath%20d='M5%204.5A1.5%201.5%200%200%201%206.5%203H18a1%201%200%200%201%201%201v15a1%201%200%200%201-1%201H6.5A1.5%201.5%200%200%200%205%2021.5z'/%3E%3Cpath%20d='M5%2018.5A1.5%201.5%200%200%201%206.5%2017H19'/%3E%3Cpath%20d='M12%206.2v4M10%208.2h4'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cpath%20d='M5%204.5A1.5%201.5%200%200%201%206.5%203H18a1%201%200%200%201%201%201v15a1%201%200%200%201-1%201H6.5A1.5%201.5%200%200%200%205%2021.5z'/%3E%3Cpath%20d='M5%2018.5A1.5%201.5%200%200%201%206.5%2017H19'/%3E%3Cpath%20d='M12%206.2v4M10%208.2h4'/%3E%3C/svg%3E") center/contain no-repeat; } :root[data-theme="dark"] #content .text-drop-cap::first-letter{ color:var(--wcf-text); } /* normal text colour, was #0D0D0D near-black */ /* ---- breadcrumb bar (all pages) + category list table (#f5f5f5 rows) ---- */ :root[data-theme="dark"] #content ul.breadcrumb, :root[data-theme="dark"] #content .breadcrumb{ background-color:var(--wcf-surface) !important; border-color:var(--wcf-border) !important; } :root[data-theme="dark"] #content ul.breadcrumb, :root[data-theme="dark"] #content ul.breadcrumb a, :root[data-theme="dark"] #content ul.breadcrumb .divider, :root[data-theme="dark"] #content ul.breadcrumb span{ color:var(--wcf-muted) !important; } :root[data-theme="dark"] #content table.category, :root[data-theme="dark"] #content table.category th, :root[data-theme="dark"] #content table.category td, :root[data-theme="dark"] #content td.list-title, :root[data-theme="dark"] #content td.list-author, :root[data-theme="dark"] #content td.list-hits, :root[data-theme="dark"] #content td.list-date{ background-color:var(--wcf-surface) !important; color:var(--wcf-text) !important; border-color:var(--wcf-border) !important; } :root[data-theme="dark"] #content td.list-title a{ color:var(--wcf-link) !important; } /* restore the alternating row shades (BM is table-striped: odd tbody rows shaded) */ :root[data-theme="dark"] #content table.category tbody > tr:nth-child(odd) > td{ background-color:var(--wcf-surface-2) !important; } :root[data-theme="dark"] #content table.category tbody > tr:nth-child(even) > td{ background-color:var(--wcf-surface) !important; } :root[data-theme="dark"] #content .btn, :root[data-theme="dark"] #content a.btn{ background-color:var(--wcf-surface-2) !important; color:var(--wcf-text) !important; border-color:var(--wcf-border) !important; } /* ---- article tools dropdown (gear -> Print / Email). Bootstrap .dropdown-menu is light (#f5f5f5) with light text on it -> unreadable in DM. Scoped to .icons so the (already-dark, do-not-touch) header nav dropdowns stay untouched. ---- */ :root[data-theme="dark"] #content .icons .dropdown-menu{ background-color:var(--wcf-surface) !important; border-color:var(--wcf-border) !important; box-shadow:0 6px 20px rgba(0,0,0,.55) !important; } :root[data-theme="dark"] #content .icons .dropdown-menu > li > a, :root[data-theme="dark"] #content .icons .dropdown-menu a{ color:var(--wcf-link) !important; background-color:transparent !important; } :root[data-theme="dark"] #content .icons .dropdown-menu > li > a:hover, :root[data-theme="dark"] #content .icons .dropdown-menu > li > a:focus{ background-color:var(--wcf-surface-2) !important; color:var(--wcf-link-hover) !important; } :root[data-theme="dark"] #content .icons .dropdown-menu .divider, :root[data-theme="dark"] #content .icons .dropdown-menu .dropdown-divider{ background-color:var(--wcf-border) !important; border-color:var(--wcf-border) !important; } /* ---- article Prev/Next (Back/Next) pager buttons (.pager.pagenav) ------- */ :root[data-theme="dark"] #content .pager li > a, :root[data-theme="dark"] #content .pager li > span{ background-color:var(--wcf-surface-2) !important; color:var(--wcf-text) !important; border:1px solid var(--wcf-border) !important; } :root[data-theme="dark"] #content .pager li > a:hover, :root[data-theme="dark"] #content .pager li > a:focus{ background-color:var(--wcf-surface) !important; color:var(--wcf-link-hover) !important; border-color:var(--wcf-link-hover) !important; } /* Bootstrap tooltips (hasTooltip, e.g. on the pager buttons) — appended to , so scoped globally (not #content). Match the dark palette + border. */ :root[data-theme="dark"] .tooltip-inner{ background-color:var(--wcf-surface-2) !important; color:var(--wcf-text) !important; border:1px solid var(--wcf-border); } :root[data-theme="dark"] .tooltip.top .tooltip-arrow, :root[data-theme="dark"] .tooltip .tooltip-arrow{ border-top-color:var(--wcf-surface-2) !important; } :root[data-theme="dark"] .tooltip.bottom .tooltip-arrow{ border-bottom-color:var(--wcf-surface-2) !important; } :root[data-theme="dark"] .tooltip.left .tooltip-arrow{ border-left-color:var(--wcf-surface-2) !important; } :root[data-theme="dark"] .tooltip.right .tooltip-arrow{ border-right-color:var(--wcf-surface-2) !important; } /* jQuery-UI tooltip (what .hasTooltip actually renders here: white .ui-tooltip) */ :root[data-theme="dark"] .ui-tooltip, :root[data-theme="dark"] .ui-tooltip.ui-widget-content{ background:var(--wcf-surface-2) !important; color:var(--wcf-text) !important; border:1px solid var(--wcf-border) !important; box-shadow:0 4px 14px rgba(0,0,0,.5) !important; } :root[data-theme="dark"] .ui-tooltip .ui-tooltip-content{ color:var(--wcf-text) !important; } /* ---- module cards OUTSIDE #content (e.g. bottom-b "Todo List" .ok-card-v2) -- These panel positions are not under #content, so the rules above miss them. The v2 card is white (#fff) with #222 text (partly inline) -> force dark surface + light text. Links and the teal CTA button keep their own colours. */ :root[data-theme="dark"] .ok-card-v2{ background:var(--wcf-surface) !important; border:1px solid var(--wcf-border); } /* card2 (mod_ok_cards_v2): the material z-depth/hover shadows are dark rgba -> invisible on dark. Restore readable depth + the hover 'lift' reaction in DM. */ :root[data-theme="dark"] .ok-card-v2{ box-shadow:0 6px 20px rgba(0,0,0,.55) !important; } :root[data-theme="dark"] .ok-card-button{ transition:box-shadow .2s ease, transform .2s ease; box-shadow:0 3px 9px rgba(0,0,0,.5) !important; } :root[data-theme="dark"] .ok-card-button:hover, :root[data-theme="dark"] .ok-card-button:focus{ box-shadow:0 10px 24px rgba(0,0,0,.65) !important; transform:translateY(-2px); } /* card TITLE link was the global blue (#1fa2d6) -> barely visible on the image; white in BOTH modes */ :root .ok-card-v2 a.waves-effect:not(.ok-card-button){ color:#ffffff !important; } :root[data-theme="dark"] .ok-card-v2, :root[data-theme="dark"] .ok-card-v2 .ok-card-content, :root[data-theme="dark"] .ok-card-v2 p, :root[data-theme="dark"] .ok-card-v2 span, :root[data-theme="dark"] .ok-card-v2 li, :root[data-theme="dark"] .ok-card-v2 h1,:root[data-theme="dark"] .ok-card-v2 h2, :root[data-theme="dark"] .ok-card-v2 h3,:root[data-theme="dark"] .ok-card-v2 h4{ color:var(--wcf-text) !important; } /* ========================================================================= Theme toggle button (always present; styled for both themes) ========================================================================= */ #wcf-theme-toggle{ position:fixed; top:8px; right:12px; z-index:1200; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.18); background:rgba(255,255,255,.88); color:#1f2630; font-size:18px; line-height:1; cursor:pointer; box-shadow:0 1px 5px rgba(0,0,0,.3); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:background .15s ease, color .15s ease; } #wcf-theme-toggle:hover{ background:#fff; } #wcf-theme-toggle svg,#wcf-theme-toggle i{ pointer-events:none; } :root[data-theme="dark"] #wcf-theme-toggle{ background:rgba(26,33,43,.9); color:#e6ebf0; border-color:#33414f; } :root[data-theme="dark"] #wcf-theme-toggle:hover{ background:#222c38; } /* ---- AMPZ social-share "+ more networks" popup (Magnific Popup) — vendor ships NO dark mode ---- */ /* The popup is a white .white-popup card holding colour-branded network buttons (white labels); only the card is white. Darken the card; the in-card close (×) is #333 via .mfp-close-btn-in -> lighten it so it stays visible. The .mfp-bg overlay is already dark (#0b0b0b). */ :root[data-theme="dark"] .white-popup{ background:var(--wcf-surface) !important; border:1px solid var(--wcf-border); box-shadow:0 10px 40px rgba(0,0,0,.6); } :root[data-theme="dark"] .mfp-close-btn-in .mfp-close{ color:var(--wcf-text) !important; }