kobold-ai/wtc.waiswuaschd.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restore rich card backgrounds and 14mm top breathing margin for print engine v4.5.4

Browse Source
This commit is contained in:
kobold-ai
2026-10-14 21:45:55 +02:00
parent aa78de0cbc
commit 2b8c4a35cf
1 changed files with 45 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/cookbook.html
+45 -38
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein Kochbuch – What To Cook?</title> <title>Mein Kochbuch – What To Cook?</title>
<link rel="stylesheet" href="/static/cookbook.css?v=4.5.3"> <link rel="stylesheet" href="/static/cookbook.css?v=4.5.4">
<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>"> <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"> <style id="print-engine-styles">
/* Auf dem Bildschirm: Cover, Inhaltsverzeichnis und Seitenzahlen ausblenden */ /* Auf dem Bildschirm: Cover, Inhaltsverzeichnis und Seitenzahlen ausblenden */
@@ -18,7 +18,7 @@
/* ========================================================================== /* ==========================================================================
A4 Buchdruck-Engine: Universell für Apple iOS (AirPrint), Android Chrome & Desktop A4 Buchdruck-Engine: Universell für Apple iOS (AirPrint), Android Chrome & Desktop
Jede Seite ist exakt 1 Blatt A4 (286mm). Kein Rahmen, Seitenzahl fest in der Ecke. Jede Seite ist exakt 1 Blatt A4 (282mm). Schöne Ränder, echte Hintergründe.
========================================================================== */ ========================================================================== */
@page { @page {
size: A4 portrait; size: A4 portrait;
@@ -31,8 +31,6 @@
print-color-adjust: exact !important; print-color-adjust: exact !important;
color-adjust: exact !important; color-adjust: exact !important;
box-sizing: border-box !important; box-sizing: border-box !important;
box-shadow: none !important;
text-shadow: none !important;
} }
html, body.cookbook-body { html, body.cookbook-body {
@@ -41,8 +39,8 @@
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
overflow: visible !important; overflow: visible !important;
background: var(--creme) !important; background: #FAF6F0 !important;
background-color: #FAF7F2 !important; background-color: #FAF6F0 !important;
color: var(--schwarz) !important; color: var(--schwarz) !important;
display: block !important; display: block !important;
} }
@@ -77,21 +75,21 @@
overflow: visible !important; overflow: visible !important;
} }
/* Jede Seite ist ein eigenständiges DIN A4 Blatt mit fester 286mm Höhe */ /* Jede Seite ist ein eigenständiges DIN A4 Blatt mit 14mm Kopfabstand und 282mm Höhe */
.page { .page {
display: block !important; display: block !important;
position: relative !important; position: relative !important;
width: 210mm !important; width: 210mm !important;
max-width: 210mm !important; max-width: 210mm !important;
min-width: 210mm !important; min-width: 210mm !important;
height: 286mm !important; height: 282mm !important;
min-height: 286mm !important; min-height: 282mm !important;
max-height: 286mm !important; max-height: 282mm !important;
margin: 0 auto !important; margin: 0 auto !important;
padding: 8mm 12mm 18mm 12mm !important; padding: 14mm 14mm 16mm 14mm !important;
box-sizing: border-box !important; box-sizing: border-box !important;
background: var(--creme) !important; background: #FAF6F0 !important;
background-color: #FAF7F2 !important; background-color: #FAF6F0 !important;
box-shadow: none !important; box-shadow: none !important;
border: none !important; border: none !important;
outline: none !important; outline: none !important;
@@ -116,7 +114,7 @@
/* 1. COVER */ /* 1. COVER */
.page.cover { .page.cover {
display: block !important; display: block !important;
padding-top: 55mm !important; padding: 50mm 14mm 16mm 14mm !important;
text-align: center !important; text-align: center !important;
page-break-after: always !important; page-break-after: always !important;
break-after: page !important; break-after: page !important;
@@ -155,7 +153,7 @@
/* 2. INHALTSVERZEICHNIS (TOC) */ /* 2. INHALTSVERZEICHNIS (TOC) */
.page.toc-page { .page.toc-page {
display: block !important; display: block !important;
padding-top: 2mm !important; padding: 14mm 14mm 16mm 14mm !important;
page-break-after: always !important; page-break-after: always !important;
break-after: page !important; break-after: page !important;
page-break-inside: avoid !important; page-break-inside: avoid !important;
@@ -189,7 +187,7 @@
.divider { .divider {
display: block !important; display: block !important;
text-align: center !important; text-align: center !important;
padding-top: 35mm !important; padding: 38mm 14mm 16mm 14mm !important;
page-break-after: always !important; page-break-after: always !important;
break-after: page !important; break-after: page !important;
page-break-inside: avoid !important; page-break-inside: avoid !important;
@@ -234,7 +232,7 @@
/* 4. REZEPTSEITE */ /* 4. REZEPTSEITE */
.recipe-page { .recipe-page {
display: block !important; display: block !important;
padding-top: 1mm !important; padding: 14mm 14mm 16mm 14mm !important;
page-break-after: always !important; page-break-after: always !important;
break-after: page !important; break-after: page !important;
page-break-inside: avoid !important; page-break-inside: avoid !important;
@@ -304,9 +302,11 @@
} }
.ingredients-box { .ingredients-box {
padding: 2px 4px !important; padding: 5px 8px !important;
background: transparent !important; background: rgba(255, 255, 255, 0.75) !important;
border: none !important; background-color: rgba(255, 255, 255, 0.75) !important;
border: 1.5px dashed rgba(30, 77, 59, 0.4) !important;
border-radius: 8px !important;
} }
.section-hand-title { .section-hand-title {
@@ -359,22 +359,26 @@
} }
.step-card { .step-card {
padding: 2.5px 5px !important; padding: 3px 6px !important;
margin-bottom: 2px !important; margin-bottom: 2.5px !important;
font-size: 0.80rem !important; font-size: 0.80rem !important;
line-height: 1.22 !important; line-height: 1.22 !important;
display: flex !important; display: flex !important;
gap: 6px !important; gap: 6px !important;
align-items: flex-start !important; align-items: flex-start !important;
background: rgba(255, 255, 255, 0.6) !important;
background-color: rgba(255, 255, 255, 0.6) !important;
border-radius: 6px !important;
} }
.step-badge { .step-badge {
width: 16px !important; width: 17px !important;
height: 16px !important; height: 17px !important;
font-size: 0.72rem !important; font-size: 0.72rem !important;
flex-shrink: 0 !important; flex-shrink: 0 !important;
background: var(--tannengruen) !important; background: #1E4D3B !important;
color: var(--creme) !important; background-color: #1E4D3B !important;
color: #FAF6F0 !important;
border-radius: 50% !important; border-radius: 50% !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
@@ -386,12 +390,13 @@
} }
.notes-box { .notes-box {
margin-top: 2mm !important; margin-top: 2.5mm !important;
padding: 3px 6px !important; padding: 4px 8px !important;
font-size: 0.76rem !important; font-size: 0.76rem !important;
line-height: 1.2 !important; line-height: 1.2 !important;
background: #FFFDF0 !important; background: #FFF9D2 !important;
border: 1px dashed #D4C165 !important; background-color: #FFF9D2 !important;
border: 1.5px dashed #D4C165 !important;
border-radius: 6px !important; border-radius: 6px !important;
} }
@@ -403,10 +408,12 @@
.notes-box-empty { .notes-box-empty {
display: block !important; display: block !important;
padding: 3px 6px !important; padding: 4px 8px !important;
margin-top: 2mm !important; margin-top: 2.5mm !important;
background: #FFFDF0 !important; background: #FFF9D2 !important;
border: 1px dashed #D4C165 !important; background-color: #FFF9D2 !important;
border: 1.5px dashed #D4C165 !important;
border-radius: 6px !important;
} }
.notes-blank-lines { .notes-blank-lines {
@@ -429,9 +436,9 @@
/* 5. SEITENZAHL FEST IN DEN ECKEN DES BLATTES VERANKERT */ /* 5. SEITENZAHL FEST IN DEN ECKEN DES BLATTES VERANKERT */
.page-footer { .page-footer {
position: absolute !important; position: absolute !important;
bottom: 7mm !important; bottom: 6mm !important;
left: 12mm !important; left: 14mm !important;
right: 12mm !important; right: 14mm !important;
width: auto !important; width: auto !important;
display: block !important; display: block !important;
border: none !important; border: none !important;
@@ -453,7 +460,7 @@
font-family: var(--font-hand), 'Caveat', cursive !important; font-family: var(--font-hand), 'Caveat', cursive !important;
font-size: 1.25rem !important; font-size: 1.25rem !important;
font-weight: 700 !important; font-weight: 700 !important;
color: var(--tannengruen) !important; color: #1E4D3B !important;
display: inline-block !important; display: inline-block !important;
} }