eomsangdonandClaude Opus 5.5
877b89f37c
- 보조 글: span · small 에 붙은 .ui-text = inline(줄 안 끊김) · p · div 는 한 줄 상자 그대로 - 단추: 위아래 여백 = 1em 기준 + 줄 높이 1 · 왼쪽 패널 양식(.ui-panel-form) 옛 규칙(글 12 · 줄 높이 normal)이 단을 덮지 않음 — B07 도면 단추 35 → 32 - 숨김: .ui-btn · .ui-icon-btn [hidden] = display none(공용 기본 꼴이 안 실린 곳에서도) - 파일 놓기 칸: 칸 어디든 누름 · 초점 Enter · Space = 파일 고르기(옛 B03 동작) · 단추 누름은 칸으로 올라가 한 번만 - 표: 격자 꼴(grid · 세로선 · 칸 테두리 · 몸 안 이름 칸 th) · 합친 칸(colSpan · rowSpan · head) · columns 비우면 머리 줄 없음 · 기본 꼴 그대로 - 부품 모음 견본: 글 줄 안 보조 글 · 격자표(수량 산출표 꼴) - 시험: test_552_5_part_fixes 새 · test_552_2_button 높이 식 기대 고침(1em · 줄 높이 1) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
101 lines
2.4 KiB
CSS
101 lines
2.4 KiB
CSS
/* 표(552-3) — 대시보드 꼴(줄 40 · 세로선 없음 · 카드 테두리) · 데이터표 = 줄 28 */
|
|
.ui-table-wrap {
|
|
overflow-x: auto;
|
|
background: var(--color-surface-raised);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
}
|
|
.ui-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 13px;
|
|
color: var(--color-text);
|
|
}
|
|
.ui-table th {
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
color: var(--color-text-muted);
|
|
border-bottom: 1px solid var(--color-border);
|
|
white-space: nowrap;
|
|
}
|
|
.ui-table td {
|
|
height: 40px;
|
|
padding: 0 12px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
vertical-align: middle;
|
|
}
|
|
.ui-table tbody tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
.ui-table tbody tr:is(:hover, [data-state="hover"]) {
|
|
background: var(--color-hover);
|
|
}
|
|
.ui-table .is-end {
|
|
text-align: right;
|
|
}
|
|
.ui-table td.ui-table__menucell {
|
|
width: 44px;
|
|
padding: 0 8px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* 데이터표 — 줄 28 · 글 12 */
|
|
.ui-table--data {
|
|
font-size: var(--text-caption);
|
|
}
|
|
.ui-table--data th {
|
|
height: 28px;
|
|
padding: 0 8px;
|
|
}
|
|
.ui-table--data td {
|
|
height: 28px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
/* 격자표 — 세로선 · 칸마다 테두리(바깥 선은 감쌈 테두리 한 줄) · 가운데 맞춤 · 몸 안 이름 칸(th) = 머리색 */
|
|
.ui-table--grid {
|
|
border-style: hidden;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.ui-table--grid :is(th, td) {
|
|
border: 1px solid var(--color-border);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
.ui-table--grid tbody th {
|
|
font-weight: 500;
|
|
font-size: inherit;
|
|
color: var(--color-text);
|
|
background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
|
|
}
|
|
|
|
/* 줄 상태 — 고름 · 바뀜 · 지움 */
|
|
.ui-table tbody tr:is(.is-active, [aria-selected="true"]) {
|
|
background: var(--color-accent-soft);
|
|
}
|
|
.ui-table tbody tr.is-changed > td:first-child {
|
|
box-shadow: inset 3px 0 0 var(--color-warning);
|
|
}
|
|
.ui-table tbody tr.is-removed {
|
|
color: var(--color-text-muted);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* 빈 줄 · 펼침 줄 */
|
|
.ui-table td.ui-table__empty {
|
|
height: 64px;
|
|
color: var(--color-text-muted);
|
|
text-align: center;
|
|
}
|
|
.ui-table tr.is-sub > td {
|
|
height: auto;
|
|
padding: 0;
|
|
background: var(--color-bg);
|
|
}
|
|
.ui-table tbody tr.is-sub:is(:hover, [data-state="hover"]) {
|
|
background: var(--color-bg);
|
|
}
|