/** * Dark-Mode — frontend-styling voor de toggle-knop. * * Dynamische waarden (positie/grootte/overgang) komen van de CSS-variabelen * die de plugin in zet (:root), zodat dit bestand cachebaar mag zijn. */ .divi-invert-toggle-btn { position: fixed !important; top: var(--didm-btn-top, auto) !important; left: var(--didm-btn-left, auto) !important; bottom: var(--didm-btn-bottom, 20px) !important; right: var(--didm-btn-right, 20px) !important; z-index: 999999 !important; background: #1a1a1a !important; color: #fff !important; border: 2px solid #fff !important; border-radius: 50px !important; padding: var(--didm-btn-padding, 12px 20px) !important; font-size: var(--didm-btn-font-size, 15px) !important; font-weight: 600 !important; font-family: inherit !important; line-height: 1.2 !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; filter: invert(100%) hue-rotate(180deg) !important; -webkit-tap-highlight-color: transparent; } .divi-invert-toggle-btn:hover { transform: scale(1.06) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important; } .divi-invert-toggle-btn:active { transform: scale(0.97) !important; } .divi-invert-toggle-btn:focus-visible { outline: 3px solid #4dabf7 !important; outline-offset: 3px !important; } /* ===== Dark-mode toggle in het navigatie-menu (Divi) ===== */ .didm-in-menu-wrap { display: inline-block !important; vertical-align: middle; margin: 0 0 0 12px; } .didm-in-menu { position: static !important; top: auto !important; left: auto !important; bottom: auto !important; right: auto !important; z-index: auto !important; background: transparent !important; color: inherit !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 1.1em !important; font-weight: inherit !important; line-height: inherit !important; box-shadow: none !important; filter: none !important; transition: color 0.2s ease !important; -webkit-appearance: none; appearance: none; display: inline-flex !important; align-items: center; min-height: 32px; min-width: 32px; vertical-align: middle; } .didm-in-menu:hover { transform: none !important; color: inherit !important; } .didm-in-menu-icon { display: inline-block; line-height: 1; pointer-events: none; }