site/_includes/styles/accessibility.css

/* ╭───────────────────────────────────────────────────────╮
/  │                              _ _     _ _ _ _          │
/  │   __ _  ___ ___ ___  ___ ___(_) |__ (_) (_) |_ _   _  │
/  │  / _` |/ __/ __/ _ \/ __/ __| | '_ \| | | | __| | | | │
/  │ | (_| | (_| (_|  __/\__ \__ \ | |_) | | | | |_| |_| | │
/  │  \__,_|\___\___\___||___/___/_|_.__/|_|_|_|\__|\__, | │
/  │                                                |___/  │
/  ╰───────────────────────────────────────────────────────╯
/  accessibility - choosable accessibility settings */

:root {
    color-scheme: light dark; /* by default, automatically use light mode */

    /* theme selector */
    &:has(#theme-light:checked) {
        color-scheme: light !important;
    }

    &:has(#theme-dark:checked) {
        color-scheme: dark !important;
    }

    /* font selector */
    &:has(#font-monospace:checked) { /* monospace */
        --font-family: monospace, system-ui, -apple-system, sans-serif;
    }

    &:has(#font-system:checked) { /* system ui*/
        --font-family: system-ui, -apple-system, sans-serif;
    }

    &:has(#font-sserif:checked) { /* sans seris */
        --font-family: sans-serif, 'Segoe UI', system-ui, -apple-system;
    }

    &:has(#font-serif:checked) { /* serif */
        --font-family: serif, sans-serif, system-ui, -apple-system;
    }

    /* appearance */
    &:has(#uncapitalization:checked) { /* disable forced uncapitalization */
        body {
            text-transform: none !important;
        }
    }
    
    &:has(#disable-bg:checked) { /* disable background gradient */
        body {
            background: var(--background);

            bg-gradient, bg-image {
                display: none !important;
            }
        }
    }

    &:has(#disable-animations:checked) { /* disable site animations */
        body {
            animation: unset !important;
            -moz-animation: unset !important;
            -webkit-animation: unset !important;
        }

        /* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
        * {
            transition: none !important;
            animation: unset !important;
            -moz-animation: unset !important;
            -webkit-animation: unset !important;
        }

        /* fedi icon on /me should keep its animation (temp, find a better solution later) */
        .fedi-icon {
            animation: opacity-blink 4s infinite !important;
        }
        .fedi-icon-2 {
            animation: opacity-blink-reverse 4s infinite !important;
        }
    }

    &:has(#disable-alttext:checked) { /* disable custom alt text popup */
        .alt-popup {
            display: none !important;
        }
    }
}

/* reduce animations on browser preference */
@media (prefers-reduced-motion: reduce) { /* copy-pasted from disable animations option */
    body {
        animation: unset !important;
        -moz-animation: unset !important;
        -webkit-animation: unset !important;
    }

    /* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
    * {
        transition: none !important;
        animation: unset !important;
        -moz-animation: unset !important;
        -webkit-animation: unset !important;
    }

    /* fedi icon on /me should keep its animation (temp, find a better solution later) */
    .fedi-icon {
        animation: opacity-blink 4s infinite !important;
    }

    .fedi-icon-2 {
        animation: opacity-blink-reverse 4s infinite !important;
    }
}