Print CSS

cista-front/src/assets/main.css

@@ -2,11 +2,10 @@
 
 :root {
   --primary-color: #000;
-  --primary-background: #eef;
-  --header-background: #000;
+  --primary-background: #ddd;
+  --header-background: #246;
   --header-color: #ccc;
   --primary-color: #000;
-  --secondary-color: #333;
   --accent-color: #f80;
   --transition-time: 0.2s;
 }
@@ -14,11 +13,11 @@
   :root {
     --primary-color: #ddd;
     --primary-background: #003;
-    --primary-color: #fff;
-    --secondary-color: #ccc;
+    --header-background: #000;
+    --header-color: #ccc;
   }
 }
-@media screen and (orientation: portrait) {
+@media screen and (orientation: portrait) and (max-width: 600px) {
   .size,
   .modified {
     display: none;
@@ -40,6 +39,49 @@
     font-size: 2rem;
   }
 }
+@media print {
+  :root {
+    --primary-color: black;
+    --primary-background: transparent;
+    --header-background: transparent;
+    --header-color: black;
+  }
+  nav, .menu {
+    display: none;
+  }
+  .breadcrumb > a {
+    color: black !important;
+    background: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    clip-path: none !important;
+    max-width: none !important;
+  }
+  .breadcrumb > a::after { content: '/'; }
+  .breadcrumb svg { fill: black !important; }
+  main {
+    height: auto !important;
+    padding-bottom: 0 !important;
+  }
+  thead tr {
+    position: static !important;
+    background: none !important;
+    border-bottom: 1pt solid black !important;
+  }
+  .selection {
+    min-width: 0 !important;
+    padding: 0 !important;
+  }
+  .selection input { display: none }
+  .selection input:checked { display: inherit }
+}
+
+/* Hide scrollbar for all browsers */
+main::-webkit-scrollbar { display: none; }
+main {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
 body {
   background-color: var(--primary-background);
   font-size: 1rem;
@@ -86,8 +128,8 @@ table {
   flex-direction: column;
 }
 main {
-  height: calc(100svh - 9rem);
-  padding-bottom: 3rem;
+  height: calc(100svh - 9rem);  /* fill almost the rest of the screen after header */
+  padding-bottom: 3rem;  /* convenience space on the bottom */
   overflow-y: scroll;
 }
 thead tr {