fix(sw): refine property panel and Firefox range styles
- Property bar ends after its last field (content width, scrolls when longer) - Remove Figma canvas layers from property tool and close SVGs - Suppress header field hover while the field's own dropdown is open - Gauge: Figma red fill pill, beige track, Figma thumb SVG; shared paint for WebKit and Gecko (::-moz-range-*) so Firefox matches Chrome - Story buttons for gauge external value / disabled / read-only - Browser checks: follow-up fixes, Chrome vs Firefox range, close button Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
shkim4andClaude Opus 5.5 committed
1 parent
fc26afd440
commit
724c51732b
66 files changed
+3823
-39
No files matched your search
@@ -75,6 +75,14 @@
|
||||
--hm-sw-property-label: #000;
|
||||
--hm-sw-property-table: #d2c8b4;
|
||||
--hm-sw-property-inner-border: #948871;
|
||||
/* Gauge (user-supplied Figma SVGs, 2026-10-19). Fill = Rectangle 6926: 6px pill, 1px black stroke,
|
||||
vertical #8E0000 / #FF4242 37% / #E40000 76% / #1E0000 inside the stroke; its right end sits under
|
||||
the thumb. Unfilled track = beige measured row by row from the user's reference image.
|
||||
Thumb = Rectangle 6915: 14px conic + 2px 40% ring; its two drop shadows are CSS. */
|
||||
--hm-sw-property-range-fill: linear-gradient(#000 0 1px, #8e0000 1px, #ff4242 2.46px, #e40000 3.99px, #1e0000 4.94px, #000 4.94px);
|
||||
--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;
|
||||
|
||||
/* 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%);
|
||||
@@ -168,13 +176,16 @@
|
||||
background: var(--hm-sw-header-background);
|
||||
}
|
||||
|
||||
/* Figma 26:10492. Header stays 49px; host content can reserve the extra 28px when open. */
|
||||
.hm-sw-header__bar-anchor { position: absolute; top: 49px; z-index: 2; max-width: 1222px; }
|
||||
/* Figma 26:10492. Header stays 49px; host content can reserve the extra 28px when open.
|
||||
The strip ends after its last field (user correction 2026-10-19, overrides the fixed 1222px frame):
|
||||
it shrinks to its content, so no empty brown area, and is capped by the space right of its left
|
||||
edge (inline max-width); longer property lists scroll inside. */
|
||||
.hm-sw-header__bar-anchor { position: absolute; top: 49px; z-index: 2; }
|
||||
.hm-sw-property-bar {
|
||||
--hm-sw-property-bar-background: #271f13;
|
||||
--hm-sw-property-bar-border: #08251c;
|
||||
width: 100%;
|
||||
max-width: 1222px;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
height: 28px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
@@ -600,11 +611,13 @@
|
||||
|
||||
/* Group-field hover (user request): all labels/values and the font sample inherit yellow.
|
||||
Swatches and layer-state graphics retain their data colors. Line borders and the dimension
|
||||
SVG's black mask outline stay black; only the white foreground changes. Disabled is excluded. */
|
||||
.hm-sw-header__field:hover:not(:disabled) { color: var(--hm-sw-header-selected-color); }
|
||||
.hm-sw-header__field:hover:not(:disabled) .hm-sw-header__linetype > i { background: var(--hm-sw-header-selected-color); }
|
||||
.hm-sw-header__field:hover:not(:disabled) .hm-sw-header__dimension-icon-default { visibility: hidden; }
|
||||
.hm-sw-header__field:hover:not(:disabled) .hm-sw-header__dimension-icon-hover { visibility: visible; }
|
||||
SVG's black mask outline stay black; only the white foreground changes. Disabled is excluded.
|
||||
While a field's own dropdown is open (data-expanded) hover adds nothing: the expanded styling
|
||||
stays as is and hover returns once the list closes. Focus-visible is unaffected. */
|
||||
.hm-sw-header__field:hover:not(:disabled, [data-expanded="true"]) { color: var(--hm-sw-header-selected-color); }
|
||||
.hm-sw-header__field:hover:not(:disabled, [data-expanded="true"]) .hm-sw-header__linetype > i { background: var(--hm-sw-header-selected-color); }
|
||||
.hm-sw-header__field:hover:not(:disabled, [data-expanded="true"]) .hm-sw-header__dimension-icon-default { visibility: hidden; }
|
||||
.hm-sw-header__field:hover:not(:disabled, [data-expanded="true"]) .hm-sw-header__dimension-icon-hover { visibility: visible; }
|
||||
|
||||
/* Hover — Figma header/btn_home "hover": the 1px border turns into a yellow vertical gradient.
|
||||
Same treatment on every bordered SW Header button except the file name and 속성Bar / 속성창
|
||||
@@ -635,7 +648,7 @@
|
||||
/* Popup guide: the 1px outline is inside its SVG (rect rx 1.5 + 0.5 stroke), so the ring overlays it. */
|
||||
.hm-sw-header__action--guide { border-radius: 2px; }
|
||||
.hm-sw-header__action--guide::after { inset: 0; }
|
||||
:is(.hm-sw-header__field, .hm-sw-header__more-trigger, .hm-sw-header__action):hover:not(:disabled)::after { opacity: 1; }
|
||||
:is(.hm-sw-header__field, .hm-sw-header__more-trigger, .hm-sw-header__action):hover:not(:disabled, [data-expanded="true"])::after { opacity: 1; }
|
||||
|
||||
/* Selected: text and mono icons turn yellow; no selected background, border or shadow. */
|
||||
:is(.hm-sw-header, .hm-sw-theme) [data-selected="true"] { color: var(--hm-sw-header-selected-color); }
|
||||
@@ -1483,7 +1496,7 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
.hm-sw-property__title { position: relative; z-index: 2; flex: 1; min-width: 0; margin-left: 7px; padding-right: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; letter-spacing: .04em; color: var(--hm-sw-header-selected-color); text-shadow: var(--hm-sw-header-label-outline); }
|
||||
.hm-sw-property__tool { position: absolute; z-index: 2; right: 43px; top: 1px; width: 29px; height: 27.13px; }
|
||||
.hm-sw-property:not([data-selection-kind="single"]) .hm-sw-property__title { margin-right: 29px; }
|
||||
.hm-sw-property__tool > img { position: absolute; top: 0; left: 0; display: block; width: 29px; height: 28px; }
|
||||
.hm-sw-property__tool > img { position: absolute; top: 0; left: 0; display: block; width: 29px; height: 27.13px; }
|
||||
.hm-sw-property__tool-hover { visibility: hidden; }
|
||||
.hm-sw-property__tool:hover > .hm-sw-property__tool-default { visibility: hidden; }
|
||||
.hm-sw-property__tool:hover > .hm-sw-property__tool-hover { visibility: visible; }
|
||||
@@ -1510,8 +1523,24 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
.hm-sw-property__swatch { display: block; flex: 0 0 70px; height: 16px; padding: 1px; border: 1px solid #000; border-radius: 2px; }
|
||||
.hm-sw-property__swatch > i { display: block; height: 12px; border: 1px solid #fff; }
|
||||
.hm-sw-property__value > input[type="range"] { appearance: none; flex: 0 0 86px; width: 86px; height: 16px; margin: 0; background: transparent; cursor: pointer; }
|
||||
.hm-sw-property__value > input[type="range"]::-webkit-slider-runnable-track { height: 3px; border: 1px solid rgba(28,26,22,.4); border-radius: 8px; background: linear-gradient(#8e0000, #ff4242 37%, #e40000 76%, #1e0000); }
|
||||
.hm-sw-property__value > input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -6px; border: 2px solid #ff5656; border-radius: 12px; background: conic-gradient(#520000, #ffb1b1 35%, #e40000 44%, #ffa7a7 57%, #520000 81%); box-shadow: 0 2px 2px rgba(28,26,22,.4), 0 0 3px #1c1a16; }
|
||||
/* --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"] {
|
||||
--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,
|
||||
var(--hm-sw-property-range-fill) 0 0 / var(--hm-sw-range-fill-width) 100% no-repeat,
|
||||
var(--hm-sw-property-range-track);
|
||||
--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); }
|
||||
.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