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