75c8720b04
This makes sure the entire printed sheet is rendered before the browser attempts to print it, solving all manner of errors
157 lines
2.7 KiB
CSS
157 lines
2.7 KiB
CSS
.printed .page {
|
|
width: 100%;
|
|
padding: 6mm;
|
|
page-break-inside: avoid;
|
|
page-break-after: always;
|
|
font-size: 3mm;
|
|
}
|
|
|
|
.printed .shrink-to-fit {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.printed p {
|
|
margin-bottom: 1mm;
|
|
}
|
|
|
|
.printed .double-border {
|
|
position: relative;
|
|
padding: 11px 10px;
|
|
}
|
|
|
|
.printed .double-border > * {
|
|
position: relative;
|
|
}
|
|
|
|
.printed .double-border:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border: 16px solid transparent;
|
|
border-image-source: url(/png/doubleLineImageBorder.png);
|
|
border-image-slice: 110 126 fill;
|
|
border-image-repeat: stretch;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.printed .double-border.printedAbility {
|
|
padding: 11px 6px 0;
|
|
margin-bottom: 3mm;
|
|
}
|
|
|
|
.printed .double-border.printedAbility:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.printed .printedAbility .modifier {
|
|
position: relative;
|
|
top: 4px;
|
|
z-index: 1;
|
|
padding: 2px 32px;
|
|
background-image: url(/png/upwardPointingBorder.png);
|
|
background-position: center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
print-color-adjust: exact;
|
|
-webkit-print-color-adjust: exact;
|
|
}
|
|
|
|
.printed .octogon-border {
|
|
position: relative;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.printed .octogon-border:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border: 22px solid transparent;
|
|
border-image: url(/png/octogonBorder.png) 124 118 fill;
|
|
z-index: -1;
|
|
}
|
|
|
|
.printed iron-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.printed .shield-background {
|
|
background: url(/png/shieldBorder.png);
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
print-color-adjust: exact;
|
|
-webkit-print-color-adjust: exact;
|
|
padding: 4px 8px 8px;
|
|
width: 80px;
|
|
height: 91px;
|
|
position: relative;
|
|
top: -6px;
|
|
}
|
|
|
|
.printed .shield-background .paper-font-subhead {
|
|
width: 64px;
|
|
text-align: center;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.printed .paper-font-subhead {
|
|
font-size: 3mm !important;
|
|
line-height: 3.5mm !important;
|
|
font-weight: bold !important;
|
|
text-transform: uppercase !important;
|
|
}
|
|
.printed .paper-font-subhead.modifier {
|
|
font-size: 4mm !important;
|
|
line-height: 6mm !important;
|
|
}
|
|
.printed .paper-font-display1 {
|
|
font-size: 8mm !important;
|
|
line-height: 12mm !important;
|
|
}
|
|
|
|
@media screen {
|
|
.printed .page {
|
|
width: 210mm;
|
|
height: 297mm;
|
|
background: white;
|
|
margin: 8px;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
|
0 1px 5px 0 rgba(0, 0, 0, 0.12),
|
|
0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.printed .page-holder {
|
|
width: calc(210mm + 16px);
|
|
}
|
|
|
|
.printed {
|
|
overflow: auto;
|
|
padding-left:
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
app-drawer {
|
|
display: none;
|
|
}
|
|
app-header {
|
|
display: none;
|
|
}
|
|
.printed {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
background: #fff;
|
|
}
|
|
}
|