From 1bda7e99202c5346fc0f3f1815c0995ba442712e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 9 Apr 2026 22:33:20 +0000 Subject: [PATCH 1/2] Initial plan From 1242f0bc0b984386fcd375e6d701ed68502b7146 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 9 Apr 2026 22:38:12 +0000 Subject: [PATCH 2/2] Add glass/frosted-glass effect to hub and onboarding UI surfaces Agent-Logs-Url: https://github.com/naturallaw777/staging_alpha/sessions/47ed7298-e001-4ae0-9d35-7dd1e869d836 Co-authored-by: naturallaw777 <99053422+naturallaw777@users.noreply.github.com> --- app/sovran_systemsos_web/static/css/base.css | 18 +++++++++-------- .../static/css/header.css | 12 +++++++---- .../static/css/layout.css | 6 ++++-- .../static/css/modals.css | 20 ++++++++++++------- .../static/css/onboarding.css | 16 ++++++++++----- app/sovran_systemsos_web/static/css/tiles.css | 2 ++ 6 files changed, 48 insertions(+), 26 deletions(-) diff --git a/app/sovran_systemsos_web/static/css/base.css b/app/sovran_systemsos_web/static/css/base.css index 37202ac..1dd2f62 100644 --- a/app/sovran_systemsos_web/static/css/base.css +++ b/app/sovran_systemsos_web/static/css/base.css @@ -9,10 +9,10 @@ } :root { - --bg-color: #0b0f0d; - --surface-color: #111614; - --card-color: #181e1b; - --border-color: #1e2d27; + --bg-color: #080a09; + --surface-color: rgba(14, 16, 15, 0.7); + --card-color: rgba(20, 22, 21, 0.6); + --border-color: rgba(255, 255, 255, 0.06); --text-primary: #ecf3ef; --text-secondary: #8aaa9a; --text-dim: #4a6658; @@ -23,8 +23,8 @@ --grey: #5E7A6A; --radius-card: 18px; --radius-btn: 8px; - --shadow-card: 0 2px 8px rgba(0,0,0,0.5); - --shadow-hover: 0 6px 20px rgba(0,0,0,0.7); + --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4); + --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.5); } html, body { @@ -55,8 +55,10 @@ body { } .login-card { - background-color: var(--surface-color); - border: 1px solid var(--border-color); + background-color: rgba(14, 16, 15, 0.75); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 48px 40px; width: 100%; diff --git a/app/sovran_systemsos_web/static/css/header.css b/app/sovran_systemsos_web/static/css/header.css index 3a879d4..8f3af1b 100644 --- a/app/sovran_systemsos_web/static/css/header.css +++ b/app/sovran_systemsos_web/static/css/header.css @@ -1,8 +1,10 @@ /* ── Header bar ─────────────────────────────────────────────────── */ .header-bar { - background-color: var(--surface-color); - border-bottom: 1px solid var(--border-color); + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); + background-color: rgba(10, 12, 11, 0.82); + border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 8px 24px; display: flex; flex-direction: row; @@ -46,8 +48,10 @@ /* ── IP bar ─────────────────────────────────────────────────────── */ .ip-bar { - background-color: var(--surface-color); - border-bottom: 1px solid var(--border-color); + background-color: rgba(10, 12, 11, 0.7); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 8px 24px; display: flex; align-items: center; diff --git a/app/sovran_systemsos_web/static/css/layout.css b/app/sovran_systemsos_web/static/css/layout.css index c101f71..03a0eed 100644 --- a/app/sovran_systemsos_web/static/css/layout.css +++ b/app/sovran_systemsos_web/static/css/layout.css @@ -18,8 +18,10 @@ flex-shrink: 0; height: 100%; overflow-y: auto; - border-right: 1px solid var(--border-color); - background-color: var(--surface-color); + border-right: 1px solid rgba(255, 255, 255, 0.06); + background-color: rgba(12, 14, 13, 0.65); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); padding: 20px 14px; display: flex; flex-direction: column; diff --git a/app/sovran_systemsos_web/static/css/modals.css b/app/sovran_systemsos_web/static/css/modals.css index 8d73211..5afe44b 100644 --- a/app/sovran_systemsos_web/static/css/modals.css +++ b/app/sovran_systemsos_web/static/css/modals.css @@ -4,7 +4,9 @@ display: none; position: fixed; inset: 0; - background-color: rgba(0,0,0,0.75); + background-color: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); z-index: 200; align-items: center; justify-content: center; @@ -15,15 +17,17 @@ } .modal-dialog { - background-color: var(--surface-color); - border: 1px solid var(--border-color); + background-color: rgba(14, 16, 15, 0.8); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; width: 90vw; max-width: 900px; max-height: 80vh; display: flex; flex-direction: column; - box-shadow: 0 16px 48px rgba(0,0,0,0.7); + box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); } .modal-header { @@ -119,15 +123,17 @@ button.btn-reboot:hover:not(:disabled) { /* ── Credentials info modal ──────────────────────────────────────── */ .creds-dialog { - background-color: var(--surface-color); - border: 1px solid var(--border-color); + background-color: rgba(14, 16, 15, 0.8); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; width: 90vw; max-width: 700px; max-height: 85vh; display: flex; flex-direction: column; - box-shadow: 0 16px 48px rgba(0,0,0,0.7); + box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); animation: creds-fade-in 0.2s ease-out; } diff --git a/app/sovran_systemsos_web/static/css/onboarding.css b/app/sovran_systemsos_web/static/css/onboarding.css index d80c0f7..5b477c9 100644 --- a/app/sovran_systemsos_web/static/css/onboarding.css +++ b/app/sovran_systemsos_web/static/css/onboarding.css @@ -139,8 +139,10 @@ /* Cards */ .onboarding-card { - background-color: var(--surface-color); - border: 1px solid var(--border-color); + background-color: rgba(14, 16, 15, 0.65); + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); + border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-card); padding: 24px 28px; display: flex; @@ -733,7 +735,9 @@ display: none; position: fixed; inset: 0; - background-color: rgba(6, 8, 7, 0.92); + background-color: rgba(6, 8, 7, 0.7); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); z-index: 999; align-items: center; justify-content: center; @@ -744,8 +748,10 @@ } .reboot-card { - background-color: var(--surface-color); - border: 1px solid var(--border-color); + background-color: rgba(14, 16, 15, 0.8); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 48px 56px; text-align: center; diff --git a/app/sovran_systemsos_web/static/css/tiles.css b/app/sovran_systemsos_web/static/css/tiles.css index e6690b3..8d12522 100644 --- a/app/sovran_systemsos_web/static/css/tiles.css +++ b/app/sovran_systemsos_web/static/css/tiles.css @@ -5,6 +5,8 @@ min-height: 130px; background-color: var(--card-color); border: 1px solid var(--border-color); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: flex;