george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-04-06 09:53:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

v2.1: stylistic updates & countdown timer

Browse Source
This commit is contained in:
George Powell
2025-12-21 18:24:38 -05:00
parent 0d50ff5f27
commit 5999221b8f
14 changed files with 274 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/components/GuessesTable.svelte
View File

@@ -38,7 +38,10 @@
<tbody>
{#each guesses as guess (guess.book.id)}
<tr
class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
class="border-b border-gray-100 transition-colors {guess
.book.id === correctBookId
? 'bg-green-200 animate-shine'
: 'hover:bg-gray-50'}"
>
<td
class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
@@ -64,3 +67,25 @@
</tbody>
</table>
</div>
<style>
@keyframes shine {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.animate-shine {
background: linear-gradient(
110deg,
#dcffe7 45%,
#f1fff5 50%,
#dcffe7 55%
);
background-size: 200% 100%;
animation: shine 5s infinite;
}
</style>