feat(sw): popup controls, SWSelect / SWSlider, footer and viewer design fixes
Components (new public exports, existing APIs unchanged) - SWPopupPropertyRow: the property window row (layer / color / line style pickers, Figma 26:12250 / 26:12170) for SWPopup content. The SWHeader field dropdowns stay header-only; Popup B and 도면 설정 now use the popup pickers. - SWSelect: native panel select (28px, 1px #948871, radius 4, #F1ECE1, 12px), used by Popup 도면 설정 단위 and Viewer 축척 지정 단위 (replaces the HM UI Select there and the story-only .sw-viewer-story-select CSS). - SWSlider: appearance "panel" (default, the gauge the popup used) or "property" (the property window gauge), same value / events. Shares the property gauge CSS; SWViewerSlider renders SWSlider panel with viewer tokens. Footer - --hm-sw-footer-gra-border-orange (Figma gra-border-orange; the aux selected border token now references it): Model selected / hover, Layout hover and Layout + hover surfaces; 보조기능 / 명령어 전체보기 hover lights both lines and an orange ring; category + hover in #FF5C00 (menu-add-hover.svg). - Model / Layout text stays the Default text (#161410, 12px, 400, no outline) on hover and on the orange surface: only the surface changes. - bg_vacant covers the slot row only: the open pocket of a category tab no longer splits where it crosses the last command (e.g. 수정 with one command). Viewer - Panel title art keeps 308px (max-width: none against host img resets), so panels under 312px (250 x auto, 300px) paint the title from the left edge. Storybook - SW/Footer: 기본 Footer (sw-footer--default) and States (sw-footer--states) removed; full-footer keeps the live composition only, responsive keeps the widths (reference / Figma image sections removed, image files kept); the aux Figma comparison moved to the verification Story figma-variants. - SW/Popup: unit SWSelect, SWSlider A / B section, popup pickers, Popup B state.
This commit is contained in:
shkim4 committed
1 parent
bbb0e71c91
commit
126a35d60d
15 files changed
+349
-209
No files matched your search
@@ -32,7 +32,10 @@
|
||||
hover ring (yellow gradient, 1px), user decision 2026-10-20. */
|
||||
--hm-sw-footer-aux-border: linear-gradient(180deg, #886d35 0%, #423625 8.85%, #f3dba8 26.17%, #0e0b06 83.79%, #574b30 100%);
|
||||
--hm-sw-footer-aux-hover-border: var(--hm-sw-header-hover-border-gradient);
|
||||
--hm-sw-footer-aux-pressed-border: linear-gradient(180deg, #da6813 8.52%, #ffbb89 37.93%, #e5690d 71.85%, #ae3607 92.77%);
|
||||
/* Figma gra-border-orange (one value): the selected border of the auxiliary toggles, the Model tab surface and the
|
||||
hover surface of the Layout tabs and their + (2026-10-20), the hover ring of the side buttons. */
|
||||
--hm-sw-footer-gra-border-orange: linear-gradient(180deg, #da6813 8.52%, #ffbb89 37.93%, #e5690d 71.85%, #ae3607 92.77%);
|
||||
--hm-sw-footer-aux-pressed-border: var(--hm-sw-footer-gra-border-orange);
|
||||
/* Icon fill (Default #F1EDE5, selected = --hm-sw-footer-accent #FF5C00); the black 90% outline never changes. */
|
||||
--hm-sw-footer-aux-icon-color: #f1ede5;
|
||||
|
||||
@@ -126,7 +129,10 @@
|
||||
border-radius: var(--hm-sw-footer-group-radius) 0 0 0;
|
||||
background: var(--hm-sw-footer-group-background);
|
||||
}
|
||||
.hm-sw-footer__vacant { position: absolute; top: 1px; right: 0; bottom: 0; background: var(--hm-sw-footer-vacant-background); pointer-events: none; }
|
||||
/* The vacant surface covers the slot row only (2026-10-20): it used to run under the category row, where the open
|
||||
pocket of the current tab showed it, so a pocket crossing the last command's edge (e.g. 수정 with one command) was
|
||||
split into the group surface and the vacant surface. Every pocket now shows the same group surface. */
|
||||
.hm-sw-footer__vacant { position: absolute; top: 1px; right: 0; height: calc(var(--hm-sw-footer-slot-height) - 1px); background: var(--hm-sw-footer-vacant-background); pointer-events: none; }
|
||||
.hm-sw-footer__scroll {
|
||||
position: relative;
|
||||
flex: 0 1 auto;
|
||||
@@ -173,10 +179,23 @@
|
||||
.hm-sw-footer-side[data-side="end"] { filter: drop-shadow(calc(-1 * var(--hm-sw-footer-side-shadow-offset)) 0 8px rgba(0, 0, 0, 0.6)); }
|
||||
.hm-sw-footer-side__title { text-shadow: var(--hm-sw-header-text-outline); }
|
||||
.hm-sw-footer-side__subtitle { text-shadow: var(--hm-sw-header-label-outline); }
|
||||
/* Not in Figma: hover / selected reuse the footer accent (#FF5C00) of the slot and category hover. */
|
||||
.hm-sw-footer-side:hover:not(:disabled) .hm-sw-footer-side__title,
|
||||
.hm-sw-footer-side[aria-pressed="true"] .hm-sw-footer-side__title,
|
||||
.hm-sw-footer-side[aria-expanded="true"] .hm-sw-footer-side__title { color: var(--hm-sw-footer-accent); }
|
||||
/* Not in Figma: hover / selected reuse the footer rules: the whole button lights up, both text lines in the accent
|
||||
(#FF5C00) and the orange ring of a selected auxiliary toggle over the frame (2026-10-20; was the title only). Size,
|
||||
face and shadow are unchanged; disabled keeps the default look. */
|
||||
.hm-sw-footer-side::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 1px solid transparent;
|
||||
background: var(--hm-sw-footer-gra-border-orange) border-box;
|
||||
-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hm-sw-footer-side:is(:hover:not(:disabled), [aria-pressed="true"], [aria-expanded="true"])::after { opacity: 1; }
|
||||
.hm-sw-footer-side:is(:hover:not(:disabled), [aria-pressed="true"], [aria-expanded="true"]) :is(.hm-sw-footer-side__title, .hm-sw-footer-side__subtitle) { color: var(--hm-sw-footer-accent); }
|
||||
|
||||
/* ---------- Auxiliary toggles (객체스냅 …) ---------- */
|
||||
.hm-sw-footer-aux {
|
||||
@@ -373,13 +392,24 @@
|
||||
.hm-sw-footer-menu__tab[aria-selected="true"] { margin-right: 7px; }
|
||||
.hm-sw-footer-menu__tab[aria-selected="true"]:not(:first-of-type) { margin-left: 7px; }
|
||||
.hm-sw-footer-menu__add { position: relative; flex: 0 0 28px; width: 28px; height: 12px; margin-top: 6px; background: url("../components/sw-footer/assets/menu-add.svg") 0 0 / 28px 12px no-repeat; }
|
||||
/* Not in Figma: only Default of btn_add (26:9451) exists; hover keeps the asset (no invented look). */
|
||||
/* Not in Figma: only Default of btn_add (26:9451) exists. Hover (2026-10-20, user request): the + in the footer accent
|
||||
(#FF5C00, same black outline), like the category tabs next to it. */
|
||||
.hm-sw-footer-menu__add:hover:not(:disabled) { background-image: url("../components/sw-footer/assets/menu-add-hover.svg"); }
|
||||
|
||||
/* ---------- Layout tabs ---------- */
|
||||
.hm-sw-footer-tabs { display: flex; align-items: flex-end; gap: 1px; height: var(--hm-sw-footer-tab-height); font-size: var(--hm-sw-footer-tab-font-size); letter-spacing: 0.02em; }
|
||||
.hm-sw-footer-tabs__list { display: contents; }
|
||||
.hm-sw-footer-tabs__add { flex: 0 0 24px; width: 24px; height: 22px; background: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat; }
|
||||
.hm-sw-footer-tabs__add:hover:not(:disabled) { background-image: url("../components/sw-footer/assets/tab-add-hover.svg"); }
|
||||
/* Hover (2026-10-20, user request): the Model / Layout orange surface in the button shape, the + keeps its outline. */
|
||||
.hm-sw-footer-tabs__add { position: relative; }
|
||||
.hm-sw-footer-tabs__add:hover:not(:disabled)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url("../components/sw-footer/assets/menu-add.svg") 50% 50% / 28px 12px no-repeat, var(--hm-sw-footer-gra-border-orange);
|
||||
-webkit-mask: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat;
|
||||
mask: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat;
|
||||
}
|
||||
.hm-sw-footer-tab { position: relative; flex: 0 0 auto; display: flex; height: 22px; color: var(--hm-sw-footer-tab-text); }
|
||||
.hm-sw-footer-tab__select {
|
||||
position: relative;
|
||||
@@ -431,7 +461,8 @@
|
||||
.hm-sw-footer-tab[data-shape="rounded"][data-state="on"] { background: var(--hm-sw-footer-tab-on-background); }
|
||||
.hm-sw-footer-tab[data-shape="rounded"][data-state="editing"] { background: var(--hm-sw-footer-tab-editing-background); }
|
||||
.hm-sw-footer-tab[data-shape="rounded"]:is(:hover, [data-state="editing"])::after { border-color: var(--hm-sw-footer-tab-hover-border-color); }
|
||||
.hm-sw-footer-tab[data-shape="rounded"][data-state="off"]:hover { background: linear-gradient(var(--hm-sw-footer-tab-hover-overlay), var(--hm-sw-footer-tab-hover-overlay)), var(--hm-sw-footer-tab-background); }
|
||||
/* Hover, not selected (2026-10-20, user request): the Model orange surface; text as on Model (below). */
|
||||
.hm-sw-footer-tab[data-shape="rounded"][data-state="off"]:hover { background: var(--hm-sw-footer-gra-border-orange); }
|
||||
|
||||
/* Slanted tab (layout01, next to Model): 97 × 22 mirrored bg asset + the 28px red close piece. */
|
||||
.hm-sw-footer-tab[data-shape="slant"] { width: 97px; }
|
||||
@@ -450,7 +481,12 @@
|
||||
.hm-sw-footer-tab[data-shape="slant"] .hm-sw-footer-tab__remove:hover { background-image: url("../components/sw-footer/assets/tab-close-hover.svg"); }
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="on"]::before { background-image: url("../components/sw-footer/assets/tab-slant-on.svg"); }
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="editing"]::before { background-image: url("../components/sw-footer/assets/tab-slant-editing.svg"); }
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant-hover.svg"); }
|
||||
/* Hover, not selected (2026-10-20, user request): the Model orange surface in the slanted shape. */
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::before {
|
||||
background: var(--hm-sw-footer-gra-border-orange);
|
||||
-webkit-mask: url("../components/sw-footer/assets/tab-slant.svg") 0 0 / 97px 22px no-repeat;
|
||||
mask: url("../components/sw-footer/assets/tab-slant.svg") 0 0 / 97px 22px no-repeat;
|
||||
}
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::after { background-image: url("../components/sw-footer/assets/tab-slant-ring.svg"); }
|
||||
/* layout01 Variant6 (editing + hover): the fill without its own ring and the orange ring on top. */
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="editing"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant-editing-fill.svg"); }
|
||||
@@ -458,7 +494,9 @@
|
||||
.hm-sw-footer-tab[data-shape="slant"] + .hm-sw-footer-tab--model { margin-left: -9px; }
|
||||
|
||||
/* Text per state (Figma layout01 / layout02 variants). */
|
||||
.hm-sw-footer-tab:is([data-state="on"], [data-state="editing"], :hover) .hm-sw-footer-tab__select {
|
||||
/* Selected / editing Layout tabs (light text on brown / black) keep the 70% outline. Hover of a tab that is not
|
||||
selected and the Model tab draw their text exactly as the Default (2026-10-20): only the surface changes. */
|
||||
.hm-sw-footer-tab:not(.hm-sw-footer-tab--model):is([data-state="on"], [data-state="editing"]) .hm-sw-footer-tab__select {
|
||||
text-shadow:
|
||||
1.3px 0 0 var(--hm-sw-footer-tab-outline-color), 0.92px 0.92px 0 var(--hm-sw-footer-tab-outline-color),
|
||||
0 1.3px 0 var(--hm-sw-footer-tab-outline-color), -0.92px 0.92px 0 var(--hm-sw-footer-tab-outline-color),
|
||||
@@ -467,12 +505,13 @@
|
||||
}
|
||||
.hm-sw-footer-tab[data-state="on"] { color: var(--hm-sw-footer-text); }
|
||||
.hm-sw-footer-tab[data-state="editing"] { color: var(--hm-sw-footer-red); }
|
||||
.hm-sw-footer-tab[data-shape="rounded"]:not([data-state="editing"]):hover,
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover,
|
||||
.hm-sw-footer-tab--model:hover:not([data-state="on"]) { color: var(--hm-sw-footer-accent); }
|
||||
/* layout01 hover (not selected): orange tab, black text with the 70% outline. */
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover { color: #000; }
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover .hm-sw-footer-tab__select { text-shadow: none; }
|
||||
.hm-sw-footer-tab[data-shape="rounded"][data-state="on"]:hover,
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover { color: var(--hm-sw-footer-accent); }
|
||||
/* On the orange surface (Model selected or hovered, Layout hovered, 2026-10-20 user decision): the Default tab text,
|
||||
black #161410 without outline, in the inherited tab size and weight (no size or weight of its own), so hover never
|
||||
changes the text, its size or its place. */
|
||||
.hm-sw-footer-tab:is([data-shape="rounded"], [data-shape="slant"])[data-state="off"]:hover,
|
||||
.hm-sw-footer-tab--model:is([data-state="on"], :hover) { color: var(--hm-sw-footer-tab-text); }
|
||||
/* layout01 "on hover" draws the default beige surface under the orange text. */
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant.svg"); }
|
||||
/* The × appears on hover (all shapes) and in no other state (Figma opacity 0). */
|
||||
@@ -481,7 +520,18 @@
|
||||
|
||||
/* Model (26:9914): 73 × 22 asset, label 22px from the left. */
|
||||
.hm-sw-footer-tab--model { width: 73px; background: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat; }
|
||||
.hm-sw-footer-tab--model[data-state="on"] { background-image: url("../components/sw-footer/assets/tab-model-on.svg"); }
|
||||
/* Selected and hovered (2026-10-20, user request; was the brown model On 26:9925): the gra-border-orange surface in the
|
||||
Model shape. */
|
||||
.hm-sw-footer-tab--model:is([data-state="on"], :hover) { background-image: none; }
|
||||
.hm-sw-footer-tab--model:is([data-state="on"], :hover)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--hm-sw-footer-gra-border-orange);
|
||||
-webkit-mask: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat;
|
||||
mask: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hm-sw-footer-tab--model .hm-sw-footer-tab__select { min-width: 0; width: 100%; padding: 0 16px 0 22px; }
|
||||
|
||||
/* ---------- Command line ---------- */
|
||||
|
||||
@@ -355,7 +355,9 @@ button.hm-sw-viewer-header__brand { text-align: left; }
|
||||
the SWPopup position), and a stretched copy of the same art fills the flat part on the left of wider panels.
|
||||
The right one hides its own left 20px (left edge + corner) and the left copy ends exactly there: no seam, no
|
||||
doubled shadow. */
|
||||
.hm-sw-viewer-panel .hm-sw-property__title-art { left: auto; right: 4px; clip-path: inset(-4px -4px -4px 20px); }
|
||||
/* max-width: none: a host img reset (e.g. Tailwind preflight max-width: 100%) shrank the art in panels under 312px,
|
||||
so its clipped left 20px left the start of the title bar unpainted (2026-10-20, 250px minimum width). */
|
||||
.hm-sw-viewer-panel .hm-sw-property__title-art { left: auto; right: 4px; max-width: none; clip-path: inset(-4px -4px -4px 20px); }
|
||||
.hm-sw-viewer-panel .hm-sw-property__titlebar::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -428,21 +430,17 @@ 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; }
|
||||
|
||||
.hm-sw-theme .hm-sw-viewer-slider {
|
||||
--hm-sw-viewer-slider-percent: 0%;
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
/* 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. */
|
||||
.hm-sw-viewer-slider {
|
||||
--hm-sw-slider-panel-range: var(--hm-sw-viewer-panel-switch-on);
|
||||
--hm-sw-slider-panel-track: var(--hm-sw-viewer-panel-background);
|
||||
--hm-sw-slider-panel-thumb: #fff;
|
||||
}
|
||||
.hm-sw-viewer-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 9999px; background: linear-gradient(90deg, var(--hm-sw-viewer-panel-switch-on) var(--hm-sw-viewer-slider-percent), var(--hm-sw-viewer-panel-background) var(--hm-sw-viewer-slider-percent)); }
|
||||
.hm-sw-viewer-slider::-moz-range-track { height: 6px; border-radius: 9999px; background: var(--hm-sw-viewer-panel-background); }
|
||||
.hm-sw-viewer-slider::-moz-range-progress { height: 6px; border-radius: 9999px; background: var(--hm-sw-viewer-panel-switch-on); }
|
||||
.hm-sw-viewer-slider::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; border: 2px solid var(--hm-sw-viewer-panel-switch-on); border-radius: 9999px; background: #fff; appearance: none; }
|
||||
.hm-sw-viewer-slider::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border: 2px solid var(--hm-sw-viewer-panel-switch-on); border-radius: 9999px; background: #fff; }
|
||||
.hm-sw-theme .hm-sw-viewer-slider:focus-visible { outline: 2px solid var(--hm-sw-viewer-panel-switch-on); outline-offset: 2px; }
|
||||
/* SWSelect inside viewer panels reads the viewer panel tokens (same values; viewer theme overrides follow). */
|
||||
.hm-sw-viewer-panel { --hm-sw-select-border-color: var(--hm-sw-viewer-panel-inner-border); --hm-sw-select-background: var(--hm-sw-viewer-panel-field-background); --hm-sw-select-text: var(--hm-sw-viewer-panel-text); }
|
||||
/* Viewer rows dim a disabled field as a whole (SWViewerField 50%); the slider keeps its own opacity as before. */
|
||||
.hm-sw-theme .hm-sw-viewer-slider:disabled { opacity: 1; }
|
||||
|
||||
.hm-sw-theme .hm-sw-viewer-button {
|
||||
display: inline-flex;
|
||||
|
||||
@@ -100,6 +100,17 @@
|
||||
--hm-sw-property-range-fill-edge: #000;
|
||||
--hm-sw-property-range-track: linear-gradient(#aea28b 0 1px, #c3b9a4 1px 2px, #c7bda9 2px 4px, #b7ac96 4px 5px, #ac9e84 5px);
|
||||
--hm-sw-property-range-highlight: #eadec8;
|
||||
/* SWSlider appearance "panel" (2026-10-20): the gauge the SW popup used so far (HM UI Slider: 6px #E0DACE
|
||||
track, #266651 range, 18px white thumb with a 2px #266651 ring), the same shape as SWViewerSlider. Existing
|
||||
values only (#E0DACE = popup scrollbar track, #266651 = viewer panel accent). Appearance "property" uses the
|
||||
--hm-sw-property-range-* tokens above. */
|
||||
--hm-sw-slider-panel-track: #e0dace;
|
||||
--hm-sw-slider-panel-range: #266651;
|
||||
--hm-sw-slider-panel-thumb: #fff;
|
||||
/* SWSelect (2026-10-20): the panel field values of the viewer 축척 지정 select (property inner border / content). */
|
||||
--hm-sw-select-border-color: var(--hm-sw-property-inner-border);
|
||||
--hm-sw-select-background: var(--hm-sw-property-content);
|
||||
--hm-sw-select-text: var(--hm-sw-property-label);
|
||||
|
||||
/* User-confirmed: document (file name) surface */
|
||||
--hm-sw-header-document-background: linear-gradient(180deg, #081813 0%, #09271e 8.69%, #0b3227 25.43%, #0e3d2f 51.25%, #0b3227 80.03%, #0a2b21 89.76%, #081813 100%);
|
||||
@@ -1541,20 +1552,25 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
.hm-sw-property__value { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
|
||||
.hm-sw-property__value > .hm-sw-header__input { width: auto; max-width: 100%; min-width: 0; flex: 1; text-shadow: none; letter-spacing: .02em; font-weight: 500; }
|
||||
.hm-sw-property__value > .hm-sw-header__input:focus { color: var(--hm-sw-header-input-color); }
|
||||
.hm-sw-property__value > select { flex: 1; min-width: 0; width: 0; height: 28px; padding: 0; appearance: none; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--hm-sw-header-input-color); font: inherit; }
|
||||
.hm-sw-property__value > select:disabled { opacity: 1; appearance: none; color: var(--hm-sw-header-input-color); }
|
||||
.hm-sw-property__value > select:focus { background: var(--hm-sw-property-content); border-color: var(--hm-sw-property-inner-border); }
|
||||
.hm-sw-property__value > select:not(.hm-sw-select) { flex: 1; min-width: 0; width: 0; height: 28px; padding: 0; appearance: none; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--hm-sw-header-input-color); font: inherit; }
|
||||
.hm-sw-property__value > select:not(.hm-sw-select):disabled { opacity: 1; appearance: none; color: var(--hm-sw-header-input-color); }
|
||||
.hm-sw-property__value > select:not(.hm-sw-select):focus { background: var(--hm-sw-property-content); border-color: var(--hm-sw-property-inner-border); }
|
||||
/* SWSelect: native select, panel field look; focus = the SW popup focus ring. */
|
||||
.hm-sw-select { flex: 0 0 auto; height: 28px; padding: 0 8px; border: 1px solid var(--hm-sw-select-border-color); border-radius: 4px; background: var(--hm-sw-select-background); color: var(--hm-sw-select-text); font: inherit; font-size: 12px; }
|
||||
.hm-sw-select:disabled { opacity: 0.4; cursor: default; }
|
||||
.hm-sw-property__unit { flex: 0 0 auto; font-size: 12px; white-space: nowrap; }
|
||||
/* Color preview (26:12175): 70 x 16 black tile (1px padding, radius 2), 68 x 14 swatch with a white 1px border. */
|
||||
.hm-sw-property__swatch-area { display: flex; align-items: center; flex: 0 0 auto; }
|
||||
.hm-sw-property__swatch { display: block; flex: 0 0 70px; width: 70px; height: 16px; padding: 1px; border-radius: 2px; background: #000; }
|
||||
.hm-sw-property__swatch > i { display: block; height: 14px; border: 1px solid #fff; border-radius: 1px; }
|
||||
.hm-sw-property__value > input[type="range"] { appearance: none; flex: 0 0 86px; width: 86px; height: 16px; margin: 0; background: transparent; cursor: pointer; }
|
||||
/* Property window gauge, also SWSlider appearance="property" (2026-10-20, same rules; the 86px width is the property row only). */
|
||||
.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider) { flex: 0 0 86px; width: 86px; }
|
||||
:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"]) { appearance: none; height: 16px; margin: 0; background: transparent; cursor: pointer; }
|
||||
/* --hm-sw-range-fill (0-1) is set from the value; the red ends under the thumb centre (14px thumb).
|
||||
The 3px radius rounds the fill's left cap; the first layer is its left stroke. Track and thumb are
|
||||
shared values, painted once per engine: WebKit/Blink track + thumb, Gecko track + thumb (Gecko's
|
||||
::-moz-range-progress is kept empty so the fill is never painted twice). */
|
||||
.hm-sw-property__value > input[type="range"] {
|
||||
:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"]) {
|
||||
--hm-sw-range-fill-width: calc(7px + (100% - 14px) * var(--hm-sw-range-fill, 0));
|
||||
--hm-sw-range-track-paint:
|
||||
linear-gradient(90deg, var(--hm-sw-property-range-fill-edge) 0 1px, transparent 1px) 0 0 / var(--hm-sw-range-fill-width) 100% no-repeat,
|
||||
@@ -1563,11 +1579,31 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
--hm-sw-range-thumb-paint: url("../assets/property-range-thumb.svg") center / 14px 14px no-repeat;
|
||||
--hm-sw-range-thumb-shadow: 0 0 3px #1c1a16, 0 2px 2px rgba(28, 26, 22, .4);
|
||||
}
|
||||
.hm-sw-property__value > input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
|
||||
.hm-sw-property__value > input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
|
||||
.hm-sw-property__value > input[type="range"]::-moz-range-track { box-sizing: border-box; height: 6px; border: 0; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
|
||||
.hm-sw-property__value > input[type="range"]::-moz-range-progress { height: 0; background: transparent; }
|
||||
.hm-sw-property__value > input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
|
||||
:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
|
||||
:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
|
||||
:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-moz-range-track { box-sizing: border-box; height: 6px; border: 0; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
|
||||
:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-moz-range-progress { height: 0; background: transparent; }
|
||||
:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-moz-range-thumb { box-sizing: border-box; width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
|
||||
/* SWSlider (2026-10-20): one native range, two looks. Fills the row by default (the host may set a width).
|
||||
appearance="panel" is the gauge the SW popup used (also SWViewerSlider): the range is painted up to
|
||||
--hm-sw-range-fill of the track. */
|
||||
.hm-sw-slider { flex: 1 1 auto; width: 100%; min-width: 0; }
|
||||
.hm-sw-slider:disabled { opacity: 0.4; cursor: default; }
|
||||
.hm-sw-slider[data-appearance="panel"] {
|
||||
--hm-sw-slider-percent: calc(var(--hm-sw-range-fill, 0) * 100%);
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hm-sw-slider[data-appearance="panel"]:disabled { cursor: default; }
|
||||
.hm-sw-slider[data-appearance="panel"]::-webkit-slider-runnable-track { height: 6px; border-radius: 9999px; background: linear-gradient(90deg, var(--hm-sw-slider-panel-range) var(--hm-sw-slider-percent), var(--hm-sw-slider-panel-track) var(--hm-sw-slider-percent)); }
|
||||
.hm-sw-slider[data-appearance="panel"]::-moz-range-track { height: 6px; border-radius: 9999px; background: var(--hm-sw-slider-panel-track); }
|
||||
.hm-sw-slider[data-appearance="panel"]::-moz-range-progress { height: 6px; border-radius: 9999px; background: var(--hm-sw-slider-panel-range); }
|
||||
.hm-sw-slider[data-appearance="panel"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; border: 2px solid var(--hm-sw-slider-panel-range); border-radius: 9999px; background: var(--hm-sw-slider-panel-thumb); appearance: none; }
|
||||
.hm-sw-slider[data-appearance="panel"]::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border: 2px solid var(--hm-sw-slider-panel-range); border-radius: 9999px; background: var(--hm-sw-slider-panel-thumb); }
|
||||
.hm-sw-slider[data-appearance="panel"]:focus-visible { outline: 2px solid var(--hm-sw-slider-panel-range); outline-offset: 2px; }
|
||||
.hm-sw-property__value > .hm-sw-header__line-preview { flex-basis: 68px; width: 68px; }
|
||||
.hm-sw-property__expand { display: block; width: 100%; height: 12px; overflow: hidden; }
|
||||
.hm-sw-property__expand > img { display: block; width: 296px; height: 12px; margin-left: calc((100% - 296px) / 2); }
|
||||
|
||||
Reference in new issue
Block a user