/* ===================================================================== SCOUTR 2.0 - de app Herstijlt de gedeelde onderdelen van QuickDate, zodat alle 76 views dezelfde taal spreken zonder dat er 76 bestanden herschreven worden. Laadt na tokens.css en scoutr.css, en na night.css is weggehaald. Waarom night.css eruit moest: dat bestand is de nachtmodus van het oude, lichte thema. Scoutr 2.0 is zelf donker. Twee donkere thema's over elkaar vochten om dezelfde eigenschappen, en night.css won met 37 regels !important, waaronder body{background:#131313 !important}. Alles hangt onder .sc, de klasse op . Geen losse hexwaarden. De !important's hieronder zijn niet vrijwillig: materialize.min.css en style.css (1.832 regels) gebruiken ze zelf, en dit blad laadt weliswaar later maar verliest van gelijke specificiteit met !important. ===================================================================== */ /* --------------------------------------------------------------------- 1. GROND --------------------------------------------------------------------- */ body.sc { background: var(--sc-nachtgroen) !important; color: var(--sc-tekst) !important; font-family: var(--sc-font-tekst) !important; font-size: var(--sc-t-base); line-height: var(--sc-lh-tekst); } /* De roze maskerafbeelding die over de hele pagina lag. Decoratie uit een ander ontwerp; het motief van Scoutr is de geweven band. */ .sc .body_banner_mask, .sc .login_baner, .sc .login_banner_mask, .sc .login_banner_lines { display: none !important; } .sc #container { background: transparent !important; } .sc .container, .sc .container-fluid, .sc .container_new { background: transparent !important; } /* Het thema zet hier een vaste breedte die op grote schermen smal oogt en op middelgrote schermen juist knelt. */ .sc .container.container_new { max-width: 1400px; } /* --------------------------------------------------------------------- 2. TYPOGRAFIE OVER DE HELE APP --------------------------------------------------------------------- */ /* style.css zet Montserrat op 207 plekken, met selectoren die specifieker zijn dan alles wat hier redelijkerwijs staat. Vandaar deze ene brede regel. :where() houdt het gewicht op (0,1,0), dus elke regel hieronder met een klasse of element erbij wint er alsnog van, terwijl hij door !important wel van style.css wint (die gebruikt daar geen !important). Uitgezonderd: icoonlettertypen, code, en onze eigen datalabels. */ .sc :where(*:not(i, .material-icons, .fa, [class^="fa-"], [class*=" fa-"], .sc-data, .badge, code, pre, kbd, samp)) { font-family: var(--sc-font-tekst) !important; } .sc .sc-data, .sc .badge, .sc .new.badge { font-family: var(--sc-font-data) !important; } .sc h1, .sc h2, .sc h3, .sc h4, .sc h5, .sc h6, .sc .card-title, .sc .modal-title, .sc .info_title, .sc .bold, .sc strong.bold { font-family: var(--sc-font-kop) !important; color: var(--sc-tekst) !important; letter-spacing: -.015em; } .sc h1 { font-size: var(--sc-t-3xl); } .sc h2 { font-size: var(--sc-t-2xl); } .sc h3 { font-size: var(--sc-t-xl); } .sc h4 { font-size: 17px; } .sc h5 { font-size: 16px; font-weight: 700; } .sc h6 { font-size: 15px; font-weight: 700; } /* Lopende tekst krijgt de leesmaat, de app de compacte maat. Dit zijn de enige plekken waar iemand echt zit te lezen. */ .sc .about-page, .sc .terms-page, .sc .privacy-page, .sc .faqs-page, .sc .article-page, .sc .page-page { font-size: var(--sc-t-lees); } .sc .about-page p, .sc .terms-page p, .sc .privacy-page p, .sc .article-page p { max-width: var(--sc-breed-lees); line-height: 1.62; } /* Het thema zet lopende tekst op 13 en 14px. Ondergrens is 16, doel 17. */ .sc p, .sc li, .sc td, .sc label, .sc span:not(.badge):not(.sc-data) { font-size: inherit; } .sc .sc-klein, .sc small { font-size: var(--sc-t-sm); } /* Het thema kleurt veel tekst bijna zwart. */ .sc :where(p, li, dd, dt, td, th, label, figcaption, blockquote) { color: inherit; } .sc .grey-text, .sc .grey-text.text-darken-1, .sc .grey-text.text-darken-2, .sc .black-text, .sc .text-muted { color: var(--sc-tekst-zacht) !important; } .sc .white-text { color: #FFFFFF !important; } /* --------------------------------------------------------------------- 3. NAVIGATIE, ingelogd en uitgelogd --------------------------------------------------------------------- */ .sc nav, .sc nav .nav-wrapper, .sc #nav-logged-in, .sc #nav-not-logged-in { background: rgba(18, 26, 23, .94) !important; box-shadow: none !important; border-bottom: 1px solid var(--sc-rand-stil); height: auto !important; line-height: normal !important; backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); } .sc nav .nav-wrapper { border-bottom: 0; display: flex; align-items: center; gap: var(--sc-r-4); } .sc nav a, .sc nav ul li > a { color: var(--sc-tekst) !important; font-family: var(--sc-font-tekst); font-weight: 500; text-decoration: none; border-radius: var(--sc-rond-pil); } .sc nav ul li > a:hover { background: rgba(255, 255, 255, .06) !important; } .sc nav ul li.active > a, .sc nav ul li > a.active { background: var(--sc-roze-stil) !important; color: var(--sc-tekst) !important; } /* Het logo op een lichte plaat: logo.png heeft donkere letters en is op een donkere grond onleesbaar. */ .sc #logo-container.brand-logo, .sc .header_logo .brand-logo { display: inline-flex !important; align-items: center; justify-content: center; background: var(--sc-tekst); border-radius: 10px; padding: 3px 7px; height: auto !important; line-height: 0 !important; margin: 8px 0 8px 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); transition: transform var(--sc-duur-snel) ease; } .sc #logo-container.brand-logo:hover { transform: rotate(-2deg) scale(1.03); background: var(--sc-tekst); } .sc #logo-container.brand-logo img, .sc .header_logo .brand-logo img { height: 32px !important; width: auto !important; max-width: none !important; display: block; /* night.css verving dit logo door de das zonder het woord Scoutr */ content: normal !important; } /* .header_logo is in het thema een zwevend element (float:left). In een flex-navigatie wordt zo'n element een flexitem zonder breedte en krimpt het naar nul, waardoor het logo tot een smalle streep werd geperst. */ .sc .header_logo, .sc nav .nav-wrapper > * { float: none !important; flex: 0 0 auto; width: auto !important; } .sc nav .nav-wrapper > ul.right { margin-left: auto; } .sc .header_logo { display: flex !important; align-items: center; } /* materialize zet .brand-logo op position:absolute met left:50% en een transform. In een flex-navigatie valt hij daardoor uit de rij, krijgt zijn ouder nul breedte, en wordt het logo tot een smalle streep geperst. */ .sc .brand-logo, .sc #logo-container.brand-logo { position: static !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; font-size: 0 !important; /* geen spookruimte naast de afbeelding */ } .sc #logo-container.brand-logo:hover { transform: rotate(-2deg) scale(1.03) !important; } /* Krediet, berichten, meldingen, profiel */ .sc .credit, .sc .header_msg, .sc .header_notifications, .sc .header_user { display: flex; align-items: center; } .sc .credit a, .sc .header_msg a, .sc .header_notifications a, .sc .header_user a { min-height: var(--sc-raak); display: inline-flex; align-items: center; gap: var(--sc-r-2); padding-inline: var(--sc-r-3); } .sc .header_user img, .sc .nav_usr_img img { border-radius: 50%; border: 2px solid var(--sc-rand); object-fit: cover; } /* --------------------------------------------------------------------- 4. ZIJBALK --------------------------------------------------------------------- */ .sc .dt_left_sidebar, .sc .sidebar, .sc .dt_right_sidebar { background: var(--sc-kampdoek) !important; border: 1px solid var(--sc-rand-stil); border-radius: var(--sc-rond-md); padding: var(--sc-r-3); box-shadow: none !important; } .sc .home_usr_sct, .sc .home_usr_stats { background: transparent !important; } .sc .home_usr_stats { border-top: 1px solid var(--sc-rand-stil); border-bottom: 1px solid var(--sc-rand-stil); } .sc .home_usr_stats b, .sc .home_usr_stats strong { color: var(--sc-tekst) !important; } .sc .home_usr_stats span { color: var(--sc-tekst-zacht) !important; font-size: var(--sc-t-sm); } .sc ul.menu li > a, .sc .dt_left_sidebar ul li > a { display: flex !important; align-items: center; gap: var(--sc-r-3); min-height: var(--sc-raak); padding: 5px var(--sc-r-3) !important; border-radius: var(--sc-rond-sm); color: var(--sc-tekst) !important; font-size: 14.5px; font-weight: 500; text-decoration: none; } .sc ul.menu li > a:hover { background: rgba(255, 255, 255, .06) !important; } .sc ul.menu li.active > a, .sc ul.menu li > a.active { background: var(--sc-roze-stil) !important; color: var(--sc-tekst) !important; font-weight: 600; } .sc ul.menu li.active > a svg { color: var(--sc-roze) !important; fill: var(--sc-roze) !important; } .sc li.divider, .sc .divider { background: var(--sc-rand-stil) !important; height: 1px !important; margin-block: var(--sc-r-2); } /* --------------------------------------------------------------------- 5. KAARTEN EN PANELEN --------------------------------------------------------------------- */ .sc .card, .sc .card-panel, .sc .collection, .sc .dt_home_match_user, .sc .random_user_item, .sc .dt_settings_box, .sc .well { background: var(--sc-kampdoek) !important; color: var(--sc-tekst) !important; border: 1px solid var(--sc-rand-stil) !important; border-radius: var(--sc-rond-md) !important; box-shadow: none !important; } .sc .card .card-content { padding: var(--sc-r-4) !important; } .sc .card .card-content, .sc .card .card-action { background: transparent !important; border-color: var(--sc-rand-stil) !important; } .sc .card .card-title { font-size: var(--sc-t-lg); font-weight: 700; } .sc .card-image img { border-radius: var(--sc-rond-md) var(--sc-rond-md) 0 0; } .sc .collection .collection-item { background: transparent !important; border-color: var(--sc-rand-stil) !important; color: var(--sc-tekst) !important; min-height: var(--sc-raak); } /* Het filterblok boven de resultaten */ .sc .dt_home_filters, .sc .dt_home_filters_prnt { background: transparent !important; } .sc .dt_home_filters h5 { margin: 0; } /* --------------------------------------------------------------------- 6. KNOPPEN Alles minstens 44px hoog, geen hoofdletters, leesbare kleuren. --------------------------------------------------------------------- */ .sc .btn, .sc .btn-large, .sc .btn-small, .sc .btn-flat, .sc button, .sc input[type="submit"], .sc input[type="button"] { font-family: var(--sc-font-tekst) !important; font-size: 14.5px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; border-radius: var(--sc-rond-pil) !important; min-height: var(--sc-raak) !important; height: auto !important; line-height: 1.2 !important; padding: 8px var(--sc-r-5) !important; display: inline-flex !important; align-items: center; justify-content: center; gap: var(--sc-r-2); box-shadow: none !important; transition: background var(--sc-duur-snel) ease, border-color var(--sc-duur-snel) ease, transform var(--sc-duur-snel) var(--sc-soepel); } /* --------------------------------------------------------------------- PICTOGRAMKNOPPEN De regel hierboven geeft ELKE knop `padding: 8px 20px`. Dat klopt voor een knop met een woord erin, maar niet voor een knop met alleen een pictogram: de knoppen voor berichten en meldingen in de navigatie zijn 42px breed, dus 40px daarvan ging naar padding en er bleef 2px over voor het pictogram. Gemeten op 2026-09-14: de SVG's in die knoppen kwamen uit op 0 bij 0 pixels. Op het scherm zag je drie lege bolletjes naast elkaar. Dit was mijn eigen regel die dat veroorzaakte, niet de leverancier. Vandaar: in de navigatie geen vaste breedte, gelijke padding rondom, en het pictogram krijgt zijn maat terug en mag niet krimpen. --------------------------------------------------------------------- */ .sc nav .btn-flat, .sc nav .btn.boost-me, .sc nav .header_msg > a, .sc nav .header_notifications > a { width: auto !important; min-width: var(--sc-raak) !important; padding: 6px 10px !important; gap: 4px; } .sc nav .btn-flat > svg, .sc nav .boost-me > svg, .sc nav .header_msg > a > svg, .sc nav .header_notifications > a > svg { width: 22px !important; height: 22px !important; /* flex-shrink 0: zonder dit krimpt een SVG in een flexrij alsnog naar nul zodra de knop te smal wordt. */ flex: 0 0 auto !important; } /* Hetzelfde probleem kan overal opduiken waar een knop alleen een pictogram bevat. Deze regel vangt dat af zonder de tekstknoppen te raken: een SVG in een knop krimpt nooit weg. */ .sc .btn > svg, .sc .btn-flat > svg, .sc button > svg { flex: 0 0 auto; min-width: 0; } @media (pointer: coarse) { .sc nav .btn-flat, .sc nav .btn.boost-me, .sc nav .header_msg > a, .sc nav .header_notifications > a { min-width: 44px !important; } } /* De hoofdknop */ .sc .btn, .sc .btn-large, .sc .btn_primary, .sc .btn_glossy, .sc input[type="submit"] { background: var(--sc-roze-vlak) !important; color: #FFFFFF !important; /* 4.70, berekend */ border: 1px solid transparent !important; } .sc .btn:hover, .sc .btn-large:hover, .sc .btn_primary:hover, .sc .btn_glossy:hover, .sc input[type="submit"]:hover { background: var(--sc-roze-vlak-op) !important; color: #FFFFFF !important; transform: translateY(-1px); } /* De stille knop */ .sc .btn-flat, .sc .btn.btn-flat { background: transparent !important; color: var(--sc-tekst) !important; border: 1px solid var(--sc-rand) !important; } .sc .btn-flat:hover { background: rgba(255, 255, 255, .05) !important; border-color: var(--sc-rand-sterk) !important; color: var(--sc-tekst) !important; } /* Bevestigen en verwijderen */ .sc .btn.green, .sc .btn-flat.green, .sc .btn_success { background: var(--sc-den) !important; color: #FFFFFF !important; border-color: transparent !important; } .sc .btn.green:hover, .sc .btn_success:hover { background: var(--sc-den-vlak-op) !important; } .sc .btn.red, .sc .btn.btn_danger, .sc .btn-flat.red { background: var(--sc-fout-vlak) !important; color: #FFFFFF !important; border-color: transparent !important; } .sc .btn:disabled, .sc .btn[disabled], .sc button:disabled { opacity: .5 !important; cursor: not-allowed; transform: none !important; } /* Ronde knoppen */ .sc .btn-floating { background: var(--sc-roze-vlak) !important; border-radius: 50% !important; min-height: var(--sc-raak) !important; padding: 0 !important; box-shadow: var(--sc-schaduw-md) !important; } .sc .btn-floating:hover { background: var(--sc-roze-vlak-op) !important; } .sc .btn-floating svg, .sc .btn-floating i { color: #FFFFFF !important; fill: #FFFFFF !important; } /* De golfjes van materialize botsen met onze kleuren */ .sc .waves-effect .waves-ripple { background: rgba(255, 255, 255, .18) !important; } /* Leuk en niet leuk op een profiel */ .sc .like, .sc .dislike { border-radius: 50% !important; min-width: 52px; min-height: 52px; display: inline-flex !important; align-items: center; justify-content: center; } .sc .like { background: var(--sc-roze-vlak) !important; } .sc .dislike { background: transparent !important; border: 1px solid var(--sc-rand) !important; } .sc .like svg { fill: #FFFFFF !important; color: #FFFFFF !important; } .sc .dislike svg { fill: var(--sc-tekst) !important; color: var(--sc-tekst) !important; } /* --------------------------------------------------------------------- 7. FORMULIEREN Materialize maakt hier onderstreepte velden zonder achtergrond met een zwevend label. Dat is op een donkere grond slecht te zien en het label overlapt de tekst zodra er iets in staat. --------------------------------------------------------------------- */ .sc input[type="text"], .sc input[type="email"], .sc input[type="password"], .sc input[type="tel"], .sc input[type="number"], .sc input[type="date"], .sc input[type="url"], .sc input[type="search"], .sc textarea, .sc select, .sc .select-dropdown, .sc .form-control { box-sizing: border-box !important; width: 100% !important; min-height: var(--sc-raak) !important; height: auto !important; padding: 7px var(--sc-r-3) !important; margin: 0 0 var(--sc-r-1) !important; background: var(--sc-kampdoek-hoog) !important; color: var(--sc-tekst) !important; border: 1px solid var(--sc-rand) !important; border-radius: var(--sc-rond-sm) !important; box-shadow: none !important; font-family: var(--sc-font-tekst) !important; font-size: 15px !important; line-height: 1.4 !important; } .sc textarea { min-height: 88px !important; resize: vertical; } .sc input:hover:not([disabled]), .sc textarea:hover:not([disabled]), .sc select:hover:not([disabled]), .sc .select-dropdown:hover { border-color: var(--sc-rand-sterk) !important; } .sc input:focus, .sc textarea:focus, .sc select:focus, .sc .select-dropdown:focus { border-color: var(--sc-touw) !important; background: var(--sc-kampdoek-hoog) !important; box-shadow: none !important; } .sc ::placeholder { color: var(--sc-tekst-zacht) !important; opacity: .8; } /* Het zwevende label van materialize vastzetten boven het veld. */ .sc .input-field { margin-top: var(--sc-r-4) !important; margin-bottom: var(--sc-r-3) !important; position: relative; } .sc .input-field > label, .sc .input-field > label.active { position: static !important; transform: none !important; display: block !important; color: var(--sc-tekst) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .01em; margin-bottom: 5px !important; left: 0 !important; top: auto !important; pointer-events: auto; } /* Het label staat in de markup NA het veld; met flex zetten we hem ervoor. */ .sc .input-field { display: flex; flex-direction: column; } .sc .input-field > label { order: -1; } .sc .input-field > .prefix { position: static !important; margin-right: var(--sc-r-2); } /* De onderstreping van materialize weg */ .sc input:not([type]), .sc input[type="text"], .sc input[type="password"], .sc input[type="email"], .sc input[type="url"], .sc input[type="tel"], .sc input[type="number"], .sc input[type="search"], .sc textarea.materialize-textarea { border-bottom: 1px solid var(--sc-rand) !important; } .sc .input-field > input:focus + label { color: var(--sc-touw) !important; } /* Keuzelijsten */ .sc .select-wrapper .caret { fill: var(--sc-tekst-zacht) !important; } .sc .dropdown-content { background: var(--sc-kampdoek-hoog) !important; border: 1px solid var(--sc-rand) !important; border-radius: var(--sc-rond-sm) !important; box-shadow: var(--sc-schaduw-md) !important; } .sc .dropdown-content li > a, .sc .dropdown-content li > span { color: var(--sc-tekst) !important; font-size: var(--sc-t-base) !important; min-height: var(--sc-raak); display: flex; align-items: center; } .sc .dropdown-content li:hover, .sc .dropdown-content li.selected { background: var(--sc-roze-stil) !important; } /* Vinkjes en keuzerondjes */ .sc [type="checkbox"] + span:not(.lever)::before, .sc [type="checkbox"]:checked + span:not(.lever)::before { border-color: var(--sc-rand) !important; } .sc [type="checkbox"].filled-in:checked + span:not(.lever)::after { background-color: var(--sc-roze-vlak) !important; border-color: var(--sc-roze-vlak) !important; } .sc [type="checkbox"] + span, .sc [type="radio"] + span { color: var(--sc-tekst) !important; font-size: var(--sc-t-base) !important; min-height: var(--sc-raak); display: inline-flex !important; align-items: center; padding-left: 32px !important; } .sc [type="radio"]:checked + span::after { background-color: var(--sc-roze-vlak) !important; border-color: var(--sc-roze-vlak) !important; } .sc .switch label .lever { background-color: var(--sc-rand) !important; } .sc .switch label input[type=checkbox]:checked + .lever { background-color: rgba(224, 65, 126, .5) !important; } .sc .switch label input[type=checkbox]:checked + .lever::before, .sc .switch label input[type=checkbox]:checked + .lever::after { background-color: var(--sc-roze-vlak) !important; } /* Bereikschuif */ .sc input[type=range]::-webkit-slider-thumb { background: var(--sc-roze-vlak) !important; } .sc input[type=range]::-moz-range-thumb { background: var(--sc-roze-vlak) !important; } /* --------------------------------------------------------------------- 8. MODALEN --------------------------------------------------------------------- */ .sc .modal { background: var(--sc-kampdoek) !important; color: var(--sc-tekst) !important; border: 1px solid var(--sc-rand-stil) !important; border-radius: var(--sc-rond-lg) !important; box-shadow: var(--sc-schaduw-lg) !important; } .sc .modal .modal-content, .sc .modal .modal-dialog, .sc .modal .modal-footer { background: transparent !important; color: var(--sc-tekst) !important; border-color: var(--sc-rand-stil) !important; } .sc .modal-overlay { background: rgba(8, 12, 10, .72) !important; } /* --------------------------------------------------------------------- 9. TABBLADEN, PAGINERING, LABELS --------------------------------------------------------------------- */ .sc .tabs { background: transparent !important; border-bottom: 1px solid var(--sc-rand-stil); } .sc .tabs .tab a { color: var(--sc-tekst-zacht) !important; font-family: var(--sc-font-tekst) !important; font-size: var(--sc-t-base) !important; text-transform: none !important; letter-spacing: 0 !important; min-height: var(--sc-raak); display: flex; align-items: center; justify-content: center; } .sc .tabs .tab a.active, .sc .tabs .tab a:hover { color: var(--sc-tekst) !important; background: transparent !important; } .sc .tabs .indicator { background-color: var(--sc-roze) !important; height: 3px; } .sc .pagination li a { color: var(--sc-tekst) !important; min-height: var(--sc-raak); display: flex; align-items: center; } .sc .pagination li.active { background: var(--sc-roze-vlak) !important; border-radius: var(--sc-rond-sm); } .sc .badge, .sc .new.badge, .sc .chip { background: var(--sc-roze-vlak) !important; color: #FFFFFF !important; border-radius: var(--sc-rond-pil) !important; font-family: var(--sc-font-data); font-size: var(--sc-t-xs) !important; letter-spacing: .06em; padding: 2px 9px !important; height: auto !important; line-height: 1.6 !important; } /* --------------------------------------------------------------------- 10. MELDINGEN --------------------------------------------------------------------- */ .sc .alert, .sc .toast { border-radius: var(--sc-rond-sm) !important; border: 1px solid var(--sc-rand) !important; background: var(--sc-kampdoek-hoog) !important; color: var(--sc-tekst) !important; font-size: var(--sc-t-base) !important; padding: var(--sc-r-4) !important; } .sc .alert-danger, .sc .alert-error { background: var(--sc-fout-stil) !important; border-color: var(--sc-fout) !important; color: var(--sc-fout) !important; } .sc .alert-success { background: var(--sc-den-stil) !important; border-color: var(--sc-den) !important; color: var(--sc-den-tekst) !important; } .sc .alert p, .sc .alert a { color: inherit !important; } /* --------------------------------------------------------------------- 11. VOET --------------------------------------------------------------------- */ .sc footer#footer, .sc .page_footer { background: var(--sc-nachtgroen) !important; border-top: 1px solid var(--sc-rand-stil); color: var(--sc-tekst-zacht) !important; } .sc .footer-copyright { background: transparent !important; color: var(--sc-tekst-zacht) !important; } .sc footer a { color: var(--sc-touw) !important; min-height: var(--sc-raak); display: inline-flex; align-items: center; } .sc footer a:hover { color: var(--sc-tekst) !important; } /* --------------------------------------------------------------------- 12. FOCUS, overal en altijd zichtbaar --------------------------------------------------------------------- */ .sc a:focus-visible, .sc button:focus-visible, .sc input:focus-visible, .sc select:focus-visible, .sc textarea:focus-visible, .sc [tabindex]:focus-visible, .sc .btn:focus-visible, .sc .btn-flat:focus-visible, .sc .btn-floating:focus-visible { outline: var(--sc-focus-dikte) solid var(--sc-focus) !important; outline-offset: var(--sc-focus-afstand) !important; } /* Materialize zet focus-achtergronden op knoppen die de kleur verstoren */ .sc .btn:focus, .sc .btn-large:focus, .sc .btn-floating:focus { background: var(--sc-roze-vlak) !important; } .sc .btn-flat:focus { background: transparent !important; } /* --------------------------------------------------------------------- 13. AFBEELDINGEN EN AVATARS --------------------------------------------------------------------- */ .sc .circle, .sc img.circle, .sc .avatar img { border-radius: 50% !important; object-fit: cover; } .sc img { max-width: 100%; height: auto; } /* Tekst op een foto krijgt altijd een verloop eronder. */ .sc .card-image { position: relative; } .sc .card-image > .card-title { text-shadow: 0 1px 3px rgba(0, 0, 0, .8); background: linear-gradient(to top, rgba(18, 26, 23, .92), rgba(18, 26, 23, 0)); padding: var(--sc-r-5) var(--sc-r-4) var(--sc-r-3) !important; width: 100%; } /* --------------------------------------------------------------------- 14. LEGE TOESTANDEN --------------------------------------------------------------------- */ /* Deze blokken staan in dertig themabestanden, altijd als `

` met een pictogram en een zin erin. Ze krijgen hier dezelfde vorm als de 404, zodat een lege lijst en een verkeerd getypt adres niet als twee verschillende sites aanvoelen. Let op: het is een h5 met het pictogram, de tekst en soms een link als directe kinderen door elkaar. Vandaar flex met kolomrichting: dan staat alles netjes onder elkaar zonder dat de opmaak aangepast hoeft. / .sc .no_data, .sc .empty_state, .sc .nothing_found, .sc .empty-article { display: flex !important; flex-direction: column; align-items: center; gap: var(--sc-r-3); text-align: center; max-width: 460px; margin: 0 auto !important; padding: var(--sc-r-8) var(--sc-r-5) !important; font-family: var(--sc-font-tekst) !important; font-size: var(--sc-t-lees) !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--sc-tekst-zacht) !important; / op kampdoek: 9.42 / } / Het pictogram is versiering. Groot genoeg om de leegte te vullen, stil genoeg om de tekst niet te overstemmen. / .sc .no_data > svg, .sc .empty_state > svg, .sc .nothing_found > svg { width: 42px !important; height: 42px !important; flex: 0 0 auto; color: var(--sc-rand) !important; fill: var(--sc-rand) !important; } .sc .no_data > svg path, .sc .empty_state > svg path, .sc .nothing_found > svg path { fill: var(--sc-rand) !important; } .sc .no_data h4, .sc .empty_state h4 { color: var(--sc-tekst) !important; margin: 0 !important; } / De lege
die in een paar van die blokken staan mogen geen gat van drie regels maken nu het een flexkolom is. / .sc .empty_state > br { display: none; } / Een lege lijst die naar Pro wijst heeft een echte knop nodig, geen losse link onder aan een alinea. / .sc .empty_state a, .sc .empty_state .prema { display: inline-flex; align-items: center; justify-content: center; min-height: var(--sc-raak); padding: 10px var(--sc-r-5); border-radius: var(--sc-rond-pil); background: var(--sc-roze-vlak) !important; / wit erop: 4.70 / color: #FFFFFF !important; font-size: 14.5px; font-weight: 600; text-decoration: none !important; } .sc .empty_state a:hover, .sc .empty_state .prema:hover { background: var(--sc-roze-vlak-op) !important; } @media (pointer: coarse) { .sc .empty_state a, .sc .empty_state .prema { min-height: 44px; } } / --------------------------------------------------------------------- 15. LADER --------------------------------------------------------------------- / .sc #loader, .sc .dt_ajax_progress { background: var(--sc-roze) !important; } .sc .ball-pulse > div { background-color: var(--sc-roze) !important; } / --------------------------------------------------------------------- 16. SMALLE SCHERMEN --------------------------------------------------------------------- / @media (max-width: 992px) { .sc .dt_left_sidebar { margin-bottom: var(--sc-r-5); } .sc .container.container_new { padding-inline: var(--sc-goot); } } @media (max-width: 600px) { .sc .btn, .sc .btn-large, .sc .btn-flat { width: auto; } .sc .card, .sc .dt_left_sidebar { border-radius: var(--sc-rond-md) !important; } .sc #logo-container.brand-logo img { height: 32px !important; } } / --------------------------------------------------------------------- 17. AFDRUKKEN EN MINDER BEWEGING --------------------------------------------------------------------- / @media (prefers-reduced-motion: reduce) { .sc , .sc ::before, .sc ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* De akkoordverklaring bij registreren. Het thema zet de links op display:block, waardoor ze op eigen regels sprongen en de spaties eromheen wegvielen: "Gebruiksvoorwaarden&Privacybeleid". / .sc .terms_check span { / Het thema zet deze span op inline-flex. In een flexcontainer vallen tekstknopen die alleen uit spaties bestaan weg, en worden de links geblokkeerd tot blokelementen. Resultaat was "Gebruiksvoorwaarden&Privacybeleid" zonder spaties. / display: inline !important; } .sc .terms_check span a, .sc label span a { display: inline !important; } .sc .terms_check { align-items: flex-start; } .sc .terms_check span { line-height: 1.6; } / --------------------------------------------------------------------- 18. DE COOKIEMELDING Hoort ook bij de site. Stond eerder alleen op de aanmeldpagina's gestileerd; nu overal. --------------------------------------------------------------------- / .cc-window.cc-floating, .cc-window.cc-banner { background: var(--sc-kampdoek) !important; color: var(--sc-tekst) !important; border: 1px solid var(--sc-rand-stil) !important; border-radius: var(--sc-rond-lg) !important; overflow: hidden; box-shadow: var(--sc-schaduw-lg) !important; font-family: var(--sc-font-tekst) !important; } .cc-window .cc-message { color: var(--sc-tekst-zacht) !important; font-size: var(--sc-t-sm) !important; line-height: 1.6 !important; font-weight: 400 !important; } .cc-window .cc-link { color: var(--sc-touw) !important; opacity: 1 !important; text-underline-offset: 3px; } .cc-window .cc-link:hover { color: var(--sc-tekst) !important; } .cc-window .cc-compliance { margin-top: var(--sc-r-3); } .cc-window .cc-btn.cc-dismiss, .cc-window .cc-btn { background: var(--sc-roze-vlak) !important; color: #FFFFFF !important; border: 0 !important; border-radius: var(--sc-rond-pil) !important; font-weight: 700 !important; min-height: var(--sc-raak); display: flex !important; align-items: center; justify-content: center; padding: var(--sc-r-3) var(--sc-r-5) !important; text-decoration: none !important; } .cc-window .cc-btn:hover { background: var(--sc-roze-vlak-op) !important; } .cc-window .cc-btn:focus-visible { outline: var(--sc-focus-dikte) solid var(--sc-focus) !important; outline-offset: calc(var(--sc-focus-afstand) -1); } /* ===================================================================== LEGE TOESTANDEN EN DE 404 Een pagina die niets te tonen heeft moet dat zeggen en een volgende stap aanbieden. De 404 gebruikt dezelfde vorm, zodat een lege berichtenlijst en een verkeerd getypt adres er niet als twee verschillende sites uitzien. Gebruik:

404
(mag weg)
...

...

...

...

===================================================================== / .sc .sc-leeg { max-width: 520px; margin: clamp(var(--sc-r-7), 9vh, 96px) auto; padding: var(--sc-r-7) var(--sc-r-5); text-align: center; } / Het getal is versiering: groot, stil, en met aria-hidden uit de voorleesvolgorde gehaald in de opmaak zelf. / .sc .sc-leeg-code { margin: 0 0 var(--sc-r-3) !important; font-family: var(--sc-font-data) !important; font-size: clamp(52px, 13vw, 84px) !important; line-height: 1 !important; font-weight: 400 !important; color: var(--sc-rand-stil) !important; letter-spacing: .04em; } .sc .sc-leeg-kop { margin: 0 0 var(--sc-r-3) !important; font-family: var(--sc-font-kop) !important; font-size: clamp(22px, 4.4vw, 28px) !important; font-weight: 600 !important; line-height: 1.2 !important; color: var(--sc-tekst) !important; } .sc .sc-leeg-uitleg { margin: 0 auto var(--sc-r-6) !important; max-width: 40ch; font-size: var(--sc-t-lees) !important; line-height: 1.55 !important; color: var(--sc-tekst-zacht) !important; } .sc .sc-leeg-knoppen { display: flex; flex-wrap: wrap; gap: var(--sc-r-3); justify-content: center; } .sc .sc-leeg-knoppen .btn { height: auto !important; line-height: 1.2 !important; min-height: var(--sc-raak); padding: 11px var(--sc-r-5) !important; display: inline-flex; align-items: center; border-radius: var(--sc-rond-md) !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; } .sc .sc-knop-hoofd { background: var(--sc-roze-vlak) !important; / wit erop: 4.70 / color: #FFFFFF !important; border: 1px solid transparent !important; } .sc .sc-knop-hoofd:hover { background: var(--sc-roze-vlak-op) !important; } .sc .sc-knop-rand { background: transparent !important; color: var(--sc-tekst) !important; / op kampdoek: 13.41 / border: 1px solid var(--sc-rand) !important; / rand: 3.05 / } .sc .sc-knop-rand:hover { border-color: var(--sc-touw) !important; } .sc .sc-leeg-hulp { margin: var(--sc-r-6) auto 0 !important; max-width: 44ch; font-size: 13.5px !important; line-height: 1.5 !important; color: var(--sc-tekst-zacht) !important; } .sc .sc-leeg-hulp a { color: var(--sc-touw) !important; / op kampdoek: 8.96 */ text-decoration: underline !important; text-underline-offset: 3px; } .sc .sc-leeg-hulp a:hover { color: var(--sc-roze-tekst) !important; } @media (pointer: coarse) { .sc .sc-leeg-knoppen .btn { min-height: 44px; } }