Files
Aislo/ui_template/ui_template_context_menu.css
T

65 lines
1.8 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(100dvh - 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;
}
/* 하위 메뉴(246-2) — 머리 줄 굵게 · 연 동안 머리 줄 칠함 · 옆 판 = 같은 메뉴 꼴(자리 = fixed · 스크립트) */
.ui-ctx-menu__item.is-group {
font-weight: var(--font-weight-medium);
}
.ui-ctx-menu__item.is-open {
background: var(--color-surface-sunken, var(--color-mist-violet));
}
/* 구분선(`"-"` 항목) */
.ui-ctx-menu__sep {
height: 1px;
margin: var(--spacing-4) 0;
background: var(--color-border);
}