BERGVOLT/Materialschein
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign print/PDF export to match official BergVOLT invoice branding
Build and Deploy / version (push) Successful in 2s
Details
Build and Deploy / build (push) Successful in 7s
Details
Build and Deploy / deploy (push) Successful in 1s
Details

Browse Source 
Neuer Druck-Header mit dem Firmenlogo und der cyanen Diagonalfläche wie auf
der Rechnung, Adress-/Infoblock im gleichen Tabellenstil, Materialtabelle mit
durchgezogenen Rahmenlinien statt Karten-Optik, Firmenfußzeile (Adresse,
Bank, Firmenbuch, Kontakt) am Ende. Die interaktiven Karten (Baustelle-Formular,
Kabelrechner, Manuell-Eintrag) bleiben beim Drucken ausgeblendet, nur die
neuen Print-only-Blöcke werden sichtbar.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Fidelis Huber
2026-08-21 19:23:14 +02:00
co-authored by Claude Sonnet 5
parent 7654a91dcf
commit ed7b3d0ea4
2 changed files with 90 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/styles.css
+46 -8
View File
@@ -153,18 +153,56 @@ table.reftab tr:hover td{background:rgba(0,200,216,.06);cursor:pointer}
@keyframes sp{to{transform:rotate(360deg)}}
.print-bar{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(90deg,#081420,#0c1c30);border-top:1px solid var(--bor);padding:14px 20px;display:flex;gap:10px;justify-content:center;box-shadow:0 -2px 20px rgba(0,0,0,.4);z-index:99}
.print-header{display:none}
/* ── Druck-Layout: BergVOLT-Briefdesign, angelehnt an die offizielle Rechnung ── */
.print-doc{display:none}
.pbanner{position:relative;background:#0a0a0a;height:90px;overflow:hidden;display:flex;align-items:center;justify-content:flex-end;padding:0 30px}
.pbanner::before{content:'';position:absolute;left:0;top:0;bottom:0;width:62%;background:var(--cyan);clip-path:polygon(0 0,46% 0,14% 100%,0 100%)}
.pbanner::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--cyan)}
.plogo-wrap{position:relative;z-index:1;text-align:right}
.plogo{color:#fff;font-size:28px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.plogo span{color:var(--cyan)}
.plogo-sub{color:var(--cyan);font-size:8px;letter-spacing:5px;font-weight:700;margin-top:2px}
.ptop{display:flex;justify-content:space-between;gap:24px;padding:24px 4px 20px}
.paddr{font-size:12px;line-height:1.6;color:#000}
.paddr .lbl{font-size:9px;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.paddr .name{font-weight:700;font-size:13px}
.paddr .pnote{color:#555;margin-top:4px}
table.pinfo{border:1px solid #ccc;border-collapse:collapse;min-width:250px;height:fit-content}
table.pinfo td{padding:5px 11px;border-bottom:1px solid #e2e2e2;font-size:11px;color:#000}
table.pinfo tr:first-child td{background:#eee;font-weight:800;font-size:13px;border-bottom:1px solid #ccc}
table.pinfo tr:last-child td{border-bottom:none}
table.pinfo td:first-child{color:#666}
table.pinfo td:last-child{text-align:right;font-weight:600}
.psubject{font-weight:700;margin:0 4px 14px;font-size:13px;color:#000}
.psum-line{display:flex;justify-content:flex-end;margin-top:6px}
.psum-line table{border-collapse:collapse;min-width:220px}
.psum-line td{padding:8px 12px;font-size:12px;border-top:1.5px solid #1a1a1a;background:#eee;font-weight:800;color:#000}
.psum-line td:last-child{text-align:right}
.pfoot-note{margin:34px 4px 0;font-size:10.5px;color:#666;line-height:1.6}
.pfooter{display:none}
@media print{
header,.tabs,.print-bar,.detail-back,.kab-card,.manual-card,.del-btn,.qty-input,.notiz-input,
header,.tabs,.print-bar,.detail-back,.kab-card,.manual-card,.baustelle-card,.card-hint,.del-btn,.qty-input,.notiz-input,
.chk-col,.retour-panel,.btn-retour-toggle{display:none!important}
body{background:#fff;color:#000}
.card{box-shadow:none;border:1px solid #ccc;background:#fff;page-break-inside:avoid}
.print-header{display:block!important;margin-bottom:12px}
.table-wrap{border:none;overflow:visible}
.mat-table{min-width:0}
.mat-table th{background:#f0f0f0;color:#000}
.mat-table td{color:#000;border-bottom:1px solid #ddd}
main{max-width:none;padding:0;margin:0}
.card{box-shadow:none;border:none;background:#fff;padding:0 4px;page-break-inside:avoid}
.card-title{display:none}
.print-doc{display:block}
.pfooter{display:flex;background:#0a0a0a;color:#fff;padding:14px 20px;justify-content:space-between;gap:16px;font-size:9.5px;line-height:1.7;margin-top:30px;position:relative}
.pfooter::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--cyan)}
.pfooter b{display:block;color:var(--cyan);font-size:9px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px}
.table-wrap{border:none;overflow:visible;margin:0 4px}
.mat-table{min-width:0;width:100%}
.mat-table th{background:#fff;color:#000;border-top:1.5px solid #1a1a1a;border-bottom:1.5px solid #1a1a1a;font-size:10px;padding:7px 8px}
.mat-table td{color:#000;border-bottom:1px solid #e2e2e2;padding:7px 8px;font-size:11.5px}
.art-cell,.pos-nr{color:#555}
.print-only{display:inline}
}