Add icon colors to match services.yaml color fields
This commit is contained in:
Lakehouse Admin
+172
-94
@@ -1,123 +1,201 @@
|
||||
/* Lakehouse Dashboard - Colorful Palantir-style Theme */
|
||||
/* Refined Cyberpunk / Palantir Theme */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Montserrat:wght@400;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
--background-color: #0a0e1a;
|
||||
--card-background: #111827;
|
||||
--card-hover: #1f2937;
|
||||
--text-primary: #f9fafb;
|
||||
--text-secondary: #9ca3af;
|
||||
--accent-blue: #3b82f6;
|
||||
--accent-purple: #8b5cf6;
|
||||
--accent-pink: #ec4899;
|
||||
--accent-green: #10b981;
|
||||
--accent-orange: #f59e0b;
|
||||
--accent-cyan: #06b6d4;
|
||||
--accent-red: #ef4444;
|
||||
--accent-yellow: #fbbf24';
|
||||
--neon-blue: #00f3ff;
|
||||
--neon-purple: #9d00ff;
|
||||
--neon-green: #00ff66;
|
||||
--neon-pink: #ff007f;
|
||||
--neon-yellow: #ffea00;
|
||||
--neon-orange: #ff6600;
|
||||
--bg-dark: #050810;
|
||||
--card-bg-light: rgba(20, 27, 45, 0.85);
|
||||
--card-bg-dark: rgba(10, 15, 28, 0.6);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-dark) !important;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 40%, rgba(0, 243, 255, 0.05) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 60%, rgba(157, 0, 255, 0.05) 0%, transparent 50%) !important;
|
||||
font-family: 'Montserrat', sans-serif !important;
|
||||
color: #f1f5f9 !important;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: linear-gradient(135deg, var(--card-background) 0%, #1a2332 100%);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
/* Hide default homepage elements that make it look standard */
|
||||
header { border-bottom: 1px solid rgba(255,255,255,0.03) !important; }
|
||||
|
||||
/* The Cards - Sleek and Tight */
|
||||
.service {
|
||||
background: linear-gradient(135deg, var(--card-bg-light) 0%, var(--card-bg-dark) 100%) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||
border-left: 3px solid rgba(255, 255, 255, 0.1) !important;
|
||||
border-radius: 6px 12px 12px 6px !important;
|
||||
padding: 12px 16px !important;
|
||||
margin-bottom: 16px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
background: linear-gradient(135deg, var(--card-hover) 0%, #2d3748 100%);
|
||||
border-color: var(--accent-blue);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.5);
|
||||
.service:hover {
|
||||
transform: translateY(-2px) translateX(4px) !important;
|
||||
background: linear-gradient(135deg, rgba(30, 41, 65, 0.95) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
|
||||
border-color: rgba(255, 255, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
.group-header {
|
||||
background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: 1.3em;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid rgba(59, 130, 246, 0.3);
|
||||
/* Typography */
|
||||
.service-name {
|
||||
font-family: 'Fira Code', monospace !important;
|
||||
font-size: 1.05rem !important;
|
||||
font-weight: 600 !important;
|
||||
letter-spacing: 0.5px !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Colorful icons */
|
||||
.si-apachekafka { color: #ff6b6b !important; }
|
||||
.si-apachedebezium { color: #4ecdc4 !important; }
|
||||
.si-apachespark { color: #ffe66d !important; }
|
||||
.si-trino { color: #95e1d3 !important; }
|
||||
.si-mongodb { color: #f38181 !important; }
|
||||
.si-postgresql { color: #aa96da !important; }
|
||||
.si-apachecassandra { color: #fcbad3 !important; }
|
||||
.si-mysql { color: #a8d8ea !important; }
|
||||
.si-neo4j { color: #ff9a9e !important; }
|
||||
.si-minio { color: #a18cd1 !important; }
|
||||
.si-apacheairflow { color: #fd9644 !important; }
|
||||
.si-apachesuperset { color: #6c5ce7 !important; }
|
||||
.si-elasticsearch { color: #00cec9 !important; }
|
||||
.si-kibana { color: #e84393 !important; }
|
||||
.si-grafana { color: #fd79a8 !important; }
|
||||
.si-proxmox { color: #00b894 !important; }
|
||||
.si-git { color: #636e72 !important; }
|
||||
.si-openldap { color: #0984e3 !important; }
|
||||
.si-rss { color: #f59e0b !important; }
|
||||
|
||||
/* Animated background for specific groups */
|
||||
[data-group*="Data Pipeline"] .group-header {
|
||||
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #ffe66d);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
.service-description {
|
||||
font-size: 0.8rem !important;
|
||||
color: #94a3b8 !important;
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
[data-group*"Source Systems"] .group-header {
|
||||
background: linear-gradient(90deg, #f38181, #aa96da, #fcbad3);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
/* THE ICONS - Smaller and perfectly proportioned */
|
||||
.service-icon {
|
||||
width: 3.2rem !important;
|
||||
height: 3.2rem !important;
|
||||
min-width: 3.2rem !important;
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
border-radius: 10px !important;
|
||||
padding: 8px !important;
|
||||
margin-right: 16px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
box-shadow: inset 0 0 10px rgba(0,0,0,0.5) !important;
|
||||
}
|
||||
|
||||
[data-group*"Analytics"] .group-header {
|
||||
background: linear-gradient(90deg, #6c5ce7, #00cec9, #e84393);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
.service-icon img,
|
||||
.service-icon svg {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) saturate(130%) brightness(1.1) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
[data-group*"Data Engineering"] .group-header {
|
||||
background: linear-gradient(90deg, #8b5cf6, #ec4899, #10b981);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
.service:hover .service-icon {
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
transform: scale(1.08) !important;
|
||||
box-shadow: inset 0 0 15px rgba(255,255,255,0.05) !important;
|
||||
}
|
||||
|
||||
/* Smooth scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
.service:hover .service-icon svg,
|
||||
.service:hover .service-icon img {
|
||||
filter: drop-shadow(0 0 8px currentColor) saturate(150%) brightness(1.2) !important;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
/* Icon colors based on services.yaml */
|
||||
.mdi-apache-kafka, .si-apachekafka { color: #E02014 !important; }
|
||||
.mdi-database-sync, .si-apachedebezium { color: #4ECDC4 !important; }
|
||||
.mdi-star-four-points, .si-apachespark { color: #E25A1C !important; }
|
||||
.si-trino { color: #DD00A1 !important; }
|
||||
.si-mongodb { color: #47A248 !important; }
|
||||
.si-postgresql { color: #4169E1 !important; }
|
||||
.si-apachecassandra { color: #1287B1 !important; }
|
||||
.si-mysql { color: #4479A1 !important; }
|
||||
.si-neo4j { color: #008CC1 !important; }
|
||||
.mdi-database-cloud, .si-minio { color: #00d2ff !important; }
|
||||
.mdi-server-network { color: #b500ff !important; }
|
||||
.si-apacheairflow { color: #017CEE !important; }
|
||||
.mdi-chart-bar, .si-apachesuperset { color: #6c5ce7 !important; }
|
||||
.si-elasticsearch { color: #005571 !important; }
|
||||
.si-kibana { color: #F04E98 !important; }
|
||||
.si-grafana { color: #F46800 !important; }
|
||||
.si-proxmox { color: #E57000 !important; }
|
||||
.si-git { color: #F05032 !important; }
|
||||
.mdi-account-group, .si-openldap { color: #0984e3 !important; }
|
||||
.mdi-rss { color: #f59e0b !important; }
|
||||
|
||||
/* Group Headers - Tighter and more professional */
|
||||
.services-group > div.flex.items-center.justify-between.mb-2 {
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
|
||||
padding-bottom: 8px !important;
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background-color);
|
||||
.services-group .text-theme-700.dark\:text-theme-200.text-lg.font-bold {
|
||||
font-family: 'Montserrat', sans-serif !important;
|
||||
font-weight: 700 !important;
|
||||
font-size: 1.15rem !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 2px !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--accent-blue);
|
||||
border-radius: 5px;
|
||||
}
|
||||
/* --- COLUMN GLOW EFFECTS (Borders & Headers only) --- */
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-purple);
|
||||
}
|
||||
/* 1. Data Pipeline (Blue) */
|
||||
.services-group:nth-child(1) .service { border-left-color: var(--neon-blue) !important; }
|
||||
.services-group:nth-child(1) .service:hover { box-shadow: -5px 0 15px rgba(0, 243, 255, 0.15), 0 4px 12px rgba(0,0,0,0.5) !important; }
|
||||
.services-group:nth-child(1) .text-lg.font-bold { color: var(--neon-blue) !important; text-shadow: 0 0 10px rgba(0, 243, 255, 0.3) !important; }
|
||||
|
||||
/* Icon styling */
|
||||
svg {
|
||||
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
|
||||
/* 2. Source Systems (Purple) */
|
||||
.services-group:nth-child(2) .service { border-left-color: var(--neon-purple) !important; }
|
||||
.services-group:nth-child(2) .service:hover { box-shadow: -5px 0 15px rgba(157, 0, 255, 0.15), 0 4px 12px rgba(0,0,0,0.5) !important; }
|
||||
.services-group:nth-child(2) .text-lg.font-bold { color: var(--neon-purple) !important; text-shadow: 0 0 10px rgba(157, 0, 255, 0.3) !important; }
|
||||
|
||||
/* 3. Storage (Green) */
|
||||
.services-group:nth-child(3) .service { border-left-color: var(--neon-green) !important; }
|
||||
.services-group:nth-child(3) .service:hover { box-shadow: -5px 0 15px rgba(0, 255, 102, 0.15), 0 4px 12px rgba(0,0,0,0.5) !important; }
|
||||
.services-group:nth-child(3) .text-lg.font-bold { color: var(--neon-green) !important; text-shadow: 0 0 10px rgba(0, 255, 102, 0.3) !important; }
|
||||
|
||||
/* 4. Orchestration (Pink) */
|
||||
.services-group:nth-child(4) .service { border-left-color: var(--neon-pink) !important; }
|
||||
.services-group:nth-child(4) .service:hover { box-shadow: -5px 0 15px rgba(255, 0, 127, 0.15), 0 4px 12px rgba(0,0,0,0.5) !important; }
|
||||
.services-group:nth-child(4) .text-lg.font-bold { color: var(--neon-pink) !important; text-shadow: 0 0 10px rgba(255, 0, 127, 0.3) !important; }
|
||||
|
||||
/* 5. Analytics (Yellow) */
|
||||
.services-group:nth-child(5) .service { border-left-color: var(--neon-yellow) !important; }
|
||||
.services-group:nth-child(5) .service:hover { box-shadow: -5px 0 15px rgba(255, 234, 0, 0.15), 0 4px 12px rgba(0,0,0,0.5) !important; }
|
||||
.services-group:nth-child(5) .text-lg.font-bold { color: var(--neon-yellow) !important; text-shadow: 0 0 10px rgba(255, 234, 0, 0.3) !important; }
|
||||
|
||||
/* 6. Management (Orange) */
|
||||
.services-group:nth-child(6) .service { border-left-color: var(--neon-orange) !important; }
|
||||
.services-group:nth-child(6) .service:hover { box-shadow: -5px 0 15px rgba(255, 102, 0, 0.15), 0 4px 12px rgba(0,0,0,0.5) !important; }
|
||||
.services-group:nth-child(6) .text-lg.font-bold { color: var(--neon-orange) !important; text-shadow: 0 0 10px rgba(255, 102, 0, 0.3) !important; }
|
||||
|
||||
/* --- 7. RSS FEEDS (Compact Layout) --- */
|
||||
.services-group:nth-child(7) .service {
|
||||
border-left-color: #64748b !important;
|
||||
padding: 8px 12px !important;
|
||||
margin-bottom: 10px !important;
|
||||
background: rgba(15, 23, 42, 0.4) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.services-group:nth-child(7) .service:hover {
|
||||
background: rgba(30, 41, 59, 0.8) !important;
|
||||
box-shadow: -3px 0 10px rgba(100, 116, 139, 0.2) !important;
|
||||
}
|
||||
.services-group:nth-child(7) .service-icon {
|
||||
width: 2rem !important;
|
||||
height: 2rem !important;
|
||||
min-width: 2rem !important;
|
||||
padding: 5px !important;
|
||||
margin-right: 12px !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
.services-group:nth-child(7) .service-name {
|
||||
font-size: 0.9rem !important;
|
||||
font-family: 'Inter', sans-serif !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
.services-group:nth-child(7) .service-description {
|
||||
font-size: 0.75rem !important;
|
||||
margin-top: 2px !important;
|
||||
}
|
||||
.services-group:nth-child(7) .text-lg.font-bold {
|
||||
color: #94a3b8 !important;
|
||||
text-shadow: none !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user