/* ╭───────────────────────────────────────────────────────╮ / │ _ _ _ _ _ _ │ / │ __ _ ___ ___ ___ ___ ___(_) |__ (_) (_) |_ _ _ │ / │ / _` |/ __/ __/ _ \/ __/ __| | '_ \| | | | __| | | | │ / │ | (_| | (_| (_| __/\__ \__ \ | |_) | | | | |_| |_| | │ / │ \__,_|\___\___\___||___/___/_|_.__/|_|_|_|\__|\__, | │ / │ |___/ │ / ╰───────────────────────────────────────────────────────╯ / 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-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; } } /* - 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; } }