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

Changed color and contrast gradients

Browse Source
This commit is contained in:
jramos
2026-02-10 09:54:42 -07:00
parent ba4d16396c
commit 626d0cac3a
2 changed files with 313 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
frontend/src/App.css
View File

@@ -4,12 +4,43 @@
font-family: 'Outfit', system-ui, sans-serif;
}
:root {
/* Base Colors */
--intel-darkest: #0A0E27;
--intel-dark: #131937;
--intel-medium: #1E2749;
--intel-accent: #00D9FF;
--intel-warning: #FFB800;
--intel-danger: #FF3366;
--intel-success: #00FF88;
--intel-grid: rgba(0, 217, 255, 0.1);
/* Text Colors with proper contrast */
--text-primary: #FFFFFF;
--text-secondary: #E4E8F1;
--text-tertiary: #B8C5D9;
--text-muted: #8A98B0;
}
body {
background-color: #0A0E27;
color: #E4E8F1;
overflow-x: hidden;
}
/* Utility Classes for Tailwind-style usage */
.bg-intel-darkest { background-color: var(--intel-darkest); }
.bg-intel-dark { background-color: var(--intel-dark); }
.bg-intel-medium { background-color: var(--intel-medium); }
.text-intel-accent { color: var(--intel-accent); }
.text-intel-warning { color: var(--intel-warning); }
.text-intel-danger { color: var(--intel-danger); }
.text-intel-success { color: var(--intel-success); }
.border-intel-accent { border-color: var(--intel-accent); }
.border-intel-warning { border-color: var(--intel-warning); }
.border-intel-danger { border-color: var(--intel-danger); }
.border-intel-grid { border-color: var(--intel-grid); }
/* Grid background effect */
.grid-bg {
background-image:
@@ -75,13 +106,17 @@ body {
}
}
/* Card hover effects */
/* Card hover effects with depth */
.intel-card {
background: linear-gradient(135deg, #131937 0%, #1E2749 100%);
border: 1px solid rgba(0, 217, 255, 0.1);
border: 1px solid rgba(0, 217, 255, 0.2);
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);
}
.intel-card::after {
@@ -93,16 +128,20 @@ body {
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(0, 217, 255, 0.05),
rgba(0, 217, 255, 0.08),
transparent
);
transition: left 0.5s;
pointer-events: none;
}
.intel-card:hover {
border-color: rgba(0, 217, 255, 0.4);
border-color: rgba(0, 217, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 217, 255, 0.15);
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);
}
.intel-card:hover::after {
@@ -177,7 +216,7 @@ body {
box-shadow: 0 0 10px #00FF88;
}
/* Button styles */
/* Button styles with depth and glow */
.intel-button {
position: relative;
font-family: 'JetBrains Mono', monospace;
@@ -190,6 +229,9 @@ body {
transition: all 0.3s;
border: 1px solid;
overflow: hidden;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.intel-button::before {
@@ -200,7 +242,7 @@ body {
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.15);
transform: translate(-50%, -50%);
transition: width 0.5s, height 0.5s;
}
@@ -211,69 +253,102 @@ body {
}
.intel-button-primary {
background: rgba(0, 217, 255, 0.15);
background: linear-gradient(135deg, rgba(0, 217, 255, 0.2) 0%, rgba(0, 217, 255, 0.15) 100%);
border-color: #00D9FF;
color: #00D9FF;
text-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
}
.intel-button-primary:hover {
background: rgba(0, 217, 255, 0.25);
box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
background: linear-gradient(135deg, rgba(0, 217, 255, 0.3) 0%, rgba(0, 217, 255, 0.25) 100%);
box-shadow:
0 0 25px rgba(0, 217, 255, 0.4),
0 4px 12px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.intel-button-danger {
background: rgba(255, 51, 102, 0.15);
background: linear-gradient(135deg, rgba(255, 51, 102, 0.2) 0%, rgba(255, 51, 102, 0.15) 100%);
border-color: #FF3366;
color: #FF3366;
text-shadow: 0 0 10px rgba(255, 51, 102, 0.3);
}
.intel-button-danger:hover {
background: rgba(255, 51, 102, 0.25);
box-shadow: 0 0 20px rgba(255, 51, 102, 0.3);
background: linear-gradient(135deg, rgba(255, 51, 102, 0.3) 0%, rgba(255, 51, 102, 0.25) 100%);
box-shadow:
0 0 25px rgba(255, 51, 102, 0.4),
0 4px 12px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.intel-button-success {
background: rgba(0, 255, 136, 0.15);
background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 255, 136, 0.15) 100%);
border-color: #00FF88;
color: #00FF88;
text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}
.intel-button-success:hover {
background: rgba(0, 255, 136, 0.25);
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
background: linear-gradient(135deg, rgba(0, 255, 136, 0.3) 0%, rgba(0, 255, 136, 0.25) 100%);
box-shadow:
0 0 25px rgba(0, 255, 136, 0.4),
0 4px 12px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
/* Input fields */
/* Input fields with better contrast */
.intel-input {
background: rgba(19, 25, 55, 0.5);
border: 1px solid rgba(0, 217, 255, 0.2);
color: #E4E8F1;
background: rgba(19, 25, 55, 0.7);
border: 1px solid rgba(0, 217, 255, 0.3);
color: #FFFFFF;
padding: 0.625rem 1rem;
border-radius: 0.375rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.875rem;
transition: all 0.3s;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.05);
}
.intel-input:focus {
outline: none;
border-color: #00D9FF;
box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.1);
background: rgba(19, 25, 55, 0.8);
box-shadow:
0 0 0 2px rgba(0, 217, 255, 0.2),
inset 0 2px 4px rgba(0, 0, 0, 0.2),
0 4px 12px rgba(0, 217, 255, 0.15);
background: rgba(19, 25, 55, 0.9);
}
.intel-input::placeholder {
color: rgba(228, 232, 241, 0.3);
color: rgba(228, 232, 241, 0.4);
}
/* Stat cards */
/* Stat cards with depth and glow */
.stat-card {
background: linear-gradient(135deg, rgba(19, 25, 55, 0.8) 0%, rgba(30, 39, 73, 0.6) 100%);
border: 1px solid rgba(0, 217, 255, 0.15);
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);
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);
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-2px);
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);
}
.stat-card::before {
@@ -284,13 +359,22 @@ body {
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #00D9FF, transparent);
opacity: 0.5;
opacity: 0.7;
box-shadow: 0 0 8px rgba(0, 217, 255, 0.5);
}
/* Modal overlay */
/* Modal overlay with proper backdrop */
.modal-overlay {
background: rgba(10, 14, 39, 0.95);
backdrop-filter: blur(8px);
background: rgba(10, 14, 39, 0.97);
backdrop-filter: blur(12px);
}
/* Modal card enhancements */
.intel-card.modal-card {
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.6),
0 10px 30px rgba(0, 217, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Scrollbar styling */
@@ -340,13 +424,89 @@ body {
/* Data table styling */
.data-row {
border-bottom: 1px solid rgba(0, 217, 255, 0.05);
border-bottom: 1px solid rgba(0, 217, 255, 0.1);
transition: all 0.2s;
}
.data-row:hover {
background: rgba(0, 217, 255, 0.03);
border-bottom-color: rgba(0, 217, 255, 0.2);
background: rgba(0, 217, 255, 0.06);
border-bottom-color: rgba(0, 217, 255, 0.3);
box-shadow: 0 2px 8px rgba(0, 217, 255, 0.1);
}
/* Vendor entry cards - high contrast and depth */
.vendor-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);
border-radius: 0.5rem;
padding: 1rem;
transition: all 0.3s ease;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.vendor-card:hover {
background: linear-gradient(135deg, rgba(19, 25, 55, 0.95) 0%, rgba(30, 39, 73, 0.9) 100%);
border-color: rgba(0, 217, 255, 0.4);
box-shadow:
0 4px 16px rgba(0, 217, 255, 0.15),
0 2px 8px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
}
/* Document list items with depth */
.document-item {
background: linear-gradient(135deg, rgba(10, 14, 39, 0.9) 0%, rgba(19, 25, 55, 0.8) 100%);
border: 1px solid rgba(0, 217, 255, 0.15);
border-radius: 0.375rem;
padding: 0.75rem;
transition: all 0.3s ease;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.document-item:hover {
background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(30, 39, 73, 0.9) 100%);
border-color: rgba(0, 217, 255, 0.3);
box-shadow:
0 4px 12px rgba(0, 217, 255, 0.12),
0 2px 6px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
transform: translateY(-1px);
}
/* JIRA ticket items with proper contrast */
.jira-ticket-item {
background: linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%);
border: 1px solid rgba(255, 184, 0, 0.2);
border-radius: 0.375rem;
padding: 0.75rem;
transition: all 0.3s ease;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.jira-ticket-item:hover {
background: linear-gradient(135deg, rgba(19, 25, 55, 0.95) 0%, rgba(30, 39, 73, 0.85) 100%);
border-color: rgba(255, 184, 0, 0.35);
box-shadow:
0 4px 12px rgba(255, 184, 0, 0.15),
0 2px 6px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* CVE Header card with depth */
.cve-header {
background: linear-gradient(135deg, rgba(19, 25, 55, 0.95) 0%, rgba(30, 39, 73, 0.9) 100%);
transition: all 0.3s ease;
}
.cve-header:hover {
background: linear-gradient(135deg, rgba(30, 39, 73, 0.95) 0%, rgba(42, 52, 88, 0.9) 100%);
}
/* Loading spinner */
@@ -361,7 +521,7 @@ body {
to { transform: rotate(360deg); }
}
/* Tooltip */
/* Tooltip with enhanced styling */
.tooltip {
position: relative;
}
@@ -373,8 +533,8 @@ body {
left: 50%;
transform: translateX(-50%);
padding: 0.5rem 0.75rem;
background: #1E2749;
border: 1px solid rgba(0, 217, 255, 0.3);
background: linear-gradient(135deg, #1E2749 0%, #2A3458 100%);
border: 1px solid rgba(0, 217, 255, 0.4);
border-radius: 0.25rem;
font-size: 0.75rem;
white-space: nowrap;
@@ -383,8 +543,43 @@ body {
transition: opacity 0.3s;
margin-bottom: 0.5rem;
font-family: 'JetBrains Mono', monospace;
color: #FFFFFF;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.4),
0 0 20px rgba(0, 217, 255, 0.2);
}
.tooltip:hover::after {
opacity: 1;
}
/* Enhanced heading glow */
h1.text-intel-accent,
h2.text-intel-accent,
h3.text-intel-accent {
text-shadow:
0 0 20px rgba(0, 217, 255, 0.4),
0 0 40px rgba(0, 217, 255, 0.2);
}
/* Enhanced border glow for featured cards */
.border-intel-accent {
box-shadow: 0 0 15px rgba(0, 217, 255, 0.15);
}
.border-intel-warning {
box-shadow: 0 0 15px rgba(255, 184, 0, 0.15);
}
.border-intel-danger {
box-shadow: 0 0 15px rgba(255, 51, 102, 0.15);
}
/* Quick lookup section enhancement */
.quick-lookup-card {
background: linear-gradient(135deg, rgba(19, 25, 55, 0.95) 0%, rgba(30, 39, 73, 0.9) 100%);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 40px rgba(0, 217, 255, 0.1);
}