eomsangdonandClaude Sonnet 5
74b6937bc0
- [단위 ▾] 단추 → 자주 쓰는 기호 판(넓이·부피·길이 · 무게·부피(액체) · 개수 · 속도·각도·비율 · 연산·비교로 무리 지음) · 최근 쓴 것 앞(localStorage, 최대 8개) - 누르면 편집 중이면 커서 자리에 끼워 넣고(D 편집기 textarea 캐럿 위치) · 아니면 고른 칸 글 끝에 붙임(ctx.dispatch 라 되돌리기 짝 그대로) - 체크박스로 「숫자 형식으로 붙이기」 고르면 값은 그대로 두고 형식만 0"㎡" 처럼 단위를 붙임(기존 형식 끝 따옴표 단위는 새 것으로 교체) - e_harness.ts 에 편집 중 커서 갈래를 시험할 숨은 textarea + __setEditing 시험 전용 걸이 더함 - ORCA 실 엔진 확인 — 칸 글 끝 붙이기(터파기 계산서 → …㎡) · 형식 붙이기(12.5 값 그대로 · 형식 0"㎡") · 편집 중 커서 자리 끼우기(f|oo → fkgoo, 캐럿 이동) · 최근 목록 순서·중복 제거(개 본 개 식 → 식·개·본) 모두 확인 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AeeQRLknEpP4SFjVkjDWDs
284 lines
6.2 KiB
CSS
284 lines
6.2 KiB
CSS
/* =============================================================================
|
|
* spreadsheet_toolbar.css (주인 E)
|
|
* 도구 모음 · 시트 탭 · 우클릭 메뉴 · 클립보드 안내 토스트 — 화면 스타일 한 벌.
|
|
* 색 · 간격은 테마 토큰만(`ui_template_theme.css`).
|
|
* ========================================================================== */
|
|
|
|
.ss-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-4) var(--spacing-8);
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.ss-toolbar__group {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
padding-right: var(--spacing-8);
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
.ss-toolbar__group:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.ss-toolbar .ui-btn {
|
|
padding: 4px 8px;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.ss-toolbar .ui-btn.is-on {
|
|
background: var(--color-mist-violet);
|
|
box-shadow: inset 0 0 0 1px var(--color-royal-amethyst);
|
|
}
|
|
|
|
.ss-toolbar__select {
|
|
height: 28px;
|
|
padding: 0 4px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-canvas);
|
|
color: var(--color-text-body);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.ss-toolbar__input {
|
|
height: 28px;
|
|
width: 72px;
|
|
padding: 0 4px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-canvas);
|
|
color: var(--color-text-body);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.ss-toolbar__input--font {
|
|
width: 96px;
|
|
}
|
|
|
|
.ss-toolbar__input--size {
|
|
width: 48px;
|
|
}
|
|
|
|
.ss-toolbar__input--numfmt {
|
|
width: 140px;
|
|
}
|
|
|
|
.ss-toolbar__color {
|
|
width: 22px;
|
|
height: 22px;
|
|
padding: 0;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ss-toolbar__clear {
|
|
padding: 0 4px;
|
|
border: 0;
|
|
background: none;
|
|
color: var(--color-text-muted);
|
|
font-size: 0.72rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ss-toolbar__popover {
|
|
position: absolute;
|
|
z-index: var(--z-dropdown);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
min-width: 180px;
|
|
padding: var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
background: var(--color-surface-raised);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.ss-toolbar__popover[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.ss-toolbar__popover-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.ss-toolbar__popover-presets {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.ss-toolbar__unit-pop {
|
|
max-height: 340px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.ss-toolbar__unit-section + .ss-toolbar__unit-section {
|
|
margin-top: var(--spacing-8);
|
|
}
|
|
|
|
.ss-toolbar__unit-label {
|
|
margin-bottom: var(--spacing-4);
|
|
color: var(--color-text-muted);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.ss-toolbar__unit-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.ss-toolbar__unit-btn {
|
|
min-width: 0;
|
|
padding: 4px 2px;
|
|
}
|
|
|
|
/* ── 시트 탭 ─────────────────────────────────────────────────────────────── */
|
|
|
|
.ss-tabs {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
overflow-x: auto;
|
|
padding: var(--spacing-4) var(--spacing-8);
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.ss-tabs__tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
padding: 4px 10px;
|
|
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;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ss-tabs__tab.is-active {
|
|
background: var(--color-canvas);
|
|
color: var(--color-text-body);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ss-tabs__tab.is-dragover {
|
|
box-shadow: inset 2px 0 0 var(--color-accent);
|
|
}
|
|
|
|
.ss-tabs__tab input {
|
|
width: 96px;
|
|
border: 1px solid var(--color-focus-ring);
|
|
border-radius: var(--radius-sm);
|
|
font: inherit;
|
|
}
|
|
|
|
.ss-tabs__add {
|
|
padding: 2px 8px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-canvas);
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ── 우클릭 메뉴(그리드 · 탭 공용, `ui_template_context_menu.ts`) ───────────── */
|
|
|
|
.ss__context-menu {
|
|
position: absolute;
|
|
z-index: var(--z-dropdown);
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 160px;
|
|
padding: var(--spacing-4);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
background: var(--color-surface-raised);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.ss__context-menu[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.ss__context-menu-item {
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
border: 0;
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
color: var(--color-text-body);
|
|
font-size: 13px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ss__context-menu-item:hover {
|
|
background: var(--color-surface-sunken, var(--color-mist-violet));
|
|
}
|
|
|
|
.ss__context-menu-item.is-danger {
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
.ss__context-menu-sep {
|
|
margin: 2px 4px;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* ── 메모 편집 창(칸 우클릭 [메모 삽입 · 편집]) ──────────────────────────────── */
|
|
|
|
.ss-comment-editor {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: var(--z-modal);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgb(0 0 0 / 35%);
|
|
}
|
|
|
|
.ss-comment-editor__panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
width: 280px;
|
|
padding: var(--spacing-16);
|
|
border-radius: var(--radius-cards);
|
|
background: var(--color-surface-raised);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.ss-comment-editor__input {
|
|
min-height: 80px;
|
|
padding: var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-canvas);
|
|
color: var(--color-text-body);
|
|
font: inherit;
|
|
resize: vertical;
|
|
}
|
|
|
|
.ss-comment-editor__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--spacing-8);
|
|
}
|