From 48c8fbb7ffd271257ad1e0e367ea4e53b28d4e94 Mon Sep 17 00:00:00 2001 From: Krao Hasanee Date: Mon, 8 Jun 2026 16:06:56 -0400 Subject: [PATCH] =?UTF-8?q?style:=20white-based=20card-bg=200.07,=20blur?= =?UTF-8?q?=2012px=E2=86=9220px=20for=20less=20transparency?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 4.6 --- .claude/settings.local.json | 3 ++- src/index.css | 54 ++++++++++++++++++------------------- 2 files changed, 29 insertions(+), 28 deletions(-) diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 9725959..d0a4b61 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -18,7 +18,8 @@ "Bash(git commit -q -m 'fix: restore popupOverlayStyle import in ExternalMyInvoices *)", "Bash(git commit -q -m 'style: increase card-bg alpha to match Safari rendering *)", "Bash(git commit -q -m 'fix: subcontractor PDF title + multi-page support *)", - "Bash(git commit -q -m 'style: card-bg dark-based alpha to match Safari panel look *)" + "Bash(git commit -q -m 'style: card-bg dark-based alpha to match Safari panel look *)", + "Bash(git commit -q -m 'style: white-based card-bg 0.07, blur 12px→20px for less transparency *)" ] } } diff --git a/src/index.css b/src/index.css index 47cf0c7..1d31e53 100644 --- a/src/index.css +++ b/src/index.css @@ -29,8 +29,8 @@ --bg: radial-gradient(560px circle at 58% -6%, rgba(245, 165, 35, 0.16) 0%, rgba(245, 165, 35, 0.105) 24%, rgba(245, 165, 35, 0.055) 48%, rgba(245, 165, 35, 0.018) 72%, rgba(245, 165, 35, 0) 100%), linear-gradient(180deg, #111111 0%, #0d0d0d 42%, #0a0a0a 100%); - --card-bg: rgba(0, 0, 0, 0.35); - --card-bg-2: rgba(0, 0, 0, 0.48); + --card-bg: rgba(255, 255, 255, 0.07); + --card-bg-2: rgba(255, 255, 255, 0.12); --popup-bg: rgba(13,13,13,0.88); --text-primary: #ffffff; --text-secondary: #a8a8a8; @@ -237,8 +237,8 @@ body::after { width: 76px; min-width: 76px; background: var(--card-bg); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; padding: 24px 0; @@ -335,7 +335,7 @@ body::after { text-transform: uppercase; color: var(--text-muted); } -.grid-card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: background 0.15s; } +.grid-card { background: var(--card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); cursor: pointer; transition: background 0.15s; } .grid-card:hover { background: var(--card-bg-2); } [data-theme="light"] .grid-card:hover { background: #fafafa; } @@ -486,7 +486,7 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); } margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 20px; - position: sticky; top: 0; background: rgba(13,13,13,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 10; + position: sticky; top: 0; background: rgba(13,13,13,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 10; flex-shrink: 0; padding-top: 32px; } .page-title { font-size: 22px; font-weight: 400; color: var(--text-primary); letter-spacing: -0.3px; } @@ -501,7 +501,7 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); } .dashboard-header-stat-value { font-size: 15px; font-weight: 400; color: var(--text-primary); margin-top: 2px; } /* Cards */ -.card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; border: 1px solid var(--border); padding: 15px; } +.card { background: var(--card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 4px; border: 1px solid var(--border); padding: 15px; } .card-title { font-size: 14px; font-weight: 400; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; } .page-toolbar { margin-bottom: 24px; @@ -539,9 +539,9 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; } .dash-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 24px; } .profile-top-grid { display: grid; grid-template-columns: 60fr 40fr; gap: 24px; align-items: start; } -.stat-card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; border: 1px solid var(--border); padding: 20px; } +.stat-card { background: var(--card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 4px; border: 1px solid var(--border); padding: 20px; } .stat-bar { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 24px; flex-shrink: 0; } -.stat-bar-item { background: rgba(255,255,255,0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(245,165,35,0.15); border-right: none; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } +.stat-bar-item { background: rgba(255,255,255,0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(245,165,35,0.15); border-right: none; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } .stat-bar-header { display: flex; align-items: flex-start; justify-content: space-between; } .stat-bar-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; } .stat-bar-item:last-child { border-right: 1px solid rgba(245,165,35,0.15); border-radius: 0 4px 4px 0; } @@ -566,8 +566,8 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); } } .dashboard-chart-card { background: var(--card-bg); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 4px; padding: 20px; @@ -681,8 +681,8 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); } border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg-2); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); padding: 12px 14px; } @@ -711,8 +711,8 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); } border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg-2); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); padding: 14px 16px; } @@ -755,8 +755,8 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); } border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg-2); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); padding: 16px; } @@ -952,7 +952,7 @@ textarea { [data-theme="light"] .badge-needs_revision { background: #dc2626; color: #fff; border-color: #b91c1c; } /* Table */ -.table-wrapper { overflow-x: auto; border-radius: 4px; border: 1px solid var(--border); background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } +.table-wrapper { overflow-x: auto; border-radius: 4px; border: 1px solid var(--border); background: var(--card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .table-wrapper { scrollbar-width: thin; scrollbar-color: var(--table-scroll-thumb) transparent; @@ -1118,7 +1118,7 @@ select option { background: #222; color: #fff; } /* Auth */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: transparent; padding: 20px; position: relative; z-index: 1; } -.auth-card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; border: 1px solid var(--border); padding: 40px; width: 100%; max-width: 440px; box-shadow: var(--popup-shadow); } +.auth-card { background: var(--card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 4px; border: 1px solid var(--border); padding: 40px; width: 100%; max-width: 440px; box-shadow: var(--popup-shadow); } .auth-logo { text-align: center; margin-bottom: 32px; } .auth-logo h1 { font-size: 22px; font-weight: 400; color: #ffffff; letter-spacing: -0.5px; } .auth-logo p { font-size: 13px; color: #888; margin-top: 6px; } @@ -1166,7 +1166,7 @@ select option { background: #222; color: #fff; } } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .version-timeline { display: flex; flex-direction: column; gap: 12px; } -.version-item { border: 1px solid var(--border); border-radius: 4px; padding: 16px; background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } +.version-item { border: 1px solid var(--border); border-radius: 4px; padding: 16px; background: var(--card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .version-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .version-number { font-size: 12px; font-weight: 400; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; } .version-meta { font-size: 12px; color: var(--text-secondary); margin-top: 8px; display: flex; gap: 16px; } @@ -1278,7 +1278,7 @@ select option { background: #222; color: #fff; } .interactive-surface { transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } -.request-card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 4px; padding: 12px 16px; margin-bottom: 0; } +.request-card { background: var(--card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 4px; padding: 12px 16px; margin-bottom: 0; } .request-card:hover, .interactive-surface:hover { border-color: var(--interactive-hover-border); } .request-card:hover { background: var(--interactive-row-hover); } @@ -1463,8 +1463,8 @@ select option { background: #222; color: #fff; } border-radius: 4px; border: 1px solid var(--border); background: var(--card-bg-2); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 4px; @@ -1507,8 +1507,8 @@ select option { background: #222; color: #fff; } border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg-2); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); text-decoration: none; } @@ -1530,8 +1530,8 @@ select option { background: #222; color: #fff; } border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: space-between;