Add in-app updater functionality
This commit is contained in:
Christoph Brandau
+178
@@ -397,6 +397,179 @@
|
||||
color: #f0c070;
|
||||
}
|
||||
|
||||
/* --- Update toast --- */
|
||||
|
||||
.update-toast {
|
||||
position: fixed;
|
||||
right: 18px;
|
||||
bottom: 18px;
|
||||
z-index: 70;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
width: min(430px, calc(100vw - 32px));
|
||||
padding: 14px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(100, 108, 255, 0.42);
|
||||
border-radius: 14px;
|
||||
color: var(--color-ink);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(100,108,255,0.22), rgba(189,52,254,0.12) 42%, rgba(65,209,255,0.08)),
|
||||
rgba(12, 13, 24, 0.96);
|
||||
box-shadow: 0 24px 72px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.04) inset;
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
.update-toast.error {
|
||||
border-color: rgba(232,96,96,0.45);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(232,96,96,0.16), rgba(100,108,255,0.11)),
|
||||
rgba(12, 13, 24, 0.96);
|
||||
}
|
||||
.update-toast.installed {
|
||||
border-color: rgba(78,202,118,0.38);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(78,202,118,0.15), rgba(65,209,255,0.1), rgba(100,108,255,0.12)),
|
||||
rgba(12, 13, 24, 0.96);
|
||||
}
|
||||
|
||||
.update-toast-glow {
|
||||
position: absolute;
|
||||
inset: auto 18px -46px auto;
|
||||
width: 170px;
|
||||
height: 95px;
|
||||
border-radius: 999px;
|
||||
background: rgba(65,209,255,0.18);
|
||||
filter: blur(34px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.update-toast-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid rgba(255,255,255,0.14);
|
||||
border-radius: 12px;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, rgba(65,209,255,0.28), rgba(100,108,255,0.54), rgba(189,52,254,0.42));
|
||||
box-shadow: 0 14px 32px rgba(100,108,255,0.22), inset 0 1px 0 rgba(255,255,255,0.16);
|
||||
}
|
||||
.update-toast-icon.busy { color: #bfefff; }
|
||||
|
||||
.update-toast-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.update-toast-top {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.update-toast-copy { min-width: 0; }
|
||||
.update-toast-kicker {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.update-toast h2 {
|
||||
margin: 2px 0 0;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.update-toast p {
|
||||
margin: 0;
|
||||
color: var(--color-ink-muted);
|
||||
font-size: 12.5px;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.update-toast-close {
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
padding: 0;
|
||||
border-color: rgba(255,255,255,0.1);
|
||||
border-radius: 8px;
|
||||
color: var(--color-ink-dim);
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
.update-toast-close:hover:not(:disabled) {
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
color: #ffffff;
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.update-progress {
|
||||
position: relative;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.09);
|
||||
}
|
||||
.update-progress span {
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
min-width: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #41d1ff, #646cff, #bd34fe);
|
||||
transition: width 160ms ease;
|
||||
}
|
||||
.update-progress.indeterminate span {
|
||||
width: 42% !important;
|
||||
animation: update-progress-slide 1.1s ease-in-out infinite;
|
||||
}
|
||||
.update-progress-label {
|
||||
margin-top: -3px;
|
||||
color: var(--color-ink-faint);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.update-toast-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.update-toast-primary,
|
||||
.update-toast-secondary {
|
||||
min-height: 32px;
|
||||
border-radius: 8px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.update-toast-primary {
|
||||
border-color: rgba(100,108,255,0.72);
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #646cff, #bd34fe);
|
||||
}
|
||||
.update-toast-primary:hover:not(:disabled) {
|
||||
border-color: rgba(65,209,255,0.74);
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #747bff, #c966ff);
|
||||
}
|
||||
.update-toast-secondary {
|
||||
border-color: rgba(255,255,255,0.1);
|
||||
color: var(--color-ink-muted);
|
||||
background: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
/* --- Workspace layout --- */
|
||||
|
||||
.workspace {
|
||||
@@ -1677,6 +1850,11 @@
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@keyframes update-progress-slide {
|
||||
0% { transform: translateX(-120%); }
|
||||
50% { transform: translateX(120%); }
|
||||
100% { transform: translateX(320%); }
|
||||
}
|
||||
|
||||
/* --- Responsive breakpoints --- */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user