/* --------------------------------------------------------------------------- * Iconen - de vervanger van Font Awesome * * Elk icoon is een gewoon SVG-bestand in images/icons/ui/. Het wordt niet als * plaatje getoond maar als MASK: de browser gebruikt de vorm om te bepalen * waar verf mag komen, en die verf is currentColor. Gevolg: * * - de kleur volgt de tekstkleur, dus alle bestaande regels blijven werken * (.menu-box-media i { color: ... }, een witte pijl in een blauwe knop, * hover-kleuren, en de kleurwissel per skin) * - de grootte volgt font-size, dus ook regels als * .section-badge-icon i { font-size: 70px } blijven kloppen * * Dat is precies wat een icoonfont deed, en het is de reden dat het element in * de HTML een is gebleven: alle CSS die op "i" mikte hoefde niet om. * * Een kan dit niet - die neemt de tekstkleur niet over. Daarom staan de * iconen die de redacteur zelf kiest (het menu-icoon per pagina) wel als * op de pagina, met de kleur in het bestand; zie images/icons/menu/. * * Let op bij het bekijken van de template rechtstreeks vanaf schijf: Chrome * weigert een mask-bestand te laden over file://, en dan zie je niets staan. * Via een webserver (dus ook gewoon op de site) werkt het wel. * * Een icoon toevoegen: bestand in images/icons/ui/ zetten en hieronder een * regel bijzetten. Geen buildstap, geen font opnieuw genereren. Staat er in de * viewBox een andere breedte dan hoogte, zet er dan --ui-icon-ratio bij * (breedte gedeeld door hoogte, dus 640/512 = 1.25); zonder die waarde wordt * het icoon in een vierkant vakje geperst en dus vervormd. * ------------------------------------------------------------------------ */ .ui-icon { display: inline-block; /* Hoogte volgt de lettergrootte, breedte volgt de verhouding van het icoon. * Dat is letterlijk wat een icoonfont deed: elke glyph is 1em hoog en heeft * zijn eigen breedte. Zou je hier een vierkant vakje van 1em nemen met * mask-size: contain, dan wordt een breed icoon (coins, user-plus: 640 bij * 512) naar 0.8em geduwd en staat het zichtbaar kleiner dan de rest. */ height: 1em; width: calc(1em * var(--ui-icon-ratio, 1)); /* Optisch op de tekstregel, net als een glyph in een icoonfont. */ vertical-align: -0.125em; background-color: currentColor; /* Niet meekrimpen in een flex-container (knoppen, de bovenbalk). */ flex: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* De iconen zelf. Naam = bestandsnaam, zodat je van de HTML naar het bestand * kunt lopen zonder deze lijst te hoeven raadplegen. */ .ui-icon-arrow-right { --ui-icon-ratio: 0.875; -webkit-mask-image: url(../images/icons/ui/arrow-right.svg); mask-image: url(../images/icons/ui/arrow-right.svg); } .ui-icon-arrow-up { --ui-icon-ratio: 0.75; -webkit-mask-image: url(../images/icons/ui/arrow-up.svg); mask-image: url(../images/icons/ui/arrow-up.svg); } .ui-icon-bell { --ui-icon-ratio: 0.875; -webkit-mask-image: url(../images/icons/ui/bell.svg); mask-image: url(../images/icons/ui/bell.svg); } .ui-icon-calendar-check { --ui-icon-ratio: 0.875; -webkit-mask-image: url(../images/icons/ui/calendar-check.svg); mask-image: url(../images/icons/ui/calendar-check.svg); } .ui-icon-caret-down { --ui-icon-ratio: 0.625; -webkit-mask-image: url(../images/icons/ui/caret-down.svg); mask-image: url(../images/icons/ui/caret-down.svg); } .ui-icon-chevron-down { -webkit-mask-image: url(../images/icons/ui/chevron-down.svg); mask-image: url(../images/icons/ui/chevron-down.svg); } .ui-icon-chevron-left { --ui-icon-ratio: 0.625; -webkit-mask-image: url(../images/icons/ui/chevron-left.svg); mask-image: url(../images/icons/ui/chevron-left.svg); } .ui-icon-chevron-right { --ui-icon-ratio: 0.625; -webkit-mask-image: url(../images/icons/ui/chevron-right.svg); mask-image: url(../images/icons/ui/chevron-right.svg); } .ui-icon-circle-check { -webkit-mask-image: url(../images/icons/ui/circle-check.svg); mask-image: url(../images/icons/ui/circle-check.svg); } .ui-icon-circle-minus { -webkit-mask-image: url(../images/icons/ui/circle-minus.svg); mask-image: url(../images/icons/ui/circle-minus.svg); } .ui-icon-circle-plus { -webkit-mask-image: url(../images/icons/ui/circle-plus.svg); mask-image: url(../images/icons/ui/circle-plus.svg); } .ui-icon-clock-rotate-left { -webkit-mask-image: url(../images/icons/ui/clock-rotate-left.svg); mask-image: url(../images/icons/ui/clock-rotate-left.svg); } .ui-icon-coins { -webkit-mask-image: url(../images/icons/ui/coins.svg); mask-image: url(../images/icons/ui/coins.svg); } .ui-icon-external-link { -webkit-mask-image: url(../images/icons/ui/external-link.svg); mask-image: url(../images/icons/ui/external-link.svg); } .ui-icon-facebook { --ui-icon-ratio: 0.625; -webkit-mask-image: url(../images/icons/ui/facebook.svg); mask-image: url(../images/icons/ui/facebook.svg); } .ui-icon-file-excel { --ui-icon-ratio: 0.75; -webkit-mask-image: url(../images/icons/ui/file-excel.svg); mask-image: url(../images/icons/ui/file-excel.svg); } .ui-icon-file-invoice { --ui-icon-ratio: 0.75; -webkit-mask-image: url(../images/icons/ui/file-invoice.svg); mask-image: url(../images/icons/ui/file-invoice.svg); } .ui-icon-file-pdf { -webkit-mask-image: url(../images/icons/ui/file-pdf.svg); mask-image: url(../images/icons/ui/file-pdf.svg); } .ui-icon-file-word { --ui-icon-ratio: 0.75; -webkit-mask-image: url(../images/icons/ui/file-word.svg); mask-image: url(../images/icons/ui/file-word.svg); } .ui-icon-heart { -webkit-mask-image: url(../images/icons/ui/heart.svg); mask-image: url(../images/icons/ui/heart.svg); } .ui-icon-house { --ui-icon-ratio: 1.125; -webkit-mask-image: url(../images/icons/ui/house.svg); mask-image: url(../images/icons/ui/house.svg); } .ui-icon-instagram { --ui-icon-ratio: 0.875; -webkit-mask-image: url(../images/icons/ui/instagram.svg); mask-image: url(../images/icons/ui/instagram.svg); } .ui-icon-list-check { -webkit-mask-image: url(../images/icons/ui/list-check.svg); mask-image: url(../images/icons/ui/list-check.svg); } .ui-icon-login { -webkit-mask-image: url(../images/icons/ui/login.svg); mask-image: url(../images/icons/ui/login.svg); } .ui-icon-logout { -webkit-mask-image: url(../images/icons/ui/logout.svg); mask-image: url(../images/icons/ui/logout.svg); } .ui-icon-magnifying-glass { -webkit-mask-image: url(../images/icons/ui/magnifying-glass.svg); mask-image: url(../images/icons/ui/magnifying-glass.svg); } .ui-icon-pen-to-square { -webkit-mask-image: url(../images/icons/ui/pen-to-square.svg); mask-image: url(../images/icons/ui/pen-to-square.svg); } .ui-icon-quote-left { --ui-icon-ratio: 0.875; -webkit-mask-image: url(../images/icons/ui/quote-left.svg); mask-image: url(../images/icons/ui/quote-left.svg); } .ui-icon-star { --ui-icon-ratio: 1.125; -webkit-mask-image: url(../images/icons/ui/star.svg); mask-image: url(../images/icons/ui/star.svg); } .ui-icon-stopwatch { --ui-icon-ratio: 0.875; -webkit-mask-image: url(../images/icons/ui/stopwatch.svg); mask-image: url(../images/icons/ui/stopwatch.svg); } .ui-icon-thumbs-up { -webkit-mask-image: url(../images/icons/ui/thumbs-up.svg); mask-image: url(../images/icons/ui/thumbs-up.svg); } .ui-icon-twitter { -webkit-mask-image: url(../images/icons/ui/twitter.svg); mask-image: url(../images/icons/ui/twitter.svg); } .ui-icon-user { --ui-icon-ratio: 0.875; -webkit-mask-image: url(../images/icons/ui/user.svg); mask-image: url(../images/icons/ui/user.svg); } .ui-icon-user-plus { --ui-icon-ratio: 1.25; -webkit-mask-image: url(../images/icons/ui/user-plus.svg); mask-image: url(../images/icons/ui/user-plus.svg); } .ui-icon-user-shield { --ui-icon-ratio: 1.25; -webkit-mask-image: url(../images/icons/ui/user-shield.svg); mask-image: url(../images/icons/ui/user-shield.svg); } .ui-icon-youtube { --ui-icon-ratio: 1.125; -webkit-mask-image: url(../images/icons/ui/youtube.svg); mask-image: url(../images/icons/ui/youtube.svg); } /* --------------------------------------------------------------------------- * Gekozen afbeeldingen (menu-icoon per pagina, sier-icoon in de badge) * * Deze komen uit de mediamap en zijn dus geen mask maar een echte . De * oude regels mikten op "i"; dezelfde maten staan hier voor "img", zodat het * blok even groot blijft ongeacht wat iemand kiest. object-fit zorgt dat een * plaatje dat niet vierkant is netjes past in plaats van uitgerekt te worden. * ------------------------------------------------------------------------ */ .menu-box-media img, #touch-navigation .accordion-menu .nested.submenu li .submenu-box-media img { /* Op HOOGTE schalen, niet in een vierkant vakje passen. Met een vierkant * vakje en object-fit: contain bepaalt de breedste kant de schaal, en dan * staat een breed icoon (640 bij 512, zoals user-plus of coins) een vijfde * kleiner dan een vierkant icoon op dezelfde plek - precies het verschil * dat opviel naast het oude font. Een font schaalde ook op hoogte. * Eén knop om aan te draaien: --menu-icon-size hieronder. */ height: var(--menu-icon-size, 36px); width: auto; max-width: calc(var(--menu-icon-size, 36px) * 1.35); object-fit: contain; } /* Zelfde breekpunt als de bestaande regel voor .menu-box-media i in * topbar.css - die zet daar font-size 36px terug naar 26px. */ @media (max-width: 1023px) { .menu-box-media { --menu-icon-size: 26px; } } /* --------------------------------------------------------------------------- * Iconen die niet uit een class komen * * Een deel van de iconen staat niet in de HTML maar in de CSS: het pijltje * achter een menu-item met dropdown, het chevronnetje in het kruimelpad, de * plus/min van een accordeon, het bolletje voor een footerlink. Dat waren * ::before/::after-regels met content: "\f054" en font-family: 'Font Awesome * 6 Pro'. Aan een pseudo-element kun je geen class hangen, dus daar staan de * mask-regels ter plekke in het stylesheet dat er toch al over ging: * * topbar.css pijl bij een hoofdmenu-item, caret in de dropdown, * chevron in een submenu * breadcrumbs.css scheidingsteken in het kruimelpad * footer.css bolletje voor een link in een footerkolom * sidebar.css pijltje in de zijbalknavigatie en in een lijst * sections.css pijltje in de sectienavigatie, plus/min van de accordeon * content.css plus/min van de tekstblok-accordeon, loep op een * galerij-afbeelding * articles.css aanhalingsteken voor een blockquote * basics.css vorige/volgende in de paginering * * Ze gebruiken dezelfde bestanden uit images/icons/ui/ en dezelfde truc: * content wordt leeg, de vorm komt uit een mask en de kleur uit currentColor. * De breedte staat per regel in em, volgens de verhouding van de viewBox * (een chevron is 320/512 = 0.625em breed, een cirkel 1em), zodat het beeld * even groot blijft als de glyph was bij dezelfde font-size. * * De enige uitzondering staat in content.css bij .gallery-item:after: dat * element IS al een witte schijf, en een mask verft het hele vlak. Daar ligt * de loep als achtergrondplaatje op het wit, uit images/icons/decor/. * ------------------------------------------------------------------------ */