240cc7d3a9
Three density modes: Overview (~3 min), Standard (~12 min), Deep (~25 min). Applied to researcher.html — 7 sections tagged with data-reading-level. Persists user preference in localStorage. Auto-injects toggle UI. Reusable component for architectural-alignment papers. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
54 lines
938 B
CSS
54 lines
938 B
CSS
.reading-mode-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
margin: 1rem auto 2rem;
|
|
max-width: 900px;
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.reading-mode-label {
|
|
color: #64748b;
|
|
font-weight: 500;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.reading-mode-btn {
|
|
padding: 0.375rem 0.75rem;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 0.375rem;
|
|
background: white;
|
|
color: #475569;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.reading-mode-btn:hover {
|
|
background: #f1f5f9;
|
|
border-color: #94a3b8;
|
|
}
|
|
|
|
.reading-mode-btn.active {
|
|
background: #1e40af;
|
|
color: white;
|
|
border-color: #1e40af;
|
|
}
|
|
|
|
.reading-mode-estimate {
|
|
margin-left: auto;
|
|
color: #94a3b8;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.reading-mode-toggle {
|
|
flex-wrap: wrap;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
}
|