root/gaming-hub
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add: Update-Modal mit Download-Fortschritt in Electron App

Browse source 
- Modal-Overlay statt Banner fuer Update-Benachrichtigung
- 3 Zustaende: Downloading (Ladeanimation), Ready (OK-Button), Error
- IPC-Events: update-available, update-ready, update-error
This commit is contained in:
Daniel 2026-03-07 14:24:59 +01:00
parent feeabe147c
commit c2942737bd
4 changed files with 94 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

65
web/src/styles.css
View file

@ -226,22 +226,61 @@ html, body {
border-radius: 4px;
}
/* ── Update Banner ── */
.hub-update-bar {
/* ── Update Modal ── */
.hub-update-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 8px 16px;
background: rgba(var(--accent-rgb), 0.15);
border-bottom: 1px solid rgba(var(--accent-rgb), 0.3);
font-size: 13px;
font-weight: 500;
color: var(--accent);
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
}
.hub-update-bar button {
padding: 4px 14px;
font-size: 12px;
.hub-update-modal {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 32px 40px;
text-align: center;
min-width: 320px;
max-width: 400px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.hub-update-icon {
font-size: 40px;
margin-bottom: 12px;
}
.hub-update-modal h2 {
margin: 0 0 8px;
font-size: 18px;
color: var(--text-primary);
}
.hub-update-modal p {
margin: 0 0 20px;
font-size: 14px;
color: var(--text-secondary);
}
.hub-update-progress {
height: 4px;
border-radius: 2px;
background: var(--bg-deep);
overflow: hidden;
}
.hub-update-progress-bar {
height: 100%;
width: 40%;
border-radius: 2px;
background: var(--accent);
animation: hub-update-slide 1.5s ease-in-out infinite;
}
@keyframes hub-update-slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
.hub-update-btn {
padding: 8px 32px;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: var(--radius);
@ -250,7 +289,7 @@ html, body {
cursor: pointer;
transition: opacity var(--transition);
}
.hub-update-bar button:hover {
.hub-update-btn:hover {
opacity: 0.85;
}