diff --git a/apps/client/src/print.css b/apps/client/src/print.css index 5d31138ce..b935d9eb7 100644 --- a/apps/client/src/print.css +++ b/apps/client/src/print.css @@ -1,10 +1,155 @@ +:root { + --print-font-size: 11pt; + --ck-content-color-image-caption-background: transparent !important; +} + html, body { width: 100%; height: 100%; + color: black; +} + +@page { + margin: 2cm; } .note-list-widget.full-height, .note-list-widget.full-height .note-list-widget-content { height: unset !important; -} \ No newline at end of file +} + +.component { + contain: none !important; +} + +.ck-content { + font-size: var(--print-font-size); + text-align: justify; +} + +.ck-content figcaption { + font-style: italic; +} + +.ck-content a { + text-decoration: none; +} + +.ck-content a:not([href^="#root/"]) { + text-decoration: underline; + color: #374a75; +} + +.ck-content .todo-list__label * { + -webkit-print-color-adjust: exact; + print-color-adjust: exact; +} + +@supports selector(.todo-list__label__description:has(*)) and (height: 1lh) { + .ck-content .todo-list__label__description { + /* The percentage of the line height that the check box occupies */ + --box-ratio: 0.75; + /* The size of the gap between the check box and the caption */ + --box-text-gap: 0.25em; + + --box-size: calc(1lh * var(--box-ratio)); + --box-vert-offset: calc((1lh - var(--box-size)) / 2); + + display: inline-block; + padding-inline-start: calc(var(--box-size) + var(--box-text-gap)); + /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-blank-outline/ */ + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5C3.89%2c3 3%2c3.89 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5C21%2c3.89 20.1%2c3 19%2c3M19%2c5V19H5V5H19Z' /%3e%3c/svg%3e"); + background-position: 0 var(--box-vert-offset); + background-size: var(--box-size); + background-repeat: no-repeat; + } + + .ck-content .todo-list__label:has(input[type="checkbox"]:checked) .todo-list__label__description { + /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-outline/ */ + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5A2%2c2 0 0%2c0 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5A2%2c2 0 0%2c0 19%2c3M19%2c5V19H5V5H19M10%2c17L6%2c13L7.41%2c11.58L10%2c14.17L16.59%2c7.58L18%2c9' /%3e%3c/svg%3e"); + } + + .ck-content .todo-list__label input[type="checkbox"] { + display: none !important; + } +} + +/* #region Footnotes */ +.footnote-reference a, +.footnote-back-link a { + text-decoration: none !important; +} + +li.footnote-item { + position: relative; + width: fit-content; +} + +.ck-content .footnote-back-link { + margin-right: 0.25em; +} + +.ck-content .footnote-content { + display: inline-block; + width: unset; +} +/* #endregion */ + +/* #region Widows and orphans */ +p, +blockquote { + widows: 4; + orphans: 4; +} + +pre > code { + widows: 6; + orphans: 6; + overflow: auto; + white-space: pre-wrap !important; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + page-break-after: avoid; + break-after: avoid; +} +/* #endregion */ + +/* #region Tables */ +.table thead th, +.table td, +.table th { + /* Fix center vertical alignment of table cells */ + vertical-align: middle; +} + +pre { + box-shadow: unset !important; + border: 0.75pt solid gray !important; + border-radius: 2pt !important; +} + +th, +span[style] { + print-color-adjust: exact; + -webkit-print-color-adjust: exact; +} +/* #endregion */ + +/* #region Page breaks */ +.page-break { + page-break-after: always; + break-after: always; +} + +.page-break > *, +.page-break::after { + display: none !important; +} +/* #endregion */ \ No newline at end of file diff --git a/apps/client/src/stylesheets/print.css b/apps/client/src/stylesheets/print.css deleted file mode 100644 index 842570bde..000000000 --- a/apps/client/src/stylesheets/print.css +++ /dev/null @@ -1,322 +0,0 @@ -:root { - --main-background-color: white; - --root-background: var(--main-background-color); - --launcher-pane-background-color: var(--main-background-color); - --main-text-color: black; - --input-text-color: var(--main-text-color); - - --print-font-size: 11pt; -} - -@page { - margin: 2cm; -} - -.ck-content { - font-size: var(--print-font-size); - text-align: justify; -} - -.note-detail-readonly-text { - padding: 0 !important; -} - -.no-print, -.no-print *, -.tab-row-container, -.tab-row-widget, -.title-bar-buttons, -#launcher-pane, -#left-pane, -#center-pane > *:not(.split-note-container-widget), -#right-pane, -.title-row .note-icon-widget, -.title-row .icon-action, -.ribbon-container, -.promoted-attributes-widget, -.scroll-padding-widget, -.note-list-widget, -.spacer { - display: none !important; -} - -body.mobile #mobile-sidebar-wrapper, -body.mobile .classic-toolbar-widget, -body.mobile .action-button { - display: none !important; -} - -body.mobile #detail-container { - max-height: unset; -} - -body.mobile .note-title-widget { - padding: 0 !important; -} - -body, -#root-widget, -#rest-pane > div.component:first-child, -.note-detail-printable, -.note-detail-editable-text-editor { - height: unset !important; - overflow: auto; -} - -.ck.ck-editor__editable_inline { - overflow: hidden !important; -} - -.note-title-widget input, -.note-detail-editable-text, -.note-detail-editable-text-editor { - padding: 0 !important; -} - -html, -body { - width: unset !important; - height: unset !important; - overflow: visible; - position: unset; - /* https://github.com/zadam/trilium/issues/3202 */ - color: black; -} - -#root-widget, -#horizontal-main-container, -#rest-pane, -#vertical-main-container, -#center-pane, -.split-note-container-widget, -.note-split:not(.hidden-ext), -body.mobile #mobile-rest-container { - display: block !important; - overflow: auto; - border-radius: 0 !important; -} - -#center-pane, -#rest-pane, -.note-split, -body.mobile #detail-container { - width: unset !important; - max-width: unset !important; -} - -.component { - contain: none !important; -} - -/* Respect page breaks */ -.page-break { - page-break-after: always; - break-after: always; -} - -.page-break > * { - display: none !important; -} - -.relation-map-wrapper { - height: 100vh !important; -} - -.table thead th, -.table td, -.table th { - /* Fix center vertical alignment of table cells */ - vertical-align: middle; -} - -pre { - box-shadow: unset !important; - border: 0.75pt solid gray !important; - border-radius: 2pt !important; -} - -th, -span[style] { - print-color-adjust: exact; - -webkit-print-color-adjust: exact; -} - -/* - * Text note specific fixes - */ -.ck-widget { - outline: none !important; -} - -.ck-placeholder, -.ck-widget__type-around, -.ck-widget__selection-handle { - display: none !important; -} - -.ck-widget.table td.ck-editor__nested-editable.ck-editor__nested-editable_focused, -.ck-widget.table td.ck-editor__nested-editable:focus, -.ck-widget.table th.ck-editor__nested-editable.ck-editor__nested-editable_focused, -.ck-widget.table th.ck-editor__nested-editable:focus { - background: unset !important; - outline: unset !important; -} - -.include-note .include-note-content { - max-height: unset !important; - overflow: unset !important; -} - -/* TODO: This will break once we translate the language */ -.ck-content pre[data-language="Auto-detected"]:after { - display: none !important; -} - -/* - * Code note specific fixes. - */ -.note-detail-code pre { - border: unset !important; - border-radius: unset !important; -} - -/* - * Links - */ - -.note-detail-printable a { - text-decoration: none; -} - -.note-detail-printable a:not([href^="#root/"]) { - text-decoration: underline; - color: #374a75; -} - -.note-detail-printable a::after { - /* Hide the external link trailing arrow */ - display: none !important; -} - -/* - * TODO list check boxes - */ - -.note-detail-printable .todo-list__label * { - -webkit-print-color-adjust: exact; - print-color-adjust: exact; -} - -@supports selector(.todo-list__label__description:has(*)) and (height: 1lh) { - .note-detail-printable .todo-list__label__description { - /* The percentage of the line height that the check box occupies */ - --box-ratio: 0.75; - /* The size of the gap between the check box and the caption */ - --box-text-gap: 0.25em; - - --box-size: calc(1lh * var(--box-ratio)); - --box-vert-offset: calc((1lh - var(--box-size)) / 2); - - display: inline-block; - padding-inline-start: calc(var(--box-size) + var(--box-text-gap)); - /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-blank-outline/ */ - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5C3.89%2c3 3%2c3.89 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5C21%2c3.89 20.1%2c3 19%2c3M19%2c5V19H5V5H19Z' /%3e%3c/svg%3e"); - background-position: 0 var(--box-vert-offset); - background-size: var(--box-size); - background-repeat: no-repeat; - } - - .note-detail-printable .todo-list__label:has(input[type="checkbox"]:checked) .todo-list__label__description { - /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-outline/ */ - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5A2%2c2 0 0%2c0 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5A2%2c2 0 0%2c0 19%2c3M19%2c5V19H5V5H19M10%2c17L6%2c13L7.41%2c11.58L10%2c14.17L16.59%2c7.58L18%2c9' /%3e%3c/svg%3e"); - } - - .note-detail-printable .todo-list__label input[type="checkbox"] { - display: none !important; - } -} - -/* - * Blockquotes - */ - -.note-detail-printable blockquote { - box-shadow: unset; -} - -/* - * Figures - */ - -.note-detail-printable figcaption { - --accented-background-color: transparent; - - font-style: italic; -} - -/* - * Footnotes - */ - -.note-detail-printable .footnote-reference a, -.footnote-back-link a { - text-decoration: none; -} - -/* Make the "^" link cover the whole area of the footnote item */ - -.footnote-section { - clear: both; -} - -.note-detail-printable li.footnote-item { - position: relative; - width: fit-content; -} - -.note-detail-printable .footnote-back-link, -.note-detail-printable .footnote-back-link *, -.note-detail-printable .footnote-back-link a { - display: block; - position: absolute; - - top: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; -} - -.note-detail-printable .footnote-back-link a { - color: transparent; -} - -.note-detail-printable .footnote-content { - display: inline-block; - width: unset; -} - -/* - * Widows and orphans - */ -p, -blockquote { - widows: 4; - orphans: 4; -} - -pre > code { - widows: 6; - orphans: 6; - overflow: auto; - white-space: pre-wrap !important; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - page-break-after: avoid; - break-after: avoid; -}