style(sw): viewer popup typography, 전체 레이어 title and options layout
Deploy Storybook / deploy (push) Successful in 2m10s
Deploy Storybook / deploy (push) Successful in 2m10s
- Property popup: row labels 14px 500, read-only values 14px in the panel text color, monospace removed; 일반 정보 / 기하 속성 groups 20px apart (--hm-sw-viewer-panel-spacing on the second section). - Layer popup: 전체 레이어 is a plain SWViewerSection title (existing .hm-sw-viewer-section__title) with the all-layers switch on the same row; layer names 14px 500, no monospace. - Options popup follows the user image: 표시 (LWDISPLAY), 표시 배율 with the px/mm unit on the input row, updated lineweight hints. - Remove stray monospace font-family from SW Story CSS. - VIEWER.md §4.1 / new §4.2, DESIGN_RULES §11, Example H aligned.
This commit is contained in:
1 parent
da0e647b49
commit
84d70f5cdf
9 files changed
+41
-22
No files matched your search
@@ -36,12 +36,14 @@
|
||||
}
|
||||
/* Viewer layer list (example H), the same look as Storybook SW/Viewer's layer popup. Panel tokens only.
|
||||
Layer visibility is a 24 x 24 button around SWLayerVisibilityIcon (header bulb), never a switch or checkbox;
|
||||
the all-layers control above the list is SWViewerField + SWViewerSwitch. */
|
||||
the all-layers control above the list is SWViewerSection title="전체 레이어" + SWViewerSwitch on one row. */
|
||||
.app-viewer-layers { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
|
||||
.app-viewer-layers > li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 3px; }
|
||||
.app-viewer-layers > li:hover { background: rgba(154, 146, 132, 0.25); }
|
||||
.app-viewer-layers > li[data-visible="false"] { opacity: 0.45; }
|
||||
/* 전체 레이어: the plain SWViewerSection laid out as one row — title (.hm-sw-viewer-section__title) left, switch right. */
|
||||
section.app-viewer-all-layers { flex-direction: row; align-items: center; justify-content: space-between; min-height: 20px; }
|
||||
.app-viewer-layer-swatch { flex: 0 0 10px; width: 10px; height: 10px; border: 1px solid var(--hm-sw-viewer-panel-inner-border); border-radius: 9999px; }
|
||||
.app-viewer-layer-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: ui-monospace, monospace; font-size: 12px; }
|
||||
.app-viewer-layer-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 500; }
|
||||
.app-viewer-layer-bulb { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; }
|
||||
.app-viewer-layer-bulb:hover { background: rgba(154, 146, 132, 0.3); }
|
||||
Reference in new issue
Block a user