site/_includes/styles/accessibility.css

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

/* - font settings - */

/* jetbrains mono */
:root:has(#font-jbm:checked) {
    --font-family: 'JetBrains Mono', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;

    .navbar .nav-base.nav-right.nav-systray span {
        margin: 0px -.1rem;
    }
}

/* atkinson hyperlegible next */
:root:has(#font-ahn:checked) {
    --font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}

/* inter */
:root:has(#font-inter:checked) {
    --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}

/* (browser) sans serif */
:root:has(#font-sans-serif:checked) {
    --font-family: sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui;
}

/* (browser) serif */
:root:has(#font-serif:checked) {
    --font-family: serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}

/* (browser) monospace */
:root:has(#font-monospace:checked) {
    --font-family: monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}

/* - misc - */

/* disable forced uncapitalization */
:root:has(#uncapitalization:checked) {
    body {
        text-transform: none !important;
    }
}

/* disable background gradient */
:root:has(#disable-bg:checked) {
    body {
        background: var(--background) !important;
    }
}

/* disable window animations 
   copy pasted from "@media (prefers-reduced-motion: reduce)" in base.css */
:root:has(#disable-animations:checked) {
    body {
        background: var(--background) !important;
        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;
    }
}

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