Style typed blockquotes

iamgio · Sep 24, 2024 · 8b84216 · 8b84216
1 parent 570bf85
commit 8b84216
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 7 deletions.
diff --git a/core/src/main/resources/render/theme/color/darko.css b/core/src/main/resources/render/theme/color/darko.css
@@ -7,10 +7,9 @@
     --qd-main-color: #C9C9D7;
     --qd-link-color: #5FC7C7;
     --qd-callout-box-header-color: var(--primary);
-}
-
-blockquote {
-    background-color: rgba(255, 255, 255, 0.05) !important;
+    --qd-tip-foreground-color: #86DC93;
+    --qd-note-foreground-color: #84AAEC;
+    --qd-warning-foreground-color: #FFB86C;
 }
 
 hr {

diff --git a/core/src/main/resources/render/theme/color/paperwhite.css b/core/src/main/resources/render/theme/color/paperwhite.css
@@ -9,10 +9,13 @@
 }
 
 blockquote {
-    background-color: rgba(0, 0, 0, 0.04) !important;
     border-color: rgba(0, 0, 0, 0.2);
 }
 
+.reveal blockquote {
+    box-shadow: none;
+}
+
 pre code {
     background-color: transparent !important;
 }

diff --git a/core/src/main/resources/render/theme/global.css b/core/src/main/resources/render/theme/global.css
@@ -19,8 +19,21 @@
     --qd-callout-box-header-color: var(--qd-main-color); /* Color of the header of callout box headers. This is just a referenceable value and is not used in this global theme */
     --qd-line-height: 1.5;
     --qd-slides-horizontal-alignment: center; /* Text alignment of slides documents */
-    --qd-quote-attribution-prefix: "— "; /* Prefix for quote attributions */
     --qd-error-message-collapsed-text-color: rgb(240, 246, 77); /* Color of expandible text in error messages */
+    /* Quotes */
+    --qd-quote-type-label-suffix: ": "; /* Suffix for localized quote type labels, e.g. Tip, Note, Warning, ... */
+    --qd-quote-attribution-prefix: "— "; /* Prefix for quote attributions */
+    --qd-quote-foreground-color: var(--qd-main-color);
+    --qd-quote-background-color: color-mix(in srgb, var(--qd-quote-foreground-color) 5%, transparent);
+    /* Tip elements */
+    --qd-tip-foreground-color: rgb(33, 102, 25);
+    --qd-tip-background-color: color-mix(in srgb, var(--qd-tip-foreground-color) 5%, transparent);
+    /* Note elements */
+    --qd-note-foreground-color: rgb(25, 60, 102);
+    --qd-note-background-color: color-mix(in srgb, var(--qd-note-foreground-color) 5%, transparent);
+    /* Warning elements */
+    --qd-warning-foreground-color: rgb(161, 76, 32);
+    --qd-warning-background-color: color-mix(in srgb, var(--qd-warning-foreground-color) 5%, transparent);
 
     /* Reveal properties */
     --r-background-color: var(--qd-background-color);
@@ -82,17 +95,52 @@ blockquote {
     margin: 0;
 }
 
+blockquote, .reveal blockquote {
+    color: var(--qd-quote-foreground-color);
+}
+
+:is(blockquote, .reveal blockquote):not([class]) {
+    background-color: var(--qd-quote-background-color);
+}
+
 /* Blockquotes with a type (e.g. tip, note, warning, ...) */
 blockquote[class] {
     /* This can be overridden by the renderer to display a localized label for each quote type, e.g. 'Tip:' */
     --quote-type-label: "";
 }
 
 blockquote[class] :first-child::before {
-    content: var(--quote-type-label) ": ";
+    content: var(--quote-type-label) var(--qd-quote-type-label-suffix);
     font-weight: bold;
 }
 
+blockquote.tip {
+    border-color: var(--qd-tip-foreground-color);
+    background-color: var(--qd-tip-background-color);
+}
+
+blockquote.tip :first-child::before {
+    color: var(--qd-tip-foreground-color);
+}
+
+blockquote.note {
+    border-color: var(--qd-note-foreground-color);
+    background-color: var(--qd-note-background-color);
+}
+
+blockquote.note :first-child::before {
+    color: var(--qd-note-foreground-color);
+}
+
+blockquote.warning {
+    border-color: var(--qd-warning-foreground-color);
+    background-color: var(--qd-warning-background-color);
+}
+
+blockquote.warning :first-child::before {
+    color: var(--qd-warning-foreground-color);
+}
+
 blockquote .attribution {
     opacity: 0.6;
     display: block !important;

diff --git a/core/src/main/resources/render/theme/layout/beamer.css b/core/src/main/resources/render/theme/layout/beamer.css
@@ -65,6 +65,11 @@ table tr:last-child td {
 blockquote {
     font-style: italic;
     opacity: 0.7;
+    background: none !important;
+}
+
+blockquote[class] {
+    font-style: normal;
 }
 
 blockquote .attribution {

diff --git a/core/src/main/resources/render/theme/layout/latex.css b/core/src/main/resources/render/theme/layout/latex.css
@@ -13,6 +13,7 @@
     --qd-block-margin: 1.8em;
     --qd-line-height: 1.5;
     --qd-slides-horizontal-alignment: start;
+    --qd-quote-type-label-suffix: ". ";
 
     --border-width-thick: 2px;
     --border-width-thin: 1px;
@@ -153,6 +154,11 @@ blockquote > :last-child {
     margin-bottom: 10px;
 }
 
+/* Tip, note, warning, ... */
+blockquote[class] {
+    font-style: normal;
+}
+
 blockquote .attribution {
     text-align: end;
 }