site/_includes/styles/accessibility.css
Ruben 9b38e4bf15
All checks were successful
/ build (push) Successful in 6m53s
clean up styling, redo navbar, redo settings
2025-10-18 03:45:31 -05:00

85 lines
No EOL
2.8 KiB
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-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;
}
}