207 lines
7.1 KiB
CSS
207 lines
7.1 KiB
CSS
:root {
|
|
--bg: #0f0e0c; --surface: #1a1815; --surface2: #221f1b;
|
|
--border: #2e2a24; --accent: #c8783a; --text: #e8e2d9;
|
|
--text-dim: #8a8278; --text-faint: #4a453e;
|
|
--success: #6baa6b; --danger: #c85a5a;
|
|
--radius: 6px;
|
|
--mono: 'DM Mono', monospace;
|
|
--header-h: 50px;
|
|
--panel-w: 240px;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--mono); overflow: hidden; }
|
|
|
|
/* ── Header ── */
|
|
.editor-header {
|
|
position: fixed; top: 0; left: 0; right: 0;
|
|
height: var(--header-h);
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex; align-items: center;
|
|
padding: 0 1rem; gap: 0.75rem;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header-back {
|
|
font-size: 0.72rem; color: var(--text-dim); text-decoration: none;
|
|
display: flex; align-items: center; gap: 0.35rem;
|
|
flex-shrink: 0; transition: color 0.12s; white-space: nowrap;
|
|
}
|
|
.header-back:hover { color: var(--text); }
|
|
|
|
.header-chapter {
|
|
flex: 1; font-size: 0.72rem; color: var(--text-faint);
|
|
text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
|
|
.header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
|
|
|
|
.save-status {
|
|
font-size: 0.65rem; color: var(--text-faint);
|
|
min-width: 5rem; text-align: right;
|
|
}
|
|
.save-status.dirty { color: var(--accent); }
|
|
.save-status.saving { color: var(--text-faint); }
|
|
.save-status.saved { color: var(--success); }
|
|
.save-status.error { color: var(--danger); }
|
|
|
|
.btn-save {
|
|
padding: 0.3rem 0.9rem;
|
|
background: var(--accent); border: none; border-radius: var(--radius);
|
|
font-family: var(--mono); font-size: 0.72rem; color: #fff;
|
|
cursor: pointer; transition: opacity 0.12s;
|
|
}
|
|
.btn-save:disabled { opacity: 0.3; cursor: not-allowed; }
|
|
.btn-save:not(:disabled):hover { opacity: 0.85; }
|
|
|
|
.btn-save-all {
|
|
display: flex; align-items: center;
|
|
padding: 0.3rem 0.9rem;
|
|
background: none; border: 1px solid var(--accent); border-radius: var(--radius);
|
|
font-family: var(--mono); font-size: 0.72rem; color: var(--accent);
|
|
cursor: pointer; transition: background 0.12s;
|
|
}
|
|
.btn-save-all:hover { background: rgba(200,120,58,0.12); }
|
|
|
|
.btn-break {
|
|
display: flex; align-items: center; gap: 0.35rem;
|
|
padding: 0.3rem 0.7rem;
|
|
background: none; border: 1px solid var(--border); border-radius: var(--radius);
|
|
font-family: var(--mono); font-size: 0.68rem;
|
|
color: var(--text-dim); cursor: pointer;
|
|
transition: color 0.12s, border-color 0.12s;
|
|
}
|
|
.btn-break:disabled { opacity: 0.3; cursor: not-allowed; }
|
|
.btn-break:not(:disabled):hover { color: var(--text); border-color: var(--text-faint); }
|
|
|
|
.btn-replace {
|
|
display: flex; align-items: center; gap: 0.35rem;
|
|
padding: 0.3rem 0.7rem;
|
|
background: none; border: 1px solid var(--border); border-radius: var(--radius);
|
|
font-family: var(--mono); font-size: 0.68rem;
|
|
color: var(--text-dim); cursor: pointer;
|
|
transition: color 0.12s, border-color 0.12s;
|
|
}
|
|
.btn-replace:hover { color: var(--text); border-color: var(--text-faint); }
|
|
|
|
|
|
.btn-add-page,
|
|
.btn-del-page {
|
|
display: flex; align-items: center; gap: 0.35rem;
|
|
padding: 0.3rem 0.7rem;
|
|
background: none; border: 1px solid var(--border); border-radius: var(--radius);
|
|
font-family: var(--mono); font-size: 0.68rem;
|
|
color: var(--text-dim); cursor: pointer;
|
|
transition: color 0.12s, border-color 0.12s;
|
|
}
|
|
.btn-add-page:hover { color: var(--text); border-color: var(--text-faint); }
|
|
.btn-del-page { color: var(--danger); border-color: rgba(200,90,90,0.35); }
|
|
.btn-del-page:disabled,
|
|
.btn-add-page:disabled { opacity: 0.3; cursor: not-allowed; }
|
|
.btn-del-page:not(:disabled):hover { background: rgba(200,90,90,0.1); border-color: var(--danger); }
|
|
|
|
/* ── Find & Replace modal ── */
|
|
.modal-backdrop {
|
|
display: none;
|
|
position: fixed; inset: 0;
|
|
background: rgba(0,0,0,0.55);
|
|
z-index: 200;
|
|
align-items: center; justify-content: center;
|
|
}
|
|
.modal-backdrop.open { display: flex; }
|
|
.modal {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1.5rem;
|
|
width: 420px; max-width: 90vw;
|
|
display: flex; flex-direction: column; gap: 1rem;
|
|
}
|
|
.modal-title {
|
|
font-size: 0.78rem; font-weight: 500; color: var(--text);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.modal-field { display: flex; flex-direction: column; gap: 0.35rem; }
|
|
.modal-label { font-size: 0.68rem; color: var(--text-dim); }
|
|
.modal-input {
|
|
background: var(--surface2); border: 1px solid var(--border);
|
|
border-radius: var(--radius); padding: 0.4rem 0.6rem;
|
|
font-family: var(--mono); font-size: 0.78rem; color: var(--text);
|
|
outline: none; width: 100%;
|
|
}
|
|
.modal-input:focus { border-color: var(--accent); }
|
|
.modal-options { display: flex; gap: 1.5rem; }
|
|
.modal-opt {
|
|
display: flex; align-items: center; gap: 0.4rem;
|
|
font-size: 0.72rem; color: var(--text-dim); cursor: pointer;
|
|
}
|
|
.modal-opt input { accent-color: var(--accent); cursor: pointer; }
|
|
.modal-progress {
|
|
font-size: 0.72rem; color: var(--text-faint);
|
|
min-height: 1.2rem;
|
|
}
|
|
.modal-progress.ok { color: var(--success); }
|
|
.modal-progress.error { color: var(--danger); }
|
|
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
|
|
|
|
.btn-primary {
|
|
padding: 0.35rem 1rem;
|
|
background: var(--accent); border: none; border-radius: var(--radius);
|
|
font-family: var(--mono); font-size: 0.72rem; color: #fff;
|
|
cursor: pointer; transition: opacity 0.12s;
|
|
}
|
|
.btn-primary:disabled { opacity: 0.3; cursor: not-allowed; }
|
|
.btn-primary:not(:disabled):hover { opacity: 0.85; }
|
|
.btn-secondary {
|
|
padding: 0.35rem 0.9rem;
|
|
background: none; border: 1px solid var(--border); border-radius: var(--radius);
|
|
font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim);
|
|
cursor: pointer; transition: color 0.12s, border-color 0.12s;
|
|
}
|
|
.btn-secondary:hover { color: var(--text); border-color: var(--text-faint); }
|
|
|
|
/* ── Two-panel layout ── */
|
|
.editor-body {
|
|
position: fixed;
|
|
top: var(--header-h); left: 0; right: 0; bottom: 0;
|
|
display: flex;
|
|
}
|
|
|
|
/* ── Chapter panel ── */
|
|
.chapter-panel {
|
|
width: var(--panel-w); flex-shrink: 0;
|
|
background: var(--surface);
|
|
border-right: 1px solid var(--border);
|
|
display: flex; flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chapter-panel-title {
|
|
padding: 0.75rem 1rem 0.55rem;
|
|
font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
|
|
color: var(--accent); flex-shrink: 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.chapter-list { flex: 1; overflow-y: auto; }
|
|
|
|
.chapter-item {
|
|
padding: 0.55rem 0.75rem 0.55rem 1rem;
|
|
font-size: 0.72rem; color: var(--text-dim);
|
|
cursor: pointer; border-bottom: 1px solid var(--border);
|
|
transition: background 0.1s, color 0.1s;
|
|
display: flex; align-items: center; gap: 0.4rem;
|
|
overflow: hidden;
|
|
}
|
|
.chapter-item:hover { background: var(--surface2); color: var(--text); }
|
|
.chapter-item.active { background: var(--surface2); color: var(--text); }
|
|
.chapter-item .dirty-dot {
|
|
width: 6px; height: 6px; border-radius: 50%;
|
|
background: var(--accent); flex-shrink: 0;
|
|
}
|
|
.chapter-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
/* ── Monaco container ── */
|
|
.editor-pane { flex: 1; overflow: hidden; }
|