krao/fourge-portal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

style: white-based card-bg 0.07, blur 12px→20px for less transparency

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Krao Hasanee
2026-06-08 16:06:56 -04:00
parent 1dd7ca1922
commit 48c8fbb7ff
2 changed files with 29 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/settings.local.json
+2 -1
View File
@@ -18,7 +18,8 @@
"Bash(git commit -q -m 'fix: restore popupOverlayStyle import in ExternalMyInvoices *)", "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 '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 '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 *)"
] ]
} }
} }
src/index.css
+27 -27
View File
@@ -29,8 +29,8 @@
--bg: --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%), 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%); linear-gradient(180deg, #111111 0%, #0d0d0d 42%, #0a0a0a 100%);
--card-bg: rgba(0, 0, 0, 0.35); --card-bg: rgba(255, 255, 255, 0.07);
--card-bg-2: rgba(0, 0, 0, 0.48); --card-bg-2: rgba(255, 255, 255, 0.12);
--popup-bg: rgba(13,13,13,0.88); --popup-bg: rgba(13,13,13,0.88);
--text-primary: #ffffff; --text-primary: #ffffff;
--text-secondary: #a8a8a8; --text-secondary: #a8a8a8;
@@ -237,8 +237,8 @@ body::after {
width: 76px; width: 76px;
min-width: 76px; min-width: 76px;
background: var(--card-bg); background: var(--card-bg);
backdrop-filter: blur(12px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(20px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 24px 0; padding: 24px 0;
@@ -335,7 +335,7 @@ body::after {
text-transform: uppercase; text-transform: uppercase;
color: var(--text-muted); 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); } .grid-card:hover { background: var(--card-bg-2); }
[data-theme="light"] .grid-card:hover { background: #fafafa; } [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; margin-bottom: 24px; display: flex;
align-items: flex-end; justify-content: space-between; gap: 16px; align-items: flex-end; justify-content: space-between; gap: 16px;
border-bottom: 1px solid var(--border); padding-bottom: 20px; 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; flex-shrink: 0; padding-top: 32px;
} }
.page-title { font-size: 22px; font-weight: 400; color: var(--text-primary); letter-spacing: -0.3px; } .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; } .dashboard-header-stat-value { font-size: 15px; font-weight: 400; color: var(--text-primary); margin-top: 2px; }
/* Cards */ /* 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; } .card-title { font-size: 14px; font-weight: 400; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
.page-toolbar { .page-toolbar {
margin-bottom: 24px; 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; } .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; } .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; } .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 { 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-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-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; } .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 { .dashboard-chart-card {
background: var(--card-bg); background: var(--card-bg);
backdrop-filter: blur(12px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 4px;
padding: 20px; padding: 20px;
@@ -681,8 +681,8 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); }
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 4px;
background: var(--card-bg-2); background: var(--card-bg-2);
backdrop-filter: blur(12px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(20px);
padding: 12px 14px; padding: 12px 14px;
} }
@@ -711,8 +711,8 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); }
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 4px;
background: var(--card-bg-2); background: var(--card-bg-2);
backdrop-filter: blur(12px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(20px);
padding: 14px 16px; padding: 14px 16px;
} }
@@ -755,8 +755,8 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); }
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 4px;
background: var(--card-bg-2); background: var(--card-bg-2);
backdrop-filter: blur(12px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(20px);
padding: 16px; padding: 16px;
} }
@@ -952,7 +952,7 @@ textarea {
[data-theme="light"] .badge-needs_revision { background: #dc2626; color: #fff; border-color: #b91c1c; } [data-theme="light"] .badge-needs_revision { background: #dc2626; color: #fff; border-color: #b91c1c; }
/* Table */ /* 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 { .table-wrapper {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--table-scroll-thumb) transparent; scrollbar-color: var(--table-scroll-thumb) transparent;
@@ -1118,7 +1118,7 @@ select option { background: #222; color: #fff; }
/* Auth */ /* Auth */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: transparent; padding: 20px; position: relative; z-index: 1; } .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 { text-align: center; margin-bottom: 32px; }
.auth-logo h1 { font-size: 22px; font-weight: 400; color: #ffffff; letter-spacing: -0.5px; } .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; } .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; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.version-timeline { display: flex; flex-direction: column; gap: 12px; } .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-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-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; } .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 { .interactive-surface {
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; 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, .request-card:hover,
.interactive-surface:hover { border-color: var(--interactive-hover-border); } .interactive-surface:hover { border-color: var(--interactive-hover-border); }
.request-card:hover { background: var(--interactive-row-hover); } .request-card:hover { background: var(--interactive-row-hover); }
@@ -1463,8 +1463,8 @@ select option { background: #222; color: #fff; }
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: var(--card-bg-2); background: var(--card-bg-2);
backdrop-filter: blur(12px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(20px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
@@ -1507,8 +1507,8 @@ select option { background: #222; color: #fff; }
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 4px;
background: var(--card-bg-2); background: var(--card-bg-2);
backdrop-filter: blur(12px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(20px);
text-decoration: none; text-decoration: none;
} }
@@ -1530,8 +1530,8 @@ select option { background: #222; color: #fff; }
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 4px;
background: var(--card-bg); background: var(--card-bg);
backdrop-filter: blur(12px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(20px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;