382 lines
10 KiB
CSS
382 lines
10 KiB
CSS
:root {
|
|
--bg: #efe7d8;
|
|
--ink: #221c16;
|
|
--muted: #6f655b;
|
|
--line: #e0d3bf;
|
|
--paper: #fffaf2;
|
|
--paper-2: #f6efe3;
|
|
--green: #1d684f;
|
|
--green-deep: #144a38;
|
|
--green-soft: #e4f3ec;
|
|
--cinnabar: #b84324;
|
|
--gold: #8d6232;
|
|
--shadow: 0 16px 40px rgba(68, 42, 16, 0.08);
|
|
--serif: "Songti SC", "STSong", "Noto Serif SC", "Times New Roman", serif;
|
|
--sans: "PingFang SC", "Hiragino Sans GB", "Avenir Next", "Segoe UI", sans-serif;
|
|
--radius: 18px;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { height: 100%; }
|
|
body {
|
|
margin: 0;
|
|
color: var(--ink);
|
|
font-family: var(--sans);
|
|
background:
|
|
radial-gradient(900px 420px at -10% -10%, rgba(196, 112, 52, 0.18), transparent 55%),
|
|
radial-gradient(800px 380px at 110% -20%, rgba(29, 104, 79, 0.16), transparent 50%),
|
|
linear-gradient(180deg, #f4eee4 0%, #e9e1d2 100%);
|
|
}
|
|
button, input, textarea, select { font: inherit; color: inherit; }
|
|
button { cursor: pointer; }
|
|
h1, h2, h3, p { margin: 0; }
|
|
::selection { background: #d5eee3; }
|
|
|
|
.app {
|
|
width: min(1240px, calc(100% - 28px));
|
|
height: 100vh;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 18px;
|
|
}
|
|
|
|
.top {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
gap: 18px 28px;
|
|
align-items: end;
|
|
padding: 4px 6px 16px;
|
|
}
|
|
.brand { display: flex; gap: 12px; align-items: center; }
|
|
.mark {
|
|
width: 44px;
|
|
height: 44px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 12px;
|
|
background: var(--green-deep);
|
|
color: #f6f0e4;
|
|
font-family: var(--serif);
|
|
font-size: 24px;
|
|
}
|
|
.kicker {
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--gold);
|
|
}
|
|
h1 {
|
|
font-family: var(--serif);
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
}
|
|
.lede {
|
|
max-width: 460px;
|
|
color: var(--muted);
|
|
line-height: 1.55;
|
|
padding-bottom: 4px;
|
|
}
|
|
.pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
|
|
.pill {
|
|
border: 1px solid var(--line);
|
|
background: rgba(255, 250, 242, 0.8);
|
|
border-radius: 999px;
|
|
padding: 6px 10px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.pill strong { color: var(--ink); font-weight: 600; }
|
|
.pill.is-ok { color: var(--green-deep); border-color: #b7d7c8; background: var(--green-soft); }
|
|
.pill.is-wait { color: var(--gold); }
|
|
.pill.is-bad { color: var(--cinnabar); border-color: #f0c2b6; background: #fff1ec; }
|
|
|
|
.workspace {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 332px;
|
|
gap: 16px;
|
|
padding-bottom: 16px;
|
|
}
|
|
.chat, .library {
|
|
min-height: 0;
|
|
background: rgba(255, 250, 242, 0.78);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
box-shadow: var(--shadow);
|
|
border-radius: var(--radius);
|
|
}
|
|
.chat { display: flex; flex-direction: column; overflow: hidden; }
|
|
.messages {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.empty {
|
|
margin: auto;
|
|
max-width: 640px;
|
|
text-align: center;
|
|
padding: 24px 8px 12px;
|
|
}
|
|
.empty h2 {
|
|
font-family: var(--serif);
|
|
font-size: 34px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
.empty p { margin-top: 10px; color: var(--muted); line-height: 1.7; }
|
|
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
|
|
.chip, .textish, .ghost, .send, .cite, .icon-btn {
|
|
border: 1px solid var(--line);
|
|
background: var(--paper);
|
|
border-radius: 999px;
|
|
}
|
|
.chip {
|
|
padding: 8px 12px;
|
|
color: var(--green-deep);
|
|
}
|
|
.chip:hover, .icon-btn:hover, .textish:hover, .ghost:hover { border-color: #b7d7c8; background: var(--green-soft); }
|
|
.chip:disabled, .send:disabled, .ghost:disabled, .textish:disabled, textarea:disabled, input:disabled, select:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.turn {
|
|
flex: none;
|
|
width: 100%;
|
|
border: 1px solid var(--line);
|
|
background: var(--paper);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
}
|
|
.question {
|
|
padding: 14px 16px 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
background:
|
|
linear-gradient(90deg, rgba(184, 67, 36, 0.08), transparent 28%),
|
|
var(--paper-2);
|
|
}
|
|
.question p {
|
|
margin-top: 4px;
|
|
font-family: var(--serif);
|
|
font-size: 20px;
|
|
line-height: 1.45;
|
|
}
|
|
.label {
|
|
font-size: 11px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--gold);
|
|
}
|
|
.answer-row {
|
|
display: grid;
|
|
min-height: 30em;
|
|
grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr);
|
|
align-items: stretch;
|
|
}
|
|
.answer, .slices { padding: 14px 16px 16px; min-width: 0; }
|
|
.answer { min-height: 0; }
|
|
.slices {
|
|
background: #fbf6ee;
|
|
border-left: 1px solid var(--line);
|
|
/* 行高由回答撑开。height: 0 让切片不参与算高，min-height: 100% 再铺满这一行并在内部滚动。 */
|
|
height: 0;
|
|
min-height: 100%;
|
|
overflow: auto;
|
|
}
|
|
.answer-body {
|
|
margin-top: 8px;
|
|
font-family: var(--serif);
|
|
font-size: 16.5px;
|
|
line-height: 1.8;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.answer-foot, .quiet, .hint, .slice-meta, .doc-preview, .warn {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.55;
|
|
}
|
|
.answer-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
|
|
.tag {
|
|
border-radius: 999px;
|
|
padding: 2px 8px;
|
|
background: var(--green-soft);
|
|
color: var(--green-deep);
|
|
}
|
|
.tag.is-extract { background: #f8ead7; color: var(--gold); }
|
|
.warn {
|
|
margin: 8px 0 0;
|
|
color: var(--cinnabar);
|
|
}
|
|
.cite {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin: 0 2px;
|
|
padding: 0 6px;
|
|
height: 22px;
|
|
border-radius: 999px;
|
|
background: var(--green-soft);
|
|
color: var(--green-deep);
|
|
border-color: #b7d7c8;
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
vertical-align: 1px;
|
|
}
|
|
.cite:hover, .cite.is-on { background: var(--green); color: white; border-color: var(--green); }
|
|
|
|
.slices-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
align-items: baseline;
|
|
margin-bottom: 10px;
|
|
}
|
|
.slices-head h3 { font-size: 14px; font-weight: 600; }
|
|
.slice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
|
|
.slice {
|
|
border: 1px solid var(--line);
|
|
background: var(--paper);
|
|
border-radius: 12px;
|
|
padding: 10px 10px 11px;
|
|
}
|
|
.slice.is-active { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
|
|
.slice-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
|
|
.slice-no {
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 12px;
|
|
color: var(--cinnabar);
|
|
font-weight: 650;
|
|
}
|
|
.bar {
|
|
flex: 1;
|
|
height: 4px;
|
|
border-radius: 999px;
|
|
background: #efe4d4;
|
|
overflow: hidden;
|
|
}
|
|
.bar span { display: block; height: 100%; background: var(--cinnabar); border-radius: inherit; }
|
|
.slice-title { margin-top: 6px; font-size: 13px; font-weight: 600; }
|
|
.slice-text {
|
|
margin: 4px 0 0;
|
|
font-size: 13px;
|
|
line-height: 1.65;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.pending {
|
|
height: 12px;
|
|
margin-top: 12px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg, #f3eadc, #e7f3ec, #f3eadc);
|
|
background-size: 200% 100%;
|
|
animation: sheen 1.1s linear infinite;
|
|
}
|
|
.pending.short { width: 46%; }
|
|
@keyframes sheen { to { background-position: -200% 0; } }
|
|
|
|
.composer { border-top: 1px solid var(--line); padding: 12px; background: rgba(255, 250, 242, 0.92); }
|
|
textarea, input[type="text"], input:not([type="file"]), select {
|
|
width: 100%;
|
|
border: 1px solid var(--line);
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
outline: none;
|
|
}
|
|
textarea { resize: vertical; line-height: 1.55; }
|
|
textarea:focus, input:focus, select:focus { border-color: #8fbfa8; }
|
|
.composer textarea { min-height: 64px; }
|
|
.composer-bar, .doc-actions { display: flex; align-items: center; gap: 10px; }
|
|
.composer-bar { margin-top: 8px; }
|
|
.hint { margin-right: auto; }
|
|
.topk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
|
|
.topk select { width: auto; padding: 6px 8px; border-radius: 10px; }
|
|
.send, .ghost {
|
|
border-radius: 12px;
|
|
padding: 9px 16px;
|
|
background: var(--green);
|
|
color: white;
|
|
border-color: var(--green-deep);
|
|
}
|
|
.ghost { background: transparent; color: var(--green-deep); }
|
|
.textish { background: transparent; padding: 8px 10px; }
|
|
|
|
.library { display: flex; flex-direction: column; overflow: hidden; }
|
|
.library-head, .doc-form { padding: 14px 14px 0; }
|
|
.library-head h2 { font-family: var(--serif); font-size: 22px; font-weight: 600; margin-top: 2px; }
|
|
.library-head .quiet { margin-top: 8px; }
|
|
.facts { display: grid; grid-template-columns: 72px 1fr; gap: 4px 8px; margin: 12px 0 0; font-size: 12px; }
|
|
.facts dt { color: var(--muted); }
|
|
.facts dd { margin: 0; }
|
|
.doc-form { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
|
|
.doc-form label, .sr { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
|
|
.sr {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
}
|
|
.doc-actions { margin: 2px 0 12px; }
|
|
.doc-list { flex: 1; overflow: auto; padding: 0 10px 12px; display: flex; flex-direction: column; gap: 8px; }
|
|
.doc {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 4px 8px;
|
|
padding: 10px;
|
|
border-radius: 12px;
|
|
background: var(--paper-2);
|
|
}
|
|
.doc-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.doc-preview { grid-column: 1 / -1; }
|
|
.icon-btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
color: var(--cinnabar);
|
|
}
|
|
.empty-docs { padding: 8px 6px 12px; }
|
|
|
|
.toast {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 22px;
|
|
transform: translateX(-50%) translateY(12px);
|
|
background: var(--ink);
|
|
color: #f6f0e4;
|
|
padding: 10px 14px;
|
|
border-radius: 999px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
max-width: min(520px, calc(100% - 32px));
|
|
}
|
|
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
|
|
|
|
@media (max-width: 980px) {
|
|
.app { height: auto; min-height: 100vh; }
|
|
.top, .workspace, .answer-row { grid-template-columns: 1fr; }
|
|
.pills { justify-content: flex-start; }
|
|
.workspace { display: flex; flex-direction: column; }
|
|
.chat { min-height: 70vh; }
|
|
.library { min-height: 520px; }
|
|
.slices {
|
|
height: auto;
|
|
min-height: 0;
|
|
overflow: visible;
|
|
border-left: 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.pending { animation: none; }
|
|
.toast { transition: none; }
|
|
}
|