From 298634ceaa6b8c48e4237a2e12bc165e15154c1e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 31 Jan 2025 20:47:18 +0200
Subject: [PATCH] refactor(print): use dedicated print CSS

---
 src/public/stylesheets/print.css |  97 +++++++++++++++++++++++++++++
 src/public/stylesheets/style.css | 101 -------------------------------
 src/views/desktop.ejs            |   1 +
 src/views/mobile.ejs             |   1 +
 4 files changed, 99 insertions(+), 101 deletions(-)

diff --git a/src/public/stylesheets/print.css b/src/public/stylesheets/print.css
index e69de29bb..b02522d45 100644
--- a/src/public/stylesheets/print.css
+++ b/src/public/stylesheets/print.css
@@ -0,0 +1,97 @@
+.no-print,
+.no-print *,
+.tab-row-container,
+#launcher-pane,
+#left-pane,
+#right-pane,
+.title-row .note-icon-widget,
+.title-row .button-widget,
+.ribbon-container,
+.scroll-padding-widget,
+.spacer {
+    display: none !important;
+}    
+
+body,
+#root-widget,
+#rest-pane > div.component:first-child,
+.note-detail-printable,
+.note-detail-editable-text-editor {
+    height: unset !important;
+    overflow: auto;
+}
+
+.note-title-widget input,
+.note-detail-editable-text,
+.note-detail-editable-text-editor {
+    padding: 0 !important;
+}
+
+html,
+body {
+    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) {
+    display: block !important;
+    overflow: auto;
+}
+
+#rest-pane,
+.note-split {
+    width: 100% !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;
+}
+
+span[style] {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+}
+
+/* Fix visibility of checkbox checkmarks
+    see https://github.com/TriliumNext/Notes/issues/901 */
+.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input[checked]::after {
+    /* fallback to default ck-editor green */
+    border-color: hsl(126, 64%, 41%);
+}
\ No newline at end of file
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 284e5afe3..8f883d8ff 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -1604,105 +1604,4 @@ body.electron.platform-darwin:not(.native-titlebar) .tab-row-container {
     border-color: var(--hover-item-border-color);
     background: var(--hover-item-background-color);
     color: var(--hover-item-text-color);
-}
-
-@media print {
-    .no-print,
-    .no-print *,
-    .tab-row-container,
-    #launcher-pane,
-    #left-pane,
-    #right-pane,
-    .title-row .note-icon-widget,
-    .title-row .button-widget,
-    .ribbon-container,
-    .scroll-padding-widget,
-    .spacer {
-        display: none !important;
-    }    
-    
-    body,
-    #root-widget,
-    #rest-pane > div.component:first-child,
-    .note-detail-printable,
-    .note-detail-editable-text-editor {
-        height: unset !important;
-        overflow: auto;
-    }
-
-    .note-title-widget input,
-    .note-detail-editable-text,
-    .note-detail-editable-text-editor {
-        padding: 0 !important;
-    }
-
-    html,
-    body {
-        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) {
-        display: block !important;
-        overflow: auto;
-    }
-    
-    #rest-pane,
-    .note-split {
-        width: 100% !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;
-    }
-
-    span[style] {
-        print-color-adjust: exact;
-        -webkit-print-color-adjust: exact;
-    }
-
-    /* Fix visibility of checkbox checkmarks
-       see https://github.com/TriliumNext/Notes/issues/901 */
-    .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input[checked]::after {
-        /* fallback to default ck-editor green */
-        border-color: hsl(126, 64%, 41%);
-    }
-
 }
\ No newline at end of file
diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index aa325834d..da74e65c8 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -62,6 +62,7 @@
 <% } %>
 
 <link href="<%= assetPath %>/stylesheets/style.css" rel="stylesheet">
+<link href="<%= assetPath %>/stylesheets/print.css" rel="stylesheet" media="print">
 
 <script>
     $("body").show();
diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs
index f40211efe..bcd712d28 100644
--- a/src/views/mobile.ejs
+++ b/src/views/mobile.ejs
@@ -129,6 +129,7 @@
     <link href="<%= themeCssUrl %>" rel="stylesheet">
 <% } %>
 <link href="<%= assetPath %>/stylesheets/style.css" rel="stylesheet">
+<link href="<%= assetPath %>/stylesheets/print.css" rel="stylesheet" media="print">
 
 <link rel="stylesheet" type="text/css" href="<%= assetPath %>/node_modules/boxicons/css/boxicons.min.css">