.
This commit is contained in:
parent
d8f2407ddf
commit
9689bfcc18
1 changed files with 1815 additions and 955 deletions
621
src/styles.css
621
src/styles.css
|
|
@ -826,99 +826,6 @@ summary span {
|
|||
.material-cuts > .helper {
|
||||
padding: 0 17px 15px;
|
||||
}
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.cut-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
}
|
||||
.cut-table th {
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
background: #eff2f7;
|
||||
border-top: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding: 11px 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cut-table td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid #dce1e8;
|
||||
}
|
||||
.cut-table td small {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
color: #53647c;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.cut-table .numeric {
|
||||
font-family: var(--mono);
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
}
|
||||
.piece-link {
|
||||
min-width: 46px;
|
||||
padding: 7px;
|
||||
font: 700 12px var(--mono);
|
||||
color: var(--blue);
|
||||
border-color: #b3c9ed;
|
||||
background: #f1f5fc;
|
||||
}
|
||||
.skirting-cuts .piece-link {
|
||||
color: #983e03;
|
||||
border-color: #e2b594;
|
||||
background: #fff5eb;
|
||||
}
|
||||
.cut-table tr.selected td {
|
||||
background: #f3f5fa;
|
||||
}
|
||||
.cut-table tr.selected .piece-link {
|
||||
color: white;
|
||||
background: var(--ink);
|
||||
}
|
||||
.coordinates {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.coordinates span {
|
||||
font: 11px var(--mono);
|
||||
padding: 5px 6px;
|
||||
border: 1px solid var(--line);
|
||||
background: white;
|
||||
}
|
||||
.stock-allocations {
|
||||
margin: 12px 16px;
|
||||
}
|
||||
.stock-allocations summary {
|
||||
font-size: 12px;
|
||||
}
|
||||
.allocation-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.stock-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
padding: 10px;
|
||||
background: #f6f7f9;
|
||||
border: 1px solid #dce1e8;
|
||||
overflow-wrap: anywhere;
|
||||
font: 11px var(--mono);
|
||||
}
|
||||
.stock-card strong span,
|
||||
.stock-card small {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.empty-state {
|
||||
padding: 18px;
|
||||
font-size: 13px;
|
||||
|
|
@ -1193,167 +1100,6 @@ summary span {
|
|||
.material-cuts > .helper {
|
||||
padding: 0 14px 15px;
|
||||
}
|
||||
.table-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
.cut-table,
|
||||
.cut-table tbody {
|
||||
display: block;
|
||||
}
|
||||
.cut-table thead {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
}
|
||||
.cut-table tr {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 8px 12px;
|
||||
padding: 14px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.cut-table td {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 13px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.cut-table td::before {
|
||||
content: attr(data-label);
|
||||
display: block;
|
||||
font:
|
||||
10px Arial,
|
||||
sans-serif;
|
||||
color: #53647c;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.cut-table td:first-child {
|
||||
grid-row: span 2;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.cut-table td:first-child::before {
|
||||
display: none;
|
||||
}
|
||||
.piece-link {
|
||||
min-height: 44px;
|
||||
min-width: 58px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cut-table .numeric {
|
||||
font-size: 14px;
|
||||
}
|
||||
.cut-table td small {
|
||||
font-size: 11px;
|
||||
}
|
||||
.cut-table tr.selected {
|
||||
background: #eef2f9;
|
||||
}
|
||||
.cut-table tr.selected td {
|
||||
background: none;
|
||||
}
|
||||
.stock-allocations {
|
||||
margin: 10px 14px;
|
||||
}
|
||||
.stock-allocations summary {
|
||||
font-size: 12px;
|
||||
}
|
||||
.coordinates span {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
:root {
|
||||
background: white;
|
||||
font-size: 11px;
|
||||
}
|
||||
.app-header,
|
||||
.project-bar,
|
||||
.header-actions,
|
||||
.input-columns,
|
||||
.page-jumps,
|
||||
.copy-status,
|
||||
.button,
|
||||
.cut-dialog {
|
||||
display: none !important;
|
||||
}
|
||||
.app-main {
|
||||
padding: 0;
|
||||
}
|
||||
.workspace,
|
||||
.drawing-column {
|
||||
display: block;
|
||||
position: static;
|
||||
}
|
||||
.drawing-card {
|
||||
break-inside: avoid;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.drawing-viewport {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
background: white;
|
||||
}
|
||||
.room-svg {
|
||||
width: 100% !important;
|
||||
min-height: 0;
|
||||
max-height: 380px;
|
||||
}
|
||||
.purchase-summary {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.purchase-item {
|
||||
padding: 8px;
|
||||
}
|
||||
.cut-list-card {
|
||||
display: block;
|
||||
}
|
||||
.material-cuts {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
.cut-table,
|
||||
.cut-table tbody {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
.cut-table tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
.cut-table thead {
|
||||
position: static;
|
||||
display: table-header-group;
|
||||
width: auto;
|
||||
height: auto;
|
||||
clip: auto;
|
||||
}
|
||||
.cut-table tr {
|
||||
display: table-row;
|
||||
break-inside: avoid;
|
||||
}
|
||||
.cut-table td {
|
||||
display: table-cell;
|
||||
padding: 6px 9px;
|
||||
}
|
||||
.cut-table td::before {
|
||||
display: none;
|
||||
}
|
||||
.stock-allocations {
|
||||
display: none;
|
||||
}
|
||||
.piece-link {
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 699px) {
|
||||
.tooltip-content {
|
||||
|
|
@ -1366,92 +1112,6 @@ summary span {
|
|||
max-width: none;
|
||||
}
|
||||
}
|
||||
.piece-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
min-width: 92px;
|
||||
}
|
||||
.batch-codes {
|
||||
width: 32%;
|
||||
}
|
||||
.batch-qty {
|
||||
text-align: center;
|
||||
}
|
||||
.flooring-batch.selected .piece-chip:not(.selected) {
|
||||
color: var(--blue);
|
||||
background: #f1f5fc;
|
||||
}
|
||||
.cut-origin {
|
||||
font: 12px var(--mono);
|
||||
color: #344963;
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
@media (max-width: 699px) {
|
||||
.cut-table tr.flooring-batch {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.cut-table .flooring-batch .batch-size {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 16px;
|
||||
}
|
||||
.cut-table .flooring-batch .batch-qty {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
.cut-table .flooring-batch .batch-room {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
.cut-table .flooring-batch .batch-action {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
.cut-table .flooring-batch td.batch-codes {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3;
|
||||
width: auto;
|
||||
}
|
||||
.piece-chips {
|
||||
width: 100%;
|
||||
gap: 6px;
|
||||
}
|
||||
.piece-chip {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
padding: 7px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.skirting-cuts .cut-table tr {
|
||||
grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
.stock-allocations {
|
||||
display: block;
|
||||
}
|
||||
.stock-allocations::details-content {
|
||||
content-visibility: visible !important;
|
||||
display: block !important;
|
||||
}
|
||||
.stock-allocations > summary {
|
||||
display: none;
|
||||
}
|
||||
.piece-chips {
|
||||
gap: 6px;
|
||||
}
|
||||
.piece-chip {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Each cut has a small shape preview; exact measurements open in a native dialog. */
|
||||
.cut-preview-button {
|
||||
|
|
@ -1561,7 +1221,7 @@ summary span {
|
|||
display: block;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: #f5f8fd;
|
||||
background: white;
|
||||
}
|
||||
.skirting-full-preview svg {
|
||||
display: block;
|
||||
|
|
@ -1572,22 +1232,6 @@ summary span {
|
|||
max-width: 400px;
|
||||
margin: 16px auto;
|
||||
}
|
||||
.cut-measurements {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding: 14px 0;
|
||||
border-block: 1px solid var(--line);
|
||||
}
|
||||
.cut-measurements dt {
|
||||
font-size: 12px;
|
||||
color: #53647c;
|
||||
}
|
||||
.cut-measurements dd {
|
||||
margin: 4px 0 0;
|
||||
font: 600 13px var(--mono);
|
||||
}
|
||||
@media (max-width: 699px) {
|
||||
.cut-dialog-header {
|
||||
padding-inline: 12px;
|
||||
|
|
@ -1599,13 +1243,264 @@ summary span {
|
|||
height: 150px;
|
||||
}
|
||||
}
|
||||
.stock-cut-group {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.stock-cut-group h4 {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
background: #f1f3f6;
|
||||
}
|
||||
.stock-cut-group h4 span {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
text-align: right;
|
||||
}
|
||||
.board-cuts {
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.board-cut {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.board-cut + .board-cut {
|
||||
border-top: 1px solid #e0e4e9;
|
||||
}
|
||||
.cut-size {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.cut-location,
|
||||
.cut-note {
|
||||
font-size: 12px;
|
||||
color: #4b5c73;
|
||||
font-weight: 400;
|
||||
}
|
||||
.cut-location {
|
||||
margin-top: 3px;
|
||||
}
|
||||
.cut-preview-button {
|
||||
flex-shrink: 0;
|
||||
background: #f0f5ff;
|
||||
border-color: #1647ab;
|
||||
color: #1647ab;
|
||||
}
|
||||
.skirting-preview-button {
|
||||
background: #fff5eb;
|
||||
border-color: #b74900;
|
||||
color: #983e03;
|
||||
}
|
||||
.cut-preview-code {
|
||||
font-family: inherit;
|
||||
}
|
||||
.cut-preview-code > span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.drawing-legend {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 16px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.uncut-key {
|
||||
width: 17px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
background: #deddd8;
|
||||
border: 1px solid #79756b;
|
||||
}
|
||||
.drawing-help {
|
||||
font-size: 11px;
|
||||
padding: 0 20px 12px;
|
||||
color: #4b5c73;
|
||||
}
|
||||
.svg-cut:hover > polygon,
|
||||
.svg-cut:focus-visible > polygon {
|
||||
stroke: #17263f;
|
||||
stroke-width: 3px;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
.skirting-code {
|
||||
cursor: pointer;
|
||||
}
|
||||
.skirt-cut:hover .skirting-code rect,
|
||||
.skirt-cut:focus-visible .skirting-code rect {
|
||||
fill: #17263f;
|
||||
stroke: #17263f;
|
||||
}
|
||||
.door-position {
|
||||
margin-bottom: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.door-position svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin: 6px auto 0;
|
||||
}
|
||||
.door-position text {
|
||||
font:
|
||||
11px Arial,
|
||||
sans-serif;
|
||||
fill: #17263f;
|
||||
}
|
||||
.cut-dialog-body {
|
||||
font-size: 14px;
|
||||
gap: 14px;
|
||||
}
|
||||
.cut-origin {
|
||||
font-size: 14px;
|
||||
color: #4b5c73;
|
||||
}
|
||||
.exact-preview figcaption {
|
||||
font:
|
||||
13px Arial,
|
||||
sans-serif;
|
||||
color: #4b5c73;
|
||||
}
|
||||
.cut-dialog-body .helper {
|
||||
font-size: 13px;
|
||||
}
|
||||
.print-plan {
|
||||
display: none;
|
||||
}
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 12mm;
|
||||
}
|
||||
@media print {
|
||||
.cut-thumbnail {
|
||||
width: 48px;
|
||||
height: 28px;
|
||||
:root {
|
||||
background: white;
|
||||
font-size: 11px;
|
||||
}
|
||||
.cut-preview-button {
|
||||
width: 50px;
|
||||
min-width: 50px;
|
||||
body {
|
||||
color: #17263f;
|
||||
}
|
||||
.app-header,
|
||||
.app-main {
|
||||
display: none !important;
|
||||
}
|
||||
.print-plan {
|
||||
display: block;
|
||||
}
|
||||
.print-title {
|
||||
margin-bottom: 8mm;
|
||||
}
|
||||
.print-title h1 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 3mm;
|
||||
}
|
||||
.print-title p {
|
||||
margin-top: 2mm;
|
||||
}
|
||||
.print-room {
|
||||
break-before: page;
|
||||
break-inside: avoid;
|
||||
}
|
||||
.print-title + .print-room {
|
||||
break-before: auto;
|
||||
}
|
||||
.print-room > h2 {
|
||||
margin: 5mm 0;
|
||||
font-size: 19px;
|
||||
}
|
||||
.print-room > h2 span {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.print-room .drawing-card {
|
||||
border: 0;
|
||||
}
|
||||
.print-room .drawing-header,
|
||||
.print-room .drawing-legend {
|
||||
display: none;
|
||||
}
|
||||
.print-room .drawing-viewport {
|
||||
border: 0;
|
||||
background: white;
|
||||
}
|
||||
.print-room .room-svg {
|
||||
width: 100%;
|
||||
max-height: 190mm;
|
||||
}
|
||||
.print-material {
|
||||
break-before: page;
|
||||
columns: 2;
|
||||
column-gap: 5mm;
|
||||
column-fill: auto;
|
||||
}
|
||||
.print-material > h2 {
|
||||
column-span: all;
|
||||
font-size: 22px;
|
||||
margin-bottom: 4mm;
|
||||
}
|
||||
.print-stock {
|
||||
break-inside: avoid;
|
||||
margin-bottom: 4mm;
|
||||
}
|
||||
.print-stock > h3 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 5mm;
|
||||
border-block: 1px solid #9baabd;
|
||||
padding: 2mm 0;
|
||||
margin-bottom: 2mm;
|
||||
font-size: 12px;
|
||||
break-after: avoid;
|
||||
}
|
||||
.print-stock h3 span {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.print-cut {
|
||||
min-width: 0;
|
||||
break-inside: avoid;
|
||||
margin-bottom: 3mm;
|
||||
}
|
||||
.print-cut h4 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2mm;
|
||||
margin: 0 0 2mm;
|
||||
font-size: 13px;
|
||||
}
|
||||
.print-cut h4 span {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.print-cut p {
|
||||
font-size: 9px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.print-cut .exact-preview > .flooring-preview {
|
||||
height: 28mm;
|
||||
background: white;
|
||||
}
|
||||
.print-cut .exact-preview figcaption {
|
||||
font-size: 10px;
|
||||
margin: 1mm 0;
|
||||
}
|
||||
.print-cut .skirting-full-preview svg {
|
||||
height: 18mm;
|
||||
}
|
||||
.print-cut .exact-preview .skirting-end-grid {
|
||||
max-width: 38mm;
|
||||
margin: 2mm auto;
|
||||
}
|
||||
.print-cut .helper {
|
||||
font-size: 10px;
|
||||
}
|
||||
.print-plan * {
|
||||
print-color-adjust: exact;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue