/* ========================================================================== PaperForge — Obsidian Plugin Styles A clean dashboard for literature pipeline monitoring & control. ========================================================================== */ /* ── Root Panel ── */ .paperforge-status-panel { padding: 20px; height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; } /* ========================================================================== SECTION 1 — Header ========================================================================== */ .paperforge-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .paperforge-header-left { display: flex; align-items: center; gap: 10px; } .paperforge-header-logo { width: 28px; height: 28px; border-radius: var(--radius-s); background: var(--interactive-accent); color: var(--text-on-accent); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: var(--font-bold); flex-shrink: 0; } .paperforge-header-title { font-size: var(--font-ui-medium); font-weight: var(--font-semibold); color: var(--text-normal); margin: 0; line-height: 1; } .paperforge-header-badge { font-size: 11px; font-weight: var(--font-medium); padding: 2px 8px; border-radius: 10px; background: var(--background-secondary); color: var(--text-muted); border: 1px solid var(--background-modifier-border); line-height: 1.4; } .paperforge-header-refresh { width: 28px; height: 28px; padding: 0; cursor: pointer; background: transparent; color: var(--text-muted); border: none; border-radius: var(--radius-s); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background 0.15s, color 0.15s, transform 0.3s; } .paperforge-header-refresh:hover { background: var(--background-modifier-hover); color: var(--text-normal); } .paperforge-header-refresh:active { transform: rotate(180deg); } /* ========================================================================== SECTION 2 — Metric Cards ========================================================================== */ .paperforge-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; } .paperforge-metric-card { background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); padding: 16px 12px 14px; text-align: center; position: relative; overflow: hidden; transition: border-color 0.15s, opacity 0.3s; } .paperforge-metric-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--metric-color, var(--interactive-accent)); border-radius: 0 2px 2px 0; } .paperforge-metric-card:hover { border-color: var(--interactive-accent); } .paperforge-metric-value { font-size: clamp(18px, 4vw, 28px); font-weight: var(--font-bold); line-height: 1.1; color: var(--text-normal); letter-spacing: -0.5px; transition: opacity 0.3s; } .paperforge-metric-label { font-size: var(--font-ui-smaller); color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: var(--font-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Optional progress bar inside metric card (D-05) */ .paperforge-metric-progress { margin-top: 10px; height: 4px; border-radius: 2px; background: var(--background-modifier-border); overflow: hidden; } .paperforge-metric-progress-fill { height: 100%; border-radius: 2px; background: var(--metric-color, var(--interactive-accent)); transition: width 0.3s; } /* ========================================================================== SECTION 3 — OCR Pipeline ========================================================================== */ .paperforge-ocr-section { background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); padding: 16px; } .paperforge-ocr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .paperforge-ocr-title { font-size: var(--font-ui-small); font-weight: var(--font-semibold); color: var(--text-normal); margin: 0; text-transform: uppercase; letter-spacing: 0.5px; } .paperforge-ocr-badge { font-size: 11px; font-weight: var(--font-semibold); padding: 3px 10px; border-radius: 10px; line-height: 1.4; } .paperforge-ocr-badge.idle { background: var(--background-modifier-hover); color: var(--text-muted); } .paperforge-ocr-badge.active { background: var(--color-blue); color: var(--text-on-accent); } .paperforge-progress-track { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--background-modifier-border); gap: 2px; } .paperforge-progress-seg { height: 100%; transition: width 0.5s ease; min-width: 0; } .paperforge-progress-seg:first-child { border-radius: 5px 0 0 5px; } .paperforge-progress-seg:last-child { border-radius: 0 5px 5px 0; } .paperforge-progress-seg:only-child { border-radius: 5px; } .paperforge-progress-seg.pending { background: var(--text-faint); } .paperforge-progress-seg.active { background: var(--color-blue); animation: paperforge-pulse 1.5s ease-in-out infinite; } .paperforge-progress-seg.done { background: var(--color-green); } .paperforge-progress-seg.failed { background: var(--text-error); } @keyframes paperforge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .paperforge-ocr-counts { display: flex; justify-content: space-between; margin-top: 12px; gap: 4px; } .paperforge-ocr-count { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; } .paperforge-ocr-count-value { font-size: var(--font-ui-medium); font-weight: var(--font-bold); color: var(--text-normal); line-height: 1.2; } .paperforge-ocr-count-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; } .paperforge-ocr-empty { text-align: center; padding: 24px 12px; color: var(--text-muted); font-size: var(--font-ui-small); } /* ========================================================================== SECTION 4 — Quick Actions ========================================================================== */ .paperforge-actions-section { display: flex; flex-direction: column; gap: 10px; } .paperforge-actions-title { font-size: var(--font-ui-small); font-weight: var(--font-semibold); color: var(--text-normal); margin: 0; text-transform: uppercase; letter-spacing: 0.5px; } .paperforge-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .paperforge-action-card { background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); padding: 14px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; display: flex; flex-direction: column; gap: 6px; position: relative; } .paperforge-action-card:hover { background: var(--background-modifier-hover); border-color: var(--interactive-accent); } .paperforge-action-card:active { transform: scale(0.98); } .paperforge-action-card.running { opacity: 0.6; pointer-events: none; } .paperforge-action-card-icon { font-size: 18px; color: var(--interactive-accent); line-height: 1; } .paperforge-action-card-title { font-size: var(--font-ui-small); font-weight: var(--font-semibold); color: var(--text-normal); line-height: 1.3; } .paperforge-action-card-desc { font-size: var(--font-ui-smaller); color: var(--text-muted); line-height: 1.4; } .paperforge-action-card-hint { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; align-self: flex-end; } /* ========================================================================== Misc ========================================================================== */ .paperforge-message { padding: 8px 12px; border-radius: var(--radius-s); font-size: var(--font-ui-smaller); line-height: 1.4; display: none; word-break: break-word; } .paperforge-message.msg-running { display: block; background: var(--background-secondary); border: 1px solid var(--color-blue); color: var(--color-blue); } .paperforge-message.msg-ok { display: block; background: color-mix(in srgb, var(--color-green) 8%, var(--background-secondary)); border: 1px solid var(--color-green); color: var(--color-green); } .paperforge-message.msg-error { display: block; background: color-mix(in srgb, var(--text-error) 8%, var(--background-secondary)); border: 1px solid var(--text-error); color: var(--text-error); } .paperforge-status-error { color: var(--text-error); font-size: var(--font-ui-small); padding: 12px; background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); text-align: center; } .paperforge-status-loading { text-align: center; padding: 24px 12px; color: var(--text-muted); font-size: var(--font-ui-small); } /* ========================================================================== SECTION 5 — Settings Tab: Guide & Summary ========================================================================== */ .paperforge-settings-desc { font-size: var(--font-ui-smaller); color: var(--text-muted); line-height: 1.6; margin: 8px 0 16px; padding: 10px 14px; background: var(--background-secondary); border-radius: var(--radius-m); border: 1px solid var(--background-modifier-border); } .paperforge-guide { margin: 8px 0 16px; } .paperforge-guide-item { padding: 8px 14px; margin-bottom: 6px; background: var(--background-secondary); border-radius: var(--radius-s); border: 1px solid var(--background-modifier-border); font-size: var(--font-ui-small); line-height: 1.5; } .paperforge-setup-bar { margin: 8px 0 12px; padding: 10px 14px; border-radius: var(--radius-m); font-size: var(--font-ui-small); border: 1px solid var(--background-modifier-border); } .paperforge-setup-label { font-weight: var(--font-semibold); } .paperforge-setup-done { color: var(--color-green); } .paperforge-setup-pending { color: var(--text-muted); } .paperforge-summary { margin: 8px 0; border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); overflow: hidden; } .paperforge-summary-row { display: flex; flex-wrap: wrap; align-items: baseline; padding: 6px 14px; font-size: var(--font-ui-smaller); border-bottom: 1px solid var(--background-modifier-border); background: var(--background-primary); gap: 4px; } .paperforge-summary-row:last-child { border-bottom: none; } .paperforge-summary-label { flex: 0 0 auto; min-width: 80px; color: var(--text-muted); white-space: nowrap; } .paperforge-summary-value { flex: 1 1 200px; word-break: break-all; font-family: var(--font-monospace); font-size: 11px; } /* ========================================================================== SECTION 6 — Setup Wizard Modal ========================================================================== */ .paperforge-modal { padding: 0 20px 20px; } .paperforge-modal .paperforge-step-bar { display: flex; justify-content: center; gap: 0; margin: 20px 0 24px; padding: 0 10px; position: relative; } .paperforge-step-dot { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; position: relative; } .paperforge-step-dot::before { content: ''; position: absolute; top: 12px; left: -50%; right: 50%; height: 2px; background: var(--background-modifier-border); z-index: 0; } .paperforge-step-dot:first-child::before { display: none; } .paperforge-step-dot.done::before, .paperforge-step-dot.active::before { background: var(--interactive-accent); } .paperforge-step-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--font-bold); background: var(--background-secondary); border: 2px solid var(--background-modifier-border); color: var(--text-muted); z-index: 1; transition: all 0.2s; } .paperforge-step-dot.active .paperforge-step-num { background: var(--interactive-accent); border-color: var(--interactive-accent); color: var(--text-on-accent); } .paperforge-step-dot.done .paperforge-step-num { background: var(--color-green); border-color: var(--color-green); color: var(--text-on-accent); } .paperforge-step-label { font-size: 11px; color: var(--text-muted); } .paperforge-step-dot.active .paperforge-step-label { color: var(--text-normal); font-weight: var(--font-semibold); } .paperforge-step-dot.done .paperforge-step-label { color: var(--color-green); } .paperforge-step-content { min-height: 260px; margin-bottom: 20px; } .paperforge-step-content h2 { font-size: var(--font-ui-large); margin-bottom: 8px; } .paperforge-step-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--background-modifier-border); } .paperforge-step-btn { padding: 8px 20px; border-radius: var(--radius-m); font-size: var(--font-ui-small); cursor: pointer; border: 1px solid var(--background-modifier-border); background: var(--background-secondary); color: var(--text-normal); transition: background 0.15s; } .paperforge-step-btn:hover { background: var(--background-modifier-hover); } .paperforge-step-btn.mod-cta { background: var(--interactive-accent); color: var(--text-on-accent); border-color: var(--interactive-accent); } .paperforge-step-btn.mod-cta:hover { opacity: 0.9; } .paperforge-apikey-status { margin-left: 8px; font-size: var(--font-ui-smaller); } .paperforge-apikey-status.ok { color: var(--color-green); } .paperforge-apikey-status.error { color: var(--color-red); } .paperforge-modal-hint { font-size: var(--font-ui-smaller); color: var(--text-muted); margin-top: 12px; padding: 6px 10px; background: var(--background-secondary); border-radius: var(--radius-s); } /* ── Modal Form Fields ── */ .paperforge-modal-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; } .paperforge-modal-label { font-size: var(--font-ui-small); font-weight: var(--font-semibold); color: var(--text-normal); } .paperforge-modal-input { width: 100%; padding: 7px 10px; font-size: var(--font-ui-small); font-family: var(--font-monospace); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s); background: var(--background-primary); color: var(--text-normal); } .paperforge-modal-input:focus { border-color: var(--interactive-accent); outline: none; box-shadow: 0 0 0 1px var(--interactive-accent); } .paperforge-modal-input:disabled { opacity: 0.6; cursor: not-allowed; } .paperforge-modal-select { width: 100%; padding: 7px 10px; font-size: var(--font-ui-small); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s); background: var(--background-primary); color: var(--text-normal); cursor: pointer; } .paperforge-modal-select:focus { border-color: var(--interactive-accent); outline: none; } /* ── Step 1: Directory Tree ── */ .paperforge-dir-tree { margin: 16px 0; font-size: var(--font-ui-small); line-height: 1.8; font-family: var(--font-monospace); } .paperforge-dir-node.root { font-weight: var(--font-bold); padding: 6px 10px; background: var(--background-secondary); border-radius: var(--radius-s); border: 1px solid var(--background-modifier-border); margin-bottom: 4px; } .paperforge-dir-node.folder { padding: 4px 10px; color: var(--text-normal); } .paperforge-dir-node.file { padding: 3px 10px; color: var(--text-muted); } .paperforge-dir-children { padding-left: 24px; } /* ── Step 4: Install Log ── */ .paperforge-install-log { margin: 12px 0; padding: 14px; background: #1e1e1e; color: #d4d4d4; border-radius: var(--radius-m); font-family: var(--font-monospace); font-size: 12px; line-height: 1.6; max-height: 300px; overflow-y: auto; white-space: pre-wrap; } /* ── Step 5: Next Steps ── */ .paperforge-nextsteps { margin: 8px 0; } .paperforge-nextstep-item { padding: 8px 14px; margin-bottom: 6px; background: var(--background-secondary); border-radius: var(--radius-s); border: 1px solid var(--background-modifier-border); font-size: var(--font-ui-small); line-height: 1.5; } /* ── OCR Processing Animation ── */ .paperforge-processing .paperforge-progress-seg.pending { animation: paperforge-pulse 1.5s ease-in-out infinite; } @keyframes paperforge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ========================================================================== SECTION 7 — Loading Skeleton & Empty States ========================================================================== */ .paperforge-loading { position: relative; overflow: hidden; } .paperforge-loading > * { opacity: 0.6; pointer-events: none; } .paperforge-loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100% ); background-size: 200% 100%; animation: paperforge-shimmer 1.5s ease-in-out infinite; pointer-events: none; } @keyframes paperforge-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Dark mode adjustment: lighter shimmer is slightly dimmer */ .theme-dark .paperforge-loading::after { background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100% ); background-size: 200% 100%; } .paperforge-empty-state { text-align: center; padding: 24px 12px; color: var(--text-muted); font-size: var(--font-ui-small); font-style: italic; } /* ========================================================================== SECTION 9 — Lifecycle Stepper ========================================================================== */ .paperforge-lifecycle-stepper { display: flex; flex-direction: column; gap: 0; padding: 8px 0; position: relative; } .paperforge-lifecycle-stepper .step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; position: relative; min-height: 36px; } .paperforge-lifecycle-stepper .step-indicator { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--font-bold); position: relative; z-index: 1; background: var(--background-modifier-border); color: var(--text-muted); border: 2px solid var(--background-modifier-border); transition: background 0.2s, border-color 0.2s, color 0.2s; } /* Connecting line between steps via ::before on each step (D-09) */ .paperforge-lifecycle-stepper .step::before { content: ''; position: absolute; left: 22px; /* centers under the 24px indicator circle */ top: 32px; /* below the indicator */ bottom: -8px; width: 2px; background: var(--background-modifier-border); z-index: 0; } .paperforge-lifecycle-stepper .step:last-child::before { display: none; } .paperforge-lifecycle-stepper .step-label { font-size: var(--font-ui-small); color: var(--text-muted); font-weight: var(--font-medium); line-height: 1.3; } /* -- State: completed (D-10) -- */ .paperforge-lifecycle-stepper .step.completed .step-indicator { background: var(--color-green); border-color: var(--color-green); color: var(--text-on-accent); } .paperforge-lifecycle-stepper .step.completed .step-indicator::after { content: '\2713'; /* checkmark */ } .paperforge-lifecycle-stepper .step.completed .step-label { color: var(--text-normal); } .paperforge-lifecycle-stepper .step.completed::before { background: var(--color-green); } /* -- State: current (D-10) -- */ .paperforge-lifecycle-stepper .step.current .step-indicator { background: var(--interactive-accent); border-color: var(--interactive-accent); color: var(--text-on-accent); animation: paperforge-step-pulse 2s ease-in-out infinite; } @keyframes paperforge-step-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); } 50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } } .paperforge-lifecycle-stepper .step.current .step-label { color: var(--text-normal); font-weight: var(--font-semibold); } /* -- State: pending (D-10) -- */ .paperforge-lifecycle-stepper .step.pending .step-indicator { opacity: 0.4; } .paperforge-lifecycle-stepper .step.pending .step-label { opacity: 0.5; } /* ========================================================================== SECTION 10 — Health Matrix ========================================================================== */ .paperforge-health-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .paperforge-health-cell { background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: help; transition: border-color 0.15s; position: relative; } .paperforge-health-cell:hover { border-color: var(--interactive-accent); } .paperforge-health-cell-icon { font-size: 18px; line-height: 1; } .paperforge-health-cell-label { font-size: var(--font-ui-smaller); font-weight: var(--font-medium); color: var(--text-normal); text-transform: uppercase; letter-spacing: 0.3px; } /* Status coloring (D-14) */ .paperforge-health-cell.ok { border-left: 3px solid var(--color-green); } .paperforge-health-cell.ok .paperforge-health-cell-icon { color: var(--color-green); } .paperforge-health-cell.warn { border-left: 3px solid var(--color-yellow); } .paperforge-health-cell.warn .paperforge-health-cell-icon { color: var(--color-yellow); } .paperforge-health-cell.fail { border-left: 3px solid var(--color-red); } .paperforge-health-cell.fail .paperforge-health-cell-icon { color: var(--color-red); } /* Tooltip on hover (D-16) */ .paperforge-health-cell[title]:hover::after { content: attr(title); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--background-modifier-hover); color: var(--text-normal); font-size: 11px; padding: 4px 10px; border-radius: var(--radius-s); white-space: nowrap; pointer-events: none; z-index: 100; border: 1px solid var(--background-modifier-border); box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .paperforge-health-cell[title]:hover::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--background-modifier-border); pointer-events: none; z-index: 100; } /* ========================================================================== SECTION 11 — Maturity Gauge ========================================================================== */ .paperforge-maturity-gauge { display: flex; flex-direction: column; gap: 12px; } .paperforge-maturity-gauge .gauge-track { display: flex; gap: 4px; height: 16px; border-radius: 8px; overflow: hidden; background: var(--background-modifier-border); } .paperforge-maturity-gauge .gauge-segment { flex: 1; height: 100%; border-radius: 2px; background: var(--background-modifier-border); transition: background 0.3s; } .paperforge-maturity-gauge .gauge-segment.filled { background: var(--interactive-accent); } /* Gradient variant: each filled segment gets progressively richer color */ .paperforge-maturity-gauge .gauge-segment.filled.level-1 { background: var(--color-cyan); } .paperforge-maturity-gauge .gauge-segment.filled.level-2 { background: var(--color-blue); } .paperforge-maturity-gauge .gauge-segment.filled.level-3 { background: var(--color-purple); } .paperforge-maturity-gauge .gauge-segment.filled.level-4 { background: var(--color-green); } .paperforge-maturity-gauge .gauge-segment.filled.level-5 { background: var(--color-yellow); } .paperforge-maturity-gauge .gauge-segment.filled.level-6 { background: var(--color-red); } .paperforge-maturity-gauge .gauge-level { font-size: var(--font-ui-medium); font-weight: var(--font-bold); color: var(--text-normal); text-align: center; } .paperforge-maturity-gauge .gauge-blockers { list-style: disc; padding-left: 20px; margin: 4px 0 0; } .paperforge-maturity-gauge .gauge-blockers li { font-size: var(--font-ui-smaller); color: var(--text-muted); line-height: 1.5; } /* ========================================================================== SECTION 12 — Bar Chart ========================================================================== */ .paperforge-bar-chart { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; } .paperforge-bar-chart .bar-row { display: flex; align-items: center; gap: 10px; } .paperforge-bar-chart .bar-label { font-size: var(--font-ui-smaller); color: var(--text-muted); flex: 0 0 90px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--font-medium); } .paperforge-bar-chart .bar-track { flex: 1; height: 20px; border-radius: 4px; background: var(--background-modifier-border); overflow: hidden; position: relative; } .paperforge-bar-chart .bar-fill { height: 100%; border-radius: 4px; background: var(--interactive-accent); transition: width 0.3s; min-width: 2px; } .paperforge-bar-chart .bar-count { font-size: var(--font-ui-smaller); font-weight: var(--font-bold); color: var(--text-normal); flex: 0 0 30px; text-align: left; font-variant-numeric: tabular-nums; } /* Color variants for bar fills based on lifecycle stage */ .paperforge-bar-chart .bar-fill.stage-indexed { background: var(--color-blue); } .paperforge-bar-chart .bar-fill.stage-pdf-ready { background: var(--color-purple); } .paperforge-bar-chart .bar-fill.stage-fulltext-ready { background: var(--color-green); } .paperforge-bar-chart .bar-fill.stage-deep-read { background: var(--color-yellow); } /* ========================================================================== 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; } /* ========================================================================== SECTION 15 — Per-Paper View Layout ========================================================================== */ .paperforge-paper-view { display: flex; flex-direction: column; gap: 20px; } .paperforge-paper-header { padding-bottom: 8px; border-bottom: 1px solid var(--background-modifier-border); } .paperforge-paper-title { font-size: var(--font-ui-large); font-weight: var(--font-semibold); color: var(--text-normal); line-height: 1.4; margin: 0 0 6px 0; } .paperforge-paper-meta { font-size: var(--font-ui-small); color: var(--text-muted); line-height: 1.5; } .paperforge-paper-authors { display: inline; } .paperforge-paper-year { display: inline; } .paperforge-paper-year::before { content: " · "; } .paperforge-paper-actions { display: flex; flex-direction: row; gap: 8px; flex-wrap: wrap; } .paperforge-contextual-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: var(--font-ui-small); font-weight: var(--font-semibold); color: var(--text-normal); background: var(--background-secondary-alt); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); cursor: pointer; transition: background 0.15s, color 0.15s; user-select: none; } .paperforge-contextual-btn:hover { background: var(--background-modifier-hover); color: var(--text-accent); } .paperforge-contextual-btn:active { transform: scale(0.97); } .paperforge-contextual-btn-icon { font-size: 14px; line-height: 1; } /* ========================================================================== SECTION 16 — Next-Step Recommendation Card ========================================================================== */ .paperforge-next-step-card { background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); padding: 16px; display: flex; flex-direction: column; gap: 10px; } .paperforge-next-step-card.ready { border-color: var(--color-green); background: color-mix(in srgb, var(--color-green) 8%, var(--background-secondary)); } .paperforge-next-step-label { font-size: var(--font-ui-smaller); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .paperforge-next-step-text { font-size: var(--font-ui-small); color: var(--text-normal); line-height: 1.5; } .paperforge-next-step-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: var(--font-ui-small); font-weight: var(--font-semibold); color: var(--text-on-accent); background: var(--interactive-accent); border: none; border-radius: var(--radius-m); cursor: pointer; transition: opacity 0.15s; align-self: flex-start; user-select: none; } .paperforge-next-step-trigger:hover { opacity: 0.85; } .paperforge-next-step-trigger:active { transform: scale(0.97); } .paperforge-next-step-trigger.running { opacity: 0.6; pointer-events: none; } /* ========================================================================== SECTION 17 — Collection View Layout ========================================================================== */ .paperforge-collection-view { display: flex; flex-direction: column; gap: 24px; } .paperforge-collection-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .paperforge-collection-health { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .paperforge-collection-health-cell { background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; position: relative; } .paperforge-collection-health-cell-label { font-size: var(--font-ui-smaller); font-weight: var(--font-semibold); color: var(--text-normal); text-transform: uppercase; letter-spacing: 0.3px; } .paperforge-collection-health-counts { font-size: var(--font-ui-small); color: var(--text-muted); line-height: 1.6; } .paperforge-collection-health-counts .ok { color: var(--color-green); } .paperforge-collection-health-counts .warn { color: var(--color-yellow); } .paperforge-collection-health-counts .fail { color: var(--color-red); } /* ========================================================================== SECTION 33 — Deep-Reading Dashboard Mode ========================================================================== */ .paperforge-mode-deepreading { display: flex; flex-direction: column; gap: var(--size-4-4, 16px); } .paperforge-deepreading-card { background: var(--background-primary-alt); border-radius: var(--radius-m, 8px); padding: var(--size-4-4, 16px); } .paperforge-deepreading-card-title { font-weight: 600; font-size: var(--font-ui-medium); margin-bottom: var(--size-4-2, 8px); } .paperforge-deepreading-card-header.collapsible { cursor: pointer; user-select: none; } .paperforge-deepreading-card-header:hover { opacity: 0.8; } .paperforge-deepreading-card-body.collapsed { display: none; } .paperforge-deepreading-status-list { display: flex; flex-direction: column; } .paperforge-deepreading-status-row { display: flex; justify-content: space-between; padding: var(--size-4-1, 4px) 0; border-bottom: 1px solid var(--background-modifier-border); } .paperforge-deepreading-status-row:last-child { border-bottom: none; } .paperforge-deepreading-status-label { color: var(--text-muted); font-size: var(--font-ui-small); } .paperforge-deepreading-status-value { font-size: var(--font-ui-small); } .paperforge-deepreading-pass1-content { line-height: 1.6; } .paperforge-deepreading-pass1-subheading { margin: var(--size-4-2, 8px) 0 var(--size-4-1, 4px); color: var(--text-accent); } .paperforge-deepreading-pass1-marker { font-weight: 600; color: var(--text-normal); margin: var(--size-4-2, 8px) 0; } .paperforge-deepreading-pass1-text { color: var(--text-muted); margin: var(--size-4-1, 4px) 0; } .paperforge-deepreading-empty { color: var(--text-faint); font-size: var(--font-ui-small); padding: var(--size-4-2, 8px); text-align: center; } /* Session grouping */ .paperforge-deepreading-session { margin-bottom: var(--size-4-3, 12px); } .paperforge-deepreading-session-header { display: flex; justify-content: space-between; font-size: var(--font-ui-small); color: var(--text-faint); margin-bottom: var(--size-4-2, 8px); padding-bottom: var(--size-4-1, 4px); border-bottom: 1px dashed var(--background-modifier-border); } .paperforge-deepreading-session-date { color: var(--text-muted); } /* Dialog bubbles */ .paperforge-deepreading-bubble { padding: var(--size-4-2, 8px) var(--size-4-3, 12px); border-radius: var(--radius-s, 6px); margin-bottom: var(--size-4-2, 8px); max-width: 90%; } .paperforge-deepreading-bubble.question { background: var(--interactive-accent); color: var(--text-on-accent); margin-right: auto; } .paperforge-deepreading-bubble.answer { background: var(--background-secondary-alt); color: var(--text-normal); margin-left: auto; } .paperforge-deepreading-bubble .bubble-label { font-size: var(--font-smallest, 10px); opacity: 0.7; margin-bottom: 2px; } .paperforge-deepreading-bubble .bubble-text { font-size: var(--font-ui-small); line-height: 1.5; } /* ========================================================================== SECTION 34 — Runtime Health ========================================================================== */ .paperforge-runtime-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.85em; font-weight: 600; margin-left: 8px; } .paperforge-runtime-badge.match { background: var(--color-green, #4caf50); color: #fff; } .paperforge-runtime-badge.mismatch { background: var(--color-red, #f44336); color: #fff; } .paperforge-runtime-badge.missing { background: var(--color-orange, #ff9800); color: #fff; } /* ========================================================================== SECTION 35 — Dashboard Drift Banner ========================================================================== */ .paperforge-drift-banner { background: var(--color-yellow, #ffc107); color: var(--background-primary, #000); padding: 8px 14px; border-radius: 6px; font-size: 0.9em; margin-bottom: 16px; cursor: pointer; } .paperforge-drift-banner:hover { opacity: 0.9; } /* ========================================================================== SECTION 36 — Copy Diagnostic Button ========================================================================== */ .paperforge-copy-diag-btn { margin-top: 8px; padding: 4px 12px; font-size: 0.85em; background: var(--interactive-normal, #e0e0e0); color: var(--text-normal, #000); border: 1px solid var(--background-modifier-border, #ccc); border-radius: 4px; cursor: pointer; } .paperforge-copy-diag-btn:hover { background: var(--interactive-hover, #d0d0d0); } /* ========================================================================== SECTION 37 — DASH-01: OCR Queue Hint (per-paper) ========================================================================== */ .paperforge-ocr-queue-hint { font-size: var(--font-ui-smaller); color: var(--text-muted); font-style: italic; margin-left: 8px; } /* ── DASH-02: Agent Platform Label ── */ .paperforge-agent-platform-label { font-size: var(--font-ui-smaller); color: var(--text-muted); margin-top: -4px; font-style: italic; } /* ========================================================================== SECTION 38 — DASH-03: OCR Privacy Warning Modal ========================================================================== */ .paperforge-ocr-privacy-modal h2 { margin-top: 8px; margin-bottom: 16px; font-size: var(--font-ui-large); font-weight: var(--font-semibold); } .paperforge-ocr-privacy-warning { background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); padding: 16px; margin-bottom: 20px; line-height: 1.6; } .paperforge-ocr-privacy-warning p { margin: 0; color: var(--text-normal); font-size: var(--font-ui-small); } .paperforge-ocr-privacy-actions { display: flex; justify-content: flex-end; padding-top: 8px; } /* ========================================================================== SECTION 39 — Dashboard Redesign: Shared Components ========================================================================== */ /* ── Section Label (used across global / collection / paper) ── */ .paperforge-section-label { font-size: var(--font-ui-small); font-weight: var(--font-semibold); color: var(--text-normal); margin: 0 0 10px 0; text-transform: uppercase; letter-spacing: 0.5px; } /* ── Contextual Button (card-action style, used across all views) ── */ .paperforge-contextual-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s); color: var(--text-muted); font-size: var(--font-ui-smaller); font-weight: var(--font-medium); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; } .paperforge-contextual-btn:hover { background: var(--background-modifier-hover); border-color: var(--interactive-accent); color: var(--text-normal); } .paperforge-contextual-btn.running { opacity: 0.6; pointer-events: none; } .paperforge-contextual-btn-icon { font-size: 14px; line-height: 1; } /* ========================================================================== SECTION 40 — Dashboard Redesign: Per-Paper View (Reading Companion) ========================================================================== */ /* ── Status Strip ── */ .paperforge-status-strip { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid var(--background-modifier-border); border-bottom: 1px solid var(--background-modifier-border); margin: 10px 0; } .paperforge-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: 10px; font-size: 11px; font-weight: var(--font-semibold); background: var(--background-modifier-hover); color: var(--text-muted); line-height: 1.4; } .paperforge-status-pill.ok { background: var(--color-green); color: var(--text-on-accent); } .paperforge-status-pill.fail { background: var(--text-error); color: var(--text-on-accent); } .paperforge-status-pill.pending { background: var(--background-modifier-hover); color: var(--text-muted); } .paperforge-status-pill-icon { font-size: 10px; line-height: 1; } /* ── Paper Overview Card ── */ .paperforge-paper-overview { margin: 12px 0; padding: 14px; background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); transition: border-color 0.15s; } .paperforge-paper-overview:hover { border-color: var(--interactive-accent); } .paperforge-paper-overview-header { margin-bottom: 8px; } .paperforge-paper-overview-title { font-size: var(--font-ui-small); font-weight: var(--font-semibold); color: var(--text-accent); text-transform: uppercase; letter-spacing: 0.5px; } .paperforge-paper-overview-body { font-size: var(--font-ui-smaller); color: var(--text-muted); line-height: 1.6; } .paperforge-paper-overview-excerpt { white-space: pre-wrap; word-break: break-word; } .paperforge-paper-overview-expand { display: inline-block; margin-top: 6px; padding: 2px 0; background: none; border: none; color: var(--text-accent); font-size: var(--font-ui-smaller); font-weight: var(--font-medium); cursor: pointer; transition: color 0.15s; } .paperforge-paper-overview-expand:hover { color: var(--interactive-accent-hover); text-decoration: underline; } /* ── Discussion Card ── */ .paperforge-discussion-card { margin: 12px 0; padding: 14px; background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); transition: border-color 0.15s; } .paperforge-discussion-card:hover { border-color: var(--interactive-accent); } .paperforge-discussion-header { margin-bottom: 8px; } .paperforge-discussion-title { font-size: var(--font-ui-small); font-weight: var(--font-semibold); color: var(--text-accent); text-transform: uppercase; letter-spacing: 0.5px; } .paperforge-discussion-item { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--background-modifier-border-hover); } .paperforge-discussion-item:last-child { border-bottom: none; margin-bottom: 4px; padding-bottom: 0; } .paperforge-discussion-q { font-size: var(--font-ui-smaller); font-weight: var(--font-semibold); color: var(--text-normal); margin-bottom: 4px; line-height: 1.5; } .paperforge-discussion-a { font-size: var(--font-ui-smaller); color: var(--text-muted); line-height: 1.5; } .paperforge-discussion-expand { display: inline; padding: 0; margin-left: 4px; background: none; border: none; color: var(--text-accent); font-size: var(--font-ui-smaller); font-weight: var(--font-medium); cursor: pointer; transition: color 0.15s; } .paperforge-discussion-expand:hover { color: var(--interactive-accent-hover); text-decoration: underline; } .paperforge-discussion-viewall { display: block; text-align: right; margin-top: 6px; font-size: var(--font-ui-smaller); font-weight: var(--font-medium); color: var(--text-accent); cursor: pointer; text-decoration: none; transition: color 0.15s; } .paperforge-discussion-viewall:hover { color: var(--interactive-accent-hover); } /* ── Paper Files Row ── */ .paperforge-paper-files { display: flex; gap: 8px; margin: 12px 0; } /* ── Technical Details ── */ .paperforge-technical-details { margin: 8px 0; } .paperforge-technical-details-toggle { width: 100%; padding: 8px 12px; background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s); color: var(--text-muted); font-size: var(--font-ui-smaller); font-weight: var(--font-medium); cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; } .paperforge-technical-details-toggle:hover { background: var(--background-modifier-hover); border-color: var(--interactive-accent); color: var(--text-normal); } .paperforge-technical-details-body { margin-top: 6px; padding: 10px 14px; background: var(--background-primary-alt); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s); font-size: var(--font-ui-smaller); } .paperforge-technical-row { display: flex; justify-content: space-between; padding: 3px 0; } .paperforge-technical-label { color: var(--text-faint); flex-shrink: 0; margin-right: 12px; } .paperforge-technical-value { color: var(--text-muted); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; } /* ========================================================================== SECTION 41 — Dashboard Redesign: Collection / Base View (Batch Workspace) ========================================================================== */ /* ── Collection Header ── */ .paperforge-collection-header { margin-bottom: 12px; } .paperforge-collection-title { font-size: var(--font-ui-medium); font-weight: var(--font-bold); color: var(--text-normal); line-height: 1.3; } .paperforge-collection-count { font-size: var(--font-ui-smaller); color: var(--text-muted); margin-top: 2px; } /* ── Workflow Overview (funnel) ── */ .paperforge-workflow-overview { margin: 12px 0; padding: 16px; background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); transition: border-color 0.15s; } .paperforge-workflow-overview:hover { border-color: var(--interactive-accent); } .paperforge-workflow-funnel { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; } .paperforge-workflow-stage { display: flex; flex-direction: column; align-items: center; padding: 8px 14px; background: var(--background-primary-alt); border-radius: var(--radius-s); min-width: 60px; } .paperforge-workflow-stage-value { font-size: clamp(16px, 3vw, 22px); font-weight: var(--font-bold); color: var(--text-accent); line-height: 1.2; letter-spacing: -0.3px; } .paperforge-workflow-stage-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; text-align: center; } .paperforge-workflow-arrow { color: var(--text-faint); font-size: var(--font-ui-smaller); flex-shrink: 0; } /* ── OCR Pipeline in Base ── */ .paperforge-collection-ocr-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } /* ── Issue Summary ── */ .paperforge-issue-summary { margin: 12px 0; padding: 12px 14px; background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-left: 3px solid var(--color-orange); border-radius: var(--radius-m); } .paperforge-issue-summary .paperforge-section-label { color: var(--color-orange); } .paperforge-issue-text { font-size: var(--font-ui-smaller); color: var(--text-muted); line-height: 1.5; } .paperforge-issue-list { margin: 6px 0 8px 0; } .paperforge-issue-item { font-size: var(--font-ui-smaller); color: var(--text-muted); padding: 2px 0; } .paperforge-issue-actions { display: flex; gap: 8px; margin-top: 10px; } /* ── Collection Actions ── */ .paperforge-collection-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--background-modifier-border); } /* ========================================================================== SECTION 42 — Dashboard Redesign: Global / Home View (System Homepage) ========================================================================== */ /* ── Library Snapshot ── */ .paperforge-library-snapshot { padding: 16px; background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); transition: border-color 0.15s; } .paperforge-library-snapshot:hover { border-color: var(--interactive-accent); } .paperforge-snapshot-pills { display: flex; gap: 8px; flex-wrap: wrap; } .paperforge-snapshot-pill { display: flex; flex-direction: column; align-items: center; padding: 10px 16px; background: var(--background-primary-alt); border-radius: var(--radius-s); min-width: 64px; flex: 1; } .paperforge-snapshot-value { font-size: clamp(16px, 3vw, 22px); font-weight: var(--font-bold); color: var(--text-accent); line-height: 1.2; letter-spacing: -0.3px; } .paperforge-snapshot-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; text-align: center; } /* ── System Status ── */ .paperforge-system-status { padding: 16px; background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); transition: border-color 0.15s; } .paperforge-system-status:hover { border-color: var(--interactive-accent); } .paperforge-status-grid { display: flex; flex-direction: column; gap: 2px; } .paperforge-status-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; } .paperforge-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--background-modifier-border); transition: background 0.3s; } .paperforge-status-dot.ok { background: var(--color-green); } .paperforge-status-dot.fail { background: var(--text-error); } .paperforge-status-label { font-size: var(--font-ui-smaller); color: var(--text-muted); min-width: 80px; } .paperforge-status-detail { font-size: var(--font-ui-smaller); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Global Actions ── */ .paperforge-global-actions { padding: 16px; background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); transition: border-color 0.15s; } .paperforge-global-actions:hover { border-color: var(--interactive-accent); } .paperforge-global-actions-row { display: flex; gap: 8px; } /* ========================================================================== SECTION 43 — Dashboard Redesign: Workflow Toggle Checkboxes (per-paper) ========================================================================== */ .paperforge-workflow-toggles { display: flex; gap: 16px; padding: 10px 14px; background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); margin: 12px 0; transition: border-color 0.15s; } .paperforge-workflow-toggles:hover { border-color: var(--interactive-accent); } .paperforge-workflow-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--font-ui-smaller); color: var(--text-muted); user-select: none; } .paperforge-workflow-checkbox { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--interactive-accent); } .paperforge-workflow-toggle-label { font-weight: var(--font-semibold); color: var(--text-normal); } .paperforge-workflow-toggle-hint { color: var(--text-faint); font-size: 11px; }