feat(w3): add continuous read mode and Wave 3 plan

Introduce ReadModeOverlay with device width and font theme persistence, sidebar and volume menu entry, plus E2E-READ-01 through 03. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-08 16:38:54 +08:00
parent fe6e411d2c
commit c10be87d18
13 changed files with 653 additions and 2 deletions
@@ -2346,3 +2346,104 @@
  font-size: 12px;
  margin-bottom: 8px;
 }
+
+.read-mode-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10001;
+  background: var(--bg-primary);
+  display: flex;
+  flex-direction: column;
+}
+
+.read-mode-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.read-mode-toolbar-title {
+  font-size: 13px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.read-mode-toolbar-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.read-mode-scroll {
+  flex: 1;
+  overflow-y: auto;
+  scroll-snap-type: y proximity;
+}
+
+.read-mode-content {
+  width: 100%;
+  padding: 32px 24px 64px;
+  box-sizing: border-box;
+}
+
+.read-mode-device-phone {
+  max-width: 360px;
+  margin: 0 auto;
+}
+
+.read-mode-device-tablet {
+  max-width: 768px;
+  margin: 0 auto;
+}
+
+.read-mode-device-desktop {
+  max-width: 100%;
+}
+
+.read-mode-chapter {
+  scroll-snap-align: start;
+  margin-bottom: 48px;
+}
+
+.read-mode-chapter-title {
+  font-size: 1.25rem;
+  margin-bottom: 20px;
+  color: var(--text-primary);
+}
+
+.read-mode-paragraph {
+  line-height: 1.9;
+  margin-bottom: 1em;
+  font-size: 16px;
+  color: var(--text-primary);
+}
+
+.read-mode-font-serif .read-mode-paragraph {
+  font-family: Georgia, 'Noto Serif SC', 'Songti SC', serif;
+}
+
+.read-mode-font-sans .read-mode-paragraph {
+  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+.read-mode-font-eye-care {
+  background: #ebe4d4;
+}
+
+.read-mode-font-eye-care .read-mode-content {
+  background: #f5f0e6;
+  border-radius: 8px;
+}
+
+.read-mode-font-eye-care .read-mode-paragraph,
+.read-mode-font-eye-care .read-mode-chapter-title {
+  color: #3d3428;
+}