Build CutList image / build-and-push (push) Successful in 19s
Keep part numbers and their dividers visible in monochrome print output, and include the selected cutting tool and kerf on the printed report.
413 lines
7.7 KiB
CSS
413 lines
7.7 KiB
CSS
/* CutList Report Styles - Print Friendly */
|
|
|
|
.cut-list-report {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.report-header {
|
|
margin-bottom: 2rem;
|
|
border-bottom: 2px solid #333;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.report-header h1 {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
color: #333;
|
|
}
|
|
|
|
.meta-info {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.meta-row {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.meta-row span:first-child {
|
|
font-weight: 600;
|
|
min-width: 120px;
|
|
display: inline-block;
|
|
color: #555;
|
|
}
|
|
|
|
.bin-section {
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
margin: 1rem 0;
|
|
padding: 1rem;
|
|
page-break-inside: avoid;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.bin-section h2 {
|
|
font-size: 1.1rem;
|
|
margin: 0 0 0.75rem 0;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid #eee;
|
|
color: #333;
|
|
}
|
|
|
|
.cuts-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.cuts-table th,
|
|
.cuts-table td {
|
|
padding: 0.5rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.cuts-table th {
|
|
background: #f5f5f5;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
color: #666;
|
|
}
|
|
|
|
.cuts-table tbody tr:hover {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.drop {
|
|
font-size: 0.9rem;
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
.summary {
|
|
background: #f0f0f0;
|
|
padding: 1.5rem;
|
|
margin-top: 2rem;
|
|
border-radius: 4px;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.summary h2 {
|
|
font-size: 1.2rem;
|
|
margin: 0 0 1rem 0;
|
|
color: #333;
|
|
}
|
|
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.5rem 2rem;
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.summary-row span {
|
|
color: #555;
|
|
}
|
|
|
|
.summary-row strong {
|
|
color: #333;
|
|
}
|
|
|
|
.notes-section {
|
|
margin-top: 2rem;
|
|
padding: 1rem;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.notes-section h3 {
|
|
font-size: 1rem;
|
|
margin: 0 0 0.5rem 0;
|
|
color: #555;
|
|
}
|
|
|
|
.notes-section p {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* Cut list material headers — hidden on screen, shown in print via repeating thead */
|
|
.cutlist-material-print-header {
|
|
display: none;
|
|
}
|
|
|
|
/* The selected tool belongs on the paper cut report, not in the interactive results layout. */
|
|
.print-cut-method {
|
|
display: none;
|
|
}
|
|
|
|
/* Print styles - Compact layout to save paper */
|
|
@media print {
|
|
body {
|
|
-webkit-print-color-adjust: economy;
|
|
print-color-adjust: economy;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.print-screen-only,
|
|
.sidebar,
|
|
.top-row,
|
|
.page > main > .top-row,
|
|
.btn,
|
|
button,
|
|
nav,
|
|
.navbar {
|
|
display: none !important;
|
|
}
|
|
|
|
.page {
|
|
display: block !important;
|
|
}
|
|
|
|
.page > main {
|
|
margin-left: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.content {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.cut-list-report {
|
|
max-width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.report-header {
|
|
margin-bottom: 0.5rem;
|
|
padding-bottom: 0.25rem;
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.report-header h1 {
|
|
font-size: 14pt;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.meta-info {
|
|
gap: 0.1rem;
|
|
font-size: 8pt;
|
|
}
|
|
|
|
.meta-row span:first-child {
|
|
min-width: 80px;
|
|
}
|
|
|
|
.bin-section {
|
|
margin: 0.3rem 0;
|
|
padding: 0.3rem 0.5rem;
|
|
border-radius: 0;
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.bin-section h2 {
|
|
font-size: 10pt;
|
|
margin: 0 0 0.2rem 0;
|
|
padding-bottom: 0.15rem;
|
|
}
|
|
|
|
.cuts-table {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.cuts-table th,
|
|
.cuts-table td {
|
|
padding: 0.15rem 0.3rem;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.cuts-table th {
|
|
font-size: 8pt;
|
|
}
|
|
|
|
.drop {
|
|
font-size: 8pt;
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
.summary {
|
|
padding: 0.5rem;
|
|
margin-top: 0.5rem;
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.summary h2 {
|
|
font-size: 11pt;
|
|
margin: 0 0 0.3rem 0;
|
|
}
|
|
|
|
.summary-grid {
|
|
gap: 0.1rem 1rem;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.notes-section {
|
|
margin-top: 0.5rem;
|
|
padding: 0.3rem 0.5rem;
|
|
}
|
|
|
|
.notes-section h3 {
|
|
font-size: 9pt;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.notes-section p {
|
|
font-size: 8pt;
|
|
}
|
|
|
|
/* Compact summary: inline row instead of big cards */
|
|
.print-summary {
|
|
display: flex !important;
|
|
flex-wrap: nowrap !important;
|
|
gap: 0 !important;
|
|
margin-bottom: 0.5rem !important;
|
|
border: 1px solid #ccc;
|
|
padding: 0.4rem 0.75rem !important;
|
|
}
|
|
|
|
.print-summary > div {
|
|
flex: 1 !important;
|
|
max-width: none !important;
|
|
width: auto !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.print-summary .card {
|
|
border: none !important;
|
|
background: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.print-summary .card-body {
|
|
padding: 0 !important;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.print-summary h2 {
|
|
font-size: 11pt !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.print-summary p {
|
|
font-size: 8pt !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.print-cut-method {
|
|
display: block !important;
|
|
border: 1px solid #ccc;
|
|
font-size: 9pt;
|
|
margin: -0.25rem 0 0.5rem;
|
|
padding: 0.3rem 0.75rem;
|
|
}
|
|
|
|
/* Keep material list with cut lists to save paper */
|
|
.print-material-list {
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
/* General card print styles — allow large cards to break across pages */
|
|
.card {
|
|
border: 1px solid #ccc !important;
|
|
}
|
|
|
|
/* Keep card headers with the start of their content */
|
|
.card-header {
|
|
break-after: avoid;
|
|
page-break-after: avoid;
|
|
}
|
|
|
|
.card-header {
|
|
background-color: #f0f0f0 !important;
|
|
}
|
|
|
|
.badge {
|
|
border: 1px solid #999;
|
|
}
|
|
|
|
/* Badges lose their blue fills in print, so force their white screen text and divider to black. */
|
|
.cut-part-badge {
|
|
color: #000 !important;
|
|
}
|
|
|
|
.cut-part-badge-divider {
|
|
border-left: 1px solid #000 !important;
|
|
}
|
|
|
|
/* Cut list tables: hide screen header, show repeating print header in thead */
|
|
.cutlist-material-screen-header {
|
|
display: none !important;
|
|
}
|
|
|
|
.cutlist-material-print-header {
|
|
display: table-row !important;
|
|
}
|
|
|
|
.cutlist-material-print-header th {
|
|
background: #f0f0f0 !important;
|
|
padding: 0.4rem 0.5rem !important;
|
|
border-bottom: 1px solid #ccc !important;
|
|
}
|
|
|
|
.cutlist-material-name {
|
|
font-size: 12pt;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cutlist-material-stats {
|
|
float: right;
|
|
font-size: 9pt;
|
|
font-weight: 400;
|
|
color: #666;
|
|
}
|
|
|
|
/* Remove card border/padding for cut list cards in print — table handles it */
|
|
.cutlist-material-card {
|
|
border: none !important;
|
|
}
|
|
|
|
.cutlist-material-card > .card-body {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Keep each stock-bar result, its cuts, and its waste on one printed page. */
|
|
.cutlist-material-card tbody tr {
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
/* Reduce spacing */
|
|
.mb-4 {
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
|
|
.mb-3 {
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
}
|