feat(486 B07 CAD 화면): 제목줄 · 램프 · 하단 도면 칸 지움 · ↶ ↷ = 리본 탭 줄 오른쪽 · 손가락 단추 = 자판 없는 기기만 · 탭 줄 빈 자리 변수
- 제목줄(Aislo CAD · 부제 · 「현재 도면」 램프) 지움 · --cad-title-height 0 · 💾 · JSON 내보내기 = DOM 두고 숨김(QUICK_ACCESS_HIDDEN) - 빠른 실행 = 리본 탭 줄 빈 자리 뒤 · 접기 단추 앞(줄 높이 26 그대로 · M02 hostSave 면 안 그림) - 빈 자리([출력] 오른쪽 ~ ↶ 왼쪽) → .cad-host 에 --cad-tab-slot-left/right(iframe 끝 기준 px) — 부모 탭 줄 겹침 자리 - ☰ 비키기 패딩 = 리본 탭 줄로 · 손가락 단추 = (hover: none) and (pointer: coarse) 만 - 하단 도면 이름 · ‹ › · 확정 칸(QuantityPanel) · 이동 요청 지움 - 시험 test_cad_touch(미디어 조건) · test_cad_host_tabs(머리줄 · 빈 자리 변수) 고쳐 씀 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -3,7 +3,8 @@
|
||||
@import "../../../ui_template/ui_template_theme.css";
|
||||
|
||||
:root {
|
||||
--cad-title-height: 42px;
|
||||
/* 제목줄 없음(요구 280-6) — 칸들이 이 변수로 자리 잡아 0 으로 둠 */
|
||||
--cad-title-height: 0px;
|
||||
/* 116px 에서는 리본 줄의 내용(85px)이 보이는 높이(81px)를 넘어 세로 스크롤바가
|
||||
생겼다(2026-09-04 실측) — 모자란 4px + 여유 2px 를 더한다. */
|
||||
--cad-ribbon-height: 122px;
|
||||
@@ -55,11 +56,7 @@ button {
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
.cad-host-save {
|
||||
--cad-title-height: 0px;
|
||||
}
|
||||
.cad-bare {
|
||||
--cad-title-height: 0px;
|
||||
--cad-status-height: 0px;
|
||||
}
|
||||
.controls {
|
||||
@@ -85,64 +82,6 @@ body > canvas[data-id="canvas"] {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
.cad-titlebar {
|
||||
position: fixed;
|
||||
inset: 0 0 auto 0;
|
||||
height: var(--cad-title-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
padding: 0 12px;
|
||||
background: var(--cad-chrome);
|
||||
border-bottom: 1px solid var(--cad-line);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.cad-brand {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 9px;
|
||||
min-width: 220px;
|
||||
}
|
||||
.cad-brand strong {
|
||||
color: var(--color-text);
|
||||
font-size: 14px;
|
||||
}
|
||||
.cad-brand span,
|
||||
.cad-file-state {
|
||||
color: var(--cad-text-dim);
|
||||
font-size: 11px;
|
||||
}
|
||||
.cad-file-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
.cad-file-state__dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-success);
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success) 25%, transparent);
|
||||
}
|
||||
.cad-title-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.cad-title-actions button {
|
||||
height: 28px;
|
||||
min-width: 32px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
}
|
||||
.cad-title-actions button:hover {
|
||||
border-color: var(--cad-line);
|
||||
background: var(--cad-hover);
|
||||
}
|
||||
|
||||
.cad-ribbon {
|
||||
position: fixed;
|
||||
top: var(--cad-title-height);
|
||||
@@ -168,8 +107,11 @@ body > canvas[data-id="canvas"] {
|
||||
padding: 0 8px;
|
||||
border-bottom: 1px solid var(--cad-line);
|
||||
}
|
||||
.cad-ribbon-tabs__slot {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.cad-ribbon-tabs__collapse {
|
||||
margin-left: auto;
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
align-self: center;
|
||||
@@ -275,14 +217,15 @@ body > canvas[data-id="canvas"] {
|
||||
.cad-quick-access {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
margin-left: 14px;
|
||||
align-self: center;
|
||||
}
|
||||
.cad-quick-access button {
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
.cad-ribbon-tabs .cad-quick-access button {
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
font-size: 13px;
|
||||
}
|
||||
.cad-quick-access button:hover {
|
||||
@@ -718,153 +661,13 @@ body.cad-file-dragging::after {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
* 수량 산출표 패널 (CAD 화면 하단 중심, 접이식) — 첨부 양식
|
||||
* -------------------------------------------------------------------------- */
|
||||
.cad-qtable {
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
/* 명령행 위로 띄운다 — 겹치면 명령 입력칸을 클릭으로 누를 수 없다(2026-08-31).
|
||||
명령행을 접으면 --cad-command-height가 0이라 예전처럼 상태막대 위에 붙는다. */
|
||||
bottom: calc(var(--cad-status-height) + var(--cad-command-height) + 8px);
|
||||
left: calc(var(--cad-panel-width) + (100vw - var(--cad-panel-width)) / 2);
|
||||
transform: translateX(-50%);
|
||||
/* 표(가장 넓은 자식) 기준 폭 고정 → 접었다 펴도 폭이 변하지 않는다 */
|
||||
width: max-content;
|
||||
max-width: min(1040px, calc(100vw - var(--cad-panel-width) - 24px));
|
||||
border: 1px solid var(--cad-line);
|
||||
border-radius: 6px;
|
||||
background: var(--cad-chrome-raised);
|
||||
box-shadow: var(--shadow-lg);
|
||||
color: var(--cad-text);
|
||||
}
|
||||
|
||||
.cad-qtable__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
.cad-qtable__title {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
.cad-qtable__title strong {
|
||||
color: var(--color-text);
|
||||
font-size: 14px;
|
||||
}
|
||||
.cad-qtable__title span {
|
||||
overflow: hidden;
|
||||
color: var(--cad-text-dim);
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cad-qtable__status {
|
||||
padding: 1px 7px;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
}
|
||||
.cad-qtable__status[data-confirmed="true"] {
|
||||
background: color-mix(in srgb, var(--color-success) 22%, transparent);
|
||||
color: var(--color-success);
|
||||
}
|
||||
.cad-qtable__status[data-confirmed="false"] {
|
||||
background: color-mix(in srgb, var(--color-warning) 22%, transparent);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
.cad-qtable__nav,
|
||||
.cad-qtable__collapse {
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--cad-line);
|
||||
border-radius: 4px;
|
||||
background: var(--cad-chrome-sunken);
|
||||
color: var(--cad-text);
|
||||
font-size: 13px;
|
||||
}
|
||||
.cad-qtable__nav:hover:not(:disabled),
|
||||
.cad-qtable__collapse:hover {
|
||||
background: var(--cad-hover);
|
||||
}
|
||||
.cad-qtable__nav:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.cad-qtable__body {
|
||||
padding: 0 8px 8px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
/* 접힘: 표는 DOM에 남겨 폭은 유지하되 세로로만 감춘다 */
|
||||
.cad-qtable[data-collapsed="true"] .cad-qtable__body {
|
||||
max-height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
.cad-qtable table {
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.cad-qtable th,
|
||||
.cad-qtable td {
|
||||
padding: 0;
|
||||
border: 1px solid var(--cad-line);
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.cad-qtable__label {
|
||||
padding: 2px 9px;
|
||||
color: var(--cad-text-dim);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
background: var(--cad-chrome);
|
||||
}
|
||||
.cad-qtable__label--vertical {
|
||||
width: 18px;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.cad-qtable__value input {
|
||||
width: 72px;
|
||||
padding: 3px 4px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--cad-text);
|
||||
font: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
.cad-qtable__value input:focus {
|
||||
outline: 2px solid var(--color-focus-ring);
|
||||
outline-offset: -2px;
|
||||
background: var(--cad-hover);
|
||||
}
|
||||
.cad-qtable__value--derived input {
|
||||
color: var(--cad-text-muted);
|
||||
background: var(--cad-chrome-sunken);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
:root {
|
||||
--cad-panel-width: 200px;
|
||||
}
|
||||
.cad-file-state,
|
||||
.cad-statusbar__hint {
|
||||
display: none;
|
||||
}
|
||||
.cad-brand {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 특성 팔레트 — 값을 바로 고치는 입력들 */
|
||||
|
||||
Reference in New Issue
Block a user