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.
482 lines
10 KiB
482 lines
10 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: 12px; |
|
--line-height: 1.6; |
|
--content-width: 800px; |
|
} |
|
|
|
[data-text-size='small'] { |
|
--text-size: 10px; |
|
} |
|
|
|
[data-text-size='medium'] { |
|
--text-size: 12px; |
|
} |
|
|
|
[data-text-size='large'] { |
|
--text-size: 14px; |
|
} |
|
|
|
[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; |
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace; |
|
} |
|
|
|
/* Responsive font sizing based on screen size */ |
|
@media (max-width: 640px) { |
|
:root { |
|
--text-size: clamp(14px, 4vw, 16px); |
|
} |
|
} |
|
|
|
@media (min-width: 641px) and (max-width: 1024px) { |
|
:root { |
|
--text-size: clamp(15px, 1.5vw, 18px); |
|
} |
|
} |
|
|
|
@media (min-width: 1025px) { |
|
:root { |
|
--text-size: clamp(16px, 1.2vw, 20px); |
|
} |
|
} |
|
|
|
/* Paragraph spacing - increased for better readability */ |
|
p { |
|
margin-bottom: 1.25em; |
|
margin-top: 0; |
|
} |
|
|
|
/* Markdown content paragraph spacing */ |
|
:global(.markdown-content) p { |
|
margin-bottom: 1.25em; |
|
margin-top: 0; |
|
} |
|
|
|
/* Consistent heading sizes relative to base font size */ |
|
h1 { |
|
font-size: clamp(1.25rem, 3vw, 1.5rem); |
|
line-height: 1.2; |
|
margin-bottom: 1.5rem; |
|
margin-top: 0; |
|
font-weight: 700; |
|
color: var(--fog-text, #475569); |
|
} |
|
|
|
:global(.dark) h1 { |
|
color: var(--fog-dark-text, #cbd5e1); |
|
} |
|
|
|
h2 { |
|
font-size: clamp(1.125rem, 2.5vw, 1.25rem); |
|
line-height: 1.3; |
|
margin-bottom: 0.875rem; |
|
margin-top: 0; |
|
font-weight: 600; |
|
color: var(--fog-text, #475569); |
|
} |
|
|
|
:global(.dark) h2 { |
|
color: var(--fog-dark-text, #cbd5e1); |
|
} |
|
|
|
h3 { |
|
font-size: clamp(1rem, 2vw, 1.125rem); |
|
line-height: 1.4; |
|
margin-bottom: 0.625rem; |
|
margin-top: 1.25rem; |
|
font-weight: 600; |
|
color: var(--fog-text, #475569); |
|
} |
|
|
|
:global(.dark) h3 { |
|
color: var(--fog-dark-text, #cbd5e1); |
|
} |
|
|
|
h4, h5, h6 { |
|
font-size: clamp(1rem, 2vw, 1.125rem); |
|
line-height: 1.4; |
|
margin-bottom: 0.625rem; |
|
margin-top: 0; |
|
} |
|
|
|
/* Common main container */ |
|
main { |
|
max-width: var(--content-width); |
|
margin: 0 auto; |
|
} |
|
|
|
/* Common loading and empty states */ |
|
.loading-state, |
|
.empty-state { |
|
padding: 2rem; |
|
text-align: center; |
|
color: var(--fog-text, #1f2937); |
|
} |
|
|
|
:global(.dark) .loading-state, |
|
:global(.dark) .empty-state { |
|
color: var(--fog-dark-text, #f9fafb); |
|
} |
|
|
|
/* Common button styles */ |
|
.write-button { |
|
display: inline-flex; |
|
align-items: center; |
|
justify-content: center; |
|
padding: 0.5rem; |
|
border: 1px solid var(--fog-border, #e5e7eb); |
|
border-radius: 0.375rem; |
|
background: var(--fog-post, #ffffff); |
|
color: var(--fog-text, #1f2937); |
|
text-decoration: none; |
|
transition: all 0.2s; |
|
min-width: 2.5rem; |
|
min-height: 2.5rem; |
|
flex-shrink: 0; |
|
cursor: pointer; |
|
} |
|
|
|
:global(.dark) .write-button { |
|
border-color: var(--fog-dark-border, #374151); |
|
background: var(--fog-dark-post, #1f2937); |
|
color: var(--fog-dark-text, #f9fafb); |
|
} |
|
|
|
.write-button:hover { |
|
background: var(--fog-highlight, #f3f4f6); |
|
border-color: var(--fog-accent, #64748b); |
|
} |
|
|
|
:global(.dark) .write-button:hover { |
|
background: var(--fog-dark-highlight, #475569); |
|
border-color: var(--fog-dark-accent, #94a3b8); |
|
} |
|
|
|
/* Action buttons (accent background) */ |
|
.find-button, |
|
.create-rss-button, |
|
.edit-rss-button, |
|
.bulk-action-button, |
|
.load-more-button, |
|
.clear-kind-button { |
|
padding: 0.75rem 1.5rem; |
|
background: var(--fog-accent, #64748b); |
|
color: white; |
|
border: none; |
|
border-radius: 0.375rem; |
|
cursor: pointer; |
|
font-size: 0.875em; |
|
font-weight: 500; |
|
text-decoration: none; |
|
display: inline-block; |
|
transition: opacity 0.2s; |
|
} |
|
|
|
:global(.dark) .find-button, |
|
:global(.dark) .create-rss-button, |
|
:global(.dark) .edit-rss-button, |
|
:global(.dark) .bulk-action-button, |
|
:global(.dark) .load-more-button, |
|
:global(.dark) .clear-kind-button { |
|
background: var(--fog-dark-accent, #94a3b8); |
|
} |
|
|
|
.find-button:hover:not(:disabled), |
|
.create-rss-button:hover, |
|
.edit-rss-button:hover, |
|
.bulk-action-button:hover, |
|
.load-more-button:hover:not(:disabled), |
|
.clear-kind-button:hover { |
|
opacity: 0.9; |
|
} |
|
|
|
.find-button:disabled, |
|
.load-more-button:disabled { |
|
opacity: 0.6; |
|
cursor: not-allowed; |
|
} |
|
|
|
/* Tab buttons */ |
|
.tab-button { |
|
padding: 0.75rem 1.5rem; |
|
border: none; |
|
background: transparent; |
|
color: var(--fog-text-light, #6b7280); |
|
cursor: pointer; |
|
border-bottom: 2px solid transparent; |
|
transition: all 0.2s; |
|
font-size: 1rem; |
|
} |
|
|
|
:global(.dark) .tab-button { |
|
color: var(--fog-dark-text-light, #9ca3af); |
|
} |
|
|
|
.tab-button:hover { |
|
color: var(--fog-text, #1f2937); |
|
} |
|
|
|
:global(.dark) .tab-button:hover { |
|
color: var(--fog-dark-text, #f9fafb); |
|
} |
|
|
|
.tab-button.active { |
|
color: var(--fog-text, #1f2937); |
|
border-bottom-color: var(--fog-accent, #64748b); |
|
} |
|
|
|
:global(.dark) .tab-button.active { |
|
color: var(--fog-dark-text, #f9fafb); |
|
border-bottom-color: var(--fog-dark-accent, #94a3b8); |
|
} |
|
|
|
/* Common emoji styles */ |
|
.emoji { |
|
font-size: 1.25rem; |
|
line-height: 1; |
|
} |
|
|
|
.emoji-grayscale { |
|
filter: grayscale(100%); |
|
opacity: 0.7; |
|
} |
|
|
|
/* Common button styles */ |
|
.action-button { |
|
padding: 0.5rem 1rem; |
|
background: var(--fog-highlight, #f3f4f6); |
|
border: 1px solid var(--fog-border, #e5e7eb); |
|
border-radius: 0.375rem; |
|
color: var(--fog-text, #1f2937); |
|
cursor: pointer; |
|
font-size: 0.875em; |
|
text-decoration: none; |
|
display: inline-block; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
max-width: 100%; |
|
} |
|
|
|
:global(.dark) .action-button { |
|
background: var(--fog-dark-highlight, #475569); |
|
border-color: var(--fog-dark-border, #475569); |
|
color: var(--fog-dark-text, #f9fafb); |
|
} |
|
|
|
.action-button:hover { |
|
background: var(--fog-accent, #64748b); |
|
color: white; |
|
border-color: var(--fog-accent, #64748b); |
|
} |
|
|
|
.action-button:disabled { |
|
opacity: 0.6; |
|
cursor: not-allowed; |
|
} |
|
|
|
/* Common form elements */ |
|
.filter-select, |
|
.filter-input { |
|
padding: 0.5rem 0.75rem; |
|
border: 1px solid var(--fog-border, #e5e7eb); |
|
border-radius: 0.375rem; |
|
background: var(--fog-post, #ffffff); |
|
color: var(--fog-text, #1f2937); |
|
font-size: 0.875em; |
|
} |
|
|
|
:global(.dark) .filter-select, |
|
:global(.dark) .filter-input { |
|
background: var(--fog-dark-post, #334155); |
|
border-color: var(--fog-dark-border, #475569); |
|
color: var(--fog-dark-text, #f9fafb); |
|
} |
|
|
|
.filter-label { |
|
font-size: 0.875em; |
|
font-weight: 500; |
|
color: var(--fog-text, #1f2937); |
|
} |
|
|
|
:global(.dark) .filter-label { |
|
color: var(--fog-dark-text, #f9fafb); |
|
} |
|
|
|
/* Apply monospace font to all elements globally */ |
|
* { |
|
font-family: inherit; |
|
} |
|
|
|
/* Secret supercoder vibe - subtle terminal aesthetic */ |
|
body::before { |
|
content: ''; |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: |
|
repeating-linear-gradient( |
|
0deg, |
|
transparent, |
|
transparent 2px, |
|
rgba(0, 0, 0, 0.03) 2px, |
|
rgba(0, 0, 0, 0.03) 4px |
|
); |
|
pointer-events: none; |
|
z-index: 9999; |
|
opacity: 0.5; |
|
} |
|
|
|
.dark body::before { |
|
background: |
|
repeating-linear-gradient( |
|
0deg, |
|
transparent, |
|
transparent 2px, |
|
rgba(255, 255, 255, 0.02) 2px, |
|
rgba(255, 255, 255, 0.02) 4px |
|
); |
|
} |
|
|
|
/* Dark mode body styles */ |
|
.dark body { |
|
background-color: #0a0e1a; |
|
color: #cbd5e1; /* WCAG AA compliant: 13.5:1 contrast ratio */ |
|
text-shadow: 0 0 1px rgba(0, 255, 0, 0.1); |
|
} |
|
|
|
/* 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; |
|
} |
|
|
|
/* Profile pictures - display in full color */ |
|
/* 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] { |
|
/* No grayscale filter - profile pictures should be in full color */ |
|
} |
|
|
|
/* Emoji images - no grayscale filter, display in full color */ |
|
/* Only apply to actual image elements, not text emojis */ |
|
img[alt*="emoji" i], |
|
img[src*="emoji" i], |
|
img.emoji-inline { |
|
display: inline-block; |
|
/* No grayscale filter - emojis should be in full color */ |
|
} |
|
|
|
/* Ensure normal Unicode emojis (text characters) are displayed correctly */ |
|
/* Monospace font is already applied globally via body and * { font-family: inherit } */ |
|
/* Emojis will still display correctly in monospace fonts */ |
|
|
|
/* Emoji picker buttons - apply grayscale filter to buttons that open the picker */ |
|
/* But NOT to emojis inside the picker drawer or rendered content */ |
|
.toolbar-button, |
|
.reaction-btn.heart-btn { |
|
filter: grayscale(100%) sepia(15%) hue-rotate(200deg) saturate(60%) brightness(0.95); |
|
} |
|
|
|
.dark .toolbar-button, |
|
.dark .reaction-btn.heart-btn { |
|
filter: grayscale(100%) sepia(20%) hue-rotate(200deg) saturate(70%) brightness(0.9); |
|
} |
|
|
|
/* Override: emojis in picker drawer should be full color */ |
|
.emoji-drawer *, |
|
.emoji-picker * { |
|
filter: none !important; |
|
} |
|
|
|
/* Override: emojis in rendered content should be full color */ |
|
.markdown-content *, |
|
.post-content *, |
|
.reaction-display * { |
|
filter: none !important; |
|
} |
|
|
|
/* 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; |
|
} |
|
}
|
|
|