Improve cut marks

- paler
- all corners
- back instead of front

Author: matt17r

app/views/admin/tokens/_cut_marks.html.erb

@@ -24,13 +24,17 @@
   <% x_positions.each do |x| %>
     <div class="cut-mark v" style="left: <%= x %>mm; top: 0mm;"></div>
     <div class="cut-mark v" style="left: <%= x %>mm; bottom: 0mm;"></div>
-    <div class="cut-mark v short" style="left: <%= x %>mm; top: <%= page_centre_y %>mm;"></div>
+  <% end %>
+
+  <%# Short vertical marks at centre intersecting with gaps %>
+  <% gap_y_positions.each do |y| %>
+    <div class="cut-mark v short" style="left: <%= page_centre_x %>mm; top: <%= y - 1 %>mm;"></div>
   <% end %>
 
   <%# Horizontal marks at row positions %>
   <% y_positions.each do |y| %>
     <div class="cut-mark h" style="top: <%= y %>mm; left: 0mm;"></div>
     <div class="cut-mark h" style="top: <%= y %>mm; right: 0mm;"></div>
-    <div class="cut-mark h" style="top: <%= y %>mm; left: <%= page_centre_x - 9 %>mm;"></div>
+    <div class="cut-mark h short" style="top: <%= y %>mm; left: <%= page_centre_x - 1 %>mm;"></div>
   <% end %>
 </div>

app/views/admin/tokens/print.html.erb

@@ -76,7 +76,7 @@
 
     .cut-mark {
       position: absolute;
-      background: black;
+      background: #d1d5db;
       print-color-adjust: exact;
       -webkit-print-color-adjust: exact;
     }
@@ -95,6 +95,10 @@
       height: 2mm;
     }
 
+    .cut-mark.h.short {
+      width: 2mm;
+    }
+
     .card-front {
       width: 100%;
       height: 100%;
@@ -226,7 +230,6 @@
   <% @tokens.each_slice(10).with_index do |page_tokens, page_index| %>
     <!-- Front side -->
     <div class="page">
-      <%= render partial: 'cut_marks' %>
       <div class="cards-container">
         <div class="cards-grid">
           <% page_tokens.each do |token| %>
@@ -251,6 +254,7 @@
 
     <!-- Back side -->
     <div class="page back">
+      <%= render partial: 'cut_marks' %>
       <div class="cards-container">
         <div class="cards-grid">
           <% page_tokens.each do |token| %>