| :root { |
| --bg: #f5f5f0; |
| --bg-card: #ffffff; |
| --bg-modal: #ffffff; |
| --bg-input: #f0f0eb; |
| --bg-topbar: #ffffff; |
| --text: #1a1a1a; |
| --text-muted: #666666; |
| --text-light: #999999; |
| --border: #e0e0d8; |
| --primary: #4a6fa5; |
| --primary-h: #3a5f95; |
| --primary-t: #ffffff; |
| --danger: #d94f4f; |
| --danger-h: #c43f3f; |
| --accent: #e8a44a; |
| --shadow: 0 2px 12px rgba(0,0,0,0.08); |
| --shadow-lg: 0 8px 32px rgba(0,0,0,0.14); |
| --radius: 12px; |
| --radius-sm: 6px; |
| --transition: 0.2s ease; |
| --reader-bg: #faf8f2; |
| --reader-text: #2c2c2c; |
| --font-reader: 'Georgia', 'Noto Serif SC', serif; |
| --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif; |
| } |
|
|
| [data-theme="dark"] { |
| --bg: #1a1a1e; |
| --bg-card: #25252b; |
| --bg-modal: #2d2d35; |
| --bg-input: #1e1e24; |
| --bg-topbar: #202026; |
| --text: #e8e8e8; |
| --text-muted: #aaaaaa; |
| --text-light: #777777; |
| --border: #3a3a44; |
| --primary: #6b8fc9; |
| --primary-h: #7a9fd9; |
| --primary-t: #ffffff; |
| --danger: #e06060; |
| --danger-h: #f07070; |
| --accent: #d4924a; |
| --shadow: 0 2px 12px rgba(0,0,0,0.3); |
| --shadow-lg: 0 8px 32px rgba(0,0,0,0.5); |
| --reader-bg: #1c1c20; |
| --reader-text: #d8d4c8; |
| } |
|
|
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
|
|
| html, body { |
| height: 100%; |
| font-family: var(--font-ui); |
| background: var(--bg); |
| color: var(--text); |
| transition: background var(--transition), color var(--transition); |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| .page { display: none; min-height: 100vh; } |
| .page.active { display: flex; flex-direction: column; } |
| .page.hidden { display: none !important; } |
|
|
| #page-login { |
| align-items: center; |
| justify-content: center; |
| background: linear-gradient(135deg, var(--bg) 0%, var(--bg-card) 100%); |
| } |
|
|
| .login-card { |
| background: var(--bg-card); |
| border-radius: 20px; |
| padding: 48px 40px; |
| width: 100%; |
| max-width: 420px; |
| box-shadow: var(--shadow-lg); |
| } |
|
|
| .login-logo { font-size: 56px; text-align: center; margin-bottom: 8px; } |
| .login-title { font-size: 28px; font-weight: 700; text-align: center; color: var(--primary); } |
| .login-sub { text-align: center; color: var(--text-muted); margin-bottom: 32px; font-size: 14px; } |
|
|
| .form-group { margin-bottom: 16px; } |
| .form-group label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; } |
| .form-group input, |
| .form-group textarea, |
| .form-group select { |
| width: 100%; |
| background: var(--bg-input); |
| border: 1.5px solid var(--border); |
| border-radius: var(--radius-sm); |
| padding: 10px 14px; |
| font-size: 15px; |
| color: var(--text); |
| transition: border-color var(--transition); |
| font-family: var(--font-ui); |
| } |
| .form-group input:focus, |
| .form-group textarea:focus { |
| outline: none; |
| border-color: var(--primary); |
| } |
| .form-group.row { display: flex; align-items: center; gap: 8px; } |
| .form-group.row label { display: flex; align-items: center; gap: 8px; margin: 0; } |
|
|
| .btn-primary { |
| background: var(--primary); |
| color: var(--primary-t); |
| border: none; |
| border-radius: var(--radius-sm); |
| padding: 11px 22px; |
| font-size: 15px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: background var(--transition), transform 0.1s; |
| } |
| .btn-primary:hover { background: var(--primary-h); } |
| .btn-primary:active { transform: scale(0.98); } |
|
|
| .btn-secondary { |
| background: transparent; |
| color: var(--text-muted); |
| border: 1.5px solid var(--border); |
| border-radius: var(--radius-sm); |
| padding: 10px 20px; |
| font-size: 15px; |
| cursor: pointer; |
| transition: all var(--transition); |
| } |
| .btn-secondary:hover { border-color: var(--primary); color: var(--primary); } |
|
|
| .btn-danger { |
| background: var(--danger); |
| color: #fff; |
| border: none; |
| border-radius: var(--radius-sm); |
| padding: 10px 20px; |
| font-size: 15px; |
| cursor: pointer; |
| transition: background var(--transition); |
| } |
| .btn-danger:hover { background: var(--danger-h); } |
|
|
| .btn-sm { |
| font-size: 12px; |
| padding: 4px 10px; |
| border-radius: 4px; |
| border: 1px solid var(--border); |
| background: transparent; |
| color: var(--primary); |
| cursor: pointer; |
| } |
|
|
| .btn-icon { |
| background: transparent; |
| border: none; |
| cursor: pointer; |
| font-size: 18px; |
| padding: 6px 8px; |
| border-radius: var(--radius-sm); |
| color: var(--text-muted); |
| transition: background var(--transition), color var(--transition); |
| } |
| .btn-icon:hover { background: var(--bg-input); color: var(--text); } |
|
|
| .btn-full { width: 100%; } |
|
|
| |
| .btn-icon-3d { |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| cursor: pointer; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 4px !important; |
| transition: transform var(--transition); |
| } |
| .btn-icon-3d:hover, .btn-icon:hover { |
| transform: scale(1.18) !important; |
| } |
|
|
| |
| .squircle { |
| display: none !important; |
| } |
|
|
| |
| .topbar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 12px 24px; |
| height: 80px; |
| background: var(--bg-topbar); |
| border-bottom: 1px solid var(--border); |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| box-shadow: var(--shadow); |
| } |
|
|
| .topbar-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } |
| .topbar-title { font-size: 26px; font-weight: 800; color: var(--primary); letter-spacing: -0.5px; } |
|
|
| .topbar-right { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| margin-left: auto; |
| flex-shrink: 0; |
| } |
|
|
| .topbar-search { |
| display: flex; |
| gap: 6px; |
| max-width: 280px; |
| flex-shrink: 0; |
| } |
| .search-input { |
| flex: 1; |
| background: var(--bg-input); |
| border: 1.5px solid var(--border); |
| border-radius: 24px; |
| padding: 8px 16px; |
| font-size: 14px; |
| color: var(--text); |
| transition: border-color var(--transition); |
| } |
| .search-input:focus { outline: none; border-color: var(--primary); } |
|
|
| |
| .search-overlay { |
| position: absolute; |
| top: 100%; |
| right: 0; |
| left: 0; |
| z-index: 200; |
| padding: 10px 16px; |
| background: var(--bg-topbar); |
| border-bottom: 1px solid var(--border); |
| box-shadow: var(--shadow); |
| } |
| .search-overlay-inner { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| max-width: 400px; |
| margin: 0 auto; |
| } |
| .search-overlay-input { |
| flex: 1; |
| background: var(--bg-input); |
| border: 1.5px solid var(--border); |
| border-radius: 24px; |
| padding: 10px 16px; |
| font-size: 16px; |
| color: var(--text); |
| } |
| .search-overlay-input:focus { outline: none; border-color: var(--primary); } |
|
|
| |
| .filter-bar { |
| display: none; |
| } |
|
|
| |
| .book-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); |
| gap: 20px; |
| padding: 24px 20px; |
| } |
|
|
| .book-card { |
| background: var(--bg-card); |
| border-radius: var(--radius); |
| overflow: hidden; |
| cursor: pointer; |
| box-shadow: var(--shadow); |
| transition: transform var(--transition), box-shadow var(--transition); |
| display: flex; |
| flex-direction: column; |
| } |
| .book-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } |
|
|
| .book-cover { |
| width: 100%; |
| aspect-ratio: 2/3; |
| object-fit: cover; |
| background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 40px; |
| color: #fff; |
| flex-shrink: 0; |
| } |
| .book-cover img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
|
|
| .book-info { padding: 12px; } |
| .book-title { |
| font-size: 13px; |
| font-weight: 600; |
| line-height: 1.4; |
| overflow: hidden; |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| margin-bottom: 4px; |
| } |
| .book-author { |
| font-size: 12px; |
| color: var(--text-muted); |
| overflow: hidden; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| } |
| .book-badge { |
| display: inline-block; |
| font-size: 10px; |
| padding: 2px 6px; |
| border-radius: 4px; |
| background: var(--bg-input); |
| color: var(--text-muted); |
| margin-top: 4px; |
| text-transform: uppercase; |
| } |
|
|
| .book-grid.list-view { |
| grid-template-columns: 1fr; |
| gap: 8px; |
| } |
| .book-grid.list-view .book-card { |
| flex-direction: row; |
| align-items: center; |
| } |
| .book-grid.list-view .book-cover { |
| width: 60px; |
| height: 80px; |
| aspect-ratio: unset; |
| flex-shrink: 0; |
| font-size: 24px; |
| } |
| .book-grid.list-view .book-info { flex: 1; } |
|
|
| .loading-indicator { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| padding: 60px 20px; |
| color: var(--text-muted); |
| font-size: 15px; |
| } |
| .spinner { |
| width: 24px; |
| height: 24px; |
| border: 3px solid var(--border); |
| border-top-color: var(--primary); |
| border-radius: 50%; |
| animation: spin 0.8s linear infinite; |
| } |
| @keyframes spin { to { transform: rotate(360deg); } } |
| @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } |
|
|
| .error-banner { |
| margin: 12px 20px; |
| padding: 12px 16px; |
| border-radius: var(--radius-sm); |
| background: #fef2f2; |
| color: var(--danger); |
| font-size: 14px; |
| border: 1px solid #fecaca; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
| [data-theme="dark"] .error-banner { |
| background: #2d1515; |
| border-color: #5c2020; |
| } |
| .btn-retry { |
| background: var(--danger); |
| color: #fff; |
| border: none; |
| border-radius: 4px; |
| padding: 4px 12px; |
| font-size: 13px; |
| cursor: pointer; |
| flex-shrink: 0; |
| } |
| .btn-retry:hover { filter: brightness(1.1); } |
|
|
| .empty-state { |
| text-align: center; |
| padding: 80px 20px; |
| color: var(--text-muted); |
| } |
| .empty-icon { font-size: 60px; margin-bottom: 16px; } |
|
|
| .load-more { text-align: center; padding: 20px; } |
|
|
| .modal { |
| position: fixed; |
| inset: 0; |
| background: rgba(0,0,0,0.5); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: 1000; |
| padding: 16px; |
| backdrop-filter: blur(4px); |
| } |
| .modal.hidden { display: none !important; } |
|
|
| .modal-card { |
| background: var(--bg-modal); |
| border-radius: 20px; |
| padding: 32px; |
| width: 100%; |
| max-width: 480px; |
| max-height: 85%; |
| overflow-y: auto; |
| box-shadow: var(--shadow-lg); |
| } |
| .modal-card.small { max-width: 340px; } |
| .upload-card { max-width: 540px; } |
|
|
| .modal-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 24px; |
| } |
| .modal-header h2 { font-size: 20px; font-weight: 700; } |
|
|
| .modal-actions { |
| display: flex; |
| gap: 10px; |
| justify-content: flex-end; |
| margin-top: 24px; |
| } |
|
|
| .drop-zone { |
| border: 2px dashed var(--border); |
| border-radius: var(--radius); |
| padding: 32px; |
| text-align: center; |
| cursor: pointer; |
| transition: all var(--transition); |
| margin-bottom: 16px; |
| position: relative; |
| } |
| .drop-zone:hover, .drop-zone.drag-over { |
| border-color: var(--primary); |
| background: var(--bg-input); |
| } |
| .drop-zone p { color: var(--text-muted); margin-bottom: 4px; } |
| .drop-zone .hint { font-size: 12px; color: var(--text-light); } |
| .drop-label { display: block; cursor: pointer; } |
| #file-input, #folder-input { |
| position: absolute; |
| width: 0.1px; |
| height: 0.1px; |
| opacity: 0; |
| overflow: hidden; |
| z-index: -1; |
| } |
|
|
| .file-info { |
| background: var(--bg-input); |
| border-radius: var(--radius-sm); |
| padding: 10px 14px; |
| font-size: 13px; |
| margin-bottom: 16px; |
| color: var(--text); |
| } |
|
|
| .upload-file-info { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); padding: 8px 4px; } |
| .progress-wrap { margin: 12px 0; display: flex; align-items: center; gap: 10px; } |
| .progress-bar { |
| flex: 1; |
| height: 6px; |
| background: var(--border); |
| border-radius: 3px; |
| overflow: hidden; |
| } |
| .progress-fill { |
| height: 100%; |
| background: var(--primary); |
| width: 0%; |
| transition: width 0.3s; |
| } |
|
|
| .upload-actions-row { |
| display: flex; |
| gap: 8px; |
| margin-bottom: 12px; |
| } |
|
|
| .upload-queue { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| margin-bottom: 12px; |
| max-height: 240px; |
| overflow-y: auto; |
| } |
| .queue-header { |
| padding: 8px 12px; |
| font-size: 13px; |
| color: var(--text-muted); |
| border-bottom: 1px solid var(--border); |
| background: var(--bg-input); |
| } |
| .queue-item { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 8px 12px; |
| font-size: 13px; |
| border-bottom: 1px solid var(--border); |
| } |
| .queue-item:last-child { border-bottom: none; } |
| .queue-item .qi-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| .queue-item .qi-status { flex-shrink: 0; font-size: 12px; } |
| .queue-item .qi-err { flex-shrink: 0; font-size: 11px; color: var(--danger); width: 100%; } |
| .queue-item.done .qi-status { color: #22a65e; } |
| .queue-item.fail .qi-status { color: var(--danger); } |
|
|
| .detail-body { display: flex; gap: 20px; margin-bottom: 16px; } |
| .detail-cover { |
| width: 120px; |
| height: 180px; |
| object-fit: cover; |
| border-radius: var(--radius-sm); |
| flex-shrink: 0; |
| background: var(--bg-input); |
| } |
| .detail-meta p { font-size: 14px; margin-bottom: 8px; line-height: 1.5; } |
|
|
| #page-reader.active { |
| background: var(--reader-bg); |
| position: fixed; |
| inset: 0; |
| z-index: 500; |
| overflow: hidden; |
| } |
| #page-reader.active.immersive { |
| border-radius: 0; |
| box-shadow: none; |
| } |
|
|
| .reader-topbar { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 10px 16px; |
| background: var(--bg-topbar); |
| border-bottom: 1px solid var(--border); |
| position: sticky; |
| top: 0; |
| z-index: 10; |
| transition: opacity 0.25s ease, transform 0.25s ease; |
| } |
| .reader-topbar.hidden-ui { opacity: 0; transform: translateY(-100%); pointer-events: none; } |
|
|
| .reader-title { |
| flex: 1; |
| font-size: 15px; |
| font-weight: 600; |
| overflow: hidden; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| } |
| .reader-topbar-right { display: flex; align-items: center; gap: 6px; } |
| .reader-select { |
| background: var(--bg-input); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| padding: 4px 8px; |
| font-size: 13px; |
| color: var(--text); |
| cursor: pointer; |
| } |
|
|
| .reader-content { |
| flex: 1; |
| overflow-y: auto; |
| padding: 24px 20px; |
| max-width: 720px; |
| margin: 0 auto; |
| width: 100%; |
| line-height: 1.8; |
| font-size: 16px; |
| letter-spacing: 0.05em; |
| color: var(--reader-text); |
| font-family: var(--font-reader); |
| text-align: justify; |
| word-break: break-word; |
| overflow-wrap: break-word; |
| scrollbar-width: none; |
| -ms-overflow-style: none; |
| } |
| .reader-content::-webkit-scrollbar { display: none; } |
|
|
| .pdf-page-canvas { |
| display: block; |
| width: 100%; |
| margin-bottom: 16px; |
| border-radius: var(--radius-sm); |
| box-shadow: var(--shadow); |
| } |
|
|
| .epub-content { line-height: 1.9; text-align: justify; } |
| .epub-content p { margin-bottom: 1.2em; text-indent: 2em; text-align: justify; } |
| .epub-content h1, .epub-content h2, .epub-content h3 { |
| font-weight: 700; |
| margin: 1.5em 0 0.8em; |
| text-indent: 0; |
| } |
|
|
| .reader-pager { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 20px; |
| padding: 12px; |
| background: var(--bg-topbar); |
| border-top: 1px solid var(--border); |
| transition: opacity 0.25s ease, transform 0.25s ease; |
| } |
| .reader-pager.hidden-ui { opacity: 0; transform: translateY(100%); pointer-events: none; } |
| #page-indicator { font-size: 14px; color: var(--text-muted); min-width: 80px; text-align: center; } |
|
|
| .tts-bar { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 8px 16px; |
| background: var(--bg-topbar); |
| border-top: 1px solid var(--border); |
| } |
| .tts-bar { |
| transition: opacity 0.25s ease, transform 0.25s ease; |
| } |
| .tts-bar.hidden-ui { opacity: 0; transform: translateY(100%); pointer-events: none; } |
| .tts-voice { flex: 1; max-width: 180px; } |
| .tts-btn { font-size: 16px; } |
| .tts-label { font-size: 12px; color: var(--text-muted); } |
| #tts-rate { flex: 1; max-width: 100px; accent-color: var(--primary); } |
|
|
| .reader-toc { |
| position: fixed; |
| top: 0; |
| right: 0; |
| width: 280px; |
| height: 100%; |
| background: var(--bg-card); |
| border-left: 1px solid var(--border); |
| z-index: 200; |
| display: flex; |
| flex-direction: column; |
| box-shadow: var(--shadow-lg); |
| transform: translateX(0); |
| transition: transform var(--transition); |
| } |
| .reader-toc.hidden { transform: translateX(100%); display: flex !important; } |
|
|
| .toc-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 16px; |
| border-bottom: 1px solid var(--border); |
| font-weight: 600; |
| } |
| .toc-list { flex: 1; overflow-y: auto; padding: 8px; } |
| .toc-item { |
| display: block; |
| padding: 8px 12px; |
| font-size: 14px; |
| color: var(--text); |
| text-decoration: none; |
| border-radius: var(--radius-sm); |
| cursor: pointer; |
| transition: background var(--transition); |
| } |
| .toc-item:hover { background: var(--bg-input); } |
| .toc-item.active { color: var(--primary); font-weight: 600; } |
|
|
| .toast { |
| position: fixed; |
| bottom: 32px; |
| left: 50%; |
| transform: translateX(-50%); |
| background: var(--text); |
| color: var(--bg); |
| padding: 12px 24px; |
| border-radius: 24px; |
| font-size: 14px; |
| z-index: 2000; |
| box-shadow: var(--shadow-lg); |
| transition: opacity 0.3s; |
| } |
| .toast.hidden { opacity: 0; pointer-events: none; } |
|
|
| .hidden { display: none !important; } |
| .error-msg { color: var(--danger); font-size: 13px; margin-top: 8px; text-align: center; } |
|
|
| |
| .folder-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); |
| gap: 20px; |
| padding: 26px; |
| } |
|
|
| .folder-card { |
| position: relative; |
| background: var(--bg-card); |
| border: 1.5px solid var(--border); |
| border-radius: 16px; |
| padding: 20px; |
| cursor: pointer; |
| transition: all var(--transition); |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| box-shadow: var(--shadow); |
| } |
|
|
| .folder-card:hover, .folder-card.active { |
| border-color: var(--primary); |
| background: var(--bg-input); |
| transform: translateY(-3px); |
| box-shadow: var(--shadow-lg); |
| } |
|
|
| .folder-card-icon { |
| font-size: 36px; |
| line-height: 1; |
| flex-shrink: 0; |
| } |
|
|
| .folder-card-info { |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
|
|
| .folder-card-name { |
| font-size: 16px; |
| font-weight: 700; |
| color: var(--text); |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .folder-card-count { |
| font-size: 12px; |
| color: var(--text-muted); |
| margin-top: 3px; |
| } |
|
|
| .folder-delete-btn { |
| position: absolute; |
| top: 6px; |
| right: 6px; |
| width: 22px; |
| height: 22px; |
| border: 1px solid var(--border); |
| border-radius: 50%; |
| background: var(--bg-card); |
| color: var(--text-muted); |
| font-size: 12px; |
| line-height: 1; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 0; |
| z-index: 2; |
| transition: all 0.15s; |
| } |
| .folder-delete-btn:hover { |
| background: var(--danger, #e74c3c); |
| border-color: var(--danger, #e74c3c); |
| color: #fff; |
| } |
|
|
| |
| .dict-popover { |
| position: fixed; |
| z-index: 1500; |
| background: var(--bg-modal); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| box-shadow: var(--shadow-lg); |
| min-width: 200px; |
| max-width: 360px; |
| padding: 12px 16px; |
| transition: opacity 0.15s; |
| } |
| .dict-popover.hidden { display: none !important; } |
| .dict-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 8px; |
| } |
| .dict-word { |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--primary); |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| max-width: 80%; |
| } |
| .dict-result { |
| font-size: 14px; |
| line-height: 1.6; |
| color: var(--text); |
| word-break: break-word; |
| } |
|
|
| |
| @media (max-width: 600px) { |
| .topbar-left { |
| display: none !important; |
| } |
| .topbar { |
| padding: 10px 14px; |
| gap: 12px; |
| } |
| .topbar-search { |
| flex: 1; |
| max-width: 130px; |
| } |
| .search-input { |
| padding: 6px 12px; |
| font-size: 13px; |
| } |
| .topbar-right { |
| flex: 1; |
| display: flex; |
| justify-content: flex-end; |
| gap: 4px; |
| } |
| .btn-icon, .btn-icon-3d { |
| font-size: 17px !important; |
| padding: 2px !important; |
| } |
| .book-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; } |
| .folder-grid { |
| grid-template-columns: repeat(2, 1fr); |
| padding: 16px; |
| gap: 12px; |
| } |
| .folder-card { |
| padding: 14px; |
| gap: 10px; |
| border-radius: 12px; |
| } |
| .folder-card-name { font-size: 13px; } |
| .folder-card-count { font-size: 11px; } |
| .modal-card { padding: 24px 20px; } |
| .reader-content { padding: 20px 14px; } |
| .detail-body { flex-direction: column; } |
| .detail-cover { width: 100px; height: 140px; } |
| } |
|
|
| @media (max-width: 400px) { |
| .book-grid { grid-template-columns: repeat(2, 1fr); } |
| .folder-grid { grid-template-columns: 1fr; } |
| } |
|
|
| |
| .recent-scroll { |
| display: flex; |
| gap: 12px; |
| overflow-x: auto; |
| padding-bottom: 12px; |
| scrollbar-width: none; |
| } |
| .recent-scroll::-webkit-scrollbar { display: none; } |
|
|
| .recent-card { |
| flex: 0 0 100px; |
| cursor: pointer; |
| text-align: center; |
| transition: transform 0.15s; |
| } |
| .recent-card:hover { transform: translateY(-3px); } |
|
|
| .recent-card .book-cover { |
| width: 100px; |
| height: 136px; |
| border-radius: 6px; |
| overflow: hidden; |
| background: var(--bg-card); |
| box-shadow: var(--shadow); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 36px; |
| } |
| .recent-card .book-cover img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
| .recent-card .recent-title { |
| font-size: 11px; |
| color: var(--text); |
| margin-top: 6px; |
| line-height: 1.3; |
| overflow: hidden; |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| } |
| .recent-card .recent-time { |
| font-size: 10px; |
| color: var(--text-muted); |
| margin-top: 2px; |
| } |
|
|
| #section-recent.hidden { display: none; } |
|
|
| .folder-ctx-menu { |
| animation: fadeIn 0.15s ease; |
| } |
| .folder-ctx-menu .ctx-menu-item { |
| padding: 10px 16px; |
| cursor: pointer; |
| font-size: 14px; |
| transition: background 0.15s; |
| } |
| .folder-ctx-menu .ctx-menu-item:hover { background: var(--bg-hover); } |
| .folder-ctx-menu .ctx-menu-danger { color: #e74c3c; } |
|
|
| |
| #section-ocr-zone { display: block; } |
|
|
| |
| .ocr-drawer { position: fixed; inset: 0; z-index: 1200; pointer-events: none; } |
| .ocr-drawer:not(.hidden) { pointer-events: auto; } |
| .ocr-drawer-overlay { |
| position: absolute; inset: 0; |
| background: rgba(0,0,0,0.35); |
| opacity: 0; |
| transition: opacity 0.25s ease; |
| } |
| .ocr-drawer:not(.hidden) .ocr-drawer-overlay { opacity: 1; } |
| .ocr-drawer-panel { |
| position: absolute; |
| top: 0; right: 0; bottom: 0; |
| width: 380px; |
| max-width: 96vw; |
| background: var(--bg-card); |
| box-shadow: var(--shadow-lg); |
| display: flex; |
| flex-direction: column; |
| transform: translateX(100%); |
| transition: transform 0.28s cubic-bezier(.4,0,.2,1); |
| } |
| .ocr-drawer:not(.hidden) .ocr-drawer-panel { transform: translateX(0); } |
| .ocr-drawer-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 16px 18px; |
| border-bottom: 1px solid var(--border); |
| flex-shrink: 0; |
| } |
| .ocr-drawer-title { font-size: 16px; font-weight: 700; color: var(--text); } |
|
|
| |
| .ocr-tabs { |
| display: flex; |
| border-bottom: 1px solid var(--border); |
| flex-shrink: 0; |
| } |
| .ocr-tab { |
| flex: 1; |
| padding: 10px 4px; |
| font-size: 13px; |
| font-weight: 500; |
| background: transparent; |
| border: none; |
| border-bottom: 2px solid transparent; |
| color: var(--text-muted); |
| cursor: pointer; |
| transition: color 0.15s, border-color 0.15s; |
| } |
| .ocr-tab.active { |
| color: var(--primary); |
| border-bottom-color: var(--primary); |
| } |
| .ocr-tab-content { flex: 1; overflow-y: auto; padding: 12px; } |
| .ocr-tab-content.hidden { display: none; } |
|
|
| |
| .ocr-task-list { display: flex; flex-direction: column; gap: 10px; } |
| .ocr-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 40px 0; } |
| .ocr-task-card { |
| background: var(--bg-input); |
| border-radius: var(--radius-sm); |
| padding: 12px 14px; |
| border: 1px solid var(--border); |
| } |
| .ocr-task-title { |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--text); |
| margin-bottom: 6px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| .ocr-task-meta { |
| font-size: 11px; |
| color: var(--text-muted); |
| margin-bottom: 8px; |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
| .ocr-task-status { |
| display: inline-block; |
| padding: 1px 7px; |
| border-radius: 10px; |
| font-size: 11px; |
| font-weight: 600; |
| } |
| .ocr-status-queued { background: #fff3cd; color: #856404; } |
| .ocr-status-running { background: #cce5ff; color: #004085; } |
| .ocr-status-done { background: #d4edda; color: #155724; } |
| .ocr-status-failed { background: #f8d7da; color: #721c24; } |
| .ocr-status-cancelled { background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border); } |
| .ocr-progress-bar { |
| height: 5px; |
| background: var(--border); |
| border-radius: 3px; |
| overflow: hidden; |
| margin: 6px 0; |
| } |
| .ocr-progress-fill { |
| height: 100%; |
| background: var(--primary); |
| border-radius: 3px; |
| transition: width 0.4s ease; |
| } |
| .ocr-task-actions { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; } |
| .ocr-task-actions .btn-sm { font-size: 11px; padding: 3px 10px; } |
|
|
| |
| .ocr-config-form { display: flex; flex-direction: column; gap: 14px; } |
|
|
| |
| @media (max-width: 600px) { |
| .ocr-drawer-panel { width: 100vw; } |
| } |
|
|
