Redesign homepage: Palantir dark theme, Dell branding, RSS feeds, DB connection tiles
This commit is contained in:
Lakehouse Admin
+258
-159
@@ -1,201 +1,300 @@
|
||||
/* 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');
|
||||
/* ATC Lakehouse — Palantir dark + Dell orange */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
--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);
|
||||
--bg-deep: #06080c;
|
||||
--bg-main: #0a0e14;
|
||||
--bg-card: #121820;
|
||||
--bg-card-hover: #181f2a;
|
||||
--border: rgba(74, 158, 255, 0.12);
|
||||
--border-hover: rgba(232, 117, 42, 0.45);
|
||||
--text: #e8ecf1;
|
||||
--text-muted: #8b9cb3;
|
||||
--accent-blue: #4a9eff;
|
||||
--accent-orange: #e8752a;
|
||||
--accent-orange-glow: rgba(232, 117, 42, 0.25);
|
||||
--dell-blue: #007db8;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Inter', system-ui, sans-serif !important;
|
||||
}
|
||||
|
||||
body {
|
||||
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;
|
||||
background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(0, 125, 184, 0.08), transparent),
|
||||
radial-gradient(ellipse 80% 50% at 100% 0%, rgba(232, 117, 42, 0.06), transparent),
|
||||
var(--bg-main) !important;
|
||||
color: var(--text) !important;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Hide default homepage elements that make it look standard */
|
||||
header { border-bottom: 1px solid rgba(255,255,255,0.03) !important; }
|
||||
/* ── Header / widgets row ── */
|
||||
#information-widgets,
|
||||
.information-widget-container {
|
||||
background: linear-gradient(180deg, #0d1219 0%, rgba(18, 24, 32, 0.98) 100%) !important;
|
||||
border-bottom: 2px solid transparent !important;
|
||||
border-image: linear-gradient(90deg, var(--dell-blue), var(--accent-orange), var(--dell-blue)) 1 !important;
|
||||
padding: 14px 28px !important;
|
||||
}
|
||||
|
||||
header {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.35rem !important;
|
||||
font-weight: 700 !important;
|
||||
background: linear-gradient(90deg, #fff 30%, var(--accent-orange) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.information-widget-greeting {
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
.information-widget-greeting .text-theme-800 {
|
||||
color: var(--accent-orange) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.information-widget-greeting .text-theme-500 {
|
||||
color: var(--text-muted) !important;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.information-widget-logo img,
|
||||
.information-widget-logo svg {
|
||||
max-height: 48px !important;
|
||||
width: auto !important;
|
||||
filter: drop-shadow(0 0 14px var(--accent-orange-glow));
|
||||
}
|
||||
|
||||
.information-widget-search input {
|
||||
background: var(--bg-deep) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 8px !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
.information-widget-search input:focus {
|
||||
border-color: var(--accent-orange) !important;
|
||||
box-shadow: 0 0 0 2px var(--accent-orange-glow) !important;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 24px 28px 48px !important;
|
||||
max-width: 1720px !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
.services-group {
|
||||
margin-bottom: 32px !important;
|
||||
}
|
||||
|
||||
.services-group > div:first-child,
|
||||
.services-group h2 {
|
||||
font-size: 0.72rem !important;
|
||||
font-weight: 700 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.14em !important;
|
||||
color: var(--accent-orange) !important;
|
||||
margin-bottom: 14px !important;
|
||||
padding-bottom: 8px !important;
|
||||
border-bottom: 2px solid transparent !important;
|
||||
border-image: linear-gradient(90deg, var(--accent-orange), var(--accent-blue), transparent) 1 !important;
|
||||
}
|
||||
|
||||
.services-group ul,
|
||||
.services-group > div:last-child {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
|
||||
gap: 12px !important;
|
||||
list-style: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Database sections — wider tiles, always show connection strings */
|
||||
.services-group:has(h2) ul .service:has(.service-description) {
|
||||
min-height: 168px !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;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
text-align: center !important;
|
||||
background: var(--bg-card) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 12px !important;
|
||||
padding: 16px 12px 14px !important;
|
||||
min-height: 132px !important;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
|
||||
position: relative !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.service::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, var(--dell-blue), var(--accent-orange));
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
background: var(--bg-card-hover) !important;
|
||||
border-color: var(--border-hover) !important;
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 24px var(--accent-orange-glow) !important;
|
||||
transform: translateY(-4px) !important;
|
||||
z-index: 2 !important;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
.service:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.service-description {
|
||||
font-size: 0.8rem !important;
|
||||
color: #94a3b8 !important;
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
width: 52px !important;
|
||||
height: 52px !important;
|
||||
min-width: 52px !important;
|
||||
margin: 0 0 10px 0 !important;
|
||||
padding: 8px !important;
|
||||
margin-right: 16px !important;
|
||||
border-radius: 12px !important;
|
||||
background: linear-gradient(145deg, rgba(0, 125, 184, 0.12), rgba(232, 117, 42, 0.08)) !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;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
.service-icon img,
|
||||
.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;
|
||||
object-fit: contain !important;
|
||||
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
|
||||
.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;
|
||||
.service-name {
|
||||
font-size: 0.84rem !important;
|
||||
font-weight: 600 !important;
|
||||
color: var(--text) !important;
|
||||
line-height: 1.25 !important;
|
||||
margin-bottom: 6px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.service:hover .service-icon svg,
|
||||
.service:hover .service-icon img {
|
||||
filter: drop-shadow(0 0 8px currentColor) saturate(150%) brightness(1.2) !important;
|
||||
.service-description {
|
||||
font-family: 'JetBrains Mono', monospace !important;
|
||||
font-size: 0.56rem !important;
|
||||
line-height: 1.5 !important;
|
||||
color: #7d8fa8 !important;
|
||||
white-space: pre-wrap !important;
|
||||
word-break: break-word !important;
|
||||
width: 100% !important;
|
||||
text-align: left !important;
|
||||
padding: 0 4px !important;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
/* DB / API tiles: show full connection info */
|
||||
.service:not([href]) .service-description,
|
||||
.service[href=""] .service-description {
|
||||
max-height: none !important;
|
||||
color: #9aadc4 !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
.service:hover .service-description {
|
||||
max-height: none !important;
|
||||
color: #b8c8dc !important;
|
||||
}
|
||||
|
||||
/* --- COLUMN GLOW EFFECTS (Borders & Headers only) --- */
|
||||
|
||||
/* 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; }
|
||||
|
||||
/* 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;
|
||||
.status-status-healthy,
|
||||
.status-dot-green {
|
||||
background: #3dd68c !important;
|
||||
box-shadow: 0 0 8px rgba(61, 214, 140, 0.5) !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;
|
||||
|
||||
.status-status-unhealthy,
|
||||
.status-dot-red {
|
||||
background: #f87171 !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;
|
||||
|
||||
.ping {
|
||||
position: absolute !important;
|
||||
top: 8px !important;
|
||||
right: 8px !important;
|
||||
font-size: 0.55rem !important;
|
||||
margin: 0 !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 {
|
||||
|
||||
.information-widget-resources {
|
||||
font-size: 0.75rem !important;
|
||||
margin-top: 2px !important;
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
.services-group:nth-child(7) .text-lg.font-bold {
|
||||
color: #94a3b8 !important;
|
||||
text-shadow: none !important;
|
||||
font-size: 1rem !important;
|
||||
|
||||
footer {
|
||||
opacity: 0.45;
|
||||
border-top: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
/* Live feed widgets */
|
||||
.services-group:has(.service-widget) ul {
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
|
||||
}
|
||||
|
||||
.services-group:has(.service-widget) .service {
|
||||
min-height: 220px !important;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
.service-widget {
|
||||
background: var(--bg-deep) !important;
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
margin-top: 10px !important;
|
||||
padding: 8px 10px !important;
|
||||
max-height: 200px !important;
|
||||
overflow-y: auto !important;
|
||||
width: 100% !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.service-widget::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.service-widget::-webkit-scrollbar-thumb {
|
||||
background: var(--accent-orange);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.service-widget a,
|
||||
.service-widget li a {
|
||||
color: var(--accent-blue) !important;
|
||||
font-size: 0.65rem !important;
|
||||
line-height: 1.4 !important;
|
||||
display: block !important;
|
||||
padding: 3px 0 !important;
|
||||
}
|
||||
|
||||
.service-widget a:hover {
|
||||
color: var(--accent-orange) !important;
|
||||
}
|
||||
|
||||
.service-widget li {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
|
||||
padding: 4px 0 !important;
|
||||
}
|
||||
|
||||
.information-widget-openmeteo {
|
||||
color: var(--text-muted) !important;
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user