From 54410dd26a29e5edaeb73e71278d1bef623592d3 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Tue, 27 Oct 2026 00:07:37 +0900 Subject: [PATCH] =?UTF-8?q?fix(ui-kit):=20=EB=B6=80=ED=92=88=20=ED=9D=A0?= =?UTF-8?q?=20=EB=91=98=20=E2=80=94=20=EC=88=A8=EA=B9=80=EC=9D=B4=20?= =?UTF-8?q?=EB=B6=80=ED=92=88=20display=20=EB=A5=BC=20=EC=9D=B4=EA=B9=80?= =?UTF-8?q?=20=C2=B7=20=EB=AA=A8=EB=8B=AC=20=EB=A8=B8=EB=A6=AC=20[?= =?UTF-8?q?=EB=8B=AB=EA=B8=B0]=20=ED=95=9C=20=EC=A4=84=20(PLAN=20552-6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 부품 CSS 37 파일: display 를 주는 ui-* 클래스마다 같은 파일에 [hidden] { display: none !important } (공용 기본 꼴 없는 곳 · 페이지 꾸밈 위에서도) · 옛 숨김 규칙 일곱 파일 !important 로 · 접이 카드 머리는 collapsible.css - 모달 머리: 제목 한 줄 말줄임(전체 글 = title) · [닫기] · 머리 단추 flex: none · nowrap - 부품 모음 모달 견본에 긴 제목 24rem 한 칸 - 지킴 시험 test_552_6_part_fixes Co-Authored-By: Claude Opus 5.5 --- resources/tester/test_552_6_part_fixes.py | 64 +++++++++++++++++++++ ui_template/ui_template_badge.css | 5 ++ ui_template/ui_template_banner.css | 5 +- ui_template/ui_template_card.css | 5 ++ ui_template/ui_template_checkbox.css | 5 ++ ui_template/ui_template_collapsible.css | 5 ++ ui_template/ui_template_context_menu.css | 7 ++- ui_template/ui_template_data_table.css | 5 ++ ui_template/ui_template_drop.css | 5 ++ ui_template/ui_template_elements_chart.css | 5 ++ ui_template/ui_template_empty.css | 5 ++ ui_template/ui_template_find_list.css | 5 ++ ui_template/ui_template_float_panel.css | 5 ++ ui_template/ui_template_flow_legend.css | 7 ++- ui_template/ui_template_general_layout.css | 16 ++++++ ui_template/ui_template_group_cards.css | 14 +++++ ui_template/ui_template_help.css | 13 +++++ ui_template/ui_template_hover_info.css | 7 ++- ui_template/ui_template_icons.css | 5 ++ ui_template/ui_template_input.css | 5 ++ ui_template/ui_template_item_picker.css | 24 +++++++- ui_template/ui_template_kv.css | 5 ++ ui_template/ui_template_list_row.css | 5 ++ ui_template/ui_template_loading.css | 5 ++ ui_template/ui_template_loupe.css | 4 +- ui_template/ui_template_modal.css | 20 ++++++- ui_template/ui_template_modal.ts | 2 +- ui_template/ui_template_overlay.css | 20 +++++++ ui_template/ui_template_panel_head.css | 5 ++ ui_template/ui_template_progress.css | 11 ++++ ui_template/ui_template_public_layout.css | 11 ++++ ui_template/ui_template_segment.css | 5 ++ ui_template/ui_template_setting_row.css | 5 ++ ui_template/ui_template_side_panels.css | 9 ++- ui_template/ui_template_stat.css | 5 ++ ui_template/ui_template_tabs.css | 7 ++- ui_template/ui_template_text.css | 5 ++ ui_template/ui_template_toggle.css | 5 ++ ui_template/ui_template_toolbar.css | 5 ++ ui_template/ui_template_tree.css | 5 ++ ui_template/ui_template_ui_kit_parts.ts | 5 +- ui_template/ui_template_workflow_layout.css | 5 ++ 42 files changed, 350 insertions(+), 16 deletions(-) create mode 100644 resources/tester/test_552_6_part_fixes.py diff --git a/resources/tester/test_552_6_part_fixes.py b/resources/tester/test_552_6_part_fixes.py new file mode 100644 index 000000000..922389f7c --- /dev/null +++ b/resources/tester/test_552_6_part_fixes.py @@ -0,0 +1,64 @@ +"""552-6 부품 흠 둘 지킴 시험 — 화면 실측은 Playwright · ORCA(부품 모음 · M01 · M02 · B06 모달). + +① [hidden] — 부품 CSS 마다 display 를 주는 ui-* 클래스는 숨김 규칙(!important)이 같은 파일에 있음 + (공용 기본 꼴 `[hidden]` 이 안 실린 곳 · 페이지 꾸밈 위에서도 숨김이 이김) +② 모달 머리 — 긴 제목 = 한 줄 말줄임 · [닫기] · 머리 단추는 안 줄고 안 꺾임 +""" + +from __future__ import annotations + +import re +from pathlib import Path + +UI = Path(__file__).resolve().parents[2] / "ui_template" +SKIP = {"ui_template_theme.css", "ui_template_ui_kit.css"} # 공통 값 · 부품 모음 화면 자체 +STATE = re.compile(r":(hover|focus|active|checked|disabled)|\[data-|\[aria-|:not") + + +def _css(path: Path) -> str: + s = re.sub(r"/\*.*?\*/", "", path.read_text(encoding="utf-8"), flags=re.S) + return re.sub(r"@[^{;]+\{", "", s) # @media 겉 떼어 냄 + + +def _missing(path: Path) -> list[str]: + hidden, shown = set(), set() + for sel, body in re.findall(r"([^{}]+)\{([^{}]*)\}", _css(path)): + if "[hidden]" in sel: + if "!important" in body: + hidden.update(re.findall(r"\.(ui-[\w-]+)", sel)) + continue + m = re.search(r"(?+~]+", one.strip())[-1] + if not STATE.search(last): + shown.update(re.findall(r"\.(ui-[\w-]+)", last)) + return sorted(shown - hidden) + + +def test_숨김이_부품_display_를_이김(): + miss = {p.name: _missing(p) for p in sorted(UI.glob("*.css")) if p.name not in SKIP} + assert {k: v for k, v in miss.items() if v} == {} + # 접이 카드 머리 = theme.css 의 display → 숨김은 접이 카드 파일에 + assert ".ui-collapsible__title[hidden]" in (UI / "ui_template_collapsible.css").read_text( + encoding="utf-8" + ) + + +def test_모달_머리_닫기_한_줄(): + css = (UI / "ui_template_modal.css").read_text(encoding="utf-8") + h3 = re.search(r"\.ui-modal__top > h3 \{([^}]*)\}", css).group(1) + for d in ( + "min-width: 0;", + "overflow: hidden;", + "text-overflow: ellipsis;", + "white-space: nowrap;", + ): + assert d in h3 + assert "flex: none;" in re.search(r"\.ui-modal__top > :not\(h3\) \{([^}]*)\}", css).group(1) + assert re.search(r"\.ui-modal__top > button,[^{]*\{[^}]*white-space: nowrap;", css) + ts = (UI / "ui_template_modal.ts").read_text(encoding="utf-8") + assert ( + 'el("h3", { text: opts.title, attrs: { title: opts.title } })' in ts + ) # 말줄임 = 전체 글은 title diff --git a/ui_template/ui_template_badge.css b/ui_template/ui_template_badge.css index 711aaa803..2ffde90d0 100644 --- a/ui_template/ui_template_badge.css +++ b/ui_template/ui_template_badge.css @@ -79,3 +79,8 @@ border-radius: 50%; background: var(--badge-tone); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +.ui-badge[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_banner.css b/ui_template/ui_template_banner.css index b1cb1f764..7471f4796 100644 --- a/ui_template/ui_template_banner.css +++ b/ui_template/ui_template_banner.css @@ -14,8 +14,9 @@ font-size: 13px; line-height: 1.45; } -.ui-banner[hidden] { - display: none; +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-banner, .ui-banner__body, .ui-banner__actions)[hidden] { + display: none !important; } .ui-banner--warning { --banner-tone: var(--color-warning); diff --git a/ui_template/ui_template_card.css b/ui_template/ui_template_card.css index dc650ccc9..a6b04f03d 100644 --- a/ui_template/ui_template_card.css +++ b/ui_template/ui_template_card.css @@ -66,3 +66,8 @@ opacity: 0.5; cursor: not-allowed; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-card, .ui-card--select, .ui-card__actions, .ui-card__head)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_checkbox.css b/ui_template/ui_template_checkbox.css index 554ca3a84..1e86ab2a3 100644 --- a/ui_template/ui_template_checkbox.css +++ b/ui_template/ui_template_checkbox.css @@ -73,3 +73,8 @@ .ui-checkbox--chip:has(.ui-checkbox__input:disabled) { opacity: 0.5; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +.ui-checkbox[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_collapsible.css b/ui_template/ui_template_collapsible.css index ec576db86..c863b821c 100644 --- a/ui_template/ui_template_collapsible.css +++ b/ui_template/ui_template_collapsible.css @@ -2,3 +2,8 @@ .ui-collapsible__title:is(:hover, [data-state="hover"])::after { color: var(--color-text); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +.ui-collapsible__title[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_context_menu.css b/ui_template/ui_template_context_menu.css index 14b30400e..2b7321428 100644 --- a/ui_template/ui_template_context_menu.css +++ b/ui_template/ui_template_context_menu.css @@ -22,7 +22,7 @@ } .ui-ctx-menu[hidden] { - display: none; + display: none !important; } .ui-ctx-menu__item { @@ -116,3 +116,8 @@ .ui-row-menu__item.is-danger { color: var(--color-danger); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-row-menu, .ui-row-menu__btn, .ui-row-menu__item)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_data_table.css b/ui_template/ui_template_data_table.css index f999d1c82..966c54bf5 100644 --- a/ui_template/ui_template_data_table.css +++ b/ui_template/ui_template_data_table.css @@ -289,3 +289,8 @@ background: var(--color-canvas); box-shadow: none; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +.ui-data-table__icon[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_drop.css b/ui_template/ui_template_drop.css index ea43b96a5..c59501bfd 100644 --- a/ui_template/ui_template_drop.css +++ b/ui_template/ui_template_drop.css @@ -52,3 +52,8 @@ font-size: var(--text-caption); color: var(--color-danger); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +.ui-drop[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_elements_chart.css b/ui_template/ui_template_elements_chart.css index f170d106b..be15021b8 100644 --- a/ui_template/ui_template_elements_chart.css +++ b/ui_template/ui_template_elements_chart.css @@ -30,3 +30,8 @@ font-weight: 700; fill: var(--color-text); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-mini-bars, .ui-mini-donut-row)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_empty.css b/ui_template/ui_template_empty.css index 87aa49641..ad3cdf703 100644 --- a/ui_template/ui_template_empty.css +++ b/ui_template/ui_template_empty.css @@ -53,3 +53,8 @@ font-size: var(--text-caption); color: var(--color-text-muted); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-empty, .ui-empty__icon)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_find_list.css b/ui_template/ui_template_find_list.css index 04dbaf7e0..9c772f203 100644 --- a/ui_template/ui_template_find_list.css +++ b/ui_template/ui_template_find_list.css @@ -71,3 +71,8 @@ overflow: hidden; text-overflow: ellipsis; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-find, .ui-find__filters, .ui-find__list, .ui-find__row)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_float_panel.css b/ui_template/ui_template_float_panel.css index 63f49804a..4f2a2a57e 100644 --- a/ui_template/ui_template_float_panel.css +++ b/ui_template/ui_template_float_panel.css @@ -54,3 +54,8 @@ .ui-float-panel.is-dragging { opacity: 0.92; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-float-panel, .ui-float-panel__head)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_flow_legend.css b/ui_template/ui_template_flow_legend.css index 22250fb79..7f83f8a15 100644 --- a/ui_template/ui_template_flow_legend.css +++ b/ui_template/ui_template_flow_legend.css @@ -19,7 +19,7 @@ } .ui-flow-legend[hidden] { - display: none; + display: none !important; } /* 색띠 자체 — 아래가 적음(파랑), 위가 많음(빨강). */ @@ -106,3 +106,8 @@ button.ui-legend__item:is(:hover, [data-state="hover"]) { height: 8px; border-radius: 50%; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-flow-legend__ticks, .ui-legend, .ui-legend__item)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_general_layout.css b/ui_template/ui_template_general_layout.css index 37bd43589..9dd1e3d50 100644 --- a/ui_template/ui_template_general_layout.css +++ b/ui_template/ui_template_general_layout.css @@ -162,3 +162,19 @@ html.is-bm-route .ui-general-layout__header { html.is-bm-route .ui-general-block__section { scroll-margin-top: var(--app-burger-inset); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is( + .ui-btn-group, + .ui-general-block__actions, + .ui-general-block__section-header, + .ui-general-layout__content, + .ui-general-layout__header, + .ui-page-frame, + .ui-page-frame__action, + .ui-page-frame__body, + .ui-page-frame__head, + .ui-subtabs__tools +)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_group_cards.css b/ui_template/ui_template_group_cards.css index 677c99a50..6ca8cce53 100644 --- a/ui_template/ui_template_group_cards.css +++ b/ui_template/ui_template_group_cards.css @@ -165,3 +165,17 @@ .ui-group-card__sum { font-weight: var(--font-weight-bold); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is( + .ui-group-card, + .ui-group-card__foot, + .ui-group-card__head, + .ui-group-cards, + .ui-group-cards__actions, + .ui-group-cards__bar, + .ui-group-cards__cols, + .ui-group-cards__grid +)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_help.css b/ui_template/ui_template_help.css index b4c1df41c..c9561d4fe 100644 --- a/ui_template/ui_template_help.css +++ b/ui_template/ui_template_help.css @@ -212,3 +212,16 @@ color: var(--color-warning); font-size: 0.9em; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is( + .ui-help-figure__empty, + .ui-help-head, + .ui-help-note, + .ui-help__edit, + .ui-help__grid, + .ui-help__subs, + .ui-help__toc +)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_hover_info.css b/ui_template/ui_template_hover_info.css index b7e23057c..96ad4d901 100644 --- a/ui_template/ui_template_hover_info.css +++ b/ui_template/ui_template_hover_info.css @@ -21,7 +21,7 @@ } .ui-hover-info[hidden] { - display: none; + display: none !important; } /* 제자리 상자(tooltipBox · 552-2) — 흐름 안 · 그림 위 설명은 부르는 쪽이 absolute 로 놓음 */ @@ -29,3 +29,8 @@ position: static; display: inline-block; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +.ui-hover-info--inline[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_icons.css b/ui_template/ui_template_icons.css index d9aac1e83..c025fa04d 100644 --- a/ui_template/ui_template_icons.css +++ b/ui_template/ui_template_icons.css @@ -4,3 +4,8 @@ place-items: center; flex: none; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +.ui-icon[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_input.css b/ui_template/ui_template_input.css index 0f0b4db05..782821d5d 100644 --- a/ui_template/ui_template_input.css +++ b/ui_template/ui_template_input.css @@ -100,3 +100,8 @@ textarea.ui-input { font-variant-numeric: tabular-nums; color: var(--color-text); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-input-unit, .ui-slider)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_item_picker.css b/ui_template/ui_template_item_picker.css index c91228696..b61c55654 100644 --- a/ui_template/ui_template_item_picker.css +++ b/ui_template/ui_template_item_picker.css @@ -64,14 +64,14 @@ .ui-item-picker__table-wrap[hidden], .ui-item-picker__table[hidden] { - display: none; + display: none !important; } .ui-item-picker__cols[hidden], .ui-item-picker__actions[hidden], .ui-item-picker .ui-modal__actions[hidden], .ui-item-picker__edit-host[hidden] { - display: none; + display: none !important; } .ui-item-picker__head { @@ -303,3 +303,23 @@ .ui-item-picker__labor-line.is-warn { color: var(--color-danger); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is( + .ui-item-picker__cards, + .ui-item-picker__detail, + .ui-item-picker__edit, + .ui-item-picker__edit-body, + .ui-item-picker__edit-cad, + .ui-item-picker__edit-inputs, + .ui-item-picker__edit-sheet, + .ui-item-picker__edit-top, + .ui-item-picker__folder, + .ui-item-picker__head, + .ui-item-picker__layers, + .ui-item-picker__left, + .ui-item-picker__status, + .ui-item-picker__tree +)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_kv.css b/ui_template/ui_template_kv.css index 1d7fb757b..fb825ee03 100644 --- a/ui_template/ui_template_kv.css +++ b/ui_template/ui_template_kv.css @@ -41,3 +41,8 @@ .ui-kv__mark.is-bad { color: var(--color-danger); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-kv, .ui-kv__row)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_list_row.css b/ui_template/ui_template_list_row.css index c0aef34a3..202370f5f 100644 --- a/ui_template/ui_template_list_row.css +++ b/ui_template/ui_template_list_row.css @@ -114,3 +114,8 @@ box-shadow: inset 3px 0 0 var(--ui-list-row-stripe, var(--color-border)); border-radius: 0 var(--radius-buttons) var(--radius-buttons) 0; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-list-row__no, .ui-list-row__text, .ui-list-row__trailing, .ui-sidebar-row)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_loading.css b/ui_template/ui_template_loading.css index 26404b2a1..0b5ffc2c2 100644 --- a/ui_template/ui_template_loading.css +++ b/ui_template/ui_template_loading.css @@ -34,3 +34,8 @@ animation-duration: 2.4s; } } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +.ui-loading[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_loupe.css b/ui_template/ui_template_loupe.css index c3471fca1..cb37e0d7e 100644 --- a/ui_template/ui_template_loupe.css +++ b/ui_template/ui_template_loupe.css @@ -21,7 +21,7 @@ } .ui-loupe[hidden] { - display: none; + display: none !important; } /* 복제를 놓는 판 — 화면(뷰포트) 크기 · 움직임은 translate 만(합성층 · 374-1) */ @@ -72,7 +72,7 @@ } .ui-loupe__zoom[hidden] { - display: none; + display: none !important; } /* 가운데 십자 — 작게 */ diff --git a/ui_template/ui_template_modal.css b/ui_template/ui_template_modal.css index ac1b4bc67..7b0edfd4c 100644 --- a/ui_template/ui_template_modal.css +++ b/ui_template/ui_template_modal.css @@ -33,9 +33,22 @@ gap: var(--spacing-8); } -/* 머리 단추 자리(곁값 actions) — 제목이 남는 폭을 먹고 단추는 [닫기] 바로 왼쪽 */ +/* 머리 단추 자리(곁값 actions) — 제목이 남는 폭을 먹고 단추는 [닫기] 바로 왼쪽 · + 긴 제목 = 한 줄 말줄임(전체 글 = title) · [닫기] · 머리 단추는 안 줄고 안 꺾임 */ .ui-modal__top > h3 { + flex: 1 1 auto; + min-width: 0; margin-right: auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.ui-modal__top > :not(h3) { + flex: none; +} +.ui-modal__top > button, +.ui-modal__top > .ui-modal__actions > button { + white-space: nowrap; } .ui-modal__actions { @@ -86,3 +99,8 @@ width: 100%; margin-bottom: var(--spacing-16); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-modal, .ui-modal__actions, .ui-modal__backdrop, .ui-modal__body, .ui-modal__top)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_modal.ts b/ui_template/ui_template_modal.ts index 1ff244181..e09a9bb7a 100644 --- a/ui_template/ui_template_modal.ts +++ b/ui_template/ui_template_modal.ts @@ -47,7 +47,7 @@ export function buildModal( }); const top = el("div", { className: "ui-modal__top", - children: [el("h3", { text: opts.title }), closeButton], + children: [el("h3", { text: opts.title, attrs: { title: opts.title } }), closeButton], }); const dialog = el("div", { className: `ui-modal ${opts.wide ? "ui-modal--wide " : ""}${opts.dialogClass ?? ""}`.trim(), diff --git a/ui_template/ui_template_overlay.css b/ui_template/ui_template_overlay.css index c65769c0b..9c4c318fb 100644 --- a/ui_template/ui_template_overlay.css +++ b/ui_template/ui_template_overlay.css @@ -546,3 +546,23 @@ html.is-bm-route[data-touch="on"] > .ui-workflow-overlay__header { min-height: calc(var(--spacing-8) * 2 + 44px); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is( + .ui-panel-form, + .ui-sidebar-actions, + .ui-sidebar-card, + .ui-sidebar-fill, + .ui-sidebar-list, + .ui-sidebar-panel, + .ui-sidebar-scroll, + .ui-sidebar-split, + .ui-workflow-overlay__body, + .ui-workflow-overlay__handle, + .ui-workflow-overlay__handle-icon, + .ui-workflow-overlay__header, + .ui-workflow-overlay__panel, + .ui-workflow-overlay__scrim +)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_panel_head.css b/ui_template/ui_template_panel_head.css index 88c6307d2..e17d00615 100644 --- a/ui_template/ui_template_panel_head.css +++ b/ui_template/ui_template_panel_head.css @@ -47,3 +47,8 @@ .ui-panel-head__actions:empty { display: none; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-panel-head, .ui-panel-head__actions, .ui-panel-head__text)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_progress.css b/ui_template/ui_template_progress.css index e3a9480b5..fd04f96f5 100644 --- a/ui_template/ui_template_progress.css +++ b/ui_template/ui_template_progress.css @@ -139,3 +139,14 @@ .ui-progress__label:empty { display: none; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is( + .ui-progress, + .ui-progress-circle, + .ui-progress-circle__percent, + .ui-progress__fill, + .ui-progress__track +)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_public_layout.css b/ui_template/ui_template_public_layout.css index 98c35c3d4..5fe31bff2 100644 --- a/ui_template/ui_template_public_layout.css +++ b/ui_template/ui_template_public_layout.css @@ -88,3 +88,14 @@ font-size: var(--text-heading); } } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is( + .ui-public-frame, + .ui-public-frame__actions, + .ui-public-frame__hero-inner, + .ui-public-frame__section, + .ui-public-frame__section-body +)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_segment.css b/ui_template/ui_template_segment.css index 56e4ba04c..984b571b9 100644 --- a/ui_template/ui_template_segment.css +++ b/ui_template/ui_template_segment.css @@ -47,3 +47,8 @@ opacity: 0.5; cursor: not-allowed; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-segment, .ui-segment__item)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_setting_row.css b/ui_template/ui_template_setting_row.css index 9407aea1d..b3e915c67 100644 --- a/ui_template/ui_template_setting_row.css +++ b/ui_template/ui_template_setting_row.css @@ -56,3 +56,8 @@ .ui-setting-row[data-size="compact"] strong { font-weight: inherit; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-setting-row, .ui-setting-row__side, .ui-setting-row__text)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_side_panels.css b/ui_template/ui_template_side_panels.css index 37f2717a2..d7c0b23d2 100644 --- a/ui_template/ui_template_side_panels.css +++ b/ui_template/ui_template_side_panels.css @@ -10,7 +10,7 @@ } .ui-side-panels-row[hidden] { - display: none; + display: none !important; } .ui-side-panels-row > :first-child { @@ -87,7 +87,7 @@ } .ui-side-panels__panel[hidden] { - display: none; + display: none !important; } /* 왼쪽 경계 — 끌기 · 화살표 키 */ @@ -168,3 +168,8 @@ html:is([data-size="compact"], [data-size="medium"]) html:is([data-size="compact"], [data-size="medium"]) .ui-side-panels__grip { display: none; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-side-panels, .ui-side-panels__handles, .ui-side-panels__head)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_stat.css b/ui_template/ui_template_stat.css index d7bd77053..a0fa079c2 100644 --- a/ui_template/ui_template_stat.css +++ b/ui_template/ui_template_stat.css @@ -68,3 +68,8 @@ .ui-stat.is-bad .ui-stat__fill { background: var(--color-danger-fill); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-stat, .ui-stat-grid, .ui-stat__fill)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_tabs.css b/ui_template/ui_template_tabs.css index 349602ec7..57daef049 100644 --- a/ui_template/ui_template_tabs.css +++ b/ui_template/ui_template_tabs.css @@ -64,5 +64,10 @@ text-align: center; } .ui-tabs__count[hidden] { - display: none; + display: none !important; +} + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-tabs, .ui-tabs__tab)[hidden] { + display: none !important; } diff --git a/ui_template/ui_template_text.css b/ui_template/ui_template_text.css index 101740680..12d65100b 100644 --- a/ui_template/ui_template_text.css +++ b/ui_template/ui_template_text.css @@ -35,3 +35,8 @@ margin-right: 4px; vertical-align: middle; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +.ui-text[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_toggle.css b/ui_template/ui_template_toggle.css index c5cedbe20..d66cd6ab0 100644 --- a/ui_template/ui_template_toggle.css +++ b/ui_template/ui_template_toggle.css @@ -84,3 +84,8 @@ opacity: 0.5; cursor: not-allowed; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +.ui-toggle[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_toolbar.css b/ui_template/ui_template_toolbar.css index a02961e15..245a1d6d8 100644 --- a/ui_template/ui_template_toolbar.css +++ b/ui_template/ui_template_toolbar.css @@ -39,3 +39,8 @@ box-shadow: var(--shadow-sm); backdrop-filter: blur(6px); } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +.ui-toolbar[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_tree.css b/ui_template/ui_template_tree.css index 6a1c130a6..391ca8441 100644 --- a/ui_template/ui_template_tree.css +++ b/ui_template/ui_template_tree.css @@ -61,3 +61,8 @@ position: fixed; z-index: 1100; } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-tree__branch, .ui-tree__caret, .ui-tree__icon, .ui-tree__kids, .ui-tree__label)[hidden] { + display: none !important; +} diff --git a/ui_template/ui_template_ui_kit_parts.ts b/ui_template/ui_template_ui_kit_parts.ts index 3d931b6c7..aa5024271 100644 --- a/ui_template/ui_template_ui_kit_parts.ts +++ b/ui_template/ui_template_ui_kit_parts.ts @@ -270,9 +270,10 @@ export const KIT_PARTS: KitPart[] = [ return openMenu(s, s === "disabled" ? [{ label: "내보내기", onClick: noop, disabled: true }, ...KIT_MENU] : KIT_MENU); } }, { key: "empty", name: "빈 상태", group: "compound", kinds: "선 아이콘 · 한 줄 · 주 단추 · 사용법 · 작은 꼴", file: "ui_template_empty.ts", demo: (s) => (s === "default" ? col(createEmpty({ icon: "folder", text: "아직 프로젝트가 없음", hint: "새 프로젝트를 만들어 시작", action: createButton({ label: "새 프로젝트", onClick: noop }), onGuide: noop }), createEmpty({ text: "고른 측점 없음", small: true })) : null) }, - { key: "modal", name: "모달 · 확인창", group: "compound", kinds: "보통(720) · 넓음 · 폭 단 24rem · 40rem · 960 · 확인 · 위험 확인 · 글 묻기(prompt 대신)", file: "ui_template_modal.ts", + { key: "modal", name: "모달 · 확인창", group: "compound", kinds: "보통(720) · 넓음 · 폭 단 24rem · 40rem · 960 · 긴 제목 = 한 줄 말줄임 · 확인 · 위험 확인 · 글 묻기(prompt 대신)", file: "ui_template_modal.ts", demo: (s) => { if (s !== "default") return null; const m = buildModal({ title: "구조물 고르기", closeLabel: "닫기", width: "40rem" }, noop); m.body.append("몸 — 표 · 양식이 들어감"); m.dialog.style.margin = "0"; - return col(m.dialog, confirmPanel({ message: "노선을 저장할까요?" }).panel, confirmPanel({ title: "삭제", message: "임도 2 노선을 지울까요? 되돌릴 수 없음", okLabel: "삭제", danger: true }).panel, confirmPanel({ message: "블록 이름", field: { placeholder: "예: 배수관" } }).panel); } }, + const long = buildModal({ title: "배수관 · 횡배수관 · 측구 · 집수정 · 옹벽 구조물을 한꺼번에 고르기", closeLabel: "닫기", width: "24rem" }, noop); long.body.append("[닫기] 는 한 줄 · 제목은 말줄임"); long.dialog.style.margin = "0"; + return col(m.dialog, long.dialog, confirmPanel({ message: "노선을 저장할까요?" }).panel, confirmPanel({ title: "삭제", message: "임도 2 노선을 지울까요? 되돌릴 수 없음", okLabel: "삭제", danger: true }).panel, confirmPanel({ message: "블록 이름", field: { placeholder: "예: 배수관" } }).panel); } }, { key: "toast", name: "알림", group: "compound", kinds: "토스트 4꼴(성공 · 오류 · 정보 · 경고) · 로딩 가림막 · 진행 가림막", file: "ui_template_toast.ts", demo: (s) => (s === "default" ? col(toastNode("저장됨", "success"), toastNode("저장 못 함 — 다시 시도", "error"), toastNode("노선을 불러옴", "info"), toastNode("측점 간격이 넓음", "warning")) : null) }, { key: "banner", name: "띠 알림", group: "compound", kinds: "왼쪽 띠 · 정보 · 경고 · 위험 · 성공(✓) · 펼침 · 안 단추 · 닫기", file: "ui_template_banner.ts", diff --git a/ui_template/ui_template_workflow_layout.css b/ui_template/ui_template_workflow_layout.css index 8da2afbf7..39cbcb9d6 100644 --- a/ui_template/ui_template_workflow_layout.css +++ b/ui_template/ui_template_workflow_layout.css @@ -156,3 +156,8 @@ html.is-bm-route .ui-workflow-layout.is-options-open { --wf-burger-pad: var(--app-burger-inset); } } + +/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ +:is(.ui-workflow-layout__step, .ui-workflow-layout__steps)[hidden] { + display: none !important; +}