lejay
@@ -0,0 +1,987 @@
|
||||
/* Shared step styles */
|
||||
.stepSection {
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.stepTitle {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.stepDesc {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
margin: -0.5rem 0 1rem;
|
||||
}
|
||||
.stepDescExtra {
|
||||
display: block;
|
||||
margin-top: 0.4rem;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* Card toggle (installation type, door type) */
|
||||
.cardToggle {
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.cardToggleItem {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.15rem;
|
||||
min-height: 5.85rem;
|
||||
padding: 0.9rem 1rem;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: var(--bg-card);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.cardToggleItem:hover { border-color: var(--text-muted); }
|
||||
.cardToggleActive {
|
||||
border-color: var(--action);
|
||||
background: color-mix(in srgb, var(--action) 6%, var(--bg-card));
|
||||
}
|
||||
.cardToggleIcon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
line-height: 1;
|
||||
}
|
||||
.cardToggleIconSvg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.7;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.cardToggleLabel {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
line-height: 1.25;
|
||||
}
|
||||
.cardToggleHint {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.12rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.cardToggleActive .cardToggleIcon {
|
||||
color: var(--action);
|
||||
}
|
||||
|
||||
/* Dimension sliders */
|
||||
.dimGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
.dimField {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.dimLabel {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.dimSliderRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.dimSlider {
|
||||
flex: 1;
|
||||
accent-color: var(--action);
|
||||
height: 6px;
|
||||
}
|
||||
.dimValue {
|
||||
min-width: 4.5rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
font-size: 0.8125rem;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.dimUnit {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Column count row */
|
||||
.colCountRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.colCountLabel {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
.colCountBtns {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
}
|
||||
.colCountBtn {
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0 0.55rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.colCountBtn:hover { border-color: var(--action); }
|
||||
.colCountActive {
|
||||
background: var(--action);
|
||||
border-color: var(--action);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.optimizeBtn {
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: 1px solid var(--action);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--action);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-left: 0.35rem;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.optimizeBtn:hover { background: var(--action); color: #fff; }
|
||||
.optimizeBtn:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
.aiMsg {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
background: color-mix(in srgb, var(--action) 8%, var(--bg));
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.aiBadge {
|
||||
display: inline-block;
|
||||
background: var(--action);
|
||||
color: #fff;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
padding: 0.15rem 0.35rem;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
.aiDismiss {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Column strip (horizontal cards mirroring 3D) */
|
||||
.columnStripLegend {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 0.45rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.columnStrip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(4.85rem, 1fr));
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.75rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Many columns: allow horizontal scroll instead of squashing */
|
||||
@media (max-width: 520px) {
|
||||
.columnStrip {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.35rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.colCard {
|
||||
flex: 0 0 auto;
|
||||
min-width: 5.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.colCard {
|
||||
flex-shrink: 0;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.45rem 0.5rem;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-card);
|
||||
cursor: grab;
|
||||
text-align: center;
|
||||
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, opacity 0.15s;
|
||||
position: relative;
|
||||
}
|
||||
.colCard:active { cursor: grabbing; }
|
||||
.colCard:hover { border-color: var(--text-muted); }
|
||||
.colCardActive { border-color: var(--action); background: color-mix(in srgb, var(--action) 6%, var(--bg-card)); }
|
||||
.colCardLocked { opacity: 0.7; }
|
||||
.colCardDragging {
|
||||
opacity: 0.55;
|
||||
cursor: grabbing;
|
||||
}
|
||||
.colCardDropTarget {
|
||||
border-color: var(--action);
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--action) 35%, transparent);
|
||||
background: color-mix(in srgb, var(--action) 10%, var(--bg-card));
|
||||
}
|
||||
.colCardIndex {
|
||||
display: block;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--action);
|
||||
line-height: 1.15;
|
||||
margin-bottom: 0.2rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.colDragHint {
|
||||
display: block;
|
||||
font-size: 0.55rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
line-height: 1;
|
||||
margin-bottom: 0.15rem;
|
||||
opacity: 0.75;
|
||||
user-select: none;
|
||||
}
|
||||
.colCardIcon { font-size: 1.2rem; display: block; }
|
||||
.colCardType { font-size: 0.6875rem; font-weight: 600; color: var(--text); margin-top: 0.15rem; }
|
||||
.colCardWidth { font-size: 0.625rem; color: var(--text-muted); }
|
||||
.colLockIcon {
|
||||
position: absolute;
|
||||
top: 0.2rem;
|
||||
right: 0.25rem;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
/* Column detail tray (expanded below strip) */
|
||||
.colDetail {
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-card);
|
||||
margin-bottom: 0.75rem;
|
||||
animation: fadeIn 0.15s ease-out;
|
||||
}
|
||||
.colDetailHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.colDetailTitle {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
.lockBtn {
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.lockBtn:hover { border-color: var(--text); }
|
||||
.isLocked { background: var(--bg); }
|
||||
|
||||
/* Type selector tiles */
|
||||
.typeTiles {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.typeTile {
|
||||
padding: 0.4rem 0.7rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg);
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.typeTile:hover { border-color: var(--action); }
|
||||
.typeTileActive {
|
||||
border-color: var(--action);
|
||||
background: color-mix(in srgb, var(--action) 10%, var(--bg));
|
||||
color: var(--action);
|
||||
}
|
||||
|
||||
/* Counter rows */
|
||||
.detailRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.35rem 0;
|
||||
}
|
||||
.detailLabel {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text);
|
||||
}
|
||||
.counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.counterBtn {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
background: var(--bg-card);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text);
|
||||
transition: all 0.1s;
|
||||
}
|
||||
.counterBtn:hover:not(:disabled) { border-color: var(--action); }
|
||||
.counterBtn:disabled { opacity: 0.3; cursor: default; }
|
||||
.counterValue {
|
||||
min-width: 1.5rem;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.gapModeRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.gapAutoLabel {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.gapCustomizeBtn {
|
||||
padding: 0.25rem 0.55rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
background: var(--bg-card);
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
color: var(--action);
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.gapCustomizeBtn:hover:not(:disabled) {
|
||||
border-color: var(--action);
|
||||
background: color-mix(in srgb, var(--action) 8%, var(--bg-card));
|
||||
}
|
||||
.gapCustomizeBtn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.gapRangeRow {
|
||||
padding: 0 0 0.35rem;
|
||||
margin-top: -0.15rem;
|
||||
}
|
||||
.gapRange {
|
||||
width: 100%;
|
||||
accent-color: var(--action);
|
||||
}
|
||||
|
||||
/* Toggle button */
|
||||
.toggleBtn {
|
||||
padding: 0.3rem 0.7rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
background: var(--bg);
|
||||
cursor: pointer;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.toggleOn {
|
||||
background: var(--action);
|
||||
border-color: var(--action);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Summary line */
|
||||
.summaryLine {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.hint {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.7;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Hardware grid */
|
||||
.hardwareGroup {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/** Extra air above habillage row (after dimension sliders). */
|
||||
.finishHabillageGroup {
|
||||
padding-top: 0.85rem;
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
.hardwareLabel {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.hardwareGrid {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.hardwareBtn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-card);
|
||||
cursor: pointer;
|
||||
min-width: 5.5rem;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.hardwareBtn:hover { border-color: var(--text-muted); }
|
||||
.hardwareBtnSelected {
|
||||
border-color: var(--action);
|
||||
background: color-mix(in srgb, var(--action) 6%, var(--bg-card));
|
||||
}
|
||||
.hardwareBtn img {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.hardwareIcon { font-size: 1.5rem; }
|
||||
.hardwareName { font-size: 0.6875rem; font-weight: 600; color: var(--text); text-align: center; }
|
||||
.hardwareType { font-size: 0.625rem; color: var(--text-muted); }
|
||||
.hardwarePrice { font-size: 0.6875rem; color: var(--action); font-weight: 500; }
|
||||
.skipBtn {
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8125rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.skipBtn:hover { color: var(--text); border-color: var(--text-muted); }
|
||||
|
||||
/* Material quick pick */
|
||||
.quickPick {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.35rem;
|
||||
margin-bottom: 1rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.quickSwatch {
|
||||
flex-shrink: 0;
|
||||
width: 4.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 0.35rem;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.quickSwatch:hover { border-color: var(--text-muted); }
|
||||
.quickSwatchActive { border-color: var(--action); }
|
||||
.quickSwatchImg {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
background: var(--bg);
|
||||
}
|
||||
.quickSwatchNoImg {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 6px;
|
||||
background: var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.6rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.quickSwatchLabel {
|
||||
font-size: 0.5625rem;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.browseBtn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.browseBtn:hover { border-color: var(--action); color: var(--action); }
|
||||
|
||||
.currentMaterial {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0.75rem;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
.currentMaterialImg {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.currentMaterialInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
.currentMaterialInfo strong { font-size: 0.875rem; }
|
||||
.currentMaterialInfo span { font-size: 0.75rem; color: var(--text-muted); }
|
||||
|
||||
/* Element color dots */
|
||||
.colorDotsTitle {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.colorDots {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.colorDot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.55rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-card);
|
||||
cursor: pointer;
|
||||
font-size: 0.6875rem;
|
||||
color: var(--text);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.colorDot:hover { border-color: var(--action); }
|
||||
.colorDotSwatch {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Finalize: summary card */
|
||||
.summaryCard {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-card);
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.summaryRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.35rem 0;
|
||||
font-size: 0.8125rem;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
|
||||
}
|
||||
.summaryRow:last-child { border-bottom: none; }
|
||||
.summaryLabel { color: var(--text-muted); }
|
||||
.summaryValue { color: var(--text); font-weight: 500; }
|
||||
.summaryEdit {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--action);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.summaryEdit:hover { text-decoration: underline; }
|
||||
|
||||
/* Price breakdown */
|
||||
.priceBreakdown {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.priceRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.25rem 0;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.priceTotal {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.6rem 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
border-top: 2px solid var(--primary);
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
/* Action buttons */
|
||||
.actionBtns {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.actionBtn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.5rem 0.85rem;
|
||||
border: 1px solid var(--action);
|
||||
border-radius: 9px;
|
||||
background: var(--bg-card);
|
||||
color: var(--action);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.actionBtn:hover {
|
||||
box-shadow: 0 8px 18px rgba(79, 70, 229, 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Order form */
|
||||
.orderForm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.orderForm input,
|
||||
.orderForm textarea {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.orderForm textarea { resize: vertical; }
|
||||
.submitBtn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.7rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, var(--action), var(--action-hover));
|
||||
color: #fff;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.15s ease;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.submitBtn:hover {
|
||||
box-shadow: 0 10px 22px rgba(79, 70, 229, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.success {
|
||||
padding: 1rem;
|
||||
background: color-mix(in srgb, var(--success, #22c55e) 10%, var(--bg-card));
|
||||
border-radius: 8px;
|
||||
color: var(--text);
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.errors {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
.errors li {
|
||||
padding: 0.35rem 0.6rem;
|
||||
background: color-mix(in srgb, #ef4444 10%, var(--bg-card));
|
||||
border-radius: 5px;
|
||||
font-size: 0.8125rem;
|
||||
color: #ef4444;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* Checkboxes for service options */
|
||||
.checkLabel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Panel optimization info */
|
||||
.panelInfo {
|
||||
padding: 0.75rem;
|
||||
background: var(--bg);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.panelInfoTitle {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.panelRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.15rem 0;
|
||||
}
|
||||
|
||||
.finishSelector {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.45rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.finishOption {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.2rem;
|
||||
min-width: 0;
|
||||
padding: 0.5rem 0.45rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: var(--bg-card);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.finishOption:hover {
|
||||
border-color: var(--action);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.finishOptionActive {
|
||||
border-color: var(--action);
|
||||
background: color-mix(in srgb, var(--action) 10%, var(--bg-card));
|
||||
box-shadow: 0 8px 18px color-mix(in srgb, var(--action) 20%, transparent);
|
||||
}
|
||||
|
||||
.finishOptionLabel {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.finishOptionState {
|
||||
font-size: 0.68rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.ruleGrid3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.warnText {
|
||||
font-size: 0.8125rem;
|
||||
color: #b45309;
|
||||
background: color-mix(in srgb, #f59e0b 10%, var(--bg-card));
|
||||
border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--border));
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.6rem;
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
|
||||
.overrideToggle {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.55rem;
|
||||
padding: 0.55rem 0.65rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-card);
|
||||
margin: 0.4rem 0 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.overrideToggle input {
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.overrideToggle span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.12rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.overrideToggle small {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.dimGrid { grid-template-columns: 1fr; }
|
||||
.cardToggle { flex-direction: column; }
|
||||
.columnStrip { gap: 0.25rem; }
|
||||
.ruleGrid3 { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Compact mode for desktop split-panel (keeps everything visible) */
|
||||
@media (min-width: 1000px) {
|
||||
.stepTitle {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.stepDesc {
|
||||
margin: -0.35rem 0 0.65rem;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.cardToggle {
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.cardToggleItem {
|
||||
min-height: 4.6rem;
|
||||
padding: 0.65rem 0.75rem;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.cardToggleLabel {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.cardToggleHint {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.dimGrid {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Prevent right-column slider rows from being clipped in narrow 1/3 panel */
|
||||
.dimSliderRow {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 4.1rem auto;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dimSlider {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dimLabel {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.dimValue {
|
||||
min-width: 4.1rem;
|
||||
padding: 0.3rem 0.45rem;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.colCountRow {
|
||||
margin-bottom: 0.6rem;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.aiMsg {
|
||||
padding: 0.5rem 0.65rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user