fix(sw): viewer popup inputs match the property window, header labels hide by group
Deploy Storybook / deploy (push) Successful in 1m11s
Deploy Storybook / deploy (push) Successful in 1m11s
Viewer popup value inputs (number, text) take the property window field: transparent 1px border, radius 2, 7px inset, 14px 500 #E60403; hover / editing border, #0F0D0A editing face with the outlined value. A field unit (px/mm) sits inside the box and turns white on the editing face. Layer search, sizes and layout unchanged. Viewer header labels hide per iconOnlyBelow value instead of one by one: 레이어 / 설정 / 속성 together, 전체 보기 on its own; More collapse unchanged. Verified in Storybook: Settings Popup editing / unit / gauge sync; Responsive More at 1920 / 1440 / 1280 / ~1100 / 950, shrink-and-grow restore, no overflow. Not re-run: viewer browser tests.
This commit is contained in:
1 parent
83405c4ca2
commit
2f1edd47eb
2 files changed
+52
-11
No files matched your search
@@ -634,6 +634,48 @@ button.hm-sw-viewer-header__brand { text-align: left; }
|
||||
}
|
||||
.hm-sw-theme .hm-sw-viewer-input:focus-visible { outline: 2px solid var(--hm-sw-viewer-panel-switch-on); outline-offset: -1px; }
|
||||
.hm-sw-theme .hm-sw-viewer-input:disabled { opacity: 0.5; }
|
||||
/* 2026-10-22 (user request): value inputs (number, text such as 하이퍼링크) take the property window field
|
||||
(SW/Popup › Property Panel): transparent 1px border, radius 2, 7px inset, 14px 500 #E60403 value; Hover /
|
||||
editing rgba(33,29,19,.4) border, editing #0F0D0A with the black text outline. Width / height and the layer
|
||||
search box are unchanged. Read-only values keep the label color and the keyboard focus ring. */
|
||||
.hm-sw-theme .hm-sw-viewer-input:not([type="search"]) {
|
||||
padding: 0 7px;
|
||||
border-color: transparent;
|
||||
border-radius: 2px;
|
||||
background: transparent;
|
||||
color: var(--hm-sw-header-input-color);
|
||||
caret-color: var(--hm-sw-header-input-color);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.02em;
|
||||
appearance: textfield;
|
||||
}
|
||||
.hm-sw-theme .hm-sw-viewer-input:not([type="search"])::-webkit-inner-spin-button,
|
||||
.hm-sw-theme .hm-sw-viewer-input:not([type="search"])::-webkit-outer-spin-button { appearance: none; margin: 0; }
|
||||
.hm-sw-theme .hm-sw-viewer-input:not([type="search"]):is(:hover:not(:disabled, :read-only), :focus:not(:read-only)) { border-color: var(--hm-sw-property-field-hover-border-color); }
|
||||
.hm-sw-theme .hm-sw-viewer-input:not([type="search"]):focus:not(:read-only) { outline: none; background: var(--hm-sw-property-field-editing-background); text-shadow: var(--hm-sw-header-text-outline); }
|
||||
/* A field unit (px/mm) sits inside the value box like the property window unit: the control row is the box (same
|
||||
80px for the input alone) and the editing face covers the unit, which turns #FFF on it. */
|
||||
.hm-sw-theme .hm-sw-viewer-field__control:has(> .hm-sw-viewer-input:not([type="search"]) + .hm-sw-viewer-field__unit) {
|
||||
box-sizing: border-box;
|
||||
height: 28px;
|
||||
padding: 0 7px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.hm-sw-theme .hm-sw-viewer-field__control:has(> .hm-sw-viewer-field__unit) > .hm-sw-viewer-input:not([type="search"]) {
|
||||
width: 64px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.hm-sw-theme .hm-sw-viewer-field__control:has(> .hm-sw-viewer-input:not([type="search"], :disabled, :read-only)):is(:hover, :focus-within):has(> .hm-sw-viewer-field__unit) { border-color: var(--hm-sw-property-field-hover-border-color); }
|
||||
.hm-sw-theme .hm-sw-viewer-field__control:has(> .hm-sw-viewer-input:not([type="search"], :read-only):focus):has(> .hm-sw-viewer-field__unit) { background: var(--hm-sw-property-field-editing-background); }
|
||||
.hm-sw-theme .hm-sw-viewer-field__control:has(> .hm-sw-viewer-input:not([type="search"], :read-only):focus) > .hm-sw-viewer-field__unit { color: var(--hm-sw-property-field-editing-unit-color); }
|
||||
.hm-sw-theme .hm-sw-viewer-input:not([type="search"]):read-only { color: var(--hm-sw-property-label); }
|
||||
.hm-sw-theme .hm-sw-viewer-input:not([type="search"]):read-only:focus-visible { outline: 2px solid var(--hm-sw-property-border); outline-offset: -2px; }
|
||||
|
||||
/* SWViewerSlider = SWSlider appearance="panel" (sw.css, 2026-10-20): the shared gauge rules painted with the
|
||||
viewer panel tokens, so the viewer look and its theme overrides are unchanged. */
|
||||
|
||||
Reference in new issue
Block a user