shkim4
c7926aeffd
- SWProcessHeader appearance="multi": the process base and both end covers meet the file name and the window area with right angles (border-radius 0, multi block only). default keeps the Strana top corners 6 / covers 5; step tabs, arrows, colors and sizes unchanged - DESIGN_RULES §14 and Step Header spec §9.2 record the multi-only rule - process-header-states.check.mjs: default 6 / 5 kept, multi 0 (17/17); build:sw and check:ai-docs pass, Storybook zoom shows square multi ends
680 lines
40 KiB
CSS
680 lines
40 KiB
CSS
/* @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 place of at least 58px (-> home 106); a wider word widens the place to its own width (2026-11-05, was
|
|
a fixed 58px that a longer word overflowed on both sides and the home cut on the left), so the home, its slant and
|
|
the file name follow it like any wider logo. */
|
|
.hm-sw-process-header__bar > .hm-sw-header__home { margin-right: -15px; }
|
|
.hm-sw-process-header__wordmark {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: max-content;
|
|
min-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);
|
|
}
|
|
/* 2026-11-05: before a file exists (documentTitle "") the file name does not look clickable: the label keeps its color
|
|
on hover (was #FFC600 like a file name) and the cursor stays default. Size, place, colors and the click are unchanged;
|
|
a real file name keeps the SWHeader hover. */
|
|
.hm-sw-process-header[data-document-empty] .hm-sw-header__document-button .hm-sw-header__document-name { color: var(--hm-sw-process-document-empty-color); }
|
|
.hm-sw-process-header[data-document-untitled] .hm-sw-header__document-button { cursor: default; }
|
|
|
|
/* ---------- 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; }
|
|
|
|
/* 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;
|
|
--hm-sw-process-shape-start: 50px;
|
|
--hm-sw-process-shape-end: 48px;
|
|
}
|
|
/* Square ends (2026-11-05 user decision, `multi` only): the base and the end covers meet the file name and the window
|
|
area with right angles. `default` keeps the Strana top corners 6 (cover 5); the step tabs keep their own shapes. */
|
|
.hm-sw-process-bar[data-appearance="multi"]::before,
|
|
.hm-sw-process-bar[data-appearance="multi"] > .hm-sw-process-bar__rest { border-radius: 0; }
|
|
.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); }
|