/* ========================================================= Eenvoudige Dark Mode - CSS ========================================================= */ /* --- Toggle knop (zon/maan) --- */ #eenvoudige-darkmode-toggle { position: fixed !important; bottom: 20px !important; left: 20px !important; z-index: 999999 !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; background: #ffffff !important; color: #333333 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease !important; -webkit-appearance: none !important; appearance: none !important; } #eenvoudige-darkmode-toggle:hover { transform: scale(1.1) !important; } #eenvoudige-darkmode-toggle:focus { outline: 2px solid #8ab4ff !important; outline-offset: 2px !important; } #eenvoudige-darkmode-toggle svg { width: 22px !important; height: 22px !important; display: block !important; filter: none !important; } /* Mobiel */ @media (max-width: 768px) { #eenvoudige-darkmode-toggle { bottom: 10px !important; left: 10px !important; width: 38px !important; height: 38px !important; } #eenvoudige-darkmode-toggle svg { width: 18px !important; height: 18px !important; } } /* Toggle knop in dark mode */ html.dark-mode-active #eenvoudige-darkmode-toggle { background: #1b1f2a !important; color: #ffd862 !important; border-color: #3a4150 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important; } /* ========================================================= Dark mode regels - alleen actief als .dark-mode-active op staat ========================================================= */ html.dark-mode-active button.av-cta-btn { padding: 5px !important; background: #0259b0 !important; color: #ffffff !important; margin: 10px !important; } html.dark-mode-active, html.dark-mode-active body, html.dark-mode-active table, html.dark-mode-active tr, html.dark-mode-active td, html.dark-mode-active div, html.dark-mode-active section, html.dark-mode-active article, html.dark-mode-active aside, html.dark-mode-active header, html.dark-mode-active footer, html.dark-mode-active nav, html.dark-mode-active main, html.dark-mode-active form, html.dark-mode-active fieldset, html.dark-mode-active blockquote, html.dark-mode-active ul, html.dark-mode-active ol, html.dark-mode-active li { background: #101318 !important; color: #e8e8e8 !important; border-color: #303744 !important; } html.dark-mode-active p, html.dark-mode-active span, html.dark-mode-active font, html.dark-mode-active small, html.dark-mode-active strong, html.dark-mode-active b, html.dark-mode-active i, html.dark-mode-active em, html.dark-mode-active label, html.dark-mode-active h1, html.dark-mode-active h2, html.dark-mode-active h3, html.dark-mode-active h4, html.dark-mode-active h5, html.dark-mode-active h6 { color: #e8e8e8 !important; } html.dark-mode-active a, html.dark-mode-active a:link, html.dark-mode-active a:visited { color: #8ab4ff !important; } html.dark-mode-active a:hover, html.dark-mode-active a:focus { color: #c6dcff !important; } html.dark-mode-active input, html.dark-mode-active textarea, html.dark-mode-active select, html.dark-mode-active button { background: #1b1f2a !important; color: #f2f2f2 !important; border: 1px solid #3a4150 !important; } html.dark-mode-active input[type="submit"], html.dark-mode-active button { background: #263044 !important; color: #fff !important; } html.dark-mode-active hr { border-color: #303744 !important; } html.dark-mode-active img { filter: brightness(.9) contrast(1.05); } html.dark-mode-active [bgcolor], html.dark-mode-active [style*="background"], html.dark-mode-active [style*="color"] { background-color: #101318 !important; color: #e8e8e8 !important; } html.dark-mode-active ::selection { background: #2f5fa8; color: #fff; }