george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-04-05 17:33:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

added device-dependent dark mode

Browse Source
This commit is contained in:
George Powell
2026-02-26 07:27:30 -05:00
parent ad1774e6b0
commit 592fa917cd
11 changed files with 102 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/lib/components/SearchInput.svelte
View File

@@ -127,21 +127,17 @@
</script>
{#if showBanner}
<div
class="mb-3 flex items-center gap-2 px-4 py-2 rounded-full text-xs font-medium border w-fit transition-all duration-300
{bannerIsIndigo
? 'bg-indigo-50 border-indigo-200 text-indigo-700'
: 'bg-amber-50 border-amber-200 text-amber-700'}"
<p
class="mb-3 text-xs font-medium text-gray-500 dark:text-gray-400"
role="status"
aria-live="polite"
>
<span aria-hidden="true" class="text-[10px] leading-none">✦</span>
{#if bannerIsIndigo}
Testament &amp; section groups now visible
{:else}
Old &amp; New Testament groups now visible
{/if}
</div>
</p>
{/if}
<div class="relative">
@@ -164,13 +160,13 @@
<input
bind:value={searchQuery}
placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
class="w-full pl-12 sm:pl-16 p-4 sm:p-6 border-2 border-gray-500 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-600 focus:ring-4 focus:ring-blue-200 transition-all bg-white"
class="w-full pl-12 sm:pl-16 p-4 sm:p-6 border-2 border-gray-500 dark:border-gray-600 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900/50 transition-all bg-white dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
onkeydown={handleKeydown}
autocomplete="off"
/>
{#if searchQuery}
<button
class="absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
class="absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
onclick={() => (searchQuery = "")}
aria-label="Clear search"
>
@@ -195,7 +191,7 @@
{#if searchQuery && filteredBooks.length > 0}
<ul
class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white border border-gray-300 rounded-2xl shadow-xl"
class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-2xl shadow-xl"
role="listbox"
>
{#if displayMode === "simple"}
@@ -210,8 +206,8 @@
tabindex={guessedIds.has(book.id) ? -1 : 0}
>
<span
class="font-semibold {guessedIds.has(book.id)
? 'line-through text-gray-400'
class="font-semibold dark:text-gray-100 {guessedIds.has(book.id)
? 'line-through text-gray-400 dark:text-gray-500'
: ''}"
>
{book.name}
@@ -223,29 +219,29 @@
{#each testamentGroups as group (group.testament)}
<li role="presentation">
<div
class="px-5 py-2 flex items-center gap-3 bg-gray-50 border-b border-gray-100"
class="px-5 py-2 flex items-center gap-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700"
>
<span
class="text-xs font-semibold uppercase tracking-wider text-gray-400"
class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-400"
>
{group.label}
</span>
<div class="flex-1 h-px bg-gray-200"></div>
<div class="flex-1 h-px bg-gray-200 dark:bg-gray-600"></div>
</div>
<ul>
{#each group.books as book (book.id)}
<li role="option" aria-selected={guessedIds.has(book.id)}>
<button
class="w-full px-5 py-4 text-left border-b border-gray-100 last:border-b-0 flex items-center transition-all
class="w-full px-5 py-4 text-left border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-center transition-all dark:text-gray-200
{guessedIds.has(book.id)
? 'opacity-50 cursor-not-allowed pointer-events-none'
: 'hover:bg-blue-50 hover:text-blue-700'}"
: 'hover:bg-blue-50 dark:hover:bg-blue-900/40 hover:text-blue-700 dark:hover:text-blue-300'}"
onclick={() => submitGuess(book.id)}
tabindex={guessedIds.has(book.id) ? -1 : 0}
>
<span
class="font-semibold {guessedIds.has(book.id)
? 'line-through text-gray-400'
? 'line-through text-gray-400 dark:text-gray-500'
: ''}"
>
{book.name}
@@ -261,40 +257,40 @@
<li role="presentation">
{#if group.showTestamentHeader}
<div
class="px-5 pt-3 pb-1 flex items-center gap-3 bg-gray-50 border-b border-gray-100"
class="px-5 pt-3 pb-1 flex items-center gap-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700"
>
<span
class="text-xs font-bold uppercase tracking-wider text-gray-500"
class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400"
>
{group.testamentLabel}
</span>
<div class="flex-1 h-px bg-gray-200"></div>
<div class="flex-1 h-px bg-gray-200 dark:bg-gray-600"></div>
</div>
{/if}
<div
class="px-7 py-1.5 flex items-center gap-3 bg-gray-50/50 border-b border-gray-100"
class="px-7 py-1.5 flex items-center gap-3 bg-gray-50/50 dark:bg-gray-700/30 border-b border-gray-100 dark:border-gray-700"
>
<span
class="text-[11px] font-medium uppercase tracking-wider text-gray-400"
class="text-[11px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500"
>
{group.section}
</span>
<div class="flex-1 h-px bg-gray-100"></div>
<div class="flex-1 h-px bg-gray-100 dark:bg-gray-600"></div>
</div>
<ul>
{#each group.books as book (book.id)}
<li role="option" aria-selected={guessedIds.has(book.id)}>
<button
class="w-full px-5 py-4 text-left border-b border-gray-100 last:border-b-0 flex items-center transition-all
class="w-full px-5 py-4 text-left border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-center transition-all dark:text-gray-200
{guessedIds.has(book.id)
? 'opacity-50 cursor-not-allowed pointer-events-none'
: 'hover:bg-blue-50 hover:text-blue-700'}"
: 'hover:bg-blue-50 dark:hover:bg-blue-900/40 hover:text-blue-700 dark:hover:text-blue-300'}"
onclick={() => submitGuess(book.id)}
tabindex={guessedIds.has(book.id) ? -1 : 0}
>
<span
class="font-semibold {guessedIds.has(book.id)
? 'line-through text-gray-400'
? 'line-through text-gray-400 dark:text-gray-500'
: ''}"
>
{book.name}
@@ -308,6 +304,6 @@
{/if}
</ul>
{:else if searchQuery}
<p class="mt-4 text-center text-gray-500 p-8">No books found</p>
<p class="mt-4 text-center text-gray-500 dark:text-gray-400 p-8">No books found</p>
{/if}
</div>