Improved printing on some browsers

app/imports/client/ui/creature/character/printedCharacterSheet/CharacterSheetPrinted.vue

@@ -32,7 +32,7 @@
         light
       >
         <div class="page pa-3">
-          <div class="px-3 d-flex align-center">
+          <div class="title-block px-3 d-flex align-center">
             <div class="logo-background" />
             <div class="creature-name mr-3">
               {{ creature.name }}
@@ -259,11 +259,10 @@ export default {
 .character-sheet-printed .column-layout>div {
   position:relative;
 }
-.character-sheet-printed .column-layout>div>* {
-  -webkit-column-break-inside: avoid;
-  break-inside: avoid;
+.character-sheet-printed .column-layout > div > * {
   page-break-inside: avoid;
 }
+
 .character-sheet-printed .inactive {
   opacity: 1 !important;
 }
@@ -288,38 +287,26 @@ export default {
 .character-sheet-printed .double-border {
   position: relative;
   padding: 11px 10px;
-}
-
-.character-sheet-printed .double-border::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
   border-image-source: url(/images/print/doubleLineImageBorder.png);
   border-image-slice: 110 126 fill;
   border-image-width: 16px;
   border-image-repeat: stretch;
-  box-sizing: content-box;
-  z-index: -1;
 }
 
 .character-sheet-printed .octagon-border {
   position: relative;
   padding: 4px 20px;
-}
-
-.character-sheet-printed .octagon-border::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
   border-image: url(/images/print/octagonBorder.png) 124 118 fill;
   border-image-width: 22px;
-  z-index: -1;
+}
+
+.character-sheet-printed .span-all {
+  page-break-after: avoid;
+  break-after: avoid;
+}
+.span-all + div {
+  page-break-before: avoid;
+  break-before: avoid;
 }
 
 .character-sheet-printed .stats .label {
@@ -348,13 +335,32 @@ export default {
   }
 }
 @media print {
+  @page { 
+      size: auto;
+      margin: 8mm 8mm 8mm 8mm;  
+  }
+  body {  
+      margin: 0;  
+  }
+  .character-sheet-printed .page {
+    width: 100%;
+    padding: 0 !important;
+  }
+  .character-sheet-printed .column-layout {
+    padding: 4px 0 !important;
+  }
+  .character-sheet-printed .title-block {
+    padding-left: 0 !important;
+    padding-right: 4px !important;
+  }
   .v-main, .v-application, .v-application--wrap, .character-sheet-printed {
-    display: block;
+    display: block !important;
+    background-color: white !important;
   }
-  header {
-    display: none !important;
+  html {
+    background-color: white !important;
   }
-  nav {
+  header, nav, .v-snack, .dialog-stack {
     display: none !important;
   }
   .v-main {

app/imports/client/ui/creature/character/printedCharacterSheet/PrintedInventory.vue

@@ -1,7 +1,6 @@
 <template lang="html">
   <div
     class="inventory"
-    style="page-break-before: always;"
   >
     <column-layout wide-columns>
       <div class="span-all">

app/imports/client/ui/creature/character/printedCharacterSheet/PrintedSpells.vue

@@ -1,7 +1,6 @@
 <template lang="html">
   <div
     class="spells"
-    style="page-break-before: always;"
   >
     <column-layout wide-columns>
       <div class="span-all">

app/imports/client/ui/creature/character/printedCharacterSheet/PrintedStats.vue

@@ -534,21 +534,10 @@ export default {
   position: relative;
   aspect-ratio: 0.87;
   padding: 12px;
-}
-.shield-border::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
   background: url(/images/print/shieldBorder.png);
-  print-color-adjust: exact;
-  -webkit-print-color-adjust: exact;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
-  z-index: -1;
 }
 .shield-number-label {
   align-items: center !important;
@@ -577,23 +566,13 @@ export default {
   font-size: 10pt;
   position: relative;
   padding: 0 16px;
-  z-index: 2;
-}
-.ability .bottom::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
   border: solid white;
   border-image-source: url(/images/print/upwardPointingBorder.png);
   border-image-slice: 0 85 fill;
   border-image-width: 0 16px;
   border-image-outset: 0px 0px;
   border-image-repeat: stretch;
-  box-sizing: content-box;
-  z-index: -1;
+  z-index: 2;
 }
 .ability .name {
   margin-top: 10px;