You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
3.6 KiB
162 lines
3.6 KiB
/* stylelint-disable-next-line at-rule-no-unknown */ |
|
@tailwind base; |
|
/* stylelint-disable-next-line at-rule-no-unknown */ |
|
@tailwind components; |
|
/* stylelint-disable-next-line at-rule-no-unknown */ |
|
@tailwind utilities; |
|
|
|
:root { |
|
--text-size: 16px; |
|
--line-height: 1.6; |
|
--content-width: 800px; |
|
} |
|
|
|
[data-text-size='small'] { |
|
--text-size: 14px; |
|
} |
|
|
|
[data-text-size='medium'] { |
|
--text-size: 16px; |
|
} |
|
|
|
[data-text-size='large'] { |
|
--text-size: 18px; |
|
} |
|
|
|
[data-line-spacing='tight'] { |
|
--line-height: 1.4; |
|
} |
|
|
|
[data-line-spacing='normal'] { |
|
--line-height: 1.6; |
|
} |
|
|
|
[data-line-spacing='loose'] { |
|
--line-height: 1.8; |
|
} |
|
|
|
[data-content-width='narrow'] { |
|
--content-width: 600px; |
|
} |
|
|
|
[data-content-width='medium'] { |
|
--content-width: 800px; |
|
} |
|
|
|
[data-content-width='wide'] { |
|
--content-width: 1200px; |
|
} |
|
|
|
/* Automatically set content width to narrow on mobile screens */ |
|
@media (max-width: 768px) { |
|
:root { |
|
--content-width: 600px; |
|
} |
|
|
|
/* Override any user preference on mobile */ |
|
[data-content-width='narrow'], |
|
[data-content-width='medium'], |
|
[data-content-width='wide'] { |
|
--content-width: 600px; |
|
} |
|
} |
|
|
|
body { |
|
font-size: var(--text-size); |
|
line-height: var(--line-height); |
|
background-color: #f1f5f9; |
|
color: #475569; /* WCAG AA compliant: 5.2:1 contrast ratio */ |
|
transition: background-color 0.3s ease, color 0.3s ease; |
|
} |
|
|
|
/* Dark mode body styles */ |
|
.dark body { |
|
background-color: #0f172a; |
|
color: #cbd5e1; /* WCAG AA compliant: 13.5:1 contrast ratio */ |
|
} |
|
|
|
/* Fog aesthetic base styles */ |
|
.bg-fog { |
|
background-color: #f1f5f9; |
|
} |
|
|
|
.dark .bg-fog { |
|
background-color: #0f172a; |
|
} |
|
|
|
.bg-fog-surface { |
|
background-color: #f8fafc; |
|
} |
|
|
|
.dark .bg-fog-surface { |
|
background-color: #1e293b; |
|
} |
|
|
|
/* Anon aesthetic: Pure gray to slightly bluish tints for profile pics */ |
|
/* Profile pictures - all instances */ |
|
img.profile-picture, |
|
.profile-badge img, |
|
.profile-picture, |
|
img[alt*="profile" i], |
|
img[alt*="avatar" i], |
|
img[src*="avatar" i], |
|
img[src*="profile" i] { |
|
filter: grayscale(100%) sepia(10%) hue-rotate(200deg) saturate(30%) !important; |
|
transition: filter 0.3s ease; |
|
} |
|
|
|
.dark img.profile-picture, |
|
.dark .profile-badge img, |
|
.dark .profile-picture, |
|
.dark img[alt*="profile" i], |
|
.dark img[alt*="avatar" i], |
|
.dark img[src*="avatar" i], |
|
.dark img[src*="profile" i] { |
|
filter: grayscale(100%) sepia(12%) hue-rotate(200deg) saturate(35%) !important; |
|
} |
|
|
|
/* Emoji images - grayscale like profile pics */ |
|
.emoji, |
|
[class*="emoji"], |
|
img[alt*="emoji" i], |
|
img[src*="emoji" i] { |
|
filter: grayscale(100%) sepia(15%) hue-rotate(200deg) saturate(60%) brightness(0.95); |
|
display: inline-block; |
|
} |
|
|
|
.dark .emoji, |
|
.dark [class*="emoji"], |
|
.dark img[alt*="emoji" i], |
|
.dark img[src*="emoji" i] { |
|
filter: grayscale(100%) sepia(20%) hue-rotate(200deg) saturate(70%) brightness(0.9); |
|
} |
|
|
|
/* Apply grayscale filter to reaction buttons containing emojis */ |
|
/* But exclude emoji menu items - they should be full color */ |
|
.reaction-btn:not(.reaction-menu-item), |
|
.Feed-reaction-buttons button:not(.reaction-menu-item) { |
|
filter: grayscale(100%) sepia(15%) hue-rotate(200deg) saturate(60%) brightness(0.95); |
|
} |
|
|
|
.dark .reaction-btn:not(.reaction-menu-item), |
|
.dark .Feed-reaction-buttons button:not(.reaction-menu-item) { |
|
filter: grayscale(100%) sepia(20%) hue-rotate(200deg) saturate(70%) brightness(0.9); |
|
} |
|
|
|
/* Content images should be prominent - no grayscale filters */ |
|
.markdown-content img, |
|
.markdown-content video, |
|
.markdown-content audio, |
|
.anon-content img { |
|
filter: none !important; |
|
} |
|
|
|
@media (prefers-reduced-motion: reduce) { |
|
*, |
|
*::before, |
|
*::after { |
|
animation-duration: 0.01ms !important; |
|
animation-iteration-count: 1 !important; |
|
transition-duration: 0.01ms !important; |
|
} |
|
}
|
|
|