/* Kleuren. script.js zet data-theme op bij een vaste keuze; zonder data-theme volgt de pagina het systeem. */
:root {
color-scheme:light;
--tekst:#404040;
--kop:#171717;
--achtergrond:#fff;
--rand:#ccc;
--rand-tabel:#BBBBBB;
--rij-oneven:rgb(246, 248, 250);
--kop-tabel:rgb(217, 217, 217);
--code:#f6f8fa;
--hover:#f0f0f0;
--accent:#0078D4;
--link:#0066cc;
--knop:#9F9F9F;
--knop-hover:#C1C1C1;
--knop-tekst:#000000;
--schaduw:rgba(0, 0, 0, 0.15);
}
:root[data-theme="dark"] {
color-scheme:dark;
--tekst:#c9d1d9;
--kop:#e6edf3;
--achtergrond:#0d1117;
--rand:#30363d;
--rand-tabel:#30363d;
--rij-oneven:#161b22;
--kop-tabel:#21262d;
--code:#161b22;
--hover:#21262d;
--accent:#4ea1ff;
--link:#58a6ff;
--knop:#30363d;
--knop-hover:#484f58;
--knop-tekst:#e6edf3;
--schaduw:rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme:dark;
--tekst:#c9d1d9;
--kop:#e6edf3;
--achtergrond:#0d1117;
--rand:#30363d;
--rand-tabel:#30363d;
--rij-oneven:#161b22;
--kop-tabel:#21262d;
--code:#161b22;
--hover:#21262d;
--accent:#4ea1ff;
--link:#58a6ff;
--knop:#30363d;
--knop-hover:#484f58;
--knop-tekst:#e6edf3;
--schaduw:rgba(0, 0, 0, 0.5);
}
}
html, * {
box-sizing:border-box;
font-family:Segoe UI;
font-weight:400;
font-size:11pt;
line-height:1.4em;
}
body {
padding:0;
margin:0;
outline:0;
color:var(--tekst);
background-color:var(--achtergrond);
}
small {
font-size:8pt;
font-weight:400;
}
h1, h2, h3, h4, h5 {
color:var(--kop);
font-size:1.8em;
font-weight:600;
padding-top:84px; /* header */
}
#header {
padding-left:5px;
font-size:18pt;
font-weight:500;
background-color:var(--achtergrond);
border-bottom:1px solid var(--rand);
height:84px; /* header */
position:fixed;
top:0px;
left:0px;
right:0px;
z-index:30; /* boven de tekst die eronder door scrolt en boven de open inhoudsopgave */
}
#header table {
padding-top:10px;
height:100%;
width:100%;
}
#header td {
font-size:18pt;
font-weight:500;
text-align:left;
vertical-align:middle;
}
#header a, #header a:visited, #header a:link {
font-size:14pt;
font-weight:500;
color:var(--kop);
text-decoration: none;
}
/* De titel krijgt de ruimte die overblijft en wordt zo nodig afgekapt; de knoppen passen altijd. */
#header td:first-child {
width:100%;
max-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#header #language {
white-space:nowrap;
width:1%;
padding-right:20px;
}
#header #language label {
display:inline-flex;
vertical-align:middle;
margin-right:6px;
color:var(--kop);
cursor:pointer;
}
#header #language select {
font-size:12pt;
padding:4px 8px;
border:1px solid var(--rand);
border-radius:4px;
background-color:var(--achtergrond);
color:var(--kop);
cursor:pointer;
vertical-align:middle;
}
#header #language {
position:relative;
}
#themaknop {
display:inline-flex;
vertical-align:middle;
margin-left:8px;
padding:5px;
background:transparent;
border:1px solid var(--rand);
border-radius:4px;
color:var(--kop);
cursor:pointer;
}
#themaknop:hover {
background-color:var(--hover);
}
#themamenu {
position:absolute;
top:100%;
right:20px;
z-index:20;
min-width:160px;
padding:4px;
background-color:var(--achtergrond);
border:1px solid var(--rand);
border-radius:6px;
box-shadow:0 4px 12px var(--schaduw);
}
#themamenu[hidden] {
display:none;
}
#themamenu button {
display:flex;
align-items:center;
gap:10px;
width:100%;
padding:6px 10px;
background:transparent;
border:none;
border-radius:4px;
color:var(--kop);
font-size:11pt;
text-align:left;
cursor:pointer;
}
#themamenu button:hover {
background-color:var(--hover);
}
#themamenu button[aria-checked="true"] {
color:var(--accent);
font-weight:600;
}
#sitebar {
padding:5px;
width:var(--sitebar, 20em); /* script.js past --sitebar aan bij slepen */
border-right:1px solid var(--rand);
position:fixed;
top:84px; /* header */
left:0px;
bottom:0px;
overflow:auto;
}
/* De plaatjes en video's zijn gemaakt op 1024px; op een smaller vlak schalen ze mee. */
#content {
max-width:1024px;
}
/* De rand scheidt een screenshot met een witte achtergrond van de pagina. */
#content img {
max-width:100%;
height:auto;
border:1px solid var(--rand);
padding:6px;
background-color:var(--achtergrond);
}
/* De video's hebben een vaste breedte en hoogte in de pagina zelf. */
#content iframe {
width:100% !important;
height:auto !important;
aspect-ratio:16 / 9;
}
#wrapper {
padding:5px;
margin-left:var(--sitebar, 20em);
margin-bottom:36px; /* footer */
}
/* Sleeprand om de breedte van de inhoudsopgave aan te passen. */
#sitebar-rand {
position:fixed;
top:84px; /* header */
bottom:36px; /* footer */
left:var(--sitebar, 20em);
width:8px;
margin-left:-4px;
cursor:col-resize;
z-index:5;
}
#sitebar-rand:hover, #sitebar-rand:focus, body.slepen #sitebar-rand {
background-color:var(--accent);
opacity:0.4;
outline:none;
}
body.slepen {
cursor:col-resize;
user-select:none;
}
#menuknop {
display:none;
background:transparent;
border:none;
border-radius:4px;
padding:4px;
margin-right:8px;
color:var(--kop);
cursor:pointer;
vertical-align:middle;
}
#menuknop:hover {
background-color:var(--hover);
}
/* Smal scherm: de inhoudsopgave schuift over de tekst in plaats van ernaast te staan. */
@media (max-width: 1000px) {
#menuknop {
display:inline-flex;
}
#sitebar {
display:none;
background-color:var(--achtergrond);
z-index:10;
box-shadow:4px 0 12px var(--schaduw);
max-width:85vw;
bottom:36px; /* footer */
}
body.menu-open #sitebar {
display:block;
}
#wrapper {
margin-left:0;
}
#sitebar-rand {
display:none;
}
}
/* Telefoon: de kop past alleen nog op één regel met kleinere letters en zonder de downloadknoppen. */
@media (max-width: 600px) {
#header td {
font-size:13pt;
white-space:nowrap;
}
#header #language {
padding-right:8px;
}
#header #language label, #header #teamviewer, #download_title {
display:none;
}
#header #language select {
font-size:10pt;
padding:3px 4px;
max-width:110px;
}
#themaknop, #printknop {
margin-left:4px;
padding:3px;
}
#menuknop {
margin-right:4px;
}
/* Lange namen (EXSION365_SAMENVOEGEN) mogen afbreken, anders wordt de pagina breder dan het scherm. */
#content {
overflow-wrap:anywhere;
}
#content table td.nowrap {
white-space:normal;
}
/* Door het afbreken overal mag de eerste kolom smaller worden dan één woord; de tekst ernaast kreeg dan alle ruimte. */
#content td:first-child, #content th:first-child {
width:35%;
}
}
#footer {
padding:5px;
background-color:var(--achtergrond);
border-top:1px solid var(--rand);
font-size:0.8em;
height:36px; /* footer */
position:fixed;
bottom:0px;
left:0px;
right:0px;
z-index:30;
}
#footer table {
height:100%;
width:100%;
}
#footer td {
font-size:10pt;
font-weight:500;
color:var(--kop);
text-align:center;
vertical-align:middle;
}
pre {
margin:0px;
padding:12px 14px;
background:var(--code);
border:1px solid var(--rand);
border-radius:6px;
tab-size:4;
/* Een lange coderegel maakt anders de hele pagina breder, en dan schuiven de vaste kop en voet op een telefoon mee. */
overflow-x:auto;
}
/* html, * zet op alles Segoe UI; code moet in een letter met vaste breedte. */
pre, pre * {
font-family:Consolas, 'Cascadia Mono', 'Courier New', monospace;
font-size:10pt;
line-height:1.5em;
}
.codeblok {
position:relative;
margin:8px 0 12px 0;
}
/* Ruimte rechtsboven, zodat de knop de eerste regel niet afdekt. */
.codeblok pre {
padding-top:36px;
}
.kopieerknop {
position:absolute;
top:6px;
right:6px;
display:inline-flex;
align-items:center;
gap:6px;
padding:3px 8px;
background-color:var(--achtergrond);
border:1px solid var(--rand);
border-radius:4px;
color:var(--kop);
font-size:9pt;
cursor:pointer;
}
.kopieerknop span {
font-size:9pt;
}
.kopieerknop:hover {
background-color:var(--hover);
}
.kopieerknop.gekopieerd {
color:var(--accent);
border-color:var(--accent);
}
#content table {
width:100%;
border:1px solid var(--rand-tabel);
border-collapse:collapse;
}
#content tr:nth-child(odd) {
background-color:var(--rij-oneven);
}
#content td {
border:1px solid var(--rand-tabel);
}
#content th {
border:1px solid var(--rand-tabel);
vertical-align:bottom;
padding:5px;
text-align:left;
background:var(--kop-tabel);
font-weight:bold;
}
#content td {
vertical-align:top;
padding:5px;
}
#content td.wrap {
font-weight:bold;
}
#content td.nowrap {
white-space:nowrap;
font-weight:bold;
}
#sitebar ul {
list-style-type:none;
margin-left:1em;
padding:0;
}
#sitebar li {
padding-top:0.6em;
}
#sitebar a, #sitebar a:active, #sitebar a:hover, #sitebar a:link, #sitebar a:visited {
color: var(--kop);
text-decoration: none;
}
#sitebar a:hover {
cursor: pointer;
text-decoration: underline;
}
#sitebar .item {
padding-left: 16px;
}
#sitebar .treeitem {
display: inline;
}
#sitebar .treeitem-close {
display: none;
}
/* Pijltje van twee randen: -45 graden wijst naar rechts, 45 graden naar beneden. */
#sitebar .treeitem:before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
margin: 0 8px 2px 2px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
vertical-align: middle;
cursor: pointer;
}
#sitebar .treeitem-down:before {
transform: rotate(45deg);
}
b {
font-weight:bold;
}
#teamviewer a, #teamviewer a:active, #teamviewer a:hover, #teamviewer a:link, #teamviewer a:visited {
background-color: var(--knop);
border: none;
color: var(--knop-tekst);
padding: 15px 32px;
border-radius: 4px;
cursor: pointer;
}
#teamviewer a:hover {
background-color: var(--knop-hover);
}
#teamviewer a {
transition-duration: 0.4s;
}
#teamviewer a {
width:180px;
display:block;
text-align:center;
}
/* De downloadknoppen hebben hun eigen kleur en staan in beide thema's hetzelfde. */
#download a, #download a:active, #download a:hover, #download a:link, #download a:visited {
background-color: #008CBA;
border: none;
color: #FFFFFF;
padding: 15px 32px;
border-radius: 4px;
cursor: pointer;
}
#download a:hover {
background-color: #08AFE8;
}
#download a {
width:180px;
display:block;
text-align:center;
transition-duration: 0.4s;
}
#download_zip a, #download_zip a:active, #download_zip a:hover, #download_zip a:link, #download_zip a:visited {
background-color: #FFD455;
border: none;
color: #FFFFFF;
padding: 14px 27px;
border-radius: 0 4px 0 4px;
cursor: pointer;
}
#download_zip a:hover {
background-color: #FCCD00;
}
#download_zip a {
display:block;
text-align:center;
transition-duration: 0.4s;
}
/* Een programma en zijn zip als twee halve knoppen naast elkaar. */
#download_exe a, #download_exe a:active, #download_exe a:hover, #download_exe a:link, #download_exe a:visited {
background-color: #008CBA;
border: none;
color: #FFFFFF;
padding: 15px 26px;
border-radius: 4px 0px 4px 0px;
cursor: pointer;
margin: 0px;
}
#download_exe a:hover {
background-color: #08AFE8;
}
#download_exe a {
display:block;
text-align:center;
transition-duration: 0.4s;
}
/* Label boven de knoppen; script.js zet de plaats en breedte gelijk aan de zichtbare knoppen. */
#download_title {
background-color:#0078D4;
position:fixed;
top:0px;
border-radius: 4px;
text-align:center;
vertical-align:middle;
font-size:8pt;
line-height:1em;
color: #FFFFFF;
padding: 3px;
}
/* Smallere knoppen, anders blijft er voor de titel niets over.
Staat na de knoppen hierboven en noemt dezelfde selectors, anders gaan die voor. */
@media (max-width: 1000px) {
#teamviewer a, #teamviewer a:active, #teamviewer a:hover, #teamviewer a:link, #teamviewer a:visited,
#download a, #download a:active, #download a:hover, #download a:link, #download a:visited {
padding-left:0;
padding-right:0;
}
#teamviewer a {
width:140px;
}
#download a {
width:120px;
}
}
/* Klein scherm of telefoon/tablet (ook liggend breder dan 850px): geen downloadknoppen en geen TEAMVIEWER,
die zijn voor Windows. Het label DOWNLOAD verdwijnt vanzelf als er geen knop zichtbaar is (zie script.js). */
@media (max-width: 850px), (pointer: coarse) and (hover: none) {
#header #teamviewer, #header #download, #header #download_exe, #header #download_zip {
display:none;
}
}
tmp_img {
max-width: 100%;
height: auto;
}
#content a, #content a:visited {
color:var(--link);
}
/* Alleen zichtbaar op papier, bijvoorbeeld de link onder een video. */
.alleen-print {
display:none;
}
#printknop {
display:inline-flex;
vertical-align:middle;
margin-left:8px;
padding:5px;
background:transparent;
border:1px solid var(--rand);
border-radius:4px;
color:var(--kop);
cursor:pointer;
}
#printknop:hover {
background-color:var(--hover);
}
/* Afdrukken en opslaan als pdf: alleen de tekst, altijd licht. Staat achteraan zodat het vóór alles gaat. */
@media print {
@page {
margin:15mm;
}
:root, :root[data-theme], :root:not([data-theme]) {
color-scheme:light;
--tekst:#404040;
--kop:#171717;
--achtergrond:#fff;
--rand:#ccc;
--rand-tabel:#BBBBBB;
--rij-oneven:rgb(246, 248, 250);
--kop-tabel:rgb(217, 217, 217);
--code:#f6f8fa;
--hover:#f0f0f0;
--accent:#0078D4;
--link:#0066cc;
--knop:#9F9F9F;
--knop-hover:#C1C1C1;
--knop-tekst:#000000;
--schaduw:rgba(0, 0, 0, 0.15);
}
#header, #footer, #sitebar, #sitebar-rand, #themamenu, #content iframe, .kopieerknop {
display:none !important;
}
.alleen-print {
display:block;
}
#wrapper {
margin:0;
padding:0;
}
#content {
max-width:none;
}
/* De ruimte boven een kop is er voor de vaste kop op het scherm. */
h1, h2, h3, h4, h5 {
padding-top:0;
break-after:avoid;
}
#content > h1 {
break-before:page;
}
#content > h1:first-of-type {
break-before:auto;
}
img, tr, pre {
break-inside:avoid;
}
/* Op papier kan niet gescrold worden en is er geen kopieerknop. */
pre, .codeblok pre {
white-space:pre-wrap;
overflow-x:visible;
padding-top:12px;
}
/* Grijze tabelkoppen en -rijen ook afdrukken. */
#content th, #content tr {
print-color-adjust:exact;
-webkit-print-color-adjust:exact;
}
#content a[href^="http"]::after {
content:" (" attr(href) ")";
font-size:9pt;
word-break:break-all;
}
}