josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update prompt: non-blocking update card with inline download, install and retry states

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-15 11:10:56 +08:00
parent 5c94a7d46a
commit 007e5b5352
2 changed files with 149 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/styles.css
View File

@@ -1857,6 +1857,73 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
:root[data-density="compact"] .list-header { padding: 16px 16px 10px; }
:root[data-density="compact"] .topbar { padding: 11px 18px; }
/* ============================================================================
* UPDATE CARD — non-blocking: offer, downloading, installing, retry
* ========================================================================== */
.update-card {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 455; /* above Service mode and the report sheet, below toasts */
width: min(380px, calc(100vw - 32px));
display: grid;
grid-template-columns: 40px 1fr;
gap: 14px;
padding: 18px 18px 16px;
background: var(--bg-2);
color: var(--text);
border-radius: var(--radius);
box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.25);
opacity: 0;
transform: translateY(16px);
transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1), transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.update-card.is-open { opacity: 1; transform: none; }
.update-card .uc-icon {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 12px;
background: color-mix(in srgb, var(--accent) 16%, var(--bg-2));
color: var(--accent-bright, var(--accent));
}
.update-card .uc-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.update-card[data-phase="downloading"] .uc-icon svg,
.update-card[data-phase="ready"] .uc-icon svg { animation: uc-turn 1.6s linear infinite; }
.update-card[data-phase="error"] .uc-icon { background: color-mix(in srgb, var(--text-dim) 14%, var(--bg-2)); color: var(--text-2); }
.update-card .uc-main { min-width: 0; }
.update-card .uc-title { margin: 1px 0 4px; font-size: 16px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.update-card .uc-body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.update-card .uc-progress { display: none; height: 4px; margin-top: 14px; border-radius: 4px; overflow: hidden; background: var(--bg-3); }
.update-card .uc-progress span { display: block; width: 38%; height: 100%; border-radius: inherit; background: var(--accent); animation: uc-slide 1.3s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.update-card[data-phase="downloading"] .uc-progress,
.update-card[data-phase="ready"] .uc-progress { display: block; }
.update-card[data-phase="ready"] .uc-progress span { width: 100%; animation: none; }
.update-card .uc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.update-card .uc-actions button {
min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
transition: background-color 140ms ease, transform 120ms ease;
}
.update-card .uc-actions button[hidden] { display: none; }
.update-card .uc-actions button:active { transform: scale(0.97); }
.update-card .uc-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.update-card .uc-later { background: transparent; color: var(--text-2); }
.update-card .uc-later:hover { background: var(--bg-3); color: var(--text); }
.update-card .uc-go { background: var(--accent-deep, var(--accent)); color: var(--on-primary, #fff); }
.update-card .uc-go:hover { background: color-mix(in srgb, var(--accent-deep, var(--accent)) 86%, #000); }
@keyframes uc-slide { from { transform: translateX(-100%); } to { transform: translateX(265%); } }
@keyframes uc-turn { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
.update-card { right: 16px; left: 16px; width: auto; bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
.update-card { transition: opacity 120ms linear; transform: none; }
.update-card .uc-icon svg { animation: none !important; }
.update-card .uc-progress span { width: 100%; animation: none; opacity: 0.6; }
}
:root[data-motion="reduced"] .update-card .uc-icon svg,
:root[data-motion="reduced"] .update-card .uc-progress span { animation: none !important; }
/* ============================================================================
* PERFORMANCE MODE — drop expensive paints (grain, blur, big glows)
* ========================================================================== */