Aangepaste CSS-stijlen voor Stylus

/* Outline */
h1,
h2,
h3,
h4,
h5,
h6,
[role = "heading"] {
    outline: 4px dashed #d91f11 !important;
}

/* Algemene stijl */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before,
[role = "heading"][aria-level = "1"]::before,
[role = "heading"][aria-level = "2"]::before,
[role = "heading"][aria-level = "3"]::before,
[role = "heading"][aria-level = "4"]::before,
[role = "heading"][aria-level = "5"]::before,
[role = "heading"][aria-level = "6"]::before {
    font-family: monospace;
    background: #d91f11 !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 9999;
}

/* Content per elementtype */
h1::before {
    content: "<h1>";
}
h2::before {
    content: "<h2>";
}
h3::before {
    content: "<h3>";
}
h4::before {
    content: "<h4>";
}
h5::before {
    content: "<h5>";
}
h6::before {
    content: "<h6>";
}
[role = "heading"][aria-level = "1"]::before {
    content: "<heading level 1>";
}
[role = "heading"][aria-level = "2"]::before {
    content: "<heading level 2>";
}
[role = "heading"][aria-level = "3"]::before {
    content: "<heading level 3>";
}
[role = "heading"][aria-level = "4"]::before {
    content: "<heading level 4>";
}
[role = "heading"][aria-level = "5"]::before {
    content: "<heading level 5>";
}
[role = "heading"][aria-level = "6"]::before {
    content: "<heading level 6>";
}

/* Fallback voor role="heading" zonder geldig aria-level */
[role = "heading"]:not([aria-level])::before,
[role = "heading"][aria-level = ""]::before {
    content: "<! role=heading zonder aria-level >";
    font-family: monospace;
    padding: 1px 4px;
    border-radius: 4px;
    background: #000 !important;
    color: #ffcc00 !important;
}

/* Lege koppen */
h1:empty::before,
h2:empty::before,
h3:empty::before,
h4:empty::before,
h5:empty::before,
h6:empty::before,
[role = "heading"]:empty::before {
    content: "<! lege kop >";
    font-family: monospace;
    padding: 1px 4px;
    border-radius: 4px;
    background: #000 !important;
    color: #ffcc00 !important;
}

/* Outline */
ul,
ol,
dl,
[role = "list"] {
    outline: 4px dashed #3c7d0e !important;
}

/* Algemene stijl */
ul::before,
ol::before,
dl::before,
[role = "list"]::before,
li::before,
dt::before,
dd::before {
    font-family: monospace;
    background: #3c7d0e !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Content per elementtype */
ul::before {
    content: "<ul>";
}
ol::before {
    content: "<ol>";
}
dl::before {
    content: "<dl>";
}
[role = "list"]::before {
    content: "<role=list>";
}
li::before {
    content: "<li>";
}
dt::before {
    content: "<dt>";
}
dd::before {
    content: "<dd>";
}

/* Fallback bij role="list" zonder bekende semantiek */
[role = "list"]:not(ul):not(ol):not(dl)::before {
    content: "<! role=list zonder semantiek >";
    font-family: monospace;
    padding: 1px 4px;
    border-radius: 4px;
    background: black !important;
    color: #ffcc00 !important;
}

/* Ongeldige children in ul/ol */
ul > *:not(li):not(script):not(template)::before,
ol > *:not(li):not(script):not(template)::before {
    content: "<! ul/ol bevat geen <li> >";
    font-family: monospace;
    padding: 1px 4px;
    border-radius: 4px;
    background: #000 !important;
    color: #ffcc00 !important;
}

/* Ongeldige children in dl */
dl > *:not(dt):not(dd):not(div):not(script):not(template)::before {
    content: "<! dl bevat geen <dt>/<dd> >";
    font-family: monospace;
    padding: 1px 4px;
    border-radius: 4px;
    background: #000 !important;
    color: #ffcc00 !important;
}

/* Lege lijst */
ul:empty::before,
ol:empty::before,
dl:empty::before {
    content: "<! lege lijst >";
    font-family: monospace;
    padding: 1px 4px;
    border-radius: 4px;
    background: #000 !important;
    color: #ffcc00 !important;
}

/* Outline */
table,
tr,
th,
td,
[role = "table"] {
    outline: 4px dashed #167b7d !important;
}

/* Algemene stijl */
table:before,
tr:before,
th:before,
td:before {
    background: #167b7d !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 9999;
}

/* Content per elementtype */
table::before {
    content: "<table>";
}
tr::before {
    content: "<tr>";
}
th::before {
    content: "<th>";
}
td::before {
    content: "<td>";
}

/* Lege cellen */
th:empty::before,
td:empty::before {
    content: "<! lege cel >";
    font-family: monospace;
    padding: 1px 4px;
    border-radius: 4px;
    background: #000 !important;
    color: #ffcc00 !important;
}

/* td direct in table */
table > td::before {
    content: "<! <td> mag niet direct in <table> >";
    font-family: monospace;
    padding: 1px 4px;
    border-radius: 4px;
    background: #000 !important;
    color: #ffcc00 !important;
}

/* th/td buiten tr */
table th:not(tr *),
table td:not(tr *) {
    outline: 4px solid #ffcc00 !important;
}
table th:not(tr *)::before,
table td:not(tr *)::before {
    content: "<! <th>/<td> buiten <tr> >";
    font-family: monospace;
    padding: 1px 4px;
    border-radius: 4px;
    background: #000 !important;
    color: #ffcc00 !important;
}

/* Outline */
p,
strong,
em,
blockquote,
code,
abbr,
mark,
q,
samp,
kbd {
    outline: 4px dashed #067a91 !important;
}

/* Algemene stijl */
p::before,
strong::before,
em::before,
blockquote::before,
code::before,
abbr::before,
mark::before,
q::before,
samp::before,
kbd::before {
    font-family: monospace;
    background: #067a91 !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 9999;
}

/* Content per elementtype */
p::before {
    content: "<p>";
}
strong::before {
    content: "<strong>";
    font-weight: normal;
}
em::before {
    content: "<em>";
    font-style: normal;
}
blockquote::before {
    content: "<blockquote>";
}
code::before {
    content: "<code>";
}
abbr::before {
    content: "<abbr>";
}
mark::before {
    content: "<mark>";
}
q::before {
    content: "<q>";
}
samp::before {
    content: "<samp>";
}
kbd::before {
    content: "<kbd>";
}

/* Outline */
a[href],
[role = "link"],
button,
[role = "button"] {
    outline: 4px dashed #0073ba !important;
}

/* Algemene stijl */
a[href]::before,
button::before,
[role = "link"]::before,
[role = "button"]::before {
    font-family: monospace;
    background: #0073ba !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 9999;
}

/* Content per elementtype */
a[href]::before {
    content: "<a>";
}
button::before {
    content: "<button>";
}
[role = "link"]::before {
    content: '<div role="link">';
}
[role = "button"]::before {
    content: '<div role="button">';
}

/* Outline */
header,
[role = "banner"],
nav,
[role = "navigation"],
main,
[role = "main"],
aside,
[role = "complementary"],
section,
[role = "region"],
article,
[role = "article"],
footer,
[role = "contentinfo"] {
    outline: 4px dashed #cc1d92 !important;
}

/* Algemene stijl */
header::before,
[role = "banner"]::before,
nav::before,
[role = "navigation"]::before,
main::before,
[role = "main"]::before,
aside::before,
[role = "complementary"]::before,
section::before,
[role = "region"]::before,
article::before,
[role = "article"]::before,
footer::before,
[role = "contentinfo"]::before {
    font-family: monospace;
    background: #cc1d92 !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 9999;
}

/* Content per elementtype */
header::before {
    content: "<header>";
}
[role = "banner"]::before {
    content: "<role=banner>";
}
nav::before {
    content: "<nav>";
}
[role = "navigation"]::before {
    content: "<role=navigation>";
}
main::before {
    content: "<main>";
}
[role = "main"]::before {
    content: "<role=main>";
}
aside::before {
    content: "<aside>";
}
[role = "complementary"]::before {
    content: "<role=complementary>";
}
section::before {
    content: "<section>";
}
[role = "region"]::before {
    content: "<role=region>";
}
article::before {
    content: "<article>";
}
[role = "article"]::before {
    content: "<role=article>";
}
footer::before {
    content: "<footer>";
}
[role = "contentinfo"]::before {
    content: "<role=contentinfo>";
}

/* Lege landmarks */
header:empty::before,
nav:empty::before,
main:empty::before,
aside:empty::before,
section:empty::before,
article:empty::before,
footer:empty::before,
[role]:empty::before {
    content: "<! lege landmark >";
    font-family: monospace;
    padding: 1px 4px;
    border-radius: 4px;
    background: #000 !important;
    color: #ffcc00 !important;
}

/* Dubbele main of banner */
main + main::before,
[role = "main"] + [role = "main"]::before,
header + header::before,
[role = "banner"] + [role = "banner"]::before {
    content: "<! dubbele landmark >";
    font-family: monospace;
    padding: 1px 4px;
    border-radius: 4px;
    background: #000 !important;
    color: #ffcc00 !important;
}

[role=toolbar],
[role=tooltip],
[role=feed],
[role=math],
[role=presentation],
[role=none],
[role=note],

[role=application],
[role=article],
[role=cell],
[role=columnheader],
[role=definition],
[role=directory],
[role=document],
[role=figure],
[role=group],
[role=heading],
[role=img],
[role=list],
[role=listitem],
[role=meter],
[role=row],
[role=rowgroup],
[role=rowheader],
[role=separator],
[role=table],
[role=term],

[role=alertdialog],
[role=dialog],

[role=banner],
[role=complementary],
[role=contentinfo],
[role=form],
[role=main],
[role=navigation],
[role=region],
[role=search],

[role=scrollbar],
[role=searchbox],
[role=separator],
[role=slider],
[role=spinbutton],
[role=switch],
[role=tab],
[role=tabpanel],
[role=treeitem],

[role=combobox],
[role=menu],
[role=menubar],
[role=tablist],
[role=tree],
[role=treegrid],

[role=alert],
[role=log],
[role=marquee],
[role=status],
[role=timer],

[aria-busy],
[aria-live],
[aria-relevant],
[aria-atomic],

[aria-autocomplete],
[aria-checked],
[aria-disabled],
[aria-errormessage],
[aria-expanded],
[aria-haspopup],
[aria-hidden],
[aria-invalid],
[aria-label],
[aria-level],
[aria-modal],
[aria-multiline],
[aria-multiselectable],
[aria-orientation],
[aria-placeholder],
[aria-pressed],
[aria-readonly],
[aria-required],
[aria-selected],
[aria-sort],
[aria-valuemax],
[aria-valuemin],
[aria-valuenow],
[aria-valuetext],

[aria-activedescendant],
[aria-colcount],
[aria-colindex],
[aria-colspan],
[aria-controls],
[aria-describedby],
[aria-description],
[aria-details],
[aria-errormessage],
[aria-flowto],
[aria-labelledby],
[aria-owns],
[aria-posinset],
[aria-rowcount],
[aria-rowindex],
[aria-rowspan],
[aria-setsize],

[aria-dropeffect],
[aria-grabbed]{
    outline: 4px dashed #8f49de !important;
}

Blauw

a:focus,
*:focus {
    outline: 4px solid royalblue !important;
    outline-offset: 1px !important;
}

Groen

a:focus,
*:focus {
    outline: 4px solid limegreen !important;
    outline-offset: 1px !important;
}

Rood

a:focus,
*:focus {
    outline: 4px solid crimson !important;
    outline-offset: 1px !important;
}

* {
    line-height: 1.5 !important;
    letter-spacing: .12em !important;
    word-spacing: .16em !important;
}
p {
    margin-bottom: 2em !important;
}