eomsangdonandClaude Sonnet 5.5
2a2c4d0f62
- 해시 ?tab= 탭 줄(B08 단추 꼴) · 고른 탭 자료만 받음 · 설정 카드는 탭 줄 위 · 회사 고르기 알약은 탭 줄 오른쪽 하나 - 회사 없음 진입 두 곳(router · M02 Layer)은 ?tab=company · 회사 관리자 프로젝트 목록 한 번만 받음 - 개요 숫자 카드(단계별 · 실패 · 재확인 · 가입 대기 · 보관함 · 리소스) · 프로젝트 표 칸 보강 · 찾기 · 거르기 · 쪽 넘김 · 진행 현황 - 회사 정보 칸(사업자번호 · 대표 · 상태) · 팀원 읽기 · 자산 표 · 내 계정 마지막 로그인 · 시스템 리소스 7·30·90일 · 활성 추이 · 전체 회사 · 사용자 · 로그 쪽 · 고객 문의 - 시험 test_b01_dashboard_tabs 신규 · test_b01_settings_cards 고침 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MgChuAcyBqUkhHMTXomQC7
157 lines
3.3 KiB
CSS
157 lines
3.3 KiB
CSS
/* B01 대시보드 항목별 탭(92장) — 탭 줄 · 개요 · 프로젝트 · 회사 · 시스템. 색은 테마 변수만. */
|
|
|
|
.b01-dashboard__page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-24);
|
|
}
|
|
|
|
/* 탭 줄 — B08 위 탭과 같은 꼴 · 회사 고르기 알약은 오른쪽 끝 */
|
|
.b01-dashboard__tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
padding-bottom: var(--spacing-8);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.b01-dashboard__tabs .b01-dashboard__company-pill {
|
|
margin-right: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* 개요 — 눌러서 탭으로 가는 숫자 칸 */
|
|
.b01-dashboard__overview-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b01-dashboard__metric--link {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
color: inherit;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b01-dashboard__metric--link:hover,
|
|
.b01-dashboard__metric--link:focus-visible {
|
|
border-color: var(--color-royal-amethyst);
|
|
outline: none;
|
|
}
|
|
|
|
.b01-dashboard__metric--link .b01-dashboard__metric-value {
|
|
font-size: var(--text-subheading);
|
|
}
|
|
|
|
.b01-dashboard__metric--alert .b01-dashboard__metric-value {
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
.b01-dashboard__overview-title {
|
|
margin: 0 0 var(--spacing-8);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.b01-dashboard__overview,
|
|
.b01-dashboard__overview-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
/* 찾기 · 거르기 줄 */
|
|
.b01-dashboard__filters {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
gap: var(--spacing-16);
|
|
margin-bottom: var(--spacing-16);
|
|
}
|
|
|
|
.b01-dashboard__filters .ui-field {
|
|
min-width: 180px;
|
|
}
|
|
|
|
/* 쪽 넘김 */
|
|
.b01-dashboard__pager {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
margin-top: var(--spacing-8);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.b01-dashboard__pager-count {
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* 회사 정보 칸 */
|
|
.b01-dashboard__info {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: var(--spacing-16);
|
|
margin: 0 0 var(--spacing-16);
|
|
}
|
|
|
|
.b01-dashboard__info dt {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.b01-dashboard__info dd {
|
|
margin: var(--spacing-4) 0 0;
|
|
font-size: var(--text-body-sm);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.b01-dashboard__asset-thumb {
|
|
display: block;
|
|
max-height: 32px;
|
|
max-width: 96px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* 시스템 — 기간 고르기 줄 */
|
|
.b01-dashboard__period {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
|
|
.b01-dashboard__period .ui-btn[aria-pressed="true"] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.b01-dashboard__inquiry-state {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.b01-dashboard__grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.b01-dashboard__tabs .b01-dashboard__company-pill {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.b01-dashboard__ellipsis {
|
|
display: inline-block;
|
|
max-width: 280px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
vertical-align: bottom;
|
|
white-space: nowrap;
|
|
}
|