Files
Aislo/ui_template/ui_template_context_menu.css
T
eomsangdonandClaude Opus 5.5 277311955b feat(common): 오른쪽 클릭 메뉴 공통 양식 — 공용 CSS 한 벌 · 「한 번에 하나」 장부 합침 · 조건 만들기 공용 메뉴로
- 새 ui_template_context_menu.css(.ui-ctx-menu) — 지도 · 표 메뉴와 나무 메뉴가 같은 클래스 · 자리 · z 는 :where 로 페이지가 덮어씀
- 페이지 CSS 4 벌(스프레드시트 · B04 지도 · B05 배수 · 종단)과 나무 메뉴 CSS 의 모양 줄 지움 — 자리 · z 만 남김
- 상태줄 통계 메뉴 흠(CSS 없음) — 공용 클래스 + .ss-statusbar 기준 자리
- 나무 메뉴가 지도 · 표 메뉴 장부에 등록(enterMenu · leaveMenu)
- 조건 만들기 — 가로채기 지움 · 칸 메뉴가 있으면 그 끝 한 줄(ctx.cellMenuExtra) · 없으면(미리보기 편집기) 같은 공용 메뉴에 이 줄만 (PLAN 39-9b)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UoSr2sqvYtBf1dtQdus88s
2026-10-04 17:17:01 +09:00

67 lines
1.7 KiB
CSS

/* =============================================================================
* 오른쪽 클릭 메뉴 공용 모양 — 지도 · 표 메뉴(`ui_template_context_menu.ts`) · 나무 메뉴(`ui_template_tree.ts`) 한 벌.
* 자리 · z · 최대 높이는 `:where()`(0 점) — 페이지 · 나무 클래스가 덮어씀(지도는 뷰포트 기준 absolute · 나무는 fixed).
* ========================================================================== */
:where(.ui-ctx-menu) {
position: absolute;
z-index: var(--z-dropdown);
max-height: calc(100vh - 8px);
}
.ui-ctx-menu {
display: flex;
flex-direction: column;
min-width: 160px;
padding: var(--spacing-4);
overflow-y: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
background: var(--color-surface-raised);
box-shadow: var(--shadow-lg);
}
.ui-ctx-menu[hidden] {
display: none;
}
.ui-ctx-menu__item {
padding: var(--spacing-8) var(--spacing-12);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-body);
font: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
}
.ui-ctx-menu__item:hover:not(:disabled),
.ui-ctx-menu__item:focus-visible {
background: var(--color-surface-sunken, var(--color-mist-violet));
}
.ui-ctx-menu__item:disabled {
color: var(--color-text-secondary);
cursor: not-allowed;
}
/* 하위 메뉴(아코디언) — 머리글 굵게 · 종류는 들여쓰기 */
.ui-ctx-menu__item.is-group {
font-weight: var(--font-weight-medium);
}
.ui-ctx-menu__sub {
display: flex;
flex-direction: column;
}
.ui-ctx-menu__sub[hidden] {
display: none;
}
.ui-ctx-menu__item.is-sub {
padding-left: var(--spacing-24);
}