Allow themes to set paged text alignment. Fix wrong alignment of box …

…titles with icons
iamgio · Sep 28, 2024 · c4922e5 · c4922e5
1 parent 1fad506
commit c4922e5
Showing 1 changed file with 31 additions and 7 deletions.
diff --git a/core/src/main/resources/render/theme/global.css b/core/src/main/resources/render/theme/global.css
@@ -1,25 +1,41 @@
 :root {
     /* Quarkdown exposed properties */
+
+    /* Colors */
     --qd-background-color: inherit;
     --qd-main-color: inherit;
     --qd-heading-color: var(--qd-main-color);
     --qd-link-color: inherit;
+    --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-error-message-collapsed-text-color: rgb(240, 246, 77); /* Color of expandible text in error messages */
+
+    /* Fonts */
     --qd-main-font: inherit;
     --qd-main-font-size: 1em;
     --qd-code-font: monospace;
+    --qd-box-heading-font: var(--qd-main-font); /* Font of box headers */
     --qd-code-span-font-size: var(--qd-main-font-size);
     --qd-code-block-font-size: var(--qd-code-span-font-size); /* Font size of code blocks in non-slides documents */
     --qd-slides-code-block-font-size: var(--qd-code-block-font-size); /* Font size of code blocks in slides documents */
     --qd-heading-font: inherit;
+
+    /* Margins */
     --qd-block-margin: 32px;
     --qd-heading-margin: 40px 0 20px 0; /* Margin of headings in non-slides documents */
     --qd-slides-heading-margin: 0 0 20px 0; /* Margin of headings in slides documents */
     --qd-box-margin-multiplier: 1.5; /* --qd-block-margin * this = box vertical margin */
-    --qd-box-heading-font: var(--qd-main-font);
-    --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 */
+
+    /* Text */
     --qd-line-height: 1.5;
     --qd-slides-horizontal-alignment: center; /* Text alignment of slides documents */
-    --qd-error-message-collapsed-text-color: rgb(240, 246, 77); /* Color of expandible text in error messages */
+    --qd-paged-horizontal-alignment: start; /* Text alignment of paged documents */
+    /*
+    Global text alignment (should not be overridden externally).
+    It can equal to either --qd-pages-horizontal-alignment or --qd-slides-horizontal-alignment
+    according to the current document type.
+    */
+    --qd-horizontal-alignment: var(--qd-paged-horizontal-alignment);
+
     /* 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 */
@@ -48,20 +64,26 @@
     --r-heading-margin: var(--qd-slides-heading-margin);
 }
 
-.reveal .slides > :is(section, .pdf-page) {
-    text-align: var(--qd-slides-horizontal-alignment);
-}
-
 body {
     color: var(--qd-main-color);
     font-family: var(--qd-main-font);
     font-size: var(--qd-main-font-size);
+    text-align: var(--qd-horizontal-alignment);
 }
 
 body:not(:has(.pagedjs_page)), .pagedjs_page {
     background-color: var(--qd-background-color);
 }
 
+/* Slides viewport */
+.reveal {
+    --qd-horizontal-alignment: var(--qd-slides-horizontal-alignment);
+}
+
+.reveal .slides > :is(section, .pdf-page) {
+    text-align: var(--qd-slides-horizontal-alignment);
+}
+
 /* Paged viewport */
 body:has(.pagedjs_page) {
     background-color: lightgray;
@@ -76,6 +98,7 @@ body:has(.pagedjs_page) {
 }
 
 .pagedjs_page {
+    text-align: var(--qd-paged-horizontal-alignment);
     box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
 }
 
@@ -420,6 +443,7 @@ code.focus-lines .hljs-ln-line:not(.focused),
     display: flex;
     flex-direction: row;
     align-items: center; /* Align icons */
+    justify-content: var(--qd-horizontal-alignment);
 }
 
 .box.warning > header > h4::before {