.label-field { position: absolute; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; } .print-logo img, .print-logo-large img { width: 100%; height: 100%; object-fit: contain; image-rendering: -webkit-optimize-contrast; } .print-barcode img, .print-barcode-large img { width: 100%; height: 100%; object-fit: contain; } .print-title, .print-genre, .print-style, .print-description, .print-bottom-info, .print-title-large, .print-genre-large, .print-style-large, .print-description-large, .print-bottom-info-large { display: flex; align-items: flex-end; } /* Buffer genre/style away from the QR code on the right */ .print-genre, .print-genre-large, .print-style, .print-style-large { padding-right: 1.5mm; box-sizing: border-box; } /* Bottom info: pipe separators via CSS */ .print-bottom-info .country::before, .print-bottom-info .label::before, .print-bottom-info-large .country::before, .print-bottom-info-large .label::before { content: ' | '; white-space: pre; } /* Bottom info: year is fixed-width when present */ .print-bottom-info .year, .print-bottom-info-large .year { flex-shrink: 0; } /* Bottom info: country and label auto-fit */ .print-bottom-info .country, .print-bottom-info-large .country { flex-shrink: 0; } .print-bottom-info .label, .print-bottom-info-large .label { flex: 1; min-width: 0; } /* When no year: hide year span and remove country's leading pipe */ .print-bottom-info.no-year .year, .print-bottom-info-large.no-year .year { display: none; } .print-bottom-info.no-year .country::before, .print-bottom-info-large.no-year .country::before { content: none; } .print-price, .print-condition, .print-barcode, .print-price-large, .print-condition-large, .print-barcode-large { display: flex; align-items: center; justify-content: right; }