eomsangdonandClaude Opus 5.5
271c460641
- 위험 채움 토큰 밝음 #e5484d → #d6363c(흰 글 3.91 → 4.72) · 어두움 5.6 · 위험 글 #c0392b 그대로 - 새 부품 계산 줄(ui_template_calc_row) — B08 수리집수면적표 b08-hydro__row · 식 칸 배치를 대신함 - 표 부품 칸 램프(ui-data-table__lamp · --only · ✓) — B08 집계표 · 거리이정표 · B09 설계내역 램프 CSS 세 벌을 걷음(표지 class 는 풍선 · 가이드용으로 남김) - 모달 넓은 중간 창(wide + width 1100px · 1100 × 680) — B09 운반 창 손 인라인 크기를 걷음 - 값 목록 규칙 꼴(rule) — ☰ 설정 규칙 줄 ul/li 를 걷음 - 접이 구역 머리(createCollapsibleHead = 패널 머리 + 접는 제목) — B08 구조물도 「조합 연결」 제목(옛 b08-sheets__title)을 대신함 - 일반 화면 틀 좁은 폭 · 입력 칸 2열 · 끝 단추 줄 — D01 · E01 이 B02 CSS 를 빌리던 것을 끊음(가이드 장면 선택자 맞춤) - 부품 모음 견본 · 지킴 시험 test_557_2 · 낡은 시험(198_1 · 247_1 · 251_1 · 257_1 · 276_1 · 551_1)은 부품 CSS · 새 class 로 맞춤 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
277 lines
8.3 KiB
CSS
277 lines
8.3 KiB
CSS
/* B09 원가계산 — 탭 줄 · 안내 글. 색은 테마 변수만(밝음 · 어두움 같이). */
|
|
|
|
.b09-estimation {
|
|
--b09-hint-lines: 3; /* 203 안내 글 영역 줄 수 — 이 값만 바꿈(높이 · 스크롤 · 표 칸 같이 맞음) */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-16) var(--spacing-24); /* B08 본문과 같은 값 */
|
|
}
|
|
|
|
/* 탭 줄 모양 = 부품 탭(밑줄 · 보조 알약) · 여기는 줄바꿈 · 아래 틈만(B08 과 같은 값) */
|
|
.b09-estimation__tabs {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.b09-estimation > .b09-estimation__tabs:first-child {
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
|
|
.b09-estimation__tabs.ui-subtabs {
|
|
padding-bottom: var(--spacing-8);
|
|
}
|
|
|
|
/* ☰ 들여쓰기(7-2) */
|
|
html.is-bm-route .b09-estimation > .b09-estimation__tabs:first-child {
|
|
padding-left: max(0px, calc(var(--wf-burger-pad, 0px) - var(--spacing-24)));
|
|
}
|
|
|
|
/* 아래 탭 없는 위 탭 — 보이지 않는 단추 한 줄로 높이만 채움(탭 바꿀 때 몸통이 안 튐) */
|
|
.b09-estimation__tabs--blank > .ui-btn {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* 표 머리 — 좁은 열에서 말줄임 대신 줄바꿈(257-1 머리 글 안 줄바꿈 글자도 살림) */
|
|
[data-b09-table] thead th {
|
|
white-space: pre-line;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* 202-1 보조 탭 줄 오른쪽 도구(박스보기 · 가로 열 수) — 빈 보조 줄에서도 보임 · 단추 · 글 한 줄 */
|
|
.b09-estimation__tools {
|
|
display: flex;
|
|
flex: none;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.b09-estimation__tools .ui-btn,
|
|
.b09-estimation__tools .ui-group-cards__label {
|
|
flex: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 202-1 안내 줄 = 표 · 카드 판 아래 · 203 줄 수 변수만큼 보임 · 넘치면 영역 안 스크롤 */
|
|
.b09-estimation .ui-data-table + .ui-text,
|
|
.b09-estimation .ui-group-cards + .ui-text {
|
|
margin: var(--spacing-8) 0 0;
|
|
}
|
|
|
|
.b09-estimation__line-hint {
|
|
display: block; /* 부품 보조 글은 flex — 줄 수 · 스크롤은 블록에서 */
|
|
min-width: 0;
|
|
max-height: calc(var(--b09-hint-lines) * 1lh);
|
|
overflow-y: auto;
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
/* 166-2 설계내역서 손 줄 — 사용자가 더한 줄 표시(왼쪽 띠) */
|
|
.b09-estimation .ui-data-table__table tbody tr.is-hand td:first-child {
|
|
background-image: linear-gradient(to right, var(--color-primary) 3px, transparent 3px);
|
|
}
|
|
|
|
/* 200-2 설계내역서 글 칸 왼쪽 맞춤(수량만 오른쪽) */
|
|
.b09-estimation [data-b09-table="bill"] .ui-data-table__input:not([data-k="qty"]) {
|
|
text-align: left;
|
|
}
|
|
|
|
/* 235-1 설계내역서 고른 줄 — 줄 전체 상자 테두리(공용 is-focus 밑줄 · 배경 대신) */
|
|
.b09-estimation [data-b09-table="bill"] tbody tr.is-focus td {
|
|
box-shadow:
|
|
inset 0 2px 0 var(--color-accent),
|
|
inset 0 -2px 0 var(--color-accent);
|
|
}
|
|
|
|
.b09-estimation [data-b09-table="bill"] tbody tr.is-focus td:first-child {
|
|
box-shadow:
|
|
inset 0 2px 0 var(--color-accent),
|
|
inset 0 -2px 0 var(--color-accent),
|
|
inset 2px 0 0 var(--color-accent);
|
|
}
|
|
|
|
.b09-estimation [data-b09-table="bill"] tbody tr.is-focus td:last-child {
|
|
box-shadow:
|
|
inset 0 2px 0 var(--color-accent),
|
|
inset 0 -2px 0 var(--color-accent),
|
|
inset -2px 0 0 var(--color-accent);
|
|
}
|
|
|
|
.b09-estimation [data-b09-table="bill"] tbody tr.is-focus:not(:hover) td:not(.is-edited) {
|
|
background-color: var(--color-canvas);
|
|
}
|
|
|
|
.b09-estimation [data-b09-table="bill"] tbody tr.is-focus.is-alt:not(:hover) td:not(.is-edited) {
|
|
background-color: var(--dt-zebra);
|
|
}
|
|
|
|
/* 181-2 표 보기 — 목록표에서 고른 호표 줄 구간 전체 붉은 외곽선(머리 accent 밑줄은 덮음) */
|
|
.b09-estimation .ui-data-table__table tbody tr.is-pick td {
|
|
--pick-t: inset 0 0 0 0 transparent;
|
|
--pick-b: inset 0 0 0 0 transparent;
|
|
--pick-l: inset 0 0 0 0 transparent;
|
|
--pick-r: inset 0 0 0 0 transparent;
|
|
box-shadow: var(--pick-t), var(--pick-b), var(--pick-l), var(--pick-r);
|
|
}
|
|
|
|
.b09-estimation .ui-data-table__table tbody tr.is-pick.is-pick-top td {
|
|
--pick-t: inset 0 2px 0 var(--color-danger);
|
|
}
|
|
|
|
.b09-estimation .ui-data-table__table tbody tr.is-pick.is-pick-end td {
|
|
--pick-b: inset 0 -2px 0 var(--color-danger);
|
|
}
|
|
|
|
.b09-estimation .ui-data-table__table tbody tr.is-pick td:first-child {
|
|
--pick-l: inset 2px 0 0 var(--color-danger);
|
|
}
|
|
|
|
.b09-estimation .ui-data-table__table tbody tr.is-pick td:last-child {
|
|
--pick-r: inset -2px 0 0 var(--color-danger);
|
|
}
|
|
|
|
/* 183-3 자재단가대비표 — 적용 단가를 낸 출처 단가 칸(고른 출처 · 기본 최저) · 257-3 초록 테두리
|
|
* (바탕 색 아님 — 입력 칸 테두리(outline)와 달리 안쪽 상자 그림자) */
|
|
.b09-estimation .ui-data-table__table tbody td.is-picked {
|
|
box-shadow: inset 0 0 0 2px var(--color-success);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
/* 184-3 설계내역서 고친 칸 — 자동 값과 다른 칸(풍선 = 자동 값) */
|
|
.b09-estimation .ui-data-table__table tbody td.is-edited {
|
|
background: color-mix(in srgb, var(--color-warning) 22%, var(--color-canvas));
|
|
}
|
|
|
|
/* 203-1 좌측 「데이터 점검」 — [업데이트] 필요 = 단추 위 점 배지(B05 [3D 업데이트] 꼴) */
|
|
.b09-options .ui-btn.is-pending {
|
|
position: relative;
|
|
border-color: var(--color-warning);
|
|
}
|
|
|
|
.b09-options .ui-btn.is-pending::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--color-warning);
|
|
}
|
|
|
|
/* 122 데이터 점검 [업데이트] — 제목 아래 틈 = 카드 왼쪽 여유와 같게(공용 카드 틈 8 + 4) */
|
|
.b09-options [data-b09-refresh] {
|
|
margin-top: var(--spacing-4);
|
|
}
|
|
|
|
/* 연결 점검 목록 — 이름 · 탭(작게) · 알림 글 */
|
|
.b09-check__head,
|
|
.b09-check__note {
|
|
margin-top: var(--spacing-8);
|
|
}
|
|
|
|
.b09-check__tab {
|
|
flex: none;
|
|
}
|
|
|
|
/* 줄 끌기(204-1) — 놓을 자리 · 레벨 미리 보기 선 · 못 놓는 자리 = 빨간 점선 */
|
|
.b09-estimation__drop {
|
|
--drop-c: var(--color-primary);
|
|
position: fixed;
|
|
z-index: 1000;
|
|
height: 0;
|
|
border-top: 2px solid var(--drop-c);
|
|
color: var(--drop-c);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.b09-estimation__drop.is-bad {
|
|
--drop-c: var(--color-danger);
|
|
border-top-style: dashed;
|
|
}
|
|
|
|
/* 121 선 머리 = 레벨 시작 점 + 「어디 안 · 몇 레벨」 · 들어갈 폴더 줄 = 테두리 · 끄는 줄 = 흐리게 */
|
|
.b09-estimation__drop::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -6px;
|
|
left: -5px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border: 2px solid;
|
|
border-radius: 50%;
|
|
background: var(--color-canvas);
|
|
}
|
|
|
|
.b09-estimation__drop > .b09-estimation__drop-tag.ui-badge {
|
|
position: absolute;
|
|
top: -11px;
|
|
border: 1px solid; /* 놓을 자리 색(--drop-c)을 따름 */
|
|
background: var(--color-surface-raised);
|
|
}
|
|
|
|
.b09-estimation [data-b09-table="bill"] tbody tr.is-drop-into td {
|
|
box-shadow:
|
|
inset 0 2px 0 var(--color-primary),
|
|
inset 0 -2px 0 var(--color-primary);
|
|
background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
|
|
}
|
|
|
|
.b09-estimation [data-b09-table="bill"] tbody tr.is-drag-src td {
|
|
opacity: 0.45;
|
|
}
|
|
|
|
/* 303-1 · 304-1 좌측 하단 고정 줄 — 줄 여럿 세로(보기 · 행 누름 스위치 · 초안 단추 · [?][저장][내역 초기화]) */
|
|
.b09-dock.ui-sidebar-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.b09-dock.ui-sidebar-actions > * {
|
|
flex: none;
|
|
}
|
|
|
|
.b09-dock .b09-dock__row {
|
|
display: flex;
|
|
gap: var(--btn-group-gap);
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 보기 · 행 누름 스위치 = 부품 분할 고르기 · 줄 폭을 나눠 가짐 */
|
|
.b09-dock > .ui-segment {
|
|
display: flex;
|
|
}
|
|
|
|
.b09-dock > .ui-segment > .ui-segment__item {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 줄 폭을 나눠 가짐 · 가로 넘침 없음(min-width 0 = 공용 단추 줄의 auto 보다 앞섬 · 글 줄임표) — 인쇄 미리보기 좌측 줄도 같은 규칙 */
|
|
.b09-dock .b09-dock__row > .ui-btn:not(.ui-help-btn, .ui-step-nav-btn) {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
padding-inline: var(--spacing-4);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b09-dock .b09-dock__row > .ui-btn[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* 303-2 행 고름 팝업 — 누른 줄 곁 표 조각 창(겹쳐 쌓임) = 부품 떠 있는 판 · 여기는 자리 · 크기만 */
|
|
.b09-estimation.b09-popup {
|
|
position: fixed;
|
|
z-index: var(--z-modal);
|
|
width: max-content;
|
|
max-width: 90vw;
|
|
max-height: 80vh;
|
|
padding: 0;
|
|
}
|
|
|
|
.b09-popup .ui-data-table {
|
|
max-height: none;
|
|
}
|