Stijlen in Stylus

/*  Outline stijlen  */
h1,
h2,
h3,
h4,
h5,
h6,
[role="heading"] {
    outline: 2px dashed #d91f11 !important;
    outline-offset: 2px !important;
}
/*  Label stijlen  */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before,
[role="heading"]::before {
    font-family: monospace;
    font-size: 13px !important;
    background: #d91f11 !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
}
/*  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 met aria-level  */
[role="heading"][aria-level]::before {
    content: "<heading level " attr(aria-level) ">";
}

/*  Outline stijlen  */
ul,
ol,
dl,
[role="list"],
li,
[role="listitem"],
dt,
dd {
    outline: 2px dashed #946613 !important;
    outline-offset: 2px !important;
}
/*  Label stijlen  */
ul::before,
ol::before,
dl::before,
[role="list"]::before,
li::before,
[role="listitem"]::before,
dt::before,
dd::before {
    font-family: monospace;
    font-size: 13px !important;
    background: #946613 !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
}
/*  Content per element  */
ul::before {
    content: "<ul>";
}
ol::before {
    content: "<ol>";
}
dl::before {
    content: "<dl>";
}
[role="list"]::before {
    content: "<role=list>";
}
li::before {
    content: "<li>";
}
[role="listitem"]::before {
    content: "<role=listitem>";
}
dt::before {
    content: "<dt>";
}
dd::before {
    content: "<dd>";
}
/*  Geavanceerde content (met attributen)  */
ol[type]::before {
    content: "<ol type=" attr(type) ">";
}
ol[start]::before {
    content: "<ol start=" attr(start) ">";
}
[role="list"][aria-label]::before {
    content: "<role=list aria-label=" attr(aria-label) ">";
}
[role="list"][aria-labelledby]::before {
    content: "<role=list aria-labelledby=" attr(aria-labelledby) ">";
}

/*  Outline stijlen  */
table,
[role="table"],
tr,
[role="row"],
th,
[role="columnheader"],
[role="rowheader"],
td,
[role="cell"],
[role="gridcell"],
caption,
thead,
tbody,
tfoot,
colgroup,
col {
    outline: 2px dashed #077d55 !important;
    outline-offset: 2px !important;
}
/*  Label stijlen  */
table::before,
[role="table"]::before,
tr::before,
[role="row"]::before,
th::before,
[role="columnheader"]::before,
[role="rowheader"]::before,
td::before,
[role="cell"]::before,
[role="gridcell"]::before,
caption::before,
thead::before,
tbody::before,
tfoot::before {
    font-family: monospace;
    font-size: 13px !important;
    background: #077d55 !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
}
/*  Content per element  */
table::before {
    content: "<table>";
}
[role="table"]::before {
    content: "<role=table>";
}
tr::before {
    content: "<tr>";
}
[role="row"]::before {
    content: "<role=row>";
}
th::before {
    content: "<th>";
}
[role="columnheader"]::before {
    content: "<role=columnheader>";
}
[role="rowheader"]::before {
    content: "<role=rowheader>";
}
td::before {
    content: "<td>";
}
[role="cell"]::before {
    content: "<role=cell>";
}
[role="gridcell"]::before {
    content: "<role=gridcell>";
}
caption::before {
    content: "<caption>";
}
thead::before {
    content: "<thead>";
}
tbody::before {
    content: "<tbody>";
}
tfoot::before {
    content: "<tfoot>";
}
/*  Geavanceerde content (met attributen)  */
th[scope]::before {
    content: "<th scope=" attr(scope) ">";
}
th[id]::before {
    content: "<th id=" attr(id) ">";
}
td[headers]::before {
    content: "<td headers=" attr(headers) ">";
}
th[colspan]::before {
    content: "<th colspan=" attr(colspan) ">";
}
td[colspan]::before {
    content: "<td colspan=" attr(colspan) ">";
}
th[rowspan]::before {
    content: "<th rowspan=" attr(rowspan) ">";
}
td[rowspan]::before {
    content: "<td rowspan=" attr(rowspan) ">";
}

/*  Tekst outline stijlen  */
p,
blockquote,
pre,
code,
kbd,
samp,
var,
strong,
em,
b,
i,
u,
s,
small,
sub,
sup,
mark,
ins,
del,
abbr,
dfn,
time,
q,
cite {
    outline: 2px dashed #067a91 !important;
    outline-offset: 2px !important;
}
/*  Interactieve elementen outline stijlen  */
a[href],
[role="link"],
button,
[role="button"] {
    outline: 2px dashed #0073ba !important;
    outline-offset: 2px !important;
}
/*  Tekst label stijlen  */
p::before,
blockquote::before,
pre::before,
code::before,
kbd::before,
samp::before,
var::before,
strong::before,
em::before,
b::before,
i::before,
u::before,
s::before,
small::before,
sub::before,
sup::before,
mark::before,
ins::before,
del::before,
abbr::before,
dfn::before,
time::before,
q::before,
cite::before {
    font-family: monospace;
    font-size: 13px !important;
    background: #067a91 !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
    font-weight: normal !important;
    font-style: normal !important;
}
/*  Interactieve label stijlen  */
a[href]::before,
[role="link"]::before,
button::before,
[role="button"]::before {
    font-family: monospace;
    font-size: 13px !important;
    background: #0073ba !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
}
/*  Content per element - tekst  */
p::before {
    content: "<p>";
}
blockquote::before {
    content: "<blockquote>";
}
pre::before {
    content: "<pre>";
}
code::before {
    content: "<code>";
}
kbd::before {
    content: "<kbd>";
}
samp::before {
    content: "<samp>";
}
var::before {
    content: "<var>";
}
strong::before {
    content: "<strong>";
}
em::before {
    content: "<em>";
}
b::before {
    content: "<b>";
}
i::before {
    content: "<i>";
}
u::before {
    content: "<u>";
}
s::before {
    content: "<s>";
}
small::before {
    content: "<small>";
}
sub::before {
    content: "<sub>";
}
sup::before {
    content: "<sup>";
}
mark::before {
    content: "<mark>";
}
ins::before {
    content: "<ins>";
}
del::before {
    content: "<del>";
}
abbr::before {
    content: "<abbr>";
}
dfn::before {
    content: "<dfn>";
}
time::before {
    content: "<time>";
}
q::before {
    content: "<q>";
}
cite::before {
    content: "<cite>";
}
/*  Content per element - interactief  */
a[href]::before {
    content: "<a>";
}
[role="link"]::before {
    content: "<role=link>";
}
button::before {
    content: "<button>";
}
[role="button"]::before {
    content: "<role=button>";
}
/*  Geavanceerde content (met attributen)  */
a[href][target]::before {
    content: "<a target=" attr(target) ">";
}
a[href][download]::before {
    content: "<a download>";
}
button[type]::before {
    content: "<button type=" attr(type) ">";
}
time[datetime]::before {
    content: "<time datetime=" attr(datetime) ">";
}
abbr[title]::before {
    content: "<abbr title=" attr(title) ">";
}
blockquote[cite]::before {
    content: "<blockquote cite=" attr(cite) ">";
}

/*  Outline stijlen  */
header,
[role="banner"],
nav,
[role="navigation"],
main,
[role="main"],
aside,
[role="complementary"],
[role="region"],
article,
[role="article"],
footer,
[role="contentinfo"],
/* Section alleen als het een accessible name heeft */
section[aria-label],
section[aria-labelledby],
section[title],
/* Extra landmarks */
[role="search"],
[role="form"],
[role="application"] {
    outline: 2px dashed #8f49de !important;
    outline-offset: 2px !important;
}
/*  Label stijlen  */
header::before,
[role="banner"]::before,
nav::before,
[role="navigation"]::before,
main::before,
[role="main"]::before,
aside::before,
[role="complementary"]::before,
section[aria-label]::before,
section[aria-labelledby]::before,
section[title]::before,
[role="region"]::before,
article::before,
[role="article"]::before,
footer::before,
[role="contentinfo"]::before,
[role="search"]::before,
[role="form"]::before,
[role="application"]::before {
    font-family: monospace;
    font-size: 13px !important;
    background: #8f49de !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
}
/*  Content per element  */
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[aria-label]::before,
section[aria-labelledby]::before,
section[title]::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>";
}
[role="search"]::before {
    content: "<role=search>";
}
[role="form"]::before {
    content: "<role=form>";
}
[role="application"]::before {
    content: "<role=application>";
}
/*  Geavanceerde content (met attributen)  */
/*  Content met aria-label  */
header[aria-label]::before {
    content: "<header> aria-label=" attr(aria-label);
}
[role="banner"][aria-label]::before {
    content: "<role=banner> aria-label=" attr(aria-label);
}
nav[aria-label]::before {
    content: "<nav> aria-label=" attr(aria-label);
}
[role="navigation"][aria-label]::before {
    content: "<role=navigation> aria-label=" attr(aria-label);
}
main[aria-label]::before {
    content: "<main> aria-label=" attr(aria-label);
}
[role="main"][aria-label]::before {
    content: "<role=main> aria-label=" attr(aria-label);
}
aside[aria-label]::before {
    content: "<aside> aria-label=" attr(aria-label);
}
[role="complementary"][aria-label]::before {
    content: "<role=complementary> aria-label=" attr(aria-label);
}
section[aria-label]::before {
    content: "<section> aria-label=" attr(aria-label);
}
[role="region"][aria-label]::before {
    content: "<role=region> aria-label=" attr(aria-label);
}
article[aria-label]::before {
    content: "<article> aria-label=" attr(aria-label);
}
[role="article"][aria-label]::before {
    content: "<role=article> aria-label=" attr(aria-label);
}
footer[aria-label]::before {
    content: "<footer> aria-label=" attr(aria-label);
}
[role="contentinfo"][aria-label]::before {
    content: "<role=contentinfo> aria-label=" attr(aria-label);
}
[role="search"][aria-label]::before {
    content: "<role=search> aria-label=" attr(aria-label);
}
[role="form"][aria-label]::before {
    content: "<role=form> aria-label=" attr(aria-label);
}
[role="application"][aria-label]::before {
    content: "<role=application> aria-label=" attr(aria-label);
}
/*  Content met aria-labelledby  */
header[aria-labelledby]::before {
    content: "<header> aria-labelledby=" attr(aria-labelledby);
}
[role="banner"][aria-labelledby]::before {
    content: "<role=banner> aria-labelledby=" attr(aria-labelledby);
}
nav[aria-labelledby]::before {
    content: "<nav> aria-labelledby=" attr(aria-labelledby);
}
[role="navigation"][aria-labelledby]::before {
    content: "<role=navigation> aria-labelledby=" attr(aria-labelledby);
}
main[aria-labelledby]::before {
    content: "<main> aria-labelledby=" attr(aria-labelledby);
}
[role="main"][aria-labelledby]::before {
    content: "<role=main> aria-labelledby=" attr(aria-labelledby);
}
aside[aria-labelledby]::before {
    content: "<aside> aria-labelledby=" attr(aria-labelledby);
}
[role="complementary"][aria-labelledby]::before {
    content: "<role=complementary> aria-labelledby=" attr(aria-labelledby);
}
section[aria-labelledby]::before {
    content: "<section> aria-labelledby=" attr(aria-labelledby);
}
[role="region"][aria-labelledby]::before {
    content: "<role=region> aria-labelledby=" attr(aria-labelledby);
}
article[aria-labelledby]::before {
    content: "<article> aria-labelledby=" attr(aria-labelledby);
}
[role="article"][aria-labelledby]::before {
    content: "<role=article> aria-labelledby=" attr(aria-labelledby);
}
footer[aria-labelledby]::before {
    content: "<footer> aria-labelledby=" attr(aria-labelledby);
}
[role="contentinfo"][aria-labelledby]::before {
    content: "<role=contentinfo> aria-labelledby=" attr(aria-labelledby);
}
[role="search"][aria-labelledby]::before {
    content: "<role=search> aria-labelledby=" attr(aria-labelledby);
}
[role="form"][aria-labelledby]::before {
    content: "<role=form> aria-labelledby=" attr(aria-labelledby);
}
[role="application"][aria-labelledby]::before {
    content: "<role=application> aria-labelledby=" attr(aria-labelledby);
}
/*  Content met title attribuut voor section  */
section[title]::before {
    content: "<section> title=" attr(title);
}

/*  Outline stijlen  */

[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="caption"],
[role="code"],
[role="emphasis"],
[role="generic"],
[role="paragraph"],
[role="strong"],
[role="subscript"],
[role="superscript"],

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

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

[role="button"],
[role="checkbox"],
[role="gridcell"],
[role="link"],
[role="menuitem"],
[role="menuitemcheckbox"],
[role="menuitemradio"],
[role="option"],
[role="progressbar"],
[role="radio"],
[role="scrollbar"],
[role="searchbox"],
[role="slider"],
[role="spinbutton"],
[role="switch"],
[role="tab"],
[role="tabpanel"],
[role="textbox"],
[role="treeitem"],

[role="combobox"],
[role="grid"],
[role="listbox"],
[role="menu"],
[role="menubar"],
[role="radiogroup"],
[role="tablist"],
[role="tree"],
[role="treegrid"],

[role="alert"],
[role="log"],
[role="marquee"],
[role="status"],
[role="timer"],
/*  aria-attributen  */
[aria-busy],
[aria-live],
[aria-relevant],
[aria-atomic],
[aria-braillelabel],
[aria-brailleroledescription],
[aria-current],
[aria-describedby],
[aria-description],
[aria-details],
[aria-disabled],
[aria-hidden],
[aria-keyshortcuts],
[aria-label],
[aria-labelledby],
[aria-roledescription],
[aria-autocomplete],
[aria-checked],
[aria-errormessage],
[aria-expanded],
[aria-haspopup],
[aria-invalid],
[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-colindextext],
[aria-colspan],
[aria-controls],
[aria-flowto],
[aria-owns],
[aria-posinset],
[aria-rowcount],
[aria-rowindex],
[aria-rowindextext],
[aria-rowspan],
[aria-setsize],
[aria-dropeffect],
[aria-grabbed] {
    outline: 2px dashed #fa87d4 !important;
    outline-offset: 2px !important;
}
/*  Label stijlen  */
[role]::before,
[aria-label]::before,
[aria-labelledby]::before,
[aria-describedby]::before,
[aria-live]::before,
[aria-hidden]::before,
[aria-expanded]::before,
[aria-checked]::before,
[aria-selected]::before,
[aria-pressed]::before,
[aria-current]::before,
[aria-invalid]::before,
[aria-required]::before,
[aria-disabled]::before {
    font-family: monospace;
    font-size: 13px !important;
    background: #fa87d4 !important;
    color: #000 !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
}
/*  Content per role  */
[role="button"]::before {
    content: "<role=button>";
}
[role="link"]::before {
    content: "<role=link>";
}
[role="checkbox"]::before {
    content: "<role=checkbox>";
}
[role="radio"]::before {
    content: "<role=radio>";
}
[role="textbox"]::before {
    content: "<role=textbox>";
}
[role="combobox"]::before {
    content: "<role=combobox>";
}
[role="listbox"]::before {
    content: "<role=listbox>";
}
[role="option"]::before {
    content: "<role=option>";
}
[role="tab"]::before {
    content: "<role=tab>";
}
[role="tabpanel"]::before {
    content: "<role=tabpanel>";
}
[role="dialog"]::before {
    content: "<role=dialog>";
}
[role="alert"]::before {
    content: "<role=alert>";
}
[role="status"]::before {
    content: "<role=status>";
}
[role="progressbar"]::before {
    content: "<role=progressbar>";
}
[role="slider"]::before {
    content: "<role=slider>";
}
[role="menu"]::before {
    content: "<role=menu>";
}
[role="menuitem"]::before {
    content: "<role=menuitem>";
}
[role="tree"]::before {
    content: "<role=tree>";
}
[role="treeitem"]::before {
    content: "<role=treeitem>";
}
/*  Geavanceerde content (met waarden)  */
[aria-label]::before {
    content: "aria-label=" attr(aria-label);
}
[aria-labelledby]::before {
    content: "aria-labelledby=" attr(aria-labelledby);
}
[aria-describedby]::before {
    content: "aria-describedby=" attr(aria-describedby);
}
[aria-live]::before {
    content: "aria-live=" attr(aria-live);
}
[aria-expanded="true"]::before {
    content: "aria-expanded=true";
    background: #88dba8 !important;
}
[aria-expanded="false"]::before {
    content: "aria-expanded=false";
    background: #fcbc97 !important;
}
[aria-checked="true"]::before {
    content: "aria-checked=true";
    background: #88dba8 !important;
}
[aria-checked="false"]::before {
    content: "aria-checked=false";
    background: #fcbc97 !important;
}
[aria-selected="true"]::before {
    content: "aria-selected=true";
    background: #88dba8 !important;
}
[aria-selected="false"]::before {
    content: "aria-selected=false";
    background: #fcbc97 !important;
}
[aria-hidden="true"]::before {
    content: "aria-hidden=true";
    background: #c1ccd6 !important;
    color: white !important;
}
[aria-hidden="false"]::before {
    content: "aria-hidden=false";
    background: #fcbc97 !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;
}