feat(sw): add step header with multi-step and split layout support
This commit is contained in:
shkim4 committed
1 parent
6ca92c5d55
commit
adbb034cb1
28 files changed
+2477
-7
No files matched your search
@@ -0,0 +1,167 @@
|
||||
import { useId } from "react"
|
||||
|
||||
/*
|
||||
* Internal art of SWProcessHeader / SWProcessBar (not exported from the package). Geometry is the Strana Main Header
|
||||
* (HeaderStyles.xaml, HEAD edda3cc); colors are --hm-sw-process-* / --hm-sw-header-* tokens, so a theme override
|
||||
* through the outermost SW scope recolors them. Inline SVG instead of asset files for that reason.
|
||||
*/
|
||||
|
||||
const stop = (token: string) => ({ stopColor: `var(${token})` })
|
||||
|
||||
/** Glow surface of the lit group (Header.ContentControl.ProcessShape). Face / halo / fade are CSS. */
|
||||
function GlowShape() {
|
||||
return (
|
||||
<>
|
||||
<span className="hm-sw-process-bar__glow-halo">
|
||||
<span className="hm-sw-process-bar__glow-face"><i /><i /><i /></span>
|
||||
</span>
|
||||
{/* Edge light: 3px stroke, 10 blur, fading at the bottom (Header.Geometry.ProcessGlowLeftEdge at -1.5). */}
|
||||
<svg className="hm-sw-process-bar__glow-edge" width="54" height="48" viewBox="0 0 54 48" overflow="visible">
|
||||
<path d="M37.6,0 L42.04,36.63 C42.53,40.65 45.94,43.66 49.98,43.66 H50.5" />
|
||||
</svg>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
/** Idle surface of an unlit outer group (Header.ContentControl.ProcessShapeIdle). */
|
||||
function IdleShape() {
|
||||
return (
|
||||
<>
|
||||
<span className="hm-sw-process-bar__idle-halo">
|
||||
<span className="hm-sw-process-bar__idle-blur"><span className="hm-sw-process-bar__idle-face" /></span>
|
||||
</span>
|
||||
<svg className="hm-sw-process-bar__idle-rim" width="100%" height="48" overflow="visible">
|
||||
<path d="M47.153,-4.95264 C42.095,-4.95264 38.306,-0.31753 39.313,4.63925 L46.064,37.889 C46.821,41.6176 50.099,44.2971 53.904,44.2971 H60" />
|
||||
<rect x="60" y="43.5471" width="100%" height="1.5" />
|
||||
</svg>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
/** Group surface behind the name and tabs. `mirrored`: the last group (Strana ScaleX −1, 44px outside). */
|
||||
export function SWProcessShape({ kind, mirrored }: { kind: "active" | "idle"; mirrored: boolean }) {
|
||||
return (
|
||||
<span className="hm-sw-process-bar__shape" data-kind={kind} data-mirrored={mirrored || undefined} aria-hidden="true">
|
||||
{kind === "active" ? <GlowShape /> : <IdleShape />}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Arrow between two groups (Header.Control.ProcessArrowOn / Dim, 16 x 48) and the dim cover of its cell:
|
||||
* the tip is dim while the group before is unlit, the notch while the group after is unlit.
|
||||
*/
|
||||
export function SWProcessArrow({ on, dimTip, dimNotch }: { on: boolean; dimTip: boolean; dimNotch: boolean }) {
|
||||
const id = useId()
|
||||
return (
|
||||
<span className="hm-sw-process-bar__arrow" aria-hidden="true">
|
||||
{(dimTip || dimNotch) && (
|
||||
<svg className="hm-sw-process-bar__arrow-dim" width="16" height="48" viewBox="0 0 16 48" preserveAspectRatio="none">
|
||||
{dimTip && <path d="M0,0 L13,24 L0,48 Z" />}
|
||||
{dimNotch && <path d="M0,0 H16 V48 H0 L12.25,24 Z" />}
|
||||
</svg>
|
||||
)}
|
||||
<svg className="hm-sw-process-bar__arrow-art" width="16" height="48" viewBox="0 0 16 48" overflow="visible">
|
||||
<defs>
|
||||
<linearGradient id={`${id}s`} gradientUnits="userSpaceOnUse" x1="0.1" y1="0" x2={on ? 22.5 : 50.5} y2="0">
|
||||
<stop offset="0" style={stop("--hm-sw-process-shade")} />
|
||||
{!on && <stop offset="0.12" style={stop("--hm-sw-process-shade-mid")} />}
|
||||
<stop offset="1" style={stop("--hm-sw-process-shade-fade")} />
|
||||
</linearGradient>
|
||||
<linearGradient id={`${id}f`} x1="1" y1="0.5" x2="0" y2="0.5">
|
||||
<stop offset="0" style={stop(on ? "--hm-sw-process-arrow-fill" : "--hm-sw-process-arrow-dim-fill")} />
|
||||
<stop offset="1" style={stop("--hm-sw-process-arrow-fill-fade")} />
|
||||
</linearGradient>
|
||||
<linearGradient id={`${id}l`} x1="0" y1="1" x2="0" y2="0">
|
||||
<stop offset="0" style={stop("--hm-sw-process-arrow-edge")} />
|
||||
<stop offset="0.45" style={stop("--hm-sw-process-arrow-mid")} />
|
||||
<stop offset="0.7" style={stop("--hm-sw-process-arrow-light")} />
|
||||
<stop offset="1" style={stop("--hm-sw-process-arrow-edge")} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path transform="translate(3.01 0)" d="M0,0 H106.926 V47.8735 H0 L12.5175,23.9368 Z" fill={`url(#${id}s)`} opacity="0.2" />
|
||||
<path d="M11.9375,24.2236 L0,1.24 V47.2072 Z" fill={`url(#${id}f)`} opacity={on ? undefined : 0.25} />
|
||||
<g opacity={on ? undefined : 0.5} fill="none" strokeWidth="1">
|
||||
<path className="hm-sw-process-bar__arrow-shadow" transform="translate(1 0)" d="M1.285,0.2236 L13.285,24.2236 L1.285,48.2236" />
|
||||
<path d="M1.285,0.2236 L13.285,24.2236 L1.285,48.2236" stroke={`url(#${id}l)`} />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const CAPTION_GLYPHS = {
|
||||
minimize: "M11,23 H21 V25 H11 Z",
|
||||
maximize: "M11,19 H21 V29 H11 Z M12,21 V28 H20 V21 Z",
|
||||
restore: "M13,18 H22 V27 H21 V20 H13 Z M11,21 H20 V30 H11 Z M12,23 V29 H19 V23 Z",
|
||||
close: "M16 22.5854L20.5 18.0854L21.9142 19.4996L17.4142 23.9996L21.915 28.5004L20.5008 29.9146L16 25.4138L11.4992 29.9146L10.085 28.5004L14.5858 23.9996L10.0858 19.4996L11.5 18.0854L16 22.5854Z",
|
||||
} as const
|
||||
|
||||
/** Caption glyph (Header.Geometry.Caption*) in the 32 x 48 button, filled with the button color. */
|
||||
export function SWProcessCaptionGlyph({ kind }: { kind: keyof typeof CAPTION_GLYPHS }) {
|
||||
return (
|
||||
<svg width="32" height="48" viewBox="0 0 32 48" aria-hidden="true">
|
||||
<path d={CAPTION_GLYPHS[kind]} fill="currentColor" fillRule="evenodd" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
/** Viewport split layouts in the Strana order (ViewportSplitType Type01 … Type06). */
|
||||
export const SW_PROCESS_SPLIT_TYPES = ["single", "columns", "rows", "topWide", "leftTall", "grid"] as const
|
||||
|
||||
type Rect = readonly [x: number, y: number, width: number, height: number]
|
||||
|
||||
// Header button icon panes (Header.Geometry.ToolLayout.T1 … T5, default 2 x 2), in the 24 x 24 icon.
|
||||
const W = 6.538, H = 3.448, FW = 15.11, FH = 8.87, X1 = 4.477, X2 = 13.049, Y1 = 7.597, Y2 = 13.019
|
||||
const ICON_PANES: Record<(typeof SW_PROCESS_SPLIT_TYPES)[number], readonly Rect[]> = {
|
||||
single: [[X1, Y1, FW, FH]],
|
||||
columns: [[X1, Y1, W, FH], [X2, Y1, W, FH]],
|
||||
rows: [[X1, Y1, FW, H], [X1, Y2, FW, H]],
|
||||
topWide: [[X1, Y1, FW, H], [X1, Y2, W, H], [X2, Y2, W, H]],
|
||||
leftTall: [[X1, Y1, W, FH], [X2, Y1, W, H], [X2, Y2, W, H]],
|
||||
grid: [[X1, Y1, W, H], [X2, Y1, W, H], [X1, Y2, W, H], [X2, Y2, W, H]],
|
||||
}
|
||||
|
||||
/** Split button icon (Header.Icon.ToolLayout): the frame takes the button color (currentColor), panes stay dark. */
|
||||
export function SWProcessSplitIcon({ type }: { type: (typeof SW_PROCESS_SPLIT_TYPES)[number] }) {
|
||||
return (
|
||||
<svg className="hm-sw-process-split__icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
|
||||
<rect x="2.485" y="5.557" width="19.038" height="12.888" rx="0.481" fill="currentColor" />
|
||||
{ICON_PANES[type].map(([x, y, w, h], index) => <rect key={index} className="hm-sw-process-split__icon-pane" x={x} y={y} width={w} height={h} />)}
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Selector cell panes (Geometry.SplitCell.T1 … T6) in the 29.6 x 19.73 frame, radius 1.
|
||||
const CELL_PANES: Record<(typeof SW_PROCESS_SPLIT_TYPES)[number], readonly Rect[]> = {
|
||||
single: [[0.82, 0.82, 27.954, 18.088]],
|
||||
columns: [[0.82, 0.82, 13.566, 18.088], [15.2, 0.82, 13.566, 18.088]],
|
||||
rows: [[0.82, 0.82, 27.99, 8.633], [0.82, 10.26, 27.99, 8.633]],
|
||||
topWide: [[0.82, 0.82, 27.99, 8.633], [0.82, 10.26, 13.566, 8.633], [15.2, 10.26, 13.566, 8.633]],
|
||||
leftTall: [[0.82, 0.82, 13.566, 18.088], [15.2, 0.81, 13.566, 8.633], [15.2, 10.28, 13.566, 8.633]],
|
||||
grid: [[0.83, 0.81, 13.566, 8.633], [15.2, 0.81, 13.566, 8.633], [0.83, 10.26, 13.566, 8.633], [15.2, 10.28, 13.566, 8.633]],
|
||||
}
|
||||
|
||||
/**
|
||||
* Selector cell picture (Button.SplitCell): light frame with a black outline, panes with a 1px inner edge (drawn on a
|
||||
* line 0.5 inside, so the edge stays inside the pane), and the top-left sheen.
|
||||
*/
|
||||
export function SWProcessSplitCell({ type }: { type: (typeof SW_PROCESS_SPLIT_TYPES)[number] }) {
|
||||
const id = useId()
|
||||
return (
|
||||
<span className="hm-sw-process-split__frame" aria-hidden="true">
|
||||
<svg viewBox="0 0 29.599 19.733" width="29.599" height="19.733">
|
||||
<defs>
|
||||
<linearGradient id={`${id}s`} gradientUnits="userSpaceOnUse" x1="0.2785" y1="1.8744" x2="10.2688" y2="18.0923">
|
||||
<stop offset="0" stopColor="#fff" />
|
||||
<stop offset="0.4295" stopColor="#fff" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{CELL_PANES[type].map(([x, y, w, h], index) => (
|
||||
<rect key={index} className="hm-sw-process-split__pane" x={x + 0.5} y={y + 0.5} width={w - 1} height={h - 1} rx="0.5" />
|
||||
))}
|
||||
<path transform="translate(2.18 1.9)" d="M20.1195,0 C7.69482,0 1.52955,8.77004 0,13.1551 V1 C0,0.4477 0.4477,0 1,0 H20.1195 Z" fill={`url(#${id}s)`} opacity="0.25" />
|
||||
</svg>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
import { forwardRef, Fragment, useId, useLayoutEffect, useRef, type KeyboardEvent } from "react"
|
||||
import "../../theme/sw-process-header.css"
|
||||
import { moveRovingFocus } from "../shared/roving-focus"
|
||||
import { SWProcessArrow, SWProcessShape } from "./SWProcessArt"
|
||||
import type { SWProcessBarProps } from "./types"
|
||||
|
||||
type StepShape = "single" | "start" | "middle" | "end"
|
||||
const stepShape = (index: number, count: number): StepShape =>
|
||||
count === 1 ? "single" : index === 0 ? "start" : index === count - 1 ? "end" : "middle"
|
||||
|
||||
/**
|
||||
* Process area of the Strana Main Header (MainProcessBar.xaml) and the StrAna-SW multi step header (`appearance="multi"`):
|
||||
* groups with a number, a name and step tabs, an arrow between groups, the lit group on a glow surface. One checked step
|
||||
* for the whole bar (radio group, arrow keys move and select). Groups keep their natural width and shrink together in
|
||||
* proportion; the room left over is shared on both sides. Both appearances share this markup; only the group content
|
||||
* (name beside or above the tabs, tab look) differs in CSS. Data in props, selection through `onStepSelect`.
|
||||
*/
|
||||
export const SWProcessBar = forwardRef<HTMLDivElement, SWProcessBarProps>(function SWProcessBar(
|
||||
{ appearance = "default", groups, activeStepId, activeGroupId, onStepSelect, disabled, className, onKeyDown, "aria-label": ariaLabel, ...rest }, forwardedRef,
|
||||
) {
|
||||
const id = useId()
|
||||
const rootRef = useRef<HTMLDivElement | null>(null)
|
||||
const multi = appearance === "multi"
|
||||
const litGroupId = activeGroupId ?? groups.find(group => group.steps.some(step => step.id === activeStepId))?.id
|
||||
// multi only: the groups before the lit one are done (Figma 873:17421: bright name and tabs on the dim surface).
|
||||
const litIndex = groups.findIndex(group => group.id === litGroupId)
|
||||
const enabledIds = groups.flatMap(group => disabled || group.disabled ? [] : group.steps.filter(step => !step.disabled).map(step => step.id))
|
||||
const tabStop = activeStepId !== undefined && enabledIds.includes(activeStepId) ? activeStepId : enabledIds[0]
|
||||
|
||||
// Measured, so fonts and labels can change:
|
||||
// - a two-line group name sits 2px higher (Strana: 8.67 instead of 10.67);
|
||||
// - each group keeps room for its name (beside the tabs) and every tab down to its padding (the checked one too, so
|
||||
// it shrinks with the others). Groups still shrink in proportion above that minimum and never overlap below it.
|
||||
useLayoutEffect(() => {
|
||||
const root = rootRef.current
|
||||
if (!root) return
|
||||
const px = (value: string) => parseFloat(value) || 0
|
||||
const update = () => {
|
||||
root.querySelectorAll<HTMLElement>(".hm-sw-process-bar__name-text").forEach(name => {
|
||||
const label = name.closest<HTMLElement>(".hm-sw-process-bar__label")
|
||||
if (label) label.dataset.lines = name.getBoundingClientRect().height > 15 ? "2" : "1"
|
||||
})
|
||||
root.querySelectorAll<HTMLElement>(".hm-sw-process-bar__group").forEach(group => {
|
||||
const style = getComputedStyle(group)
|
||||
const steps = group.querySelector<HTMLElement>(".hm-sw-process-bar__steps")
|
||||
const label = group.querySelector<HTMLElement>(".hm-sw-process-bar__label")
|
||||
if (!steps) return
|
||||
const tabs = Array.from(steps.children) as HTMLElement[]
|
||||
let min = px(style.paddingLeft) + px(style.paddingRight) + px(getComputedStyle(steps).columnGap) * Math.max(tabs.length - 1, 0)
|
||||
tabs.forEach(tab => {
|
||||
const tabStyle = getComputedStyle(tab)
|
||||
min += px(tabStyle.paddingLeft) + px(tabStyle.paddingRight) + px(tabStyle.borderLeftWidth) + px(tabStyle.borderRightWidth)
|
||||
})
|
||||
// Beside the tabs (default) the name takes its own width; above them (multi) it ellipsizes.
|
||||
if (label && style.flexDirection !== "column") min += label.offsetWidth + px(getComputedStyle(label).marginRight)
|
||||
group.style.minWidth = `${Math.ceil(min)}px`
|
||||
})
|
||||
}
|
||||
update()
|
||||
const observer = new ResizeObserver(update)
|
||||
root.querySelectorAll(".hm-sw-process-bar__label").forEach(node => observer.observe(node))
|
||||
return () => observer.disconnect()
|
||||
}, [groups, activeStepId, appearance])
|
||||
|
||||
const keys = (event: KeyboardEvent<HTMLDivElement>) => {
|
||||
onKeyDown?.(event)
|
||||
if (event.defaultPrevented) return
|
||||
moveRovingFocus(event, Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>('button[role="radio"]:not(:disabled)')), { vertical: true, select: true })
|
||||
}
|
||||
|
||||
const lit = (index: number) => groups[index]?.id === litGroupId
|
||||
const last = groups.length - 1
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={node => {
|
||||
rootRef.current = node
|
||||
if (typeof forwardedRef === "function") forwardedRef(node)
|
||||
else if (forwardedRef) forwardedRef.current = node
|
||||
}}
|
||||
role="radiogroup"
|
||||
aria-label={ariaLabel ?? "프로세스"}
|
||||
aria-disabled={disabled || undefined}
|
||||
className={`hm-sw-process-bar${className ? ` ${className}` : ""}`}
|
||||
data-appearance={multi ? "multi" : undefined}
|
||||
onKeyDown={keys}
|
||||
{...rest}
|
||||
>
|
||||
<span className="hm-sw-process-bar__rest" data-side="start" data-dim={!lit(0) || undefined} aria-hidden="true" />
|
||||
{groups.map((group, index) => {
|
||||
const active = lit(index)
|
||||
const outer = index === 0 || index === last
|
||||
const labelId = `${id}-group-${index}`
|
||||
return (
|
||||
<Fragment key={group.id}>
|
||||
{index > 0 && <SWProcessArrow on={lit(index - 1)} dimTip={!lit(index - 1)} dimNotch={!active} />}
|
||||
<div className="hm-sw-process-bar__group" data-active={active || undefined} data-dim={!active || undefined}
|
||||
data-progress={multi && litIndex >= 0 && index < litIndex ? "done" : undefined}>
|
||||
{/* Trapezoids only at the start and the end of the area (glow when that group is lit, idle otherwise);
|
||||
a lit middle group has the bright base without a shape (Figma 873:17421). */}
|
||||
{outer && <SWProcessShape kind={active ? "active" : "idle"} mirrored={index === last && index > 0} />}
|
||||
<span className="hm-sw-process-bar__label" id={labelId} data-label-hidden={group.labelHidden || undefined}>
|
||||
{group.number !== undefined && <span className="hm-sw-process-bar__number">{group.number}</span>}
|
||||
<span className="hm-sw-process-bar__name">
|
||||
{/* The place is always the 700 width, so the bar never moves when the group lights up. */}
|
||||
<span className="hm-sw-process-bar__name-reserve" aria-hidden="true">{group.label}</span>
|
||||
<span className="hm-sw-process-bar__name-text">{group.label}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="hm-sw-process-bar__steps">
|
||||
{group.steps.map((step, stepIndex) => {
|
||||
const checked = step.id === activeStepId
|
||||
const off = disabled || group.disabled || step.disabled
|
||||
return (
|
||||
<button
|
||||
key={step.id}
|
||||
type="button"
|
||||
role="radio"
|
||||
className="hm-sw-process-bar__step"
|
||||
data-shape={stepShape(stepIndex, group.steps.length)}
|
||||
aria-checked={checked}
|
||||
aria-label={step.label}
|
||||
aria-describedby={labelId}
|
||||
tabIndex={step.id === tabStop ? 0 : -1}
|
||||
disabled={off}
|
||||
onClick={() => { if (!checked) onStepSelect?.(step, group) }}
|
||||
>
|
||||
<span className="hm-sw-process-bar__step-box" aria-hidden="true">
|
||||
<i data-layer="glow" /><i data-layer="glow2" /><i data-layer="depth" /><i data-layer="shade" /><i data-layer="sheen" />
|
||||
<i data-layer="frame" /><i data-layer="inset-top" /><i data-layer="inset-left" /><i data-layer="ring" />
|
||||
</span>
|
||||
<span className="hm-sw-process-bar__step-text">{step.label}</span>
|
||||
<span className="hm-sw-process-bar__step-size" aria-hidden="true" />
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
<span className="hm-sw-process-bar__rest" data-side="end" data-dim={!lit(last) || undefined} aria-hidden="true" />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,87 @@
|
||||
import { forwardRef } from "react"
|
||||
import "../../theme/sw-process-header.css"
|
||||
import { SWHeaderDocumentTitle } from "../sw-header/components/SWHeaderDocumentTitle"
|
||||
import { SWHeaderHome } from "../sw-header/components/SWHeaderHome"
|
||||
import { SWHeaderLayerToggle } from "../sw-header/components/SWHeaderLayerIcons"
|
||||
import { SWHeaderWindowControls } from "../sw-header/components/SWHeaderWindowControls"
|
||||
import { SWToolGroup } from "../sw-tool/SWTool"
|
||||
import { SWProcessBar } from "./SWProcessBar"
|
||||
import { SWProcessCaptionGlyph } from "./SWProcessArt"
|
||||
import type { SWProcessHeaderLayer, SWProcessHeaderProps } from "./types"
|
||||
|
||||
/** Layer field: bulb (the SWHeader layer toggle) and the field button as siblings, one look (Strana LayerField). */
|
||||
function SWProcessLayerField({ layer, disabled, onClick, onVisibilityChange }: {
|
||||
layer: SWProcessHeaderLayer
|
||||
disabled: boolean
|
||||
onClick?: () => void
|
||||
onVisibilityChange?: (nextVisible: boolean) => void
|
||||
}) {
|
||||
const label = layer.label ?? "레이어"
|
||||
return (
|
||||
<div className="hm-sw-process-header__layer-field" data-open={layer.open || undefined} data-disabled={disabled || undefined}>
|
||||
{/* Bulb first: the tab order follows what is seen; the field button lies under it (z-index). */}
|
||||
<SWHeaderLayerToggle kind="visibility" layer={{ id: "layer", name: layer.value, visible: layer.visible ?? true, disabled }}
|
||||
onChange={onVisibilityChange ? (_layer, next) => onVisibilityChange(next) : undefined} />
|
||||
<button type="button" className="hm-sw-process-header__layer-button" title={layer.value} aria-label={`${label}: ${layer.value}`}
|
||||
aria-expanded={layer.open} disabled={disabled} onClick={onClick} />
|
||||
<span className="hm-sw-process-header__layer-text" aria-hidden="true">
|
||||
<span className="hm-sw-process-header__layer-label">{label}</span>
|
||||
<span className="hm-sw-process-header__layer-value">{layer.value}</span>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* SW general-mode header of the Strana Main Header (49px): logo → file name → process area and layer surface →
|
||||
* window area (tool pill, the SWHeader window move with its hover motion, minimize, maximize / restore, close). An independent header
|
||||
* beside SWHeader and SWViewerHeader; one header per screen. Every state is a prop and every action a callback; the
|
||||
* logo menu, the layer popup and the tool popups belong to the host. Reuses SWHeaderHome, SWHeaderDocumentTitle,
|
||||
* the SWHeader layer bulb and the SWToolGroup pill; the rest is sw-process-header.css. `appearance="multi"` is the
|
||||
* StrAna-SW multi step design on the same markup (CSS only: frame sizes, file name, tool pill, process group content).
|
||||
*/
|
||||
export const SWProcessHeader = forwardRef<HTMLElement, SWProcessHeaderProps>(function SWProcessHeader({
|
||||
appearance = "default", documentTitle, documentEmptyLabel, onDocumentClick, logo, logoText, logoSrc, logoAlt, onHomeClick, homeMenuOpen,
|
||||
process, layer, onLayerClick, onLayerVisibilityChange, tools, toolsLabel = "도구",
|
||||
onWindowMoveStart, maximized = false, onMinimize, onMaximizeToggle, onClose, hiddenControls, disabled = false,
|
||||
className, ...rest
|
||||
}, ref) {
|
||||
const hidden = new Set(hiddenControls ?? [])
|
||||
const logoNode = logo ?? (logoText ? <span className="hm-sw-process-header__wordmark">{logoText}</span> : undefined)
|
||||
const toolsShown = tools !== undefined && tools !== null && tools !== false && !hidden.has("tools")
|
||||
const captions = (["minimize", "maximize", "close"] as const).filter(id => !hidden.has(id))
|
||||
const windowShown = toolsShown || !hidden.has("windowMove") || captions.length > 0
|
||||
const documentEmpty = documentTitle === "" && !!documentEmptyLabel
|
||||
|
||||
return (
|
||||
<header ref={ref} className={`hm-sw-theme hm-sw-process-header${className ? ` ${className}` : ""}`}
|
||||
data-appearance={appearance === "multi" ? "multi" : undefined} data-document-empty={documentEmpty || undefined} {...rest}>
|
||||
<div className="hm-sw-process-header__bar">
|
||||
<SWHeaderHome logo={logoNode} logoSrc={logoSrc} logoAlt={logoAlt ?? logoText} onClick={onHomeClick} aria-expanded={homeMenuOpen} />
|
||||
<SWHeaderDocumentTitle title={documentEmpty ? documentEmptyLabel : documentTitle} onClick={onDocumentClick} />
|
||||
<div className="hm-sw-process-header__center">
|
||||
<SWProcessBar appearance={appearance} {...process} disabled={disabled || process.disabled} />
|
||||
{layer && !hidden.has("layer") && (
|
||||
<div className="hm-sw-process-header__layer">
|
||||
<SWProcessLayerField layer={layer} disabled={disabled || !!layer.disabled} onClick={onLayerClick} onVisibilityChange={onLayerVisibilityChange} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{windowShown && (
|
||||
<div className="hm-sw-process-header__window">
|
||||
{toolsShown && <SWToolGroup appearance="pill" aria-label={toolsLabel} className="hm-sw-process-header__tools">{tools}</SWToolGroup>}
|
||||
{/* The SWHeader window move as it is: stripes, icon, 1.4s hover motion and tooltip (minimize / close are ours). */}
|
||||
{!hidden.has("windowMove") && <SWHeaderWindowControls onWindowMoveStart={onWindowMoveStart} showMinimize={false} showClose={false} />}
|
||||
{captions.map(id => (
|
||||
<button key={id} type="button" className="hm-sw-process-header__caption" data-kind={id}
|
||||
aria-label={id === "minimize" ? "최소화" : id === "close" ? "종료" : maximized ? "이전 크기로 복원" : "최대화"}
|
||||
onClick={id === "minimize" ? onMinimize : id === "close" ? onClose : onMaximizeToggle}>
|
||||
<SWProcessCaptionGlyph kind={id === "maximize" && maximized ? "restore" : id} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,126 @@
|
||||
import { forwardRef, useEffect, useId, useRef, useState, type FocusEvent, type KeyboardEvent } from "react"
|
||||
import "../../theme/sw-process-header.css"
|
||||
import { moveRovingFocus } from "../shared/roving-focus"
|
||||
import { useOutsidePointerDown } from "../shared/use-outside-pointer"
|
||||
import { useSWFixedDropdownPosition } from "../sw-header/components/SWHeaderDropdown"
|
||||
import { SWToolButton } from "../sw-tool/SWTool"
|
||||
import { SW_PROCESS_SPLIT_TYPES, SWProcessSplitCell, SWProcessSplitIcon } from "./SWProcessArt"
|
||||
import type { SWProcessSplitButtonProps, SWProcessSplitType } from "./types"
|
||||
|
||||
const TYPE_LABELS: Record<SWProcessSplitType, string> = {
|
||||
single: "1면", columns: "좌우 2분할", rows: "상하 2분할", topWide: "상단 1면 + 하단 2분할", leftTall: "좌측 1면 + 우측 2분할", grid: "4분할",
|
||||
}
|
||||
|
||||
/**
|
||||
* Viewport split tool for the `tools` pill of SWProcessHeader (both appearances). The button is the SW pill button
|
||||
* (hover ring, focus, disabled); open, it takes the Strana open look and the selector hangs from it: a 3px extension of
|
||||
* the button, the 233 x 36 panel under its left edge and a gold line from its right edge to the panel end. The selector
|
||||
* is a fixed overlay kept on screen (the SW field dropdown position), so the header clipping never cuts it.
|
||||
* Keyboard: Enter / Space toggle, ArrowDown opens on the checked cell, arrows / Home / End move and choose (radio group),
|
||||
* Escape closes back to the button, Tab out and a click outside close.
|
||||
*/
|
||||
export const SWProcessSplitButton = forwardRef<HTMLButtonElement, SWProcessSplitButtonProps>(function SWProcessSplitButton(
|
||||
{ value, onValueChange, open: openProp, defaultOpen = false, onOpenChange, label = "화면 분할", typeLabels, disabled = false }, forwardedRef,
|
||||
) {
|
||||
const [internalOpen, setInternalOpen] = useState(defaultOpen)
|
||||
const open = !disabled && (openProp ?? internalOpen)
|
||||
const rootRef = useRef<HTMLSpanElement>(null)
|
||||
const triggerRef = useRef<HTMLButtonElement | null>(null)
|
||||
const popupRef = useRef<HTMLDivElement>(null)
|
||||
const focusCellRef = useRef(false)
|
||||
const popupId = useId()
|
||||
|
||||
const setOpen = (next: boolean) => {
|
||||
if (openProp === undefined) setInternalOpen(next)
|
||||
onOpenChange?.(next)
|
||||
}
|
||||
const close = (restoreFocus: boolean) => {
|
||||
setOpen(false)
|
||||
if (restoreFocus) triggerRef.current?.focus()
|
||||
}
|
||||
|
||||
useOutsidePointerDown(open, rootRef, () => setOpen(false))
|
||||
const position = useSWFixedDropdownPosition(open, triggerRef, popupRef, "start")
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !focusCellRef.current || !position) return
|
||||
focusCellRef.current = false
|
||||
popupRef.current?.querySelector<HTMLButtonElement>('[role="radio"][tabindex="0"]')?.focus()
|
||||
})
|
||||
|
||||
// The button extension reaches the header bottom, so the panel starts under the header and never covers the
|
||||
// window buttons next to the pill (Strana 3px; at least 3px when used outside a header).
|
||||
const trigger = triggerRef.current?.getBoundingClientRect()
|
||||
const headerBottom = triggerRef.current?.closest(".hm-sw-process-header")?.getBoundingClientRect().bottom
|
||||
const tail = open && position && trigger && headerBottom !== undefined ? Math.max(3, Math.round(headerBottom - trigger.bottom + 1)) : 3
|
||||
// The selector hangs from the button (tail), so it never takes the hook's flip above the field: flipped, it was
|
||||
// drawn over the header with its panel bottom cut. With no room below it stays under the button; the hook follows
|
||||
// the page scroll, which brings it into view.
|
||||
const top = position && trigger ? (position.flipped ? trigger.bottom : position.top) - 1 : 0
|
||||
|
||||
const onKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {
|
||||
if (event.key === "Escape" && open) {
|
||||
event.stopPropagation()
|
||||
close(true)
|
||||
return
|
||||
}
|
||||
if (event.target === triggerRef.current) {
|
||||
if (event.key === "ArrowDown" && !open) {
|
||||
event.preventDefault()
|
||||
focusCellRef.current = true
|
||||
setOpen(true)
|
||||
}
|
||||
return
|
||||
}
|
||||
moveRovingFocus(event, Array.from(popupRef.current?.querySelectorAll<HTMLButtonElement>('[role="radio"]') ?? []), { vertical: true, select: true })
|
||||
}
|
||||
const onBlur = (event: FocusEvent<HTMLSpanElement>) => {
|
||||
if (open && !rootRef.current?.contains(event.relatedTarget as Node | null)) setOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<span ref={rootRef} className="hm-sw-process-split" data-open={open || undefined} onKeyDown={onKeyDown} onBlur={onBlur}>
|
||||
<SWToolButton
|
||||
ref={node => {
|
||||
triggerRef.current = node
|
||||
if (typeof forwardedRef === "function") forwardedRef(node)
|
||||
else if (forwardedRef) forwardedRef.current = node
|
||||
}}
|
||||
appearance="pill"
|
||||
icon={<SWProcessSplitIcon type={value} />}
|
||||
title={label}
|
||||
aria-expanded={open}
|
||||
aria-controls={open ? popupId : undefined}
|
||||
disabled={disabled}
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{label}
|
||||
</SWToolButton>
|
||||
{open && (
|
||||
<div
|
||||
ref={popupRef}
|
||||
id={popupId}
|
||||
className="hm-sw-process-split__popup"
|
||||
style={position
|
||||
? { left: position.left, top, ["--hm-sw-process-split-offset" as string]: `${-position.offset}px`, ["--hm-sw-process-split-tail" as string]: `${tail}px` }
|
||||
: { visibility: "hidden" }}
|
||||
>
|
||||
<span className="hm-sw-process-split__tail" aria-hidden="true" />
|
||||
<div className="hm-sw-process-split__panel" role="radiogroup" aria-label={label}>
|
||||
{SW_PROCESS_SPLIT_TYPES.map(type => {
|
||||
const checked = type === value
|
||||
return (
|
||||
<button key={type} type="button" role="radio" className="hm-sw-process-split__cell" aria-checked={checked}
|
||||
aria-label={typeLabels?.[type] ?? TYPE_LABELS[type]} tabIndex={checked ? 0 : -1}
|
||||
onClick={() => { if (!checked) onValueChange?.(type) }}>
|
||||
<SWProcessSplitCell type={type} />
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<span className="hm-sw-process-split__step" aria-hidden="true" />
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,7 @@
|
||||
export { SWProcessHeader } from "./SWProcessHeader"
|
||||
export { SWProcessBar } from "./SWProcessBar"
|
||||
export { SWProcessSplitButton } from "./SWProcessSplitButton"
|
||||
export type {
|
||||
SWProcessHeaderProps, SWProcessHeaderLayer, SWProcessHeaderHideableControlId,
|
||||
SWProcessBarProps, SWProcessGroup, SWProcessStep, SWProcessAppearance, SWProcessSplitType, SWProcessSplitButtonProps,
|
||||
} from "./types"
|
||||
@@ -0,0 +1,151 @@
|
||||
import type { HTMLAttributes, PointerEventHandler, ReactNode } from "react"
|
||||
|
||||
/** One tab of a process group (e.g. `Structure`). */
|
||||
export interface SWProcessStep {
|
||||
/** Stable key, returned with the selection. */
|
||||
id: string
|
||||
label: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Process area design (2026-11-03).
|
||||
* - `default`: the Strana Main Header — name beside 32px tabs of equal width (127 at most), two groups confirmed.
|
||||
* - `multi`: StrAna-SW multi step (Figma 873:16481 / 873:16254 / 873:17421) — title above 25px tabs as wide as their
|
||||
* label, any number of groups; groups before the lit one show as done.
|
||||
* Both share the area surface, dim covers, group surfaces, arrows, selection and keyboard.
|
||||
*/
|
||||
export type SWProcessAppearance = "default" | "multi"
|
||||
|
||||
/**
|
||||
* One group of the process area (e.g. `01 Modeling`). `default` confirms two groups; `multi` takes any count. In both,
|
||||
* the group surfaces (trapezoids) stand only at the start and the end of the area — never on a middle group, lit or not.
|
||||
*/
|
||||
export interface SWProcessGroup {
|
||||
id: string
|
||||
/** Number shown before the name, e.g. `01`. */
|
||||
number?: string
|
||||
/** Group name: `default` wraps it at 56px (two lines move it 2px up), `multi` keeps one line above the tabs. */
|
||||
label: string
|
||||
/**
|
||||
* The name stays for assistive technology only (each step is described by it). `multi` keeps its row, so the tabs
|
||||
* line up with the other groups (Figma groups without a title). Default false.
|
||||
*/
|
||||
labelHidden?: boolean
|
||||
steps: readonly SWProcessStep[]
|
||||
/** Disables every step of the group. */
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export interface SWProcessBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
|
||||
/** Design of the area. Default `default`. */
|
||||
appearance?: SWProcessAppearance
|
||||
groups: readonly SWProcessGroup[]
|
||||
/** The checked step (one for the whole bar). None checked when omitted. */
|
||||
activeStepId?: string
|
||||
/** The lit group (glow surface, bright text). Defaults to the group of `activeStepId`. */
|
||||
activeGroupId?: string
|
||||
/** A step other than the checked one was chosen (click, or arrow keys). The host updates `activeStepId`. */
|
||||
onStepSelect?: (step: SWProcessStep, group: SWProcessGroup) => void
|
||||
/** Disables every step. */
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
/** Layer field of the header (bulb + label + current layer). The host owns the layer data and its popup. */
|
||||
export interface SWProcessHeaderLayer {
|
||||
/** Field label. Default `레이어`. */
|
||||
label?: string
|
||||
/** Current layer name (ellipsis when narrow). */
|
||||
value: string
|
||||
/** Bulb on (colored) when true. Default true. */
|
||||
visible?: boolean
|
||||
/** The host popup is open: the field shows its open look (yellow ring and text) and `aria-expanded`. */
|
||||
open?: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
/** Parts that can be removed. Removed parts take no space; the logo, file name and process area always show. */
|
||||
export type SWProcessHeaderHideableControlId = "layer" | "tools" | "windowMove" | "minimize" | "maximize" | "close"
|
||||
|
||||
export interface SWProcessHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
|
||||
/**
|
||||
* Header design, also used by the process area unless `process.appearance` is set. `default`: Strana Main Header
|
||||
* (48px surfaces, layer field, Strana tool pill). `multi`: StrAna-SW multi step (49px surfaces, 189px file name,
|
||||
* SW tool pill 40 x 37). Logo and file-name text follow SWHeader in both. Default `default`.
|
||||
*/
|
||||
appearance?: SWProcessAppearance
|
||||
/** File name in the document area (ellipsis when narrow, full name as tooltip). Empty while no document is open. */
|
||||
documentTitle: string
|
||||
/**
|
||||
* Shown instead of the file name while `documentTitle` is empty (e.g. `프로젝트 생성 전`): 10px 700 at the top right
|
||||
* of the file-name surface (Figma 873:16481). Still the same button (`onDocumentClick`).
|
||||
*/
|
||||
documentEmptyLabel?: string
|
||||
onDocumentClick?: () => void
|
||||
/** Logo element in the SWHeader logo slot (17px high, as wide as the logo: 32 x 17 -> home 80px). Takes precedence over `logoText` and `logoSrc`. */
|
||||
logo?: ReactNode
|
||||
/** Text logo (e.g. `StrAna`): 18px 700 with the SW text outline in a 58px place (home 106px). */
|
||||
logoText?: string
|
||||
/** Logo image URL, contained (ratio kept, centered) in the logo slot. */
|
||||
logoSrc?: string
|
||||
/** Accessible product name; the logo button is announced as "<logoAlt> 홈". Defaults to `logoText`. */
|
||||
logoAlt?: string
|
||||
/** Logo click. The menu it opens belongs to the host. */
|
||||
onHomeClick?: () => void
|
||||
/** The host logo menu is open: the logo keeps its hover look and `aria-expanded`. */
|
||||
homeMenuOpen?: boolean
|
||||
/** Process area data and selection (`SWProcessBar` props). */
|
||||
process: SWProcessBarProps
|
||||
/** Layer field. Omitted: no layer surface. */
|
||||
layer?: SWProcessHeaderLayer
|
||||
/** Layer field click (open the host layer popup and set `layer.open`). */
|
||||
onLayerClick?: () => void
|
||||
/** Bulb click. Without it the bulb is a status icon only. */
|
||||
onLayerVisibilityChange?: (nextVisible: boolean) => void
|
||||
/** Tool buttons of the dark pill, e.g. `SWToolButton appearance="pill"` (40 x 38 each, `multi` 40 x 37, 1px apart). */
|
||||
tools?: ReactNode
|
||||
/** Accessible name of the tool pill. Default `도구`. */
|
||||
toolsLabel?: string
|
||||
/** Pointer down on the window-move area (the host moves the window). */
|
||||
onWindowMoveStart?: PointerEventHandler<HTMLDivElement>
|
||||
/** Window maximized: the maximize button shows the restore glyph. Default false. */
|
||||
maximized?: boolean
|
||||
onMinimize?: () => void
|
||||
/** Maximize / restore button. The host toggles the window and updates `maximized`. */
|
||||
onMaximizeToggle?: () => void
|
||||
onClose?: () => void
|
||||
/** Parts to remove. Default: none. */
|
||||
hiddenControls?: readonly SWProcessHeaderHideableControlId[]
|
||||
/** Disables the process area and the layer field (logo, file name, host tools and window buttons stay). */
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Viewport split layout (Strana ViewportSplitType, in this order): `single` Type01 one pane, `columns` Type02 left /
|
||||
* right, `rows` Type03 top / bottom, `topWide` Type04 one top + two bottom, `leftTall` Type05 one left + two right,
|
||||
* `grid` Type06 2 x 2.
|
||||
*/
|
||||
export type SWProcessSplitType = "single" | "columns" | "rows" | "topWide" | "leftTall" | "grid"
|
||||
|
||||
/**
|
||||
* Viewport split tool of the process header pill (Strana Main Header 화면 분할, StrAna-SW 6758:12510): a pill button
|
||||
* showing the current layout and, under it, a 233 x 36 selector of the six layouts. Choosing a layout only reports it;
|
||||
* splitting the program window is the host's job.
|
||||
*/
|
||||
export interface SWProcessSplitButtonProps {
|
||||
/** Current layout: the button icon and the checked cell. */
|
||||
value: SWProcessSplitType
|
||||
/** A cell other than the current one was chosen (click, or arrow keys). The selector stays open, like Strana. */
|
||||
onValueChange?: (value: SWProcessSplitType) => void
|
||||
/** Controlled open state of the selector; uncontrolled when undefined. */
|
||||
open?: boolean
|
||||
/** Uncontrolled initial state. Default false. */
|
||||
defaultOpen?: boolean
|
||||
/** The selector opened or closed (button, Escape, a click outside, Tab out). */
|
||||
onOpenChange?: (open: boolean) => void
|
||||
/** Accessible name of the button and the selector. Default `화면 분할`. */
|
||||
label?: string
|
||||
/** Accessible names of the cells. Defaults: 1면, 좌우 2분할, 상하 2분할, 상단 1면 + 하단 2분할, 좌측 1면 + 우측 2분할, 4분할. */
|
||||
typeLabels?: Partial<Record<SWProcessSplitType, string>>
|
||||
disabled?: boolean
|
||||
}
|
||||
@@ -48,7 +48,8 @@ export const SWToolButton = forwardRef<HTMLButtonElement, SWToolButtonProps>(fun
|
||||
if (appearance === "pill") {
|
||||
return (
|
||||
<button ref={ref} type={type} className={classes("hm-sw-header__action hm-sw-header__action--print hm-sw-tool__pill-button")} data-selected={pressed ? "true" : undefined} {...state} {...rest}>
|
||||
{icon !== undefined && <span className="hm-sw-header__icon hm-sw-tool__icon" aria-hidden="true">{icon}</span>}
|
||||
{/* hm-sw-header__icon is the "hide on hover" half of the sw.css icon swap: only with a hover picture to show. */}
|
||||
{icon !== undefined && <span className={hoverIcon !== undefined ? "hm-sw-header__icon hm-sw-tool__icon" : "hm-sw-tool__icon"} aria-hidden="true">{icon}</span>}
|
||||
{hoverIcon !== undefined && <span className="hm-sw-header__icon-hover hm-sw-tool__icon" aria-hidden="true">{hoverIcon}</span>}
|
||||
{children !== undefined && <span className="hm-sw-tool__label">{children}</span>}
|
||||
</button>
|
||||
|
||||
@@ -21,3 +21,6 @@ export * from "./components/sw-viewer"
|
||||
|
||||
// SW footer (2026-10-20): Figma 26:10097 bottom bar, command slots, category row, layout tabs and command line.
|
||||
export * from "./components/sw-footer"
|
||||
|
||||
// SW process header (2026-11-03): the Strana Main Header as an independent SW general-mode header and its process area.
|
||||
export * from "./components/sw-process-header"
|
||||
@@ -0,0 +1,645 @@
|
||||
/* @hm-design/sw — SW Process Header (Strana Main Header, D:\Strana\Git_StranaDevDesign HEAD edda3cc: HeaderStyles.xaml,
|
||||
HeaderBrushes.xaml, MainProcessBar.xaml, Hanmac Colors.xaml; 2026-11-03). SW general mode, an independent header
|
||||
beside SWHeader / SWViewerHeader. Only --hm-sw-process-* tokens and hm-sw-process-* classes are new; values equal to
|
||||
an SW token read that token. Never touches global selectors or SWHeader rules; the reused SW parts (home, file name,
|
||||
tool pill) are adjusted only inside .hm-sw-process-header. Declared on the outermost SW scope only, like sw.css. */
|
||||
|
||||
:is(.hm-sw-header, .hm-sw-theme):not(:where(.hm-sw-header, .hm-sw-theme) *) {
|
||||
/* Process area base (Header.Border.ProcessBase): ProcessBase gradient, DocBorder 1px, top corners 6. */
|
||||
--hm-sw-process-base-background: linear-gradient(180deg, #0c5941 0%, #19bf8d 10.1%, #109069 18.27%, #0c5941 100%);
|
||||
--hm-sw-process-base-border-gradient: var(--hm-sw-header-document-border-gradient);
|
||||
/* Cover over an unlit group, its arrow side and its outer rest (ProcessDim #E6004430). */
|
||||
--hm-sw-process-dim: rgba(0, 68, 48, 0.902);
|
||||
|
||||
/* Group number and name (12px, line 14). */
|
||||
--hm-sw-process-number-color: #69c2a6;
|
||||
--hm-sw-process-group-color: #c3ebdf;
|
||||
--hm-sw-process-group-active-color: #fff;
|
||||
|
||||
/* Lit group surface (ProcessGlowFace: three layer groups at 85 / 80 / 45%, over the shape bounds -4.95 .. 44.16),
|
||||
halo (DropShadow 30, 85%) and edge light (3px, Blur 10, 65%). */
|
||||
--hm-sw-process-glow-face-base: linear-gradient(0deg, rgba(24, 134, 101, 0.702) 0%, rgba(24, 134, 101, 0) 40%), linear-gradient(180deg, #063b2b 0%, rgba(13, 101, 74, 0.051) 96.03%);
|
||||
--hm-sw-process-glow-face-rim: linear-gradient(180deg, rgba(13, 101, 74, 0.051) 87.76%, #247a60 96.05%);
|
||||
--hm-sw-process-glow-face-sheen: linear-gradient(rgba(0, 95, 66, 0.251), rgba(0, 95, 66, 0.251)), linear-gradient(180deg, #20322c 6.94%, #3dc79d 21.41%, rgba(61, 199, 157, 0.051) 96.05%);
|
||||
--hm-sw-process-glow-halo: rgba(88, 181, 153, 0.85);
|
||||
--hm-sw-process-glow-edge: rgba(88, 181, 153, 0.65);
|
||||
/* Unlit outer group surface (ProcessShapeIdleFace, Blur 8, DropShadow 15 #11694F 80%, rim 1.5px Blur 2). */
|
||||
--hm-sw-process-idle-face: linear-gradient(180deg, rgba(0, 0, 0, 0.502) 10.08%, rgba(0, 0, 0, 0) 26.37%), linear-gradient(180deg, rgba(23, 42, 26, 0.251) 0%, rgba(23, 42, 26, 0.251) 62%, rgba(0, 0, 0, 0) 90%);
|
||||
--hm-sw-process-idle-halo: rgba(17, 105, 79, 0.8);
|
||||
--hm-sw-process-idle-rim: rgba(4, 128, 90, 0.322);
|
||||
|
||||
/* Arrow between groups (16 x 48): fill, stroke stops, line shadow, shade over the next group. */
|
||||
--hm-sw-process-arrow-fill: #27d9a5;
|
||||
--hm-sw-process-arrow-dim-fill: #abc7bf;
|
||||
--hm-sw-process-arrow-fill-fade: rgba(16, 109, 81, 0);
|
||||
--hm-sw-process-arrow-edge: #00432e;
|
||||
--hm-sw-process-arrow-mid: #1c6a51;
|
||||
--hm-sw-process-arrow-light: #3d9c7e;
|
||||
--hm-sw-process-arrow-shadow: rgba(0, 0, 0, 0.502);
|
||||
--hm-sw-process-shade: rgba(4, 34, 25, 0.878);
|
||||
--hm-sw-process-shade-mid: rgba(4, 34, 25, 0.706);
|
||||
--hm-sw-process-shade-fade: rgba(4, 34, 25, 0);
|
||||
|
||||
/* Step tab (Header.RadioButton.ProcessTab, 32px): stacked layers, 70% unchecked / 100% checked / 50% disabled. */
|
||||
--hm-sw-process-tab-text: var(--hm-sw-header-title-color);
|
||||
--hm-sw-process-tab-glow: rgba(31, 148, 113, 0.702);
|
||||
--hm-sw-process-tab-depth: linear-gradient(180deg, rgba(0, 61, 41, 0) 0%, rgba(0, 61, 41, 0.8) 100%);
|
||||
--hm-sw-process-tab-shade: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 25%);
|
||||
--hm-sw-process-tab-sheen: linear-gradient(180deg, rgba(74, 255, 196, 0.502) 0%, rgba(74, 255, 196, 0) 40%);
|
||||
--hm-sw-process-tab-border-gradient: linear-gradient(180deg, #001e15 8.98%, #17a77b 22.9%, #0b533d 100%);
|
||||
--hm-sw-process-tab-ring: rgba(0, 0, 0, 0.251);
|
||||
--hm-sw-process-tab-active-base: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 26.41%, rgba(0, 0, 0, 0.451) 70%, rgba(0, 0, 0, 0.4) 100%);
|
||||
--hm-sw-process-tab-active-shade: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
|
||||
--hm-sw-process-tab-active-sheen: linear-gradient(180deg, rgba(122, 206, 179, 0) 60%, rgba(122, 206, 179, 0.102) 100%);
|
||||
--hm-sw-process-tab-inset: rgba(0, 0, 0, 0.659);
|
||||
--hm-sw-process-tab-disabled-shade: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
|
||||
--hm-sw-process-tab-disabled-sheen: linear-gradient(180deg, rgba(130, 181, 164, 0.502) 0%, rgba(122, 206, 179, 0) 40%);
|
||||
--hm-sw-process-tab-disabled-text: #64a491;
|
||||
|
||||
/* Header frame parts that differ from SWHeader. */
|
||||
--hm-sw-process-layer-border-gradient: linear-gradient(180deg, #08251c 0%, #0e3d2f 14.57%, #1e7c60 37.06%, #08241c 80.5%, #051612 100%);
|
||||
--hm-sw-process-pill-background: linear-gradient(180deg, rgba(0, 0, 0, 0.851) 0, rgba(0, 0, 0, 0.851) 2px, rgba(0, 0, 0, 0.8) 4px);
|
||||
--hm-sw-process-pill-border-gradient: linear-gradient(180deg, #092920 0%, #1c6f56 115%);
|
||||
--hm-sw-process-tool-border-gradient: linear-gradient(180deg, #08251c 0%, #208769 46.54%, #08241c 84.44%, #051612 100%);
|
||||
--hm-sw-process-tool-icon-color: #b6d0c9;
|
||||
--hm-sw-process-close-hover-background: #e40000;
|
||||
--hm-sw-process-close-icon-hover: #fff;
|
||||
|
||||
/* Viewport split tool (Strana 화면 분할, StrAna-SW 6758:12510): open button face, its 3px extension, the 233 x 36
|
||||
selector (face, shadow; the border is the SW hover gradient) and the cells (light frame, green panes, yellow when
|
||||
hovered or checked), the button icon panes. */
|
||||
--hm-sw-process-tool-open-background: linear-gradient(180deg, #081813 0%, #0b3227 25.43%, #0e3d2f 51.25%, #0b3227 80.03%, #081813 100%);
|
||||
--hm-sw-process-tool-open-edge: #081813;
|
||||
--hm-sw-process-split-panel-background: #082018;
|
||||
--hm-sw-process-split-panel-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
|
||||
--hm-sw-process-split-cell-frame: var(--hm-sw-process-tool-icon-color);
|
||||
--hm-sw-process-split-cell-pane: #1b6b53;
|
||||
--hm-sw-process-split-icon-pane: #003425;
|
||||
|
||||
/* File name surface without a document (Figma 873:16481 "프로젝트 생성 전"): 10px 700 at the top right. */
|
||||
--hm-sw-process-document-empty-color: #aedbcc;
|
||||
|
||||
/* appearance="multi" step tab (Figma 873:16481 / 873:17421, 25px, as wide as its label + 25). Base = a group not
|
||||
reached yet (70%); lit = the lit group and the done groups; selected = the checked step; disabled = 50% on the
|
||||
SW property surface. Text #F0F7F5 / selected #FFC600 are the SW title / selected tokens. */
|
||||
--hm-sw-process-multi-tab-background: linear-gradient(180deg, rgba(52, 143, 114, 0.8) 0%, rgba(2, 50, 35, 0.8) 100%);
|
||||
--hm-sw-process-multi-tab-border: #0c3125;
|
||||
--hm-sw-process-multi-tab-lit-background: linear-gradient(180deg, rgba(68, 178, 143, 0.8) 0%, rgba(0, 61, 41, 0.8) 100%);
|
||||
--hm-sw-process-multi-tab-lit-border: #0a5940;
|
||||
--hm-sw-process-multi-tab-shadow: 1px 1px 1px 0 rgba(31, 148, 113, 0.7), 1px 1px 1px 0 rgba(31, 148, 113, 0.7);
|
||||
--hm-sw-process-multi-tab-selected-background: linear-gradient(0deg, #113228 0%, #28735c 100%);
|
||||
--hm-sw-process-multi-tab-selected-border: #001e15;
|
||||
--hm-sw-process-multi-tab-selected-shadow: 1px 1px 0.5px 0 rgba(31, 148, 113, 0.7), inset 3px 2px 3px 0 rgba(9, 39, 30, 0.42), inset 3px 2px 3px 0 rgba(9, 39, 30, 0.42);
|
||||
--hm-sw-process-multi-tab-disabled-border: #021912;
|
||||
--hm-sw-process-multi-tab-disabled-shadow: 1px 1px 1px 0 rgba(31, 148, 113, 0.7), inset 3px 2px 3px 0 rgba(9, 39, 30, 0.42), inset 3px 2px 3px 0 rgba(9, 39, 30, 0.42);
|
||||
--hm-sw-process-multi-tab-disabled-text: #7d9f91;
|
||||
}
|
||||
|
||||
/* ---------- Header frame ---------- */
|
||||
|
||||
.hm-sw-process-header {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: var(--hm-sw-header-height);
|
||||
background: var(--hm-sw-header-background);
|
||||
overflow: clip;
|
||||
}
|
||||
.hm-sw-process-header__bar { display: flex; align-items: stretch; height: var(--hm-sw-header-bar-height); min-width: 0; }
|
||||
|
||||
/* Logo and file name follow SWHeader (2026-11-03, both appearances): SWHeaderHome as it is (logo slot as wide as the
|
||||
logo, 32 x 17 example -> home 80, 12px padding, slant), the file name 2px after the home overlap (SWHeader bar gap)
|
||||
with the SW padding 5 / 12 and font. Only the file-name width stays per appearance. The text logo (`logoText`) is
|
||||
18px 700 in a 58px place; a wider word overflows that place evenly on both sides, like the Strana centered content. */
|
||||
.hm-sw-process-header__bar > .hm-sw-header__home { margin-right: -15px; }
|
||||
.hm-sw-process-header__wordmark {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 58px;
|
||||
color: var(--hm-sw-header-text-color);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: var(--hm-sw-header-logo-height);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-shadow: var(--hm-sw-header-text-outline);
|
||||
}
|
||||
/* Logo menu open (host menu): the hover look stays, like Strana IsSubmenuOpen. */
|
||||
.hm-sw-process-header .hm-sw-header__home[aria-expanded="true"] .hm-sw-header__home-bg-hover { opacity: 1; }
|
||||
|
||||
/* File name: SWHeaderDocumentTitle; only its width follows the Strana column (286*, 100 .. 286). */
|
||||
.hm-sw-process-header__bar > .hm-sw-header__document { flex: 286 1 0; min-width: 100px; max-width: 286px; }
|
||||
/* No document list here, so no dropdown arrow (the Strana file name has none). */
|
||||
.hm-sw-process-header__bar > .hm-sw-header__document .hm-sw-header__arrow { display: none; }
|
||||
|
||||
.hm-sw-process-header__center { display: flex; flex: 1260 1 0; min-width: 0; }
|
||||
.hm-sw-process-header__center > .hm-sw-process-bar { flex: 1003 1 0; }
|
||||
|
||||
/* Layer surface (Header.Border.LayerFace): SW object surface, 1px apart on both sides, 150 .. 255. */
|
||||
.hm-sw-process-header__layer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 257 1 0;
|
||||
min-width: 152px;
|
||||
max-width: 257px;
|
||||
position: relative;
|
||||
height: var(--hm-sw-header-bar-height);
|
||||
}
|
||||
/* Surface on a pseudo element 1px in from both sides: no padding, border or margin on the flex item, so the
|
||||
1003 : 257 column ratio and its 152 .. 257 limits are the Strana ones exactly (surface 150 .. 255). */
|
||||
.hm-sw-process-header__layer::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 1px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--hm-sw-header-object-radius);
|
||||
background: var(--hm-sw-header-object-background) padding-box, var(--hm-sw-header-object-border-gradient) border-box;
|
||||
}
|
||||
/* Layer field (Header.ToggleButton.LayerField): 38px, at most 234, property surface + layer border gradient.
|
||||
The bulb and the field are sibling buttons; the field button covers the whole field under the bulb. */
|
||||
.hm-sw-process-header__layer-field {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
max-width: 234px;
|
||||
height: var(--hm-sw-header-field-height);
|
||||
margin: 0 9px;
|
||||
padding: 0 10px 0 12px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--hm-sw-header-property-radius);
|
||||
background: var(--hm-sw-header-property-background) padding-box, var(--hm-sw-process-layer-border-gradient) border-box;
|
||||
box-shadow: var(--hm-sw-header-property-shadow);
|
||||
color: var(--hm-sw-header-text-color);
|
||||
}
|
||||
.hm-sw-process-header__layer-field::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
padding: var(--hm-sw-header-hover-border-width);
|
||||
border-radius: inherit;
|
||||
background: var(--hm-sw-header-hover-border-gradient);
|
||||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hm-sw-process-header__layer-field:not([data-disabled]):hover::after,
|
||||
.hm-sw-process-header__layer-field[data-open]::after { opacity: 1; }
|
||||
.hm-sw-process-header__layer-field:not([data-disabled]):hover,
|
||||
.hm-sw-process-header__layer-field[data-open] { color: var(--hm-sw-header-selected-color); }
|
||||
.hm-sw-process-header__layer-field[data-disabled] { opacity: 0.4; }
|
||||
.hm-sw-process-header .hm-sw-process-header__layer-field button:disabled { opacity: 1; }
|
||||
.hm-sw-process-header__layer-button { position: absolute; inset: -1px; z-index: 0; border-radius: inherit; }
|
||||
.hm-sw-process-header__layer-field > .hm-sw-header__layer-toggle { z-index: 1; }
|
||||
.hm-sw-process-header__layer-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
padding: 0 var(--hm-sw-header-text-outline-room);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hm-sw-process-header__layer-label,
|
||||
.hm-sw-process-header__layer-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
||||
.hm-sw-process-header__layer-label { margin-left: 1px; font-size: var(--hm-sw-header-label-size); line-height: 14px; text-shadow: var(--hm-sw-header-label-outline); }
|
||||
.hm-sw-process-header__layer-value { font-size: var(--hm-sw-header-font-size); line-height: 16px; text-shadow: var(--hm-sw-header-text-outline); }
|
||||
|
||||
/* Window area (Header.Border.Window): DocFace + DocBorder 1px behind; the buttons cover the full 48px on top. */
|
||||
.hm-sw-process-header__window { position: relative; display: flex; flex: 0 0 auto; height: var(--hm-sw-header-bar-height); }
|
||||
.hm-sw-process-header__window::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 1px solid transparent;
|
||||
background: var(--hm-sw-header-document-background) padding-box, var(--hm-sw-header-document-border-gradient) border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hm-sw-process-header__window > * { position: relative; }
|
||||
|
||||
/* Tool pill: the SWToolGroup pill (40 x 38 buttons, 1px apart). `default` puts the Strana pill well and gradient
|
||||
borders on it; `multi` keeps the SW pill as it is (Figma 873:16481 uses the SW pill: solid #092920, rgba(0,0,0,.8),
|
||||
inner shadow, buttons with a solid #08251C border) at its own size. The selected (pressed) look — yellow ring and
|
||||
icon — is added for both. */
|
||||
.hm-sw-process-header .hm-sw-process-header__window .hm-sw-process-header__tools { flex: 0 0 auto; height: 42px; margin: 3px 0 0 3px; }
|
||||
.hm-sw-process-header:not([data-appearance="multi"]) .hm-sw-process-header__window .hm-sw-process-header__tools {
|
||||
border-color: transparent;
|
||||
background: var(--hm-sw-process-pill-background) padding-box, var(--hm-sw-process-pill-border-gradient) border-box;
|
||||
box-shadow: none;
|
||||
}
|
||||
.hm-sw-process-header:not([data-appearance="multi"]) .hm-sw-process-header__tools .hm-sw-tool__pill-button {
|
||||
border-color: transparent;
|
||||
background: var(--hm-sw-header-document-background) padding-box, var(--hm-sw-process-tool-border-gradient) border-box;
|
||||
}
|
||||
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__pill-button { color: var(--hm-sw-process-tool-icon-color); }
|
||||
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__pill-button:hover:not(:disabled),
|
||||
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__pill-button[aria-pressed="true"] { color: var(--hm-sw-header-selected-color); }
|
||||
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__pill-button[aria-pressed="true"]::after { opacity: 1; }
|
||||
/* Pressed (not disabled) shows the hover picture too, like a hover that stays (SW pill hover icon = `hoverIcon`). */
|
||||
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__pill-button[aria-pressed="true"]:not(:disabled) > .hm-sw-header__icon { visibility: hidden; }
|
||||
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__pill-button[aria-pressed="true"]:not(:disabled) > .hm-sw-header__icon-hover { visibility: visible; }
|
||||
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__icon { inset: 0; }
|
||||
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__icon > :is(svg, img) { width: 24px; height: 24px; max-width: none; max-height: none; }
|
||||
|
||||
/* Caption buttons (Header.WindowCaption, 32 x 48): glyph #ADB0AF; hover dark + white; close hover red + white. */
|
||||
.hm-sw-process-header__caption { display: block; flex: 0 0 32px; width: 32px; height: var(--hm-sw-header-bar-height); color: var(--hm-sw-header-window-icon-color); }
|
||||
.hm-sw-process-header__caption > svg { display: block; }
|
||||
.hm-sw-process-header__caption:hover:not(:disabled) { background: var(--hm-sw-header-window-button-hover-background); color: var(--hm-sw-header-window-icon-hover-color); }
|
||||
.hm-sw-process-header__caption[data-kind="close"]:hover:not(:disabled) { background: var(--hm-sw-process-close-hover-background); color: var(--hm-sw-process-close-icon-hover); }
|
||||
|
||||
/* ---------- Process area (SWProcessBar) ---------- */
|
||||
|
||||
.hm-sw-process-bar {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-width: 0;
|
||||
height: var(--hm-sw-header-bar-height);
|
||||
/* Strana ClipToBounds: surfaces and the arrow shade never reach past the area (no scroll width when narrow). */
|
||||
overflow: clip;
|
||||
color: var(--hm-sw-process-tab-text);
|
||||
}
|
||||
.hm-sw-process-bar::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px 6px 0 0;
|
||||
background: var(--hm-sw-process-base-background) padding-box, var(--hm-sw-process-base-border-gradient) border-box;
|
||||
}
|
||||
/* Rest of the width on both sides: same brightness as the outer group next to it. */
|
||||
.hm-sw-process-bar__rest { position: relative; flex: 1 1 0; min-width: 0; }
|
||||
.hm-sw-process-bar__rest[data-dim] { background: var(--hm-sw-process-dim); }
|
||||
/* The cover keeps the base's 1px side borders and round corners visible (Strana margin 1, radius 5). */
|
||||
.hm-sw-process-bar__rest[data-side="start"] { margin-left: 1px; border-top-left-radius: 5px; }
|
||||
.hm-sw-process-bar__rest[data-side="end"] { margin-right: 1px; border-top-right-radius: 5px; }
|
||||
|
||||
/* Group: [20][number 4 name][12][tabs][20]. Natural width at most; shrinks with the others in proportion. */
|
||||
.hm-sw-process-bar__group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.hm-sw-process-bar__group[data-dim]::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--hm-sw-process-dim); }
|
||||
.hm-sw-process-bar__label,
|
||||
.hm-sw-process-bar__steps { position: relative; z-index: 3; }
|
||||
|
||||
.hm-sw-process-bar__label {
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
flex: 0 0 auto;
|
||||
margin: 10.67px 12px 0 0;
|
||||
font-size: var(--hm-sw-header-label-size);
|
||||
line-height: 14px;
|
||||
text-shadow: var(--hm-sw-header-label-outline);
|
||||
}
|
||||
.hm-sw-process-bar__label[data-lines="2"] { margin-top: 8.67px; }
|
||||
.hm-sw-process-bar__number { flex: 0 0 auto; margin-right: 4px; color: var(--hm-sw-process-number-color); font-weight: 500; }
|
||||
.hm-sw-process-bar__name { display: grid; max-width: 56px; }
|
||||
.hm-sw-process-bar__name > * { grid-area: 1 / 1; }
|
||||
.hm-sw-process-bar__name-reserve { font-weight: 700; visibility: hidden; }
|
||||
.hm-sw-process-bar__name-text { justify-self: start; color: var(--hm-sw-process-group-color); font-weight: 500; }
|
||||
.hm-sw-process-bar__group[data-active] .hm-sw-process-bar__name-text { color: var(--hm-sw-process-group-active-color); font-weight: 700; }
|
||||
|
||||
/* Tabs (both appearances): a flex row where the checked tab shrinks with the others in the same proportion (2026-11-03,
|
||||
it no longer keeps its whole name); a name without room ends with an ellipsis. default: all tabs share the row
|
||||
equally (Strana UniformGrid, 127 each at most); multi overrides below. The group minimum (name + every tab at its
|
||||
padding) is measured by SWProcessBar, so tabs never overlap. */
|
||||
.hm-sw-process-bar__steps {
|
||||
display: flex;
|
||||
column-gap: 1px;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.hm-sw-process-bar__steps > .hm-sw-process-bar__step { flex: 1 1 0; }
|
||||
.hm-sw-process-bar__step {
|
||||
--hm-sw-process-step-radius: 4px;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
min-width: 0;
|
||||
height: 32px;
|
||||
padding: 0 12px 2.67px;
|
||||
border-radius: var(--hm-sw-process-step-radius);
|
||||
color: var(--hm-sw-process-tab-text);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
text-shadow: var(--hm-sw-header-text-outline);
|
||||
}
|
||||
.hm-sw-process-bar__step[data-shape="single"] { --hm-sw-process-step-radius: 16px; }
|
||||
.hm-sw-process-bar__step[data-shape="start"] { --hm-sw-process-step-radius: 16px 4px 4px 16px; }
|
||||
.hm-sw-process-bar__step[data-shape="end"] { --hm-sw-process-step-radius: 4px 16px 16px 4px; }
|
||||
.hm-sw-process-bar__step-text,
|
||||
.hm-sw-process-bar__step-size { grid-area: 1 / 1; }
|
||||
/* The outline may paint into the room outside the clipped (ellipsis) text, like the SW file name. */
|
||||
.hm-sw-process-bar__step-text { position: relative; max-width: 100%; overflow: clip; overflow-clip-margin: var(--hm-sw-header-text-outline-room); white-space: nowrap; text-overflow: ellipsis; }
|
||||
/* Natural width 127 (Strana MinWidth) = 103 + 24 padding; never wider than the column. */
|
||||
.hm-sw-process-bar__step-size { display: block; width: 103px; max-width: 100%; height: 0; }
|
||||
|
||||
.hm-sw-process-bar__step-box { position: absolute; inset: 0; border-radius: inherit; opacity: 0.7; pointer-events: none; }
|
||||
.hm-sw-process-bar__step-box > i { position: absolute; inset: 0; border-radius: inherit; }
|
||||
.hm-sw-process-bar__step-box > [data-layer^="glow"] { inset: 1px -1px -1px 1px; border-right: 1px solid var(--hm-sw-process-tab-glow); border-bottom: 1px solid var(--hm-sw-process-tab-glow); }
|
||||
.hm-sw-process-bar__step-box > [data-layer="depth"] { background: var(--hm-sw-process-tab-depth); }
|
||||
.hm-sw-process-bar__step-box > [data-layer="shade"] { background: var(--hm-sw-process-tab-shade); }
|
||||
.hm-sw-process-bar__step-box > [data-layer="sheen"] { background: var(--hm-sw-process-tab-sheen); }
|
||||
.hm-sw-process-bar__step-box > [data-layer="frame"] {
|
||||
--hm-sw-process-frame: 1px;
|
||||
padding: var(--hm-sw-process-frame);
|
||||
background: var(--hm-sw-process-tab-border-gradient);
|
||||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.hm-sw-process-bar__step-box > [data-layer^="inset"] { display: none; }
|
||||
.hm-sw-process-bar__step-box > [data-layer="inset-top"] { background: linear-gradient(180deg, var(--hm-sw-process-tab-inset) 0, transparent 5px); }
|
||||
.hm-sw-process-bar__step-box > [data-layer="inset-left"] { background: linear-gradient(90deg, var(--hm-sw-process-tab-inset) 0, transparent 6px); }
|
||||
.hm-sw-process-bar__step-box > [data-layer="ring"] { border: 2px solid var(--hm-sw-process-tab-ring); }
|
||||
|
||||
.hm-sw-process-bar__step:hover:not(:disabled) { color: var(--hm-sw-header-selected-color); }
|
||||
.hm-sw-process-bar__step[aria-checked="true"] { color: var(--hm-sw-header-selected-color); }
|
||||
.hm-sw-process-bar__step[aria-checked="true"] > .hm-sw-process-bar__step-box { opacity: 1; }
|
||||
.hm-sw-process-bar__step[aria-checked="true"] [data-layer="depth"] { background: var(--hm-sw-process-tab-active-base); }
|
||||
.hm-sw-process-bar__step[aria-checked="true"] [data-layer="shade"] { background: var(--hm-sw-process-tab-active-shade); }
|
||||
.hm-sw-process-bar__step[aria-checked="true"] [data-layer="sheen"] { background: var(--hm-sw-process-tab-active-sheen); }
|
||||
.hm-sw-process-bar__step[aria-checked="true"] [data-layer^="inset"] { display: block; opacity: 0.75; }
|
||||
.hm-sw-process-bar__step[aria-checked="true"] [data-layer="frame"] { --hm-sw-process-frame: 2px; opacity: 0.25; }
|
||||
.hm-sw-process-bar__step[aria-checked="true"] [data-layer="glow2"] { display: none; }
|
||||
/* Disabled (after Checked, like the Strana trigger order). The SW button reset's 40% is replaced by the tab look. */
|
||||
.hm-sw-process-bar .hm-sw-process-bar__step:disabled { opacity: 1; color: var(--hm-sw-process-tab-disabled-text); cursor: default; }
|
||||
.hm-sw-process-bar__step:disabled > .hm-sw-process-bar__step-box { opacity: 0.5; }
|
||||
.hm-sw-process-bar__step:disabled [data-layer="depth"] { background: var(--hm-sw-process-tab-active-base); }
|
||||
.hm-sw-process-bar__step:disabled [data-layer="shade"] { background: var(--hm-sw-process-tab-disabled-shade); }
|
||||
.hm-sw-process-bar__step:disabled [data-layer="sheen"] { background: var(--hm-sw-process-tab-disabled-sheen); }
|
||||
.hm-sw-process-bar__step:disabled [data-layer^="inset"] { display: block; }
|
||||
.hm-sw-process-bar__step:disabled [data-layer="glow2"] { display: none; }
|
||||
|
||||
/* Group surfaces: 40px out on the left of the first group, mirrored and 44px out on the right of the last one.
|
||||
Clipped to their box like the Strana ClipToBounds. */
|
||||
.hm-sw-process-bar__shape { position: absolute; top: 0; left: calc(-1 * var(--hm-sw-process-shape-start, 40px)); right: 0; z-index: 1; height: var(--hm-sw-header-bar-height); overflow: hidden; pointer-events: none; }
|
||||
.hm-sw-process-bar__shape[data-mirrored] { left: 0; right: calc(-1 * var(--hm-sw-process-shape-end, 44px)); transform: scaleX(-1); }
|
||||
.hm-sw-process-bar__shape > * { position: absolute; }
|
||||
|
||||
/* Lit: halo around the face (filter on the parent so the clipped face still glows), face fading at the arrow end. */
|
||||
.hm-sw-process-bar__glow-halo { inset: 0; filter: drop-shadow(0 0 30px var(--hm-sw-process-glow-halo)); }
|
||||
.hm-sw-process-bar__glow-face {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -4.9526px;
|
||||
height: 49.1162px;
|
||||
clip-path: path("M38.99,8.97 C38.41,4.2025 42.13,0 46.94,0 H99999 V49.1162 H50.98 C46.94,49.1162 43.53,46.0995 43.04,42.0862 Z");
|
||||
-webkit-mask: linear-gradient(90deg, #000 calc(100% - 83.4px), transparent calc(100% - 7.4px));
|
||||
mask: linear-gradient(90deg, #000 calc(100% - 83.4px), transparent calc(100% - 7.4px));
|
||||
}
|
||||
.hm-sw-process-bar__glow-face > i { position: absolute; inset: 0; }
|
||||
.hm-sw-process-bar__glow-face > i:nth-child(1) { background: var(--hm-sw-process-glow-face-base); opacity: 0.85; }
|
||||
.hm-sw-process-bar__glow-face > i:nth-child(2) { background: var(--hm-sw-process-glow-face-rim); opacity: 0.8; }
|
||||
.hm-sw-process-bar__glow-face > i:nth-child(3) { background: var(--hm-sw-process-glow-face-sheen); opacity: 0.45; }
|
||||
.hm-sw-process-bar__glow-edge {
|
||||
left: 0;
|
||||
top: 0;
|
||||
fill: none;
|
||||
stroke: var(--hm-sw-process-glow-edge);
|
||||
stroke-width: 3;
|
||||
filter: blur(5px);
|
||||
-webkit-mask: linear-gradient(180deg, #000 64%, rgba(0, 0, 0, 0.302) 91%);
|
||||
mask: linear-gradient(180deg, #000 64%, rgba(0, 0, 0, 0.302) 91%);
|
||||
}
|
||||
|
||||
/* Unlit: blurred face with a dark halo and a rim light, fading from the outer end. */
|
||||
.hm-sw-process-bar__shape[data-kind="idle"] {
|
||||
-webkit-mask: linear-gradient(90deg, #000 79.8px, transparent 198.4px);
|
||||
mask: linear-gradient(90deg, #000 79.8px, transparent 198.4px);
|
||||
}
|
||||
.hm-sw-process-bar__shape[data-kind="idle"][data-mirrored] {
|
||||
-webkit-mask: linear-gradient(90deg, #000 236.7px, transparent 273.1px);
|
||||
mask: linear-gradient(90deg, #000 236.7px, transparent 273.1px);
|
||||
}
|
||||
.hm-sw-process-bar__idle-halo { inset: 0; filter: drop-shadow(0 0 15px var(--hm-sw-process-idle-halo)); }
|
||||
.hm-sw-process-bar__idle-blur { position: absolute; inset: 0; filter: blur(4px); }
|
||||
.hm-sw-process-bar__idle-face {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -4.95264px;
|
||||
height: 49.2497px;
|
||||
background: var(--hm-sw-process-idle-face);
|
||||
clip-path: path("M99999,0 H47.153 C42.095,0 38.306,4.63511 39.313,9.59189 L46.064,42.84164 C46.821,46.57024 50.099,49.24974 53.904,49.24974 H99999 Z");
|
||||
}
|
||||
.hm-sw-process-bar__idle-rim { left: 0; top: 0; fill: none; stroke: var(--hm-sw-process-idle-rim); stroke-width: 1.5; filter: blur(1px); }
|
||||
.hm-sw-process-bar__idle-rim > rect { fill: var(--hm-sw-process-idle-rim); stroke: none; }
|
||||
|
||||
/* Arrow cell (16px): dim cover under the surfaces, the arrow above them, its shade over the next group. */
|
||||
.hm-sw-process-bar__arrow { position: relative; flex: 0 0 16px; width: 16px; }
|
||||
.hm-sw-process-bar__arrow > svg { position: absolute; left: 0; top: 0; display: block; }
|
||||
.hm-sw-process-bar__arrow-dim { z-index: 0; height: 100%; fill: var(--hm-sw-process-dim); }
|
||||
.hm-sw-process-bar__arrow-art { z-index: 2; pointer-events: none; }
|
||||
.hm-sw-process-bar__arrow-shadow { stroke: var(--hm-sw-process-arrow-shadow); }
|
||||
|
||||
/* ---------- Shared additions (both appearances) ---------- */
|
||||
|
||||
/* A group name kept for assistive technology only (`labelHidden`). */
|
||||
.hm-sw-process-bar__label[data-label-hidden] { display: none; }
|
||||
|
||||
/* No document (`documentEmptyLabel`, Figma 873:16481): a small label at the top right of the file-name surface. */
|
||||
.hm-sw-process-header[data-document-empty] .hm-sw-header__document-button { align-items: flex-start; }
|
||||
.hm-sw-process-header[data-document-empty] .hm-sw-header__document-name {
|
||||
margin-top: 7px;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
letter-spacing: -0.1px;
|
||||
text-align: right;
|
||||
text-shadow: var(--hm-sw-header-label-outline);
|
||||
}
|
||||
.hm-sw-process-header[data-document-empty] .hm-sw-header__document-button:not(:hover) .hm-sw-header__document-name { color: var(--hm-sw-process-document-empty-color); }
|
||||
|
||||
/* ---------- appearance="multi" (StrAna-SW multi step, Figma 873:16481 / 873:16254 / 873:17421) ----------
|
||||
Same markup and shared rules as the default; only sizes, the file name, the tool pill and the group content differ.
|
||||
Text outline, hover, focus and the window-move motion are the shared SW rules (Figma texts have no stroke; the SW
|
||||
outline is applied on purpose, 2026-11-03 user request). */
|
||||
|
||||
/* Frame: 49px surfaces (no 1px gap). Logo and file-name text as the default (SWHeader). */
|
||||
.hm-sw-theme.hm-sw-process-header[data-appearance="multi"] { --hm-sw-header-bar-height: 49px; }
|
||||
/* SWHeader window move at the Figma place of this frame: stripes 82 x 39 at (3, 5), the icon (and the motion with its
|
||||
tooltip) 3px higher, at (28, 10). Only positions; the motion itself is the SWHeader one. */
|
||||
.hm-sw-process-header[data-appearance="multi"] .hm-sw-header__motion { background-position: 3px 5px; background-size: 82px 39px; }
|
||||
.hm-sw-process-header[data-appearance="multi"] .hm-sw-header__motion > * { translate: 0 -3px; }
|
||||
/* File name: 189 at most (Figma 873:16254), solid #0E4C3A border. */
|
||||
.hm-sw-process-header[data-appearance="multi"] .hm-sw-process-header__bar > .hm-sw-header__document { flex: 189 1 0; max-width: 189px; }
|
||||
.hm-sw-process-header[data-appearance="multi"] .hm-sw-process-header__bar > .hm-sw-header__document .hm-sw-header__document-button {
|
||||
background: var(--hm-sw-header-document-background) padding-box, linear-gradient(var(--hm-sw-header-document-border-color) 0 0) border-box;
|
||||
}
|
||||
.hm-sw-process-header[data-appearance="multi"] .hm-sw-process-header__center { flex: 1278 1 0; }
|
||||
.hm-sw-process-header[data-appearance="multi"] .hm-sw-process-header__window::before {
|
||||
background: var(--hm-sw-header-document-background) padding-box, linear-gradient(var(--hm-sw-header-document-border-color) 0 0) border-box;
|
||||
}
|
||||
/* SW pill at the Figma place: 41 high, 4 from the top, 5 from the window start, 2 before the window move. */
|
||||
.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; }
|
||||
|
||||
/* 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;
|
||||
--hm-sw-process-shape-start: 50px;
|
||||
--hm-sw-process-shape-end: 48px;
|
||||
}
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 3.8px 10px 0;
|
||||
}
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__label {
|
||||
align-self: stretch;
|
||||
height: 14px;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__label[data-label-hidden] { display: flex; visibility: hidden; }
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__number { margin-right: 2px; }
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__name { grid-template-columns: minmax(0, 1fr); flex: 0 1 auto; min-width: 0; max-width: none; }
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__name > * {
|
||||
overflow: clip;
|
||||
overflow-clip-margin: var(--hm-sw-header-text-outline-room);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group[data-progress="done"] .hm-sw-process-bar__name-text {
|
||||
color: var(--hm-sw-process-group-active-color);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Tabs as wide as their label (padding 13 / 12), no gap; ends round (50). All of them, the checked one included,
|
||||
shrink in proportion to that width with an ellipsis. */
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__steps {
|
||||
align-items: stretch;
|
||||
flex: 0 1 auto;
|
||||
max-width: 100%;
|
||||
margin-top: 1.9px;
|
||||
}
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__steps > .hm-sw-process-bar__step { flex: 0 1 auto; }
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__step {
|
||||
--hm-sw-process-step-radius: 0;
|
||||
height: 25px;
|
||||
padding: 0 12px 0 13px;
|
||||
font-size: 14px;
|
||||
line-height: 23px;
|
||||
}
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__step[data-shape="single"] { --hm-sw-process-step-radius: 50px; }
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__step[data-shape="start"] { --hm-sw-process-step-radius: 50px 0 0 50px; }
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__step[data-shape="end"] { --hm-sw-process-step-radius: 0 50px 50px 0; }
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__step-size { display: none; }
|
||||
|
||||
/* One face instead of the default stacked layers. */
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__step-box {
|
||||
border: 1px solid var(--hm-sw-process-multi-tab-border);
|
||||
background: var(--hm-sw-process-multi-tab-background);
|
||||
box-shadow: var(--hm-sw-process-multi-tab-shadow);
|
||||
}
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__step-box > i { display: none; }
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group:is([data-active], [data-progress="done"]) .hm-sw-process-bar__step-box {
|
||||
border-color: var(--hm-sw-process-multi-tab-lit-border);
|
||||
background: var(--hm-sw-process-multi-tab-lit-background);
|
||||
opacity: 1;
|
||||
}
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group .hm-sw-process-bar__step[aria-checked="true"] > .hm-sw-process-bar__step-box {
|
||||
border-color: var(--hm-sw-process-multi-tab-selected-border);
|
||||
background: var(--hm-sw-process-multi-tab-selected-background);
|
||||
box-shadow: var(--hm-sw-process-multi-tab-selected-shadow);
|
||||
opacity: 1;
|
||||
}
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__step:disabled { color: var(--hm-sw-process-multi-tab-disabled-text); }
|
||||
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group .hm-sw-process-bar__step:disabled > .hm-sw-process-bar__step-box {
|
||||
border-color: var(--hm-sw-process-multi-tab-disabled-border);
|
||||
background: var(--hm-sw-header-property-background);
|
||||
box-shadow: var(--hm-sw-process-multi-tab-disabled-shadow);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ---------- Viewport split tool (SWProcessSplitButton, both appearances) ---------- */
|
||||
|
||||
.hm-sw-process-split { position: relative; display: flex; }
|
||||
.hm-sw-process-split__icon-pane { fill: var(--hm-sw-process-split-icon-pane); stroke: #000; stroke-width: 0.962; }
|
||||
.hm-sw-process-split__icon > rect:first-child { stroke: #000; stroke-width: 0.962; }
|
||||
|
||||
/* Open (Header.ToggleButton.ToolMenu checked): darker face, gold top and sides, open at the bottom, no hover ring,
|
||||
yellow icon. The bottom border is replaced by padding so the icon never moves. */
|
||||
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-process-split[data-open] > .hm-sw-tool__pill-button {
|
||||
padding-bottom: 1px;
|
||||
border-color: transparent;
|
||||
border-bottom-width: 0;
|
||||
border-radius: 2px 2px 0 0;
|
||||
background: var(--hm-sw-process-tool-open-background) padding-box, var(--hm-sw-header-hover-border-gradient) border-box;
|
||||
color: var(--hm-sw-header-selected-color);
|
||||
}
|
||||
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-process-split[data-open] > .hm-sw-tool__pill-button::after { opacity: 0; }
|
||||
|
||||
/* Selector: fixed overlay 1px over the button bottom (no gap at any zoom), aligned to the button left (shifted only at
|
||||
the screen edge — --hm-sw-process-split-offset keeps the extension under the button). The extension reaches the
|
||||
header bottom (--hm-sw-process-split-tail, Strana 3px), so the panel never covers the window buttons. */
|
||||
.hm-sw-process-split__popup { position: fixed; z-index: 30; width: 233px; height: calc(var(--hm-sw-process-split-tail, 3px) + 36px); }
|
||||
.hm-sw-process-split__tail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: var(--hm-sw-process-split-offset, 0px);
|
||||
width: 40px;
|
||||
height: var(--hm-sw-process-split-tail, 3px);
|
||||
border: solid transparent;
|
||||
border-width: 0 1px;
|
||||
background: linear-gradient(var(--hm-sw-process-tool-open-edge), var(--hm-sw-process-tool-open-edge)) padding-box, var(--hm-sw-header-hover-border-gradient) border-box;
|
||||
}
|
||||
.hm-sw-process-split__panel {
|
||||
position: absolute;
|
||||
top: var(--hm-sw-process-split-tail, 3px);
|
||||
left: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
width: 233px;
|
||||
height: 36px;
|
||||
padding: 0.5px 0;
|
||||
border: 1px solid transparent;
|
||||
border-top-width: 0;
|
||||
border-radius: 0 2px 2px 2px;
|
||||
background: linear-gradient(var(--hm-sw-process-split-panel-background), var(--hm-sw-process-split-panel-background)) padding-box, var(--hm-sw-header-hover-border-gradient) border-box;
|
||||
box-shadow: var(--hm-sw-process-split-panel-shadow);
|
||||
}
|
||||
/* Gold line on the panel top, from the button right edge to the panel end (Header.Border.ToolMenuStep). */
|
||||
.hm-sw-process-split__step {
|
||||
position: absolute;
|
||||
top: var(--hm-sw-process-split-tail, 3px);
|
||||
left: calc(var(--hm-sw-process-split-offset, 0px) + 39px);
|
||||
right: 0;
|
||||
height: 1px;
|
||||
border-top-right-radius: 2px;
|
||||
background: var(--hm-sw-header-hover-border-gradient) 0 0 / 100% 36px no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hm-sw-process-split__cell { display: grid; place-items: center; height: 34px; }
|
||||
/* Whole-pixel frame around the 29.6 x 19.73 picture (Strana 31.6 x 21.73): a fractional box is snapped to 21 or 22 rows
|
||||
depending on where the popup sits, and at 21 the light edge under the panes vanished (icons looked cut at 100%). */
|
||||
.hm-sw-process-split__frame {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 22px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 2px;
|
||||
background: var(--hm-sw-process-split-cell-frame);
|
||||
}
|
||||
.hm-sw-process-split__frame > svg { display: block; overflow: visible; }
|
||||
.hm-sw-process-split__pane { fill: var(--hm-sw-process-split-cell-pane); stroke: rgba(0, 0, 0, 0.3); stroke-width: 1; }
|
||||
.hm-sw-process-split__cell:is(:hover, [aria-checked="true"]) .hm-sw-process-split__pane { fill: var(--hm-sw-header-selected-color); }
|
||||
Reference in new issue
Block a user