:root { --bg: #14171c; --bg-panel: #1c2027; --bg-hover: #262b34; --border: #2e333d; --text: #e4e6eb; --text-dim: #9aa1ac; --accent: #3d8bfd; --accent-hover: #5a9cfd; --danger: #e05260; --radius: 6px; } /* 亮色主題：靠這個屬性切換，見 js/nav.js 的 🌙 按鈕跟每個頁面裡那段防閃爍的 inline script（在 CSS 生效前就把屬性設好，換頁/重新整理不會閃一下錯的主題）。 */ :root[data-theme="light"] { --bg: #f4f5f7; --bg-panel: #ffffff; --bg-hover: #eceef2; --border: #dde1e7; --text: #1b1e24; --text-dim: #6b7280; --accent: #2f6fe0; --accent-hover: #1f5bc4; --danger: #d1394a; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; min-height: 100vh; } /* 需要登入才能看的頁面（除了 login.html 以外全部）在上面加這個 class。這些頁面的 HTML 一開始就整段在，js/api.js 的 requireLogin() 要先打一次 /api/me 確認有沒有登入才知道要不要導去 /login.html——在那個結果回來之前,瀏覽器已經把整頁畫面（含搜尋框等內容）畫出來了,沒登入的人會先看到一瞬間的畫面才被導走（2026-08-29 使用者回報）。用 visibility:hidden 先把內容藏起來,requireLogin() 確認登入成功後才加上 .authed 讓畫面出現;確認失敗的話本來就會馬上導頁離開,不需要特別解除隱藏。 */ body.requires-auth:not(.authed) > * { visibility: hidden; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } nav.topbar { display: flex; align-items: center; gap: 20px; padding: 10px 20px; background: var(--bg-panel); border-bottom: 1px solid var(--border); position: relative; } nav.topbar .brand { font-weight: 700; font-size: 1.1rem; margin-right: auto; color: var(--text); text-decoration: none; flex-shrink: 0; } nav.topbar .brand:hover { color: var(--accent); } nav.topbar a, nav.topbar button.link { color: var(--text-dim); background: none; border: none; font: inherit; cursor: pointer; padding: 4px 2px; white-space: nowrap; } nav.topbar a.active, nav.topbar a:hover, nav.topbar button.link:hover { color: var(--accent); } /* 手機版導覽選單：連結一多（家人帳號最多看到 2 項，管理員最多到 8 項）擠不進一行時，原本靠 flex-wrap 自然換行會疊成三行、很亂（2026-08-29 使用者截圖回報）。改成漢堡選單，窄螢幕下 .nav-links 預設收起來，點 ☰ 才展開成下拉面板；桌面版兩者行為不變（☰ 隱藏, .nav-links 照舊排成一行）。 */ .nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px 8px; flex-shrink: 0; } .nav-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } @media (max-width: 720px) { .nav-toggle { display: block; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--bg-panel); border-bottom: 1px solid var(--border); padding: 10px 20px 14px; z-index: 30; } .nav-links.open { display: flex; } } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .search-bar { display: flex; gap: 8px; margin-bottom: 20px; } .search-bar input[type="text"] { flex: 1; } input, select, textarea { background: var(--bg-panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 8px 10px; font: inherit; } input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); } button { background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 8px 16px; font: inherit; cursor: pointer; } button:hover { background: var(--accent-hover); } button:disabled { background: var(--border); color: var(--text-dim); cursor: not-allowed; } button.secondary { background: var(--bg-hover); color: var(--text); } button.secondary:hover { background: var(--border); } a.secondary { display: inline-block; background: var(--bg-hover); color: var(--text); border-radius: var(--radius); padding: 8px 16px; } a.secondary:hover { background: var(--border); color: var(--text); } button.danger { background: var(--danger); } button.danger:hover { background: #f16a77; } /* 先固定五本一列給使用者看排版（2026-08-29 要求），手機/平板寬度用 media query 降欄數，不然五欄硬擠在窄螢幕上每張卡片會小到看不清楚封面。 */ .gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } @media (max-width: 1000px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } .gallery-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; position: relative; } .gallery-card a.cover-link { display: block; } .gallery-card img.cover { width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; background: var(--bg-hover); display: block; } .gallery-card .info { padding: 8px 10px; } .gallery-card .title { font-size: 0.88rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gallery-card .meta { color: var(--text-dim); font-size: 0.78rem; margin-top: 4px; } .gallery-card .fav-btn { position: absolute; top: 6px; right: 6px; background: rgba(20, 23, 28, 0.75); border: none; border-radius: 50%; width: 30px; height: 30px; padding: 0; font-size: 1rem; line-height: 1; } .gallery-card .fav-btn.active { color: #ffb648; } .gallery-card .uncensored-badge { position: absolute; top: 6px; left: 6px; background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; line-height: 1.4; } /* 跟上面 .uncensored-badge 同一套視覺，但這個是排版裡的 inline 元素（例如閱讀器 metaText 那一行跟作者/角色排在一起），不是疊在封面圖上的絕對定位徽章——首頁書卡維持封面角落的徽章做法不變，這個只用在閱讀器（2026-08-29 使用者確認兩邊要分開處理）。 */ .tag-badge { display: inline-block; background: var(--danger); color: #fff; font-size: 0.68rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; vertical-align: middle; margin-right: 6px; } .empty-state { color: var(--text-dim); text-align: center; padding: 60px 20px; } .load-more-row { text-align: center; margin-top: 24px; } .pagination-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; } .pagination-row span { color: var(--text-dim); font-size: 0.9rem; } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-box { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; width: 320px; display: flex; flex-direction: column; gap: 12px; } .login-box h1 { margin: 0 0 8px; font-size: 1.3rem; text-align: center; } .error-text { color: var(--danger); font-size: 0.85rem; min-height: 1.2em; } .reader-shell { display: flex; flex-direction: column; align-items: center; padding: 12px 12px 80px; } /* height:auto 是關鍵：pageImg 的 width/height 屬性是 reader.js 設的原始像素尺寸（給 reader 在圖片載入前先保留版面高度用），max-width:100% 只會縮寬度，高度預設仍卡在原始像素值, 在窄螢幕上會變成寬度被縮小、高度沒跟著縮、圖片被硬生生拉直的畸形版面。 */ .reader-page-img { max-width: 100%; height: auto; display: block; margin: 0 auto; background: var(--bg-hover); } /* 手機版閱讀介面：頂列只留「返回／標題／頁碼／選單」，上一頁/下一頁改成疊在圖片左右兩側的點擊區（手機翻頁常見的手勢），不再塞好幾個文字按鈕進同一列——窄螢幕下按鈕文字擠壓時，中文沒有空白可以斷行，會逐字往下疊成一直行，非常難用（2026-08-29 使用者截圖回報)。 */ .reader-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-panel); border-bottom: 1px solid var(--border); width: 100%; } .rt-back { flex-shrink: 0; font-size: 1.2rem; padding: 4px 6px; line-height: 1; } .rt-title { flex: 1; min-width: 0; } .rt-title-main { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-title-meta { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; } .rt-title-meta a { font-size: inherit; } .rt-page-indicator { flex-shrink: 0; background: var(--bg-hover); color: var(--text); border: none; border-radius: var(--radius); padding: 6px 10px; font: inherit; white-space: nowrap; } .rt-icon-btn { flex-shrink: 0; width: 34px; height: 34px; padding: 0; border-radius: var(--radius); font-size: 1rem; line-height: 1; } .reader-page-wrap { position: relative; max-width: 100%; } .reader-nav-zone { position: absolute; top: 0; bottom: 0; width: 42%; background: transparent; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; color: var(--text); } .reader-nav-zone:hover { background: rgba(255, 255, 255, 0.03); } /* 全站共用的 `button:disabled { background: var(--border); }`（見上面）比這裡的 .reader-nav-zone 選擇器更精確（多一個 :disabled），會蓋掉 transparent，導致翻到第一頁時左側 42% 的點擊區被一塊灰底整個蓋住（2026-08-29 使用者截圖回報）。這裡明講 background:transparent 才能贏過那條規則。 */ .reader-nav-zone:disabled { cursor: default; background: transparent; } .reader-nav-zone:disabled:hover { background: transparent; } .reader-nav-prev { left: 0; justify-content: flex-start; } .reader-nav-next { right: 0; justify-content: flex-end; } .reader-nav-zone span { opacity: 0.45; font-size: 1.8rem; background: rgba(20, 23, 28, 0.55); border-radius: 999px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin: 0 6px; } .reader-nav-zone:disabled span { opacity: 0.15; } table.admin-table { width: 100%; border-collapse: collapse; } table.admin-table th, table.admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.9rem; } table.admin-table th { color: var(--text-dim); font-weight: 600; } /* 現有帳號表：欄位標題（顯示名稱／權限／建立時間）在窄螢幕被平均分配到很小的寬度時，中文沒有空白可斷行,會逐字往下疊成一長條（2026-08-29 使用者截圖回報）。nowrap 讓每欄保持原本寬度不被硬壓縮,外層的 overflow-x:auto 容器接住,真的放不下就整張表橫向捲動, 而不是把文字拆得亂七八糟。窄螢幕再乾脆把「建立時間」欄整個藏起來（使用者建議）—— 那欄資訊最不常用,先讓其他欄有位置喘息。 */ table.users-table th, table.users-table td { white-space: nowrap; } @media (max-width: 640px) { table.users-table th.col-created, table.users-table td.col-created { display: none; } } /* 紀錄類表格共用（上傳紀錄／閱覽日誌）：固定欄寬（table-layout:fixed）才能讓書名欄溢出時穩定顯示 ...，時間／帳號名這兩欄改成不換行，避免「測試管理員」這種名字被書名欄擠壓、逐字往下疊成兩行（2026-08-29 使用者截圖回報）。時間欄本身用
手動斷成日期／時間兩行，跟這裡的 nowrap 不衝突——
換行不受 white-space:nowrap 影響。 */ table.log-table { table-layout: fixed; } table.log-table th:nth-child(1), table.log-table td:nth-child(1), table.log-table th:nth-child(2), table.log-table td:nth-child(2) { white-space: nowrap; } table.log-table td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 上傳紀錄多一欄頁數，閱覽日誌沒有——只有這欄是 upload-log-table 專屬。 */ table.upload-log-table th:nth-child(4), table.upload-log-table td:nth-child(4) { white-space: nowrap; } .form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .form-row label { font-size: 0.85rem; color: var(--text-dim); } .progress-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .progress-bar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.15s; } .upload-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.85rem; color: var(--text-dim); } .upload-item.done { color: #6fce8b; } .upload-item.error { color: var(--danger); } .review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin: 16px 0; } .review-thumb { position: relative; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .review-thumb img { width: 100%; height: auto; display: block; background: var(--bg-hover); } .review-thumb .review-page-no { position: absolute; left: 4px; bottom: 4px; background: rgba(20, 23, 28, 0.75); color: var(--text); font-size: 0.72rem; padding: 1px 6px; border-radius: 999px; } .review-thumb .review-remove-btn { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: rgba(224, 82, 96, 0.9); font-size: 0.95rem; line-height: 1; } .review-thumb .review-remove-btn:hover { background: var(--danger); } .review-actions { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 12px 0; background: var(--bg); } /* 編輯漫畫頁面的篩選列：四個輸入框 + 搜尋按鈕全部擠在同一列，寧可讓輸入框一起等比例縮窄、縮到底再讓整列橫向捲動，也不要讓 flex-wrap 把搜尋按鈕自己擠到下一行去（使用者明確要求搜尋鍵不要換行,見 2026-08-29 的討論）。 */ .filter-row { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 2px; } .filter-row input, .filter-row select { flex: 1 1 140px; min-width: 120px; } .filter-row button { flex-shrink: 0; } .manage-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); } .manage-row .manage-thumb { flex-shrink: 0; width: 32px; height: 44px; object-fit: cover; border-radius: 4px; background: var(--bg-hover); } .manage-row .manage-info { flex: 1; min-width: 0; } .manage-row .manage-title { font-weight: 600; } .manage-row .manage-meta { color: var(--text-dim); font-size: 0.82rem; margin-top: 2px; } .manage-row .gear-btn { background: var(--bg-hover); border: none; border-radius: var(--radius); width: 36px; height: 36px; font-size: 1.1rem; line-height: 1; flex-shrink: 0; } .manage-row .gear-btn:hover { background: var(--border); } .manage-row .gear-btn-danger:hover { background: var(--danger); } .tag-pill { display: inline-block; background: var(--bg-hover); border-radius: 999px; padding: 2px 10px; font-size: 0.78rem; color: var(--text-dim); margin: 2px 4px 2px 0; }