feat(ui): add blockquote styling with Tailwind colors

- Add blockquote styles for both markdown and HTML content
- Use indigo-500 left border for visual distinction
- Use zinc-800 background for subtle emphasis
- Add proper spacing and rounded corners
- Apply zinc-300 color and italic style for readability
- Properly handle nested paragraph margins
This commit is contained in:
Gigi
2025-10-13 23:34:30 +02:00
parent f94e4ba900
commit 6277824b32

View File

@@ -45,6 +45,18 @@
.reader-markdown h1, .reader-markdown h2, .reader-markdown h3, .reader-markdown h4 { margin-top: 1.2rem; }
.reader-markdown p { margin: 0.5rem 0; }
.reader-html p, .reader-html div, .reader-html span, .reader-html li, .reader-html td, .reader-html th { font-size: 1em !important; }
.reader-markdown blockquote, .reader-html blockquote {
margin: 1.5rem 0;
padding: 1rem 1.5rem;
border-left: 4px solid rgb(99 102 241); /* indigo-500 */
background: rgb(39 39 42); /* zinc-800 */
border-radius: 0 8px 8px 0;
color: rgb(212 212 216); /* zinc-300 */
font-style: italic;
}
.reader-markdown blockquote p, .reader-html blockquote p { margin: 0.5rem 0; }
.reader-markdown blockquote p:first-child, .reader-html blockquote p:first-child { margin-top: 0; }
.reader-markdown blockquote p:last-child, .reader-html blockquote p:last-child { margin-bottom: 0; }
.reader-markdown a { color: rgb(96 165 250); /* blue-400 */ text-decoration: none; }
.reader-markdown a:hover { text-decoration: underline; }
.reader-markdown code { background: rgb(30 30 30); /* ~zinc-850 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }