eomsangdonandClaude Fable 5
ff3d819019
- 그룹은 기본 접힘, 제목 행 전체가 토글 트리거(액션 버튼 클릭은 전파 차단) - 목록을 다시 그려도 펼친 그룹은 유지, 업로드 시작 시 해당 그룹 자동 펼침 - 파일 수·용량·보관 만료를 상태 배지 오른쪽으로 옮겨 제목과 한 줄로 배치 - 파일 표 상하 여백 축소(셀·버튼 padding 2px, 글자 크기 유지) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
146 lines
3.7 KiB
CSS
146 lines
3.7 KiB
CSS
/* =============================================================================
|
|
* B01_Dashboard_UI_Style_Temp.css
|
|
* 임시 보관함 섹션 — 그룹(임시 프로젝트명) + 하위 파일 표, 등록 모달
|
|
* 표·모달 껍데기는 대시보드 공통 스타일을 그대로 쓰고, 여기서는 그룹 카드와
|
|
* 진행률 막대만 정의한다. 색·간격은 theme.css 변수만 사용한다.
|
|
* ========================================================================== */
|
|
|
|
/* 제목 + 보관 기간 태그를 한 묶음으로 — 공용 섹션 헤더의 왼쪽 칸에 들어간다. */
|
|
.b01-temp__section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b01-temp__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
}
|
|
|
|
/* 그룹 = 임시 프로젝트명 1건. 아래에 파일 표가 붙는다. */
|
|
.b01-temp__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-16);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
background: var(--color-paper);
|
|
}
|
|
|
|
/* 프로젝트로 옮긴 묶음은 이력이라 흐리게 — 지금 쓸 수 있는 자료와 구분한다. */
|
|
.b01-temp__group.is-linked {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* 제목 행 전체가 접기/펼치기 트리거다. */
|
|
.b01-temp__group-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-8);
|
|
flex-wrap: wrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b01-temp__group-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.b01-temp__caret {
|
|
width: 12px;
|
|
color: var(--color-muted-text, var(--color-primary-text));
|
|
}
|
|
|
|
.b01-temp__group-meta {
|
|
font-size: 12px;
|
|
color: var(--color-muted-text, var(--color-primary-text));
|
|
}
|
|
|
|
/* 기본은 접힘 — 펼친 그룹만 파일 표를 보여 준다. */
|
|
.b01-temp__group-body {
|
|
display: none;
|
|
margin-top: var(--spacing-8);
|
|
}
|
|
|
|
.b01-temp__group.is-open .b01-temp__group-body {
|
|
display: block;
|
|
}
|
|
|
|
/* 파일 표는 행이 많아 촘촘하게 — 글자 크기는 그대로 두고 상하 여백만 줄인다. */
|
|
.b01-temp__group-body .ui-general-block__table th,
|
|
.b01-temp__group-body .ui-general-block__table td {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.b01-temp__group-body .ui-general-block__table .ui-btn {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.b01-temp__badge {
|
|
padding: 2px var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b01-temp__group.is-completed .b01-temp__badge {
|
|
border-color: var(--color-success);
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.b01-temp__group.is-uploading .b01-temp__badge {
|
|
border-color: var(--color-warning);
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
/* 업로드 진행률은 모달이 아니라 해당 파일 행 안에서 보여 준다(2026-08-08 사용자 지시). */
|
|
.b01-temp__progress {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 140px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.b01-temp__progress-bar {
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background: var(--color-canvas);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.b01-temp__progress-bar > div {
|
|
height: 100%;
|
|
background: var(--color-primary);
|
|
transition: width 0.2s ease;
|
|
}
|
|
|
|
/* ── 등록/추가 모달 ───────────────────────────────────────────────────── */
|
|
|
|
.b01-temp__hidden-input {
|
|
display: none;
|
|
}
|
|
|
|
.b01-temp__modal-pick {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-8);
|
|
margin: var(--spacing-8) 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.b01-temp__modal-list {
|
|
max-height: 40vh;
|
|
overflow-y: auto;
|
|
}
|