Skip to Content

Wijzigen voor document Huisstijl

Laatst gewijzigd door Jeeves de Butler op 07-10-2026 01:56
Van versie 1.1
gewijzigd door Jeeves de Butler
op 05-10-2026 01:21
Opmerking bij wijziging: Er is geen opmerking bij deze versie
Naar versie 25.1
gewijzigd door Jeeves de Butler
op 07-10-2026 01:56
Opmerking bij wijziging: Er is geen opmerking bij deze versie

Samenvatting

Details

Paginaeigenschappen
Inhoud
... ... @@ -1,4 +1,4 @@
1 -Huisstijl van de Wardenburg Kennisbank. Het object //StyleSheetExtension// op deze pagina wordt op elke pagina geladen.
1 +Huisstijl van de Wardenburg Kennisbank. Het object //StyleSheetExtension// op deze pagina (de opmaak) en het object //JavaScriptExtension// (kaartenraster voor tegeltabellen, alleen presentatie) worden op elke pagina geladen.
2 2  
3 3  Kleuren en lettertypen staan in het kleurthema [[Wardenburg>>doc:FlamingoThemes.Wardenburg]]. Zie het [[register van eigen aanpassingen>>doc:Wardenburg.Code.WebHome]].
4 4  
XWiki.JavaScriptExtension[0]
cache
... ... @@ -1,0 +1,1 @@
1 +long
code
... ... @@ -1,0 +1,215 @@
1 +/* Wardenburg Kennisbank; presentatie van tegeltabellen (class "vgmtabel").
2 + Een tegeltabel is een rij met titels (kopcellen) met daaronder een rij met afbeeldingen die naar een pagina linken.
3 + Dit script toont dezelfde titels, afbeeldingen en links als een rustig kaartenraster. De pagina zelf verandert niet:
4 + de tabel blijft in de pagina staan en wordt alleen verborgen. Werkt alleen in de leesweergave. */
5 +(function () {
6 + 'use strict';
7 +
8 + function cellen(rij) {
9 + return rij ? Array.prototype.slice.call(rij.cells) : [];
10 + }
11 +
12 + function isKopRij(rij) {
13 + var c = cellen(rij);
14 + return c.length > 0 && c.every(function (cel) { return cel.tagName === 'TH'; });
15 + }
16 +
17 + function kaartenUitTabel(tabel) {
18 + var rijen = Array.prototype.slice.call(tabel.rows);
19 + var kaarten = [];
20 + for (var i = 0; i < rijen.length; i++) {
21 + var kop = rijen[i];
22 + if (!isKopRij(kop)) {
23 + continue;
24 + }
25 + var beeldRij = rijen[i + 1] && !isKopRij(rijen[i + 1]) ? rijen[i + 1] : null;
26 + var beeldCellen = cellen(beeldRij);
27 + cellen(kop).forEach(function (th, j) {
28 + var td = beeldCellen[j] || null;
29 + var titel = (th.textContent || '').replace(/\s+/g, ' ').trim();
30 + var img = (td && td.querySelector('img')) || th.querySelector('img');
31 + var link = (td && td.querySelector('a[href]')) || th.querySelector('a[href]');
32 + if (!titel && !img) {
33 + return;
34 + }
35 + kaarten.push({ titel: titel || (img && img.getAttribute('alt')) || '', img: img, link: link });
36 + });
37 + if (beeldRij) {
38 + i++;
39 + }
40 + }
41 + return kaarten;
42 + }
43 +
44 + // Adres van de oorspronkelijke afbeelding: zonder de width- en height-parameters waarmee XWiki verkleint.
45 + function origineel(src) {
46 + try {
47 + var url = new URL(src, window.location.href);
48 + url.searchParams.delete('width');
49 + url.searchParams.delete('height');
50 + return url.toString();
51 + } catch (e) {
52 + return src;
53 + }
54 + }
55 +
56 + function zetIcoon(beeld) {
57 + beeld.classList.add('wb-kaart-geenbeeld');
58 + var icoon = document.createElement('span');
59 + icoon.className = 'fa fa-book wb-kaart-icoon';
60 + icoon.setAttribute('aria-hidden', 'true');
61 + beeld.appendChild(icoon);
62 + }
63 +
64 + function maakKaart(k) {
65 + var kaart = document.createElement(k.link ? 'a' : 'div');
66 + kaart.className = 'wb-kaart';
67 + if (k.link) {
68 + kaart.setAttribute('href', k.link.getAttribute('href'));
69 + if (k.link.getAttribute('target')) {
70 + kaart.setAttribute('target', k.link.getAttribute('target'));
71 + kaart.setAttribute('rel', 'noopener');
72 + }
73 + }
74 + var beeld = document.createElement('span');
75 + beeld.className = 'wb-kaart-beeld';
76 + if (k.img) {
77 + var img = document.createElement('img');
78 + // Het origineel laden in plaats van de door XWiki verkleinde versie (?width=…&height=…), zodat grote kaarten scherp zijn.
79 + img.src = origineel(k.img.currentSrc || k.img.src);
80 + img.alt = '';
81 + img.loading = 'lazy';
82 + img.decoding = 'async';
83 + var geenBeeld = function () {
84 + img.remove();
85 + zetIcoon(beeld);
86 + };
87 + img.addEventListener('error', geenBeeld);
88 + // Sommige externe sites geven bij een verdwenen afbeelding een leeg plaatje in plaats van een fout.
89 + img.addEventListener('load', function () {
90 + if (!img.naturalWidth || img.naturalWidth < 4) {
91 + geenBeeld();
92 + }
93 + });
94 + beeld.appendChild(img);
95 + } else {
96 + zetIcoon(beeld);
97 + }
98 + var titel = document.createElement('span');
99 + titel.className = 'wb-kaart-titel';
100 + titel.textContent = k.titel;
101 + kaart.appendChild(beeld);
102 + kaart.appendChild(titel);
103 + return kaart;
104 + }
105 +
106 + function verwerk(tabel) {
107 + if (tabel.classList.contains('wb-vervangen')) {
108 + return;
109 + }
110 + var kaarten = kaartenUitTabel(tabel);
111 + if (!kaarten.length) {
112 + return;
113 + }
114 + var raster = document.createElement('div');
115 + raster.className = 'wb-kaarten';
116 + kaarten.forEach(function (k) { raster.appendChild(maakKaart(k)); });
117 + tabel.parentNode.insertBefore(raster, tabel.nextSibling);
118 + tabel.classList.add('wb-vervangen');
119 + }
120 +
121 + function start() {
122 + var actie = (window.XWiki && window.XWiki.contextaction) || 'view';
123 + if (actie !== 'view') {
124 + return;
125 + }
126 + var tabellen = document.querySelectorAll('#xwikicontent table.vgmtabel');
127 + Array.prototype.forEach.call(tabellen, function (tabel) {
128 + try { verwerk(tabel); } catch (e) { /* bij een fout blijft de tabel gewoon zichtbaar */ }
129 + });
130 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent ul.wikitoc'), eigenNummering);
131 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent .wbrb img'), scherpInfovak);
132 + }
133 +
134 + // Infovak: het origineel tonen in plaats van de kleine XWiki-verkleining, zodat de afbeelding op een breed scherm scherp blijft.
135 + // Bij een fout terug naar de verkleining. Het oude adres blijft bewaard voor herstel().
136 + function scherpInfovak(img) {
137 + var src = img.getAttribute('src') || '';
138 + if (img.hasAttribute('data-wb-src') || !/[?&](width|height)=/.test(src)) {
139 + return;
140 + }
141 + var groot = origineel(src);
142 + if (groot === src) {
143 + return;
144 + }
145 + img.setAttribute('data-wb-src', src);
146 + img.addEventListener('error', function terug() {
147 + img.removeEventListener('error', terug);
148 + img.setAttribute('src', src);
149 + });
150 + img.removeAttribute('srcset');
151 + img.setAttribute('src', groot);
152 + }
153 +
154 + // Inhoudsopgave: staan de nummers al in de koppen ("2.1 Mogelijkheden"), dan geen tweede nummering ervoor.
155 + // Beslist per inhoudsopgave, zodat die in zijn geheel genummerd of ongenummerd is.
156 + function eigenNummering(toc) {
157 + var links = toc.querySelectorAll('a');
158 + if (!links.length) {
159 + return;
160 + }
161 + var genummerd = 0;
162 + Array.prototype.forEach.call(links, function (a) {
163 + if (/^\s*\d+(\.\d+)*\.?\s/.test(a.textContent || '')) {
164 + genummerd++;
165 + }
166 + });
167 + if (genummerd / links.length >= 0.6) {
168 + toc.classList.add('wb-toc-eigen-nummers');
169 + }
170 + }
171 +
172 + // Bij wijzigen op de pagina zelf: eerst de oorspronkelijke tabel terug, zodat de editor nooit de kaarten ziet.
173 + function herstel() {
174 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent .wb-kaarten'), function (r) { r.remove(); });
175 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent table.wb-vervangen'), function (t) { t.classList.remove('wb-vervangen'); });
176 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent .wbrb img[data-wb-src]'), function (img) {
177 + img.setAttribute('src', img.getAttribute('data-wb-src'));
178 + img.removeAttribute('data-wb-src');
179 + });
180 + }
181 +
182 + if (typeof window.require === 'function') {
183 + window.require(['jquery'], function ($) {
184 + $(document).on('xwiki:actions:edit', herstel);
185 + $(document).on('xwiki:actions:view', function () { setTimeout(start, 0); });
186 + });
187 + }
188 +
189 + // Na opslaan bij wijzigen op de pagina zelf bouwt XWiki de inhoudsopgave opnieuw op zonder de pagina te herladen.
190 + // Daarom ook nieuwe inhoudsopgaven nalopen zodra ze verschijnen; niet binnen de editor, zodat niets in de tekst belandt.
191 + function nummersBijwerken() {
192 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent ul.wikitoc:not(.wb-toc-eigen-nummers)'), function (toc) {
193 + if (!toc.closest('[contenteditable="true"]')) {
194 + eigenNummering(toc);
195 + }
196 + });
197 + }
198 + var wachtend = null;
199 + if (window.MutationObserver) {
200 + new MutationObserver(function () {
201 + if (wachtend) {
202 + return;
203 + }
204 + wachtend = setTimeout(function () { wachtend = null; nummersBijwerken(); }, 100);
205 + }).observe(document.documentElement, { childList: true, subtree: true });
206 + }
207 +
208 + if (document.readyState === 'loading') {
209 + document.addEventListener('DOMContentLoaded', function () { start(); nummersBijwerken(); });
210 + } else {
211 + start();
212 + nummersBijwerken();
213 + }
214 +})();
215 +
use
... ... @@ -1,0 +1,1 @@
1 +always
name
... ... @@ -1,0 +1,1 @@
1 +Wardenburg tegels als kaarten
parse
... ... @@ -1,0 +1,1 @@
1 +Nee
XWiki.StyleSheetExtension[0]
Caching policy
... ... @@ -1,0 +1,1 @@
1 +long
Code
... ... @@ -1,0 +1,987 @@
1 +/* Wardenburg Kennisbank; huisstijl bovenop het kleurthema Wardenburg.
2 + Uitgangspunt: wit, ruimte en zo min mogelijk lijnen (in de geest van Google).
3 + Kleuren en lettertypen staan in het kleurthema; hier staan de eigen classes
4 + van de templates (wb...), de panelen en de leesbaarheid van de pagina-inhoud. */
5 +
6 +/* ---------- Opbouw ---------- */
7 +
8 +/* Pagina zonder rechterkolom op volle breedte */
9 +#body.hideleft.panel-right-width-Medium .main {
10 + width: 100%;
11 +}
12 +#headerglobal,
13 +.navbar-default {
14 + border-bottom: 1px solid #e8eaed;
15 + box-shadow: none;
16 +}
17 +#footerglobal {
18 + border-top: 1px solid #e8eaed;
19 + color: #5f6368;
20 + font-size: 13px;
21 +}
22 +
23 +/* ---------- Paginakop ---------- */
24 +
25 +.breadcrumb {
26 + padding: 4px 0;
27 + margin-bottom: 6px;
28 + font-size: 14px;
29 +}
30 +#document-title h1 {
31 + font-size: 32px;
32 + font-weight: 500;
33 + margin-bottom: 4px;
34 +}
35 +.xdocLastModification {
36 + font-size: 13px;
37 + color: #5f6368;
38 +}
39 +#mainContentArea > .document-header + hr {
40 + border: 0;
41 + margin: 12px 0 8px;
42 +}
43 +#contentmenu .btn {
44 + font-size: 14px;
45 + padding: 5px 12px;
46 +}
47 +
48 +/* ---------- Leesbare inhoud ---------- */
49 +
50 +#xwikicontent {
51 + line-height: 1.65;
52 +}
53 +#xwikicontent p,
54 +#xwikicontent ul,
55 +#xwikicontent ol {
56 + margin-bottom: 0.85em;
57 +}
58 +#xwikicontent li {
59 + margin-bottom: 0.25em;
60 +}
61 +#xwikicontent h1,
62 +#xwikicontent h2,
63 +#xwikicontent h3,
64 +#xwikicontent h4 {
65 + font-weight: 500;
66 + border: 0;
67 + padding: 0;
68 +}
69 +#xwikicontent h1 { font-size: 26px; margin: 1.5em 0 0.45em; }
70 +#xwikicontent h2 { font-size: 22px; margin: 1.4em 0 0.4em; }
71 +#xwikicontent h3 { font-size: 19px; margin: 1.2em 0 0.35em; }
72 +#xwikicontent h4 { font-size: 17px; margin: 1em 0 0.3em; }
73 +#xwikicontent > h1:first-child,
74 +#xwikicontent > h2:first-child {
75 + margin-top: 0;
76 +}
77 +#xwikicontent a {
78 + text-decoration-color: rgba(25, 103, 210, .35);
79 + text-underline-offset: 3px;
80 +}
81 +#xwikicontent a:hover {
82 + text-decoration-color: currentColor;
83 +}
84 +#xwikicontent img {
85 + max-width: 100%;
86 + height: auto;
87 +}
88 +#xwikicontent .box {
89 + border-radius: 8px;
90 +}
91 +
92 +/* ---------- Tabellen ---------- */
93 +
94 +.main td,
95 +.main th {
96 + border: 1px solid #e8eaed;
97 + padding: 7px 12px;
98 + vertical-align: top;
99 + text-align: left;
100 +}
101 +.main th {
102 + background-color: #f8f9fa;
103 + font-weight: 500;
104 +}
105 +#xwikicontent table {
106 + border-collapse: collapse;
107 + margin-bottom: 1em;
108 +}
109 +
110 +/* ---------- Infovak rechts (wbrechts) ---------- */
111 +
112 +/* Groeit mee met de inhoudskolom: op een laptop als voorheen, op brede schermen ruimer voor de afbeelding */
113 +.floatinginfobox.wbrechts {
114 + width: 30%;
115 + min-width: 260px;
116 + max-width: 460px;
117 + margin: 0 0 16px 28px;
118 + padding: 14px;
119 + border: 1px solid #e8eaed;
120 + border-radius: 12px;
121 + background-color: #ffffff;
122 + box-sizing: border-box;
123 + overflow: hidden;
124 +}
125 +.floatinginfobox.wbrechts > *:last-child {
126 + margin-bottom: 0;
127 +}
128 +.wbrb {
129 + text-align: center;
130 + margin-bottom: 12px;
131 +}
132 +/* Nooit groter dan het origineel, zodat logo's klein en scherp blijven */
133 +.wbrb img {
134 + max-width: 100%;
135 + max-height: 280px;
136 + width: auto;
137 + height: auto;
138 + border-radius: 10px;
139 +}
140 +.wbrb .wikiexternallink,
141 +.vgmtabel .wikiexternallink {
142 + background: none;
143 + padding-right: 0;
144 +}
145 +.wbinfotab table {
146 + width: 100%;
147 + table-layout: fixed;
148 + margin: 0 0 12px;
149 + font-size: 14px;
150 +}
151 +.wbinfotab th,
152 +.wbinfotab td {
153 + border: 0;
154 + border-bottom: 1px solid #f1f3f4;
155 + padding: 6px 4px;
156 + background: transparent;
157 + overflow-wrap: anywhere;
158 +}
159 +.wbinfotab tr:last-child th,
160 +.wbinfotab tr:last-child td {
161 + border-bottom: 0;
162 +}
163 +.wbinfotab th {
164 + width: 42%;
165 + color: #5f6368;
166 + font-weight: 500;
167 +}
168 +.wbinfotab th.wbinfotabheaderlinks,
169 +.wbinfotab th.wbinfotabheaderrechts {
170 + color: #202124;
171 + font-size: 15px;
172 + font-weight: 500;
173 + border-bottom: 1px solid #e8eaed;
174 +}
175 +.wbinfotabheaderlinks {
176 + width: 42%;
177 +}
178 +.wbinfotab .box {
179 + margin: 0;
180 + padding: 2px 6px;
181 + font-size: 12px;
182 + white-space: normal;
183 +}
184 +.wbinfotab .code {
185 + white-space: normal;
186 + word-break: break-all;
187 +}
188 +
189 +/* Inhoudsopgave in het infovak */
190 +.wbtoc {
191 + padding-top: 4px;
192 + font-size: 14px;
193 +}
194 +.wbtoc p {
195 + margin: 0 0 6px;
196 +}
197 +.wbtocheader {
198 + font-size: 15px;
199 + font-weight: 500;
200 +}
201 +.wbtoc ul {
202 + list-style: none;
203 + padding-left: 0;
204 + margin: 0;
205 +}
206 +.wbtoc ul ul {
207 + padding-left: 12px;
208 +}
209 +.wbtoc li {
210 + margin: 3px 0;
211 +}
212 +.wbtoc .nodirectchild {
213 + list-style: none;
214 +}
215 +#body #xwikicontent .wbtoc a {
216 + text-decoration: none;
217 +}
218 +#body #xwikicontent .wbtoc a:hover {
219 + text-decoration: underline;
220 +}
221 +
222 +/* Inhoudsopgave als genummerd overzicht (1, 1.1, 1.2): hoofdstukken donker, onderdelen blauw en ingesprongen */
223 +#xwikicontent ul.wikitoc,
224 +#xwikicontent ul.wikitoc ul {
225 + list-style: none;
226 + margin: 0;
227 + padding-left: 0;
228 + counter-reset: wbtoc;
229 +}
230 +#xwikicontent ul.wikitoc ul {
231 + padding-left: 1.55em;
232 +}
233 +#xwikicontent ul.wikitoc li.nodirectchild > ul {
234 + padding-left: 0;
235 + counter-reset: none;
236 +}
237 +#xwikicontent ul.wikitoc li {
238 + margin: 3px 0;
239 +}
240 +#xwikicontent ul.wikitoc li:not(.nodirectchild) {
241 + counter-increment: wbtoc;
242 +}
243 +#xwikicontent ul.wikitoc li > .wikilink {
244 + display: flex;
245 + gap: 0.45em;
246 +}
247 +#xwikicontent ul.wikitoc li > .wikilink::before {
248 + content: counters(wbtoc, ".");
249 + flex: none;
250 + min-width: 1.1em;
251 + color: #80868b;
252 + font-variant-numeric: tabular-nums;
253 +}
254 +/* Koppen die zelf al genummerd zijn ("2.1 Mogelijkheden"): het script zet deze class, dan geen tweede nummer */
255 +#xwikicontent ul.wikitoc.wb-toc-eigen-nummers li > .wikilink::before,
256 +#xwikicontent ul.wikitoc.wb-toc-eigen-nummers ul li > .wikilink::before {
257 + content: none;
258 +}
259 +#xwikicontent ul.wikitoc > li:not(.nodirectchild),
260 +#xwikicontent ul.wikitoc > li.nodirectchild > ul > li {
261 + margin-top: 10px;
262 +}
263 +#xwikicontent ul.wikitoc > li:not(.nodirectchild):first-child,
264 +#xwikicontent ul.wikitoc > li.nodirectchild > ul > li:first-child {
265 + margin-top: 0;
266 +}
267 +#body #xwikicontent ul.wikitoc > li:not(.nodirectchild) > .wikilink a,
268 +#body #xwikicontent ul.wikitoc > li.nodirectchild > ul > li > .wikilink a {
269 + color: #202124;
270 + font-weight: 500;
271 +}
272 +
273 +/* ---------- Overige eigen classes ---------- */
274 +
275 +.wblinks {
276 + margin-top: 0;
277 +}
278 +.changelog {
279 + width: 60%;
280 +}
281 +.nieuws {
282 + clear: both;
283 +}
284 +.wbtree {
285 + width: 20%;
286 +}
287 +.gepubliceerddoor,
288 +.gepubliceerddoornaam,
289 +.gepubliceerddoor_afb {
290 + vertical-align: middle;
291 +}
292 +.WBFT {
293 + background-color: white;
294 +}
295 +.vgmtabel {
296 + width: 100%;
297 + border-collapse: collapse;
298 + text-align: center;
299 + border: none;
300 +}
301 +.vgmtabel th,
302 +.vgmtabel td {
303 + width: 33.3%;
304 + border: none;
305 + text-align: center;
306 + background: transparent;
307 +}
308 +#vgmtabel img {
309 + height: 100px;
310 + width: auto;
311 +}
312 +.wbtopmenu {
313 + font-weight: bold;
314 +}
315 +
316 +/* ---------- Panelen links ---------- */
317 +
318 +.panels .panel {
319 + border: 0;
320 + box-shadow: none;
321 + background: transparent;
322 + margin-bottom: 20px;
323 +}
324 +.panels .xwikipaneltitle {
325 + font-size: 13px;
326 + font-weight: 500;
327 + color: #5f6368;
328 + border-bottom: 0;
329 + padding: 0 12px 6px;
330 + margin: 0;
331 +}
332 +.panels .xwikipanelcontents {
333 + padding: 0;
334 + font-size: 15px;
335 + line-height: 1.4;
336 +}
337 +.panels .xwikipanelcontents p {
338 + margin: 0;
339 +}
340 +.panels .xwikipanelcontents a {
341 + display: block;
342 + padding: 7px 12px;
343 + border-radius: 0 20px 20px 0;
344 + color: #202124;
345 + text-decoration: none;
346 +}
347 +.panels .xwikipanelcontents a:hover,
348 +.panels .xwikipanelcontents a:focus {
349 + background-color: #f1f3f4;
350 + color: #202124;
351 +}
352 +.panels .wikiexternallink,
353 +.panels .wikilink,
354 +.wb-links .wikiexternallink,
355 +.wb-links .wikilink {
356 + display: block;
357 + background: none;
358 + padding-right: 0;
359 +}
360 +.wb-onderdelen,
361 +.panels .wb-links {
362 + list-style: none;
363 + padding: 0;
364 + margin: 0 0 8px;
365 +}
366 +.wb-onderdelen li,
367 +.panels .wb-links li {
368 + margin: 0;
369 +}
370 +.wb-onderdelen a .fa {
371 + width: 20px;
372 + margin-right: 12px;
373 + text-align: center;
374 + color: #5f6368;
375 +}
376 +.wb-onderdelen a.actief,
377 +.wb-onderdelen a.actief:hover {
378 + background-color: #ffefd5;
379 + font-weight: 500;
380 +}
381 +.wb-onderdelen a.actief .fa {
382 + color: #b86e00;
383 +}
384 +.wb-links-kop {
385 + margin: 12px 12px 2px;
386 + font-size: 13px;
387 + font-weight: 500;
388 + color: #5f6368;
389 +}
390 +
391 +/* Knop om de kolom in en uit te klappen: klein lipje, de kolom schuift erlangs in */
392 +#leftPanels {
393 + padding-left: 30px;
394 +}
395 +/* Vaste ondergrens, zodat de menu-items ook op een laptop op één regel passen. Niet als de zijbalk is ingeklapt:
396 + dan zet XWiki de breedte op 0 en krijgt de inhoud de volle breedte. */
397 +#body.panel-left-width-Medium:not(.hideleft):not(.hidelefthideright) {
398 + --panel-column-left-width: clamp(240px, 17vw, 290px);
399 +}
400 +.panels .xwikipanelcontents a {
401 + white-space: nowrap;
402 + overflow: hidden;
403 + text-overflow: ellipsis;
404 +}
405 +body#body #leftPanelsToggle {
406 + width: 22px;
407 + max-width: 22px;
408 + height: 34px;
409 + padding: 0;
410 + border: 1px solid #e8eaed;
411 + border-left: 0;
412 + border-radius: 0 10px 10px 0;
413 + background: #ffffff;
414 + color: #5f6368;
415 + box-shadow: 0 1px 3px rgba(60, 64, 67, .15);
416 +}
417 +body#body #leftPanelsToggle:hover,
418 +body#body #leftPanelsToggle:focus {
419 + background: #f1f3f4;
420 + color: #202124;
421 +}
422 +
423 +/* Zwevende opslaanbalk bij wijzigen en voorbeeld: matglas, zodat de pagina eronder rustig vervaagt */
424 +.sticky-buttons {
425 + background-color: rgba(248, 249, 250, .78);
426 + -webkit-backdrop-filter: blur(12px) saturate(140%);
427 + backdrop-filter: blur(12px) saturate(140%);
428 + border: 1px solid rgba(218, 220, 224, .9);
429 + border-radius: 16px;
430 + box-shadow: 0 -2px 18px rgba(60, 64, 67, .14);
431 + padding: 10px 12px;
432 +}
433 +.sticky-buttons .buttons,
434 +.sticky-buttons fieldset,
435 +.sticky-buttons .meta-versionSummary,
436 +.sticky-buttons .meta-minorEdit {
437 + background: transparent;
438 +}
439 +@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
440 + .sticky-buttons {
441 + background-color: rgba(248, 249, 250, .97);
442 + }
443 +}
444 +
445 +/* ---------- Tabbladen onder de pagina ---------- */
446 +
447 +#docExtraTabs .xwikitabbar {
448 + border-bottom: 1px solid #e8eaed;
449 +}
450 +#docExtraTabs .xwikitabbar li a {
451 + border: 0;
452 + border-bottom: 3px solid transparent;
453 + border-radius: 0;
454 + background: transparent;
455 + color: #5f6368;
456 +}
457 +#docExtraTabs .xwikitabbar li.active a,
458 +#docExtraTabs .xwikitabbar li a:hover {
459 + border-bottom-color: #ffb447;
460 + color: #202124;
461 + background: transparent;
462 +}
463 +
464 +/* ---------- Zoekresultaten, zoals bij Google ---------- */
465 +
466 +.search-result {
467 + display: flex;
468 + flex-direction: column;
469 + margin-bottom: 26px;
470 +}
471 +.search-result-location {
472 + order: -1;
473 + font-size: 13px;
474 + color: #5f6368;
475 +}
476 +.search-result-location .breadcrumb {
477 + display: inline;
478 + padding: 0;
479 + margin: 0;
480 + background: none;
481 + font-size: 13px;
482 +}
483 +#xwikicontent h2.search-result-title {
484 + order: 0;
485 + font-size: 20px;
486 + font-weight: 400;
487 + margin: 2px 0 4px;
488 +}
489 +#body #xwikicontent h2.search-result-title a {
490 + text-decoration: none;
491 +}
492 +#body #xwikicontent h2.search-result-title a:hover {
493 + text-decoration: underline;
494 +}
495 +.search-result-title .fa {
496 + display: none;
497 +}
498 +.search-result-author {
499 + order: 2;
500 + font-size: 13px;
501 + color: #5f6368;
502 +}
503 +.search-result-author .user-avatar {
504 + display: none;
505 +}
506 +.search-result-highlights {
507 + order: 1;
508 + margin: 0 0 4px;
509 +}
510 +#xwikicontent .search-result-highlights dt,
511 +#xwikicontent .search-result-highlights dd:not(:first-of-type),
512 +#xwikicontent .search-result-highlights blockquote:not(:first-of-type),
513 +#xwikicontent .search-result-highlights .separator,
514 +#xwikicontent .search-result .btn:not(.sr-only) {
515 + display: none;
516 +}
517 +#xwikicontent .search-result-highlights dd {
518 + margin: 0;
519 + padding: 0;
520 +}
521 +#body #xwikicontent .search-result-location a {
522 + color: #5f6368;
523 + text-decoration: none;
524 +}
525 +
526 +/* Zoekbalk op de zoekpagina */
527 +#search-page-bar-input {
528 + height: 44px;
529 + padding-left: 20px;
530 + border-radius: 22px 0 0 22px;
531 + font-size: 16px;
532 +}
533 +.search-form .input-group-btn .btn {
534 + height: 44px;
535 + border-radius: 0 22px 22px 0;
536 + padding-right: 20px;
537 +}
538 +.search-options,
539 +.search-form .sort-options,
540 +.search-form select {
541 + font-size: 14px;
542 + color: #5f6368;
543 +}
544 +#xwikicontent .search-result-highlight {
545 + border: 0;
546 + margin: 0;
547 + padding: 0;
548 + font-size: 15px;
549 + color: #4d5156;
550 + display: -webkit-box;
551 + -webkit-line-clamp: 3;
552 + -webkit-box-orient: vertical;
553 + overflow: hidden;
554 +}
555 +.search-text-highlight {
556 + background: none;
557 + font-weight: 600;
558 + color: #202124;
559 +}
560 +
561 +/* Zoekpagina: geen paginatitel, zoekbalk bovenaan, zoals bij Google */
562 +html[data-xwiki-document="Main.Search"] #document-title,
563 +html[data-xwiki-document="Main.Search"] .xdocLastModification,
564 +html[data-xwiki-document="Main.Search"] #mainContentArea > .document-header + hr,
565 +html[data-xwiki-document="Main.Search"] #xwikicontent > .wikimodel-emptyline:first-child {
566 + display: none;
567 +}
568 +html[data-xwiki-document="Main.Search"] #mainContentArea {
569 + position: relative;
570 +}
571 +html[data-xwiki-document="Main.Search"] #mainContentArea .document-header {
572 + position: absolute;
573 + top: 0;
574 + right: 15px;
575 + left: 15px;
576 + z-index: 2;
577 + min-height: 0;
578 + margin: 0;
579 + pointer-events: none;
580 +}
581 +html[data-xwiki-document="Main.Search"] #mainContentArea .document-menu {
582 + pointer-events: auto;
583 + opacity: .55;
584 +}
585 +html[data-xwiki-document="Main.Search"] #mainContentArea .document-menu:hover,
586 +html[data-xwiki-document="Main.Search"] #mainContentArea .document-menu:focus-within {
587 + opacity: 1;
588 +}
589 +html[data-xwiki-document="Main.Search"] .search-form {
590 + margin-top: 8px;
591 +}
592 +.search-facets-header strong {
593 + font-size: 15px;
594 + font-weight: 500;
595 +}
596 +.search-facets-header .xHint {
597 + font-size: 13px;
598 +}
599 +
600 +/* Beheeracties van applicaties (App Within Minutes): een rustige knoppenrij boven de inhoud in plaats van een extra kolom */
601 +#xwikicontent #actionBox.floatinginfobox {
602 + float: none;
603 + width: auto;
604 + max-width: none;
605 + margin: 0 0 18px;
606 + padding: 0;
607 + border: 0;
608 + background: transparent;
609 + box-shadow: none;
610 +}
611 +#xwikicontent #actionBox h1 {
612 + display: none;
613 +}
614 +#xwikicontent #actionBox ul {
615 + display: flex;
616 + flex-wrap: wrap;
617 + align-items: center;
618 + gap: 6px;
619 + margin: 0;
620 + padding: 0;
621 + list-style: none;
622 +}
623 +#xwikicontent #actionBox ul::before {
624 + content: "Beheer";
625 + margin-right: 4px;
626 + font-size: 13px;
627 + font-weight: 500;
628 + color: #5f6368;
629 +}
630 +#xwikicontent #actionBox li {
631 + margin: 0;
632 +}
633 +#body #xwikicontent #actionBox a {
634 + display: inline-flex;
635 + align-items: center;
636 + gap: 6px;
637 + padding: 4px 12px;
638 + border: 1px solid #dadce0;
639 + border-radius: 16px;
640 + background: #ffffff;
641 + color: #3c4043;
642 + font-size: 13px;
643 + text-decoration: none;
644 + text-transform: none;
645 +}
646 +#body #xwikicontent #actionBox a:hover,
647 +#body #xwikicontent #actionBox a:focus {
648 + background: #f8f9fa;
649 + color: #202124;
650 +}
651 +#body #xwikicontent #actionBox a.deleteData,
652 +#body #xwikicontent #actionBox a.delete {
653 + color: #b3261e;
654 +}
655 +#xwikicontent #actionBox .fa {
656 + font-size: 12px;
657 +}
658 +
659 +/* Smalle inhoudskolom (laptop met zijkolom, tablet): compact infovak met de afbeelding naast de eigenschappen */
660 +@media (min-width: 768px) and (max-width: 1199px) {
661 + #contentmenu > li:not(#tmEdit) .btn-label {
662 + display: none;
663 + }
664 + .floatinginfobox.wbrechts {
665 + float: none;
666 + width: 100%;
667 + max-width: none;
668 + min-width: 0;
669 + margin: 0 0 20px;
670 + display: grid;
671 + grid-template-columns: 220px minmax(0, 1fr);
672 + column-gap: 18px;
673 + align-items: start;
674 + }
675 + .floatinginfobox.wbrechts > .wbrb {
676 + grid-row: 1 / span 4;
677 + margin: 0;
678 + }
679 + .floatinginfobox.wbrechts > .wbrb img {
680 + max-height: 170px;
681 + }
682 + .floatinginfobox.wbrechts > *:not(.wbrb) {
683 + grid-column: 2;
684 + }
685 + .floatinginfobox.wbrechts .wbinfotab table {
686 + margin-bottom: 8px;
687 + }
688 + .floatinginfobox.wbrechts .wbtoc ul.wikitoc {
689 + columns: 2;
690 + column-gap: 24px;
691 + }
692 + .floatinginfobox.wbrechts .wbtoc ul.wikitoc > li {
693 + break-inside: avoid;
694 + }
695 +}
696 +
697 +/* ---------- Paginakop: titel en knoppen naast elkaar ---------- */
698 +
699 +@media (min-width: 992px) {
700 + #mainContentArea > .document-header {
701 + display: flex;
702 + align-items: flex-start;
703 + gap: 16px;
704 + }
705 + #mainContentArea > .document-header::before,
706 + #mainContentArea > .document-header::after {
707 + content: none;
708 + }
709 + #mainContentArea > .document-header > .document-info {
710 + flex: 1 1 auto;
711 + width: auto;
712 + min-width: 0;
713 + }
714 + #mainContentArea > .document-header > .document-menu {
715 + flex: 0 0 auto;
716 + width: auto;
717 + }
718 + #mainContentArea > .document-header #contentmenu {
719 + float: none;
720 + display: flex;
721 + flex-wrap: nowrap;
722 + }
723 +}
724 +
725 +/* ---------- Tegels (vgmtabel) als kaarten ---------- */
726 +
727 +/* Het script huisstijl.js zet een tegeltabel om in een kaartenraster en verbergt de tabel. */
728 +#xwikicontent table.vgmtabel.wb-vervangen {
729 + display: none !important;
730 +}
731 +.wb-kaarten {
732 + display: grid;
733 + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
734 + gap: 18px;
735 + margin: 14px 0 30px;
736 + clear: none;
737 +}
738 +#body #xwikicontent a.wb-kaart,
739 +.wb-kaart {
740 + display: flex;
741 + flex-direction: column;
742 + overflow: hidden;
743 + border: 1px solid #e8eaed;
744 + border-radius: 12px;
745 + background: #ffffff;
746 + color: #202124;
747 + text-decoration: none;
748 + transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
749 +}
750 +#body #xwikicontent a.wb-kaart:hover,
751 +#body #xwikicontent a.wb-kaart:focus {
752 + border-color: #ffb447;
753 + box-shadow: 0 4px 14px rgba(31, 35, 40, .10);
754 + transform: translateY(-2px);
755 + color: #202124;
756 +}
757 +.wb-kaart-beeld {
758 + display: block;
759 + position: relative;
760 + aspect-ratio: 16 / 10;
761 + overflow: hidden;
762 + background: #f1f3f4;
763 +}
764 +.wb-kaart-beeld img {
765 + display: block;
766 + width: 100% !important;
767 + height: 100% !important;
768 + max-width: none;
769 + object-fit: cover;
770 + transition: transform .25s ease;
771 +}
772 +.wb-kaart:hover .wb-kaart-beeld img {
773 + transform: scale(1.03);
774 +}
775 +/* Geen of verdwenen afbeelding: het script zet er een boekpictogram in (geen backslash-codes in deze CSS:
776 + de CSS-verkleiner van XWiki breekt die, en dan valt de rest van het bestand weg). */
777 +.wb-kaart-icoon {
778 + position: absolute;
779 + top: 50%;
780 + left: 50%;
781 + transform: translate(-50%, -50%);
782 + font-size: 34px;
783 + color: #b86e00;
784 + opacity: .5;
785 +}
786 +.wb-kaart-titel {
787 + padding: 10px 14px 12px;
788 + font-size: 15px;
789 + font-weight: 500;
790 + line-height: 1.35;
791 +}
792 +/* Grote schermen: grote kaarten, foto's in hun oorspronkelijke 3:2-verhouding */
793 +@media (min-width: 1200px) {
794 + .wb-kaarten {
795 + grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
796 + gap: 26px;
797 + }
798 + .wb-kaart-beeld {
799 + aspect-ratio: 3 / 2;
800 + }
801 + .wb-kaart-titel {
802 + padding: 14px 18px 16px;
803 + font-size: 17px;
804 + }
805 +}
806 +@media (min-width: 1800px) {
807 + .wb-kaarten {
808 + grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
809 + }
810 +}
811 +
812 +/* Zonder script: de tabel past in elk geval binnen het scherm */
813 +#xwikicontent table.vgmtabel {
814 + width: 100% !important;
815 + max-width: 100%;
816 + table-layout: fixed;
817 +}
818 +#xwikicontent table.vgmtabel th,
819 +#xwikicontent table.vgmtabel td {
820 + width: auto !important;
821 + position: static !important;
822 + top: auto !important;
823 + padding: 6px;
824 +}
825 +#xwikicontent table.vgmtabel img {
826 + width: 100% !important;
827 + height: auto !important;
828 + aspect-ratio: 16 / 10;
829 + object-fit: cover;
830 + border-radius: 10px;
831 +}
832 +
833 +/* ---------- Handboeken: geplakte Word-opmaak volgt de huisstijl ---------- */
834 +
835 +html[data-xwiki-space^="Main.Handboeken"] #xwikicontent [style*="font-family"] {
836 + font-family: inherit !important;
837 +}
838 +html[data-xwiki-space^="Main.Handboeken"] #xwikicontent [style*="font-size"] {
839 + font-size: inherit !important;
840 +}
841 +html[data-xwiki-space^="Main.Handboeken"] #xwikicontent [style*="line-height"] {
842 + line-height: inherit !important;
843 +}
844 +html[data-xwiki-space^="Main.Handboeken"] #xwikicontent table:not(.vgmtabel) {
845 + font-size: 14px;
846 +}
847 +html[data-xwiki-space^="Main.Handboeken"] #xwikicontent table [style*="text-indent"] {
848 + text-indent: 0 !important;
849 +}
850 +
851 +/* ---------- Overzicht van onderliggende pagina's (startpagina van een onderdeel) ---------- */
852 +
853 +.wb-overzicht {
854 + list-style: none;
855 + display: grid;
856 + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
857 + gap: 10px;
858 + margin: 14px 0 28px;
859 + padding: 0;
860 +}
861 +.wb-overzicht li {
862 + margin: 0;
863 +}
864 +#body #xwikicontent .wb-overzicht a {
865 + display: flex;
866 + align-items: center;
867 + gap: 12px;
868 + height: 100%;
869 + padding: 12px 14px;
870 + border: 1px solid #e8eaed;
871 + border-radius: 10px;
872 + background: #ffffff;
873 + color: #202124;
874 + text-decoration: none;
875 + transition: border-color .15s ease, box-shadow .15s ease;
876 +}
877 +#body #xwikicontent .wb-overzicht a:hover,
878 +#body #xwikicontent .wb-overzicht a:focus {
879 + border-color: #ffb447;
880 + box-shadow: 0 2px 10px rgba(31, 35, 40, .08);
881 +}
882 +.wb-overzicht-icoon {
883 + flex: none;
884 + width: 36px;
885 + height: 36px;
886 + display: flex;
887 + align-items: center;
888 + justify-content: center;
889 + border-radius: 50%;
890 + background: #ffefd5;
891 + color: #b86e00;
892 + font-size: 16px;
893 + text-align: center;
894 +}
895 +.wb-overzicht strong {
896 + display: block;
897 + font-weight: 500;
898 + line-height: 1.3;
899 +}
900 +.wb-overzicht small {
901 + display: block;
902 + margin-top: 2px;
903 + font-size: 13px;
904 + color: #5f6368;
905 +}
906 +.wb-overzicht-leeg {
907 + color: #5f6368;
908 +}
909 +
910 +/* ---------- Telefoon ---------- */
911 +
912 +@media (max-width: 767px) {
913 + .floatinginfobox.wbrechts {
914 + float: none;
915 + width: 100%;
916 + max-width: none;
917 + min-width: 0;
918 + margin: 0 0 16px;
919 + }
920 + .wbrb img {
921 + max-height: 200px;
922 + }
923 + #xwikicontent table:not(.wbinfotab table) {
924 + display: block;
925 + max-width: 100%;
926 + overflow-x: auto;
927 + }
928 + #document-title h1 {
929 + font-size: 26px;
930 + }
931 + .changelog {
932 + width: 100%;
933 + }
934 + #contentmenu .btn-label {
935 + display: none;
936 + }
937 + .wb-kaarten {
938 + grid-template-columns: repeat(2, minmax(0, 1fr));
939 + gap: 10px;
940 + }
941 + .wb-kaart-titel {
942 + padding: 8px 10px 10px;
943 + font-size: 13.5px;
944 + }
945 + #xwikicontent #actionBox ul {
946 + flex-wrap: nowrap;
947 + overflow-x: auto;
948 + padding-bottom: 4px;
949 + scrollbar-width: none;
950 + }
951 + #xwikicontent #actionBox li {
952 + flex: none;
953 + }
954 +}
955 +
956 +/* Overzichtstabellen (livetable): woorden heel laten, lange adressen afkappen met ...; bij aanwijzen het volledige adres */
957 +#xwikicontent table.xwiki-livetable {
958 + font-size: 14px;
959 +}
960 +#xwikicontent .xwiki-livetable-display-header th,
961 +#xwikicontent .xwiki-livetable-display-body td {
962 + padding: 6px 7px;
963 +}
964 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td {
965 + word-break: normal;
966 + overflow-wrap: break-word;
967 + hyphens: manual;
968 +}
969 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.URL,
970 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.DOWNLOADURL {
971 + max-width: 140px;
972 + white-space: nowrap;
973 + overflow: hidden;
974 + text-overflow: ellipsis;
975 +}
976 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.URL:hover,
977 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.DOWNLOADURL:hover {
978 + white-space: normal;
979 + overflow-wrap: anywhere;
980 +}
981 +/* Een brede overzichtstabel blijft binnen de pagina en schuift zo nodig opzij */
982 +#xwikicontent table.xwiki-livetable {
983 + display: block;
984 + max-width: 100%;
985 + overflow-x: auto;
986 +}
987 +
Gebruik deze uitbreiding
... ... @@ -1,0 +1,1 @@
1 +always
Naam
... ... @@ -1,0 +1,1 @@
1 +Wardenburg huisstijl
Inhoud verwerken
... ... @@ -1,0 +1,1 @@
1 +Nee
Content Type
... ... @@ -1,0 +1,1 @@
1 +CSS
XWiki.XWikiRights[0]
allow
... ... @@ -1,0 +1,1 @@
1 +Sta toe
levels
... ... @@ -1,0 +1,1 @@
1 +view
users
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
XWiki.XWikiRights[1]
allow
... ... @@ -1,0 +1,1 @@
1 +Sta toe
groups
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiAllGroup
levels
... ... @@ -1,0 +1,1 @@
1 +view
XWiki.XWikiRights[2]
allow
... ... @@ -1,0 +1,1 @@
1 +Sta toe
groups
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiAdminGroup
levels
... ... @@ -1,0 +1,1 @@
1 +view,edit,comment,script