fix(sw): match the lit middle step group top shade to the first group

The lit middle group overlay started at the group top, so its dark top band was about twice as thick as the first / last group face. It now starts 4.95px above the group like that face and runs to the bottom edge.
This commit is contained in:
shkim4 committed 2026-11-05 18:23:34 +09:00
1 parent c9fbb06a92
commit 51ff338923
3 files changed
+9 -3

No files matched your search

+1 -1
View File
@@ -230,7 +230,7 @@
| 프로세스 바탕 | 세로 `#0C5941 → #19BF8D 10.1% → #109069 18.27% → #0C5941`, 파일명 테두리 1px, 위 모서리 6. `multi`는 양 끝 직각(2026-11-05 — 단계 탭 모양과 별개) | `--hm-sw-process-base-background`, `-base-border-gradient` |
| 비활성 덮개 | `rgba(0, 68, 48, .902)`: 비활성 그룹, 화살표 꼭지(앞 그룹 비활성)·홈(뒤 그룹 비활성), 비활성 바깥 그룹 쪽 남는 폭 | `--hm-sw-process-dim` |
| 그룹 글자 | 번호 12px 500 `#69C2A6`, 이름 12px(최대 56, 줄바꿈) 활성 700 `#FFF` / 비활성 500 `#C3EBDF`, 위 10.67(한 줄)·8.67(두 줄), 그룹 좌우 20, 이름 뒤 12 | `--hm-sw-process-number-color`, `-group-color`, `-group-active-color` |
| 활성 그룹 면 | 기운 변 도형, 3층 면(85·80·45%), 발광 `drop-shadow(0 0 30px rgba(88,181,153,.85))`, 가장자리 빛 3px Blur 5, 화살표 쪽 76px에 걸쳐 사라짐. 첫 그룹 왼쪽 40px 밖, 마지막 그룹 좌우 반전·44px 밖 | `--hm-sw-process-glow-*` |
| 활성 그룹 면 | 기운 변 도형, 3층 면(85·80·45%), 발광 `drop-shadow(0 0 30px rgba(88,181,153,.85))`, 가장자리 빛 3px Blur 5, 화살표 쪽 76px에 걸쳐 사라짐. 첫 그룹 왼쪽 40px 밖, 마지막 그룹 좌우 반전·44px 밖. `multi`의 켜진 중간 그룹은 도형·Halo·rim(80%) 없이 2층(85·45%) 오버레이만 쓰며, 면은 첫 그룹과 같이 그룹 위 4.95px에서 시작해 아래 끝까지(위쪽은 바에서 잘림) | `--hm-sw-process-glow-*` |
| 비활성 바깥 그룹 면 | Blur 4 면 + `drop-shadow(0 0 15px rgba(17,105,79,.8))` + 테두리 빛 1.5px, 바깥에서 안쪽으로 사라짐(79.8→198.4 / 반전 236.7→273.1) | `--hm-sw-process-idle-*` |
| 사다리꼴 배치(확정 2026-11-03) | 그룹 면(사다리꼴)은 프로세스 영역의 **시작(첫 그룹)과 끝(마지막 그룹)에만** 둡니다. 그 그룹이 켜져 있으면 발광 면, 아니면 비활성 면. 가운데 그룹에는 켜져 있어도 도형이 없고 밝은 바탕(덮개 없음)만 보입니다(Figma 873:17421). 그룹 수와 관계없이 같으며 `default`·`multi` 공통. 화살표·비활성 덮개·선택 상태는 그대로 |
| 화살표 | 16 × 48. On 채움 `#27D9A5`, Dim 채움 `#ABC7BF` 25%·선 50%, 그늘이 다음 그룹 위로 20% | `--hm-sw-process-arrow-*`, `-shade*` |
+7 -1
View File
@@ -512,7 +512,13 @@
position: absolute;
/* Starts at the arrow cell on the left (16px) so the notch behind the arrow carries the same face as the group; below the
arrow cell's dim cover (z 0), so the dimmed tip in front of the arrow stays as it is. */
inset: 0 0 0 -16px;
/* Starts 4.9526px above the group like the first / last group face (.hm-sw-process-bar__glow-face), so the dark top band
is as thin; the part above the bar is clipped by the bar's overflow. It runs to the bottom edge (the first / last group
face ends 4.8px above it): a lit middle group has no shape, so a gap there would show as a lifted bottom edge. */
top: -4.9526px;
left: -16px;
right: 0;
bottom: 0;
z-index: -1;
-webkit-mask: linear-gradient(90deg, #000 calc(100% - 91px), transparent calc(100% - 6px));
mask: linear-gradient(90deg, #000 calc(100% - 91px), transparent calc(100% - 6px));