/* ===================================================================== Design-switcher toggle — sun/moon checkbox toggle (Uiverse, shadowfax29), adapted for ABUS HELP. Modifications: Copyright (c) 2026 ABUS Kransysteme GmbH Original toggle (MIT License): Copyright - 2026 shadowfax29 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ===================================================================== */ /* ===================================================================== ABUS HELP — "Klassisch (dunkel)" dark theme + design switcher --------------------------------------------------------------------- A SECOND, user-selectable look layered ON TOP of the classic casing. It does NOT replace classic.css: keeps data-design="classic" (so ALL classic layout, the mobile drawer, the .social-icons relocation, the white logo box and our recent text-logo/chatbot work stay in force) and we add data-theme="dark" to recolour the chrome. Mechanism • The chrome's colours come from the --c-* tokens classic.css defines. We REDEFINE those tokens on the chrome containers (#header + .abus-navigation) under [data-theme="dark"], so the whole header + sidebar recolour with zero layout duplication. Scoping the redefinition to the chrome (not ) keeps the light content area's values intact (e.g. the breadcrumb stays a readable dark grey on the white content). • A few classic rules hardcode colours (nested nav links, copyright links, the drawer feedback icon) — those get targeted overrides. • The sidebar nav/search/tabs pick up the NetHelp look from the reference build (chevron rows, hairline separators, solid-blue open row, charcoal tab bar). • The article content (.abus-main) is deliberately left light. This file ALSO defines the design-switcher TOGGLE (a sun/moon checkbox, shown in both themes) and the one-time WELCOME modal — both ungated by data-theme. assets/js/design-switcher.js wires them and persists the choice (localStorage dokuflowTheme); a tiny IIFE applies it before first paint (FOUC-free). Load order: AFTER classic.css, BEFORE chat-widget.css. ===================================================================== */ /* ===================================================================== A. Dark palette — redefine the classic chrome tokens on the chrome containers only. ===================================================================== */ [data-theme="dark"] #header, [data-theme="dark"] .abus-navigation { --c-header-bg: #403f3c; /* charcoal header bar */ --c-header-fg: #ffffff; /* white header text + icons */ --c-sidebar-bg: #403f3c; /* charcoal sidebar */ --c-sidebar-fg: #ececea; /* light sidebar text */ --c-accent: #00457b; /* deep blue — open row, active tab, links */ --c-border: rgba(255, 255, 255, 0.12); /* hairlines on charcoal */ --c-muted: #b8b6ae; /* muted sidebar text */ --c-fav-star: #ffffff; /* favorited/bookmark star → white on charcoal */ } /* ===================================================================== B. Sidebar nav — the NetHelp look (light text on charcoal, hairline separators, a right ">" chevron per page row, solid-blue open row). ===================================================================== */ /* Light text at every level (classic hardcodes the nested rows to #6a6a6a). */ [data-theme="dark"] .abus-navigation { color: var(--c-sidebar-fg); } [data-theme="dark"] .abus-navigation .nav-link, [data-theme="dark"] .abus-navigation .nav .nav-link { color: var(--c-sidebar-fg); } [data-theme="dark"] .abus-navigation .nav .nav .nav-link { color: var(--c-muted); } /* Row separators + charcoal hover. */ [data-theme="dark"] .abus-navigation .nav-link { border-bottom: 1px solid var(--c-border); } [data-theme="dark"] .abus-navigation .nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } [data-theme="dark"] .abus-navigation .nav .nav .nav-link:hover { color: #fff; } /* Scrollspy parks a transient .active on whatever row is scrolled into view. The base sheet colours .nav-link.active blue (stylesheet.css), which only flipped to white on hover — so the active row read blue until pointed at. Match the RESTING active state to the hover/selection white. Selector mirrors the base rule's chain so it outweighs it. :not(:hover) keeps this off the hover state so a hovered row (e.g. the current chapter, which also carries .active) still falls through to the base sheet's normal blue hover; the open page keeps its white via is-current-page:hover. */ [data-theme="dark"] .abus-navigation .nav:not(.nav-pills) .nav-item .nav-link.active:not(:hover) { color: #fff; } /* Open page → full SOLID BLUE row, white bold text (the NetHelp selection). The .nav .nav-item chain lifts this to (0,6,0) so it outranks the (0,5,0) muted-nested rule above — otherwise an h2 sub-page's text stayed grey on the blue row whenever scrollspy wasn't parked on it (no transient .active). */ [data-theme="dark"] .abus-navigation .nav .nav-item .docs-page-link.is-current-page, [data-theme="dark"] .abus-navigation .nav .nav-item .docs-page-link.is-current-page:hover { background: var(--c-accent); color: #fff; } [data-theme="dark"] .abus-navigation .docs-page-link.is-current-chapter { color: #fff; } [data-theme="dark"] .abus-navigation .docs-page-link.is-current-parent { color: #fff; } /* h2 parent of an open h3 page (Servicedoku 2026-08-11, ported 2026-09-14) */ /* Right ">" chevron in its own cell (jQuery-Mobile listview style) — shown ONLY on entries that HAVE sub-chapters (theme.js tags those .has-subpages), so it indicates expandability, matching the light/classic caret. Rows without sub-chapters get no chevron. Muted normally, white on the open (blue) row. Uniform right padding on every row keeps the text column aligned. */ [data-theme="dark"] .abus-navigation .docs-page-link { position: relative; padding-right: 40px; } [data-theme="dark"] .abus-navigation .docs-page-link.has-subpages::before { content: "\f054"; /* fa-chevron-right */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.72rem; position: absolute; right: 0; top: 0; bottom: 0; width: 34px; display: flex; align-items: center; justify-content: center; color: var(--c-muted); border-left: 1px solid var(--c-border); } [data-theme="dark"] .abus-navigation .docs-page-link.has-subpages.is-current-page::before { color: #fff; } /* Suppress classic's own active artefacts — the black ::after chevron (would sit on the blue row) and the nested vertical guide line — so the rows stay clean. */ [data-theme="dark"] .abus-navigation > .nav > .nav-item > .docs-page-link.is-current-page::after, [data-theme="dark"] .abus-navigation > .nav > .nav-item > .docs-page-link.is-current-chapter::after, [data-theme="dark"] .abus-navigation .nav .nav .nav-item .nav-link::after { display: none !important; } /* ===================================================================== C. Sidebar search — light text/placeholder/icon on charcoal. ===================================================================== */ [data-theme="dark"] .ui-input { color: var(--c-sidebar-fg); border-bottom-color: var(--c-border); } [data-theme="dark"] .ui-input::placeholder { color: var(--c-muted); opacity: 1; } [data-theme="dark"] .ui-input-icon { color: var(--c-muted); } [data-theme="dark"] .search-nav-buttons i { color: var(--c-muted); } [data-theme="dark"] .search-no-results, [data-theme="dark"] .search-results-count { color: var(--c-muted); } /* ===================================================================== D. Bottom tab strip — charcoal bar, solid-blue active tab. ===================================================================== */ [data-theme="dark"] .c-tabs { background: #36352f; border-top: 1px solid rgba(0, 0, 0, 0.4); } [data-theme="dark"] .c-tab { color: var(--c-muted); } [data-theme="dark"] .c-tab i { color: var(--c-muted); } [data-theme="dark"] .c-tab-fav i { color: var(--c-fav-star); } /* amber star by default */ [data-theme="dark"] .c-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .c-tab:hover i { color: #fff; } [data-theme="dark"] .c-tab.is-active { color: #fff; background: var(--c-accent); } [data-theme="dark"] .c-tab.is-active i { color: #fff; } /* During a search (.c-searching) the selected Inhalt tab drops to EXACTLY the inactive-Favoriten look (label --c-muted, icon --c-fav-star, no blue fill) — the nav tree it stands for is hidden; clicking it cancels the search (theme.js). Mirrors the classic.css rule. */ [data-theme="dark"] .abus-navigation.c-searching .c-tab-inhalt.is-active { color: var(--c-muted); background: transparent; } [data-theme="dark"] .abus-navigation.c-searching .c-tab-inhalt.is-active i { color: var(--c-fav-star); } [data-theme="dark"] .abus-navigation.c-searching .c-tab-inhalt.is-active:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .abus-navigation.c-searching .c-tab-inhalt.is-active:hover i { color: #fff; } /* ===================================================================== E. Favorites pane + copyright — classic hardcodes these link colours to a dark navy (#1a2330) that vanishes on charcoal. ===================================================================== */ [data-theme="dark"] .c-fav-item a { color: var(--c-sidebar-fg); } [data-theme="dark"] .c-fav-item a:hover { color: #fff; } [data-theme="dark"] .c-fav-remove:hover { color: #ff6b6b; background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .sidebar-copyright a, [data-theme="dark"] .sidebar-copyright .c-privacy-btn { color: var(--c-sidebar-fg); } [data-theme="dark"] .sidebar-copyright a:hover, [data-theme="dark"] .sidebar-copyright .c-privacy-btn:hover { color: #fff; } /* ===================================================================== F. Mobile drawer (<900px) — the feedback is recoloured DARK by classic for the light drawer; flip it WHITE on the charcoal drawer. (All other drawer icons/text already follow the --c-* tokens above.) ===================================================================== */ @media (max-width: 899.98px) { [data-theme="dark"] .abus-navigation > .social-icons .c-feedback-icon { filter: brightness(0) invert(1); } } /* ===================================================================== G. Design-switcher TOGGLE — a sun/moon checkbox (Uiverse, shadowfax29), replicated faithfully under namespaced classes and scaled to font-size 14px so its 2em height matches the 28px toolbar icon buttons. Shown in BOTH themes (not gated by data-theme). checked = dark. ===================================================================== */ .design-selector { display: inline-flex; align-items: center; } .c-design-switch { font-size: 14px; position: relative; display: inline-block; width: 3.5em; height: 2em; vertical-align: middle; cursor: pointer; margin: 0; flex: none; } .c-design-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .c-design-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #005aaa; transition: .4s; border-radius: 30px; box-shadow: inset 0 0 0 1px #000; /* thin black border, drawn inwards (no layout/knob shift) */ } .c-design-slider::before { position: absolute; content: ""; height: 1.4em; width: 1.4em; border-radius: 20px; left: 0.3em; bottom: 0.3em; background-color: #ffb400; transition: .4s; } .c-design-switch input:checked + .c-design-slider { background-color: black; } .c-design-switch input:checked + .c-design-slider::before { background-color: black; border-radius: 50px; box-shadow: inset 9px 0px 1px 0px white; transform: translateX(1.5em); } .c-design-switch input:focus-visible + .c-design-slider { box-shadow: inset 0 0 0 1px #000, 0 0 0 2px rgba(0, 90, 170, 0.55); } @media (prefers-reduced-motion: reduce) { .c-design-slider, .c-design-slider::before { transition: none; } } /* ===================================================================== H. Welcome modal — shown once (assets/js/design-switcher.js owns the show-once logic + localised text + the choose/dismiss handlers). ===================================================================== */ .c-welcome-backdrop { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 32, 0.45); /* semi-transparent so the live preview shows behind */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .c-welcome { position: relative; width: 100%; max-width: 460px; background: #ffffff; color: #1f2937; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); padding: 24px 24px 20px; } .c-welcome-x { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: #6c757d; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .c-welcome-x:hover { background: rgba(0, 0, 0, 0.06); color: #1f2937; } .c-welcome-title { margin: 0 6px 6px 0; font-size: 1.3rem; font-weight: 700; color: #005aaa; } .c-welcome-sub { margin: 0 0 18px; font-size: 0.95rem; line-height: 1.45; color: #444444; } .c-welcome-options { display: flex; gap: 14px; } .c-welcome-card { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; border: 2px solid #d9e2ec; border-radius: 10px; background: #ffffff; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s, transform .1s; } .c-welcome-card:hover { border-color: #005aaa; box-shadow: 0 4px 14px rgba(0, 90, 170, 0.15); transform: translateY(-1px); } .c-welcome-card:focus-visible { outline: 2px solid #005aaa; outline-offset: 2px; } .c-welcome-card.is-selected { border-color: #005aaa; box-shadow: 0 0 0 1px #005aaa; } .c-welcome-card.is-selected .c-welcome-label { color: #005aaa; } .c-welcome-label { font-size: 0.95rem; font-weight: 600; color: #1f2937; } .c-welcome-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; } .c-welcome-later { flex: 0 0 auto; margin: 0; border: 0; background: transparent; color: #6c757d; font-size: 0.9rem; cursor: pointer; padding: 6px 10px; border-radius: 6px; text-decoration: underline; } .c-welcome-later:hover { color: #1f2937; } .c-welcome-approve { flex: 0 0 auto; border: 0; background: #005aaa; color: #ffffff; font-weight: 600; font-size: 0.95rem; cursor: pointer; padding: 9px 20px; border-radius: 8px; } .c-welcome-approve:hover { background: #0a68c2; } .c-welcome-approve:focus-visible { outline: 2px solid #005aaa; outline-offset: 2px; } @media (max-width: 420px) { .c-welcome-options { flex-direction: column; } } /* CSS mini-mockups (no image assets). Each is a tiny header+sidebar+content sketch in the design's palette; the content panel is WHITE in BOTH variants to communicate "chrome-only dark, the article stays light". */ .c-mock { width: 100%; max-width: 150px; height: 92px; border-radius: 8px; overflow: hidden; border: 1px solid #d9e2ec; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .c-mock-head { height: 18px; flex: none; display: flex; align-items: center; gap: 3px; padding: 0 6px; } .c-mock-head::before { /* white logo-box hint */ content: ""; width: 30px; height: 9px; background: rgba(255, 255, 255, 0.92); border-radius: 2px; margin-right: auto; } .c-mock-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); } .c-mock-body { flex: 1; display: flex; min-height: 0; } .c-mock-side { width: 38%; padding: 7px 5px; display: flex; flex-direction: column; gap: 5px; } .c-mock-bar { height: 5px; border-radius: 2px; } .c-mock-content { flex: 1; background: #ffffff; padding: 8px 7px; display: flex; flex-direction: column; gap: 5px; } .c-mock-line { height: 4px; border-radius: 2px; background: #e3e6ea; } .c-mock-line.short { width: 62%; } /* Standard (light) palette */ .c-mock-light .c-mock-head { background: #005aaa; } .c-mock-light .c-mock-side { background: #f3f4f6; } .c-mock-light .c-mock-bar { background: #c3c8cf; } .c-mock-light .c-mock-bar.is-accent { background: #005aaa; } /* Klassisch (dunkel) palette */ .c-mock-dark .c-mock-head { background: #403f3c; } .c-mock-dark .c-mock-side { background: #403f3c; } .c-mock-dark .c-mock-bar { background: rgba(255, 255, 255, 0.22); } .c-mock-dark .c-mock-bar.is-accent { background: #00457b; } /* ===================================================================== I. Start page (start.html) — chrome-only dark, mirroring the doc viewer. --------------------------------------------------------------------- The start page does NOT load classic.css; its blue header comes from stylesheet.css's `#header .bg-dark { background:#005aaa !important }`. In dark mode we recolour JUST that header bar to the same charcoal the doc viewer uses (#403f3c) — the hero, product cards and footer stay light, exactly like the doc viewer keeps its article light. The header's logo, text and icons are already white (they sit on the blue bar), so they stay legible on the charcoal bar; the toggle shows in both designs. (Scoped to body.start-page so it never touches the doc viewer, whose header is driven by the --c-header-bg token in section A.) ===================================================================== */ [data-theme="dark"] body.start-page #header .bg-dark { background-color: #403f3c !important; } /* The language dropdown drops out of the header bar, so match it to the charcoal bar (the language menu is visible on this casing). */ [data-theme="dark"] body.start-page .social-icons .language-selector .dropdown-menu { background-color: #403f3c; } /* ===================================================================== K. "Weiterlesen" resume bar in the dark design (ported from the Servicedoku 2026-09-15). The dark palette made the word "Weiterlesen" almost vanish (the only non-blue text in the bar), so the bar keeps the LIGHT colours from stylesheet.css — FH prefers the light look. The values are spelled out on purpose (not merely "remove the overrides") so later general dark rules for buttons/text cannot recolour the bar. Reference: stylesheet.css .c-resume*. ===================================================================== */ [data-theme="dark"] .c-resume { background: #eef5fc; border-color: #cfe0f0; } [data-theme="dark"] .c-resume__go { color: #14344f; } [data-theme="dark"] .c-resume__go i, [data-theme="dark"] .c-resume__go strong { color: #005aaa; } [data-theme="dark"] .c-resume__x { color: #8a97a6; } [data-theme="dark"] .c-resume__x:hover { color: #14344f; background: rgba(0, 45, 90, 0.08); } /* "Meinten Sie" row on the charcoal sidebar (2026-09-15, like the Servicedoku). */ [data-theme="dark"] .search-didyoumean .c-sr-didyoumean { color: #ececea; } [data-theme="dark"] .search-didyoumean .c-sr-didyoumean i, [data-theme="dark"] .search-didyoumean .c-sr-didyoumean strong { color: #7ab5e8; } [data-theme="dark"] .search-didyoumean .c-sr-didyoumean:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }