From c4922e5c44089fe09496b0d67e0f03db4e757d45 Mon Sep 17 00:00:00 2001 From: Giorgio Garofalo Date: Sat, 28 Sep 2024 19:43:43 +0200 Subject: [PATCH] Allow themes to set paged text alignment. Fix wrong alignment of box titles with icons --- .../main/resources/render/theme/global.css | 38 +++++++++++++++---- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/core/src/main/resources/render/theme/global.css b/core/src/main/resources/render/theme/global.css index 9b895d83..aef3972a 100644 --- 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 {