/* CSS Document */ /* Dark mode voor dichtbijdebijbel.nl */ /* Gebruikt originele variabelen, met enkele uitbreidingen */ /* Activeer via of */ :root .dark { /* Oorspronkelijke variabelen overschreven */ --body-color: #c1c1c1; --second-color: #ffffff; --third-color: #202020; --light-color: #282828; --bg-color: #282828; /* Toegevoegde variabelen voor balans en contrast */ --bg-dark: #121212; --text-highlight: #FFFFFF; --text-muted: #888888; --highlight-color: #aa1d85; --link-hover: #d47dd2; --border-dark: #333333; --shadow-dark: rgba(0, 0, 0, 0.6); } /* Algemene achtergrond en tekst */ body.dark { background-color: var(--bg-dark); color: var(--body-color); transition: background-color 0.3s ease, color 0.3s ease; } /* Typografie */ body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 { color: var(--text-highlight); } /* Links */ body.dark a, .dark .mx_news_block_item_new p.more { color: var(--second-color); transition: color 0.2s ease; } body.dark a:hover { color: var(--link-hover); } /* Navigatie en header */ body.dark #topwrapper, body.dark #headerwrapper, body.dark #menu { background-color: var(--light-color); box-shadow: 0 2px 6px var(--shadow-dark); } body.dark #logo img { filter: brightness(0) invert(1); } /* Knoppen */ body.dark .button, body.dark button, body.dark input[type=submit] { background-color: var(--highlight-color); color: #fff; border: none; } body.dark .button:hover, body.dark input[type=submit]:hover { background-color: var(--link-hover); } body.dark .button.outline { background-color: transparent; border: 1px solid var(--second-color); color: var(--second-color); } body.dark .button.outline:hover { border-color: var(--link-hover); color: var(--link-hover); } /* Inputvelden */ body.dark input[type=text], body.dark input[type=email], body.dark input[type=password], body.dark textarea, body.dark select { background-color: var(--third-color); border: 1px solid var(--border-dark); color: var(--body-color); } body.dark input::placeholder, body.dark textarea::placeholder { color: var(--text-muted); } /* Blokken & kaarten */ body.dark .block, body.dark #sidemenu, body.dark .member .inner, body.dark .price .inner, body.dark .counter .inner, body.dark .mx_review_item_description { background-color: var(--light-color); color: var(--body-color); box-shadow: 0 0 10px var(--shadow-dark); } /* Footer */ body.dark #footerwrapper, body.dark .video-item { background-color: var(--third-color); } body.dark #footer { color: var(--text-muted); } body.dark #footer a { color: var(--second-color); } body.dark #bottom { background-color: var(--light-color); } body.dark #copy, body.dark #privacy { color: var(--text-muted); } /* Citaties & accenten */ body.dark blockquote { background-color: var(--third-color); border-left: 4px solid var(--highlight-color); color: var(--text-muted); } body.dark blockquote:before { background: linear-gradient(to right, var(--highlight-color), var(--link-hover)); } /* Iconen */ body.dark .icon, body.dark .icon a { color: var(--second-color); border-color: var(--second-color); } /* Selectie */ body.dark ::selection { background: var(--highlight-color); color: #fff; } /* Onderste secties */ body.dark #bottomcontentwrapper { background-color: var(--third-color); } body.dark #psalmboxwrapper { background-color: var(--light-color); } .dark #column-1 .btn { background-color: var(--text-muted)!important; } .dark #copy, .dark #privacy, .dark #copy p, .dark #privacy p, .dark #copy a, .dark #privacy a { color: var(--text-muted); } /* Tabellen, lijsten en overige content */ body.dark table { border-color: var(--border-dark); } body.dark th, body.dark td { background-color: var(--third-color); color: var(--body-color); } body.dark hr { border-color: var(--border-dark); }