Fix print layout: eliminate flex/grid and fixed heights, use table-cell and overflow: visible
This commit is contained in:
+146
-160
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mein Kochbuch – What To Cook?</title>
|
||||
<link rel="stylesheet" href="/static/cookbook.css?v=4.4">
|
||||
<link rel="stylesheet" href="/static/cookbook.css?v=4.5.2">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📖</text></svg>">
|
||||
<style id="print-engine-styles">
|
||||
/* Auf dem Bildschirm: Cover, Inhaltsverzeichnis und Seitenzahlen ausblenden */
|
||||
@@ -16,13 +16,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Im Druck: Millimetergenaue DIN A4 Seitenhöhe (256mm) auf Apple, Android & Desktop */
|
||||
@media print {
|
||||
@page {
|
||||
size: A4 portrait;
|
||||
margin: 0;
|
||||
}
|
||||
/* ==========================================================================
|
||||
A4 Buchdruck-Engine: Universell für Apple iOS (AirPrint), Android Chrome & Desktop
|
||||
Verwendet saubere Block-/Table-Architektur ohne Flex-Height-Bugs und ohne Clipping.
|
||||
========================================================================== */
|
||||
@page {
|
||||
size: A4 portrait;
|
||||
margin: 10mm 12mm 10mm 12mm;
|
||||
}
|
||||
|
||||
@media print {
|
||||
* {
|
||||
-webkit-print-color-adjust: exact !important;
|
||||
print-color-adjust: exact !important;
|
||||
@@ -32,16 +35,18 @@
|
||||
|
||||
html, body.cookbook-body {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
min-width: 186mm !important;
|
||||
height: auto !important;
|
||||
min-height: auto !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: visible !important;
|
||||
background-color: var(--creme) !important;
|
||||
background: var(--creme) !important;
|
||||
color: var(--schwarz) !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Alle Bildschirmelemente ausblenden */
|
||||
.cb-nav,
|
||||
.cb-filter-bar,
|
||||
.no-print,
|
||||
@@ -49,264 +54,239 @@
|
||||
.mobile-nav-wrapper,
|
||||
#search-empty-state,
|
||||
.modal-backdrop,
|
||||
.cb-toast {
|
||||
.cb-toast,
|
||||
.recipe-photo-empty,
|
||||
.recipe-source-line,
|
||||
.empty-chapter-section {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
height: 0 !important;
|
||||
min-height: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.book-wrapper {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
gap: 0 !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Universelle 1-Seiten-Garantie: 256mm Höhe passt absolut sicher in iOS AirPrint (267mm) & Android Chrome ohne 2. Seite oder Abschneiden */
|
||||
/* Jede Seite ist ein blockweises A4-Blatt */
|
||||
.page {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
max-width: 210mm !important;
|
||||
min-width: 0 !important;
|
||||
height: 256mm !important;
|
||||
min-height: 256mm !important;
|
||||
max-height: 256mm !important;
|
||||
margin: 0 auto !important;
|
||||
padding: 4mm 8mm 2mm 8mm !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
min-height: auto !important;
|
||||
max-height: none !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
background-color: var(--creme) !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
page-break-after: always !important;
|
||||
break-after: page !important;
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: space-between !important;
|
||||
overflow: visible !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.page:first-child {
|
||||
page-break-before: avoid !important;
|
||||
break-before: avoid !important;
|
||||
}
|
||||
|
||||
.page:last-child {
|
||||
page-break-after: auto !important;
|
||||
break-after: auto !important;
|
||||
}
|
||||
|
||||
/* 1. COVER */
|
||||
.page.cover {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
max-width: 210mm !important;
|
||||
min-width: 0 !important;
|
||||
height: 256mm !important;
|
||||
min-height: 256mm !important;
|
||||
max-height: 256mm !important;
|
||||
padding: 10mm 10mm !important;
|
||||
box-sizing: border-box !important;
|
||||
display: block !important;
|
||||
padding-top: 55mm !important;
|
||||
text-align: center !important;
|
||||
page-break-after: always !important;
|
||||
break-after: page !important;
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.cover-box {
|
||||
padding: 18mm 14mm !important;
|
||||
display: inline-block !important;
|
||||
padding: 24mm 20mm !important;
|
||||
max-width: 82% !important;
|
||||
border: 3.5px solid var(--schwarz) !important;
|
||||
background-color: var(--creme) !important;
|
||||
transform: rotate(-1deg) !important;
|
||||
box-sizing: border-box !important;
|
||||
margin: auto !important;
|
||||
text-align: center !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
.cover-box h1 {
|
||||
font-family: var(--font-hand) !important;
|
||||
font-size: 3.2rem !important;
|
||||
font-size: 3.4rem !important;
|
||||
line-height: 1.15 !important;
|
||||
margin: 0 !important;
|
||||
color: var(--schwarz) !important;
|
||||
}
|
||||
|
||||
.cover-box p {
|
||||
font-family: var(--font-hand) !important;
|
||||
font-size: 1.5rem !important;
|
||||
font-size: 1.6rem !important;
|
||||
color: var(--tannengruen) !important;
|
||||
margin-top: 10px !important;
|
||||
margin-top: 12px !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* 2. INHALTSVERZEICHNIS (TOC) */
|
||||
.page.toc-page {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: space-between !important;
|
||||
width: 100% !important;
|
||||
max-width: 210mm !important;
|
||||
min-width: 0 !important;
|
||||
height: 256mm !important;
|
||||
min-height: 256mm !important;
|
||||
max-height: 256mm !important;
|
||||
padding: 8mm 10mm 2mm 10mm !important;
|
||||
box-sizing: border-box !important;
|
||||
display: block !important;
|
||||
padding-top: 2mm !important;
|
||||
page-break-after: always !important;
|
||||
break-after: page !important;
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.toc-header {
|
||||
margin-bottom: 4mm !important;
|
||||
margin-bottom: 5mm !important;
|
||||
}
|
||||
|
||||
.toc-columns {
|
||||
display: block !important;
|
||||
column-count: 2 !important;
|
||||
column-gap: 8mm !important;
|
||||
flex: 1 1 auto !important;
|
||||
overflow: hidden !important;
|
||||
margin-bottom: 2mm !important;
|
||||
margin-bottom: 4mm !important;
|
||||
}
|
||||
|
||||
.toc-chapter-group {
|
||||
break-inside: avoid !important;
|
||||
margin-bottom: 3mm !important;
|
||||
page-break-inside: avoid !important;
|
||||
margin-bottom: 3.5mm !important;
|
||||
}
|
||||
|
||||
.toc-recipe-item {
|
||||
margin-bottom: 2px !important;
|
||||
font-size: 0.82rem !important;
|
||||
line-height: 1.2 !important;
|
||||
line-height: 1.22 !important;
|
||||
}
|
||||
|
||||
/* 3. KAPITEL-TRENNSEITEN */
|
||||
.divider {
|
||||
width: 100% !important;
|
||||
max-width: 210mm !important;
|
||||
min-width: 0 !important;
|
||||
height: 256mm !important;
|
||||
min-height: 256mm !important;
|
||||
max-height: 256mm !important;
|
||||
padding: 10mm 10mm 2mm 10mm !important;
|
||||
box-sizing: border-box !important;
|
||||
position: relative !important;
|
||||
display: block !important;
|
||||
text-align: center !important;
|
||||
padding-top: 35mm !important;
|
||||
page-break-after: always !important;
|
||||
break-after: page !important;
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.divider .chapter-number {
|
||||
font-family: var(--font-hand) !important;
|
||||
font-size: 2.8rem !important;
|
||||
color: var(--altrosa) !important;
|
||||
margin-bottom: -6px !important;
|
||||
margin-bottom: -4px !important;
|
||||
}
|
||||
|
||||
.divider h2 {
|
||||
font-family: var(--font-hand) !important;
|
||||
font-size: 3.4rem !important;
|
||||
color: var(--tannengruen) !important;
|
||||
margin: 0 0 15px 0 !important;
|
||||
margin: 0 0 16px 0 !important;
|
||||
line-height: 1.15 !important;
|
||||
}
|
||||
|
||||
.doodle-placeholder {
|
||||
width: 120mm !important;
|
||||
height: 120mm !important;
|
||||
max-width: 120mm !important;
|
||||
max-height: 120mm !important;
|
||||
margin: 4mm auto !important;
|
||||
width: 110mm !important;
|
||||
height: 110mm !important;
|
||||
max-width: 110mm !important;
|
||||
max-height: 110mm !important;
|
||||
margin: 6mm auto 15mm auto !important;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.doodle-placeholder img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
max-width: 120mm !important;
|
||||
max-height: 120mm !important;
|
||||
max-width: 110mm !important;
|
||||
max-height: 110mm !important;
|
||||
object-fit: contain !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
.divider .page-footer {
|
||||
position: absolute !important;
|
||||
bottom: 2mm !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
padding: 0 10mm !important;
|
||||
}
|
||||
|
||||
/* 4. REZEPTSEITE */
|
||||
.recipe-page {
|
||||
width: 100% !important;
|
||||
max-width: 210mm !important;
|
||||
min-width: 0 !important;
|
||||
height: 256mm !important;
|
||||
min-height: 256mm !important;
|
||||
max-height: 256mm !important;
|
||||
padding: 4mm 8mm 2mm 8mm !important;
|
||||
box-sizing: border-box !important;
|
||||
position: relative !important;
|
||||
display: block !important;
|
||||
padding-top: 1mm !important;
|
||||
page-break-after: always !important;
|
||||
break-after: page !important;
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.recipe-header {
|
||||
margin-bottom: 2.5mm !important;
|
||||
border-bottom: 1.5px dashed rgba(30, 77, 59, 0.35) !important;
|
||||
padding-bottom: 2mm !important;
|
||||
margin-bottom: 3mm !important;
|
||||
}
|
||||
|
||||
.recipe-title {
|
||||
font-size: 1.65rem !important;
|
||||
font-size: 1.6rem !important;
|
||||
line-height: 1.15 !important;
|
||||
margin: 0 0 1.5mm 0 !important;
|
||||
color: var(--tannengruen) !important;
|
||||
}
|
||||
|
||||
.recipe-meta-row {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 2mm 5mm !important;
|
||||
font-size: 0.82rem !important;
|
||||
margin-bottom: 1.5mm !important;
|
||||
}
|
||||
|
||||
.recipe-header-top {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.recipe-source-line {
|
||||
display: none !important;
|
||||
font-size: 0.80rem !important;
|
||||
color: #4a453f !important;
|
||||
}
|
||||
|
||||
/* 2-Spalten-Layout als stabile CSS-Tabelle (verhindert iOS-Flex/Grid-Bugs) */
|
||||
.recipe-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: 58mm 1fr !important;
|
||||
gap: 6mm !important;
|
||||
display: table !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
flex: 1 1 auto !important;
|
||||
margin-bottom: 1.5mm !important;
|
||||
table-layout: fixed !important;
|
||||
border-collapse: collapse !important;
|
||||
margin-bottom: 2mm !important;
|
||||
}
|
||||
|
||||
.recipe-grid:has(.has-portion-matrix) {
|
||||
grid-template-columns: 68mm 1fr !important;
|
||||
gap: 6mm !important;
|
||||
.recipe-side {
|
||||
display: table-cell !important;
|
||||
width: 62mm !important;
|
||||
vertical-align: top !important;
|
||||
padding-right: 6mm !important;
|
||||
}
|
||||
|
||||
.recipe-grid:has(.has-portion-matrix) .recipe-side {
|
||||
width: 72mm !important;
|
||||
}
|
||||
|
||||
.recipe-main {
|
||||
display: table-cell !important;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.recipe-photo-box {
|
||||
width: 100% !important;
|
||||
height: 32mm !important;
|
||||
max-height: 32mm !important;
|
||||
margin-bottom: 2mm !important;
|
||||
margin-bottom: 2.5mm !important;
|
||||
}
|
||||
|
||||
.recipe-photo-box img {
|
||||
@@ -315,20 +295,30 @@
|
||||
max-height: 32mm !important;
|
||||
object-fit: cover !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.recipe-photo-empty {
|
||||
display: none !important;
|
||||
border: 1px solid rgba(34, 34, 34, 0.2) !important;
|
||||
}
|
||||
|
||||
.ingredients-box {
|
||||
padding: 4px 6px !important;
|
||||
border: 1px dashed rgba(30, 77, 59, 0.4) !important;
|
||||
background: rgba(255, 255, 255, 0.7) !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.section-hand-title {
|
||||
font-size: 1.15rem !important;
|
||||
margin: 0 0 3px 0 !important;
|
||||
color: var(--tannengruen) !important;
|
||||
border-bottom: 1.5px solid var(--altrosa) !important;
|
||||
}
|
||||
|
||||
.ingredients-list {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 1.5px !important;
|
||||
list-style: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.ingredients-list li {
|
||||
@@ -346,6 +336,7 @@
|
||||
.portion-matrix-table {
|
||||
font-size: 0.70rem !important;
|
||||
line-height: 1.18 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.portion-matrix-table th {
|
||||
@@ -378,6 +369,12 @@
|
||||
height: 16px !important;
|
||||
font-size: 0.72rem !important;
|
||||
flex-shrink: 0 !important;
|
||||
background: var(--tannengruen) !important;
|
||||
color: var(--creme) !important;
|
||||
border-radius: 50% !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
@@ -425,38 +422,23 @@
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 5. SEITENZAHL AM FUẞ DER SEITE */
|
||||
.page-footer {
|
||||
display: flex !important;
|
||||
margin-top: auto !important;
|
||||
position: relative !important;
|
||||
bottom: auto !important;
|
||||
border: none !important;
|
||||
padding: 1.5mm 0 1mm 0 !important;
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
margin-top: 4mm !important;
|
||||
padding-top: 2mm !important;
|
||||
border-top: 1px dotted rgba(30, 77, 59, 0.3) !important;
|
||||
box-sizing: border-box !important;
|
||||
z-index: 100 !important;
|
||||
clear: both !important;
|
||||
}
|
||||
|
||||
.page-footer.page-even {
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
justify-content: flex-start !important;
|
||||
text-align: left !important;
|
||||
padding-left: 3mm !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.page-footer.page-odd {
|
||||
right: auto !important;
|
||||
left: auto !important;
|
||||
justify-content: flex-end !important;
|
||||
text-align: right !important;
|
||||
padding-right: 3mm !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.page-footer .page-number {
|
||||
@@ -464,12 +446,16 @@
|
||||
font-size: 1.15rem !important;
|
||||
font-weight: 700 !important;
|
||||
color: var(--tannengruen) !important;
|
||||
line-height: 1 !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.page:last-child {
|
||||
page-break-after: auto !important;
|
||||
break-after: auto !important;
|
||||
.divider .page-footer {
|
||||
border-top: none !important;
|
||||
margin-top: 15mm !important;
|
||||
}
|
||||
|
||||
.cover .page-footer {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user