diff --git a/cards/templates/cards/printable.html b/cards/templates/cards/printable.html index bfac88e..60da866 100644 --- a/cards/templates/cards/printable.html +++ b/cards/templates/cards/printable.html @@ -64,6 +64,30 @@ object-fit:contain; z-index:3; } + /* Remove all shadows and text-shadows when printing for clean print output */ + .toptrump-card, .toptrump-card * { box-shadow: none !important; text-shadow: none !important; } + + /* Draw cut guides directly on the card element so they align with + the card area even if the grid cell centers the card. Using a + pseudo-element on `.toptrump-card` guarantees the guide matches + the visible card box exactly. Add a small padding so the dashed + line doesn't sit flush against the printed card edge. */ + :root{ --cut-padding: 3mm; } + .print-card{ position: relative; } + .print-card .toptrump-card{ position:relative; overflow: visible !important; } + .print-card .toptrump-card::after{ + content: ""; + position: absolute; + top: calc(-1 * var(--cut-padding)); + left: calc(-1 * var(--cut-padding)); + width: calc(100% + calc(var(--cut-padding) * 2)); + height: calc(100% + calc(var(--cut-padding) * 2)); + border: 0.45mm dashed rgba(0,0,0,0.45); + pointer-events: none; + box-sizing: border-box; + border-radius: calc(var(--cut-padding) + 0px); + z-index: 1; + } } /* Small caption */ .caption{font-size:12px; color:#333; margin-top:6px}