mirror of
https://github.com/Tony0410/readlater.git
synced 2026-05-24 22:01:41 +08:00
27963af055
- Save articles via URL or bookmarklet - Clean dark reader with customizable fonts/sizing - Text-to-speech with browser + Kokoro support - Speed control up to 3x - Favorites and archive - SQLite database with Drizzle ORM - Docker deployment ready Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
157 lines
2.7 KiB
CSS
157 lines
2.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #000000;
|
|
--foreground: #ffffff;
|
|
--muted: #888888;
|
|
--border: #333333;
|
|
--accent: #3b82f6;
|
|
--surface: #111111;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--background: #ffffff;
|
|
--foreground: #1a1a1a;
|
|
--muted: #666666;
|
|
--border: #e5e5e5;
|
|
--accent: #2563eb;
|
|
--surface: #f5f5f5;
|
|
}
|
|
|
|
[data-theme="sepia"] {
|
|
--background: #f4ecd8;
|
|
--foreground: #5c4b37;
|
|
--muted: #8b7355;
|
|
--border: #d4c4a8;
|
|
--accent: #8b5a2b;
|
|
--surface: #ebe3d0;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-muted: var(--muted);
|
|
--color-border: var(--border);
|
|
--color-accent: var(--accent);
|
|
--color-surface: var(--surface);
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
transition: background-color 0.2s, color 0.2s;
|
|
}
|
|
|
|
/* Reader fonts */
|
|
.font-serif {
|
|
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
|
|
}
|
|
|
|
.font-sans {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
.font-mono {
|
|
font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
|
|
}
|
|
|
|
.font-system {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
/* Reader content styles */
|
|
.reader-content {
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.reader-content p {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.reader-content h1,
|
|
.reader-content h2,
|
|
.reader-content h3,
|
|
.reader-content h4 {
|
|
margin-top: 1.5em;
|
|
margin-bottom: 0.75em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.reader-content a {
|
|
color: var(--accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.reader-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 0.5rem;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.reader-content blockquote {
|
|
border-left: 3px solid var(--border);
|
|
padding-left: 1em;
|
|
margin-left: 0;
|
|
font-style: italic;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.reader-content pre {
|
|
background: var(--surface);
|
|
padding: 1em;
|
|
border-radius: 0.5rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.reader-content code {
|
|
background: var(--surface);
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.reader-content pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.reader-content ul,
|
|
.reader-content ol {
|
|
margin-left: 1.5em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.reader-content li {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
/* TTS highlight */
|
|
.tts-highlight {
|
|
background-color: var(--accent);
|
|
color: white;
|
|
padding: 0.1em 0.2em;
|
|
border-radius: 0.2em;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--background);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--muted);
|
|
}
|