jozamudi/ani-web
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: loading states, player failure overlay + retry, toasts, back nav, full history page with delete

Browse Source 
Bundle 1-4+7 from PLAN.md: skeleton loaders, player Loading/Buffering/fatal overlay with Retry, action toasts, back-to-home crumb + logo fix, ?history full-history view with per-entry delete (GET /api/history?all=1, DELETE /api/history). 14/14 tests green.
This commit is contained in:
jozamudi committed 2026-08-19 18:20:42 +00:00
1 parent 19e878800c
commit 2ec0f8a034
10 files changed
+414 -20
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

static/style.css
+22
View File
@@ -69,6 +69,28 @@ button:hover { border-color: var(--acc); }
.tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0; }
.tab.active { border-color: var(--acc); color: var(--acc); }
/* loading + feedback */
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skel { aspect-ratio: 2/3; border: 1px solid var(--bd); border-radius: 10px;
background: linear-gradient(90deg, var(--card) 25%, #1f2030 37%, var(--card) 63%);
background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
.pl-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .6rem;
align-items: center; justify-content: center; background: rgba(0, 0, 0, .72);
border-radius: 10px; color: var(--fg); font-size: .95rem; z-index: 1; }
#toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; gap: .4rem; z-index: 9; }
@keyframes toast-in { from { opacity: 0; transform: translateY(.4rem); } }
.toast { background: var(--card); border: 1px solid var(--acc); color: var(--fg);
padding: .45rem .9rem; border-radius: 8px; font-size: .85rem; animation: toast-in .2s ease; }
.crumb { display: inline-block; font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
.crumb:hover { color: var(--acc); }
.sec-head { display: flex; align-items: baseline; gap: .8rem; }
.card.hist { position: relative; cursor: pointer; }
.del { position: absolute; top: .35rem; right: .35rem; width: 1.5rem; height: 1.5rem;
border-radius: 50%; border: 1px solid var(--bd); background: rgba(14, 15, 19, .8);
color: var(--muted); font-size: .9rem; line-height: 1; padding: 0; cursor: pointer; }
.del:hover { border-color: #f87171; color: #f87171; }
.eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.4rem; }
.ep { position: relative; font-size: 0.9rem; }
.ep.active { border-color: var(--acc); color: var(--acc); }