feat(28-01): add mode-aware CSS for content area and header context

- Section 13: .paperforge-content-area with switching opacity transition
- Section 13: .paperforge-content-placeholder with dashed border styling
- Section 14: .paperforge-mode-context with flex layout
- Section 14: .paperforge-mode-badge with 3 color states (global/paper/collection)
- Section 14: .paperforge-mode-name with text-overflow ellipsis truncation
- Section 14: .paperforge-mode-warning using var(--text-warning)
This commit is contained in:
Research Assistant 2026-05-04 14:58:19 +08:00
parent d94d3c1eff
commit 7bde882947

View file

@ -1046,3 +1046,83 @@
.paperforge-bar-chart .bar-fill.stage-fulltext-ready { background: var(--color-green); }
.paperforge-bar-chart .bar-fill.stage-deep-read { background: var(--color-yellow); }
.paperforge-bar-chart .bar-fill.stage-ai-ready { background: var(--color-red); }
/* ==========================================================================
SECTION 13 Mode-Aware Content Area
========================================================================== */
.paperforge-content-area {
display: flex;
flex-direction: column;
gap: 24px;
transition: opacity 0.2s ease;
}
.paperforge-content-area.switching {
opacity: 0.4;
pointer-events: none;
}
.paperforge-content-placeholder {
text-align: center;
padding: 32px 12px;
color: var(--text-muted);
font-size: var(--font-ui-small);
border: 1px dashed var(--background-modifier-border);
border-radius: var(--radius-m);
background: var(--background-secondary);
font-style: italic;
}
/* ==========================================================================
SECTION 14 Mode-Aware Header Context
========================================================================== */
.paperforge-mode-context {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}
.paperforge-mode-badge {
font-size: 10px;
font-weight: var(--font-semibold);
padding: 2px 8px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.4;
flex-shrink: 0;
}
.paperforge-mode-badge.global {
background: var(--interactive-accent);
color: var(--text-on-accent);
}
.paperforge-mode-badge.paper {
background: var(--color-cyan);
color: var(--text-on-accent);
}
.paperforge-mode-badge.collection {
background: var(--color-purple);
color: var(--text-on-accent);
}
.paperforge-mode-name {
font-size: var(--font-ui-small);
font-weight: var(--font-semibold);
color: var(--text-normal);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
line-height: 1.3;
}
.paperforge-mode-warning {
font-size: var(--font-ui-smaller);
color: var(--text-warning);
margin-left: auto;
}