jramos/cve-dashboard
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Add STRONG depth and contrast to intelligence dashboard

Browse Source 
VISUAL IMPROVEMENTS:
- Increased border thickness from 1px to 2px on all cards for visibility
- Enhanced box shadows with multiple layers for dramatic depth
- Made stat cards much more prominent with stronger borders

STATUS BADGES:
- Increased text brightness (Critical: #FF6B94, High: #FFD966, etc.)
- Added text-shadow glow effects for better contrast
- Made borders thicker (2px) with higher opacity (0.8)
- Enhanced background gradients (0.3/0.2 opacity)
- Larger pulse dots (8px) with stronger glow

CARD DEPTH:
- intel-card: 2px borders, inset top/bottom glow, dramatic shadows
- stat-card: 2px cyan borders, 3px glowing top bar, strong shadows
- vendor-card: 2px borders, nested appearance with lift on hover
- document-item: Recessed look with inset shadows

SHADOWS & EFFECTS:
- Base shadows: 0 8px 16px rgba(0,0,0,0.6)
- Hover glow: 0 0 40px rgba(0,217,255,0.2)
- Inset highlights for dimensional appearance
- Transform on hover for lift effect

All changes maintain the cyber-intelligence aesthetic while making
the depth and hierarchy dramatically more visible.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
jramos
2026-02-10 10:03:07 -07:00
parent 626d0cac3a
commit c22a3a70ab
1 changed files with 98 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
frontend/src/App.css
View File

@@ -106,17 +106,18 @@ body {
} }
} }
/* Card hover effects with depth */ /* Card hover effects with STRONG depth */
.intel-card { .intel-card {
background: linear-gradient(135deg, #131937 0%, #1E2749 100%); background: linear-gradient(135deg, rgba(19, 25, 55, 1) 0%, rgba(30, 39, 73, 0.95) 50%, rgba(19, 25, 55, 1) 100%);
border: 1px solid rgba(0, 217, 255, 0.2); border: 2px solid rgba(0, 217, 255, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: box-shadow:
0 4px 6px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.6),
0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.05); inset 0 2px 0 rgba(0, 217, 255, 0.15),
inset 0 -2px 0 rgba(0, 217, 255, 0.05);
} }
.intel-card::after { .intel-card::after {
@@ -128,7 +129,7 @@ body {
height: 100%; height: 100%;
background: linear-gradient(90deg, background: linear-gradient(90deg,
transparent, transparent,
rgba(0, 217, 255, 0.08), rgba(0, 217, 255, 0.15),
transparent transparent
); );
transition: left 0.5s; transition: left 0.5s;
@@ -136,84 +137,90 @@ body {
} }
.intel-card:hover { .intel-card:hover {
border-color: rgba(0, 217, 255, 0.5); border-color: rgba(0, 217, 255, 0.8);
transform: translateY(-2px); transform: translateY(-3px);
box-shadow: box-shadow:
0 12px 28px rgba(0, 217, 255, 0.2), 0 16px 32px rgba(0, 217, 255, 0.3),
0 6px 12px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1); inset 0 2px 0 rgba(0, 217, 255, 0.3),
0 0 40px rgba(0, 217, 255, 0.2);
} }
.intel-card:hover::after { .intel-card:hover::after {
left: 100%; left: 100%;
} }
/* Status badges with glow */ /* Status badges with STRONG glow and contrast */
.status-badge { .status-badge {
position: relative; position: relative;
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 700;
letter-spacing: 0.5px; letter-spacing: 0.5px;
text-transform: uppercase; text-transform: uppercase;
padding: 0.25rem 0.75rem; padding: 0.375rem 0.875rem;
border-radius: 0.25rem; border-radius: 0.375rem;
border: 1px solid; border: 2px solid;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
} }
.status-badge::before { .status-badge::before {
content: ''; content: '';
width: 6px; width: 8px;
height: 6px; height: 8px;
border-radius: 50%; border-radius: 50%;
animation: pulse-glow 2s ease-in-out infinite; animation: pulse-glow 2s ease-in-out infinite;
} }
.status-critical { .status-critical {
background: rgba(255, 51, 102, 0.1); background: linear-gradient(135deg, rgba(255, 51, 102, 0.3) 0%, rgba(255, 51, 102, 0.2) 100%);
border-color: rgba(255, 51, 102, 0.4); border-color: rgba(255, 51, 102, 0.8);
color: #FF3366; color: #FF6B94;
text-shadow: 0 0 10px rgba(255, 51, 102, 0.8);
} }
.status-critical::before { .status-critical::before {
background: #FF3366; background: #FF3366;
box-shadow: 0 0 10px #FF3366; box-shadow: 0 0 16px #FF3366, 0 0 8px #FF3366;
} }
.status-high { .status-high {
background: rgba(255, 184, 0, 0.1); background: linear-gradient(135deg, rgba(255, 184, 0, 0.3) 0%, rgba(255, 184, 0, 0.2) 100%);
border-color: rgba(255, 184, 0, 0.4); border-color: rgba(255, 184, 0, 0.8);
color: #FFB800; color: #FFD966;
text-shadow: 0 0 10px rgba(255, 184, 0, 0.8);
} }
.status-high::before { .status-high::before {
background: #FFB800; background: #FFB800;
box-shadow: 0 0 10px #FFB800; box-shadow: 0 0 16px #FFB800, 0 0 8px #FFB800;
} }
.status-medium { .status-medium {
background: rgba(0, 217, 255, 0.1); background: linear-gradient(135deg, rgba(0, 217, 255, 0.3) 0%, rgba(0, 217, 255, 0.2) 100%);
border-color: rgba(0, 217, 255, 0.4); border-color: rgba(0, 217, 255, 0.8);
color: #00D9FF; color: #66E5FF;
text-shadow: 0 0 10px rgba(0, 217, 255, 0.8);
} }
.status-medium::before { .status-medium::before {
background: #00D9FF; background: #00D9FF;
box-shadow: 0 0 10px #00D9FF; box-shadow: 0 0 16px #00D9FF, 0 0 8px #00D9FF;
} }
.status-low { .status-low {
background: rgba(0, 255, 136, 0.1); background: linear-gradient(135deg, rgba(0, 255, 136, 0.3) 0%, rgba(0, 255, 136, 0.2) 100%);
border-color: rgba(0, 255, 136, 0.4); border-color: rgba(0, 255, 136, 0.8);
color: #00FF88; color: #66FFB3;
text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
} }
.status-low::before { .status-low::before {
background: #00FF88; background: #00FF88;
box-shadow: 0 0 10px #00FF88; box-shadow: 0 0 16px #00FF88, 0 0 8px #00FF88;
} }
/* Button styles with depth and glow */ /* Button styles with depth and glow */
@@ -329,26 +336,29 @@ body {
color: rgba(228, 232, 241, 0.4); color: rgba(228, 232, 241, 0.4);
} }
/* Stat cards with depth and glow */ /* Stat cards with STRONG depth and glow */
.stat-card { .stat-card {
background: linear-gradient(135deg, rgba(19, 25, 55, 0.9) 0%, rgba(30, 39, 73, 0.8) 100%); background: linear-gradient(135deg, rgba(19, 25, 55, 1) 0%, rgba(30, 39, 73, 0.95) 100%);
border: 1px solid rgba(0, 217, 255, 0.25); border: 2px solid rgba(0, 217, 255, 0.5);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1rem; padding: 1rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: box-shadow:
0 4px 12px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.05); 0 3px 8px rgba(0, 0, 0, 0.3),
inset 0 2px 0 rgba(0, 217, 255, 0.2);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.stat-card:hover { .stat-card:hover {
transform: translateY(-2px); transform: translateY(-3px);
border-color: rgba(0, 217, 255, 0.8);
box-shadow: box-shadow:
0 8px 20px rgba(0, 217, 255, 0.15), 0 12px 28px rgba(0, 217, 255, 0.25),
0 4px 12px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1); inset 0 2px 0 rgba(0, 217, 255, 0.3),
0 0 30px rgba(0, 217, 255, 0.2);
} }
.stat-card::before { .stat-card::before {
@@ -357,10 +367,10 @@ body {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 2px; height: 3px;
background: linear-gradient(90deg, transparent, #00D9FF, transparent); background: linear-gradient(90deg, transparent, #00D9FF, transparent);
opacity: 0.7; opacity: 0.9;
box-shadow: 0 0 8px rgba(0, 217, 255, 0.5); box-shadow: 0 0 12px rgba(0, 217, 255, 0.7);
} }
/* Modal overlay with proper backdrop */ /* Modal overlay with proper backdrop */
@@ -583,3 +593,44 @@ h3.text-intel-accent {
inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 40px rgba(0, 217, 255, 0.1); 0 0 40px rgba(0, 217, 255, 0.1);
} }
/* Vendor Cards - nested depth */
.vendor-card {
background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(19, 25, 55, 0.9) 100%);
border: 2px solid rgba(0, 217, 255, 0.3);
border-radius: 0.5rem;
padding: 1rem;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(0, 217, 255, 0.1);
transition: all 0.3s ease;
}
.vendor-card:hover {
border-color: rgba(0, 217, 255, 0.6);
box-shadow:
0 8px 20px rgba(0, 217, 255, 0.2),
0 4px 12px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(0, 217, 255, 0.2);
transform: translateX(4px);
}
/* Document items - recessed appearance */
.document-item {
background: linear-gradient(135deg, rgba(10, 14, 39, 1) 0%, rgba(13, 17, 43, 0.98) 100%);
border: 1px solid rgba(0, 217, 255, 0.25);
border-radius: 0.375rem;
padding: 0.75rem;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.4),
0 1px 2px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease;
}
.document-item:hover {
border-color: rgba(0, 217, 255, 0.5);
background: linear-gradient(135deg, rgba(13, 17, 43, 1) 0%, rgba(19, 25, 55, 0.95) 100%);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.3),
0 2px 8px rgba(0, 217, 255, 0.15);
}