html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
/* Sticky footer as a flex column rather than the template's absolutely positioned one: that version
needs a fixed body margin and a nowrap footer, which clipped the version on a phone. */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
body > .container {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
padding: 1rem 0;
}
.footer-versie {
font-variant-numeric: tabular-nums;
}
.aanmeld-icoon {
width: 1.1em;
height: 1.1em;
vertical-align: -.15em;
}
.skip-link {
display: inline-block;
padding: .5rem 1rem;
background-color: var(--bs-body-bg);
}
/* Bijlagen: the thumbnail grid and its lightbox on the klus-detailpagina. */
.bijlagen-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: .75rem;
margin: 0;
padding: 0;
}
.bijlage-thumb {
display: block;
width: 100%;
height: 140px;
object-fit: cover;
border-top-left-radius: .375rem;
border-top-right-radius: .375rem;
}
.bijlage-bestand {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bs-tertiary-bg);
text-decoration: none;
}
.bijlage-icoon {
font-weight: 700;
letter-spacing: .05em;
color: var(--bs-secondary-color);
}
.bijlage-lightbox {
position: fixed;
inset: 0;
z-index: 1080;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .75rem;
padding: 2rem;
background-color: rgba(0, 0, 0, .85);
}
.bijlage-lightbox[hidden] {
display: none;
}
.bijlage-lightbox img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
}
.bijlage-lightbox-link {
color: #fff;
}
.bijlage-lightbox-sluiten {
position: absolute;
top: 1rem;
right: 1rem;
border: 0;
background: transparent;
color: #fff;
font-size: 2rem;
line-height: 1;
}
.bijlage-lightbox-open {
overflow: hidden;
}
/* Klus-detail: the gegevens-en-acties card follows the reader on a wide screen, so the actions stay
in reach while the voortgang log scrolls. */
@media (min-width: 992px) {
.klus-zijkaart {
position: sticky;
top: 1rem;
}
}
/* EC-view: the condensed board, its drag handles and the 48px thumbnail column. */
.ec-greep-kop,
.ec-greep-cel {
width: 1.5rem;
padding-right: 0;
}
.ec-greep {
cursor: grab;
color: var(--bs-tertiary-color);
letter-spacing: -.15em;
user-select: none;
}
.ec-rij-sleept {
opacity: .4;
}
.ec-thumb-cel {
width: 3.5rem;
}
.ec-thumb {
display: block;
width: 48px;
height: 48px;
object-fit: cover;
border-radius: .25rem;
}
.ec-thumb-leeg {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-tertiary-color);
}
.ec-voortgang {
max-width: 28rem;
}
.ec-acties {
min-width: 19rem;
}
.ec-budget-invoer {
width: 8rem;
}
.ec-jaar-invoer {
max-width: 5.5rem;
}
/* Thema: de schakelaar in de navbar, plus de twee plekken waar een vaste Bootstrap-kleur in het
donkere thema wegvalt. Bootstrap 5.3 doet de rest zelf op grond van data-bs-theme op . */
/* Zonder JavaScript blijft de knop weg — hij kan dan toch niets. Het scriptje in zet
data-bs-theme, dus dat attribuut is meteen het teken dat JavaScript aanstaat. */
.thema-schakelaar {
display: none;
}
[data-bs-theme] .thema-schakelaar {
display: flex;
}
.thema-icoon {
width: 1.1em;
height: 1.1em;
fill: currentColor;
vertical-align: -.15em;
}
/* De knop toont waar hij heen schakelt: een maantje in het lichte thema, een zon in het donkere. */
.thema-icoon-licht {
display: none;
}
[data-bs-theme="dark"] .thema-icoon-donker {
display: none;
}
[data-bs-theme="dark"] .thema-icoon-licht {
display: inline-block;
}
/* De jaarregel in de budgetrol-up moet oplichten tegen de afdelingsregels eronder. Dat was
.table-light: een vaste lichte kleur die in het donkere thema een witte balk werd. Dit zet
dezelfde variabele die .table-light zet, maar met een tint die meekantelt. */
.ec-jaar-rij {
--bs-table-bg: var(--bs-tertiary-bg);
}
/* "Geschrapt" was bg-dark: een donkere badge die in het donkere thema wegvalt tegen de
achtergrond. Deze kantelt mee — bijna zwart op licht, bijna wit op donker — en houdt zo de
doorgehaalde toon die bg-dark gaf. */
.badge-geschrapt {
background-color: var(--bs-emphasis-color);
color: var(--bs-body-bg);
}