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
+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