eomsangdonandClaude Opus 5
a00c7497c1
사용자 지시 2건(2026-09-03). - 임시 보관함 선택 요약(「선택된 보관 자료 없음」·묶음 이름·파일 수)을 없앰. 불러온 자료는 카드가 곧바로 보여 주고, 고르기 전 상태는 [파일 업로드]가 잠긴 것으로 이미 드러남. 쓰이지 않게 된 `.b03-file__temp-summary` 규칙과 로케일 2건도 함께 제거. - 입력 컨테이너의 「업로드할 파일을 선택하세요」 경고를 띄우지 않음 — 아직 아무것도 고르지 않은 상태를 붉은 글씨로 알릴 이유가 없음. 확장자·개수·필수 슬롯 같은 나머지 사유와 [파일 업로드]를 눌렀을 때의 검사 결과는 그대로 표시. 검증: 실측 — 보관함 자리에 버튼 하나만 남음(요약 span 없음), 오류 줄 빈 문자열, 한 줄 배치 선택 518px · 보관함 210px · 업로드 102px. typecheck·prettier 통과. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
87 lines
2.3 KiB
CSS
87 lines
2.3 KiB
CSS
/* =============================================================================
|
|
* B03_FileInput_UI_Style_Temp.css
|
|
* 임시 보관함 불러오기 — 업로드 컨테이너 안 버튼 + 선택 모달
|
|
* 모달 껍데기(.b03-file__modal / -backdrop)는 기존 확인 모달 스타일을 그대로 쓴다.
|
|
* ========================================================================== */
|
|
|
|
.b03-file__temp-picker {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-12);
|
|
flex-wrap: wrap;
|
|
padding: var(--spacing-12);
|
|
border: 1px dashed var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
}
|
|
|
|
.b03-file__temp-modal {
|
|
min-width: min(560px, 92vw);
|
|
max-height: 80vh;
|
|
}
|
|
|
|
/* 제목은 브라우저 기본 h3 서식이 남지 않게 템플릿 값으로 맞춘다. */
|
|
.b03-file__temp-modal h3 {
|
|
margin: 0;
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-body);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.b03-file__temp-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.b03-file__temp-empty {
|
|
padding: var(--spacing-16);
|
|
text-align: center;
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* 목록 항목은 <button>이라 글꼴을 물려받지 않는다 — 본문 글꼴을 직접 지정한다.
|
|
글자색도 본문색을 쓴다(--color-primary-text는 '주 액션 배경 위' 색이라 밝은 배경에서 안 보인다). */
|
|
.b03-file__temp-option {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: var(--spacing-12);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
background: var(--color-paper);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-body);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b03-file__temp-option strong {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.b03-file__temp-option:hover {
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.b03-file__temp-option.is-selected {
|
|
border-color: var(--color-primary);
|
|
background: var(--color-mist-violet);
|
|
}
|
|
|
|
.b03-file__temp-option-files {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.b03-file__temp-modal-actions {
|
|
display: flex;
|
|
gap: var(--spacing-8);
|
|
justify-content: flex-end;
|
|
}
|