fix: stabilize software updates
This commit is contained in:
admin committed
1 parent
fc59092030
commit
26a960c6bd
25 files changed
+487
-146
No files matched your search
+141
-9
@@ -1,4 +1,32 @@
|
||||
(() => {
|
||||
const localTimeFormatter = new Intl.DateTimeFormat('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
});
|
||||
for (const node of document.querySelectorAll('[data-local-time]')) {
|
||||
const unixTime = Number(node.dataset.localTime || 0);
|
||||
if (!Number.isFinite(unixTime) || unixTime <= 0) continue;
|
||||
node.textContent = localTimeFormatter.format(new Date(unixTime * 1000)).replace(',', ' ·');
|
||||
}
|
||||
|
||||
const updateBanner = document.querySelector('[data-software-update-banner]');
|
||||
if (updateBanner) {
|
||||
const version = updateBanner.dataset.softwareUpdateBanner || 'unknown';
|
||||
const storageKey = 'domain-control:update-banner-seen-version';
|
||||
try {
|
||||
if (window.localStorage.getItem(storageKey) !== version) {
|
||||
window.localStorage.setItem(storageKey, version);
|
||||
window.requestAnimationFrame(() => updateBanner.classList.add('should-animate'));
|
||||
}
|
||||
} catch {
|
||||
// A blocked storage API must not make the banner flicker on every page.
|
||||
}
|
||||
}
|
||||
|
||||
const toast = document.querySelector('[data-toast]');
|
||||
if (toast) {
|
||||
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
@@ -255,22 +283,101 @@
|
||||
const softwareUpdateForms = [...document.querySelectorAll('[data-software-update-form]')];
|
||||
if (softwareUpdateForms.length > 0) {
|
||||
const overlay = document.querySelector('[data-software-update-overlay]');
|
||||
const title = overlay?.querySelector('[data-software-update-title]');
|
||||
const message = overlay?.querySelector('[data-software-update-message]');
|
||||
const progress = overlay?.querySelector('[data-software-update-progress]');
|
||||
const progressTrack = overlay?.querySelector('[data-software-update-progress-track]');
|
||||
const progressLabel = overlay?.querySelector('[data-software-update-progress-label]');
|
||||
const percent = overlay?.querySelector('[data-software-update-percent]');
|
||||
const close = overlay?.querySelector('[data-software-update-close]');
|
||||
const phaseNodes = [...(overlay?.querySelectorAll('[data-update-phase]') || [])];
|
||||
const phaseOrder = ['pulling', 'restarting', 'verifying'];
|
||||
const phasePresentation = {
|
||||
queued: {title: 'Update wird vorbereitet', label: 'Vorbereitung', start: 4, end: 9, timeConstant: 10000},
|
||||
pulling: {title: 'Image wird sicher geladen', label: 'Image-Download', start: 12, end: 42, timeConstant: 22000},
|
||||
restarting: {title: 'Container wird gewechselt', label: 'Containerwechsel', start: 44, end: 51, timeConstant: 6000},
|
||||
reconnecting: {title: 'Verbindung wird aufgebaut', label: 'Neustart', start: 52, end: 57, timeConstant: 15000},
|
||||
verifying: {title: 'Neue Instanz wird geprüft', label: 'Healthcheck', start: 58, end: 98, timeConstant: 35000},
|
||||
complete: {title: 'Update erfolgreich', label: 'Abgeschlossen', start: 100, end: 100, timeConstant: 1},
|
||||
failed: {title: 'Update nicht abgeschlossen', label: 'Angehalten'},
|
||||
};
|
||||
let polling = false;
|
||||
let targetVersion = '';
|
||||
let startedAt = 0;
|
||||
let lastKnownPhase = 'pulling';
|
||||
let currentPhase = '';
|
||||
let phaseStartedAt = 0;
|
||||
let displayedProgress = 0;
|
||||
let progressTimer;
|
||||
const progressTickInterval = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 1000 : 500;
|
||||
|
||||
const setUpdatePhase = (phase, text) => {
|
||||
const formatElapsed = (milliseconds) => {
|
||||
const seconds = Math.max(0, Math.floor(milliseconds / 1000));
|
||||
return `${String(Math.floor(seconds / 60)).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const stopProgressTimer = () => {
|
||||
if (progressTimer) window.clearTimeout(progressTimer);
|
||||
progressTimer = undefined;
|
||||
};
|
||||
|
||||
const renderProgress = (value) => {
|
||||
const bounded = Math.max(0, Math.min(100, value));
|
||||
displayedProgress = Math.max(displayedProgress, bounded);
|
||||
if (progress) progress.style.width = `${displayedProgress.toFixed(2)}%`;
|
||||
if (percent) percent.textContent = `${Math.floor(displayedProgress)}%`;
|
||||
progressTrack?.setAttribute('aria-valuenow', String(Math.floor(displayedProgress)));
|
||||
};
|
||||
|
||||
const phaseTime = (raw) => {
|
||||
const now = Date.now();
|
||||
const parsed = Date.parse(String(raw || ''));
|
||||
if (Number.isFinite(parsed) && parsed >= now - (12 * 60 * 1000) && parsed <= now + 60000) {
|
||||
return Math.min(parsed, now);
|
||||
}
|
||||
return now;
|
||||
};
|
||||
|
||||
const tickProgress = () => {
|
||||
progressTimer = undefined;
|
||||
const presentation = phasePresentation[currentPhase];
|
||||
if (!presentation || typeof presentation.end !== 'number' || presentation.end <= presentation.start) return;
|
||||
const elapsed = Math.max(0, Date.now() - phaseStartedAt);
|
||||
const distance = presentation.end - presentation.start;
|
||||
const next = presentation.start + distance * (1 - Math.exp(-elapsed / presentation.timeConstant));
|
||||
renderProgress(next);
|
||||
if (progressLabel) {
|
||||
progressLabel.textContent = currentPhase === 'verifying' || currentPhase === 'reconnecting'
|
||||
? `${presentation.label} · ${formatElapsed(elapsed)}`
|
||||
: presentation.label;
|
||||
}
|
||||
progressTimer = window.setTimeout(tickProgress, progressTickInterval);
|
||||
};
|
||||
|
||||
const setUpdatePhase = (phase, text, updatedAt = '') => {
|
||||
if (!overlay) return;
|
||||
const phaseChanged = currentPhase !== phase;
|
||||
if (phaseChanged) {
|
||||
currentPhase = phase;
|
||||
phaseStartedAt = phaseTime(updatedAt);
|
||||
stopProgressTimer();
|
||||
} else if (updatedAt) {
|
||||
phaseStartedAt = Math.min(phaseStartedAt, phaseTime(updatedAt));
|
||||
}
|
||||
overlay.dataset.updateState = phase;
|
||||
overlay.setAttribute('aria-busy', String(phase !== 'complete' && phase !== 'failed'));
|
||||
const presentation = phasePresentation[phase] || phasePresentation.queued;
|
||||
if (title) title.textContent = presentation.title;
|
||||
if (progressLabel) progressLabel.textContent = presentation.label;
|
||||
if (typeof presentation.start === 'number') renderProgress(presentation.start);
|
||||
if (phaseChanged && presentation.end > presentation.start) tickProgress();
|
||||
if (message && text) message.textContent = text;
|
||||
const currentIndex = phaseOrder.indexOf(phase);
|
||||
if (phaseOrder.includes(phase)) lastKnownPhase = phase;
|
||||
const visualPhase = phase === 'reconnecting' || phase === 'failed' ? lastKnownPhase : phase;
|
||||
const currentIndex = phaseOrder.indexOf(visualPhase);
|
||||
for (const node of phaseNodes) {
|
||||
const nodeIndex = phaseOrder.indexOf(node.dataset.updatePhase);
|
||||
node.classList.toggle('is-active', nodeIndex === currentIndex);
|
||||
node.classList.toggle('is-active', nodeIndex === currentIndex && phase !== 'complete' && phase !== 'failed');
|
||||
node.classList.toggle('is-complete', currentIndex > nodeIndex || phase === 'complete');
|
||||
}
|
||||
};
|
||||
@@ -292,11 +399,11 @@
|
||||
queued: 'Update ist eingereiht.',
|
||||
pulling: 'Das neue Container-Image wird geladen. Der laufende Dienst bleibt dabei online.',
|
||||
restarting: 'Der Dienst wechselt kontrolliert auf die neue Version.',
|
||||
verifying: 'Die neue Instanz durchläuft den Healthcheck.',
|
||||
verifying: 'Die neue Instanz durchläuft den Healthcheck. Dieser Schritt kann etwas dauern.',
|
||||
complete: `Version ${state.target_version || targetVersion} ist bereit.`,
|
||||
failed: state.message || 'Update fehlgeschlagen. Die bisherige Version bleibt aktiv.',
|
||||
};
|
||||
setUpdatePhase(phase, messages[phase] || state.message || 'Update läuft.');
|
||||
setUpdatePhase(phase, messages[phase] || state.message || 'Update läuft.', state.updated_at);
|
||||
if (phase === 'complete') {
|
||||
polling = false;
|
||||
window.setTimeout(() => window.location.assign('/system'), 1400);
|
||||
@@ -308,7 +415,11 @@
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
setUpdatePhase('reconnecting', 'Dienst startet neu – Verbindung wird automatisch wiederhergestellt.');
|
||||
const recoveryPhase = currentPhase === 'verifying' ? 'verifying' : 'reconnecting';
|
||||
const recoveryMessage = recoveryPhase === 'verifying'
|
||||
? 'Der Healthcheck läuft weiter – die Statusverbindung wird automatisch wiederhergestellt.'
|
||||
: 'Dienst startet neu – Verbindung wird automatisch wiederhergestellt.';
|
||||
setUpdatePhase(recoveryPhase, recoveryMessage);
|
||||
}
|
||||
window.setTimeout(pollSoftwareUpdate, 1500);
|
||||
};
|
||||
@@ -318,17 +429,37 @@
|
||||
event.preventDefault();
|
||||
if (polling || !overlay) return;
|
||||
const formData = new FormData(form);
|
||||
const requestBody = new URLSearchParams();
|
||||
for (const [name, value] of formData) {
|
||||
if (typeof value === 'string') requestBody.append(name, value);
|
||||
}
|
||||
targetVersion = String(formData.get('version') || '');
|
||||
stopProgressTimer();
|
||||
currentPhase = '';
|
||||
phaseStartedAt = 0;
|
||||
displayedProgress = 0;
|
||||
lastKnownPhase = 'pulling';
|
||||
if (progress) progress.style.width = '0%';
|
||||
if (percent) percent.textContent = '0%';
|
||||
progressTrack?.setAttribute('aria-valuenow', '0');
|
||||
startedAt = Date.now();
|
||||
overlay.hidden = false;
|
||||
if (close) close.hidden = true;
|
||||
document.body.classList.add('software-update-open');
|
||||
setUpdatePhase('queued', `Update auf ${targetVersion} wird vorbereitet.`);
|
||||
for (const candidate of softwareUpdateForms) candidate.querySelector('button')?.setAttribute('disabled', '');
|
||||
try {
|
||||
const response = await fetch(form.action, {method: 'POST', body: formData, headers: {'Accept': 'application/json'}});
|
||||
const result = await response.json().catch(() => ({}));
|
||||
const response = await fetch(form.action, {method: 'POST', body: requestBody, headers: {'Accept': 'application/json'}, credentials: 'same-origin'});
|
||||
const contentType = response.headers.get('content-type') || '';
|
||||
let result = {};
|
||||
if (contentType.includes('application/json')) {
|
||||
result = await response.json().catch(() => ({}));
|
||||
} else {
|
||||
const responseText = (await response.text()).trim();
|
||||
if (responseText && !responseText.startsWith('<')) result.message = responseText.slice(0, 240);
|
||||
}
|
||||
if (!response.ok || !result.accepted) throw new Error(result.message || 'Update konnte nicht gestartet werden.');
|
||||
polling = true;
|
||||
startedAt = Date.now();
|
||||
window.setTimeout(pollSoftwareUpdate, 400);
|
||||
} catch (error) {
|
||||
setUpdatePhase('failed', error instanceof Error ? error.message : 'Update konnte nicht gestartet werden.');
|
||||
@@ -342,6 +473,7 @@
|
||||
overlay.hidden = true;
|
||||
document.body.classList.remove('software-update-open');
|
||||
close.hidden = true;
|
||||
stopProgressTimer();
|
||||
for (const form of softwareUpdateForms) form.querySelector('button')?.removeAttribute('disabled');
|
||||
});
|
||||
}
|
||||
|
||||
+128
-33
@@ -76,7 +76,8 @@ h3 { margin-bottom: 2px; font-size: 14px; line-height: 1.35; }
|
||||
.workspace-bar { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(18px, 3vw, 36px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); backdrop-filter: blur(12px); }
|
||||
.workspace-bar div { display: flex; gap: 6px; color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
|
||||
.workspace-bar strong { color: var(--text); font-weight: 700; }
|
||||
.software-update-banner { display: grid; width: min(1280px, calc(100% - clamp(32px, 6vw, 72px))); grid-template-columns: 38px minmax(0,1fr) auto; gap: 12px; align-items: center; margin: 14px auto -8px; padding: 11px 12px; border: 1px solid #274975; border-radius: 12px; background: radial-gradient(circle at 12% 0, rgba(59,130,246,.24), transparent 38%), linear-gradient(110deg, #122038, #172b48); color: #edf5ff; box-shadow: 0 14px 30px rgba(15,23,42,.12); animation: software-banner-in .45s cubic-bezier(.2,.8,.3,1) both; }
|
||||
.software-update-banner { display: grid; width: min(1280px, calc(100% - clamp(32px, 6vw, 72px))); grid-template-columns: 38px minmax(0,1fr) auto; gap: 12px; align-items: center; margin: 14px auto -8px; padding: 11px 12px; border: 1px solid #274975; border-radius: 12px; background: radial-gradient(circle at 12% 0, rgba(59,130,246,.24), transparent 38%), linear-gradient(110deg, #122038, #172b48); color: #edf5ff; box-shadow: 0 14px 30px rgba(15,23,42,.12); }
|
||||
.software-update-banner.should-animate { animation: software-banner-in .45s cubic-bezier(.2,.8,.3,1) both; }
|
||||
.software-update-banner-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(147,197,253,.25); border-radius: 10px; background: rgba(37,99,235,.18); color: #93c5fd; font-size: 18px; }
|
||||
.software-update-banner div > span, .software-update-banner div > strong { display: block; }
|
||||
.software-update-banner div > span { color: #8fa6c2; font-family: var(--mono); font-size: 8px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
|
||||
@@ -171,13 +172,32 @@ h3 { margin-bottom: 2px; font-size: 14px; line-height: 1.35; }
|
||||
.status-pill.status-warn { background: var(--warning-soft); }
|
||||
.status-pill.status-bad { background: var(--danger-soft); }
|
||||
|
||||
.domain-list { display: grid; }
|
||||
.domain-list > a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid #edf0f3; }
|
||||
.domain-list > a:first-child { border-top: 0; }
|
||||
.domain-list strong, .domain-list small { display: block; }
|
||||
.domain-list strong { font-size: 12px; }
|
||||
.domain-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }
|
||||
.zone-glyph, .empty-icon { display: grid; width: 34px; height: 28px; place-items: center; border: 1px solid #bfd0ea; border-radius: 5px; background: var(--accent-soft); color: #315eaa; font-family: var(--mono); font-size: 8px; font-weight: 800; }
|
||||
.dashboard-zones-panel { overflow: hidden; background: radial-gradient(circle at 100% 0,rgba(37,99,235,.055),transparent 35%),var(--surface); }
|
||||
.dashboard-zone-count { color: var(--muted); font-family: var(--mono); font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
|
||||
.dashboard-zone-list { display: grid; gap: 8px; }
|
||||
.dashboard-zone-item { display: grid; min-width: 0; grid-template-columns: 44px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 11px; border: 1px solid #e1e7ee; border-radius: 10px; background: linear-gradient(135deg,#fff,#f8faff); transition: border-color .18s, box-shadow .18s, transform .18s; }
|
||||
.dashboard-zone-item:hover { border-color: #b8cae4; color: inherit; box-shadow: 0 10px 24px rgba(31,64,111,.08); transform: translateY(-1px); }
|
||||
.dashboard-zone-glyph { position: relative; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #bfd0ea; border-radius: 12px; background: linear-gradient(145deg,#edf4ff,#dfeaff); color: #315eaa; font-family: var(--mono); }
|
||||
.dashboard-zone-glyph::before, .dashboard-zone-glyph::after { position: absolute; border: 1px solid rgba(49,94,170,.2); border-radius: 50%; content: ""; }
|
||||
.dashboard-zone-glyph::before { width: 26px; height: 12px; }
|
||||
.dashboard-zone-glyph::after { width: 12px; height: 26px; }
|
||||
.dashboard-zone-glyph b { position: relative; z-index: 1; padding: 2px 3px; border-radius: 3px; background: #e7effd; font-size: 7px; }
|
||||
.dashboard-zone-glyph i { position: absolute; right: 5px; bottom: 5px; width: 5px; height: 5px; border: 1px solid #fff; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px rgba(15,118,110,.12); }
|
||||
.dashboard-zone-glyph.is-error { border-color: #ecc3ca; background: linear-gradient(145deg,#fff5f6,#ffe9ed); color: var(--danger); }
|
||||
.dashboard-zone-glyph.is-error i { background: var(--danger); box-shadow: 0 0 0 2px rgba(180,35,60,.11); }
|
||||
.dashboard-zone-copy, .dashboard-zone-copy > small, .dashboard-zone-copy > strong { display: block; min-width: 0; }
|
||||
.dashboard-domain-label { margin-bottom: 1px; color: #7a899b; font-family: var(--mono); font-size: 7px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.dashboard-zone-copy > strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dashboard-zone-branch { position: relative; display: grid; grid-template-columns: 10px minmax(0,1fr); gap: 5px; align-items: center; margin-top: 6px; padding-top: 5px; border-top: 1px solid #ebeff5; }
|
||||
.dashboard-zone-branch > i { position: relative; width: 8px; height: 8px; border: 1px solid #8eacd4; border-radius: 3px; background: #edf4ff; }
|
||||
.dashboard-zone-branch > i::before { position: absolute; bottom: 6px; left: 3px; width: 1px; height: 9px; background: #c8d6e8; content: ""; }
|
||||
.dashboard-zone-branch span, .dashboard-zone-branch b, .dashboard-zone-branch small { display: block; min-width: 0; }
|
||||
.dashboard-zone-branch b { color: #536780; font-size: 8px; }
|
||||
.dashboard-zone-branch small { overflow: hidden; margin-top: 1px; color: #8795a6; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dashboard-zone-state { display: grid; gap: 8px; justify-items: end; }
|
||||
.dashboard-zone-state > i { color: #8799af; font-size: 14px; font-style: normal; transition: color .18s, transform .18s; }
|
||||
.dashboard-zone-item:hover .dashboard-zone-state > i { color: var(--accent); transform: translateX(3px); }
|
||||
.empty-icon { display: grid; width: 34px; height: 28px; place-items: center; border: 1px solid #bfd0ea; border-radius: 5px; background: var(--accent-soft); color: #315eaa; font-family: var(--mono); font-size: 8px; font-weight: 800; }
|
||||
.audit-panel { margin-top: 12px; }
|
||||
.audit-list { display: grid; margin: 0; padding: 0; list-style: none; }
|
||||
.audit-list li { display: grid; grid-template-columns: 140px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid #edf0f3; }
|
||||
@@ -493,41 +513,105 @@ input:focus, textarea:focus, select:focus { border-color: var(--accent); box-sha
|
||||
.software-update-button i { font-style: normal; transition: transform .2s ease; }
|
||||
.software-update-button:hover i { transform: translate(2px,-2px); }
|
||||
.update-credential-panel { width: min(930px,100%); }
|
||||
.update-credential-panel.is-connected { overflow: hidden; padding: 0; border-color: #b8dcd5; background: linear-gradient(120deg,#fff 62%,#f0faf7); }
|
||||
.update-access-state { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 18px; }
|
||||
.update-access-state-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #a9d8ce; border-radius: 12px; background: linear-gradient(145deg,#e9faf6,#d9f3ed); color: var(--success); box-shadow: 0 8px 18px rgba(15,118,110,.08); font-family: var(--mono); font-size: 15px; font-weight: 900; }
|
||||
.update-access-state .section-label { margin-bottom: 2px; color: #598b82; }
|
||||
.update-access-state h2 { color: #174f49; }
|
||||
.update-access-state p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
|
||||
.update-access-state p strong { color: #315f5a; font-family: var(--mono); }
|
||||
.update-access-state .status-pill { gap: 6px; }
|
||||
.update-access-state .status-pill i { width: 6px; height: 6px; border-radius: 50%; background: #1d9b87; box-shadow: 0 0 0 3px rgba(29,155,135,.11); }
|
||||
.update-credential-editor { border-top: 1px solid #d8e9e5; background: rgba(255,255,255,.72); }
|
||||
.update-credential-editor summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 18px; color: #315f5a; list-style: none; }
|
||||
.update-credential-editor summary::-webkit-details-marker { display: none; }
|
||||
.update-credential-editor summary span, .update-credential-editor summary strong, .update-credential-editor summary small { display: block; }
|
||||
.update-credential-editor summary strong { font-size: 10px; }
|
||||
.update-credential-editor summary small { margin-top: 1px; color: var(--muted); font-size: 8px; font-weight: 500; }
|
||||
.update-credential-editor summary > i { color: #6d918b; font-size: 16px; font-style: normal; transition: transform .18s; }
|
||||
.update-credential-editor[open] summary > i { transform: rotate(180deg); }
|
||||
.update-credential-editor[open] summary { border-bottom: 1px solid #e4eeec; }
|
||||
.update-credential-editor .stacked-form { padding: 18px; }
|
||||
.update-inline-warning { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; align-items: center; margin-top: 12px; padding: 9px; border: 1px solid #ead18e; border-radius: 8px; background: var(--warning-soft); }
|
||||
.update-inline-warning > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 7px; background: rgba(154,103,0,.1); color: var(--warning); font-weight: 900; }
|
||||
.update-inline-warning p { margin: 0; }
|
||||
.update-inline-warning strong, .update-inline-warning small { display: block; }
|
||||
.update-inline-warning strong { color: #74540b; font-size: 9px; }
|
||||
.update-inline-warning small { margin-top: 2px; color: #887347; font-size: 8px; overflow-wrap: anywhere; }
|
||||
.software-update-overlay { position: fixed; z-index: 2200; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(8,15,28,.72); backdrop-filter: blur(10px); animation: update-overlay-in .25s ease both; }
|
||||
.software-update-dialog { width: min(520px,100%); padding: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: #111c2e; color: #f8fafc; box-shadow: 0 30px 80px rgba(0,0,0,.32); text-align: center; }
|
||||
.software-update-dialog .section-label { color: #7f94af; }
|
||||
.software-update-dialog h2 { margin: 8px 0 9px; color: #fff; font-size: 24px; }
|
||||
.software-update-dialog p { min-height: 38px; margin: 0 auto 20px; color: #9babc0; font-size: 11px; line-height: 1.55; }
|
||||
.software-update-orbit { position: relative; display: grid; width: 62px; height: 62px; place-items: center; margin: 0 auto 20px; border: 1px solid #344862; border-radius: 18px; background: #18283f; color: #b7d1ff; font-family: var(--mono); font-size: 11px; font-weight: 900; }
|
||||
.software-update-orbit i { position: absolute; inset: -8px; border: 1px solid transparent; border-top-color: #60a5fa; border-right-color: rgba(96,165,250,.25); border-radius: 22px; animation: update-orbit 1.15s linear infinite; }
|
||||
.software-update-progress { height: 5px; overflow: hidden; border-radius: 99px; background: #24344b; }
|
||||
.software-update-progress i { display: block; width: 8%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#3b82f6,#60a5fa,#2dd4bf); box-shadow: 0 0 14px rgba(96,165,250,.45); transition: width .55s cubic-bezier(.2,.8,.3,1), background .2s; }
|
||||
.software-update-overlay[data-update-state="pulling"] .software-update-progress i { width: 38%; }
|
||||
.software-update-overlay[data-update-state="restarting"] .software-update-progress i { width: 65%; }
|
||||
.software-update-overlay[data-update-state="reconnecting"] .software-update-progress i { width: 73%; }
|
||||
.software-update-overlay[data-update-state="verifying"] .software-update-progress i { width: 88%; }
|
||||
.software-update-overlay[data-update-state="complete"] .software-update-progress i { width: 100%; }
|
||||
.software-update-overlay[data-update-state="failed"] .software-update-progress i { width: 100%; background: #e45c70; }
|
||||
.software-update-overlay[data-update-state="complete"] .software-update-orbit i { border-color: #34d399; animation: none; }
|
||||
.software-update-overlay[data-update-state="failed"] .software-update-orbit i { border-color: #fb7185; animation: none; }
|
||||
.software-update-phases { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; }
|
||||
.software-update-phases li { display: grid; gap: 4px; justify-items: center; color: #61738b; font-size: 8px; font-weight: 700; }
|
||||
.software-update-phases li span { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #2c3e57; border-radius: 8px; font-family: var(--mono); font-size: 7px; }
|
||||
.software-update-phases li.is-active { color: #b9d4ff; }
|
||||
.software-update-phases li.is-active span { border-color: #4b83d5; background: rgba(59,130,246,.16); color: #9ec5ff; }
|
||||
.software-update-phases li.is-complete { color: #6fc5b6; }
|
||||
.software-update-phases li.is-complete span { border-color: #327e73; background: rgba(15,118,110,.16); color: #75d4c4; }
|
||||
.software-update-overlay { position: fixed; z-index: 2200; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 35%, rgba(37,99,235,.18), transparent 38%), rgba(5,10,20,.82); backdrop-filter: blur(14px) saturate(1.1); animation: update-overlay-in .3s ease both; }
|
||||
.software-update-dialog { position: relative; isolation: isolate; width: min(560px,100%); overflow: hidden; padding: 28px 32px 30px; border: 1px solid rgba(147,197,253,.2); border-radius: 24px; background: radial-gradient(circle at 50% -18%, rgba(59,130,246,.26), transparent 42%), linear-gradient(155deg,#111d31 0%,#0d1727 100%); color: #f8fafc; box-shadow: 0 38px 100px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.025) inset; text-align: center; animation: update-dialog-in .46s cubic-bezier(.2,.9,.25,1) both; }
|
||||
.software-update-dialog::before { position: absolute; z-index: -2; inset: 0; background-image: linear-gradient(rgba(147,197,253,.035) 1px, transparent 1px), linear-gradient(90deg,rgba(147,197,253,.035) 1px,transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom,rgba(0,0,0,.8),transparent 72%); content: ""; animation: update-grid-drift 10s linear infinite; }
|
||||
.software-update-dialog::after { position: absolute; z-index: -1; top: -105px; left: 50%; width: 330px; height: 250px; border-radius: 50%; background: rgba(37,99,235,.19); filter: blur(58px); content: ""; transform: translateX(-50%); transition: background .35s; }
|
||||
.software-update-dialog .section-label { position: relative; color: #7f94af; }
|
||||
.software-update-dialog h2 { position: relative; margin: 7px 0 8px; color: #fff; font-size: 25px; letter-spacing: -.025em; }
|
||||
.software-update-dialog p { position: relative; min-height: 36px; margin: 0 auto 17px; color: #a8b8cc; font-size: 11px; line-height: 1.55; }
|
||||
.software-update-visual { position: relative; display: grid; width: 166px; height: 112px; place-items: center; margin: -2px auto 13px; }
|
||||
.software-update-visual::before, .software-update-visual::after { position: absolute; border: 1px solid rgba(96,165,250,.18); border-radius: 50%; content: ""; }
|
||||
.software-update-visual::before { width: 136px; height: 78px; transform: rotate(-9deg); animation: update-ring-left 4.8s linear infinite; }
|
||||
.software-update-visual::after { width: 104px; height: 104px; border-color: rgba(45,212,191,.13); transform: rotate(21deg); animation: update-ring-right 3.8s linear infinite reverse; }
|
||||
.software-update-scan { position: absolute; z-index: 0; width: 150px; height: 1px; overflow: visible; background: linear-gradient(90deg,transparent,#60a5fa,transparent); box-shadow: 0 0 16px rgba(96,165,250,.6); opacity: .7; animation: update-scan 2.2s ease-in-out infinite; }
|
||||
.software-update-orbit { position: relative; z-index: 2; display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid #3c5f8c; border-radius: 21px; background: linear-gradient(145deg,#1c3455,#14243b); color: #c7dcff; box-shadow: 0 16px 34px rgba(0,0,0,.3), 0 0 30px rgba(59,130,246,.15), inset 0 1px rgba(255,255,255,.08); font-family: var(--mono); font-size: 11px; font-weight: 900; animation: update-core-float 2.8s ease-in-out infinite; }
|
||||
.software-update-orbit::before { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 9px #60a5fa; content: ""; animation: update-status-blink 1.1s ease-in-out infinite; }
|
||||
.software-update-orbit span::after { content: ""; }
|
||||
.software-update-orbit i { position: absolute; inset: -10px; border: 1px solid transparent; border-top-color: #60a5fa; border-right-color: rgba(96,165,250,.28); border-radius: 26px; animation: update-orbit 1.25s linear infinite; }
|
||||
.update-signal { position: absolute; z-index: 1; width: 5px; height: 5px; border-radius: 50%; background: #93c5fd; box-shadow: 0 0 10px rgba(147,197,253,.85); }
|
||||
.signal-a { animation: update-signal-a 2.4s ease-in-out infinite; }
|
||||
.signal-b { animation: update-signal-b 3s ease-in-out -.7s infinite; }
|
||||
.signal-c { width: 4px; height: 4px; background: #5eead4; animation: update-signal-c 2.7s ease-in-out -1.3s infinite; }
|
||||
.software-update-progress-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: #71839a; font-family: var(--mono); font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.software-update-progress-meta strong { color: #a9c9ff; font-size: 9px; font-variant-numeric: tabular-nums; transition: color .25s; }
|
||||
.software-update-progress { position: relative; height: 7px; overflow: hidden; border: 1px solid rgba(147,197,253,.08); border-radius: 99px; background: #202f44; box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
|
||||
.software-update-progress i { display: block; width: 4%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2563eb,#60a5fa,#2dd4bf); box-shadow: 0 0 17px rgba(96,165,250,.52); transition: width 1s linear, background .25s; }
|
||||
.software-update-progress > span { position: absolute; inset: 0; background: linear-gradient(105deg,transparent 34%,rgba(255,255,255,.3) 48%,transparent 62%); transform: translateX(-100%); animation: update-progress-shine 1.65s ease-in-out infinite; }
|
||||
.software-update-overlay[data-update-state="verifying"] .software-update-progress > span { animation-duration: 3.2s; }
|
||||
.software-update-overlay[data-update-state="failed"] .software-update-progress i { background: #e45c70; }
|
||||
.software-update-overlay[data-update-state="complete"] .software-update-dialog { border-color: rgba(52,211,153,.35); }
|
||||
.software-update-overlay[data-update-state="complete"] .software-update-dialog::after { background: rgba(16,185,129,.2); }
|
||||
.software-update-overlay[data-update-state="failed"] .software-update-dialog::after { background: rgba(225,29,72,.18); }
|
||||
.software-update-overlay[data-update-state="complete"] .software-update-orbit, .software-update-overlay[data-update-state="failed"] .software-update-orbit { animation: update-result-pop .5s cubic-bezier(.2,.9,.25,1) both; }
|
||||
.software-update-overlay[data-update-state="complete"] .software-update-orbit { border-color: #34d399; color: #6ee7b7; box-shadow: 0 0 36px rgba(52,211,153,.22); }
|
||||
.software-update-overlay[data-update-state="failed"] .software-update-orbit { border-color: #fb7185; color: #fda4af; box-shadow: 0 0 36px rgba(251,113,133,.18); }
|
||||
.software-update-overlay[data-update-state="complete"] .software-update-orbit i, .software-update-overlay[data-update-state="failed"] .software-update-orbit i { border-color: currentColor; animation: none; }
|
||||
.software-update-overlay[data-update-state="complete"] .software-update-orbit span, .software-update-overlay[data-update-state="failed"] .software-update-orbit span { font-size: 0; }
|
||||
.software-update-overlay[data-update-state="complete"] .software-update-orbit span::after { content: "✓"; font-family: inherit; font-size: 22px; }
|
||||
.software-update-overlay[data-update-state="failed"] .software-update-orbit span::after { content: "!"; font-family: inherit; font-size: 22px; }
|
||||
.software-update-overlay[data-update-state="complete"] .software-update-orbit::before { background: #34d399; box-shadow: 0 0 9px #34d399; animation: none; }
|
||||
.software-update-overlay[data-update-state="failed"] .software-update-orbit::before { background: #fb7185; box-shadow: 0 0 9px #fb7185; animation: none; }
|
||||
.software-update-overlay[data-update-state="complete"] .software-update-progress-meta strong { color: #6ee7b7; }
|
||||
.software-update-overlay[data-update-state="failed"] .software-update-progress-meta strong { color: #fda4af; }
|
||||
.software-update-phases { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 20px 0 0; padding: 0; list-style: none; }
|
||||
.software-update-phases::before { position: absolute; top: 16px; right: 16%; left: 16%; height: 1px; background: #263a55; content: ""; }
|
||||
.software-update-phases li { position: relative; z-index: 1; display: grid; gap: 2px; justify-items: center; color: #61738b; }
|
||||
.software-update-phases li > span { display: grid; width: 32px; height: 32px; place-items: center; margin-bottom: 3px; border: 1px solid #2c3e57; border-radius: 10px; background: #111d2e; font-family: var(--mono); }
|
||||
.software-update-phases li > span b { font-size: 7px; }
|
||||
.software-update-phases li > strong { color: inherit; font-size: 8px; font-weight: 750; }
|
||||
.software-update-phases li > small { color: #4d5e73; font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
|
||||
.software-update-phases li.is-active { color: #c5dcff; }
|
||||
.software-update-phases li.is-active > span { border-color: #4b83d5; background: #172a46; color: #a9ccff; box-shadow: 0 0 0 4px rgba(59,130,246,.08), 0 8px 18px rgba(0,0,0,.18); animation: update-phase-pulse 1.4s ease-in-out infinite; }
|
||||
.software-update-phases li.is-active > small { color: #7094c7; }
|
||||
.software-update-phases li.is-complete { color: #76cbbb; }
|
||||
.software-update-phases li.is-complete > span { border-color: #327e73; background: #12302f; color: #75d4c4; }
|
||||
.software-update-phases li.is-complete > span b { display: none; }
|
||||
.software-update-phases li.is-complete > span::after { content: "✓"; font-family: var(--mono); font-size: 10px; font-weight: 900; }
|
||||
.software-update-phases li.is-complete > small { color: #527f78; }
|
||||
.software-update-dialog [data-software-update-close] { margin: 20px auto 0; border-color: #40516a; background: #1a2940; color: #dbe7f6; }
|
||||
body.software-update-open { overflow: hidden; }
|
||||
@keyframes software-banner-in { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes update-overlay-in { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes update-dialog-in { from { opacity: 0; transform: translateY(16px) scale(.965); } to { opacity: 1; transform: translateY(0) scale(1); } }
|
||||
@keyframes update-grid-drift { to { background-position: 28px 28px, 28px 28px; } }
|
||||
@keyframes update-orbit { to { transform: rotate(360deg); } }
|
||||
@keyframes update-ring-left { to { transform: rotate(351deg); } }
|
||||
@keyframes update-ring-right { to { transform: rotate(381deg); } }
|
||||
@keyframes update-core-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
|
||||
@keyframes update-status-blink { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
|
||||
@keyframes update-scan { 0%,100% { opacity: .12; transform: translateY(-34px) scaleX(.55); } 50% { opacity: .75; transform: translateY(34px) scaleX(1); } }
|
||||
@keyframes update-signal-a { 0%,100% { opacity: 0; transform: translate(-68px,23px) scale(.5); } 45% { opacity: 1; } 70% { opacity: .65; transform: translate(50px,-34px) scale(1); } }
|
||||
@keyframes update-signal-b { 0%,100% { opacity: 0; transform: translate(60px,28px) scale(.5); } 48% { opacity: .9; } 72% { opacity: .5; transform: translate(-55px,-28px) scale(1); } }
|
||||
@keyframes update-signal-c { 0%,100% { opacity: 0; transform: translate(-44px,-42px); } 50% { opacity: 1; } 75% { opacity: .4; transform: translate(65px,18px); } }
|
||||
@keyframes update-progress-shine { 0%,25% { transform: translateX(-110%); } 75%,100% { transform: translateX(110%); } }
|
||||
@keyframes update-phase-pulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
|
||||
@keyframes update-result-pop { 0% { transform: scale(.82) rotate(-5deg); } 70% { transform: scale(1.08) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
|
||||
|
||||
.error-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
|
||||
.error-summary-grid article { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border: 1px solid #efc7ce; border-radius: var(--radius-sm); background: #fff8f9; }
|
||||
@@ -624,6 +708,8 @@ body.software-update-open { overflow: hidden; }
|
||||
.software-version-visual { width: 46px; height: 46px; border-radius: 13px; }
|
||||
.software-version-action { grid-column: 1 / -1; }
|
||||
.software-version-action form, .software-version-action .button { width: 100%; }
|
||||
.update-access-state { grid-template-columns: 42px minmax(0,1fr); }
|
||||
.update-access-state > .status-pill { grid-column: 2; justify-self: start; }
|
||||
.admin-full-access-card { grid-template-columns: 42px minmax(0,1fr); }
|
||||
.admin-full-access-card > .status-pill { grid-column: 2; }
|
||||
.auth-shell { align-items: start; padding: 12px; }
|
||||
@@ -645,7 +731,11 @@ body.software-update-open { overflow: hidden; }
|
||||
.software-version-cell { min-width: 0; padding-right: 12px; }
|
||||
.software-version-cell + .software-version-cell { padding-left: 12px; }
|
||||
.software-version-cell strong { font-size: 21px; }
|
||||
.software-update-dialog { padding: 24px 18px; }
|
||||
.software-update-dialog { padding: 22px 18px 24px; border-radius: 19px; }
|
||||
.software-update-visual { width: 148px; height: 96px; margin-bottom: 10px; transform: scale(.9); }
|
||||
.software-update-dialog h2 { font-size: 22px; }
|
||||
.software-update-phases li > strong { font-size: 7px; }
|
||||
.software-update-phases li > small { display: none; }
|
||||
.onboarding-card { padding: 18px; }
|
||||
.onboarding-card-meta { margin-bottom: 18px; }
|
||||
.onboarding-form-heading h2 { font-size: 28px; }
|
||||
@@ -659,6 +749,11 @@ body.software-update-open { overflow: hidden; }
|
||||
}
|
||||
|
||||
@media (max-height: 700px) {
|
||||
.software-update-dialog { padding-block: 20px 22px; }
|
||||
.software-update-visual { height: 78px; margin-bottom: 8px; transform: scale(.82); }
|
||||
.software-update-dialog p { min-height: 30px; margin-bottom: 12px; }
|
||||
.software-update-phases { margin-top: 14px; }
|
||||
.software-update-dialog [data-software-update-close] { margin-top: 14px; }
|
||||
.onboarding-intro { padding-block: 30px; }
|
||||
.onboarding-copy { margin-top: 28px; }
|
||||
.onboarding-copy h1 { margin-bottom: 15px; font-size: 44px; }
|
||||
|
||||
Reference in new issue
Block a user