Fix print layout: eliminate flex/grid and fixed heights, use table-cell and overflow: visible
This commit is contained in:
+2
-702
@@ -334,419 +334,7 @@
|
||||
min-height: 580px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
A4 Print Engine (Android Chrome, iOS Safari, Desktop)
|
||||
========================================================================== */
|
||||
@page {
|
||||
size: A4 portrait;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media print {
|
||||
* {
|
||||
-webkit-print-color-adjust: exact !important;
|
||||
print-color-adjust: exact !important;
|
||||
color-adjust: exact !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
html,
|
||||
body.cookbook-body {
|
||||
width: 210mm !important;
|
||||
min-width: 210mm !important;
|
||||
max-width: 210mm !important;
|
||||
height: auto !important;
|
||||
min-height: 297mm !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background-color: var(--creme) !important;
|
||||
color: var(--schwarz) !important;
|
||||
display: block !important;
|
||||
overflow: visible !important;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
.cb-nav,
|
||||
.cb-filter-bar,
|
||||
.no-print,
|
||||
.no-print *,
|
||||
.empty-chapter-section,
|
||||
.empty-chapter-section *,
|
||||
.empty-chapter-box,
|
||||
.empty-chapter-box * {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
height: 0 !important;
|
||||
min-height: 0 !important;
|
||||
max-height: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
page-break-before: avoid !important;
|
||||
page-break-after: avoid !important;
|
||||
break-before: avoid !important;
|
||||
break-after: avoid !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.book-wrapper {
|
||||
display: block !important;
|
||||
width: 210mm !important;
|
||||
max-width: 210mm !important;
|
||||
min-width: 210mm !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
gap: 0 !important;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
/* Basis für JEDE A4-Seite im Druck: Exakt 1 Seite ohne Überlauf */
|
||||
.page {
|
||||
width: 210mm !important;
|
||||
max-width: 210mm !important;
|
||||
min-width: 210mm !important;
|
||||
height: 297mm !important;
|
||||
min-height: 297mm !important;
|
||||
max-height: 297mm !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background-color: var(--creme) !important;
|
||||
position: relative !important;
|
||||
box-sizing: border-box !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;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.page:last-child {
|
||||
page-break-after: auto !important;
|
||||
break-after: auto !important;
|
||||
}
|
||||
|
||||
/* 1. COVER IM DRUCK */
|
||||
.cover {
|
||||
width: 210mm !important;
|
||||
max-width: 210mm !important;
|
||||
min-width: 210mm !important;
|
||||
height: 297mm !important;
|
||||
min-height: 297mm !important;
|
||||
max-height: 297mm !important;
|
||||
box-sizing: border-box !important;
|
||||
padding: 30mm 15mm !important;
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
background-color: var(--creme) !important;
|
||||
background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 200 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 5 0 Q 15 200 0 400 T 10 800 L 20 800 Q 10 600 25 400 T 15 0 Z' fill='%231E4D3B' opacity='0.9'/%3E%3Cpath d='M 35 0 Q 25 250 40 500 T 30 800 L 55 800 Q 65 500 45 250 T 50 0 Z' fill='%231E4D3B' opacity='0.85'/%3E%3Cpath d='M 70 0 Q 80 300 65 600 T 75 800 L 85 800 Q 75 500 90 300 T 80 0 Z' fill='%231E4D3B' opacity='0.9'/%3E%3Cpath d='M 105 0 Q 95 200 110 400 T 100 800 L 125 800 Q 135 600 120 400 T 125 0 Z' fill='%231E4D3B' opacity='0.8'/%3E%3Cpath d='M 140 0 Q 150 250 135 500 T 145 800 L 155 800 Q 145 500 160 250 T 150 0 Z' fill='%231E4D3B' opacity='0.9'/%3E%3Cpath d='M 175 0 Q 165 300 180 600 T 170 800 L 195 800 Q 205 500 185 300 T 190 0 Z' fill='%231E4D3B' opacity='0.85'/%3E%3C/svg%3E") !important;
|
||||
background-size: 100% 100% !important;
|
||||
background-position: 0 0 !important;
|
||||
background-repeat: no-repeat !important;
|
||||
page-break-after: always !important;
|
||||
break-after: page !important;
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.cover-box {
|
||||
border: 3.5px solid var(--schwarz) !important;
|
||||
background-color: var(--creme) !important;
|
||||
box-shadow: none !important;
|
||||
transform: rotate(-1deg) !important;
|
||||
padding: 25mm 20mm !important;
|
||||
max-width: 82% !important;
|
||||
box-sizing: border-box !important;
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.cover-box h1 {
|
||||
font-family: var(--font-hand) !important;
|
||||
font-size: 3.5rem !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.6rem !important;
|
||||
color: var(--tannengruen) !important;
|
||||
margin-top: 14px !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* 2. TRENNSEITEN IM DRUCK */
|
||||
.divider {
|
||||
width: 210mm !important;
|
||||
max-width: 210mm !important;
|
||||
min-width: 210mm !important;
|
||||
height: 297mm !important;
|
||||
min-height: 297mm !important;
|
||||
max-height: 297mm !important;
|
||||
box-sizing: border-box !important;
|
||||
padding: 35mm 15mm !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
text-align: center !important;
|
||||
background-color: var(--creme) !important;
|
||||
page-break-after: always !important;
|
||||
break-after: page !important;
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.chapter-number {
|
||||
font-family: var(--font-hand) !important;
|
||||
font-size: 3rem !important;
|
||||
color: var(--altrosa) !important;
|
||||
margin-bottom: -8px !important;
|
||||
}
|
||||
|
||||
.divider h2 {
|
||||
font-family: var(--font-hand) !important;
|
||||
font-size: 3.8rem !important;
|
||||
color: var(--tannengruen) !important;
|
||||
margin: 0 0 25px 0 !important;
|
||||
line-height: 1.15 !important;
|
||||
}
|
||||
|
||||
.doodle-placeholder {
|
||||
width: 240px !important;
|
||||
height: 240px !important;
|
||||
border: 2.5px dashed var(--altrosa) !important;
|
||||
border-radius: 12px !important;
|
||||
background: rgba(210, 155, 155, 0.05) !important;
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
position: relative !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
.doodle-placeholder.has-illustration,
|
||||
.doodle-placeholder:has(img) {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* 3. EINZELNE REZEPTSEITE IM DRUCK */
|
||||
.recipe-page {
|
||||
width: 210mm !important;
|
||||
max-width: 210mm !important;
|
||||
min-width: 210mm !important;
|
||||
height: 297mm !important;
|
||||
min-height: 297mm !important;
|
||||
max-height: 297mm !important;
|
||||
box-sizing: border-box !important;
|
||||
padding: 12mm 16mm 10mm 16mm !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start !important;
|
||||
gap: 8px !important;
|
||||
background-color: var(--creme) !important;
|
||||
page-break-after: always !important;
|
||||
break-after: page !important;
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.recipe-header {
|
||||
border-bottom: 2px dashed rgba(30, 77, 59, 0.35) !important;
|
||||
padding-bottom: 6px !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.recipe-header-top {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: center !important;
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.recipe-chapter-badge {
|
||||
font-size: 0.82rem !important;
|
||||
padding: 2px 8px !important;
|
||||
margin-bottom: 0 !important;
|
||||
background: var(--altrosa-light) !important;
|
||||
border: 1.5px solid var(--altrosa) !important;
|
||||
}
|
||||
|
||||
.recipe-credits-badge {
|
||||
display: inline-block !important;
|
||||
font-family: var(--font-hand) !important;
|
||||
font-size: 0.78rem !important;
|
||||
color: #444 !important;
|
||||
padding: 1px 7px !important;
|
||||
background: rgba(30, 77, 59, 0.05) !important;
|
||||
border: 1px dashed rgba(30, 77, 59, 0.35) !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.recipe-title {
|
||||
font-size: 2rem !important;
|
||||
margin: 0 0 4px 0 !important;
|
||||
line-height: 1.15 !important;
|
||||
color: var(--tannengruen) !important;
|
||||
}
|
||||
|
||||
.recipe-meta-row {
|
||||
font-size: 0.88rem !important;
|
||||
gap: 12px !important;
|
||||
color: #4a453f !important;
|
||||
}
|
||||
|
||||
/* Im Druck IMMER 2 Spalten: Links Bild + Zutaten, Rechts Zubereitung */
|
||||
.recipe-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: 62mm 1fr !important;
|
||||
gap: 12mm !important;
|
||||
align-items: start !important;
|
||||
flex: 1 !important;
|
||||
}
|
||||
|
||||
.recipe-side {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
/* Bildgröße im Druck gezielt begrenzen (44mm hoch), damit Rezept auf 1 Seite passt */
|
||||
.recipe-photo-box {
|
||||
width: 100% !important;
|
||||
height: 44mm !important;
|
||||
max-height: 44mm !important;
|
||||
aspect-ratio: auto !important;
|
||||
border: 1.5px solid var(--schwarz) !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 6px !important;
|
||||
background: rgba(30, 77, 59, 0.04) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.recipe-photo-box img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.recipe-photo-empty {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ingredients-box {
|
||||
padding: 8px 12px !important;
|
||||
border: 1.5px solid 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.35rem !important;
|
||||
margin: 0 0 6px 0 !important;
|
||||
padding-bottom: 2px !important;
|
||||
border-bottom: 1.5px solid var(--altrosa) !important;
|
||||
color: var(--tannengruen) !important;
|
||||
}
|
||||
|
||||
.ingredients-list {
|
||||
gap: 3px !important;
|
||||
}
|
||||
|
||||
.ingredients-list li {
|
||||
font-size: 0.85rem !important;
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.recipe-main {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.instructions-steps {
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.step-badge {
|
||||
width: 22px !important;
|
||||
height: 22px !important;
|
||||
font-size: 0.9rem !important;
|
||||
background: var(--tannengruen) !important;
|
||||
color: var(--creme) !important;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 0.9rem !important;
|
||||
line-height: 1.34 !important;
|
||||
padding-top: 1px !important;
|
||||
}
|
||||
|
||||
.notes-box {
|
||||
padding: 6px 12px !important;
|
||||
font-size: 0.88rem !important;
|
||||
margin-top: 2px !important;
|
||||
background: #FFF9D2 !important;
|
||||
border: 1.5px solid #E2D172 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.notes-box-title {
|
||||
font-size: 0.92rem !important;
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.recipe-source {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.notes-box-empty {
|
||||
display: block !important;
|
||||
padding: 6px 12px !important;
|
||||
margin-top: 4px !important;
|
||||
background: #FFFDF0 !important;
|
||||
border: 1.5px dashed #D4C165 !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.notes-blank-lines {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 8px !important;
|
||||
margin-top: 4px !important;
|
||||
padding-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.notes-blank-line {
|
||||
border-bottom: 1.5px dotted rgba(80, 70, 50, 0.45) !important;
|
||||
height: 14px !important;
|
||||
width: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.print-only {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Einheitliche Druck-Architektur ohne gerätespezifische Stauchungs-Hacks */
|
||||
/* (Druckstile zentral in cookbook.html <style id="print-engine-styles">) */
|
||||
|
||||
|
||||
/* --- Cover Gestaltung --- */
|
||||
@@ -2530,294 +2118,6 @@ body.modal-open {
|
||||
box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* --- Druck-Spezifische Optimierungen (Exakte A4-Höhe 256mm & abwechselnde Seitenzahlen am Fuß) --- */
|
||||
@media print {
|
||||
@page {
|
||||
size: A4 portrait;
|
||||
margin: 0;
|
||||
}
|
||||
/* Hinweis: A4 Druckregeln befinden sich zentral in app/templates/cookbook.html (<style id="print-engine-styles">) */
|
||||
|
||||
/* Titelseite, Inhaltsverzeichnis und Seitenzahlen IM DRUCK SICHTBAR */
|
||||
.page.cover {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.page.toc-page {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* A4 Druck: 256mm Höhe passt absolut sicher in AirPrint (267mm) & Android Chrome ohne 2. Seite oder Abschneiden */
|
||||
.page, .cover, .toc-page, .divider, .recipe-page {
|
||||
width: 210mm !important;
|
||||
max-width: 210mm !important;
|
||||
min-width: 210mm !important;
|
||||
height: 256mm !important;
|
||||
min-height: 256mm !important;
|
||||
max-height: 256mm !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !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;
|
||||
}
|
||||
|
||||
/* Fußzeile mit Seitenzahl: Im Flex-Flow ganz unten (niemals im Zutatenblock oder schwebend) */
|
||||
.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;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
z-index: 100 !important;
|
||||
}
|
||||
|
||||
.divider {
|
||||
padding: 10mm 10mm 2mm 10mm !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.divider .chapter-number {
|
||||
font-family: var(--font-hand) !important;
|
||||
font-size: 2.8rem !important;
|
||||
color: var(--altrosa) !important;
|
||||
margin-bottom: -6px !important;
|
||||
}
|
||||
|
||||
.divider h2 {
|
||||
font-family: var(--font-hand) !important;
|
||||
font-size: 3.4rem !important;
|
||||
color: var(--tannengruen) !important;
|
||||
margin: 0 0 15px 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;
|
||||
}
|
||||
|
||||
.doodle-placeholder img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.divider .page-footer {
|
||||
position: absolute !important;
|
||||
bottom: 2mm !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
padding: 0 10mm !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 {
|
||||
font-family: var(--font-hand), 'Caveat', cursive !important;
|
||||
font-size: 1.15rem !important;
|
||||
font-weight: 700 !important;
|
||||
color: var(--tannengruen) !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.recipe-page {
|
||||
padding: 4mm 8mm 2mm 8mm !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.recipe-header {
|
||||
margin-bottom: 2.5mm !important;
|
||||
}
|
||||
|
||||
.recipe-title {
|
||||
font-size: 1.65rem !important;
|
||||
line-height: 1.15 !important;
|
||||
margin: 0 0 1.5mm 0 !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-source-line {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.recipe-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: 58mm 1fr !important;
|
||||
gap: 6mm !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
flex: 1 1 auto !important;
|
||||
margin-bottom: 1.5mm !important;
|
||||
}
|
||||
|
||||
.ingredients-box {
|
||||
padding: 4px 6px !important;
|
||||
}
|
||||
|
||||
.ingredients-list {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 1.5px !important;
|
||||
}
|
||||
|
||||
.ingredients-list li {
|
||||
font-size: 0.76rem !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
.ingredients-list li.ing-subheading {
|
||||
font-size: 0.80rem !important;
|
||||
font-weight: 700 !important;
|
||||
margin-top: 2px !important;
|
||||
padding-bottom: 1px !important;
|
||||
}
|
||||
|
||||
.recipe-photo-box {
|
||||
height: 32mm !important;
|
||||
max-height: 32mm !important;
|
||||
margin-bottom: 2mm !important;
|
||||
}
|
||||
|
||||
.recipe-photo-box img {
|
||||
width: 100% !important;
|
||||
height: 32mm !important;
|
||||
max-height: 32mm !important;
|
||||
object-fit: cover !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.recipe-photo-empty {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.portion-matrix-table {
|
||||
font-size: 0.70rem !important;
|
||||
line-height: 1.18 !important;
|
||||
}
|
||||
|
||||
.portion-matrix-table th {
|
||||
padding: 1px 2px !important;
|
||||
font-size: 0.68rem !important;
|
||||
}
|
||||
|
||||
.portion-matrix-table td {
|
||||
padding: 1px 2px !important;
|
||||
}
|
||||
|
||||
.recipe-grid:has(.has-portion-matrix) {
|
||||
grid-template-columns: 68mm 1fr !important;
|
||||
gap: 6mm !important;
|
||||
}
|
||||
|
||||
.instructions-steps {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 2.5px !important;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
padding: 2.5px 5px !important;
|
||||
margin-bottom: 2px !important;
|
||||
font-size: 0.80rem !important;
|
||||
line-height: 1.22 !important;
|
||||
display: flex !important;
|
||||
gap: 6px !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.step-badge {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
font-size: 0.72rem !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
flex: 1 1 auto !important;
|
||||
}
|
||||
|
||||
.notes-box {
|
||||
margin-top: 2mm !important;
|
||||
padding: 3px 6px !important;
|
||||
font-size: 0.76rem !important;
|
||||
line-height: 1.2 !important;
|
||||
background: #FFFDF0 !important;
|
||||
border: 1px dashed #D4C165 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.notes-box-title {
|
||||
font-weight: 700 !important;
|
||||
font-size: 0.78rem !important;
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.notes-box-empty {
|
||||
display: block !important;
|
||||
padding: 3px 6px !important;
|
||||
margin-top: 2mm !important;
|
||||
background: #FFFDF0 !important;
|
||||
border: 1px dashed #D4C165 !important;
|
||||
}
|
||||
|
||||
.notes-blank-lines {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 6px !important;
|
||||
margin-top: 2px !important;
|
||||
}
|
||||
|
||||
.notes-blank-line {
|
||||
border-bottom: 1px dotted rgba(100, 90, 70, 0.4) !important;
|
||||
height: 8px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.print-only {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.page:last-child {
|
||||
page-break-after: auto !important;
|
||||
break-after: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+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