eomsangdonandClaude Opus 5.5
2265ac4f7c
- createPickMenu multi — menuitemcheckbox · 눌러도 안 닫힘 · values() · 줄 icon · disabled · title · setItem · 단추 ▾ + 켠 수 배지(0 = 없음) · 하나라도 켜면 눌림 · 밀기 · 창 크기 바뀌면 닫힘 · offLabel 없으면 끔 줄 · 눌림 없음 - createMapToolRow — 그룹1 왼쪽(행 반까지) · 그룹2 오른쪽 · 영역마다 min-width 0 + 자기 가로 밀기 · [?] 판은 행 아래 - mapToolTip — 평소 제목만 · 막힘 때만 「제목 — 까닭」 · MAP_TOOLS 글 = 표 호버제목 - 아이콘 — 묶음 넷(streams · signpost · parcelHouse · ban) · 겹친 셋 대신(contours · cutFill · lineament) · 스냅 간격 spacing - 배지 count · accent 덧 · 부품 모음 견본 「고르기 메뉴(하나 · 여럿)」 · 지도 도구줄 한 행 견본 - 시험 568_1 고침 — 예정노선 둘 줄이 한 줄 꼴이 되어 목록에 잡힘 · 새 지킴 634_1 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
100 lines
2.6 KiB
CSS
100 lines
2.6 KiB
CSS
/* 지도 화면 제어 도구줄(568-1) — 도구줄 + 아래 [?] 안내 판 · 자리는 페이지가 줌 · 빈 자리는 지도 조작 통과 */
|
|
.ui-map-tools {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-8);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ui-map-tools > .ui-toolbar {
|
|
max-width: 100%;
|
|
pointer-events: auto;
|
|
/* 571-1 — 한 줄 고정 · 모자라면 가로 밀기(막대 숨김) · 넘친 쪽 끝만 흐림 */
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
overscroll-behavior-x: contain;
|
|
scrollbar-width: none;
|
|
--map-tools-fade-start: 0px;
|
|
--map-tools-fade-end: 0px;
|
|
mask-image: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
var(--color-text-body) var(--map-tools-fade-start),
|
|
var(--color-text-body) calc(100% - var(--map-tools-fade-end)),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.ui-map-tools > .ui-toolbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.ui-map-tools > .ui-toolbar > * {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ui-map-tools > .ui-toolbar.is-more-start {
|
|
--map-tools-fade-start: var(--spacing-24);
|
|
}
|
|
|
|
.ui-map-tools > .ui-toolbar.is-more-end {
|
|
--map-tools-fade-end: var(--spacing-24);
|
|
}
|
|
|
|
/* 안내 판 — 기본 접힘 · 2열 · 글판은 클릭 통과 */
|
|
.ui-map-tools__hint {
|
|
display: none;
|
|
grid-template-columns: auto auto;
|
|
gap: 2px var(--spacing-16);
|
|
max-width: 100%;
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
|
|
border-radius: var(--radius-cards);
|
|
background: color-mix(in srgb, var(--color-surface-raised) 72%, transparent);
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.ui-map-tools__hint.is-open {
|
|
display: grid;
|
|
}
|
|
|
|
/* 한 행 두 영역(634-1) — 왼쪽 겹 줄 · 오른쪽 도구줄 · 영역마다 자기 가로 밀기(min-width 0) ·
|
|
왼쪽은 행 반까지 제 폭 · 모자라면 오른쪽이 먼저 밀림 · [?] 판은 행 아래 · 빈 자리는 지도 조작 통과 */
|
|
.ui-map-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-8);
|
|
min-width: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ui-map-row__line {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-8);
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ui-map-row__line > .ui-map-tools {
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ui-map-row__line > .ui-map-tools:first-child {
|
|
flex-shrink: 0;
|
|
max-width: 50%;
|
|
}
|
|
|
|
/* 숨김 — display 가 [hidden] 을 덮지 않게 */
|
|
.ui-map-tools[hidden],
|
|
.ui-map-row[hidden],
|
|
.ui-map-tools__hint[hidden] {
|
|
display: none !important;
|
|
}
|