eomsangdonandClaude Opus 5.5
96b7409411
- 공용 높이 변수(보통 42 · 작은 30) · 입력칸 작은 크기(compact) 더함 - M01 조합 미리 보기 입력칸 작은 크기 · M01 로직 계산 칸 작은 높이 - 서식 창 글꼴 이름 칸 28 로(속성 없는 칸이 규칙에서 빠졌음) - M02 가 대신 불러오던 M01 로직 고르기 창 모양 걷어냄 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RoyUwuTFiDJfvCfHpvKKzp
147 lines
3.1 KiB
CSS
147 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:not([type]),
|
|
.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);
|
|
}
|