eomsangdonandClaude Sonnet 5
e1fc529f45
엑셀과 같은 탭 여섯 — 표시 형식(범주·소수 자리·천 단위·음수 모양·사용자 지정 코드·미리보기, B의 numfmt로 실제 그림) · 맞춤(가로·세로·줄 바꿈·셀 병합·들여쓰기는 자리만) · 글꼴(실시간 미리보기) · 테두리(선 모양·색·위치별 적용·미리보기) · 채우기 · 보호(브레인 지시대로 자리만). [확인] 누를 때 서식 명령 하나(+ 병합 바뀌면 병합·병합풀기)로 나감 — 도구 모음처럼 바로 안 바꿈. 표시 형식 코드 짓기는 DOM 없는 별도 파일(spreadsheet_format_code.ts)로 빼서 시험 가능하게 함 (대화상자 자체는 이 저장소에 jsdom 이 없어 단위 시험 밖 — Ctrl+1 을 이은 뒤 ORCA 로 확인할 것). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01K7JS47SacjPxZ718QsZKyr
146 lines
3.1 KiB
CSS
146 lines
3.1 KiB
CSS
/* =============================================================================
|
|
* spreadsheet_format_dialog.css (2단계 · 주인 sub_laptop_1)
|
|
* 셀 서식 대화상자 — 뿌리 배경(`.ui-confirm`)은 공용 확인 모달과 같은 것을 그대로 씀.
|
|
* 색 · 간격은 테마 토큰만(`ui_template_theme.css`).
|
|
* ========================================================================== */
|
|
|
|
.ss-fmtdlg__panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: min(560px, 92vw);
|
|
max-height: 84vh;
|
|
padding: var(--spacing-16);
|
|
border-radius: var(--radius-cards);
|
|
background: var(--color-surface-raised);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.ss-fmtdlg__title {
|
|
margin: 0 0 var(--spacing-8);
|
|
font-size: 1rem;
|
|
color: var(--color-text-body);
|
|
}
|
|
|
|
.ss-fmtdlg__tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.ss-fmtdlg__tabbtn {
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--color-border);
|
|
border-bottom: 0;
|
|
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
|
|
background: var(--color-paper);
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.82rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ss-fmtdlg__tabbtn.is-active {
|
|
background: var(--color-canvas);
|
|
color: var(--color-text-body);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ss-fmtdlg__body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: var(--spacing-12) 2px;
|
|
}
|
|
|
|
.ss-fmtdlg__tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.ss-fmtdlg__row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.ss-fmtdlg__label {
|
|
width: 140px;
|
|
flex-shrink: 0;
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.ss-fmtdlg__row select,
|
|
.ss-fmtdlg__row input[type="text"],
|
|
.ss-fmtdlg__row input[type="number"],
|
|
.ss-fmtdlg__code {
|
|
height: 28px;
|
|
padding: 0 6px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-canvas);
|
|
color: var(--color-text-body);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.ss-fmtdlg__code {
|
|
flex: 1;
|
|
}
|
|
|
|
.ss-fmtdlg__subrows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
padding-left: var(--spacing-16);
|
|
}
|
|
|
|
.ss-fmtdlg__preview-text {
|
|
padding: 4px 8px;
|
|
border: 1px dashed var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
font-family: monospace;
|
|
}
|
|
|
|
.ss-fmtdlg__font-sample {
|
|
margin-top: var(--spacing-8);
|
|
padding: var(--spacing-12);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-canvas);
|
|
}
|
|
|
|
.ss-fmtdlg__border-presets {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.ss-fmtdlg__border-preview {
|
|
width: 96px;
|
|
height: 64px;
|
|
margin-top: var(--spacing-8);
|
|
background: var(--color-canvas);
|
|
}
|
|
|
|
.ss-fmtdlg__fill-swatch {
|
|
width: 96px;
|
|
height: 40px;
|
|
margin-top: var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.ss-fmtdlg__note {
|
|
margin: 0 0 var(--spacing-8);
|
|
color: var(--color-text-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.ss-fmtdlg__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--spacing-8);
|
|
padding-top: var(--spacing-12);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|