diff --git a/packages/sw/src/theme/sw-process-header.css b/packages/sw/src/theme/sw-process-header.css index fad02f5..f31c8f9 100644 --- a/packages/sw/src/theme/sw-process-header.css +++ b/packages/sw/src/theme/sw-process-header.css @@ -493,6 +493,29 @@ .hm-sw-process-header[data-appearance="multi"] .hm-sw-process-header__window .hm-sw-process-header__tools { height: 41px; margin: 4px 2px 0 5px; } .hm-sw-process-header[data-appearance="multi"] .hm-sw-process-header__tools .hm-sw-tool__pill-button { height: 37px; } +/* Lit middle group (neither the first nor the last; Figma 6797:16225): the two start_bg overlay layers (0.85 / 0.45, lit-group + tokens) over the bar's bright base, fading out to the right (Figma 107 / 22px from the end of the 381px frame = 91 / 6px + from the end of the group). Inside the group box only; the arrows and the first / last surfaces are untouched. */ +.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group[data-active]:not(.hm-sw-process-bar__rest + .hm-sw-process-bar__group):not(.hm-sw-process-bar__group + .hm-sw-process-bar__rest)::before, +.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group[data-active]:not(.hm-sw-process-bar__rest + .hm-sw-process-bar__group):not(.hm-sw-process-bar__group + .hm-sw-process-bar__rest)::after { + content: ""; + 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; + 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)); +} +.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group[data-active]:not(.hm-sw-process-bar__rest + .hm-sw-process-bar__group):not(.hm-sw-process-bar__group + .hm-sw-process-bar__rest)::before { + background: var(--hm-sw-process-glow-face-base); + opacity: 0.85; +} +.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group[data-active]:not(.hm-sw-process-bar__rest + .hm-sw-process-bar__group):not(.hm-sw-process-bar__group + .hm-sw-process-bar__rest)::after { + background: var(--hm-sw-process-glow-face-sheen); + opacity: 0.45; +} + /* Process area: 49px, groups [10][title 14 / tabs 25][10] with the arrow between (content to content 36). */ .hm-sw-process-bar[data-appearance="multi"] { --hm-sw-header-bar-height: 49px;