styles structure
This commit is contained in:
parent
a652971a27
commit
189f1fe4bf
11 changed files with 10 additions and 10 deletions
112
_includes/styles/base/accessibility.css
Normal file
112
_includes/styles/base/accessibility.css
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
/* ╭───────────────────────────────────────────────────────╮
|
||||
/ │ _ _ _ _ _ _ │
|
||||
/ │ __ _ ___ ___ ___ ___ ___(_) |__ (_) (_) |_ _ _ │
|
||||
/ │ / _` |/ __/ __/ _ \/ __/ __| | '_ \| | | | __| | | | │
|
||||
/ │ | (_| | (_| (_| __/\__ \__ \ | |_) | | | | |_| |_| | │
|
||||
/ │ \__,_|\___\___\___||___/___/_|_.__/|_|_|_|\__|\__, | │
|
||||
/ │ |___/ │
|
||||
/ ╰───────────────────────────────────────────────────────╯
|
||||
/ 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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue