assets/css/component/a11y.css

/* this style is used inline in accessibility.js */

/*  focus mode */

body.focus > header,
body.focus > main > header,
body.focus #contentinfo,
body.focus #discussion-starter,
body.focus #main-footer,
body.focus #background-footer {
    display:none;
}

body.focus > footer {
    position: unset;
}

body.focus #dwclock {
    opacity: 0.1;
}

/* a11y button */
#has-a11y {
    margin-right: auto;
}

#has-a11y-summary {
    padding: .6ex 1ex;
    font-weight: 550;
}

#has-a11y-summary::before{
    font-family: 'base-ui';
    font-weight: 400;
    content: '\e900';
}

#has-a11y[open] #a11y {
    --anm: expand 99ms forwards;
    --tso: bottom;
}

/* a11y container */
#a11y {
    display: flex;
    position: fixed;
    bottom: calc(1rem + var(--vfoot));
    flex-direction: column;
    margin: 0;
    border: var(--border);
    border-radius: 1ex;
    background: var(--bg);
    padding: 1rem;
    max-height: calc(100vh - var(--vhead) - var(--vfoot) - 2rem );
    overflow-y: auto;
    gap: var(--medskip);
}

/* order */
#optimizeSR {
    order: 6;
}

#setFontSize {
    order: 3;
}

#setBaselineStretch {
    display: none;
    order: 4;
}

main#page + footer #setBaselineStretch,
main#page + footer #useBionRead {
    display: block;
}

#setOpenDyslexic {
    order: 5;
}

/* hide input checkbox */
#a11y input[type=checkbox],
#a11y input[type=radio],
#bionReadSwitch,
#defocusAuxElement {
    position: absolute;
    top: -100vh;
}

#a11y select,
#a11y input[type=range],
#setColorScheme label,
#setOpenDyslexic,
button {
    cursor: pointer;
}

/* range */
label.range {
    display: flex;
    flex-direction: row-reverse;
}

label.range > input {
    flex: 1;
    accent-color: var(--ac);
}

label.range > output {
    width: 4rem;
    text-align: center;
    color: var(--ac);
    font: 700 var(--large) var(--sf), sans-serif;
}

#setColorScheme {
    display: flex;
    flex-direction: row;
    align-items: center;
    order: 1;
    margin-bottom: 1ex;
}

/* lightswitch */
#lightSwitch + label {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    border-radius: 0.5ex;
    padding: 1ex;
    width: 4rem;
    gap: 1ex;
}

#lightSwitch + label:hover,
#lightSwitch:focus + label,
#setContrast input:hover + label {
    background: var(--g18s);
    color: var(--ac);
}

/* credit to @mrozilla on codepen https://codepen.io/mrozilla/pen/OJJNjRb */
#lightSwitch + label::before {
    --ray-size: calc(var(--size) * -0.4);
    --offset-orthogonal: calc(var(--size) * 0.65);
    --offset-diagonal: calc(var(--size) * 0.45);
    --tsf: scale(0.75);
    --size: 1.414em;
    display: block;
    outline: none;
    border-radius: 999px;
    box-shadow: inset 0 0 0 var(--size),
        calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
        var(--offset-orthogonal) 0 0 var(--ray-size),
        0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
        0 var(--offset-orthogonal) 0 var(--ray-size),
        calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
        var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),
        calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),
        var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size);
    width: var(--size);
    height: var(--size);
    color: #ffaa00;
    content: '';
}

#lightSwitch:checked + label::before {
    --tsf: scale(1);
    box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
}

#lightSwitch + label::after {
    color: var(--fg);
    font-size: inherit;
    font-weight: 550;
}

/* contrast */
#setContrast {
    display: flex;
    position: relative;
    justify-content: center;
    margin: 0 0 0 1ex;
    border: none;
    border-left: var(--bound);
    padding: 2em 0 0 1ex;
}

#setContrast legend {
    position: absolute;
    top: 0.2em;
}

#setContrast > div {
    display: flex;
    padding: 2pt;
    gap: 2pt;
}

#setContrast label {
    --tst: 99ms;
    border-radius: 1rem;
    padding: 1pt 5pt;
    font-size: 0.84em !important;
}

#setContrast input:checked + label {
    background: var(--fg);
    color: var(--bg);
    box-shadow: var(--box-shadow);
}

#setContrast input + label::before {
    font-family:'base-ui';
    content: '\e904\a0';
}

#setContrast input:checked + label::before {
    content: '\e903\a0';
}

/* color palette */
#setColorPalette {
    align-items: baseline;
    order: 2;
}

#setColorPalette > *,
#setOpenDyslexic > * {
    padding: 1ex 0;
}

#colorPalette {
    flex: 1;
    margin-left: 0.5ex;
    border: unset;
    border-radius: 1rem;
    background: var(--bg);
    padding: 0.5ex 1.25ex;
    color: var(--fg);
    font: inherit !important;
}

/* font */
#baselineStretchState::after {
    font-size: 0.8em;
    content: '×';
}

#fontSizeState::after {
    font-size: 0.8em;
    content: 'pt';
}

input.toggle + label {
    display: flex;
    position: relative;
    padding-right: 3.6rem;
    align-items: center;
    font-weight: bold;
}

input.toggle:focus + label::after {
    background: var(--ac);
}

input.toggle + label::before,
input.toggle + label::after {
    position: absolute;
    right: 0;
    border-radius: 2rem;
    box-shadow: var(--box-shadow-inset);
    background: #80808080;
    width: 2.4rem;
    height: 0.8rem;
    content: "";
}

input.toggle + label::after {
    --tst: 0.5s ease-out;
    right: 1.2rem;
    border: 1pt solid #80808008;
    box-shadow: var(--box-shadow);
    background: #fff;
    width: 1.2rem;
    height: 1.2rem;
}

input.toggle:checked + label::after {
    right: 0;
}

input.toggle:checked + label::before {
    opacity: 0.8;
    background: var(--ac);
}

/* menu */
#a11y-menu {
    display: inline-flex;
    align-items: center;
    order: 7;
    margin: 0;
    padding: 0;
    width: 100%;
    gap: 1ex;
}

#a11y-menu > button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    border: unset;
}

#a11y-menu > .has-aria-label {
    background: unset;
    color: var(--fg);
}

#a11y-menu > .has-aria-label::before {
    margin: auto;
    padding: 0.25rem 0.5rem;
}

#a11y-menu .has-aria-label:after {
    font-size: 0.7em;
}

#resetButton::before {
    font-family: 'base-ui';
    content: '\e90f';
}

#closeButton::before {
    font-family: 'base-ui';
    content: '\e913';
}

#bionReadButton,
#saveButton {
    flex: 1;
    margin-left: auto;
    cursor: pointer;
}

/* bionRead */
b.k {
    vertical-align: baseline;
    letter-spacing: var(--bion);
    color: var(--off);
    font-weight: 400 !important;
    -webkit-text-stroke: var(--bion) var(--off);
    font-synthesis: weight;
}

#useBionRead {
    display: none;
    margin: auto;
    letter-spacing: 0.1em;
    font-size: var(--footnotesize);
}

legend,
.has-aria-label-top:before,
#setColorPalette > label,
input + label > span {
    font-weight: 550;
}

#setContrast input + label > span {
    font-weight: 400;
}

#bionReadButton > span {
    font-weight: 400;
    text-transform: uppercase;
}

#noLocalStorage {
    order: 7;
    margin: auto;
    border-top: var(--bound);
    padding-top: 1rem;
    max-width: 20rem;
}

#focusMode {
    position: fixed;
    bottom: calc(var(--vfoot) + 1rem);
    padding: 3pt 6pt;
    display: flex;
}

#focusModeButton {
    opacity: 0.7;
    position: relative;
}

label:hover .t,
label:focus .t {
    position: unset;
    visibility: visible;
    margin-left: 2rem;
}

input:checked + #focusModeButton {
    opacity: 0.5;
}

/* optimize */

#setContrast input:checked:focus + label,
#OpenDyslexic:checked + label #OpenDyslexicState,
#saveButton:hover,
#saveButton:focus,
#bionReadSwitch:hover + label,
#bionReadSwitch:focus + label,
#bionReadSwitch:active + label,
#bionReadSwitch:checked + label {
    background: var(--ac);
}

#has-a11y[open] > #has-a11y-summary,
#lightSwitch:hover + label span::after,
#lightSwitch:focus + label span::after,
#a11y-menu > .has-aria-label:focus,
#a11y-menu > .has-aria-label:hover {
    color: var(--ac);
}

/* sr user */

body.sr-user {
    --rm: monospace;
    --sf: monospace;
    --tt: monospace;
}

menu.srm--a a::before {
    display: none;
}

menu.srm--a .srt,
.share.srm--a .srt {
    padding: 1ex;
    margin: 2pt;
}

.srm--a + #back::before {
    content: unset;
}

menu.srm--a + #back {
    padding: 6pt;
}

#has-search > summary.srm--a,
#has-more-menu > summary.srm--a {
    width: unset;
    padding: 0 5pt;
}

#to-top .t,
#has-search > summary.srm--a::before {
    display: none;
}

menu.srm--a a,
#to-top.srm--a {
    width: unset;
    font-size: 1rem;
    line-height: 1;
}

img[data-src],
.srs[data-style] {
    border: var(--bound);
}

@media (max-width: 640px) {

    #has-a11y > summary > span {
        display: none;
    }

}