feat: wire approved archive-room prototype styling into React components
Adds frontend/src/styles.css extracted from the confirmed prototype (paper/ink/pine palette, Fraunces/Inter/IBM Plex Mono type system, catalog-tag motif) and makes the minimal JSX adjustments needed for each component to pick up the styling: wordmark heading, search icon, upload button icon + modal header/footer, folder chevrons + file icons, doc-path + save-status in the editor, catalog tags and no-results treatment in search results. Also adds .gitignore (venv/node_modules/dist/pycache) and commits the frontend package-lock.json that was previously untracked.
This commit is contained in:
parent
7e218b5738
commit
911d814a2f
12
.gitignore
vendored
Normal file
12
.gitignore
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
# Python
|
||||
__pycache__/
|
||||
*.pyc
|
||||
.venv/
|
||||
venv/
|
||||
|
||||
# Node
|
||||
node_modules/
|
||||
dist/
|
||||
|
||||
# Editor
|
||||
.DS_Store
|
||||
3559
frontend/package-lock.json
generated
Normal file
3559
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -57,7 +57,9 @@ export default function App() {
|
||||
return (
|
||||
<div className="app">
|
||||
<div className="topbar">
|
||||
<h1>DocHub</h1>
|
||||
<h1 className="wordmark" aria-label="DocHub">
|
||||
DocHub <span className="subtitle">档案 · 检索</span>
|
||||
</h1>
|
||||
<SearchBar value={searchQuery} onQueryChange={handleQueryChange} onResults={handleResults} />
|
||||
<UploadButton path={uploadPath} onUploaded={handleUploaded} />
|
||||
</div>
|
||||
@ -67,13 +69,21 @@ export default function App() {
|
||||
{selectedKey ? (
|
||||
<DocumentEditor documentKey={selectedKey} onDirtyChange={setIsDirty} />
|
||||
) : (
|
||||
<div data-testid="empty-state">未选择文档</div>
|
||||
<div className="empty-state" data-testid="empty-state">
|
||||
未选择文档
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{searchQuery !== '' && !isSearching && (
|
||||
<div className="search-overlay">
|
||||
<SearchResults query={searchQuery} results={searchResults} onJumpToResult={handleJumpToResult} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="statusbar">
|
||||
<span>DOCHUB</span>
|
||||
<span>UTF-8</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -68,20 +68,30 @@ export default function DocumentEditor({ documentKey, onDirtyChange }: DocumentE
|
||||
return (
|
||||
<div data-testid="document-editor">
|
||||
<div className="doc-header">
|
||||
<span data-testid="save-status">{isDirty ? '未保存' : '已归档'}</span>
|
||||
<button onClick={handleSave} disabled={!isDirty || saving}>
|
||||
{saving ? '保存中…' : '保存'}
|
||||
</button>
|
||||
<div className="doc-path">
|
||||
<span className="current">{documentKey}</span>
|
||||
</div>
|
||||
<div className="doc-actions">
|
||||
<span className={isDirty ? 'save-status dirty' : 'save-status saved'} data-testid="save-status">
|
||||
<span className="dot" />
|
||||
{isDirty ? '未保存' : '已归档'}
|
||||
</span>
|
||||
{saveError && (
|
||||
<span data-testid="save-error">
|
||||
<span className="save-error" data-testid="save-error">
|
||||
{saveError}
|
||||
<button onClick={() => setSaveError(null)} aria-label="关闭错误提示">
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
<button className="btn-save" onClick={handleSave} disabled={!isDirty || saving}>
|
||||
{saving ? '保存中…' : '保存'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="editor-area">
|
||||
<Editor value={content} onChange={handleChange} language={contentType === 'text/markdown' ? 'markdown' : 'html'} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -49,10 +49,14 @@ function FileRow({
|
||||
return (
|
||||
<div
|
||||
data-testid={`file-${file.key}`}
|
||||
className={selectedKey === file.key ? 'file-row active' : 'file-row'}
|
||||
className={selectedKey === file.key ? 'tree-item file-row active' : 'tree-item file-row'}
|
||||
onClick={() => onSelectFile(file.key)}
|
||||
>
|
||||
{file.name}
|
||||
<svg className="file-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
|
||||
<path d="M14 2v6h6" />
|
||||
</svg>
|
||||
<span className="filename">{file.name}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -86,7 +90,12 @@ function FolderNode({
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div data-testid={`folder-${path}`} className="folder" onClick={toggle}>
|
||||
<div data-testid={`folder-${path}`} className="tree-item folder" onClick={toggle}>
|
||||
<span className={expanded ? 'chevron open' : 'chevron'}>
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</span>
|
||||
{name}
|
||||
</div>
|
||||
{expanded && (
|
||||
|
||||
@ -40,6 +40,11 @@ export default function SearchBar({ value, onQueryChange, onResults, debounceMs
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="search-box">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="11" cy="11" r="7" />
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="检索全部文档内容…"
|
||||
@ -47,5 +52,6 @@ export default function SearchBar({ value, onQueryChange, onResults, debounceMs
|
||||
onChange={handleChange}
|
||||
aria-label="搜索文档"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -8,20 +8,34 @@ interface SearchResultsProps {
|
||||
|
||||
export default function SearchResults({ results, query, onJumpToResult }: SearchResultsProps) {
|
||||
if (results.length === 0) {
|
||||
return <div data-testid="search-no-results">没有找到匹配的文档</div>;
|
||||
return (
|
||||
<div className="no-results" data-testid="search-no-results">
|
||||
<span className="serif">没有找到匹配的文档</span>
|
||||
换个关键词试试，或检查拼写
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div data-testid="search-results">
|
||||
<div data-testid="search-results-count">
|
||||
{results.length} 条与「{query}」相关的结果
|
||||
<div className="search-results-header" data-testid="search-results-count">
|
||||
<span className="big-count">{results.length}</span> 条与「{query}」相关的结果
|
||||
</div>
|
||||
{results.map((result) => (
|
||||
<div key={result.key} data-testid={`search-result-${result.key}`} onClick={() => onJumpToResult(result.key)}>
|
||||
<div className="result-title">{result.title}</div>
|
||||
<div className="result-path">{result.path}</div>
|
||||
<div
|
||||
key={result.key}
|
||||
className="result-item"
|
||||
data-testid={`search-result-${result.key}`}
|
||||
onClick={() => onJumpToResult(result.key)}
|
||||
>
|
||||
<span className="catalog-tag">{result.path}</span>
|
||||
<div className="result-body">
|
||||
<div className="result-path">
|
||||
<span className="result-title">{result.title}</span>
|
||||
</div>
|
||||
<div className="result-snippet" dangerouslySetInnerHTML={{ __html: result.snippet }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -61,10 +61,27 @@ export default function UploadButton({ path, onUploaded }: UploadButtonProps) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={openModal}>上传文档</button>
|
||||
<button className="upload-btn" onClick={openModal}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M12 3v12" />
|
||||
<path d="M6 9l6-6 6 6" />
|
||||
<path d="M4 21h16" />
|
||||
</svg>
|
||||
上传文档
|
||||
</button>
|
||||
{isOpen && (
|
||||
<div className="modal-backdrop show" data-testid="upload-modal">
|
||||
<div className="modal">
|
||||
<div className="modal-header">
|
||||
<h3>上传文档</h3>
|
||||
<button className="modal-close" onClick={closeModal} aria-label="关闭">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div
|
||||
className={isDragOver ? 'dropzone dragover' : 'dropzone'}
|
||||
data-testid="dropzone"
|
||||
@ -73,9 +90,19 @@ export default function UploadButton({ path, onUploaded }: UploadButtonProps) {
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
>
|
||||
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
|
||||
<path d="M12 3v12" />
|
||||
<path d="M6 9l6-6 6 6" />
|
||||
<path d="M4 21h16" />
|
||||
</svg>
|
||||
拖拽文件到此处，或点击选择
|
||||
<div className="hint">支持 .md .html 及常见图片格式</div>
|
||||
</div>
|
||||
{uploadError && <div data-testid="upload-error">{uploadError}</div>}
|
||||
{uploadError && (
|
||||
<div className="upload-error" data-testid="upload-error">
|
||||
{uploadError}
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
@ -84,7 +111,12 @@ export default function UploadButton({ path, onUploaded }: UploadButtonProps) {
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileInputChange}
|
||||
/>
|
||||
<button onClick={closeModal}>取消</button>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button className="btn-secondary" onClick={closeModal}>
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
import './styles.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
|
||||
618
frontend/src/styles.css
Normal file
618
frontend/src/styles.css
Normal file
@ -0,0 +1,618 @@
|
||||
:root {
|
||||
--paper: #faf9f6;
|
||||
--paper-alt: #f1efe6;
|
||||
--ink: #1b1b18;
|
||||
--ash: #86847c;
|
||||
--ash-faint: #b3b0a5;
|
||||
--rule: #e4e1d8;
|
||||
--pine: #2f5d50;
|
||||
--pine-deep: #234840;
|
||||
--pine-soft: #e7efec;
|
||||
--amber: #e8a33d;
|
||||
--amber-soft: #fbead0;
|
||||
--radius: 6px;
|
||||
--shadow: 0 12px 36px rgba(27, 27, 24, 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', -apple-system, 'PingFang SC', sans-serif;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.serif {
|
||||
font-family: 'Fraunces', serif;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'IBM Plex Mono', Consolas, monospace;
|
||||
}
|
||||
|
||||
.catalog-tag {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 10.5px;
|
||||
color: var(--pine);
|
||||
background: var(--pine-soft);
|
||||
border: 1px solid rgba(47, 93, 80, 0.18);
|
||||
border-radius: 4px;
|
||||
padding: 1px 6px;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.02em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.app {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ---------- Top bar ---------- */
|
||||
.topbar {
|
||||
height: 58px;
|
||||
background: var(--paper);
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 22px;
|
||||
gap: 22px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wordmark {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
font-size: 19px;
|
||||
color: var(--ink);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wordmark .subtitle {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-style: normal;
|
||||
font-size: 10px;
|
||||
color: var(--ash);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
flex: 1;
|
||||
max-width: 540px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
background: var(--paper-alt);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: var(--radius);
|
||||
color: var(--ink);
|
||||
padding: 9px 14px 9px 38px;
|
||||
font-size: 13px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
outline: none;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.search-box input::placeholder {
|
||||
color: var(--ash-faint);
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.search-box input:focus {
|
||||
border-color: var(--pine);
|
||||
background: var(--paper);
|
||||
box-shadow: 0 0 0 3px var(--pine-soft);
|
||||
}
|
||||
|
||||
.search-box svg {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--ash);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
margin-left: auto;
|
||||
background: var(--pine);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
padding: 9px 16px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
font-family: 'Inter', sans-serif;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.upload-btn:hover {
|
||||
background: var(--pine-deep);
|
||||
}
|
||||
|
||||
/* ---------- Body layout ---------- */
|
||||
.body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ---------- Sidebar ---------- */
|
||||
.sidebar {
|
||||
width: 272px;
|
||||
background: var(--paper-alt);
|
||||
border-right: 1px solid var(--rule);
|
||||
overflow-y: auto;
|
||||
padding: 16px 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
padding: 4px 10px 12px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sidebar-title .count {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
color: var(--ash);
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 7px 10px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
white-space: nowrap;
|
||||
border-radius: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tree-item:hover {
|
||||
background: rgba(27, 27, 24, 0.045);
|
||||
}
|
||||
|
||||
.tree-item.file-row.active {
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 1px var(--rule);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tree-item.folder {
|
||||
color: var(--ash);
|
||||
font-weight: 500;
|
||||
font-size: 11.5px;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tree-children {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
display: inline-flex;
|
||||
transition: transform 0.15s ease;
|
||||
color: var(--ash-faint);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chevron.open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.file-row {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.file-row .filename {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
color: var(--ash);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ---------- Main ---------- */
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--ash-faint);
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.doc-header {
|
||||
height: 54px;
|
||||
background: var(--paper);
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.doc-path {
|
||||
color: var(--ash);
|
||||
font-size: 12.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.doc-path .sep {
|
||||
color: var(--ash-faint);
|
||||
}
|
||||
|
||||
.doc-path .current {
|
||||
color: var(--ink);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.doc-actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.save-status {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--ash-faint);
|
||||
margin-right: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.save-status .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--ash-faint);
|
||||
}
|
||||
|
||||
.save-status.dirty {
|
||||
color: #a9762a;
|
||||
}
|
||||
|
||||
.save-status.dirty .dot {
|
||||
background: var(--amber);
|
||||
}
|
||||
|
||||
.save-status.saved {
|
||||
color: var(--pine);
|
||||
}
|
||||
|
||||
.save-status.saved .dot {
|
||||
background: var(--pine);
|
||||
}
|
||||
|
||||
.save-error {
|
||||
font-size: 11.5px;
|
||||
color: #a9401f;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.save-error button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background: var(--pine);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 7px 15px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: 'Inter', sans-serif;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.btn-save:hover {
|
||||
background: var(--pine-deep);
|
||||
}
|
||||
|
||||
.btn-save:disabled {
|
||||
background: var(--ash-faint);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--ash);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 5px;
|
||||
padding: 7px 15px;
|
||||
font-size: 12px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--paper-alt);
|
||||
}
|
||||
|
||||
.editor-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.editor-area > section {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ---------- Search overlay ---------- */
|
||||
.search-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--paper);
|
||||
z-index: 10;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.search-results-header {
|
||||
padding: 24px 30px 12px;
|
||||
color: var(--ash);
|
||||
font-size: 12.5px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-results-header .big-count {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.result-item {
|
||||
padding: 16px 30px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.result-item:hover {
|
||||
background: var(--paper-alt);
|
||||
}
|
||||
|
||||
.result-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.result-path {
|
||||
font-size: 12px;
|
||||
color: var(--ash);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.result-snippet {
|
||||
font-size: 12.5px;
|
||||
color: var(--ash);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.result-snippet em {
|
||||
background: var(--amber-soft);
|
||||
color: #8a5a12;
|
||||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
padding: 60px 30px;
|
||||
text-align: center;
|
||||
color: var(--ash-faint);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.no-results .serif {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: var(--ash);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* ---------- Status bar ---------- */
|
||||
.statusbar {
|
||||
height: 28px;
|
||||
background: var(--paper-alt);
|
||||
border-top: 1px solid var(--rule);
|
||||
color: var(--ash);
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 10.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 18px;
|
||||
gap: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ---------- Upload modal ---------- */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(27, 27, 24, 0.32);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--paper);
|
||||
border-radius: 10px;
|
||||
width: 460px;
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 18px 22px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--ash);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
border: 1.5px dashed var(--rule);
|
||||
border-radius: var(--radius);
|
||||
padding: 36px 20px;
|
||||
text-align: center;
|
||||
color: var(--ash);
|
||||
font-size: 12.5px;
|
||||
transition: all 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropzone.dragover {
|
||||
border-color: var(--pine);
|
||||
background: var(--pine-soft);
|
||||
color: var(--pine-deep);
|
||||
}
|
||||
|
||||
.dropzone svg {
|
||||
display: block;
|
||||
margin: 0 auto 12px;
|
||||
color: var(--ash-faint);
|
||||
}
|
||||
|
||||
.dropzone.dragover svg {
|
||||
color: var(--pine);
|
||||
}
|
||||
|
||||
.dropzone .hint {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 10.5px;
|
||||
color: var(--ash-faint);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.upload-error {
|
||||
margin-top: 12px;
|
||||
padding: 10px 12px;
|
||||
background: #fdece6;
|
||||
color: #a9401f;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 14px 22px;
|
||||
border-top: 1px solid var(--rule);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user