mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-13 09:19:56 -05:00
[V1] Attempt on Reader Optimization + Infinite Scroll Glitches
This commit is contained in:
Youwes09
@@ -127,11 +127,13 @@
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.viewerStrip {
|
||||
justify-content: flex-start;
|
||||
padding: var(--sp-4) 0;
|
||||
overflow-anchor: auto; /* browser preserves scroll pos when nodes are added/removed above */
|
||||
}
|
||||
|
||||
/* ── Images ── */
|
||||
@@ -141,10 +143,14 @@
|
||||
}
|
||||
.img.optimizeContrast { image-rendering: -webkit-optimize-contrast; }
|
||||
|
||||
/* Fit modes */
|
||||
/* Fit modes.
|
||||
height: auto on .img is the load-bearing rule: the img element is given
|
||||
height={1000} as a layout hint while the image is loading (prevents reflow).
|
||||
Once the image is fully painted the browser must resolve height from the
|
||||
intrinsic dimensions, not the HTML attribute — `height: auto` enforces that. */
|
||||
.fitWidth { max-width: var(--max-page-width); width: 100%; height: auto; }
|
||||
.fitHeight { max-height: calc(100vh - 80px); width: auto; max-width: 100%; }
|
||||
.fitScreen { max-width: 100%; max-height: calc(100vh - 80px); object-fit: contain; }
|
||||
.fitHeight { max-height: calc(100vh - 80px); width: auto; max-width: 100%; height: auto; }
|
||||
.fitScreen { max-width: 100%; max-height: calc(100vh - 80px); object-fit: contain; height: auto; }
|
||||
.fitOriginal { max-width: none; width: auto; height: auto; }
|
||||
|
||||
/* Longstrip */
|
||||
|
||||
+465
-654
File diff suppressed because it is too large
Load Diff
@@ -1,411 +1,250 @@
|
||||
/* ── Root ────────────────────────────────────────────────────────────────── */
|
||||
.root {
|
||||
display: flex; flex-direction: column; height: 100%;
|
||||
overflow: hidden; animation: fadeIn 0.14s ease both;
|
||||
position: fixed; inset: 0;
|
||||
background: #000;
|
||||
display: flex; flex-direction: column;
|
||||
z-index: var(--z-reader);
|
||||
transform: translateZ(0); will-change: transform;
|
||||
}
|
||||
|
||||
/* ── Header ──────────────────────────────────────────────────────────────── */
|
||||
.header {
|
||||
display: flex; align-items: center; gap: var(--sp-4);
|
||||
padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-6);
|
||||
border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
|
||||
/* ── UI autohide ── */
|
||||
.uiHidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.topbar, .bottombar {
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
color: var(--text-faint); letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase; flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Tab bar ─────────────────────────────────────────────────────────────── */
|
||||
.tabs {
|
||||
display: flex; gap: 2px;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-dim);
|
||||
border-radius: var(--radius-md); padding: 2px;
|
||||
}
|
||||
.tab {
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wide); text-transform: uppercase;
|
||||
padding: 4px 10px; border-radius: var(--radius-sm); border: none;
|
||||
background: none; color: var(--text-faint); cursor: pointer;
|
||||
transition: background var(--t-base), color var(--t-base); white-space: nowrap;
|
||||
}
|
||||
.tab:hover { color: var(--text-muted); }
|
||||
.tabActive {
|
||||
background: var(--accent-muted); color: var(--accent-fg);
|
||||
border: 1px solid var(--accent-dim);
|
||||
}
|
||||
.tabActive:hover { color: var(--accent-fg); }
|
||||
|
||||
/* ── Keyword tab bar area ────────────────────────────────────────────────── */
|
||||
.keywordBar {
|
||||
flex-shrink: 0; display: flex; flex-direction: column;
|
||||
border-bottom: 1px solid var(--border-dim);
|
||||
}
|
||||
|
||||
/* ── Shared search bar ───────────────────────────────────────────────────── */
|
||||
.searchBar {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
background: var(--bg-raised); border: 1px solid var(--border-dim);
|
||||
border-radius: var(--radius-lg); padding: 0 var(--sp-3) 0 var(--sp-2);
|
||||
transition: border-color var(--t-base);
|
||||
margin: var(--sp-3) var(--sp-6);
|
||||
}
|
||||
.searchBar:focus-within { border-color: var(--border-strong); }
|
||||
|
||||
.searchIcon { color: var(--text-faint); flex-shrink: 0; }
|
||||
|
||||
.searchInput {
|
||||
flex: 1; background: none; border: none; outline: none;
|
||||
color: var(--text-primary); font-size: var(--text-sm); padding: 8px 0;
|
||||
}
|
||||
.searchInput::placeholder { color: var(--text-faint); }
|
||||
|
||||
.advancedBtn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 26px; height: 26px; border-radius: var(--radius-sm);
|
||||
background: none; border: 1px solid transparent;
|
||||
color: var(--text-faint); cursor: pointer; flex-shrink: 0;
|
||||
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.advancedBtn:hover { color: var(--text-muted); border-color: var(--border-dim); }
|
||||
.advancedBtnActive {
|
||||
background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg);
|
||||
}
|
||||
|
||||
.searchBtn {
|
||||
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
|
||||
padding: 5px 12px; border-radius: var(--radius-md); flex-shrink: 0;
|
||||
background: var(--accent-muted); color: var(--accent-fg);
|
||||
border: 1px solid var(--accent-dim); cursor: pointer;
|
||||
transition: filter var(--t-base); display: flex; align-items: center; gap: var(--sp-2);
|
||||
}
|
||||
.searchBtn:hover:not(:disabled) { filter: brightness(1.1); }
|
||||
.searchBtn:disabled { opacity: 0.4; cursor: default; }
|
||||
|
||||
.clearSearchBtn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 20px; height: 20px; border-radius: 50%;
|
||||
font-size: 15px; line-height: 1;
|
||||
color: var(--text-faint); background: var(--bg-overlay); border: none;
|
||||
cursor: pointer; flex-shrink: 0; transition: color var(--t-base);
|
||||
}
|
||||
.clearSearchBtn:hover { color: var(--text-muted); }
|
||||
|
||||
/* ── Advanced filter panel ───────────────────────────────────────────────── */
|
||||
.advancedPanel {
|
||||
display: flex; flex-direction: column; gap: var(--sp-3);
|
||||
padding: 0 var(--sp-6) var(--sp-4);
|
||||
animation: fadeIn 0.1s ease both;
|
||||
}
|
||||
|
||||
.advancedHeader { display: flex; align-items: center; justify-content: space-between; }
|
||||
.advancedTitle {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase;
|
||||
}
|
||||
.advancedActions { display: flex; gap: var(--sp-3); }
|
||||
.advancedLink {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wide); color: var(--accent-fg);
|
||||
background: none; border: none; cursor: pointer; padding: 0;
|
||||
transition: opacity var(--t-base);
|
||||
}
|
||||
.advancedLink:hover { opacity: 0.7; }
|
||||
|
||||
.langGrid { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
|
||||
.langFilterRow { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-3) var(--sp-3) 0; }
|
||||
|
||||
.langChip {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wider); padding: 3px 8px;
|
||||
border-radius: var(--radius-sm); border: 1px solid var(--border-dim);
|
||||
background: none; color: var(--text-faint); cursor: pointer;
|
||||
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.langChip:hover { color: var(--text-muted); border-color: var(--border-strong); }
|
||||
.langChipActive {
|
||||
background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg);
|
||||
}
|
||||
|
||||
.advancedDivider { height: 1px; background: var(--border-dim); margin: 0 calc(-1 * var(--sp-6)); }
|
||||
.advancedCheck {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
color: var(--text-muted); cursor: pointer; user-select: none;
|
||||
}
|
||||
.checkbox { accent-color: var(--accent-fg); width: 13px; height: 13px; cursor: pointer; }
|
||||
.advancedFooter {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
color: var(--text-faint); letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
.advancedFooter strong { color: var(--text-muted); font-weight: var(--weight-medium); }
|
||||
|
||||
/* ── Keyword results list ────────────────────────────────────────────────── */
|
||||
.results {
|
||||
flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6);
|
||||
display: flex; flex-direction: column; gap: var(--sp-6);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.sourceSection { display: flex; flex-direction: column; gap: var(--sp-3); }
|
||||
|
||||
.sourceHeader { display: flex; align-items: center; gap: var(--sp-2); }
|
||||
.sourceIcon { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
|
||||
.sourceName { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
|
||||
.sourceLang {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wider); padding: 1px 5px;
|
||||
border: 1px solid var(--border-dim); border-radius: var(--radius-sm);
|
||||
}
|
||||
.resultCount {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
color: var(--text-faint); letter-spacing: var(--tracking-wide); margin-left: auto;
|
||||
}
|
||||
.sourceError { font-size: var(--text-xs); color: var(--color-error); padding: 0 var(--sp-1); }
|
||||
|
||||
.sourceRow {
|
||||
display: flex; gap: var(--sp-3); overflow-x: auto;
|
||||
padding-bottom: var(--sp-2); scrollbar-width: thin;
|
||||
}
|
||||
|
||||
/* ── Shared manga card ───────────────────────────────────────────────────── */
|
||||
.card {
|
||||
flex-shrink: 0; width: 110px;
|
||||
background: none; border: none; padding: 0;
|
||||
cursor: pointer; text-align: left;
|
||||
}
|
||||
.card:hover .cover { filter: brightness(1.06); }
|
||||
|
||||
.coverWrap {
|
||||
position: relative; aspect-ratio: 2/3;
|
||||
border-radius: var(--radius-md); overflow: hidden;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-dim);
|
||||
}
|
||||
.cover { width: 100%; height: 100%; object-fit: cover; transition: filter var(--t-base); }
|
||||
|
||||
.inLibBadge {
|
||||
position: absolute; bottom: var(--sp-1); left: var(--sp-1);
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase; background: var(--accent-muted); color: var(--accent-fg);
|
||||
border: 1px solid var(--accent-dim); padding: 2px 5px; border-radius: var(--radius-sm);
|
||||
}
|
||||
.cardTitle {
|
||||
margin-top: var(--sp-1); font-size: var(--text-xs); color: var(--text-muted);
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||
line-height: var(--leading-snug);
|
||||
}
|
||||
|
||||
/* ── Skeleton cards ──────────────────────────────────────────────────────── */
|
||||
.skCard { flex-shrink: 0; width: 110px; }
|
||||
.skCover { aspect-ratio: 2/3; border-radius: var(--radius-md); width: 100%; }
|
||||
.skTitle { height: 11px; margin-top: var(--sp-1); width: 75%; border-radius: 3px; }
|
||||
|
||||
/* ── Empty state ─────────────────────────────────────────────────────────── */
|
||||
.empty {
|
||||
flex: 1; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; gap: var(--sp-2);
|
||||
padding: var(--sp-6);
|
||||
}
|
||||
.emptyIcon { color: var(--text-faint); }
|
||||
.emptyText { font-size: var(--text-base); color: var(--text-muted); }
|
||||
.emptyHint { font-size: var(--text-sm); color: var(--text-faint); text-align: center; max-width: 280px; }
|
||||
|
||||
.advancedLinkStandalone {
|
||||
/* ── Topbar ── */
|
||||
.topbar {
|
||||
display: flex; align-items: center; gap: var(--sp-1);
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
color: var(--text-faint); background: none; border: none;
|
||||
cursor: pointer; padding: 0; margin-top: var(--sp-1);
|
||||
transition: color var(--t-base);
|
||||
}
|
||||
.advancedLinkStandalone:hover { color: var(--accent-fg); }
|
||||
|
||||
/* ── Split layout (tag + source tabs) ───────────────────────────────────── */
|
||||
.splitRoot { flex: 1; display: flex; overflow: hidden; }
|
||||
|
||||
.splitSidebar {
|
||||
width: 192px; flex-shrink: 0;
|
||||
border-right: 1px solid var(--border-dim);
|
||||
display: flex; flex-direction: column; overflow: hidden;
|
||||
background: var(--bg-raised);
|
||||
padding: 0 var(--sp-3); height: 40px;
|
||||
background: var(--bg-void); border-bottom: 1px solid var(--border-dim);
|
||||
flex-shrink: 0; overflow: visible;
|
||||
position: relative; z-index: 2;
|
||||
}
|
||||
|
||||
.splitSearchWrap {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
padding: var(--sp-3);
|
||||
border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
|
||||
}
|
||||
.splitSearchIcon { color: var(--text-faint); flex-shrink: 0; }
|
||||
.splitSearchInput {
|
||||
flex: 1; background: none; border: none; outline: none;
|
||||
color: var(--text-primary); font-size: var(--text-xs);
|
||||
font-family: var(--font-ui); letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
.splitSearchInput::placeholder { color: var(--text-faint); }
|
||||
|
||||
.splitList {
|
||||
flex: 1; overflow-y: auto; padding: var(--sp-2);
|
||||
display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.splitItem {
|
||||
display: flex; align-items: center; width: 100%;
|
||||
padding: 7px var(--sp-2); border-radius: var(--radius-md);
|
||||
border: none; background: none;
|
||||
color: var(--text-muted); font-size: var(--text-sm);
|
||||
cursor: pointer; text-align: left;
|
||||
transition: background var(--t-fast), color var(--t-fast);
|
||||
}
|
||||
.splitItem:hover { background: var(--bg-overlay); color: var(--text-secondary); }
|
||||
.splitItemActive { background: var(--accent-muted); color: var(--accent-fg); }
|
||||
.splitItemActive:hover { background: var(--accent-muted); color: var(--accent-fg); }
|
||||
|
||||
.splitItemSource { gap: var(--sp-2); }
|
||||
.splitItemLabel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.splitSourceIcon { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
|
||||
|
||||
.splitEmpty {
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
color: var(--text-faint); padding: var(--sp-3) var(--sp-2);
|
||||
}
|
||||
.splitLoading {
|
||||
flex: 1; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
|
||||
/* ── Split right content ─────────────────────────────────────────────────── */
|
||||
.splitContent { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||||
|
||||
.splitContentHeader {
|
||||
display: flex; align-items: center; gap: var(--sp-3);
|
||||
padding: var(--sp-3) var(--sp-5);
|
||||
border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
min-height: 52px;
|
||||
}
|
||||
.splitContentTitle {
|
||||
font-size: var(--text-base); font-weight: var(--weight-medium);
|
||||
color: var(--text-secondary); letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
.splitResultCount {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
color: var(--text-faint); letter-spacing: var(--tracking-wide);
|
||||
margin-left: auto;
|
||||
}
|
||||
.splitSourceTitle {
|
||||
display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0;
|
||||
}
|
||||
.sourceBrowseBar {
|
||||
display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0;
|
||||
}
|
||||
|
||||
/* ── Grid (tag + source results) ─────────────────────────────────────────── */
|
||||
.tagGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 9vw, 120px), 1fr));
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-4) var(--sp-5);
|
||||
overflow-y: auto; flex: 1;
|
||||
align-content: start;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
/* In the grid, cards stretch to fill the column */
|
||||
.tagGrid .card { width: auto; }
|
||||
.tagGrid .skCard { width: auto; }
|
||||
.tagGrid .skCover { width: 100%; }
|
||||
|
||||
/* ── Show more (tag grid & genre drill) ──────────────────────────────────── */
|
||||
.showMoreCell {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--sp-2) 0 var(--sp-4);
|
||||
}
|
||||
|
||||
.showMoreBtn {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
padding: 7px 20px; border-radius: var(--radius-md);
|
||||
background: var(--bg-raised); color: var(--text-muted);
|
||||
border: 1px solid var(--border-dim); cursor: pointer;
|
||||
transition: color var(--t-base), border-color var(--t-base);
|
||||
}
|
||||
.showMoreBtn:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--border-strong); }
|
||||
.showMoreBtn:disabled { opacity: 0.5; cursor: default; }
|
||||
.nsfwBadge {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wide); padding: 1px 5px;
|
||||
border-radius: var(--radius-sm); border: 1px solid var(--border-dim);
|
||||
color: var(--text-faint); flex-shrink: 0;
|
||||
}
|
||||
/* ── Multi-tag bar ───────────────────────────────────────────────────────────── */
|
||||
.tagActiveBar {
|
||||
display: flex; align-items: center; gap: var(--sp-3);
|
||||
padding: var(--sp-2) var(--sp-5);
|
||||
border-bottom: 1px solid var(--border-dim);
|
||||
flex-shrink: 0; flex-wrap: wrap;
|
||||
background: var(--bg-raised);
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.tagPillRow {
|
||||
display: flex; flex-wrap: wrap; gap: var(--sp-1); flex: 1; min-width: 0;
|
||||
}
|
||||
|
||||
.tagPill {
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
padding: 3px 6px 3px 8px; border-radius: var(--radius-sm);
|
||||
background: var(--accent-muted); color: var(--accent-fg);
|
||||
border: 1px solid var(--accent-dim);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tagPillRemove {
|
||||
.iconBtn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 14px; height: 14px; border-radius: 50%;
|
||||
background: none; border: none; cursor: pointer;
|
||||
color: var(--accent-fg); font-size: 13px; line-height: 1;
|
||||
opacity: 0.7; padding: 0; flex-shrink: 0;
|
||||
transition: opacity var(--t-fast);
|
||||
width: 28px; height: 28px; border-radius: var(--radius-sm);
|
||||
color: var(--text-muted); flex-shrink: 0;
|
||||
transition: color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.tagPillRemove:hover { opacity: 1; }
|
||||
.iconBtn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); }
|
||||
.iconBtn:disabled { opacity: 0.2; cursor: default; }
|
||||
|
||||
.tagBarRight {
|
||||
display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0;
|
||||
.chLabel {
|
||||
flex: 1; display: flex; align-items: center; gap: var(--sp-2);
|
||||
font-size: var(--text-sm); color: var(--text-muted);
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.chTitle { color: var(--text-secondary); font-weight: var(--weight-medium); }
|
||||
.chSep { color: var(--text-faint); }
|
||||
|
||||
.pageLabel {
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
color: var(--text-muted); letter-spacing: var(--tracking-wide);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* AND / OR toggle */
|
||||
.tagModeToggle {
|
||||
display: flex; align-items: center;
|
||||
background: var(--bg-overlay); border: 1px solid var(--border-dim);
|
||||
border-radius: var(--radius-sm); padding: 1px; gap: 1px;
|
||||
.topSep {
|
||||
width: 1px; height: 16px;
|
||||
background: var(--border-dim); flex-shrink: 0; margin: 0 var(--sp-1);
|
||||
}
|
||||
.tagModeBtn {
|
||||
|
||||
.modeBtn {
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
padding: 4px var(--sp-2); border-radius: var(--radius-sm);
|
||||
color: var(--text-muted); flex-shrink: 0;
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wider); padding: 3px 8px;
|
||||
border-radius: calc(var(--radius-sm) - 1px);
|
||||
border: none; background: none; color: var(--text-faint);
|
||||
cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
transition: color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.tagModeBtn:hover { color: var(--text-muted); }
|
||||
.tagModeBtnActive {
|
||||
background: var(--accent-muted); color: var(--accent-fg);
|
||||
.modeBtn:hover { color: var(--text-primary); background: var(--bg-raised); }
|
||||
.modeBtnActive { color: var(--accent-fg); background: var(--accent-muted); }
|
||||
.modeBtnActive:hover { color: var(--accent-fg); background: var(--accent-muted); }
|
||||
.modeBtnLabel { text-transform: capitalize; }
|
||||
|
||||
/* ── Zoom ── */
|
||||
.zoomWrap {
|
||||
position: relative; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tagClearAll {
|
||||
.zoomBtn {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wide); color: var(--text-faint);
|
||||
background: none; border: none; cursor: pointer; padding: 3px 0;
|
||||
transition: color var(--t-fast);
|
||||
padding: 4px var(--sp-2); border-radius: var(--radius-sm);
|
||||
min-width: 36px; text-align: center;
|
||||
transition: color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.tagClearAll:hover { color: var(--text-muted); }
|
||||
.zoomBtn:hover { color: var(--text-secondary); background: var(--bg-raised); }
|
||||
|
||||
/* Checkmark on active tag sidebar items */
|
||||
.tagCheckMark {
|
||||
font-size: 10px; margin-left: auto; padding-left: var(--sp-1);
|
||||
color: var(--accent-fg); flex-shrink: 0;
|
||||
}
|
||||
.zoomPopover {
|
||||
position: absolute; top: calc(100% + 6px); left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--bg-raised); border: 1px solid var(--border-base);
|
||||
border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-3) var(--sp-2);
|
||||
display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
||||
z-index: 100; min-width: 160px;
|
||||
animation: scaleIn 0.1s ease both; transform-origin: top center;
|
||||
}
|
||||
|
||||
.zoomSlider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 140px; height: 3px;
|
||||
background: var(--border-strong);
|
||||
border-radius: 2px; outline: none; cursor: pointer;
|
||||
}
|
||||
.zoomSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 12px; height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-fg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.zoomSlider::-moz-range-thumb {
|
||||
width: 12px; height: 12px;
|
||||
border-radius: 50%; border: none;
|
||||
background: var(--accent-fg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zoomResetBtn {
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
color: var(--text-muted); letter-spacing: var(--tracking-wide);
|
||||
padding: 2px var(--sp-2); border-radius: var(--radius-sm);
|
||||
transition: color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.zoomResetBtn:hover { color: var(--text-primary); background: var(--bg-overlay); }
|
||||
|
||||
/* ── Viewer ── */
|
||||
.viewer {
|
||||
flex: 1; overflow-y: auto; overflow-x: hidden;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.viewerStrip {
|
||||
justify-content: flex-start;
|
||||
padding: var(--sp-4) 0;
|
||||
overflow-anchor: auto; /* browser preserves scroll pos when nodes are added/removed above */
|
||||
}
|
||||
|
||||
/* Sentinel must not become a scroll anchor point */
|
||||
.viewerStrip > div:last-child { overflow-anchor: none; }
|
||||
|
||||
/* ── Images ── */
|
||||
.img {
|
||||
display: block; user-select: none;
|
||||
image-rendering: auto;
|
||||
overflow-anchor: auto; /* each image is a valid anchor point */
|
||||
}
|
||||
.img.optimizeContrast { image-rendering: -webkit-optimize-contrast; }
|
||||
|
||||
/* Fit modes */
|
||||
.fitWidth { max-width: var(--max-page-width); width: 100%; height: auto; }
|
||||
.fitHeight { max-height: calc(100vh - 80px); width: auto; max-width: 100%; }
|
||||
.fitScreen { max-width: 100%; max-height: calc(100vh - 80px); object-fit: contain; }
|
||||
.fitOriginal { max-width: none; width: auto; height: auto; }
|
||||
|
||||
/* Longstrip */
|
||||
.stripGap { margin-bottom: 8px; }
|
||||
|
||||
/* ── Double page ── */
|
||||
.doubleWrap {
|
||||
display: flex; align-items: flex-start; justify-content: center;
|
||||
max-width: calc(var(--max-page-width) * 2);
|
||||
width: 100%;
|
||||
}
|
||||
.pageHalf { flex: 1; min-width: 0; object-fit: contain; }
|
||||
.gapLeft { margin-right: 2px; }
|
||||
.gapRight { margin-left: 2px; }
|
||||
|
||||
/* ── Bottom nav ── */
|
||||
.bottombar {
|
||||
display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
|
||||
padding: var(--sp-3); border-top: 1px solid var(--border-dim);
|
||||
background: var(--bg-void); flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navBtn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 34px; height: 34px; border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-strong); color: var(--text-muted);
|
||||
transition: background var(--t-base), color var(--t-base);
|
||||
}
|
||||
.navBtn:hover:not(:disabled) { background: var(--bg-raised); color: var(--text-primary); }
|
||||
.navBtn:disabled { opacity: 0.25; cursor: default; }
|
||||
|
||||
/* ── States ── */
|
||||
.center {
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
position: fixed; inset: 0; background: #000;
|
||||
}
|
||||
.errorMsg { color: var(--color-error); font-size: var(--text-base); }
|
||||
|
||||
/* ── Download modal ── */
|
||||
.dlBackdrop {
|
||||
position: fixed; inset: 0;
|
||||
z-index: calc(var(--z-reader) + 10);
|
||||
display: flex; align-items: flex-start; justify-content: flex-end;
|
||||
padding: 48px var(--sp-4) 0;
|
||||
}
|
||||
|
||||
.dlModal {
|
||||
background: var(--bg-raised); border: 1px solid var(--border-base);
|
||||
border-radius: var(--radius-xl); padding: var(--sp-3);
|
||||
min-width: 210px; display: flex; flex-direction: column; gap: var(--sp-1);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
|
||||
animation: scaleIn 0.12s ease both; transform-origin: top right;
|
||||
}
|
||||
|
||||
.dlTitle {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
color: var(--text-faint); letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase; padding: 2px var(--sp-2) var(--sp-2);
|
||||
border-bottom: 1px solid var(--border-dim); margin-bottom: var(--sp-1);
|
||||
}
|
||||
|
||||
.dlOption {
|
||||
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
|
||||
width: 100%; padding: 7px var(--sp-3); border-radius: var(--radius-md);
|
||||
font-size: var(--text-sm); color: var(--text-secondary);
|
||||
background: none; border: none; cursor: pointer; text-align: left;
|
||||
transition: background var(--t-fast), color var(--t-fast);
|
||||
}
|
||||
.dlOption:hover:not(:disabled) { background: var(--bg-overlay); color: var(--text-primary); }
|
||||
.dlOption:disabled { opacity: 0.3; cursor: default; }
|
||||
|
||||
.dlSub { font-size: var(--text-xs); color: var(--text-faint); }
|
||||
|
||||
.dlRow { display: flex; align-items: center; gap: var(--sp-2); }
|
||||
|
||||
.dlStepper {
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
background: var(--bg-overlay); border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dlStepBtn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 22px; height: 28px;
|
||||
font-size: var(--text-base); color: var(--text-muted);
|
||||
background: none; border: none; cursor: pointer; line-height: 1;
|
||||
transition: color var(--t-fast), background var(--t-fast);
|
||||
}
|
||||
.dlStepBtn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); }
|
||||
.dlStepBtn:disabled { opacity: 0.25; cursor: default; }
|
||||
|
||||
.dlStepVal {
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
color: var(--text-secondary); min-width: 24px; text-align: center;
|
||||
letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
/* Viewer focus — suppress outline since we're handling keys ourselves */
|
||||
.viewer:focus { outline: none; }
|
||||
@@ -459,11 +459,16 @@ interface StorageInfo {
|
||||
path: string;
|
||||
}
|
||||
|
||||
function StorageBar({ used, limit, total }: { used: number; limit: number | null; total: number }) {
|
||||
const cap = limit ?? total;
|
||||
const pctUsed = cap > 0 ? Math.min(100, (used / cap) * 100) : 0;
|
||||
const critical = pctUsed > 90;
|
||||
const warning = pctUsed > 75;
|
||||
function StorageBar({ used, free, limit, total }: { used: number; free: number; limit: number | null; total: number }) {
|
||||
// "Available space" = what's actually usable: already-used manga bytes + free bytes on disk.
|
||||
// We intentionally do NOT use total_bytes (full drive size) as the cap — other apps / OS
|
||||
// overhead eat into that, and it makes our bar look almost empty even when downloads are large.
|
||||
const available = used + free; // usable space relevant to downloads
|
||||
const cap = limit !== null ? Math.min(limit, available) : available;
|
||||
const pctUsed = cap > 0 ? Math.min(100, (used / cap) * 100) : 0;
|
||||
const critical = pctUsed > 90;
|
||||
const warning = pctUsed > 75;
|
||||
const freeInCap = Math.max(0, cap - used);
|
||||
|
||||
return (
|
||||
<div className={s.storageBarWrap}>
|
||||
@@ -475,10 +480,12 @@ function StorageBar({ used, limit, total }: { used: number; limit: number | null
|
||||
</div>
|
||||
<div className={s.storageBarLabels}>
|
||||
<span className={s.storageBarUsed}>{fmtBytes(used)} used</span>
|
||||
<span className={s.storageBarFree}>{fmtBytes(Math.max(0, cap - used))} free</span>
|
||||
<span className={s.storageBarFree}>{fmtBytes(freeInCap)} free</span>
|
||||
</div>
|
||||
{limit !== null && total > 0 && (
|
||||
<p className={s.storageBarNote}>Limit {fmtBytes(limit)} of {fmtBytes(total)} total</p>
|
||||
{limit !== null && (
|
||||
<p className={s.storageBarNote}>
|
||||
Limit {fmtBytes(limit)} · {fmtBytes(free)} free on disk of {fmtBytes(total)} total
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@@ -537,7 +544,7 @@ function StorageTab({ settings, update }: { settings: Settings; update: (p: Part
|
||||
{error && <p className={s.storageLoading} style={{ color: "var(--color-error)" }}>{error}</p>}
|
||||
{!loading && !error && info && (
|
||||
<>
|
||||
<StorageBar used={mangaBytes} limit={limitBytes} total={totalBytes} />
|
||||
<StorageBar used={mangaBytes} free={freeBytes} limit={limitBytes} total={totalBytes} />
|
||||
<div className={s.storageLegend}>
|
||||
<div className={s.storageLegendRow}>
|
||||
<span className={[s.storageDot, s.storageDotManga].join(" ")} />
|
||||
@@ -587,8 +594,8 @@ function StorageTab({ settings, update }: { settings: Settings; update: (p: Part
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{totalBytes > 0 && limitGb !== null && limitBytes !== null && limitBytes > freeBytes && (
|
||||
<p className={s.storageLimitHint}>Limit exceeds available free space ({fmtBytes(freeBytes)})</p>
|
||||
{totalBytes > 0 && limitGb !== null && limitBytes !== null && limitBytes > (freeBytes + mangaBytes) && (
|
||||
<p className={s.storageLimitHint}>Limit exceeds available space ({fmtBytes(freeBytes)} free on disk)</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user