diff options
| author | Adam Malczewski <[email protected]> | 2026-04-10 01:17:28 +0900 |
|---|---|---|
| committer | Adam Malczewski <[email protected]> | 2026-04-10 01:17:28 +0900 |
| commit | 391279ebbf632896e04c214a627ebc53ca0a16ae (patch) | |
| tree | 7e9eba0bfa592378a215ac0c1f2b18cd95a4b8dd | |
| parent | 5d610bcad55c5d908a4ae046390124b5f5174762 (diff) | |
| download | flashair-speedsync-391279ebbf632896e04c214a627ebc53ca0a16ae.tar.gz flashair-speedsync-391279ebbf632896e04c214a627ebc53ca0a16ae.zip | |
styling cleanup
| -rw-r--r-- | src/App.svelte | 9 | ||||
| -rw-r--r-- | src/lib/components/CachedThumbnail.svelte | 4 | ||||
| -rw-r--r-- | src/lib/components/ImagePreview.svelte | 4 |
3 files changed, 11 insertions, 6 deletions
diff --git a/src/App.svelte b/src/App.svelte index d224306..7a634cc 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -218,9 +218,14 @@ <!-- Right: Image list --> <div class="w-36 lg:w-40 shrink-0 border-l border-base-300 flex flex-col"> - <div class="px-3 py-2 bg-base-100 border-b border-base-300 shrink-0 flex items-center overflow-hidden"> + <div class="px-3 py-2 bg-base-100 border-b border-base-300 shrink-0 flex items-center gap-1.5 overflow-hidden"> <span class="text-xs font-semibold whitespace-nowrap truncate">Photos {cachedCount}/{totalCount > 0 ? totalCount : images.length}</span> - <span class="ml-1.5 shrink-0 status status-secondary" class:status-ping={isAutoCaching}></span> + <span class="relative shrink-0 inline-flex"> + {#if isAutoCaching} + <span class="status status-secondary animate-ping absolute"></span> + {/if} + <span class="status {isAutoCaching ? 'status-secondary' : 'status-neutral'}"></span> + </span> </div> <div class="flex-1 min-h-0"> <ImageList {images} selectedPath={selectedFile?.path} onSelect={selectImage} {newImagePaths} onAnimationDone={handleAnimationDone} /> diff --git a/src/lib/components/CachedThumbnail.svelte b/src/lib/components/CachedThumbnail.svelte index dada22a..3ae7864 100644 --- a/src/lib/components/CachedThumbnail.svelte +++ b/src/lib/components/CachedThumbnail.svelte @@ -81,8 +81,8 @@ /> {#if cachePercent !== undefined && cachePercent < 100} <div class="absolute inset-0 flex items-center justify-center"> - <div class="radial-progress text-primary bg-base-300/60 border-2 border-base-300/60" style:--value={cachePercent} style:--size="2.5rem" style:--thickness="3px" role="progressbar"> - <span class="text-[0.6rem] font-bold text-primary-content drop-shadow">{cachePercent}%</span> + <div class="radial-progress text-primary bg-base-300/70 border-2 border-base-300/40" style:--value={cachePercent} style:--size="2.5rem" style:--thickness="3px" role="progressbar" aria-valuenow={cachePercent}> + <span class="text-[0.6rem] font-bold text-base-content drop-shadow">{cachePercent}%</span> </div> </div> {/if} diff --git a/src/lib/components/ImagePreview.svelte b/src/lib/components/ImagePreview.svelte index 335e231..22b40da 100644 --- a/src/lib/components/ImagePreview.svelte +++ b/src/lib/components/ImagePreview.svelte @@ -453,8 +453,8 @@ </div> {:else} {#if downloading && progress < 1} - <div class="absolute inset-0 z-10 flex items-center justify-center bg-black/50"> - <div class="bg-base-100 rounded-box p-6 shadow-xl max-w-xs w-full mx-4"> + <div class="absolute inset-0 z-10 flex items-center justify-center bg-base-300/80 backdrop-blur-sm"> + <div class="bg-base-100 rounded-box p-4 shadow-xl max-w-xs w-full mx-4"> <div class="flex items-center gap-2"> <progress class="progress progress-primary flex-1" value={progressPercent} max="100"></progress> <span class="text-xs font-mono text-base-content/70 w-10 text-right">{progressPercent}%</span> |