/* ========================================================================== Rudy Digital Lab — theme-enhancements.css Geladen ná main.css. Bevat uitbreidingen die main.css niet aanraken. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Dark Mode Toggle Knop -------------------------------------------------------------------------- */ .rdl-darkmode-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: transparent; color: var(--color-text-muted); cursor: pointer; flex-shrink: 0; transition: color var(--transition), border-color var(--transition), background var(--transition); } .rdl-darkmode-toggle:hover, .rdl-darkmode-toggle:focus-visible { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-light); outline: none; } .rdl-darkmode-toggle svg { display: block; width: 16px; height: 16px; pointer-events: none; } /* -------------------------------------------------------------------------- 2. Dark Mode — CSS Custom Properties override Alle dark mode stijlen werken via het overschrijven van :root variabelen. De class 'dark-mode' staat op , zodat het anti-FOUC script vroeg kan ingrijpen vóór de gerenderd is. -------------------------------------------------------------------------- */ html.dark-mode { /* Kleuren */ --color-bg: #0f1117; --color-surface: #1a1d27; --color-border: #2a2e42; --color-border-hover: #4f7ef7; --color-text: #e8eaf0; --color-text-muted: #9499b0; --color-text-subtle: #565c7a; --color-accent: #4f7ef7; --color-accent-dark: #3b6ef0; --color-accent-light: #1a2240; /* Schaduwen — subtieler in dark mode */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); } /* -------------------------------------------------------------------------- 3. Dark Mode — specifieke component overrides Onderdelen die niet volledig via CSS custom properties worden aangestuurd. -------------------------------------------------------------------------- */ /* Code blokken */ html.dark-mode pre, html.dark-mode code { background: #12151f; border-color: var(--color-border); color: #c9d1e8; } /* Inline code */ html.dark-mode :not(pre) > code { background: #1e2235; color: #c9d1e8; } /* Selectie */ html.dark-mode ::selection { background: var(--color-accent); color: #ffffff; } /* Formulier inputs (comments, etc.) */ html.dark-mode input[type="text"], html.dark-mode input[type="email"], html.dark-mode input[type="url"], html.dark-mode input[type="search"], html.dark-mode textarea, html.dark-mode select { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } html.dark-mode input[type="text"]:focus, html.dark-mode input[type="email"]:focus, html.dark-mode input[type="url"]:focus, html.dark-mode input[type="search"]:focus, html.dark-mode textarea:focus { border-color: var(--color-accent); outline: none; } /* Nav overlay — iets donkerder in dark mode */ html.dark-mode .site-nav-overlay { background: rgba(0, 0, 0, 0.60); } /* Mobile nav achtergrond */ @media (max-width: 900px) { html.dark-mode .site-nav.is-open { background: var(--color-surface); border-color: var(--color-border); } } /* Avatar borders */ html.dark-mode .comment-author img, html.dark-mode .author-box__avatar img { border-color: var(--color-border); } /* Experiment card hover in dark mode */ html.dark-mode .card:hover { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-md); } /* Tool tags in dark mode */ html.dark-mode .tool-tag { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted); } /* Post thumbnail hover */ html.dark-mode .post-card__thumbnail img, html.dark-mode .note-item__thumbnail img, html.dark-mode .related-post__thumbnail img { opacity: 0.85; } html.dark-mode .post-card__thumbnail:hover img, html.dark-mode .note-item__thumbnail:hover img, html.dark-mode .related-post__thumbnail:hover img { opacity: 1.0; } /* Blockquote */ html.dark-mode blockquote { border-left-color: var(--color-accent); background: var(--color-surface); } /* Nested comment border */ html.dark-mode .comment-list .children { border-left-color: var(--color-border); } /* -------------------------------------------------------------------------- 4. Dark Mode — Toggle icon wisseling Sun-icoon tonen in dark mode (klik → naar light) Moon-icoon tonen in light mode (klik → naar dark) JS beheert het hidden-attribuut; dit is de CSS-fallback. -------------------------------------------------------------------------- */ /* Standaard: maan zichtbaar, zon verborgen */ .rdl-dm-icon--sun { display: none; } .rdl-dm-icon--moon { display: block; } /* Dark mode: zon zichtbaar, maan verborgen */ html.dark-mode .rdl-dm-icon--sun { display: block; } html.dark-mode .rdl-dm-icon--moon { display: none; } /* Als JS hidden-attribuut zet, laat dat voorgaan */ .rdl-dm-icon--sun[hidden], .rdl-dm-icon--moon[hidden] { display: none !important; } /* -------------------------------------------------------------------------- 5. Dark Mode — Kleur-transitie Smooth overgang bij wisselen, maar niet bij initial page load (dan is de klasse al gezet door anti-FOUC script). -------------------------------------------------------------------------- */ html.dark-mode-ready, html.dark-mode-ready * { transition: background-color 200ms ease, border-color 200ms ease, color 150ms ease !important; } /* -------------------------------------------------------------------------- 6. Dark Mode — Forum (Rudy Forum Lite) overrides De forumplugin gebruikt eigen hardcoded kleuren die niet reageren op de CSS custom properties van het thema. Deze sectie overschrijft ze gericht zodat het forum leesbaar blijft in dark mode. Scope: html.dark-mode body.rfl-forum-page -------------------------------------------------------------------------- */ /* Pagina-achtergrond — de lichtblauwe achtergrond van het forum */ html.dark-mode body.rfl-forum-page { background-color: var(--color-bg) !important; } /* Algemene containers en wrappers */ html.dark-mode body.rfl-forum-page .rfl-wrap, html.dark-mode body.rfl-forum-page .rfl-container, html.dark-mode body.rfl-forum-page [class*="rfl-"] { background-color: transparent; color: var(--color-text); } /* Forum cards / thread-blokken (witte achtergrond met schaduw) */ html.dark-mode body.rfl-forum-page .rfl-topic, html.dark-mode body.rfl-forum-page .rfl-post, html.dark-mode body.rfl-forum-page .rfl-reply, html.dark-mode body.rfl-forum-page .rfl-card, html.dark-mode body.rfl-forum-page .rfl-box, html.dark-mode body.rfl-forum-page .rfl-panel, html.dark-mode body.rfl-forum-page .rfl-thread, html.dark-mode body.rfl-forum-page .rfl-message { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } /* Post-inhoud — de tekst die bijna onleesbaar was */ html.dark-mode body.rfl-forum-page .rfl-post-content, html.dark-mode body.rfl-forum-page .rfl-reply-content, html.dark-mode body.rfl-forum-page .rfl-message-body, html.dark-mode body.rfl-forum-page .rfl-topic-content, html.dark-mode body.rfl-forum-page [class*="rfl-content"], html.dark-mode body.rfl-forum-page [class*="rfl-body"] { background-color: var(--color-surface) !important; color: var(--color-text) !important; } /* Header-rij boven een post (datum, #nummer) */ html.dark-mode body.rfl-forum-page [class*="rfl-post-header"], html.dark-mode body.rfl-forum-page [class*="rfl-reply-header"], html.dark-mode body.rfl-forum-page [class*="rfl-meta"] { background-color: var(--color-bg) !important; color: var(--color-text-muted) !important; border-color: var(--color-border) !important; } /* Avatar-kolom / user-sidebar */ html.dark-mode body.rfl-forum-page [class*="rfl-author"], html.dark-mode body.rfl-forum-page [class*="rfl-user"], html.dark-mode body.rfl-forum-page .rfl-avatar-col { background-color: var(--color-surface) !important; color: var(--color-text-muted) !important; border-color: var(--color-border) !important; } /* "Nog geen replies" sectie */ html.dark-mode body.rfl-forum-page [class*="rfl-empty"], html.dark-mode body.rfl-forum-page [class*="rfl-no-reply"] { background-color: var(--color-surface) !important; color: var(--color-text-muted) !important; border-color: var(--color-border) !important; } /* Reactie-formulier — textarea en omgeving */ html.dark-mode body.rfl-forum-page [class*="rfl-form"], html.dark-mode body.rfl-forum-page .rfl-reply-form, html.dark-mode body.rfl-forum-page .rfl-respond { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } html.dark-mode body.rfl-forum-page textarea, html.dark-mode body.rfl-forum-page input[type="text"], html.dark-mode body.rfl-forum-page input[type="email"] { background-color: var(--color-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html.dark-mode body.rfl-forum-page textarea::placeholder, html.dark-mode body.rfl-forum-page input::placeholder { color: var(--color-text-subtle) !important; } /* Moderatie-balk */ html.dark-mode body.rfl-forum-page [class*="rfl-mod"], html.dark-mode body.rfl-forum-page [class*="rfl-admin"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } /* Links */ html.dark-mode body.rfl-forum-page a { color: var(--color-accent); } html.dark-mode body.rfl-forum-page a:hover { color: var(--color-accent-dark); } /* Breadcrumbs */ html.dark-mode body.rfl-forum-page [class*="rfl-breadcrumb"], html.dark-mode body.rfl-forum-page .breadcrumb { color: var(--color-text-muted) !important; } /* Category-badge / label */ html.dark-mode body.rfl-forum-page [class*="rfl-category"], html.dark-mode body.rfl-forum-page [class*="rfl-badge"], html.dark-mode body.rfl-forum-page [class*="rfl-tag"] { background-color: var(--color-accent-light) !important; color: var(--color-accent) !important; border-color: transparent !important; } /* -------------------------------------------------------------------------- 7. Lab Status Widget -------------------------------------------------------------------------- */ .lab-status { font-family: var(--font-mono); } .lab-status__badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 2px; margin-bottom: var(--space-4); } /* Status-kleuren */ .lab-status__badge--development { background: #fef3c7; color: #92400e; } .lab-status__badge--active { background: #d1fae5; color: #065f46; } .lab-status__badge--paused { background: #f3f4f6; color: #374151; } .lab-status__badge--completed { background: #ede9fe; color: #5b21b6; } .lab-status__badge--planned { background: var(--color-accent-light); color: var(--color-accent); } /* Pulserende statusdot */ .lab-status__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .lab-status__badge--development .lab-status__dot, .lab-status__badge--active .lab-status__dot { animation: rdl-pulse 2s ease-in-out infinite; } @keyframes rdl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .lab-status__project { font-size: 1rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; margin-bottom: var(--space-1); } .lab-status__link { color: var(--color-text); text-decoration: none; } .lab-status__link:hover { color: var(--color-accent); } .lab-status__version { font-size: 0.75rem; color: var(--color-text-subtle); letter-spacing: 0.04em; margin-bottom: var(--space-3); } .lab-status__desc { font-family: var(--font-ui); font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.5; margin-top: var(--space-2); } /* Dark mode aanpassingen voor Lab Status badges */ html.dark-mode .lab-status__badge--development { background: #422006; color: #fcd34d; } html.dark-mode .lab-status__badge--active { background: #022c22; color: #6ee7b7; } html.dark-mode .lab-status__badge--paused { background: #1f2937; color: #9ca3af; } html.dark-mode .lab-status__badge--completed { background: #2e1065; color: #c4b5fd; } /* -------------------------------------------------------------------------- 8. Post Card — Fallback Thumbnail & Categorie -------------------------------------------------------------------------- */ .post-card__thumbnail--fallback { display: flex; align-items: center; justify-content: center; background: var(--color-accent-light); border: 1px solid var(--color-border); border-radius: var(--radius); height: 200px; overflow: hidden; margin-bottom: var(--space-4); } .post-card__fallback-icon { color: var(--color-accent); opacity: 0.5; } .post-card__thumbnail--fallback:hover .post-card__fallback-icon { opacity: 0.8; } .post-card__category { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } .post-card__category a { color: var(--color-accent); text-decoration: none; } .post-card__category a:hover { text-decoration: underline; } .post-card__meta-sep { color: var(--color-text-subtle); } /* -------------------------------------------------------------------------- 9. Experiment Cards — CPT-specifieke stijlen -------------------------------------------------------------------------- */ .card__title-link { color: var(--color-text); text-decoration: none; } .card__title-link:hover { color: var(--color-accent); } .card__thumbnail { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); margin-bottom: var(--space-4); } .card__thumbnail img { width: 100%; height: 180px; object-fit: cover; display: block; transition: opacity var(--transition); } .card__thumbnail:hover img { opacity: 0.88; } .card__read-more { display: inline-block; margin-top: var(--space-3); font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-accent); text-decoration: none; letter-spacing: 0.04em; } .card__read-more:hover { text-decoration: underline; } /* Link naar het experiments-archief */ .experiments-archive-link { margin-top: var(--space-8); font-family: var(--font-mono); font-size: 0.875rem; } .experiments-archive-link a { color: var(--color-accent); text-decoration: none; } .experiments-archive-link a:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 10. Dark Mode — WP MicroStream overrides -------------------------------------------------------------------------- */ /* Kaarten / feed-items */ html.dark-mode .wp-microstream, html.dark-mode [class*="microstream"], html.dark-mode [class*="ms-"], html.dark-mode [id*="microstream"] { background-color: var(--color-bg) !important; color: var(--color-text) !important; } /* Individuele stream-items (witte kaarten) */ html.dark-mode [class*="ms-post"], html.dark-mode [class*="ms-item"], html.dark-mode [class*="ms-card"], html.dark-mode [class*="ms-entry"], html.dark-mode [class*="ms-feed"], html.dark-mode [class*="microstream-post"], html.dark-mode [class*="microstream-item"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } /* Compose-formulier */ html.dark-mode [class*="ms-form"], html.dark-mode [class*="ms-compose"], html.dark-mode [class*="microstream-form"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; } html.dark-mode [class*="ms-form"] textarea, html.dark-mode [class*="ms-compose"] textarea, html.dark-mode [class*="ms-form"] input[type="text"], html.dark-mode [class*="microstream-form"] textarea { background-color: var(--color-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html.dark-mode [class*="ms-form"] textarea::placeholder, html.dark-mode [class*="ms-compose"] textarea::placeholder { color: var(--color-text-subtle) !important; } /* Toolbar onder het tekstveld (emoji, afbeelding, link) */ html.dark-mode [class*="ms-toolbar"], html.dark-mode [class*="ms-actions"], html.dark-mode [class*="ms-footer"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } /* Knoppen */ html.dark-mode [class*="ms-btn"], html.dark-mode [class*="ms-button"], html.dark-mode [class*="ms-submit"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } /* Meta: auteur, datum, bewerk/verwijder links */ html.dark-mode [class*="ms-meta"], html.dark-mode [class*="ms-date"], html.dark-mode [class*="ms-author"] { color: var(--color-text-subtle) !important; } /* Link previews (de URL-kaart met favicon) */ html.dark-mode [class*="ms-link-preview"], html.dark-mode [class*="ms-preview"], html.dark-mode [class*="ms-embed"] { background-color: var(--color-bg) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } /* Reactie-tellers / likes */ html.dark-mode [class*="ms-reactions"], html.dark-mode [class*="ms-likes"], html.dark-mode [class*="ms-reaction"] { background-color: transparent !important; color: var(--color-text-muted) !important; } /* Vernieuwen-knop */ html.dark-mode [class*="ms-refresh"], html.dark-mode [class*="ms-load"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } /* Algemene links */ html.dark-mode [class*="ms-"] a, html.dark-mode [class*="microstream-"] a { color: var(--color-accent) !important; } /* -------------------------------------------------------------------------- 11. Dark Mode — Contactformulier overrides Vangt Contact Form 7, WPForms, Fluent Forms en vergelijkbare plugins. -------------------------------------------------------------------------- */ /* Formulier-wrapper */ html.dark-mode .wpcf7, html.dark-mode .wpforms-container, html.dark-mode .fluentform, html.dark-mode [class*="contact-form"], html.dark-mode [class*="wpcf7"], html.dark-mode [class*="wpforms"] { background-color: transparent !important; color: var(--color-text) !important; } /* Labels */ html.dark-mode .wpcf7 label, html.dark-mode .wpforms-container label, html.dark-mode [class*="contact-form"] label, html.dark-mode [class*="wpcf7"] label, html.dark-mode [class*="wpforms"] label { color: var(--color-text) !important; } /* Inputvelden en textarea */ html.dark-mode .wpcf7 input[type="text"], html.dark-mode .wpcf7 input[type="email"], html.dark-mode .wpcf7 input[type="tel"], html.dark-mode .wpcf7 input[type="number"], html.dark-mode .wpcf7 textarea, html.dark-mode .wpcf7 select, html.dark-mode [class*="wpforms"] input, html.dark-mode [class*="wpforms"] textarea, html.dark-mode [class*="wpforms"] select, html.dark-mode [class*="contact-form"] input, html.dark-mode [class*="contact-form"] textarea { background-color: var(--color-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html.dark-mode .wpcf7 input::placeholder, html.dark-mode .wpcf7 textarea::placeholder, html.dark-mode [class*="wpforms"] input::placeholder, html.dark-mode [class*="wpforms"] textarea::placeholder { color: var(--color-text-subtle) !important; } /* Submit-knop */ html.dark-mode .wpcf7 input[type="submit"], html.dark-mode [class*="wpforms"] button[type="submit"], html.dark-mode [class*="contact-form"] input[type="submit"], html.dark-mode [class*="contact-form"] button[type="submit"] { background-color: var(--color-accent) !important; color: #ffffff !important; border-color: var(--color-accent) !important; } /* -------------------------------------------------------------------------- 12. Dark Mode — Forum login, registratie en profielpagina -------------------------------------------------------------------------- */ /* Witte kaart-wrapper (login, registratie, profiel) */ html.dark-mode body.rfl-forum-page [class*="rfl-login"], html.dark-mode body.rfl-forum-page [class*="rfl-register"], html.dark-mode body.rfl-forum-page [class*="rfl-profile"], html.dark-mode body.rfl-forum-page [class*="rfl-account"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } /* Titels binnen die kaarten */ html.dark-mode body.rfl-forum-page [class*="rfl-login"] h1, html.dark-mode body.rfl-forum-page [class*="rfl-login"] h2, html.dark-mode body.rfl-forum-page [class*="rfl-login"] h3, html.dark-mode body.rfl-forum-page [class*="rfl-register"] h1, html.dark-mode body.rfl-forum-page [class*="rfl-register"] h2, html.dark-mode body.rfl-forum-page [class*="rfl-register"] h3, html.dark-mode body.rfl-forum-page [class*="rfl-profile"] h1, html.dark-mode body.rfl-forum-page [class*="rfl-profile"] h2, html.dark-mode body.rfl-forum-page [class*="rfl-profile"] h3 { color: var(--color-text) !important; } /* Inputvelden in login/registratie */ html.dark-mode body.rfl-forum-page [class*="rfl-login"] input, html.dark-mode body.rfl-forum-page [class*="rfl-register"] input, html.dark-mode body.rfl-forum-page [class*="rfl-profile"] input, html.dark-mode body.rfl-forum-page [class*="rfl-login"] textarea, html.dark-mode body.rfl-forum-page [class*="rfl-register"] textarea { background-color: var(--color-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } /* Profielkaarten (avatar, stats, topics) */ html.dark-mode body.rfl-forum-page [class*="rfl-profile-card"], html.dark-mode body.rfl-forum-page [class*="rfl-stats"], html.dark-mode body.rfl-forum-page [class*="rfl-topics-list"], html.dark-mode body.rfl-forum-page [class*="rfl-activity"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } html.dark-mode body.rfl-forum-page [class*="rfl-stats"] span, html.dark-mode body.rfl-forum-page [class*="rfl-stats"] p { color: var(--color-text-muted) !important; } /* -------------------------------------------------------------------------- 13. Dark Mode — Vangnet voor hardcoded witte plugin-kaarten Pakt witte achtergronden op die niet via custom properties worden gestuurd. Scope beperkt tot bekende plugin-wrappers zodat thema-elementen niet worden geraakt. -------------------------------------------------------------------------- */ html.dark-mode .page-content [style*="background:#fff"], html.dark-mode .page-content [style*="background: #fff"], html.dark-mode .page-content [style*="background:#ffffff"], html.dark-mode .page-content [style*="background: #ffffff"], html.dark-mode .page-content [style*="background-color:#fff"], html.dark-mode .page-content [style*="background-color: #fff"], html.dark-mode .page-content [style*="background-color:#ffffff"], html.dark-mode .page-content [style*="background-color: #ffffff"], html.dark-mode .post-content [style*="background:#fff"], html.dark-mode .post-content [style*="background-color:#ffffff"] { background-color: var(--color-surface) !important; color: var(--color-text) !important; } /* -------------------------------------------------------------------------- 14. Dark Mode — RFL auth en profiel (exacte class-namen) -------------------------------------------------------------------------- */ /* Login en registratie wrapper */ html.dark-mode .rfl-auth-wrapper, html.dark-mode .rfl-login-wrapper, html.dark-mode .rfl-register-wrapper { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } /* Titels en labels binnen de auth-wrappers */ html.dark-mode .rfl-auth-wrapper h1, html.dark-mode .rfl-auth-wrapper h2, html.dark-mode .rfl-auth-wrapper h3, html.dark-mode .rfl-auth-wrapper label, html.dark-mode .rfl-auth-wrapper p { color: var(--color-text) !important; } /* Inputvelden */ html.dark-mode .rfl-auth-wrapper input[type="text"], html.dark-mode .rfl-auth-wrapper input[type="email"], html.dark-mode .rfl-auth-wrapper input[type="password"] { background-color: var(--color-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html.dark-mode .rfl-auth-wrapper input::placeholder { color: var(--color-text-subtle) !important; } /* Submit-knop */ html.dark-mode .rfl-auth-wrapper input[type="submit"], html.dark-mode .rfl-auth-wrapper button[type="submit"], html.dark-mode .rfl-auth-wrapper .rfl-btn { background-color: var(--color-accent) !important; color: #ffffff !important; border-color: var(--color-accent) !important; } /* Hulpteksten en links (wachtwoord vergeten, registreer je hier) */ html.dark-mode .rfl-auth-wrapper small, html.dark-mode .rfl-auth-wrapper .rfl-auth-links, html.dark-mode .rfl-auth-wrapper a { color: var(--color-accent) !important; } /* Checkbox (onthoud mij) */ html.dark-mode .rfl-auth-wrapper input[type="checkbox"] { accent-color: var(--color-accent); } /* Profiel stats blok (witte achtergrond) */ html.dark-mode .rfl-profile-stats, html.dark-mode .rfl-stat-block { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } html.dark-mode .rfl-stat-block strong, html.dark-mode .rfl-stat-block span { color: var(--color-text) !important; } /* Scheidingslijn tussen stat-blokken */ html.dark-mode .rfl-stat-block + .rfl-stat-block { border-left-color: var(--color-border) !important; } /* -------------------------------------------------------------------------- 15. Forum — rfl-post-content altijd surface-kleur De Customizer past --color-bg aan, maar forum post-content hoort altijd de card-kleur (--color-surface) te gebruiken, niet de pagina-achtergrond. -------------------------------------------------------------------------- */ body.rfl-forum-page .rfl-post-content, body.rfl-forum-page [class*="rfl-post-content"], body.rfl-forum-page [class*="rfl-reply-content"], body.rfl-forum-page [class*="rfl-message-body"] { background-color: var(--color-surface) !important; }