Files
house-plan-maker/apps/client/src/components/editor/properties-panel.module.css
T
alexei.dolgolyov c808bf1add feat(furniture): nightstand legs, bookcase columns/drawers, AC unit LG style, soundbars, wood-cube sconce
- NIGHTSTAND: optional legs with adjustable height (capped at 60% of total height)
- BOOKCASE: shelfColumns with vertical dividers, per-cell drawer fronts with handles,
  z-fighting fix between dividers and back panel, stale drawerCells pruned on grid shrink
- AC_UNIT: new 'lg' style with dark vent, grille lines, deflector flap, LG accent
- SPEAKER: new 'soundbar' variant (90/110/140cm) with grille, driver cones, LED strip;
  SpeakerMesh split into dispatcher + SpeakerCabinetMesh to keep hook order stable
- Wall light: new 'wood-cube' style (wooden block sconce with top/bottom glow)
- PropertiesPanel: tf() helper replaces repeated i18n.exists fallbacks; inline checkbox
  styles consolidated into styles.checkboxLabel
- Translations: en/ru entries for new property keys
2026-04-16 03:06:08 +03:00

179 lines
3.8 KiB
CSS

.panel {
width: 260px;
min-width: 260px;
background-color: var(--color-bg-elevated);
border-left: 1px solid var(--color-border);
overflow-y: auto;
flex-shrink: 0;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
}
.collapseBtn {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text-secondary);
cursor: pointer;
font-size: 12px;
line-height: 1;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.collapseBtn:hover {
background-color: var(--color-bg-hover);
color: var(--color-text-primary);
}
.panelCollapsed {
width: 32px;
min-width: 32px;
background-color: var(--color-bg-elevated);
border-left: 1px solid var(--color-border);
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
padding-top: var(--space-2);
}
.empty {
padding: var(--space-6) var(--space-4);
text-align: center;
}
.emptyText {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-1);
}
.emptyHint {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.section {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.sectionTitle {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
margin-bottom: var(--space-2);
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-1) 0;
min-height: 28px;
}
.rowLabel {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
flex-shrink: 0;
}
.rowValue {
font-size: var(--font-size-xs);
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
text-align: right;
}
.editableValue {
font-size: var(--font-size-xs);
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
text-align: right;
background: none;
border: none;
padding: var(--space-1) var(--space-1);
border-radius: var(--radius-sm);
cursor: pointer;
font-family: var(--font-family);
transition: background var(--transition-fast);
}
.editableValue:hover {
background-color: var(--color-bg-hover);
}
.editRow {
display: flex;
align-items: center;
gap: var(--space-1);
}
.editInput {
width: 60px;
padding: 2px var(--space-1);
border: 1px solid var(--color-accent-300);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-family: var(--font-mono);
color: var(--color-text-primary);
text-align: right;
outline: none;
background-color: var(--color-bg-elevated);
}
.editInput:focus {
border-color: var(--color-accent-500);
box-shadow: 0 0 0 2px var(--color-focus-ring);
}
.editUnit {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.selectInput {
padding: 2px var(--space-1);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-family: var(--font-family);
color: var(--color-text-primary);
background-color: var(--color-bg-elevated);
cursor: pointer;
outline: none;
}
.selectInput:focus {
border-color: var(--color-accent-500);
box-shadow: 0 0 0 2px var(--color-focus-ring);
}
.checkboxLabel {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
}