assets/css/component/a11y.css

/* a11y button */

#has-a11y {
    margin-right: auto;
}

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

#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);
}

/* hide input checkbox */
#a11y input[type=checkbox],
#a11y input[type=radio],
#bionReadSwitch {
    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;
    margin-bottom: 1ex;
}

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

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

/* credit to @mrozilla on codepen https://codepen.io/mrozilla/pen/OJJNjRb */
input + label > #lightSwitchIndicator {
    --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;
}

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

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

#setContrast legend {
    position: absolute;
    top: 0;
    padding: 1ex;
}

#setContrast label {
    -webkit-transition: 99ms;
       -moz-transition: 99ms;
         -o-transition: 99ms;
            transition: 99ms;
    border-radius: 1rem;
    padding: 3pt 7pt;
    font-size: 0.84em !important;
}

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

#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;
}

#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';
}

#setOpenDyslexic > label {
    display: flex;
    align-items: center;
}

#OpenDyslexicState {
    display: flex;
    margin-left: auto;
    border-radius: 1em;
    background: #80808080;
    width: 2.4em;
    height: 0.8em;
}

#OpenDyslexicIndicator {
    --tst: 0.5s ease-out;
    position: relative;
    align-self: center;
    border: 1pt solid #80808008;
    border-radius: 1em;
    box-shadow: var(--box-shadow-focus);
    background: #fff;
    padding: 6pt;
}

#OpenDyslexic:hover + label #OpenDyslexicIndicator,
#OpenDyslexic:focus + label #OpenDyslexicIndicator {
    --anm: grab 3s ease-out 3;
}

#OpenDyslexic:checked:hover + label #OpenDyslexicIndicator,
#OpenDyslexic:checked:focus + label #OpenDyslexicIndicator {
    --anm: unset;
}

#OpenDyslexic:checked + label #OpenDyslexicIndicator {
    left: 1.3em;
}

@keyframes grab {
    0%, 10%, 20%, 100% {
        left: 0;
    }
    5%, 15% {
        left: 3pt;
    }
}

@-webkit-keyframes grab {
    0%, 20%, 40%, 100% {
        left: 0;
    }
    10%, 30% {
        left: 3pt;
    }
}

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

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

#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: 700;
}

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

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

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

@media only screen and (max-width: 640px) {

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

}