Clean up project structure
This commit is contained in:
373
brittle-ui/style.css
Normal file
373
brittle-ui/style.css
Normal file
@@ -0,0 +1,373 @@
|
||||
/* ── Reset / base ─────────────────────────────────────────────────────────── */
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #1e1e2e;
|
||||
--bg-surface: #24243a;
|
||||
--bg-overlay: #2e2e44;
|
||||
--border: #3a3a55;
|
||||
--accent: #7c6af7;
|
||||
--accent-dim: #5a4dcc;
|
||||
--text: #cdd6f4;
|
||||
--text-muted: #7f849c;
|
||||
--text-subtle: #585b70;
|
||||
--cursor-bg: #3a3a70;
|
||||
--cursor-fg: #ffffff;
|
||||
--focused-ring: #7c6af7;
|
||||
--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
|
||||
--font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
--radius: 4px;
|
||||
--tab-h: 32px;
|
||||
--cmd-h: 28px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ul { list-style: none; }
|
||||
|
||||
/* ── App shell ────────────────────────────────────────────────────────────── */
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── Tab bar ──────────────────────────────────────────────────────────────── */
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: var(--tab-h);
|
||||
background: var(--bg-surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 4px;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
border-radius: var(--radius) var(--radius) 0 0;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tab:hover { color: var(--text); background: var(--bg-overlay); }
|
||||
|
||||
.tab.tab-active {
|
||||
color: var(--text);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
.tab-pdf { cursor: pointer; }
|
||||
|
||||
.tab-label { pointer-events: none; }
|
||||
|
||||
.tab-close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s, background 0.1s;
|
||||
}
|
||||
|
||||
.tab-pdf:hover .tab-close { opacity: 1; }
|
||||
.tab-close:hover { background: var(--bg-overlay); color: var(--text); }
|
||||
|
||||
/* ── Three-pane library layout ────────────────────────────────────────────── */
|
||||
|
||||
.lib-tab {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.pane:last-child { border-right: none; }
|
||||
|
||||
.pane-left { width: 220px; flex-shrink: 0; }
|
||||
.pane-center { flex: 1; min-width: 0; }
|
||||
.pane-right { width: 300px; flex-shrink: 0; }
|
||||
|
||||
.pane-focused { outline: 1px solid var(--focused-ring); outline-offset: -1px; }
|
||||
|
||||
/* ── Library tree pane ────────────────────────────────────────────────────── */
|
||||
|
||||
.tree-pane {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.tree-list { padding: 0; }
|
||||
|
||||
.tree-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 3px 8px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tree-item:hover { background: var(--bg-overlay); }
|
||||
|
||||
.tree-item.tree-cursor {
|
||||
background: var(--cursor-bg);
|
||||
color: var(--cursor-fg);
|
||||
}
|
||||
|
||||
.tree-icon {
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
width: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tree-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ── Publication list pane ────────────────────────────────────────────────── */
|
||||
|
||||
.pub-list-pane {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.pub-list { padding: 4px 0; }
|
||||
|
||||
.pub-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--border);
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.pub-item:hover { background: var(--bg-overlay); }
|
||||
|
||||
.pub-item.pub-cursor {
|
||||
background: var(--cursor-bg);
|
||||
color: var(--cursor-fg);
|
||||
}
|
||||
|
||||
.pub-item.pub-cursor .pub-meta { color: rgba(255,255,255,0.6); }
|
||||
.pub-item.pub-cursor .pub-type { color: rgba(255,255,255,0.7); }
|
||||
|
||||
.pub-type {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pub-title {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.pub-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ── Publication detail pane ──────────────────────────────────────────────── */
|
||||
|
||||
.pub-detail-pane {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 10px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.detail-fields {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 4px 12px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.detail-fields dt {
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.detail-fields dd {
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
word-break: break-word;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.detail-timestamps {
|
||||
margin-top: 12px;
|
||||
font-size: 10px;
|
||||
color: var(--text-subtle);
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ── Empty state ──────────────────────────────────────────────────────────── */
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--text-subtle);
|
||||
font-size: 12px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Command / search bar ─────────────────────────────────────────────────── */
|
||||
|
||||
.command-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--cmd-h);
|
||||
background: var(--bg-surface);
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 0 8px;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.command-prefix {
|
||||
color: var(--accent);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.command-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
caret-color: var(--accent);
|
||||
}
|
||||
|
||||
.command-status {
|
||||
color: #f38ba8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ── PDF viewer frame ─────────────────────────────────────────────────────── */
|
||||
|
||||
.pdf-frame {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Drag-and-drop ────────────────────────────────────────────────────────── */
|
||||
|
||||
/* Suppress pointer events on text spans inside tree rows so that
|
||||
dragleave / dragover never fire on child elements — avoids highlight flicker
|
||||
when the cursor moves between the icon and the label inside one row. */
|
||||
.tree-icon,
|
||||
.tree-name { pointer-events: none; }
|
||||
|
||||
/* Publication items are drag sources. */
|
||||
.pub-item[draggable="true"] { cursor: grab; }
|
||||
.pub-item[draggable="true"]:active { cursor: grabbing; }
|
||||
|
||||
/* Library tree rows highlighted as drop targets. */
|
||||
.tree-item.tree-drop-target {
|
||||
background: var(--accent-dim);
|
||||
color: var(--cursor-fg);
|
||||
outline: 1px dashed var(--accent);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
/* ── Light theme (Catppuccin Latte) ──────────────────────────────────────── */
|
||||
|
||||
[data-theme="light"] {
|
||||
--bg: #eff1f5;
|
||||
--bg-surface: #e6e9ef;
|
||||
--bg-overlay: #dce0e8;
|
||||
--border: #ccd0da;
|
||||
--accent: #7287fd;
|
||||
--accent-dim: #5c6bc0;
|
||||
--text: #4c4f69;
|
||||
--text-muted: #8c8fa1;
|
||||
--text-subtle: #acb0be;
|
||||
--cursor-bg: #7287fd;
|
||||
--cursor-fg: #eff1f5;
|
||||
--focused-ring: #7287fd;
|
||||
}
|
||||
|
||||
/* ── Scrollbar (WebKit) ───────────────────────────────────────────────────── */
|
||||
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }
|
||||
Reference in New Issue
Block a user