eomsangdonandClaude Opus 5.5
729f4c75b8
- 등록부 home 줄 = mountHome · 썸네일 선 · 단계 점 · 「다음: 지금 단계」 · [이어서 하기] = 그 단계 화면 · [자세히] = 상세 - 4~8 = 팀원별 · 단계 분포 · 14 일 넘게 그대로 표시 · 9 넘음 = 요약 숫자 · 회사별 막대 · 종류 원(인라인 SVG) - 오른쪽 = 처리할 일 · 임시 보관함 · 회사(회사 관리자) · 예정노선(산림청) · 처음 = 세 걸음 · 꼴 고정(자동 · 작게 · 크게) 기억 - 홈 역할 차례 = 셸 roleOf 와 같게(회사 관리자가 산림청 앞) - test_546 등록부 시험 — import 한 mount 이름을 빈 함수로 저절로(페이지 줄 갈아 끼워도 그대로) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
501 lines
8.7 KiB
CSS
501 lines
8.7 KiB
CSS
/* 대시보드 홈(PLAN 547-2) — 색 · 간격 = 셸 변수(--b01-*) · 종류 색 = 테마 차트 변수 */
|
|
.b01-home {
|
|
--b01-home-road: var(--b01-accent);
|
|
--b01-home-plan: var(--color-chart-0);
|
|
--b01-home-stab: var(--color-chart-2);
|
|
--b01-home-warn: var(--color-warning);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
color: var(--b01-text);
|
|
}
|
|
|
|
.b01-home__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-12);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.b01-home__head h2 {
|
|
margin: 0;
|
|
font-size: 19px;
|
|
}
|
|
|
|
.b01-home__push {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.b01-home__muted {
|
|
color: var(--b01-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.b01-home__stale {
|
|
color: var(--b01-home-warn);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.b01-home__alert {
|
|
color: var(--b01-alert);
|
|
}
|
|
|
|
.b01-home__seg {
|
|
display: inline-flex;
|
|
border: 1px solid var(--b01-line);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.b01-home__seg button {
|
|
border: 0;
|
|
background: var(--b01-card);
|
|
color: var(--b01-text);
|
|
padding: var(--spacing-4) var(--spacing-12);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b01-home__seg button.on {
|
|
background: var(--b01-accent);
|
|
color: var(--b01-accent-text);
|
|
}
|
|
|
|
.b01-home__body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 260px;
|
|
gap: var(--spacing-16);
|
|
align-items: start;
|
|
}
|
|
|
|
.b01-home__main,
|
|
.b01-home__side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-12);
|
|
min-width: 0;
|
|
}
|
|
|
|
.b01-home__pane {
|
|
background: var(--b01-card);
|
|
border: 1px solid var(--b01-line);
|
|
border-radius: var(--b01-radius);
|
|
padding: var(--spacing-12) var(--spacing-16);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b01-home__pane > .ui-btn {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.b01-home__pane-title {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.b01-home__actions {
|
|
display: flex;
|
|
gap: var(--spacing-8);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* 종류 배지 · 썸네일 · 단계 점 */
|
|
.b01-home__kind--road {
|
|
--kind: var(--b01-home-road);
|
|
}
|
|
.b01-home__kind--plan {
|
|
--kind: var(--b01-home-plan);
|
|
}
|
|
.b01-home__kind--stability {
|
|
--kind: var(--b01-home-stab);
|
|
}
|
|
.b01-home__kind--erosion {
|
|
--kind: var(--b01-muted);
|
|
}
|
|
|
|
.b01-home__badge {
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
border-radius: 5px;
|
|
padding: 0 6px;
|
|
white-space: nowrap;
|
|
color: var(--kind);
|
|
border: 1px solid var(--kind);
|
|
}
|
|
|
|
.b01-home__title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
min-width: 0;
|
|
}
|
|
|
|
.b01-home__title b {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b01-home__thumb {
|
|
display: block;
|
|
width: 100%;
|
|
background: var(--b01-accent-soft);
|
|
}
|
|
|
|
.b01-home__thumb polyline {
|
|
fill: none;
|
|
stroke: var(--kind);
|
|
stroke-width: 3;
|
|
stroke-linejoin: round;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.b01-home__thumb--big {
|
|
height: 210px;
|
|
}
|
|
.b01-home__thumb--mid {
|
|
height: 100px;
|
|
}
|
|
.b01-home__thumb--row {
|
|
width: 80px;
|
|
height: 44px;
|
|
border-radius: 6px;
|
|
}
|
|
.b01-home__thumb--row polyline {
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.b01-home__pips {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.b01-home__pips i {
|
|
flex: 1;
|
|
height: 7px;
|
|
border-radius: 4px;
|
|
background: var(--b01-line);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.b01-home__pips i.ok {
|
|
background: var(--kind);
|
|
}
|
|
|
|
.b01-home__pips i.cur {
|
|
background: var(--b01-card);
|
|
border: 2px solid var(--kind);
|
|
}
|
|
|
|
.b01-home__next {
|
|
border: 1px solid var(--b01-home-warn);
|
|
border-radius: 8px;
|
|
padding: var(--spacing-4) var(--spacing-8);
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
/* 1 — 큰 카드 */
|
|
.b01-home__big {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
gap: 0;
|
|
}
|
|
|
|
.b01-home__big-top {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 1fr;
|
|
}
|
|
|
|
.b01-home__big-info {
|
|
padding: var(--spacing-12) var(--spacing-16);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b01-home__big-info .b01-home__title b {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.b01-home__metrics {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 1fr;
|
|
border-top: 1px solid var(--b01-line);
|
|
}
|
|
|
|
.b01-home__metrics div {
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
border-left: 1px solid var(--b01-line);
|
|
}
|
|
|
|
.b01-home__metrics div:first-child {
|
|
border-left: 0;
|
|
}
|
|
|
|
.b01-home__metrics b {
|
|
display: block;
|
|
font-size: 15px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.b01-home__metrics span {
|
|
color: var(--b01-muted);
|
|
font-size: 11.5px;
|
|
}
|
|
|
|
/* 2~3 — 중간 카드 */
|
|
.b01-home__mids {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: var(--spacing-12);
|
|
}
|
|
|
|
.b01-home__mid {
|
|
background: var(--b01-card);
|
|
border: 1px solid var(--b01-line);
|
|
border-radius: var(--b01-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.b01-home__mid--first {
|
|
border-color: var(--b01-accent);
|
|
}
|
|
|
|
.b01-home__mid-body {
|
|
padding: var(--spacing-8) var(--spacing-12) var(--spacing-12);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
/* 4~8 — 한 줄 목록 */
|
|
.b01-home__split {
|
|
display: grid;
|
|
grid-template-columns: 1.3fr 1fr;
|
|
gap: var(--spacing-12);
|
|
align-items: start;
|
|
}
|
|
|
|
.b01-home__split--list {
|
|
grid-template-columns: minmax(0, 1fr) 220px;
|
|
}
|
|
|
|
.b01-home__split--list > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
min-width: 0;
|
|
}
|
|
|
|
.b01-home__rows {
|
|
background: var(--b01-card);
|
|
border: 1px solid var(--b01-line);
|
|
border-radius: var(--b01-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.b01-home__row {
|
|
display: grid;
|
|
grid-template-columns: 80px minmax(0, 1.2fr) minmax(0, 1fr) auto;
|
|
gap: var(--spacing-12);
|
|
align-items: center;
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
border-top: 1px solid var(--b01-line);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b01-home__row:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.b01-home__row:hover,
|
|
.b01-home__row:focus-visible {
|
|
background: var(--b01-hover);
|
|
outline: none;
|
|
}
|
|
|
|
.b01-home__row--stale {
|
|
box-shadow: inset 3px 0 0 var(--b01-home-warn);
|
|
}
|
|
|
|
.b01-home__member {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.b01-home__avatar {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
background: var(--b01-accent-soft);
|
|
color: var(--b01-accent);
|
|
}
|
|
|
|
.b01-home__stack {
|
|
display: flex;
|
|
height: 10px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
background: var(--b01-line);
|
|
}
|
|
|
|
.b01-home__stack i {
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
|
|
.b01-home__stack--start {
|
|
background: var(--b01-accent-soft);
|
|
}
|
|
.b01-home__stack--working {
|
|
background: var(--b01-accent);
|
|
}
|
|
.b01-home__stack--last {
|
|
background: var(--b01-home-warn);
|
|
}
|
|
|
|
/* 9 넘음 — 요약 숫자 · 그래프 */
|
|
.b01-home__many {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-12);
|
|
}
|
|
|
|
.b01-home__kpis {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
|
gap: var(--spacing-12);
|
|
}
|
|
|
|
.b01-home__kpi {
|
|
background: var(--b01-card);
|
|
border: 1px solid var(--b01-line);
|
|
border-radius: var(--b01-radius);
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
}
|
|
|
|
.b01-home__kpi b {
|
|
display: block;
|
|
font-size: 22px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.b01-home__bars text {
|
|
font-size: 10px;
|
|
fill: var(--b01-text);
|
|
}
|
|
|
|
.b01-home__bars rect {
|
|
fill: var(--b01-accent);
|
|
}
|
|
|
|
.b01-home__bars rect.rest {
|
|
fill: var(--b01-accent-soft);
|
|
}
|
|
|
|
.b01-home__donut-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-16);
|
|
}
|
|
|
|
.b01-home__donut circle {
|
|
fill: none;
|
|
stroke: var(--kind);
|
|
stroke-width: 6;
|
|
}
|
|
|
|
.b01-home__donut text {
|
|
font-size: 8px;
|
|
font-weight: 700;
|
|
fill: var(--b01-text);
|
|
}
|
|
|
|
.b01-home__legend {
|
|
display: grid;
|
|
gap: var(--spacing-4);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.b01-home__legend span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.b01-home__swatch {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 3px;
|
|
background: var(--kind);
|
|
}
|
|
|
|
/* 오른쪽 — 처리할 일 · 처음 세 걸음 */
|
|
.b01-home__todo,
|
|
.b01-home__step {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
gap: var(--spacing-8);
|
|
align-items: center;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.b01-home__dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.b01-home__dot--plan {
|
|
background: var(--b01-home-plan);
|
|
}
|
|
.b01-home__dot--warn {
|
|
background: var(--b01-home-warn);
|
|
}
|
|
.b01-home__dot--alert {
|
|
background: var(--b01-alert);
|
|
}
|
|
|
|
.b01-home__step-no {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
font-weight: 700;
|
|
border: 2px solid var(--b01-accent);
|
|
color: var(--b01-accent);
|
|
}
|
|
|
|
.b01-home__step--done .b01-home__step-no {
|
|
background: var(--b01-accent);
|
|
color: var(--b01-accent-text);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.b01-home__body,
|
|
.b01-home__split,
|
|
.b01-home__split--list,
|
|
.b01-home__big-top {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.b01-home__row {
|
|
grid-template-columns: 60px minmax(0, 1fr) auto;
|
|
}
|
|
.b01-home__row-stage {
|
|
display: none;
|
|
}
|
|
}
|