.printed .page { width: 100%; padding: 6mm; page-break-inside: avoid; page-break-after: always; } .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 18px; 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; min-width: 16px; height: 16px; min-height: 16px; } .printed .proficiencies, .printed .attacks, .printed .background { overflow: hidden; } .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; } .printed .shield-background .paper-font-subhead { width: 64px; text-align: center; line-height: 1.1; } .printed { font-size: 3mm; } .printed .paper-font-body2 { font-size: 3mm; line-height: 4mm; } .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: 7mm !important; line-height: 12mm !important; } .printed .paper-font-headline { font-size: 5mm !important; line-height: 6mm !important; } .printed .lined-background { background-image: url(/png/horizontalLine.png); background-size: 100% 4mm; print-color-adjust: exact; -webkit-print-color-adjust: exact; } @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; } .printed .page-holder { height: 100% } .printed .page { height: 100%; } }