/* * De werkbalk (spec 4, "Werkbalk"). Een witte band die onder rij 2 van de * header plakt, en meeschuift als die wegschuift, volgens de afspraak met * 1b: --dg-header-rij en --dg-header-verschuiving. Zonder de header van 1b * vallen beide terug op 0; dan plakt de balk bovenaan. */ /* Hoe hoog de balk is: bediening 48, met 8 (onder 640) of 12 erboven en eronder. 1b telt dit mee in scroll-padding-top, zodat een gefocust element nooit onder header en balk valt (WCAG 2.4.11). */ :root:has(.wp-block-dreamglow-werkbalk) { --dg-meespringende-balken: calc(var(--wp--preset--spacing--48) + 2 * var(--wp--preset--spacing--8)); } @media (width > 639px) { :root:has(.wp-block-dreamglow-werkbalk) { --dg-meespringende-balken: calc(var(--wp--preset--spacing--48) + 2 * var(--wp--preset--spacing--12)); } } /* Zonder de header van 1b zet niemand scroll-padding-top; dan doet de werkbalk het zelf. Met de header geldt de regel van 1b. */ html:not(:has(.wp-block-dreamglow-header)):has(.wp-block-dreamglow-werkbalk) { scroll-padding-top: var(--dg-meespringende-balken); } /* * De plakrand volgt de header: onder de beheerbalk van WordPress * (--dg-beheerbalk, van de header van 1b) en rij 2 van de header, min wat * de header wegschuift (--dg-header-verschuiving: 0, of de hoogte van rij 2 * als de header weg is). top schuift mee in dezelfde 300 ms en op dezelfde * curve als de header. Een balk die nog in de pagina staat, volgt top niet; * alleen een balk die plakt, schuift mee. Zo schuift de balk ook niet onder * de beheerbalk van een ingelogde gebruiker. * * Besluit van de controller na de review van taak 9: via top, en niet via * een transform op .is-vast (spec: translateY). Die hing aan is-vast, dat * een frame te laat komt, en liep daarna 300 ms na: bij elke scroll omlaag * stond de balk eerst op de plek van rij 2, met pagina erboven, en na een * sprong omhoog 16 frames over de pillen. Een transform maakt de balk ook * het bevattende blok voor position: fixed. */ .wp-block-dreamglow-werkbalk { position: sticky; top: calc(var(--dg-beheerbalk, 0px) + var(--dg-header-rij, 0px) - var(--dg-header-verschuiving, 0px)); z-index: 850; background: var(--wp--preset--color--paper); transition: top var(--wp--custom--duur--standaard) var(--wp--custom--curve), box-shadow var(--wp--custom--duur--standaard) var(--wp--custom--curve); } /* * Focus in de balk laat de pagina niet springen (besluit van de controller * na het eerste rapport van taak 10). De balk ligt, vast of net eronder, in * de strook die scroll-padding-top vrijhoudt: de beheerbalk, rij 2 van de * header en de balk zelf. Een element daarin vond de browser "niet in beeld", * en bij Tab of Shift+Tab naar de sortering of de filterknop scrolde hij de * pagina omhoog (1200 naar 722 op 390, 521 naar 103 op 1440). Een negatieve * scroll-margin-top van die hele strook haalt dat eraf, zoals de header van * 1b dat voor zijn eigen rijen doet (blocks/header/style.css). */ .wp-block-dreamglow-werkbalk * { scroll-margin-top: calc(-1 * (var(--dg-beheerbalk, 0px) + var(--dg-header-rij, 0px) + var(--dg-meespringende-balken, 0px))); } /* Vast: de lijn line onder de balk, en de schaduw zwevend. */ .wp-block-dreamglow-werkbalk.is-vast { box-shadow: 0 var(--wp--custom--lijn--dun) 0 var(--wp--preset--color--line), var(--wp--preset--shadow--zwevend); } /* * De rok (eindreview, I1: geparkeerde punten 10 en 11). top loopt op de * hoofdthread, de transform van de header op de compositor: per frame stond * de balk waar de header een frame eerder stond. Bij wegschuiven kwam er * pagina tussen header en balk, tot 9 px op 1440 en 8 op 390, zo'n 200 ms; * bij een resize over 1280 (rij 2 van 64 naar 56) tot 8 px. Een vaste balk * tekent daarom boven zich een vlak in zijn eigen kleur, zo hoog als rij 2. * In rust ligt dat precies onder rij 2 van de header, of boven het venster; * tijdens de beweging vult het de kier. * * Op de binnenkant, zonder overgang, en niet in de schaduw van de balk zelf * (eindfix B, afwijking van de eindreview). Daar liep de rok mee in de * overgang van 300 ms, en na het loslaten lag hij nog vijf frames, 56 of 64 * hoog, over de band met titel en pillen. Zo gaat hij met is-vast meteen weg. * De binnenkant is even groot als de balk: de balk zelf heeft geen padding. */ .wp-block-dreamglow-werkbalk.is-vast .dg-werkbalk__binnen { box-shadow: 0 calc(-1 * var(--dg-header-rij, 0px)) 0 var(--wp--preset--color--paper); } /* De inhoud in de container, op de lijn van de titel (--dg-gutter, van het thema: de zijmarge, en op brede schermen de helft van wat naast de container overblijft). */ .dg-werkbalk__binnen { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--16); padding-block: var(--wp--preset--spacing--8); padding-inline: var(--dg-gutter); } /* De sortering rechts, ook als ze het enige zichtbare kind is: onder 640 staat het aantal onder de balk, en dan zette space-between haar links. Ze mag smaller worden dan haar inhoud: zonder JavaScript staat de knop Sorteren naast de select, en op 320 past dat net niet (de select krimpt dan). */ .dg-werkbalk__binnen > .wp-block-woocommerce-catalog-sorting { min-inline-size: 0; margin-inline-start: auto; } /* Vanaf 640 drie kolommen: filterknop, aantal in het midden, sortering. De zijkolommen zijn 1fr, zonder minimum van 0: op 640 tot 670 is de sortering (label, 8, select) breder dan een halve rest. Dan krijgt haar kolom de breedte die ze nodig heeft, en staat het aantal een paar pixels links van het midden; met minmax(0, 1fr) stak de sortering 14 px buiten de lijn van de titel. */ @media (width > 639px) { .dg-werkbalk__binnen { display: grid; grid-template-columns: 1fr auto 1fr; padding-block: var(--wp--preset--spacing--12); } .dg-werkbalk__binnen > .wp-block-dreamglow-filterknop { grid-column: 1; justify-self: start; } .dg-werkbalk__binnen > .wp-block-dreamglow-productaantal { grid-column: 2; } /* In het grid weer de breedte van de inhoud: zo groeit haar kolom mee. */ .dg-werkbalk__binnen > .wp-block-woocommerce-catalog-sorting { grid-column: 3; justify-self: end; min-inline-size: auto; } } /* De sortering: Woo's select, 48 hoog, met het label "Sorteren op". Woo's woocommerce.css en woocommerce-layout.css staan ná de blokstijlen in de pagina, en geven het formulier margin: 0 0 1em (13 px: de balk werd 77 en 85 hoog), float: right, en het label een marge rechts. Daarom een klasse meer dan hun .woocommerce .woocommerce-ordering. */ .dg-werkbalk .wc-block-catalog-sorting .woocommerce-ordering { display: flex; align-items: center; gap: var(--wp--preset--spacing--8); float: none; margin: 0; } /* Geen marge rechts van Woo: de afstand tot de select is de gap. */ .dg-werkbalk .wc-block-catalog-sorting .woocommerce-ordering label { margin: 0; } /* Onder 640 is het label er alleen voor schermlezers; vanaf 640 staat het er (mobile-first: smal is de basis). */ .dg-werkbalk .woocommerce-ordering label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); font-size: var(--wp--preset--font-size--s); line-height: var(--wp--custom--leading--s); color: var(--wp--preset--color--ink-soft); white-space: nowrap; } @media (width > 639px) { .dg-werkbalk .woocommerce-ordering label { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; } } .dg-werkbalk .woocommerce-ordering select.orderby { min-inline-size: 0; min-block-size: var(--wp--preset--spacing--48); max-inline-size: 100%; margin: 0; padding-block: 0; padding-inline: var(--wp--preset--spacing--12); /* De veldrand (3:1), niet de haarlijn: de select is een formulierveld (spec 5-6, "Veldranden minstens 3:1"; vergelijking met de Rituals-analyse, 13-10-2026, K-15). */ border: var(--wp--custom--lijn--dun) solid var(--wp--custom--veld--rand); border-radius: var(--wp--custom--radius--standaard); background-color: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--s); line-height: var(--wp--custom--leading--s); } /* * Zonder JavaScript: de knop "Sorteren" achter de select. inc/modules/ * winkel/query.php zet hem in Woo's formulier; Woo's eigen formulier heeft * geen knop (review van taak 9, Important 3). Outline, zoals de knoppen van * het thema, even hoog als de select en nooit lager dan het raakvlak. * * Met script navigeert Woo al bij een keuze; dan is de knop er niet: hij * staat in