M02 면적산출 SA01010100 에서 도구 막대 · 데이터 메뉴 · 우클릭 · 셀 서식 여섯 탭 · 찾기 · 메모 · 이름 관리 · 조건부 서식 · 유효성 · 이동 · 틀 고정 · 칸 넣기/지우기 · 데이터 도구 · 윤곽 · 수식 분석 · 되돌리기/다시 · 저장 안 하고 떠나기 · 다시 열기를 빈 값 · 같은 이름 · 긴 이름 · 취소 · Esc · Enter · 밝은/어두운 테마 예외까지 돌려 찾은 흠. - 격자(C): 틀고정이 있으면 본문 판이 그릴 행열을 틀고정 폭만큼 덜 셈 — 아래 · 오른쪽 끝이 빈 칸으로 남던 것(29 행 고정 때 1 행만 그림) · visibleRange 도 같음 · reveal 은 바로 그림 - 도구 막대: 세로 정렬 기본 표시 「위」 → 「아래」(칸 실제와 맞춤) · 크기 409 넘으면 409 · 테두리 · 단위 판이 단추 위로 떠 머리까지 덮던 것 → 단추 아래 · ✕ · 수식 안내 · 확대 글 대비(흐림 투명도 없앰 · --color-text-secondary · 밝은 5.88 · 어두운 7.91) - 병합(도구 막대 · 우클릭): 왼위 밖 값이 말없이 지워지던 것 → 엑셀처럼 먼저 물음(confirmMerge) - 셀 서식 · 이동 · 칸 넣기/지우기 · 텍스트 나누기 · 중복 제거 · 연속 채우기 · 메모 창: 열 때 초점이 창 밖(BODY)이라 Esc · Enter 가 안 먹던 것 → dialogKeys(창 안 초점 · Esc 닫기 · Enter 실행) · 셀 서식 창 탭마다 높이가 널뛰던 것 → 본문 최소 높이 - 우클릭 메뉴(ui_template 공용): Esc 로 닫힘 · 화면 밖이면 안쪽으로 당김 · 데이터 ▾ 메뉴와 알약 우클릭 메뉴가 화면 좌표를 부품 기준 자리로 써 오른쪽 아래로 떨어지던 것 고침 · 행 · 열 머리 메뉴에 잘라내기 · 붙여넣기(안내) 더함 - 자동 필터 ▼ 가 칸 밑에 깔려 눌리지 않던 것(z-index) · 값 목록이 격자 아래 끝에서 잘리면 위로 뒤집음 - Σ: 여러 칸을 고르면 첫 칸에 =SUM() 편집을 열어 Enter 로 값을 덮던 것 → 엑셀처럼 열마다 바로 아래(또는 고름 끝 빈 칸)에 합계를 바로 넣음(autoSumCells) - 조건부 서식: 빈 값이 「보다큼 0」 규칙이 되던 것 · #RRGGBB 아닌 색 · 색 없는 규칙 → 안내 후 막음 - 이름 관리: 255 자 넘는 이름 막음 · 긴 이름에 창이 화면 끝까지 늘던 것 · 시트 id(s1) 대신 시트 이름 · 「이름 바꾸기」 가 브라우저 prompt(자동 취소됨)라 안 되던 것 → 줄 안에서 고침 - 표시 형식 「@」 를 수에 걸면 빈 칸이 되던 것 → 엑셀처럼 일반으로 보임 - 연속 데이터 채우기 · 텍스트 나누기가 칸 서식을 지우던 것 → 서식 유지 - 틀 고정 「지금 칸 기준」 을 먼 칸(Z1000)에서 하면 고정 판이 격자를 다 덮어 못 움직이던 것 → 화면 안쪽 칸에서만(안내) ORCA(IP http://100.72.32.27:5181 · 메인 폴더 탭 · 판정은 수치): 목록 80 항목 밝은 80/80 · 어두운 80/80 · 사각형 겹침 · 잘림 · 화면 밖 · 대비 3 미만 0 건. 시험 — test_stage3_autosum (여러 칸 넷 더함) · test_stage2_data_tools · test_stage2_format_code · spreadsheet_b_test_entry 197/197(@ 하나 더함) · test_spreadsheet_size(css gzip 3121 · 합 67403) 통과. 시험으로 바꾼 칸은 저장 안 하고 「다시 열기」 로 버림. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W9YEkMnYQnNnRZRPXoxFsw
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;
|
|
min-height: 300px;
|
|
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);
|
|
}
|