From 6277824b32f96046c8e0370a6abc1f64e8b03022 Mon Sep 17 00:00:00 2001 From: Gigi Date: Mon, 13 Oct 2025 23:34:30 +0200 Subject: [PATCH] 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 --- src/styles/components/reader.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css index a70aa68d..6521d072 100644 --- a/src/styles/components/reader.css +++ b/src/styles/components/reader.css @@ -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; }