kamil/libnovel
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 157 Wiki Activity

Replace checkbox inputs with toggle switches in reader settings panel
Some checks failed
CI / Lint (push) Has been cancelled
Details
CI / Test (push) Has been cancelled
Details
CI / Build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Admin
2026-03-02 10:11:31 +05:00
parent 3b905e54fe
commit 2107b6e6b8
1 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
scraper/internal/server/ui.go
View File

@@ -1948,13 +1948,19 @@ const chapterTmpl = `
min="0.5" max="2" step="0.1" value="1"
class="w-full accent-amber-500 cursor-pointer" />
</label>
<label class="flex items-center gap-2 cursor-pointer select-none mb-2.5">
<input id="tts-autoplay" type="checkbox" class="accent-amber-500 cursor-pointer w-4 h-4" />
<label class="flex items-center justify-between gap-3 cursor-pointer select-none mb-2.5">
<span class="text-sm text-zinc-300">Auto-play next chapter</span>
<span class="toggle-switch">
<input id="tts-autoplay" type="checkbox" />
<span class="toggle-track"></span>
</span>
</label>
<label class="flex items-center gap-2 cursor-pointer select-none">
<input id="tts-autoscroll" type="checkbox" checked class="accent-amber-500 cursor-pointer w-4 h-4" />
<label class="flex items-center justify-between gap-3 cursor-pointer select-none">
<span class="text-sm text-zinc-300">Auto-scroll to paragraph</span>
<span class="toggle-switch">
<input id="tts-autoscroll" type="checkbox" checked />
<span class="toggle-track"></span>
</span>
</label>
</div>
@@ -2079,6 +2085,26 @@ const chapterTmpl = `
}
/* Safe-area inset for notched phones */
#mini-player { padding-bottom: env(safe-area-inset-bottom, 0); }
/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 2.25rem; height: 1.25rem; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
position: absolute; inset: 0;
background: #3f3f46; border-radius: 9999px;
transition: background 0.2s;
cursor: pointer;
}
.toggle-track::after {
content: '';
position: absolute; left: 0.2rem; top: 50%; transform: translateY(-50%);
width: 0.85rem; height: 0.85rem;
background: #fff; border-radius: 50%;
transition: left 0.2s;
}
.toggle-switch input:checked + .toggle-track { background: #f59e0b; }
.toggle-switch input:checked + .toggle-track::after { left: calc(100% - 0.2rem - 0.85rem); }
.toggle-switch input:focus-visible + .toggle-track { outline: 2px solid #f59e0b; outline-offset: 2px; }
</style>
<script>