feat(sw): add independent popup and more design tokens
This commit is contained in:
shkim4 committed
1 parent
39a089ad0e
commit
4c6fff5dea
6 files changed
+61
-35
No files matched your search
@@ -121,7 +121,7 @@ import "@hm-design/sw/styles.css" // 앱 진입점에서 한 번
|
||||
|
||||
### 3.1 테마(토큰) 설정 — 공식 방법 (2026-10-20)
|
||||
|
||||
SW 토큰(`--hm-sw-header-*`, `--hm-sw-property-*`, `--hm-sw-viewer-*`, `--hm-sw-footer-*`)의 기본값은 **가장 바깥 SW 범위**(`<SWTheme>`, 또는 단독으로 쓴 `SWHeader`·`SWViewerHeader`·`SWViewerPanel`·`SWViewerMenu`·`SWFooter`의 루트)에서 한 번만 선언됩니다. 그 안의 SW 요소 — Header의 Dropdown·More, `SWViewerMenu`, `SWViewerPanel`과 안쪽 컨트롤, `SWFooterCommandLine`, Tooltip·안내 — 는 자기 루트에 `hm-sw-theme`이 있어도 값을 다시 정하지 않고 **상속**합니다.
|
||||
SW 토큰(`--hm-sw-header-*`, `--hm-sw-property-*`, `--hm-sw-popup-*`, `--hm-sw-viewer-*`, `--hm-sw-footer-*`)의 기본값은 **가장 바깥 SW 범위**(`<SWTheme>`, 또는 단독으로 쓴 `SWHeader`·`SWViewerHeader`·`SWViewerPanel`·`SWViewerMenu`·`SWFooter`의 루트)에서 한 번만 선언됩니다. 그 안의 SW 요소 — Header의 Dropdown·More, `SWViewerMenu`, `SWViewerPanel`과 안쪽 컨트롤, `SWFooterCommandLine`, Tooltip·안내 — 는 자기 루트에 `hm-sw-theme`이 있어도 값을 다시 정하지 않고 **상속**합니다.
|
||||
|
||||
1. 화면 전체(Header·Panel·Menu가 같은 값)를 바꾸려면 화면을 `<SWTheme style={theme}>` 하나로 감싸고 거기서만 토큰을 정합니다. 프로그램 class(`<SWTheme className="app-sw-theme">` + `.app-sw-theme { --hm-sw-header-font-family: … }`)도 됩니다.
|
||||
```tsx
|
||||
|
||||
@@ -71,6 +71,7 @@
|
||||
- 목록 최대 높이 240px(8행), 넘치면 내부 스크롤. 색상 팔레트 118px.
|
||||
- 속성창·K 가이드는 `position: fixed` Overlay(뷰포트 안 보정, Portal·Dim 없음).
|
||||
- 한 번에 하나의 Dropdown(SWHeader). 단독 사용 시 각 컴포넌트가 바깥 클릭으로 스스로 닫힙니다.
|
||||
- More(`...`) 메뉴 색(2026-11-10 개별 토큰, 값 변경 없음): 면 `--hm-sw-header-more-menu-background`(`#0E3D2F`), 그림자 `--hm-sw-header-more-menu-shadow`(`0 4px 12px rgba(0,0,0,.5)`), 테두리 `--hm-sw-header-more-menu-border-color`(기본 `var(--hm-sw-header-object-border-color)`), 항목 Hover `--hm-sw-header-more-item-hover-background`(기본 `var(--hm-sw-header-hover)`). 뷰어 Header의 Dropdown·로고 메뉴도 같은 토큰을 읽습니다([VIEWER.md](./VIEWER.md)).
|
||||
|
||||
## 6. Motion
|
||||
|
||||
@@ -102,11 +103,13 @@
|
||||
| 항목 | 값 | 토큰 |
|
||||
|---|---|---|
|
||||
| 폭 / 높이 | 314px / 콘텐츠 높이(최대 화면 − 8px), 넘치면 본문 세로 스크롤 | — |
|
||||
| 표면 / 테두리 / radius | `#E4DBC9` / 1px `#A67D03` / 4px, 안쪽 1px 검정 그림자 | `--hm-sw-property-surface`, `--hm-sw-property-border` |
|
||||
| 제목줄 | 30px, Figma 제목 아트, 제목 14px 700 `#FFC600` + 검정 외곽선, 닫기 44 × 30(Hover 자산) | `--hm-sw-header-selected-color` |
|
||||
| 표면 / 테두리 / radius | `#E4DBC9` / 1px `#A67D03` / 4px, 안쪽 1px 검정 그림자 | `--hm-sw-property-surface`, `--hm-sw-property-border`, `--hm-sw-popup-frame-shadow` |
|
||||
| 제목줄 | 30px, Figma 제목 아트, 면 = 파일명 면 gradient, 제목 14px 700 `#FFC600` + 검정 외곽선, 닫기 44 × 30(Hover 자산) | `--hm-sw-popup-titlebar-background`(기본 `var(--hm-sw-header-document-background)`), `--hm-sw-popup-title-color`(기본 `var(--hm-sw-header-selected-color)`), `--hm-sw-popup-title-outline`(기본 `var(--hm-sw-header-label-outline)`) |
|
||||
| 본문 | padding 7px, 그룹 사이 8px | — |
|
||||
| 본문 스크롤바 | `thin`, Thumb `#9A9284` / Track `#E0DACE`(DWG/DXF Viewer 패널과 동일). 본문과 그 안의 스크롤 영역에 적용, 페이지 스크롤바는 그대로 | `--hm-sw-popup-scrollbar-thumb`, `--hm-sw-popup-scrollbar-track` |
|
||||
| 그룹 면(`SWPopupSection`) | 제목 700 · 검정 70%, 내용 면 `#F1ECE1`, 1px `#585349`, radius 4px | `--hm-sw-property-content` |
|
||||
| 그룹 면(`SWPopupSection`) | 제목 700 · 검정 70%, 내용 면 `#F1ECE1`, 1px `#585349`, radius 4px, 안쪽 입체 그림자 | `--hm-sw-property-content`, `--hm-sw-popup-group-heading-color`, `--hm-sw-popup-group-border-color`, `--hm-sw-popup-group-shadow` |
|
||||
| 구분선 | 개수 목록 아래선 검정 50%, 위치 표 선 검정 40% | `--hm-sw-popup-divider-color`, `--hm-sw-popup-table-line-color` |
|
||||
| Switch 그림자 | Off·On 안쪽 그림자 + 테두리 링 + 1px `#FCF0D8` 하이라이트, Thumb `0 .5px 1px rgba(0,0,0,.6)` | `--hm-sw-switch-off-shadow`, `--hm-sw-switch-on-shadow`, `--hm-sw-switch-thumb-shadow` |
|
||||
| 속성 행(`SWPopupPropertyRow`) | 속성창 행 그대로(라벨 72px 700, 값 상자 28px, `picker` 필드). 데이터 = `SWHeaderProperty` + `menus` | `--hm-sw-property-*`, `--hm-sw-property-field-*` |
|
||||
| 행(`SWPopupRow`) | 최소 32px, 라벨 72px 700 검정, 값 글자 `#E60403` 500, 단위 12px | `--hm-sw-property-label`, `--hm-sw-header-input-color` |
|
||||
| 값 상자 | 28px, Hover 1px `rgba(33,29,19,.4)`, 숫자 편집 On `#0F0D0A`(단위 흰색), Dropdown On `#211D13` | `--hm-sw-property-field-*` |
|
||||
@@ -139,7 +142,7 @@
|
||||
5. 값은 Props, 동작은 Callback. CAD 데이터를 내부에서 바꾸지 않는다.
|
||||
6. `hm-sw-*` class를 새로 쓰거나 덮어쓰지 않는다(자기 접두사 사용, 예: `app-`).
|
||||
7. 버튼·탭·토글이면 먼저 `SWToolButton`의 세 모양(§9)으로 해결되는지 본다. 팝업·설정창이면 `SWPopup` + `SWPopupSection` / `SWPopupRow`(§8).
|
||||
8. 팝업 안의 새 콘텐츠는 §8의 Popup 토큰(`--hm-sw-property-*`)만 읽는다. Header용 어두운 토큰을 밝은 Popup 면에 섞지 않는다.
|
||||
8. 팝업 안의 새 콘텐츠는 §8의 Popup 토큰(`--hm-sw-property-*`, `--hm-sw-popup-*`)만 읽는다. Header용 어두운 토큰을 밝은 Popup 면에 섞지 않는다. Popup 제목줄 토큰의 기본값은 Header 토큰을 따르므로 Header 토큰을 바꾼 테마는 그대로 적용되고, Popup만 바꿀 때는 `--hm-sw-popup-*`를 지정한다(2026-11-10).
|
||||
|
||||
## 11. 뷰어 모드 토큰·상태 요약 (`SWViewer*` 전용)
|
||||
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
|
||||
- **반응형(2026-10-21, 실제 가용 폭 기준 3단계):** 고정 Breakpoint를 쓰지 않고 Header 행의 실제 남는 폭(로고·파일명·메뉴·Gap·Padding·More 버튼 포함)을 측정합니다. 파일명 면은 글자 수가 아니라 Header 폭으로 정한 기본 폭으로 계산하므로, 같은 폭에서는 짧은 파일명과 긴 파일명의 단계·파일 열기 버튼·파일명 면 너비가 같고 긴 이름은 `…`입니다(2026-10-21). ① 모두 들어가면 기본 형태(아이콘+텍스트), ② 부족하면 `icon`과 `iconOnlyBelow`가 있는 항목을 모두 아이콘만(라벨은 Tooltip·접근성 이름), ③ 그래도 부족하면 `collapseBelow` 항목을 하나씩 More(⋯, 베이지 260px Dropdown)로 옮깁니다(값이 큰 것부터, 같으면 오른쪽 먼저). ③의 판단(2026-10-26)은 tabs를 최소 폭(`--hm-sw-viewer-tabs-min-width`)으로 세므로, tabs가 `…`로 좁아져서 들어가면 More로 옮기지 않습니다. 파일명 면 기본 폭은 `clamp(80px, min(45cqw - 256px, 100cqw - 780px), 360px)`(1280px 이상은 이전과 같음), Header 560px 미만에서는 56px입니다. 넓어지면 More → 아이콘 → 기본 순서로 복귀하고, 상단과 More에 같은 항목이 동시에 나오지 않습니다. `collapseBelow`·`iconOnlyBelow`의 숫자는 px Breakpoint가 아니며 순서만 정합니다(`iconOnlyBelow`는 지정 여부만, `collapseBelow`는 값이 큰 것부터; Props 형식 동일). 로고 옆 파일 열기 버튼(`onDocumentOpen`)은 ② 단계에서 아이콘만으로 줄고 More로 옮기지 않으며, 샘플은 `documents`. 레이어·설정·속성은 `collapseBelow` 없이 아이콘까지만. 1180px 미만 간격 2px, 560px 미만 상태 글자 숨김(CSS container)은 그대로이고, 560px 미만에서는 tabs 개수 숨김·switch `shortLabel` 캡션·switch 좌우 여백 1px도 적용됩니다(2026-10-26). 가로 스크롤은 만들지 않습니다.
|
||||
- More는 그룹/항목 단위 구획으로 자동 구성됩니다: menu·tabs는 자기 구획(`moreLabel`), button·toggle·switch는 그룹 구획(`group.moreLabel ?? group.label`). toggle·switch는 체크 항목, tabs는 라디오 항목이 됩니다.
|
||||
- **Dropdown 색(2026-10-21):** Header 안의 Dropdown — 메뉴 버튼(`type: "menu"`), More(⋯), 로고 메뉴 — 은 크기·간격·글자는 `SWViewerMenu` 그대로, 색은 일반 `SWHeader`의 `...` 메뉴와 같습니다(면 #0e3d2f, Border `--hm-sw-header-object-border-color`, 그림자 0 4px 12px rgba(0,0,0,.5), 글자 `--hm-sw-header-text-color`, 보조 글자는 같은 색 80%, Hover `--hm-sw-header-hover`, 구분선 `--hm-sw-header-document-menu-divider-color`). 파일명 목록(`documents`)은 `SWHeader` 파일명 목록 모양을 유지하고, 단독 `SWViewerMenu`(우클릭 메뉴 등)는 기존 색 그대로입니다.
|
||||
- **Dropdown 색(2026-10-21):** Header 안의 Dropdown — 메뉴 버튼(`type: "menu"`), More(⋯), 로고 메뉴 — 은 크기·간격·글자는 `SWViewerMenu` 그대로, 색은 일반 `SWHeader`의 `...` 메뉴와 같은 More 토큰을 읽습니다(2026-11-10: 면 `--hm-sw-header-more-menu-background` #0e3d2f, Border `--hm-sw-header-more-menu-border-color` = `var(--hm-sw-header-object-border-color)`, 그림자 `--hm-sw-header-more-menu-shadow` 0 4px 12px rgba(0,0,0,.5), 글자 `--hm-sw-header-text-color`, 보조 글자는 같은 색 80%, Hover `--hm-sw-header-more-item-hover-background` = `var(--hm-sw-header-hover)`, 구분선 `--hm-sw-header-document-menu-divider-color`). 파일명 목록(`documents`)은 `SWHeader` 파일명 목록 모양을 유지하고, 단독 `SWViewerMenu`(우클릭 메뉴 등)는 기존 색 그대로입니다.
|
||||
- **상태 표현:** Hover·Active·Pressed·열림·선택 탭 = 글자·아이콘 #FFC600(면·선택 박스 없음, Hover 전후 크기·위치 동일 — 2026-10-21 Hover 면 #266651 제거), Disabled = 60% 불투명, Focus = 2px #FFC600 외곽선.
|
||||
- **글자·아이콘 외곽선(SWHeader와 동일):** 14px 글자 `--hm-sw-header-text-outline`(검정 1.3px), 11px 캡션·개수·상태 `--hm-sw-header-label-outline`(검정 1px), 아이콘 `SWViewerIcon`(SWHeader 아이콘 자산의 1px 검정 바깥 Stroke를 **SVG stroke**로 재현: 아이콘 뒤 복사본의 모든 도형을 검정, 원래 선 두께 + 화면 기준 양쪽 1px(`--hm-sw-viewer-icon-outline-width`)로 그림. 위 아이콘은 그대로라 색·모양·선 두께 유지. CSS `filter` 미사용, glow는 생략). Header 항목·`SWViewerHeaderButton`의 `icon`은 자동 적용, `custom` / `trailing`의 직접 그린 아이콘은 `<SWViewerIcon>`으로 감쌉니다. 색·크기·굵기·간격은 그대로이고 Hover/Active는 채움 색만 바뀝니다. Dropdown·패널 안에는 외곽선이 없습니다(SWHeader More 메뉴와 같음). 프로그램 아이콘은 `currentColor`로 그리면 상태 색과 외곽선이 자동 적용됩니다.
|
||||
|
||||
|
||||
@@ -221,7 +221,7 @@ button.hm-sw-viewer-header__brand { text-align: left; }
|
||||
padding: 0 12px;
|
||||
color: inherit;
|
||||
}
|
||||
.hm-sw-viewer-header__logo-menu .hm-sw-header__more-item:is(:hover, :focus):not(:disabled) { background: var(--hm-sw-header-hover); outline: none; }
|
||||
.hm-sw-viewer-header__logo-menu .hm-sw-header__more-item:is(:hover, :focus):not(:disabled) { background: var(--hm-sw-header-more-item-hover-background); outline: none; }
|
||||
.hm-sw-viewer-header__logo-menu .hm-sw-header__more-item:disabled { opacity: 0.5; }
|
||||
/* Title = SWViewerMenu label, directly above its items (one group, no divider); icons = SWViewerMenu icon slot. */
|
||||
.hm-sw-viewer-header__logo-menu .hm-sw-header__more-title { min-height: 0; padding: 6px 12px; font-size: 12px; font-weight: 500; line-height: 18px; }
|
||||
@@ -297,18 +297,18 @@ button.hm-sw-viewer-header__brand { text-align: left; }
|
||||
a segment (none around the license button), no gap, top and bottom on the object surface border. The strip ends at the object surface edge, as in SWHeader. Status stays display only. */
|
||||
.hm-sw-viewer-header__object:has(> .hm-sw-viewer-header__actions > :is(.hm-sw-viewer-status, .hm-sw-viewer-header__button, .hm-sw-header__window-buttons):last-child) { padding-right: 0; }
|
||||
/* Viewer header dropdown colors (2026-10-21): the menus of the header — menu buttons, More and their submenus — use the
|
||||
colors of the SWHeader `...` menu (sw.css .hm-sw-header__more-menu): its face and shadow (fixed values there), the
|
||||
object border token, the header text, secondary text at 80% (as its values) and the white 8% row hover with the text
|
||||
unchanged. Size, spacing and type stay SWViewerMenu. A standalone SWViewerMenu (context menu) and the document list
|
||||
keep their own colors. */
|
||||
colors of the SWHeader `...` menu (sw.css .hm-sw-header__more-menu): its More tokens for face, shadow, border and
|
||||
row hover (2026-11-10, same values as before), the header text and secondary text at 80% (as its values), the text
|
||||
unchanged on hover. Size, spacing and type stay SWViewerMenu. A standalone SWViewerMenu (context menu) and the
|
||||
document list keep their own colors. */
|
||||
.hm-sw-viewer-header .hm-sw-viewer-menu[data-surface] {
|
||||
border-color: var(--hm-sw-header-object-border-color);
|
||||
background: #0e3d2f;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
border-color: var(--hm-sw-header-more-menu-border-color);
|
||||
background: var(--hm-sw-header-more-menu-background);
|
||||
box-shadow: var(--hm-sw-header-more-menu-shadow);
|
||||
color: var(--hm-sw-header-text-color);
|
||||
}
|
||||
.hm-sw-viewer-header .hm-sw-viewer-menu .hm-sw-viewer-menu__item:is(:focus, :hover, [data-state="open"]):not([aria-disabled]) {
|
||||
background: var(--hm-sw-header-hover);
|
||||
background: var(--hm-sw-header-more-item-hover-background);
|
||||
color: inherit;
|
||||
}
|
||||
.hm-sw-viewer-header .hm-sw-viewer-menu :is(.hm-sw-viewer-menu__label, .hm-sw-viewer-menu__shortcut, .hm-sw-viewer-menu__chevron) { color: inherit; opacity: 0.8; }
|
||||
|
||||
@@ -96,6 +96,28 @@
|
||||
--hm-sw-switch-on-border: #d2570b;
|
||||
--hm-sw-switch-thumb-off: linear-gradient(180deg, #fbedd4 0%, #eee3da 100%);
|
||||
--hm-sw-switch-thumb-on: linear-gradient(180deg, #e8741e 0%, #c0520d 100%);
|
||||
/* Switch depth (2026-11-10 individual tokens, values as before): inner shadows + ring + 1px highlight, thumb drop. */
|
||||
--hm-sw-switch-off-shadow: inset 1px 0 2px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(0, 0, 0, .3), inset 0 0 0 1px var(--hm-sw-switch-off-border), 1px 1px 1px #fcf0d8;
|
||||
--hm-sw-switch-on-shadow: inset 1px 0 1px 1px rgba(0, 0, 0, .2), inset 0 1px 1px 1px rgba(0, 0, 0, .2), inset 0 0 0 .8px var(--hm-sw-switch-on-border), 1px 1px 1px #fcf0d8;
|
||||
--hm-sw-switch-thumb-shadow: 0 .5px 1px rgba(0, 0, 0, .6);
|
||||
/* Popup frame (SWPopupFrame: SWPopup, property window, SWViewerPanel; 2026-11-10 individual tokens). The title bar
|
||||
defaults follow the header tokens it used so far, so a theme that sets those header tokens is unchanged; set the
|
||||
popup token to change the popup alone. */
|
||||
--hm-sw-popup-titlebar-background: var(--hm-sw-header-document-background);
|
||||
--hm-sw-popup-title-color: var(--hm-sw-header-selected-color);
|
||||
--hm-sw-popup-title-outline: var(--hm-sw-header-label-outline);
|
||||
--hm-sw-popup-frame-shadow: inset 0 0 0 1px #000;
|
||||
--hm-sw-popup-group-heading-color: rgba(0, 0, 0, .7);
|
||||
--hm-sw-popup-group-border-color: #585349;
|
||||
--hm-sw-popup-group-shadow: 0 2px 2px rgba(255, 255, 255, .6), inset 0 2px 4px #e1cfab, inset 0 -2px 2px rgba(104, 95, 76, .8);
|
||||
--hm-sw-popup-divider-color: rgba(0, 0, 0, .5);
|
||||
--hm-sw-popup-table-line-color: rgba(0, 0, 0, .4);
|
||||
/* SWHeader `...` More menu (2026-11-10 individual tokens, values as before). The viewer header dropdowns and the
|
||||
viewer logo menu take the same face and shadow. Border and row hover default to the header tokens they used. */
|
||||
--hm-sw-header-more-menu-background: #0e3d2f;
|
||||
--hm-sw-header-more-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
--hm-sw-header-more-menu-border-color: var(--hm-sw-header-object-border-color);
|
||||
--hm-sw-header-more-item-hover-background: var(--hm-sw-header-hover);
|
||||
/* Popup scrollbar (every SW popup body: SWPopup, SWViewerPanel, property window). Same as the DWG/DXF viewer
|
||||
panels (thin, HM warm-neutral-mid thumb on warm-neutral-light track). */
|
||||
--hm-sw-popup-scrollbar-thumb: #9a9284;
|
||||
@@ -1353,10 +1375,10 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
min-width: 200px;
|
||||
max-width: calc(100vw - 16px);
|
||||
padding: 4px;
|
||||
border: 1px solid var(--hm-sw-header-object-border-color);
|
||||
border: 1px solid var(--hm-sw-header-more-menu-border-color);
|
||||
border-radius: var(--hm-sw-header-property-radius);
|
||||
background: #0e3d2f;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
background: var(--hm-sw-header-more-menu-background);
|
||||
box-shadow: var(--hm-sw-header-more-menu-shadow);
|
||||
}
|
||||
.hm-sw-header__more-item {
|
||||
display: none;
|
||||
@@ -1368,7 +1390,7 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.hm-sw-header__more-item:hover:not(:disabled) { background: var(--hm-sw-header-hover); }
|
||||
.hm-sw-header__more-item:hover:not(:disabled) { background: var(--hm-sw-header-more-item-hover-background); }
|
||||
.hm-sw-header__more-item[role="menuitemcheckbox"]::after { content: ""; width: 14px; text-align: center; }
|
||||
.hm-sw-header__more-item[aria-checked="true"]::after { content: "✓"; }
|
||||
.hm-sw-header__more-value { font-size: var(--hm-sw-header-label-size); opacity: 0.8; }
|
||||
@@ -1619,13 +1641,13 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
overflow: hidden; border: 1px solid var(--hm-sw-property-border); border-radius: 4px;
|
||||
background: var(--hm-sw-property-surface); color: var(--hm-sw-property-label);
|
||||
font-size: 14px; font-weight: 400; line-height: 16px; letter-spacing: .02em;
|
||||
box-shadow: inset 0 0 0 1px #000;
|
||||
box-shadow: var(--hm-sw-popup-frame-shadow);
|
||||
}
|
||||
.hm-sw-property__titlebar { position: relative; display: flex; align-items: center; flex: 0 0 30px; height: 30px; background: var(--hm-sw-header-document-background); }
|
||||
.hm-sw-property__titlebar { position: relative; display: flex; align-items: center; flex: 0 0 30px; height: 30px; background: var(--hm-sw-popup-titlebar-background); }
|
||||
/* Figma paints btn_close first, then Union over its left side. Keep Union's diagonal and shadow
|
||||
above the close background; the title and tool remain interactive on top of it. */
|
||||
.hm-sw-property__title-art { position: absolute; z-index: 1; width: 308px; height: 38px; left: 0; top: -2px; transform: scaleY(-1); pointer-events: none; }
|
||||
.hm-sw-property__title { position: relative; z-index: 2; flex: 1; min-width: 0; margin-left: 7px; padding-right: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; letter-spacing: .04em; color: var(--hm-sw-header-selected-color); text-shadow: var(--hm-sw-header-label-outline); }
|
||||
.hm-sw-property__title { position: relative; z-index: 2; flex: 1; min-width: 0; margin-left: 7px; padding-right: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; letter-spacing: .04em; color: var(--hm-sw-popup-title-color); text-shadow: var(--hm-sw-popup-title-outline); }
|
||||
.hm-sw-property__tool { position: absolute; z-index: 2; right: 43px; top: 1px; width: 29px; height: 27.13px; }
|
||||
.hm-sw-property:not([data-selection-kind="single"]) .hm-sw-property__title { margin-right: 29px; }
|
||||
.hm-sw-property__tool > img { position: absolute; top: 0; left: 0; display: block; width: 29px; height: 27.13px; }
|
||||
@@ -1649,17 +1671,17 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
box-sizing: border-box; display: inline-flex; align-items: center; flex-shrink: 0;
|
||||
width: 37px; height: 16px; padding: 0; border: 0; border-radius: 100px;
|
||||
background: var(--hm-sw-switch-off-background);
|
||||
box-shadow: inset 1px 0 2px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(0, 0, 0, .3), inset 0 0 0 1px var(--hm-sw-switch-off-border), 1px 1px 1px #fcf0d8;
|
||||
box-shadow: var(--hm-sw-switch-off-shadow);
|
||||
}
|
||||
.hm-sw-property [role="switch"]:is([data-slot="switch"], .hm-sw-viewer-switch)[data-state="checked"] {
|
||||
background: var(--hm-sw-switch-on-background);
|
||||
box-shadow: inset 1px 0 1px 1px rgba(0, 0, 0, .2), inset 0 1px 1px 1px rgba(0, 0, 0, .2), inset 0 0 0 .8px var(--hm-sw-switch-on-border), 1px 1px 1px #fcf0d8;
|
||||
box-shadow: var(--hm-sw-switch-on-shadow);
|
||||
}
|
||||
.hm-sw-property [role="switch"]:is([data-slot="switch"], .hm-sw-viewer-switch):hover:not(:disabled) { background-image: none; }
|
||||
.hm-sw-property [role="switch"]:is([data-slot="switch"], .hm-sw-viewer-switch):focus-visible { outline: 2px solid var(--hm-sw-switch-on-border); outline-offset: 1px; }
|
||||
.hm-sw-property [role="switch"] > :is([data-slot="switch-thumb"], .hm-sw-viewer-switch__thumb) {
|
||||
width: 12px; height: 12px; border-radius: 6.5px;
|
||||
background: var(--hm-sw-switch-thumb-off); box-shadow: 0 .5px 1px rgba(0, 0, 0, .6);
|
||||
background: var(--hm-sw-switch-thumb-off); box-shadow: var(--hm-sw-switch-thumb-shadow);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
.hm-sw-property [role="switch"][data-state="checked"] > :is([data-slot="switch-thumb"], .hm-sw-viewer-switch__thumb) {
|
||||
@@ -1668,8 +1690,8 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
.hm-sw-property[data-selection-kind="all"] .hm-sw-property__body { padding-bottom: 0; }
|
||||
.hm-sw-property[data-selection-kind="all"] .hm-sw-property__counts { margin-top: -8px; }
|
||||
.hm-sw-property__group { flex: 0 0 auto; }
|
||||
.hm-sw-property__group > h3 { margin: 0 0 4px; font: inherit; font-weight: 700; color: rgba(0,0,0,.7); }
|
||||
.hm-sw-property__group--rows > .hm-sw-property__group-content { border: 1px solid #585349; border-radius: 4px; padding: 2px; background: var(--hm-sw-property-content); box-shadow: 0 2px 2px rgba(255,255,255,.6), inset 0 2px 4px #e1cfab, inset 0 -2px 2px rgba(104,95,76,.8); }
|
||||
.hm-sw-property__group > h3 { margin: 0 0 4px; font: inherit; font-weight: 700; color: var(--hm-sw-popup-group-heading-color); }
|
||||
.hm-sw-property__group--rows > .hm-sw-property__group-content { border: 1px solid var(--hm-sw-popup-group-border-color); border-radius: 4px; padding: 2px; background: var(--hm-sw-property-content); box-shadow: var(--hm-sw-popup-group-shadow); }
|
||||
.hm-sw-property__row { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 6px; }
|
||||
.hm-sw-property__row > label { flex: 0 0 72px; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.hm-sw-property__value { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
|
||||
@@ -1738,7 +1760,7 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
.hm-sw-property__expand > img { display: block; width: 296px; height: 12px; margin-left: calc((100% - 296px) / 2); }
|
||||
.hm-sw-property__expand[aria-expanded="true"] > img { transform: rotate(180deg); }
|
||||
.hm-sw-property__counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.hm-sw-property__counts > span { min-height: 28px; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,.5); font-weight: 700; }
|
||||
.hm-sw-property__counts > span { min-height: 28px; padding: 5px 0; border-bottom: 1px solid var(--hm-sw-popup-divider-color); font-weight: 700; }
|
||||
/* 2026-10-21 design review: each object type entry (원 1, 폴리선 10 …) changes its own text color on Hover, with the
|
||||
SW row accent #FF5C00 (the header list row hover color). Display only: no click, selection or filter. */
|
||||
/* Only the object list (columns 3-4); the summary entries of columns 1-2 (data-count-summary) stay plain text. */
|
||||
@@ -1768,17 +1790,17 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
.hm-sw-property__group--position { margin-top: 8px; }
|
||||
.hm-sw-property__group--position .hm-sw-property__group-content { margin: 0 4px; }
|
||||
.hm-sw-property__position-head, .hm-sw-property__group--position .hm-sw-property__editors { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
|
||||
.hm-sw-property__position-head { background: var(--hm-sw-property-table); border-top: 1px solid rgba(0,0,0,.4); }
|
||||
.hm-sw-property__position-head > span, .hm-sw-property__position-label { min-height: 24px; padding: 3px 0; text-align: center; font-weight: 700; border-bottom: 1px solid rgba(0,0,0,.4); }
|
||||
.hm-sw-property__position-head > span + span, .hm-sw-property__group--position .hm-sw-property__editor { border-left: 1px solid rgba(0,0,0,.4); }
|
||||
.hm-sw-property__position-head { background: var(--hm-sw-property-table); border-top: 1px solid var(--hm-sw-popup-table-line-color); }
|
||||
.hm-sw-property__position-head > span, .hm-sw-property__position-label { min-height: 24px; padding: 3px 0; text-align: center; font-weight: 700; border-bottom: 1px solid var(--hm-sw-popup-table-line-color); }
|
||||
.hm-sw-property__position-head > span + span, .hm-sw-property__group--position .hm-sw-property__editor { border-left: 1px solid var(--hm-sw-popup-table-line-color); }
|
||||
.hm-sw-property__position-label { background: var(--hm-sw-property-table); }
|
||||
.hm-sw-property__group--position .hm-sw-property__row { padding: 0; gap: 0; min-height: 24px; }
|
||||
.hm-sw-property__group--position label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
||||
.hm-sw-property__group--position .hm-sw-header__input { padding: 0; width: 100%; height: 24px; text-align: center; }
|
||||
.hm-sw-property__group--position .hm-sw-property__editor { border-bottom: 1px solid rgba(0,0,0,.4); }
|
||||
.hm-sw-property__group--position .hm-sw-property__editor { border-bottom: 1px solid var(--hm-sw-popup-table-line-color); }
|
||||
.hm-sw-property__overview { position: relative; flex: 0 0 28px; height: 28px; text-align: left; overflow: hidden; }
|
||||
.hm-sw-property__overview > img { position: absolute; left: -3px; top: -2px; width: 317px; height: 36.0847px; transform: scaleY(-1); }
|
||||
.hm-sw-property__overview > span { position: relative; display: block; padding: 6px 7px; color: var(--hm-sw-header-selected-color); text-shadow: var(--hm-sw-header-label-outline); font-weight: 700; }
|
||||
.hm-sw-property__overview > span { position: relative; display: block; padding: 6px 7px; color: var(--hm-sw-popup-title-color); text-shadow: var(--hm-sw-popup-title-outline); font-weight: 700; }
|
||||
.hm-sw-property__overview:disabled { opacity: 1; }
|
||||
.hm-sw-property__row[data-disabled="true"] { opacity: .4; }
|
||||
.hm-sw-property button:focus-visible, .hm-sw-property input:focus-visible, .hm-sw-property select:focus-visible { outline: 2px solid var(--hm-sw-property-border); outline-offset: -2px; }
|
||||
|
||||
Reference in new issue
Block a user