eomsangdonandClaude Opus 5.5
de250ab759
- 부품 상자 CSS · 단추 기본 꼴을 CAD iframe 에 실음(integration/ui-kit.ts) · 자리 · 폭은 cad-* 그대로 - 상태막대 = ui-toggle--chip 22 · 특성/레이어 = ui-tabs 36 · ↶↷ · 리본 접기 · 탐색 막대 = ui-icon-btn 20 · 32 - 빠른 특성 · 블록 라이브러리 · 자리표 = ui-float-panel · 리본 넘침 · 스냅 · 명령 자동완성 = ui-ctx-menu - window.confirm · window.prompt → askConfirm · askText · 빈 안내 = ui-empty 작은 꼴 - 높이 단: 리본 칸 19→18 · 명령 칸 26→28 · 레이어 줄 40→42 · 문서 탭 25→24 · 도각 편집 단추 24 - 마우스 바탕 = --color-hover · 켜짐 = --color-accent-soft · 도면 그림 색(--draw-*) 안 건드림 - 안 쓰는 DropdownButton 지움(쓰는 곳 0 · grep) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
106 lines
2.2 KiB
CSS
106 lines
2.2 KiB
CSS
/* ui_template/cad_host/cad_host_tabs — CAD 를 감싸는 공용 탭 줄(82-1 · M02 구조물 도면 · B07).
|
||
문서 탭 = 꼴 그대로 · 공통 값 · 크기 단만(탭 24 · × 18 · + 20 · 553-6). */
|
||
|
||
.cad-tabs {
|
||
display: flex;
|
||
flex: 0 0 auto;
|
||
align-items: flex-end;
|
||
gap: 2px;
|
||
min-width: 0;
|
||
padding: 4px 6px 0;
|
||
overflow-x: auto;
|
||
border-bottom: 1px solid var(--color-border);
|
||
background: var(--color-surface);
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.cad-tabs__tab {
|
||
display: inline-flex;
|
||
flex: 0 0 auto;
|
||
align-items: center;
|
||
gap: 4px;
|
||
box-sizing: border-box;
|
||
max-width: 220px;
|
||
height: 24px;
|
||
padding: 0 8px;
|
||
border: 1px solid var(--color-border);
|
||
border-bottom: none;
|
||
border-radius: 6px 6px 0 0;
|
||
background: var(--color-canvas);
|
||
color: var(--color-text-secondary);
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.cad-tabs__tab[data-active="true"] {
|
||
background: var(--color-surface-raised);
|
||
color: var(--color-text);
|
||
font-weight: 600;
|
||
box-shadow: inset 0 2px 0 var(--color-primary);
|
||
}
|
||
|
||
.cad-tabs__tab[data-dirty="true"] .cad-tabs__label::after {
|
||
content: " ●";
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.cad-tabs__tab[data-drop="before"] {
|
||
box-shadow: inset 2px 0 0 var(--color-accent);
|
||
}
|
||
|
||
.cad-tabs__tab[data-drop="after"] {
|
||
box-shadow: inset -2px 0 0 var(--color-accent);
|
||
}
|
||
|
||
.cad-tabs__label {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.cad-tabs__input {
|
||
width: 110px;
|
||
padding: 0 4px;
|
||
border: 1px solid var(--color-accent);
|
||
border-radius: 4px;
|
||
background: var(--color-canvas);
|
||
color: var(--color-text);
|
||
font: inherit;
|
||
}
|
||
|
||
.cad-tabs__x,
|
||
.cad-tabs__add {
|
||
display: inline-grid;
|
||
flex: none;
|
||
place-items: center;
|
||
width: 18px;
|
||
height: 18px;
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: 4px;
|
||
background: transparent;
|
||
color: var(--color-text-secondary);
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cad-tabs__x:hover,
|
||
.cad-tabs__add:hover {
|
||
background: var(--color-hover);
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.cad-tabs__add {
|
||
align-self: center;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-left: 2px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.cad-tabs[data-busy="true"] .cad-tabs__tab {
|
||
cursor: progress;
|
||
}
|