1803 lines
31 KiB
CSS
1803 lines
31 KiB
CSS
:root {
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
font-size: 15px;
|
||
line-height: 1.5;
|
||
color: #17263f;
|
||
background: #fffdf7;
|
||
font-synthesis: none;
|
||
--ink: #17263f;
|
||
--blue: #1647ab;
|
||
--orange: #b74900;
|
||
--line: #bcc5d0;
|
||
--mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
|
||
}
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
}
|
||
button,
|
||
input,
|
||
select {
|
||
font: inherit;
|
||
color: inherit;
|
||
}
|
||
button {
|
||
cursor: pointer;
|
||
min-height: 44px;
|
||
border: 1px solid var(--line);
|
||
background: white;
|
||
border-radius: 2px;
|
||
}
|
||
button:hover {
|
||
border-color: var(--ink);
|
||
background: #f1f4fa;
|
||
}
|
||
button:disabled {
|
||
cursor: not-allowed;
|
||
color: #78818f;
|
||
background: #f1f1ed;
|
||
}
|
||
a:focus-visible,
|
||
button:focus-visible,
|
||
input:focus-visible,
|
||
select:focus-visible,
|
||
summary:focus-visible,
|
||
[tabindex]:focus-visible {
|
||
outline: 3px solid #1647ab;
|
||
outline-offset: 3px;
|
||
}
|
||
input,
|
||
select {
|
||
width: 100%;
|
||
min-width: 0;
|
||
min-height: 44px;
|
||
padding: 9px 10px;
|
||
border: 1px solid #7c8a9b;
|
||
background: white;
|
||
border-radius: 2px;
|
||
font-size: 16px;
|
||
}
|
||
input[inputmode] {
|
||
font-family: var(--mono);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
input:disabled {
|
||
color: #617085;
|
||
background: #eeefec;
|
||
}
|
||
svg {
|
||
flex-shrink: 0;
|
||
}
|
||
h1,
|
||
h2,
|
||
h3,
|
||
p {
|
||
margin: 0;
|
||
}
|
||
h1 {
|
||
font-size: 26px;
|
||
font-weight: 800;
|
||
letter-spacing: -1px;
|
||
}
|
||
h2 {
|
||
font-size: 19px;
|
||
font-weight: 750;
|
||
letter-spacing: -0.5px;
|
||
}
|
||
h3 {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
}
|
||
small {
|
||
font-size: 12px;
|
||
}
|
||
.app-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 23px 32px;
|
||
border-bottom: 3px solid var(--ink);
|
||
background: #fff;
|
||
}
|
||
.app-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 13px;
|
||
}
|
||
.app-title-link {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
.square-mark {
|
||
width: 28px;
|
||
height: 28px;
|
||
display: block;
|
||
border-left: 7px solid var(--orange);
|
||
border-bottom: 7px solid var(--orange);
|
||
position: relative;
|
||
}
|
||
.square-mark::after {
|
||
content: '';
|
||
width: 15px;
|
||
height: 15px;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
border-top: 3px solid var(--ink);
|
||
border-right: 3px solid var(--ink);
|
||
}
|
||
.header-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
.button {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 9px 15px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
.app-main {
|
||
--planner-bottom-space: 40px;
|
||
max-width: 1720px;
|
||
margin: auto;
|
||
padding: 0 32px var(--planner-bottom-space);
|
||
}
|
||
.copy-status {
|
||
display: block;
|
||
font-size: 13px;
|
||
color: var(--blue);
|
||
}
|
||
.copy-status:not(:empty) {
|
||
padding-top: 10px;
|
||
}
|
||
.url-error {
|
||
padding: 14px;
|
||
background: #fff0df;
|
||
border-left: 4px solid var(--orange);
|
||
margin-top: 16px;
|
||
}
|
||
.project-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
margin: 23px 0 25px;
|
||
}
|
||
.room-tabs {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
.room-tab {
|
||
display: flex;
|
||
gap: 15px;
|
||
align-items: center;
|
||
padding: 10px 15px;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
}
|
||
.room-tab small {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
font-weight: 400;
|
||
}
|
||
.room-tab.active {
|
||
background: var(--ink);
|
||
color: white;
|
||
border-color: var(--ink);
|
||
}
|
||
.add-room {
|
||
display: flex;
|
||
gap: 6px;
|
||
align-items: center;
|
||
padding: 9px 12px;
|
||
border-style: dashed;
|
||
font-size: 13px;
|
||
}
|
||
.project-area {
|
||
font: 12px var(--mono);
|
||
white-space: nowrap;
|
||
}
|
||
.editor-panel {
|
||
min-width: 0;
|
||
scroll-margin-top: 65px;
|
||
}
|
||
.editor-heading {
|
||
min-height: 64px;
|
||
margin-bottom: 14px;
|
||
border-top: 2px solid var(--ink);
|
||
padding-top: 13px;
|
||
}
|
||
.editor-heading span {
|
||
font-size: 11px;
|
||
color: #4b5c73;
|
||
}
|
||
.field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
margin-bottom: 14px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
min-width: 0;
|
||
}
|
||
.field > span:first-child {
|
||
min-height: 22px;
|
||
}
|
||
.field-label {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
}
|
||
.field small {
|
||
font-weight: 400;
|
||
color: #4b5c73;
|
||
font-size: 11px;
|
||
}
|
||
.field-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||
gap: 0 12px;
|
||
}
|
||
.number-input {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.number-input input {
|
||
padding-right: 33px;
|
||
}
|
||
.number-input > span {
|
||
position: absolute;
|
||
right: 9px;
|
||
font: 11px var(--mono);
|
||
color: #53647c;
|
||
pointer-events: none;
|
||
}
|
||
.field-tooltip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
.tooltip-button {
|
||
width: 40px;
|
||
min-height: 40px;
|
||
font: 700 14px var(--mono);
|
||
border: 0;
|
||
background: transparent;
|
||
position: absolute;
|
||
right: -6px;
|
||
top: -9px;
|
||
}
|
||
.tooltip-button::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 1px solid #53647c;
|
||
border-radius: 50%;
|
||
left: 10px;
|
||
top: 10px;
|
||
}
|
||
.tooltip-content {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 30px;
|
||
width: 260px;
|
||
max-width: calc(100vw - 40px);
|
||
z-index: 10;
|
||
padding: 14px;
|
||
color: white;
|
||
background: var(--ink);
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
line-height: 1.5;
|
||
box-shadow: 4px 4px 0 #b5bdcb;
|
||
}
|
||
.template-options {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 6px;
|
||
margin: 18px 0;
|
||
}
|
||
.template {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 9px;
|
||
min-height: 70px;
|
||
padding: 10px 3px;
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
}
|
||
.template.active {
|
||
border: 2px solid var(--ink);
|
||
background: #eef2f9;
|
||
}
|
||
.rectangle-icon {
|
||
width: 23px;
|
||
height: 18px;
|
||
border: 2px solid currentColor;
|
||
}
|
||
.fireplace-icon {
|
||
width: 23px;
|
||
height: 20px;
|
||
background: currentColor;
|
||
clip-path: polygon(
|
||
0 0,
|
||
100% 0,
|
||
100% 100%,
|
||
65% 100%,
|
||
65% 72%,
|
||
35% 72%,
|
||
35% 100%,
|
||
0 100%,
|
||
0 0,
|
||
8% 8%,
|
||
8% 92%,
|
||
27% 92%,
|
||
27% 64%,
|
||
73% 64%,
|
||
73% 92%,
|
||
92% 92%,
|
||
92% 8%,
|
||
8% 8%
|
||
);
|
||
}
|
||
summary {
|
||
cursor: pointer;
|
||
min-height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
list-style: none;
|
||
}
|
||
summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
summary::before {
|
||
content: '+';
|
||
font: 18px var(--mono);
|
||
width: 16px;
|
||
}
|
||
details[open] > summary::before {
|
||
content: '−';
|
||
}
|
||
summary span {
|
||
font-size: 11px;
|
||
font-weight: 400;
|
||
margin-left: auto;
|
||
}
|
||
.wall-details {
|
||
border-top: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line);
|
||
margin: 8px 0 16px;
|
||
}
|
||
.helper {
|
||
font-size: 12px;
|
||
line-height: 1.6;
|
||
color: #4b5c73;
|
||
}
|
||
.wall-details .helper {
|
||
margin: 4px 0 12px;
|
||
}
|
||
.wall-head,
|
||
.wall-row {
|
||
display: grid;
|
||
grid-template-columns: 32px minmax(0, 1fr) minmax(0, 0.8fr);
|
||
gap: 6px;
|
||
align-items: center;
|
||
}
|
||
.wall-head {
|
||
font-size: 10px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.wall-row {
|
||
margin-bottom: 8px;
|
||
padding-bottom: 7px;
|
||
border-bottom: 1px solid #dde2e9;
|
||
}
|
||
.wall-head > span:last-child {
|
||
display: none;
|
||
}
|
||
.wall-actions {
|
||
grid-column: 2 / -1;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 4px;
|
||
}
|
||
.wall-actions .icon-button {
|
||
width: 40px;
|
||
min-width: 40px;
|
||
min-height: 40px;
|
||
}
|
||
.wall-drag-handle {
|
||
cursor: grab;
|
||
}
|
||
.wall-drag-handle:active {
|
||
cursor: grabbing;
|
||
}
|
||
.wall-row.drag-over {
|
||
border-top: 3px solid var(--blue);
|
||
background: #e9f0fc;
|
||
}
|
||
.wall-row input {
|
||
padding: 8px 6px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.wall-code {
|
||
font: 12px var(--mono);
|
||
}
|
||
.icon-button {
|
||
width: 44px;
|
||
min-width: 40px;
|
||
min-height: 44px;
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-color: transparent;
|
||
background: transparent;
|
||
}
|
||
.wall-row .icon-button {
|
||
width: 40px;
|
||
}
|
||
.text-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 6px;
|
||
padding: 8px 0;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
background: transparent;
|
||
border: 0;
|
||
}
|
||
.closure-check {
|
||
display: flex;
|
||
gap: 9px;
|
||
align-items: flex-start;
|
||
font-size: 12px;
|
||
margin: 14px 0;
|
||
}
|
||
.closure-check svg {
|
||
margin-top: 2px;
|
||
}
|
||
.closure-check strong {
|
||
font-weight: 600;
|
||
}
|
||
.closure-check span {
|
||
display: block;
|
||
font-size: 11px;
|
||
color: #4b5c73;
|
||
margin-top: 3px;
|
||
}
|
||
.closure-suggestion {
|
||
padding: 12px;
|
||
border-left: 3px solid var(--orange);
|
||
background: #fff2e6;
|
||
font-size: 12px;
|
||
margin: 14px 0;
|
||
}
|
||
.closure-suggestion p {
|
||
margin-top: 5px;
|
||
}
|
||
.panel-divider {
|
||
border-top: 1px solid var(--line);
|
||
margin: 22px 0 18px;
|
||
}
|
||
.subheading {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.subheading h3 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
}
|
||
.subheading > span {
|
||
font: 10px var(--mono);
|
||
}
|
||
.door-card {
|
||
margin: 14px 0 0;
|
||
padding: 12px;
|
||
border: 1px solid var(--line);
|
||
background: #f8f8f4;
|
||
}
|
||
.door-card-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
.door-card-title label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 12px;
|
||
}
|
||
.door-card-title select {
|
||
width: 76px;
|
||
}
|
||
.door-card .field {
|
||
margin-bottom: 0;
|
||
}
|
||
.danger {
|
||
color: #a23219;
|
||
}
|
||
.material-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 35px;
|
||
font: 700 13px var(--mono);
|
||
border-left: 4px solid;
|
||
padding-left: 10px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.material-section.flooring .material-heading {
|
||
color: var(--blue);
|
||
border-color: var(--blue);
|
||
background: #e9f0fc;
|
||
}
|
||
.material-section.skirting .material-heading {
|
||
color: #983e03;
|
||
border-color: var(--orange);
|
||
background: #fff0e2;
|
||
}
|
||
.material-section + .material-section {
|
||
margin-top: 20px;
|
||
padding-top: 18px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.segmented {
|
||
display: flex;
|
||
border: 1px solid #7c8a9b;
|
||
}
|
||
.segmented button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
flex: 1;
|
||
border: 0;
|
||
border-radius: 0;
|
||
padding: 9px 7px;
|
||
font-size: 12px;
|
||
line-height: 1.3;
|
||
}
|
||
.segmented button + button {
|
||
border-left: 1px solid #7c8a9b;
|
||
}
|
||
.segmented button.active {
|
||
background: var(--blue);
|
||
color: white;
|
||
font-weight: 600;
|
||
}
|
||
.optimisation-options {
|
||
display: grid;
|
||
gap: 6px;
|
||
}
|
||
.optimisation-options button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 4px 12px;
|
||
padding: 10px;
|
||
text-align: left;
|
||
font-size: 13px;
|
||
}
|
||
.optimisation-options button.active {
|
||
border-color: var(--blue);
|
||
background: var(--blue);
|
||
color: white;
|
||
}
|
||
.optimisation-options button small {
|
||
color: inherit;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.drawing-card {
|
||
border: 1px solid var(--ink);
|
||
background: white;
|
||
}
|
||
.drawing-header {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px 16px;
|
||
padding: 10px 14px;
|
||
border-top: 3px solid var(--ink);
|
||
}
|
||
.drawing-header h2 {
|
||
font-size: 14px;
|
||
min-width: 0;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.drawing-header h2 small {
|
||
margin-left: 8px;
|
||
font-size: 11px;
|
||
font-weight: 400;
|
||
white-space: nowrap;
|
||
}
|
||
.drawing-legend {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px 12px;
|
||
font-size: 11px;
|
||
}
|
||
.floor-code {
|
||
cursor: pointer;
|
||
}
|
||
.floor-code:hover rect {
|
||
fill: #17263f;
|
||
}
|
||
.floor-code.is-highlighted rect {
|
||
stroke: #17263f;
|
||
stroke-width: 2px;
|
||
vector-effect: non-scaling-stroke;
|
||
}
|
||
.drawing-legend > span {
|
||
display: flex;
|
||
gap: 7px;
|
||
align-items: center;
|
||
}
|
||
.floor-key {
|
||
width: 17px;
|
||
height: 12px;
|
||
display: inline-block;
|
||
border: 1px solid var(--blue);
|
||
background: repeating-linear-gradient(
|
||
135deg,
|
||
transparent,
|
||
transparent 3px,
|
||
var(--blue) 3px,
|
||
var(--blue) 4px
|
||
);
|
||
}
|
||
.skirt-key {
|
||
width: 17px;
|
||
height: 6px;
|
||
display: inline-block;
|
||
background: var(--orange);
|
||
border: 1px solid #923a00;
|
||
}
|
||
.drawing-viewport {
|
||
width: 100%;
|
||
overflow: visible;
|
||
background-color: #fffdf7;
|
||
background-image:
|
||
linear-gradient(#a7b9d326 1px, transparent 1px),
|
||
linear-gradient(90deg, #a7b9d326 1px, transparent 1px);
|
||
background-size: 20px 20px;
|
||
border-top: 1px solid #d6deea;
|
||
border-bottom: 1px solid #d6deea;
|
||
touch-action: auto;
|
||
}
|
||
.room-svg {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
font-family: var(--mono);
|
||
}
|
||
.svg-cut {
|
||
cursor: pointer;
|
||
}
|
||
.svg-cut:focus {
|
||
outline: none;
|
||
}
|
||
.svg-cut:focus > polygon,
|
||
.svg-cut:focus > line:first-child {
|
||
stroke: #101b2e;
|
||
stroke-width: 20;
|
||
}
|
||
.purchase-summary {
|
||
border-bottom: 2px solid var(--ink);
|
||
margin-top: 24px;
|
||
}
|
||
.purchase-summary h2 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
padding-bottom: 11px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.purchase-summary h2 small {
|
||
font-size: 11px;
|
||
font-weight: 400;
|
||
}
|
||
.purchase-item {
|
||
display: flex;
|
||
gap: 15px;
|
||
align-items: center;
|
||
padding: 18px 0;
|
||
}
|
||
.purchase-item + .purchase-item {
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.material-key {
|
||
flex-shrink: 0;
|
||
width: 25px;
|
||
}
|
||
.purchase-item strong {
|
||
font: 700 29px var(--mono);
|
||
line-height: 1.2;
|
||
}
|
||
.purchase-item strong span {
|
||
font:
|
||
600 14px Arial,
|
||
sans-serif;
|
||
}
|
||
.purchase-item p {
|
||
font: 11px var(--mono);
|
||
color: #4b5c73;
|
||
margin-top: 5px;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.waste-stat {
|
||
font: 16px var(--mono);
|
||
margin-left: auto;
|
||
white-space: nowrap;
|
||
text-align: right;
|
||
}
|
||
.waste-stat small {
|
||
display: block;
|
||
font:
|
||
11px Arial,
|
||
sans-serif;
|
||
color: #4b5c73;
|
||
}
|
||
.issues {
|
||
display: grid;
|
||
gap: 8px;
|
||
margin-top: 16px;
|
||
}
|
||
.issues:empty {
|
||
display: none;
|
||
}
|
||
.issue {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 9px;
|
||
padding: 12px;
|
||
border-left: 3px solid #ae3700;
|
||
background: #fff0e4;
|
||
color: #803005;
|
||
font-size: 12px;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.issue svg {
|
||
margin-top: 2px;
|
||
}
|
||
#cut-plan {
|
||
margin: 0;
|
||
scroll-margin-top: 60px;
|
||
}
|
||
.cut-list-header {
|
||
display: flex;
|
||
align-items: start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 0;
|
||
border: 0;
|
||
grid-column: 1 / -1;
|
||
}
|
||
.cut-list-header h2 {
|
||
display: none;
|
||
}
|
||
.cut-list-card {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: 20px;
|
||
}
|
||
.material-cuts {
|
||
min-width: 0;
|
||
align-self: start;
|
||
border: 1px solid var(--line);
|
||
background: #fff;
|
||
}
|
||
.material-cuts > h3 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 15px 17px;
|
||
font-size: 17px;
|
||
border-top: 4px solid;
|
||
}
|
||
.flooring-cuts > h3 {
|
||
border-color: var(--blue);
|
||
color: var(--blue);
|
||
}
|
||
.skirting-cuts > h3 {
|
||
border-color: var(--orange);
|
||
color: #983e03;
|
||
}
|
||
.count-badge {
|
||
font: 12px var(--mono);
|
||
color: var(--ink);
|
||
}
|
||
.cut-summary {
|
||
padding: 0 17px 15px;
|
||
font-size: 12px;
|
||
color: #344963;
|
||
}
|
||
.material-cuts > .helper {
|
||
padding: 0 17px 15px;
|
||
}
|
||
.empty-state {
|
||
padding: 18px;
|
||
font-size: 13px;
|
||
}
|
||
@media (min-width: 1600px) {
|
||
.app-header {
|
||
padding-left: max(32px, calc((100vw - 1656px) / 2));
|
||
padding-right: max(32px, calc((100vw - 1656px) / 2));
|
||
}
|
||
}
|
||
@media (max-width: 1199px) {
|
||
.app-main {
|
||
--planner-bottom-space: 30px;
|
||
padding: 0 24px var(--planner-bottom-space);
|
||
}
|
||
.app-header {
|
||
padding: 20px 24px;
|
||
}
|
||
.purchase-summary {
|
||
align-self: start;
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
@media (max-width: 699px) {
|
||
.app-header {
|
||
padding: 17px 14px;
|
||
gap: 8px;
|
||
}
|
||
.app-title {
|
||
gap: 8px;
|
||
}
|
||
h1 {
|
||
font-size: 21px;
|
||
letter-spacing: -0.8px;
|
||
}
|
||
.square-mark {
|
||
width: 22px;
|
||
height: 25px;
|
||
border-width: 6px;
|
||
}
|
||
.square-mark::after {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
.header-actions {
|
||
gap: 5px;
|
||
}
|
||
.header-actions .button {
|
||
padding: 8px;
|
||
font-size: 12px;
|
||
}
|
||
.header-actions .button:last-child {
|
||
width: 44px;
|
||
}
|
||
.header-actions .button:last-child span {
|
||
display: none;
|
||
}
|
||
.app-main {
|
||
--planner-bottom-space: 25px;
|
||
padding: 0 14px var(--planner-bottom-space);
|
||
}
|
||
.project-bar {
|
||
margin: 16px 0;
|
||
}
|
||
.project-area {
|
||
display: none;
|
||
}
|
||
.room-tabs {
|
||
gap: 6px;
|
||
}
|
||
.room-tab {
|
||
padding: 9px 12px;
|
||
gap: 12px;
|
||
font-size: 12px;
|
||
}
|
||
.room-tab small {
|
||
font-size: 10px;
|
||
}
|
||
.add-room {
|
||
padding: 9px;
|
||
font-size: 12px;
|
||
}
|
||
.editor-heading {
|
||
min-height: 58px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.editor-heading span {
|
||
font-size: 12px;
|
||
}
|
||
.field {
|
||
font-size: 13px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.field small {
|
||
font-size: 12px;
|
||
}
|
||
.field-grid {
|
||
gap: 0 14px;
|
||
}
|
||
.field > span:first-child {
|
||
min-height: 24px;
|
||
}
|
||
.field-tooltip .tooltip-button {
|
||
top: -8px;
|
||
}
|
||
.template {
|
||
font-size: 12px;
|
||
min-height: 69px;
|
||
}
|
||
.wall-head {
|
||
font-size: 11px;
|
||
}
|
||
.text-button,
|
||
summary {
|
||
font-size: 13px;
|
||
}
|
||
.closure-check span {
|
||
font-size: 12px;
|
||
}
|
||
.material-heading {
|
||
font-size: 14px;
|
||
min-height: 39px;
|
||
}
|
||
.segmented button {
|
||
font-size: 13px;
|
||
}
|
||
.tooltip-content {
|
||
right: 0;
|
||
}
|
||
.purchase-summary h2 {
|
||
font-size: 17px;
|
||
}
|
||
.purchase-item strong {
|
||
font-size: 30px;
|
||
}
|
||
.purchase-item strong span {
|
||
font-size: 13px;
|
||
}
|
||
.purchase-item {
|
||
gap: 12px;
|
||
}
|
||
.purchase-item p {
|
||
font-size: 10px;
|
||
}
|
||
.waste-stat {
|
||
font-size: 14px;
|
||
}
|
||
.material-cuts > h3 {
|
||
font-size: 17px;
|
||
padding: 14px;
|
||
}
|
||
.cut-summary {
|
||
padding: 0 14px 15px;
|
||
}
|
||
.material-cuts > .helper {
|
||
padding: 0 14px 15px;
|
||
}
|
||
}
|
||
@media (max-width: 699px) {
|
||
.tooltip-content {
|
||
position: fixed;
|
||
left: 16px;
|
||
right: 16px;
|
||
bottom: 20px;
|
||
top: auto;
|
||
width: auto;
|
||
max-width: none;
|
||
}
|
||
}
|
||
|
||
/* Each cut has a small shape preview; exact measurements open in a native dialog. */
|
||
.cut-preview-button {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
gap: 4px;
|
||
width: 76px;
|
||
min-width: 76px;
|
||
padding: 6px;
|
||
background: #f0f5ff;
|
||
border-color: #1647ab;
|
||
color: #1647ab;
|
||
}
|
||
.cut-thumbnail {
|
||
display: block;
|
||
width: 62px;
|
||
height: 38px;
|
||
background: white;
|
||
}
|
||
.compact-preview {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.compact-preview .flooring-preview {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.cut-preview-code {
|
||
font-family: inherit;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
.skirting-end-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.skirting-end {
|
||
display: block;
|
||
min-width: 0;
|
||
margin: 0;
|
||
}
|
||
.skirting-end-preview {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
aspect-ratio: 1;
|
||
background: #fffaf4;
|
||
}
|
||
.board-break {
|
||
font: 20px var(--mono);
|
||
text-align: center;
|
||
color: #9a3412;
|
||
}
|
||
.compact-preview .skirting-end-grid {
|
||
height: 100%;
|
||
grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr);
|
||
gap: 1px;
|
||
}
|
||
.compact-preview .board-break {
|
||
font-size: 10px;
|
||
}
|
||
.cut-dialog {
|
||
width: min(720px, calc(100vw - 32px));
|
||
max-width: none;
|
||
max-height: calc(100dvh - 32px);
|
||
padding: 0;
|
||
border: 2px solid var(--ink);
|
||
border-radius: 2px;
|
||
background: #fff;
|
||
color: var(--ink);
|
||
overflow: auto;
|
||
}
|
||
.cut-dialog::backdrop {
|
||
background: #17263faa;
|
||
}
|
||
.cut-dialog-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 10px 16px;
|
||
border-bottom: 1px solid var(--line);
|
||
background: white;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
.cut-dialog-header h2 {
|
||
font-size: 20px;
|
||
}
|
||
.cut-dialog-body {
|
||
display: grid;
|
||
gap: 14px;
|
||
padding: 16px 20px 22px;
|
||
font-size: 14px;
|
||
}
|
||
.exact-preview,
|
||
.skirting-full-preview {
|
||
margin: 0;
|
||
}
|
||
.exact-preview figcaption {
|
||
font:
|
||
13px Arial,
|
||
sans-serif;
|
||
color: #4b5c73;
|
||
text-align: center;
|
||
margin: 10px 0;
|
||
}
|
||
.exact-preview > .flooring-preview {
|
||
display: block;
|
||
width: 100%;
|
||
height: 200px;
|
||
background: white;
|
||
}
|
||
.skirting-full-preview svg {
|
||
display: block;
|
||
width: 100%;
|
||
height: 70px;
|
||
}
|
||
.exact-preview .skirting-end-grid {
|
||
max-width: 400px;
|
||
margin: 16px auto;
|
||
}
|
||
@media (max-width: 699px) {
|
||
.cut-dialog-header {
|
||
padding-inline: 12px;
|
||
}
|
||
.cut-dialog-body {
|
||
padding: 14px;
|
||
}
|
||
.exact-preview > .flooring-preview {
|
||
height: 150px;
|
||
}
|
||
}
|
||
.stock-cut-group {
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.stock-cut-group h4 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
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 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: stretch;
|
||
gap: 12px;
|
||
padding: 12px 16px;
|
||
margin: 0;
|
||
list-style: none;
|
||
}
|
||
.board-cut {
|
||
flex: 1 1 170px;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
padding: 12px;
|
||
border: 1px solid #e0e4e9;
|
||
}
|
||
.board-cut:only-child {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
@media (max-width: 699px) {
|
||
.board-cuts {
|
||
display: block;
|
||
}
|
||
.board-cut + .board-cut {
|
||
margin-top: 12px;
|
||
}
|
||
.board-cut {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
.skirting-preview-button {
|
||
background: #fff5eb;
|
||
border-color: #b74900;
|
||
color: #983e03;
|
||
}
|
||
.cut-preview-code > span {
|
||
margin-left: 4px;
|
||
}
|
||
.uncut-key {
|
||
width: 17px;
|
||
height: 10px;
|
||
display: inline-block;
|
||
background: #deddd8;
|
||
border: 1px solid #79756b;
|
||
}
|
||
.svg-cut:hover > polygon,
|
||
.svg-cut:focus-visible > polygon {
|
||
stroke: #17263f;
|
||
stroke-width: 3px;
|
||
vector-effect: non-scaling-stroke;
|
||
}
|
||
.skirting-code {
|
||
cursor: pointer;
|
||
}
|
||
.skirting-code:hover rect {
|
||
fill: #17263f;
|
||
}
|
||
.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-origin {
|
||
font-size: 14px;
|
||
color: #4b5c73;
|
||
}
|
||
.cut-dialog-body .helper {
|
||
font-size: 13px;
|
||
}
|
||
.print-plan {
|
||
display: none;
|
||
}
|
||
@page {
|
||
size: A4;
|
||
margin: 12mm;
|
||
}
|
||
@media print {
|
||
:root {
|
||
background: white;
|
||
font-size: 11px;
|
||
}
|
||
body {
|
||
color: #17263f;
|
||
}
|
||
.app-header,
|
||
.app-main,
|
||
.cut-dialog {
|
||
display: none !important;
|
||
}
|
||
.cut-dialog::backdrop {
|
||
display: none;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.workspace {
|
||
--drawing-height: min(900px, calc(100dvh - 16px - var(--planner-bottom-space)));
|
||
display: grid;
|
||
grid-template-columns: minmax(370px, 0.85fr) minmax(0, 1.15fr);
|
||
gap: 28px;
|
||
align-items: start;
|
||
}
|
||
.planning-panels {
|
||
min-width: 0;
|
||
}
|
||
.setup-intro {
|
||
margin-bottom: 24px;
|
||
}
|
||
.setup-intro h2 {
|
||
font-size: 24px;
|
||
letter-spacing: -0.6px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.setup-intro p {
|
||
color: #4b5c73;
|
||
font-size: 14px;
|
||
max-width: 48ch;
|
||
}
|
||
.panel-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.step-number {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
width: 27px;
|
||
height: 27px;
|
||
border: 1px solid var(--ink);
|
||
border-radius: 50%;
|
||
font: 13px var(--mono);
|
||
}
|
||
.panel-description {
|
||
margin: 0 0 20px;
|
||
}
|
||
.shape-heading {
|
||
margin-top: 18px;
|
||
}
|
||
.shape-heading + .template-options {
|
||
margin: 10px 0;
|
||
}
|
||
.shape-help {
|
||
font-size: 12px;
|
||
line-height: 1.6;
|
||
padding: 12px 14px;
|
||
margin-bottom: 18px;
|
||
background: #eef2f9;
|
||
border-left: 3px solid var(--blue);
|
||
}
|
||
.material-help {
|
||
margin-bottom: 14px;
|
||
}
|
||
.advanced-settings {
|
||
border-block: 1px solid var(--line);
|
||
margin: 16px 0;
|
||
}
|
||
.advanced-settings[open] {
|
||
padding-bottom: 12px;
|
||
}
|
||
.plan-view-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 0 0 12px;
|
||
}
|
||
.plan-view-toolbar > span {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
.plan-view-switch {
|
||
flex: 1;
|
||
}
|
||
.plan-view-switch button {
|
||
min-height: 44px;
|
||
gap: 8px;
|
||
}
|
||
.plan-view-switch button.active .material-key {
|
||
border: 1px solid white;
|
||
}
|
||
.plan-view-switch button.active:has(.skirt-key) {
|
||
background: var(--orange);
|
||
}
|
||
.planner-panel {
|
||
border-top: 2px solid var(--ink);
|
||
margin-bottom: 20px;
|
||
}
|
||
.panel-toggle-heading {
|
||
margin: 0;
|
||
}
|
||
.panel-toggle {
|
||
width: 100%;
|
||
min-height: 56px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 0;
|
||
border: 0;
|
||
font-size: 19px;
|
||
font-weight: 700;
|
||
text-align: left;
|
||
background: transparent;
|
||
scroll-margin-top: 16px;
|
||
}
|
||
.panel-toggle > span:last-child {
|
||
font-size: 25px;
|
||
font-weight: 400;
|
||
}
|
||
.panel-content {
|
||
padding-bottom: 12px;
|
||
}
|
||
.panel-content[hidden] {
|
||
display: none;
|
||
}
|
||
.planner-panel .editor-heading {
|
||
display: none;
|
||
}
|
||
.planner-panel .materials-editor {
|
||
border: 0;
|
||
padding: 0;
|
||
}
|
||
.planner-panel .purchase-summary {
|
||
margin-top: 20px;
|
||
}
|
||
.drawing-column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: var(--drawing-height);
|
||
position: sticky;
|
||
top: 16px;
|
||
min-width: 0;
|
||
align-self: start;
|
||
background: #fffdf7;
|
||
}
|
||
.drawing-column .drawing-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
.drawing-column .drawing-viewport {
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
.drawing-column .room-svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.plan-search-status {
|
||
padding: 8px 12px;
|
||
border: 1px solid var(--ink);
|
||
border-bottom: 0;
|
||
background: #ffe6a3;
|
||
color: #17263f;
|
||
font-size: 12px;
|
||
}
|
||
.search-mode-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
}
|
||
.search-mode-text {
|
||
min-width: 0;
|
||
}
|
||
.search-mode-text strong {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.search-mode-text p {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-top: 3px;
|
||
}
|
||
.clear-plan-search {
|
||
flex-shrink: 0;
|
||
border-color: #17263f;
|
||
font-size: 12px;
|
||
padding-inline: 9px;
|
||
}
|
||
.matching-rooms {
|
||
display: flex;
|
||
overflow-x: auto;
|
||
gap: 6px;
|
||
margin-top: 7px;
|
||
}
|
||
.matching-rooms button {
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
padding: 6px 10px;
|
||
font-size: 12px;
|
||
}
|
||
.matching-rooms button[aria-pressed='true'] {
|
||
background: var(--ink);
|
||
color: white;
|
||
}
|
||
.search-muted {
|
||
opacity: 0.25;
|
||
}
|
||
.is-highlighted > polygon {
|
||
fill: #ffe69b;
|
||
stroke: #17263f;
|
||
stroke-width: 3px;
|
||
vector-effect: non-scaling-stroke;
|
||
}
|
||
.is-highlighted.is-done > polygon {
|
||
fill: #c4e6df;
|
||
}
|
||
.is-done .cut-preview-code {
|
||
color: #20594f;
|
||
}
|
||
.is-done .cut-preview-button {
|
||
background: #eaf4f1;
|
||
border-color: #27655d;
|
||
}
|
||
.is-done .cut-location {
|
||
color: #345c55;
|
||
}
|
||
@media (max-width: 899px) {
|
||
.plan-view-toolbar {
|
||
padding-block: 8px;
|
||
gap: 10px;
|
||
}
|
||
.plan-view-switch button {
|
||
font-size: 12px;
|
||
gap: 6px;
|
||
}
|
||
.setup-intro {
|
||
margin-bottom: 20px;
|
||
}
|
||
.drawing-header {
|
||
padding: 8px 10px;
|
||
gap: 6px;
|
||
}
|
||
.drawing-header h2 {
|
||
font-size: 13px;
|
||
}
|
||
.drawing-legend {
|
||
font-size: 10px;
|
||
gap: 10px;
|
||
}
|
||
.plan-search-status {
|
||
padding: 6px 9px;
|
||
font-size: 11px;
|
||
}
|
||
.clear-plan-search {
|
||
font-size: 11px;
|
||
padding-inline: 7px;
|
||
gap: 3px;
|
||
}
|
||
.app-main {
|
||
padding-inline: 16px;
|
||
}
|
||
.workspace {
|
||
--drawing-height: clamp(300px, 45dvh, 420px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
.planning-panels {
|
||
width: 100%;
|
||
}
|
||
.drawing-column {
|
||
order: -1;
|
||
width: 100%;
|
||
top: 0;
|
||
z-index: 5;
|
||
}
|
||
.panel-toggle {
|
||
font-size: 18px;
|
||
min-height: 50px;
|
||
scroll-margin-top: calc(var(--drawing-height) + 16px);
|
||
}
|
||
.planner-panel {
|
||
scroll-margin-top: calc(var(--drawing-height) + 16px);
|
||
}
|
||
.board-cuts {
|
||
padding-inline: 12px;
|
||
}
|
||
.board-cut {
|
||
gap: 12px;
|
||
}
|
||
input,
|
||
select,
|
||
button,
|
||
summary {
|
||
scroll-margin-top: calc(var(--drawing-height, 0px) + 16px);
|
||
scroll-margin-bottom: 24px;
|
||
}
|
||
}
|
||
@media print {
|
||
.drawing-column {
|
||
position: static;
|
||
}
|
||
}
|
||
.cut-search {
|
||
display: grid;
|
||
gap: 7px;
|
||
}
|
||
.cut-search label {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
.cut-search .search-results {
|
||
font-size: 12px;
|
||
color: #4b5c73;
|
||
}
|
||
.board-group-header {
|
||
background: #f1f3f6;
|
||
}
|
||
.board-group-header h4 {
|
||
padding-bottom: 5px;
|
||
}
|
||
.board-group-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
padding: 0 12px 8px;
|
||
}
|
||
.board-done-control {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
min-height: 44px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
}
|
||
.board-done-control input {
|
||
width: 22px;
|
||
min-width: 22px;
|
||
height: 22px;
|
||
min-height: 22px;
|
||
padding: 0;
|
||
margin: 0;
|
||
accent-color: #27655d;
|
||
}
|
||
.board-locate {
|
||
font-size: 12px;
|
||
padding: 6px 8px;
|
||
}
|
||
.cut-locate {
|
||
min-height: 40px;
|
||
padding: 6px 0;
|
||
border: 0;
|
||
font-size: 12px;
|
||
background: transparent;
|
||
color: var(--blue);
|
||
}
|
||
.board-cut-info {
|
||
min-width: 0;
|
||
}
|
||
.board-cut.search-match {
|
||
box-shadow: inset 3px 0 #17263f;
|
||
padding-left: 10px;
|
||
}
|
||
.stock-cut-group.is-done .board-group-header {
|
||
background: #e4efeb;
|
||
}
|
||
.stock-cut-group.is-done h4 {
|
||
background: transparent;
|
||
}
|
||
.uncut-board-note {
|
||
padding: 12px 16px;
|
||
font-size: 13px;
|
||
}
|
||
.cut-search-control {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
.cut-search-control input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.clear-search {
|
||
flex-shrink: 0;
|
||
padding-inline: 12px;
|
||
}
|
||
.completion-mark {
|
||
pointer-events: none;
|
||
paint-order: stroke;
|
||
stroke: white;
|
||
stroke-width: 2px;
|
||
vector-effect: non-scaling-stroke;
|
||
}
|