- spreadsheet.ts — createSpreadsheet 잇기(문맥 · 명령 → 되돌림 → 엔진 → 격자 · onChange · onSelect · 시트마다 고름 기억) · parts 한 곳(시험 틀이 빈 몸 부품을 바꿔 끼움)
- spreadsheet_selection.ts — 병합으로 늘림 · Shift/Ctrl 방향 · 숨김 건너뜀 · 행열 머리 · 고름 안 Enter/Tab 돌기
- spreadsheet_editor.ts — 숨은 textarea 늘 초점 · compositionstart/input 로 편집 시작 · enter/edit 방식 · 수식 입력줄 · 주소 상자 · 참조 넣기 · 색 테두리 · 입력 글 규칙(' · % · 천 단위)
- spreadsheet_keys.ts · spreadsheet_mouse.ts — 엑셀 단축키 · 끌기 고르기 · 채우기 핸들(늘림 · 줄여 지움 · 두 번 누르면 아래로) · 우클릭 자리
- 시험 resources/tester/spreadsheet — 규칙 7 묶음 · 가짜 부품 번들 시험 틀 html(ORCA)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01L6KXAabDTenEU7hrDQmCKY
112 lines
1.9 KiB
CSS
112 lines
1.9 KiB
CSS
/* spreadsheet.css (주인 D) — 부품 틀 · 주소 상자 · 수식 입력줄 · 칸 편집기 · 채우기 미리보기 · 알림 */
|
|
|
|
.ss {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 0;
|
|
font-size: 13px;
|
|
color: #1f2328;
|
|
background: #fff;
|
|
}
|
|
|
|
.ss-grid-host {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.ss-bar {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: stretch;
|
|
height: 26px;
|
|
border-bottom: 1px solid #d0d7de;
|
|
}
|
|
|
|
.ss-addr {
|
|
width: 96px;
|
|
padding: 0 6px;
|
|
border: none;
|
|
border-right: 1px solid #d0d7de;
|
|
font: inherit;
|
|
outline: none;
|
|
}
|
|
|
|
.ss-addr:focus {
|
|
box-shadow: inset 0 0 0 2px #217346;
|
|
}
|
|
|
|
.ss-fx {
|
|
align-self: center;
|
|
padding: 0 8px;
|
|
color: #6e7781;
|
|
font-style: italic;
|
|
user-select: none;
|
|
}
|
|
|
|
.ss-formula {
|
|
flex: 1;
|
|
padding: 4px 6px;
|
|
border: none;
|
|
border-left: 1px solid #d0d7de;
|
|
font: inherit;
|
|
line-height: 18px;
|
|
white-space: pre;
|
|
overflow: hidden;
|
|
resize: none;
|
|
outline: none;
|
|
}
|
|
|
|
.ss--readonly .ss-formula {
|
|
color: #57606a;
|
|
}
|
|
|
|
/* 칸 편집기 = 숨은 textarea — 쉴 때는 활성 칸 자리에 투명하게(한글 조합 창 자리) */
|
|
.ss-input {
|
|
position: absolute;
|
|
z-index: 5;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 1px 3px;
|
|
border: 2px solid #217346;
|
|
background: #fff;
|
|
color: #000;
|
|
font: inherit;
|
|
line-height: 1.25;
|
|
white-space: pre;
|
|
overflow: hidden;
|
|
resize: none;
|
|
outline: none;
|
|
}
|
|
|
|
.ss-input--idle {
|
|
width: 1px;
|
|
height: 1px;
|
|
min-width: 0 !important;
|
|
min-height: 0 !important;
|
|
padding: 0;
|
|
border: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ss-fill-preview {
|
|
position: absolute;
|
|
z-index: 4;
|
|
box-sizing: border-box;
|
|
border: 1px dashed #57606a;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ss-toast {
|
|
position: absolute;
|
|
right: 12px;
|
|
bottom: 40px;
|
|
z-index: 20;
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
background: #24292f;
|
|
color: #fff;
|
|
}
|