/* * VoetbalHQ - globale overrides op het Metronic 8 (demo 2) thema. * Wordt ná style.bundle.css geladen, zodat deze regels winnen zonder de bundle te wijzigen. */ /* Compactere paginakop. * * Metronic zet standaard veel verticale ruimte tussen de header, de toolbar (paginatitel + * breadcrumb) en de eerste kaart: #kt_header heeft .mb-lg-10 (2.5rem) en .toolbar heeft * .py-5 .pb-lg-15 (1.25rem boven, 3.75rem onder). Samen levert dat een gat van ruim 7rem. * Hieronder brengen we die ruimte flink terug, zodat de content dichter onder de titel begint. De * gradient-achtergrond en de overlap van de eerste kaart blijven daarbij intact. * * Deze regels gelden voor élke pagina met de standaard blauwe kop (alle toolbars gebruiken * #kt_toolbar), zodat de kophoogte overal gelijk is. */ #kt_header { margin-bottom: 1.25rem !important; } #kt_toolbar { padding-top: 0 !important; padding-bottom: 0.75rem !important; } @media (min-width: 992px) { #kt_header { margin-bottom: 1.75rem !important; } #kt_toolbar { padding-top: 0 !important; padding-bottom: 1rem !important; } } /* Titel en breadcrumb strakker op elkaar. * * Metronic zet .my-1 (0.25rem boven + onder) op zowel de

als de breadcrumb; samen is dat 1rem * loze ruimte binnen de blauwe kop. Met 0.125rem blijft de regelafstand netjes, maar wordt de * toolbar ~12px lager. De lettergroottes (fs-3 / fs-7) blijven ongewijzigd. * * Bewust gescopet op de utility-class .my-1: uitsluitend de standaard "titel + breadcrumb"-toolbar * raakt dit. Afwijkende koppen die hun eigen marges zetten (o.a. het teamdashboard, dat een * titelregel met badges gebruikt) blijven exact zoals ze zijn. */ #kt_toolbar .page-title > h1.my-1, #kt_toolbar .page-title > .breadcrumb.my-1 { margin-top: 0.125rem !important; margin-bottom: 0.125rem !important; } /* Header-logo. * * Voorheen stonden hier twee identieke PNG's (.logo-default / .logo-sticky) van 198x138px, * geschaald naar h-25px: bijgesneden, wazig en te klein. Het badge-logo is nu één SVG met * transparante achtergrond. Die houdt genoeg contrast op de blauwe header, op de witte * sticky header én in dark mode, dus de default/sticky-wissel is niet meer nodig. * * De badge is vierkant (viewBox 1080x1080), waar de oude PNG breed uitgesneden was. Bij * gelijke hoogte oogt vierkant kleiner, vandaar dat de hoogte omhoog gaat. */ .vhq-header-logo { height: 34px; width: auto; transition: height 0.3s ease; } @media (min-width: 992px) { .vhq-header-logo { height: 46px; } /* De sticky header is 65px hoog i.p.v. 80px; het logo krimpt mee. */ .header-fixed[data-kt-sticky-header="on"] .vhq-header-logo { height: 38px; } } /** * Fase-indeling in het teamformulier (Algemeen-tab). * * Select2 bepaalt zijn breedte bij initialisatie. Metronic initialiseert alle * [data-control="select2"] bij het laden van de pagina, dus ook wanneer de Algemeen-tab op dat * moment verborgen is (?tab=staff). Een verborgen element heeft breedte 0, waardoor de dropdown * daarna samengeknepen blijft. Deze regel houdt de dropdown altijd zo breed als zijn kolom. * * Bewust gescopet op .vhq-phase-classes: alleen deze tabel, geen enkele bestaande pagina. */ .vhq-phase-classes .select2-container { width: 100% !important; } /* * Meer lucht tussen de faserijen (1e/2e en 3e/4e) vanaf tablet. * * Metronic's .table.gy-3 geeft 0.75rem boven en onder; daardoor staan de twee rijen dicht op * elkaar zodra ze naast elkaar in twee kolommen staan. Vanaf de md-breakpoint (768px, tablet en * desktop) wordt dat 1.25rem, zodat de rijen visueel uit elkaar liggen. * * Onder 768px blijft de oorspronkelijke 0.75rem staan: daar vallen de twee kolommen onder elkaar * en zou extra ruimte de sectie onnodig lang maken. */ @media (min-width: 768px) { .vhq-phase-classes .table.gy-3 > tbody > tr > td { padding-top: 1.25rem; padding-bottom: 1.25rem; } } /* * Wachtwoordvelden met een zichtbaarheid-toggle (het oog-icoon). * * Bootstrap tekent bij .is-invalid een waarschuwingsicoon als background-image rechts in het veld. * Het oog-knopje staat absoluut op exact diezelfde plek (position-absolute end-0), waardoor de twee * iconen over elkaar heen vallen. De rode rand en de foutmelding onder het veld communiceren de * fout al, dus we verbergen alleen dit ene background-icoon — uitsluitend voor velden met een * password-toggle, via :has(). Andere is-invalid velden houden hun standaardicoon. */ .position-relative:has([data-password-toggle]) > .form-control.is-invalid { background-image: none; } /* * Actief item in het hoofdmenu (blauwe, niet-sticky header). * * Metronic kleurt in style.bundle.css het icoon en de bullet van * `.menu-item > .menu-link.active` rood (#F8285A), terwijl de titel, de achtergrond en de pijl * wit blijven. Menu-items zonder submenu (Dashboard, Mijn Taken) krijgen die .active-klasse op de * link zelf en zien er daardoor anders uit dan items mét submenu (Trainer, Mijn Club): die krijgen * .here/.show op het menu-item, en daar is het icoon wél wit. * * Hieronder trekken we de actiefstatus gelijk met .here/.show: wit icoon en witte bullet, zodat * alle hoofdmenu-items dezelfde look hebben. Achtergrond en titel blijven ongewijzigd. * * Exact gescopet op de regels die Metronic zelf gebruikt (zelfde media query en zelfde * body:not([data-kt-sticky-header=on])-conditie), dus buiten het hoofdmenu verandert er niets. In * de sticky (witte) header en in het mobiele accordeon-menu geldt de standaard Metronic-kleuring. */ @media (min-width: 992px) { body:not([data-kt-sticky-header=on]) .header .header-menu .menu > .menu-item > .menu-link.active .menu-icon, body:not([data-kt-sticky-header=on]) .header .header-menu .menu > .menu-item > .menu-link.active .menu-icon .svg-icon, body:not([data-kt-sticky-header=on]) .header .header-menu .menu > .menu-item > .menu-link.active .menu-icon i { color: #ffffff; } body:not([data-kt-sticky-header=on]) .header .header-menu .menu > .menu-item > .menu-link.active .menu-bullet .bullet { background-color: #ffffff; } } /* Header op tabletbreedte (992px - 1199px, o.a. iPad Pro staand: 1024px). * * Metronic laat het horizontale menu vanaf 992px zien en zet de topbar op flex-shrink: 0. Met zes * menu-items én zeven topbar-iconen is het geheel op die breedte samen ~112px breder dan de * container. Niets kon krimpen, dus schoof de HELE pagina horizontaal - op elke pagina, niet alleen * bij Documenten. * * Hieronder worden uitsluitend de tussenruimtes compacter gemaakt: het logo, de vulling van de * menu-items en de marges tussen de topbar-iconen. Er verdwijnt niets en er verandert niets aan de * opmaak zelf. * * BEWUST BEGRENSD tot onder 1200px: op desktop (>= 1200px) blijft alles exact zoals het was. */ @media (min-width: 992px) and (max-width: 1199.98px) { #kt_header .header-logo { margin-right: 1rem !important; } #kt_header .header-menu .menu > .menu-item > .menu-link { padding-left: 0.35rem; padding-right: 0.35rem; } /* Zonder dit breken "Mijn Team" en "Mijn Club" over twee regels af en wordt de header hoger. Met de compactere ruimtes hierboven past het menu op deze breedtes op één regel. */ #kt_header .header-menu .menu > .menu-item > .menu-link .menu-title { white-space: nowrap; } #kt_header .header-menu .menu > .menu-item > .menu-link .menu-icon { margin-right: 0.3rem; } #kt_header .topbar > * { margin-left: 0.35rem !important; } } /* Uitlijning van het opengeklapte hoofdmenu in MOBIELE weergave (< 992px). * * Onder lg wordt .header-menu een uitschuifpaneel (KTDrawer, ~250px breed) en klappen de mega-menu's * open als accordeon. De inhoud van die menu's is gebouwd voor de brede desktop-dropdown en sprong * daardoor in het smalle paneel veel te ver naar rechts in. De linkerinspringing stapelde namelijk op: * * .menu-sub-lg-down-indention .menu-sub -> margin-left 1rem (Metronic, alleen onder lg) * .row / [class*="col-"] -> Bootstrap-gutter (-0.75rem + 0.75rem) * .col-lg-8 / .menu-more .px-3 -> 0.75rem * .menu-active-bg .px-4 -> 1rem ("Mijn Club") * .menu-link -> 1rem * * Samen stond het icoon ~40px van de rand en begon de tekst pas rond 92px, terwijl het paneel maar * 250px breed is. Bovendien liep het submenu door de margin-left 1rem in combinatie met .w-100 1rem * buiten het paneel. Gevolg: elke omschrijving brak over twee of drie regels af. * * Hieronder wordt die stapeling teruggebracht tot één inspringing (de .menu-link zelf), zodat de * iconen van de submenu-items exact onder de iconen van de hoofditems (Dashboard, Mijn Team, ...) * uitkomen en de tekst links begint met de volle paneelbreedte tot zijn beschikking. * * BEWUST BEGRENSD tot max-width 991.98px: op tablet vanaf 992px en op desktop staat het menu als * horizontale dropdown en verandert er niets. De regels zijn bovendien gescopet op .header-menu * (de drawer wordt door data-kt-swapper naar #kt_body verplaatst, de class blijft staan), dus geen * enkel ander menu of paneel in de applicatie wordt geraakt. */ @media (max-width: 991.98px) { /* 1. Het submenu niet extra laten inspringen; met .w-100 liep het anders buiten het paneel. */ .header-menu .menu-sub-lg-down-indention .menu-sub:not([data-popper-placement]) { margin-left: 0; } /* 2. Bootstrap-gutters binnen de mega-menu's uit: onder lg staan alle kolommen toch onder elkaar. */ .header-menu .menu-sub .row { --bs-gutter-x: 0; } /* 3. Zijvulling van de menukolommen weg (px-3 op de mega-menu's, px-4 op "Mijn Club"). De verticale vulling (py-3 / py-4) blijft ongewijzigd. */ .header-menu .menu-sub .px-3, .header-menu .menu-sub .px-4 { padding-left: 0 !important; padding-right: 0 !important; } /* 4. Rechts iets minder vulling op de link zelf, links blijft 1rem: daarmee staat het icoon van een submenu-item precies onder het icoon van het hoofditem erboven. */ .header-menu .menu-sub .menu-item > .menu-link { padding-right: 0.5rem; } /* 5. Kopjes ("Snelle acties", "Wedstrijden", "Stamgegevens", ...) op dezelfde lijn als de titels van de items eronder, in plaats van de desktop-marge ms-3 / ms-4. */ .header-menu .menu-sub h4.ms-3, .header-menu .menu-sub h4.ms-4 { margin-left: 1rem !important; } } /* ------------------------------------------------------------------------------------------------ * Globale zoekbalk (Layouts/menu-top.php) - mobiele weergave. * * Op desktop hangt het zoekpaneel rechtsonder de knop (Metronic: data-kt-menu-placement="bottom-end") * en dat blijft ongewijzigd. Op een telefoon is dat te smal en te laag: het paneel plakt tegen de * rechterrand en er passen maar een paar resultaten in. Onder 768px wordt het daarom over de volle * breedte in het MIDDEN gezet en krijgen de lijsten veel meer hoogte. * * De regels moeten !important zijn: KTMenu positioneert het paneel met inline stijlen (position, * inset en transform). --vhq-search-top wordt door public/js/global-search.js gezet op de werkelijke * onderkant van de header, zodat het paneel er altijd netjes onder valt - ook bij een andere * headerhoogte of met de sticky header aan. De waarde in var() is alleen de terugval. * ------------------------------------------------------------------------------------------------ */ @media (max-width: 767.98px) { #vhq_header_search [data-kt-search-element="content"] { position: fixed !important; inset: auto !important; top: var(--vhq-search-top, 4.75rem) !important; right: auto !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) !important; width: calc(100vw - 1.5rem) !important; max-width: 32rem !important; } /* Meer resultaten in beeld. De Metronic-klassen mh-200px / mh-lg-350px zetten max-height met !important; die worden hier voor mobiel overschreven op basis van de resterende schermhoogte (paneelvulling + zoekveld + scheidingslijn zijn de ~11rem die eraf gaat). 100dvh houdt rekening met de adresbalk van mobiele browsers; de vh-regel erboven is de terugval. */ #vhq_header_search [data-vhq-search-results], #vhq_header_search [data-vhq-search-recent] { max-height: calc(100vh - var(--vhq-search-top, 4.75rem) - 11rem) !important; max-height: calc(100dvh - var(--vhq-search-top, 4.75rem) - 11rem) !important; } } /* ------------------------------------------------------------------------------------------------ * Paginakop op één rij - MOBIEL (< 768px). * * GEDEELDE opzet voor de blauwe kop (#kt_toolbar) van pagina's met een teamkeuze en één actieknop. * Op een telefoon viel zo'n kop uiteen in drie regels: titel + kruimelpad/ondertitel, daaronder de * keuzebox (die onder 576px de volle breedte pakt) en daaronder pas de knop. Deze regels zetten alles * op ÉÉN rij: links de tekst, rechts de keuzebox en de knop. * * OPT-IN, dus geen enkele bestaande pagina verandert zonder dat de klassen eraan worden toegevoegd: * *
*
titel + breadcrumb of ondertitel
*
* * * * Speler toevoegen * *
*
* * Boven 768px (tablet en desktop) doen deze klassen NIETS: alles staat in de media query hieronder. * In gebruik op: /team/{id} (teamhub) en Spelers (/team-players, ook als hubsectie). * ------------------------------------------------------------------------------------------------ */ @media (max-width: 767.98px) { /* !important omdat de container in de HTML de Bootstrap-utility .flex-wrap draagt (die zelf !important is); zonder deze regel valt de rechterkant bij een lange titel alsnog naar een tweede regel. */ .vhq-toolbar-onerow { flex-wrap: nowrap !important; align-items: center; gap: 0.5rem; } /* De tekst mag krimpen (min-width: 0), de knoppen niet. */ .vhq-toolbar-onerow .page-title { flex: 1 1 auto; min-width: 0; margin-right: 0 !important; } /* display: block !important - de

draagt de utility .d-flex (met !important); als flexbox knipt de tekst hard af in plaats van met een ellipsis. :not(.d-none) op de ondertitel is essentieel: een pagina die haar ondertitel bewust pas vanaf md toont (agenda: "d-none d-md-block") zou hem anders juist op mobiel te zien krijgen. */ .vhq-toolbar-onerow .page-title h1, .vhq-toolbar-onerow .page-title > span:not(.d-none) { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Het kruimelpad blijft één regel; wat niet past valt weg in plaats van de kop hoger te maken. */ .vhq-toolbar-onerow .page-title .breadcrumb { flex-wrap: nowrap; overflow: hidden; } .vhq-toolbar-onerow .page-title .breadcrumb-item { white-space: nowrap; } /* De laatste kruimel (meestal de teamnaam) is de enige die mag krimpen; die krijgt de ellipsis. */ .vhq-toolbar-onerow .page-title .breadcrumb-item:last-child { display: block; /* Metronic maakt er een flexbox van; dan werkt text-overflow niet. */ min-width: 0; overflow: hidden; text-overflow: ellipsis; } .vhq-toolbar-onerow-actions { flex: 0 0 auto; flex-wrap: nowrap !important; align-items: center !important; gap: 0.5rem !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Keuzebox compact: geen label erboven (de titel zegt al waar je bent) en een vaste, smalle breedte in plaats van de 100% die Components/form/toolbar-search-select.php onder 576px geeft. Lange teamnamen krijgen hun ellipsis van die component zelf. */ .vhq-toolbar-onerow .vhq-tsel-label { display: none; } .vhq-toolbar-onerow .vhq-tsel-field { width: auto; } .vhq-toolbar-onerow .vhq-tsel-control { width: 100px; min-width: 0 !important; height: 40px; padding-left: 0.75rem; background-position: right 0.5rem center; } /* Actieknop: alleen het icoon. title/aria-label in de HTML houden de betekenis. display: inline-flex is nodig omdat niet elke knop in de kop .d-flex draagt (Oefenwedstrijden niet); zonder deze regel plakt het icoon in zo'n knop tegen de bovenkant. Op desktop verandert er niets - deze regel staat binnen de media query. */ /* Breder dan hoog: als icoonknop naast de keuzebox oogde een vierkant van 40px te klein (03-09-2026). De breedte volgt de padding, met een ondergrens van 56px. */ .vhq-toolbar-onerow .vhq-toolbar-onerow-btn { display: inline-flex !important; align-items: center; justify-content: center; height: 40px; width: auto; min-width: 56px; padding: 0 1rem !important; } /* Staan er TWEE actieknoppen naast de keuzebox (Aanwezigheid), dan is 56px samen te breed en blijft er op 320px bijna geen titel over. Die knoppen worden dan iets smaller. Een browser zonder :has() houdt gewoon 56px aan - de rij blijft ook dan heel, de titel wordt alleen korter. */ .vhq-toolbar-onerow-actions:has(.vhq-toolbar-onerow-btn + .vhq-toolbar-onerow-btn) .vhq-toolbar-onerow-btn { min-width: 44px; padding: 0 0.6rem !important; } /* Het icoon IS de knop zodra de tekst weg is; op fs-4 (15px bij de mobiele basis van 12px) was het plusje te klein om als knop te lezen. 1.5rem = 18px en vult het vlak van 40px netjes. */ .vhq-toolbar-onerow .vhq-toolbar-onerow-btn .ki-duotone { margin-right: 0 !important; font-size: 1.5rem !important; } /* Alles in de knop dat op mobiel wegvalt: het tekstlabel, en bij een keuzeknop ook het chevronpijltje (agenda). Het icoon links blijft staan. */ .vhq-toolbar-onerow .vhq-toolbar-onerow-btn-text { display: none !important; } } /* ================================================================================================== "Snel naar" in de topbar - de dropdown achter het vier-vakjes-icoon (Layouts/menu-top.php). Alles is gescoped op .vhq-qlmenu, dus geen enkele bestaande pagina of dropdown verandert hierdoor. De dropdown zelf, de kop, de scheidingslijnen en de hover-staat komen uit Metronic (.menu-sub- dropdown, .bg-hover-light, .border-end/.border-bottom, .symbol-label); hier staat uitsluitend wat Metronic niet heeft: een tegel die op twee regels netjes afbreekt en een vaste rijhoogte houdt. ================================================================================================== */ /* Een tegel is volledig klikbaar; de vult de hele kolom. Zonder deze regel krijgt de link de linkkleur van Metronic en verspringt de tekst bij hover. */ .vhq-qlmenu .vhq-qlmenu-tile { /* Twee regels tekst passen hierin; met een vaste hoogte blijven de tegels van een rij even hoog, ook wanneer de ene naam op één en de andere op twee regels valt. */ min-height: 8.25rem; text-align: center; text-decoration: none; transition: background-color 0.15s ease; } /* De naam mag afbreken (bijv. "Aanwezigheid registreren") maar nooit de tegel uitlopen. */ .vhq-qlmenu .vhq-qlmenu-label { display: block; width: 100%; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; } /* Op een telefoon is de dropdown smaller dan het icoonraster suggereert; iets minder lucht per tegel houdt alle vier de tegels zonder scrollen in beeld. */ @media (max-width: 575.98px) { .vhq-qlmenu .vhq-qlmenu-tile { min-height: 7.25rem; padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } } /* Meer dan zes tegels (het maximum voor deze context is 8) past niet meer op een klein scherm. De tegels scrollen dan binnen de dropdown, zodat de kop en "Snelkoppelingen beheren" zichtbaar blijven in plaats van dat de hele dropdown buiten het scherm valt. */ .vhq-qlmenu [data-vhq-qlmenu-body] { max-height: 60vh; overflow-y: auto; } /* ========================================================================================== Profielfoto van een medewerker (gedeelde component Modules/Staff/partials/photo-widget.php) ========================================================================================== Stond tot 09-09-2026 in een