From 7b6e8086561f2b693fd212008c966fd9376393aa Mon Sep 17 00:00:00 2001 From: Hussain Nagaria Date: Fri, 15 May 2026 15:47:01 +0530 Subject: [PATCH] fix: style callouts in wiki pdf download MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mirror the public-page callout treatment in the print format so note/tip/caution/danger callouts render with their colored backgrounds and tinted icons instead of plain icon + text. While doing this, inline every `var(--...)` reference as a hex value: wkhtmltopdf's QtWebKit predates CSS Custom Properties, so all our existing `var(--gray-*)` declarations were silently dropping too — the header divider, table borders, blockquote rule, and eyebrow colors weren't rendering either, not just the new callout colors. Layout note: the public CSS uses `display: grid` with `grid-template-columns: auto 1fr`; QtWebKit doesn't support Grid, so the print format floats the icon left and gives `.callout-body` its own block formatting context via `overflow: hidden`. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../standard_wiki_document.html | 95 +++++++++++++++++-- 1 file changed, 88 insertions(+), 7 deletions(-) diff --git a/wiki/frappe_wiki/print_format/standard_wiki_document/standard_wiki_document.html b/wiki/frappe_wiki/print_format/standard_wiki_document/standard_wiki_document.html index 187b25d1..fef647c4 100644 --- a/wiki/frappe_wiki/print_format/standard_wiki_document/standard_wiki_document.html +++ b/wiki/frappe_wiki/print_format/standard_wiki_document/standard_wiki_document.html @@ -7,7 +7,7 @@ .wiki-document-header { margin-bottom: 1.5rem; padding-bottom: 1rem; - border-bottom: 1px solid var(--gray-300); + border-bottom: 1px solid #e2e2e2; } .wiki-document-eyebrow { @@ -16,12 +16,12 @@ font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; - color: var(--gray-600); + color: #7c7c7c; } .wiki-document-eyebrow .sep { margin: 0 0.4em; - color: var(--gray-400); + color: #c7c7c7; } .wiki-document-title { @@ -37,7 +37,7 @@ font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; - color: var(--gray-600); + color: #7c7c7c; } .wiki-document-content img { @@ -65,20 +65,20 @@ .wiki-document-content th, .wiki-document-content td { padding: 0.5rem; - border: 1px solid var(--gray-300); + border: 1px solid #e2e2e2; vertical-align: top; } .wiki-document-content blockquote { /* Reset Bootstrap defaults (full border + 10px 20px padding) that Frappe's print CSS layers in. */ border: 0; - border-left: 4px solid var(--gray-300); + border-left: 4px solid #e2e2e2; padding: 0 0 0 1em; margin: 1.6em 0; font-size: inherit; font-style: italic; font-weight: 500; - color: var(--gray-800); + color: #383838; quotes: "\201C" "\201D" "\2018" "\2019"; } @@ -93,6 +93,87 @@ .wiki-document-content blockquote p:last-of-type::after { content: close-quote; } + + /* Callouts — mirror the public-page treatment. Public CSS uses display:grid; + wkhtmltopdf's QtWebKit predates Grid, so use a float for icon-left layout. */ + .wiki-document-content .callout { + margin: 1rem 0; + padding: 0.875rem 1rem; + border-radius: 6px; + overflow: hidden; + } + + .wiki-document-content .callout-icon { + float: left; + width: 1rem; + margin-right: 0.75rem; + padding-top: 0.125rem; + line-height: 0; + } + + .wiki-document-content .callout-icon svg { + width: 1rem; + height: 1rem; + } + + .wiki-document-content .callout-body { + overflow: hidden; + } + + .wiki-document-content .callout-title { + display: block; + margin-bottom: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.4; + color: #171717; + } + + .wiki-document-content .callout-content { + font-size: 0.875rem; + line-height: 1.5; + color: #525252; + } + + .wiki-document-content .callout-content > *:first-child { + margin-top: 0; + } + + .wiki-document-content .callout-content > *:last-child { + margin-bottom: 0; + } + + .wiki-document-content .callout-note { + background-color: #E6F4FF; + } + + .wiki-document-content .callout-note .callout-icon { + color: #007BE0; + } + + .wiki-document-content .callout-tip { + background-color: #E4FAEB; + } + + .wiki-document-content .callout-tip .callout-icon { + color: #278F5E; + } + + .wiki-document-content .callout-caution { + background-color: #FFF7D3; + } + + .wiki-document-content .callout-caution .callout-icon { + color: #DB7706; + } + + .wiki-document-content .callout-danger { + background-color: #FFE7E7; + } + + .wiki-document-content .callout-danger .callout-icon { + color: #E03636; + } {% set breadcrumbs = doc.get_breadcrumbs() %}