gamezonline/Moku
1
0
Fork 0
mirror of https://github.com/moku-project/Moku.git synced 2026-06-13 09:19:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Re-added Marker-Swatch CSS

Browse Source
This commit is contained in:
Youwes09
2026-04-14 20:55:57 -05:00
parent 10f5936dbd
commit 6d835914ef
1 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/reader/Reader.svelte
+12 -11
View File
@@ -642,8 +642,8 @@
if (style === "double" && pageGroups.length) { advanceGroup(true); return; } if (style === "double" && pageGroups.length) { advanceGroup(true); return; }
if (!store.pageUrls.length) return; if (!store.pageUrls.length) return;
if (store.pageNumber < lastPage) { if (store.pageNumber < lastPage) {
if (style === "fade") { animateFade(() => { store.pageNumber = Math.min(lastPage, store.pageNumber + pageStep); }); } if (style === "fade") { animateFade(() => { store.pageNumber++; }); }
else { store.pageNumber = Math.min(lastPage, store.pageNumber + pageStep); } else { store.pageNumber++; }
} else if (adjacent.next) { } else if (adjacent.next) {
maybeMarkCurrentRead(); maybeMarkCurrentRead();
store.pageNumber = 1; store.pageNumber = 1;
@@ -660,13 +660,11 @@
if (style === "double" && pageGroups.length) { advanceGroup(false); return; } if (style === "double" && pageGroups.length) { advanceGroup(false); return; }
if (!store.pageUrls.length) return; if (!store.pageUrls.length) return;
if (store.pageNumber > 1) { if (store.pageNumber > 1) {
if (style === "fade") { animateFade(() => { store.pageNumber = Math.max(1, store.pageNumber - pageStep); }); } if (style === "fade") { animateFade(() => { store.pageNumber--; }); }
else { store.pageNumber = Math.max(1, store.pageNumber - pageStep); } else { store.pageNumber--; }
} else if (adjacent.prev) { startAtLastPage = true; openReader(adjacent.prev, store.activeChapterList); } } else if (adjacent.prev) { startAtLastPage = true; openReader(adjacent.prev, store.activeChapterList); }
} }
const pageStep = $derived(style === "double" ? 2 : 1);
const goNext = $derived(rtl ? goBack : goForward); const goNext = $derived(rtl ? goBack : goForward);
const goPrev = $derived(rtl ? goForward : goBack); const goPrev = $derived(rtl ? goForward : goBack);
@@ -1021,11 +1019,11 @@
<button class="mode-btn" class:active={autoNext} onclick={() => updateSettings({ autoNextChapter: !autoNext })}> <button class="mode-btn" class:active={autoNext} onclick={() => updateSettings({ autoNextChapter: !autoNext })}>
<span class="mode-label">Auto</span> <span class="mode-label">Auto</span>
</button> </button>
{#if !autoNext} {/if}
<button class="mode-btn" class:active={markOnNext} onclick={() => updateSettings({ markReadOnNext: !markOnNext })}> {#if !autoNext}
<span class="mode-label">Mk.Read</span> <button class="mode-btn" class:active={markOnNext} onclick={() => updateSettings({ markReadOnNext: !markOnNext })}>
</button> <span class="mode-label">Mk.Read</span>
{/if} </button>
{/if} {/if}
</div> </div>
@@ -1363,6 +1361,9 @@
.marker-popover { position: absolute; top: calc(100% + 8px); right: 0; width: 240px; background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4); z-index: 100; animation: scaleIn 0.1s ease both; transform-origin: top right; } .marker-popover { position: absolute; top: calc(100% + 8px); right: 0; width: 240px; background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4); z-index: 100; animation: scaleIn 0.1s ease both; transform-origin: top right; }
.marker-pop-header { display: flex; align-items: center; justify-content: space-between; } .marker-pop-header { display: flex; align-items: center; justify-content: space-between; }
.marker-pop-title { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; } .marker-pop-title { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.marker-color-row { display: flex; align-items: center; gap: var(--sp-2); }
.marker-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: none; border: none; cursor: pointer; flex: 1; transition: background var(--t-fast); }
.marker-swatch:hover { background: var(--bg-overlay); }
.swatch-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 0 var(--swatch); transition: box-shadow var(--t-fast), transform var(--t-fast); flex-shrink: 0; } .swatch-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 0 var(--swatch); transition: box-shadow var(--t-fast), transform var(--t-fast); flex-shrink: 0; }
.marker-swatch:hover .swatch-dot { transform: scale(1.15); } .marker-swatch:hover .swatch-dot { transform: scale(1.15); }
.marker-swatch-active .swatch-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch) 30%, transparent); transform: scale(1.1); } .marker-swatch-active .swatch-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch) 30%, transparent); transform: scale(1.1); }