:
*
* 4. (Optional) Replace the logo img src with assets/dvt-logo.svg
*
* --------------------------------
*/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');
/* ============================================================
CSS CUSTOM PROPERTIES
============================================================ */
:root {
--neon-blue: #00f5ff;
--neon-purple: #7b2fff;
--neon-pink: #ff00aa;
--deep-bg: #020818;
--panel-bg: rgba(0, 20, 60, 0.85);
--panel-border: rgba(0, 245, 255, 0.25);
--glow-blue: 0 0 6px rgba(0, 245, 255, 0.3), 0 0 15px rgba(0, 245, 255, 0.1);
--glow-purple: 0 0 10px rgba(123, 47, 255, 0.6), 0 0 30px rgba(123, 47, 255, 0.2);
--text-primary: #e0f4ff;
--text-secondary: #7ab8d4;
--accent: #00f5ff;
}
/* ============================================================
BASE / RESET
============================================================ */
html, body {
background: var(--deep-bg) !important;
color: var(--text-primary) !important;
font-family: 'Rajdhani', sans-serif !important;
}
/* Radial glow background layers */
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(ellipse at 15% 20%, rgba(0, 100, 255, 0.12) 0%, transparent 50%),
radial-gradient(ellipse at 85% 80%, rgba(123, 47, 255, 0.10) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(0, 245, 255, 0.04) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
/* animation removed for performance */
}
/* Dot-grid overlay */
body::after {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
linear-gradient(rgba(0, 245, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 245, 255, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
z-index: 0;
}
@keyframes bgPulse {
0% { opacity: 0.6; }
100% { opacity: 1; }
}
/* ============================================================
SCROLLBAR
============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(0, 10, 30, 0.5); }
::-webkit-scrollbar-thumb {
background: rgba(0, 245, 255, 0.3);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 245, 255, 0.6);
box-shadow: 0 0 6px rgba(0, 245, 255, 0.4);
}
::selection {
background: rgba(0, 245, 255, 0.3) !important;
color: white !important;
}
/* ============================================================
APP LAYOUT
============================================================ */
.app.app-row {
background: #020818 !important;
min-height: 100vh !important;
}
.app-content {
background: transparent !important;
position: relative !important;
z-index: 1 !important;
}
.bg-navy { background: rgba(0, 8, 25, 0.95) !important; }
.text-navy-lightest { color: var(--text-primary) !important; }
/* ============================================================
SIDEBAR / LEFT PANEL (.app-menu)
============================================================ */
.app-menu.app-column {
background: linear-gradient(180deg,
rgba(0, 5, 18, 0.98) 0%,
rgba(0, 3, 12, 0.99) 100%) !important;
border-right: 1px solid rgba(0, 245, 255, 0.2) !important;
box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5),
2px 0 0 rgba(0, 245, 255, 0.05) !important;
position: relative !important;
z-index: 10 !important;
}
/* Animated vertical glow line on right edge */
.app-menu.app-column::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 1px; height: 100%;
background: linear-gradient(180deg,
transparent,
rgba(0,245,255,0.5) 30%,
rgba(123,47,255,0.5) 70%,
transparent);
/* animation removed for performance */
}
@keyframes vertScan {
0% { opacity: 0.3; }
50% { opacity: 1; }
100% { opacity: 0.3; }
}
/* Sidebar scroll area */
.app-scroll.app-pad.app-flush-right {
background: linear-gradient(180deg,
rgba(0,6,20,0.97) 0%,
rgba(0,3,12,0.99) 100%) !important;
}
/* ============================================================
HEADER / LOGO BAR
============================================================ */
.app-header.app-navbar.app-shadow.app-pad {
background: rgba(0, 6, 20, 0.97) !important;
border-bottom: 1px solid rgba(0, 245, 255, 0.3) !important;
box-shadow: 0 2px 0 rgba(0, 245, 255, 0.15) !important;
overflow: visible !important;
}
/* Remove dbt's default .app-pad padding from sidebar header */
.app-menu .app-header.app-pad {
padding: 0 !important;
}
.app-header.app-navbar.app-shadow {
background: rgba(0, 5, 18, 0.95) !important;
border-bottom: 1px solid rgba(0, 245, 255, 0.15) !important;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
}
/* Bottom edge scanning glow */
.app-header.app-navbar.app-shadow::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(0, 245, 255, 0.7) 20%,
rgba(123, 47, 255, 0.5) 50%,
rgba(0, 245, 255, 0.7) 80%,
transparent 100%);
/* animation removed for performance */
}
@keyframes headerScan {
0% { opacity: 0.3; }
50% { opacity: 1; }
100% { opacity: 0.3; }
}
/* ============================================================
LOGO BLOCK
============================================================ */
.logo {
background: linear-gradient(135deg,
rgba(0,20,60,0.8),
rgba(0,5,20,0.9)) !important;
border-right: 1px solid rgba(0, 245, 255, 0.2) !important;
position: relative !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
}
.logo::before {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: conic-gradient(from 0deg,
transparent,
rgba(0,245,255,0.03),
transparent 180deg);
/* animation removed for performance */
pointer-events: none;
}
@keyframes logoRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Logo anchor */
.logo > a[href="#!/overview"] {
font-family: inherit !important;
font-size: inherit !important;
letter-spacing: inherit !important;
color: inherit !important;
text-transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 0 8px !important;
border-bottom: none !important;
background: transparent !important;
gap: 10px !important;
height: 100% !important;
width: 100% !important;
text-decoration: none !important;
}
/* Logo SVG (if using the inline or img version) */
.logo > a img,
.logo > a svg {
width: 36px !important;
height: 36px !important;
filter: drop-shadow(0 0 6px rgba(0, 245, 255, 0.8)) !important;
/* no animation — static glow */
flex-shrink: 0 !important;
transition: animation 0.3s ease !important;
}
/* Logo spin on hover */
.logo > a:hover img,
.logo > a:hover svg {
animation: logoSpin 1s linear infinite !important;
filter: drop-shadow(0 0 12px rgba(0, 245, 255, 1)) !important;
}
@keyframes logoSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Logo text */
.logo > a > span {
font-family: 'Orbitron', monospace !important;
font-size: 9.5px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
color: #00f5ff !important;
text-transform: uppercase !important;
text-shadow:
0 0 10px rgba(0,245,255,0.7),
0 0 25px rgba(0,245,255,0.3) !important;
white-space: nowrap !important;
/* no animation — static */
}
@keyframes logoPulse {
0% { opacity: 0.7; }
100% { opacity: 1; }
}
@keyframes textFlicker {
0%, 92%, 94%, 100% { opacity: 1; }
93% { opacity: 0.7; }
}
/* ============================================================
SEARCH INPUT
============================================================ */
.app-header.app-navbar.app-shadow input.form-control {
background: rgba(0, 12, 35, 0.8) !important;
border: 1px solid rgba(0, 245, 255, 0.25) !important;
border-radius: 4px !important;
color: rgba(150, 220, 255, 0.9) !important;
font-family: 'Rajdhani', sans-serif !important;
font-size: 13px !important;
letter-spacing: 1px !important;
padding: 8px 16px !important;
box-shadow: none !important;
transition: all 0.3s ease !important;
}
.app-header.app-navbar.app-shadow input.form-control:focus {
border-color: rgba(0, 245, 255, 0.5) !important;
box-shadow: 0 0 20px rgba(0, 245, 255, 0.15) !important;
outline: none !important;
}
.app-header.app-navbar.app-shadow input.form-control::placeholder {
color: rgba(0, 245, 255, 0.35) !important;
font-style: italic !important;
}
/* ============================================================
SIDEBAR NAV — OVERVIEW LINK (not logo)
============================================================ */
.app-scroll a[href="#!/overview"],
.menu a[href="#!/overview"] {
font-family: 'Orbitron', monospace !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
color: rgba(0, 245, 255, 0.7) !important;
text-transform: uppercase !important;
display: block !important;
padding: 8px 12px !important;
border-bottom: 1px solid rgba(0, 245, 255, 0.1) !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
}
.app-scroll a[href="#!/overview"]:hover,
.menu a[href="#!/overview"]:hover {
color: #00f5ff !important;
text-shadow: 0 0 10px rgba(0, 245, 255, 0.6) !important;
background: rgba(0, 245, 255, 0.04) !important;
}
/* ============================================================
SIDEBAR — PROJECT / DATABASE / GROUP TABS (.switch)
============================================================ */
.switches {
background: rgba(0, 8, 25, 0.9) !important;
border-bottom: 1px solid rgba(0, 245, 255, 0.15) !important;
padding: 4px 8px !important;
display: flex !important;
gap: 4px !important;
}
.switch {
background: rgba(0, 20, 50, 0.6) !important;
border: 1px solid rgba(0, 245, 255, 0.2) !important;
border-radius: 3px !important;
color: var(--text-secondary) !important;
font-family: 'Orbitron', monospace !important;
font-size: 9px !important;
font-weight: 600 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 5px 12px !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
position: relative !important;
overflow: hidden !important;
}
.switch:hover {
background: rgba(0, 245, 255, 0.06) !important;
border-color: rgba(0, 245, 255, 0.4) !important;
color: #00f5ff !important;
text-shadow: 0 0 6px rgba(0, 245, 255, 0.6) !important;
}
.switch.active {
background: rgba(0, 245, 255, 0.18) !important;
border-color: rgba(0, 245, 255, 0.8) !important;
color: #00f5ff !important;
text-shadow: 0 0 12px rgba(0, 245, 255, 1) !important;
box-shadow:
0 0 15px rgba(0, 245, 255, 0.3),
inset 0 0 10px rgba(0, 245, 255, 0.08) !important;
}
/* Override dbt's .btn white backgrounds inside switches */
.switch-label,
.switch-label.btn,
.switch-label.btn.btn-sm,
.switch .btn,
.switch span {
background: transparent !important;
background: transparent !important;
color: inherit !important;
border: none !important;
box-shadow: none !important;
font-family: inherit !important;
font-size: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
padding: 0 !important;
text-shadow: inherit !important;
}
.switch-label.btn.active,
.switch-label.btn.btn-sm.active,
.switch .btn.active,
.switches .switch .switch-label.active {
background: transparent !important;
background: transparent !important;
color: #00f5ff !important;
}
.switch:hover .switch-label,
.switch:hover .btn {
background: transparent !important;
background: transparent !important;
color: #00f5ff !important;
}
/* ============================================================
SIDEBAR — SECTION LABELS (Sources, Projects)
============================================================ */
.app-menu strong,
.menu strong {
font-family: 'Orbitron', monospace !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 4px !important;
text-transform: uppercase !important;
color: rgba(123, 47, 255, 0.9) !important;
text-shadow: 0 0 12px rgba(123, 47, 255, 0.6) !important;
display: block !important;
margin: 14px 0 6px 8px !important;
padding-bottom: 4px !important;
border-bottom: 1px solid rgba(123, 47, 255, 0.2) !important;
}
/* ============================================================
SIDEBAR — FILE / NODE LINKS
============================================================ */
.filename,
.filename-normal {
font-family: 'Rajdhani', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: rgba(140, 195, 220, 0.85) !important;
letter-spacing: 0.3px !important;
transition: color 0.2s ease, text-shadow 0.2s ease !important;
}
/* Sidebar item hover — ONLY the specific hovered link glows */
.menu li > a:hover .filename,
.menu li > a:hover .filename-normal,
.menu li > a:hover .filename-ellip,
.menu li > a:hover .filename-normal.ng-binding,
.menu li > a:hover span {
color: #00f5ff !important;
text-shadow: 0 0 8px rgba(0, 245, 255, 0.5) !important;
}
/* Sidebar icons glow on hover — ONLY the hovered item */
.menu li > a:hover svg,
.menu li > a:hover svg use,
.menu li > a:hover svg path,
.menu li > a:hover svg g {
fill: #00f5ff !important;
color: #00f5ff !important;
stroke: #00f5ff !important;
filter: drop-shadow(0 0 3px rgba(0, 245, 255, 0.3)) !important;
}
.menu li {
border-left: 1px solid transparent !important;
transition: all 0.2s ease !important;
padding-left: 4px !important;
}
.menu li:hover {
border-left-color: rgba(0, 245, 255, 0.4) !important;
background: rgba(0, 245, 255, 0.02) !important;
}
.menu a.active,
.menu a.selected,
.menu li.active > a {
color: #00f5ff !important;
text-shadow: 0 0 8px rgba(0, 245, 255, 0.4) !important;
background: rgba(0, 245, 255, 0.04) !important;
border-left: 2px solid rgba(0, 245, 255, 0.5) !important;
}
.menu li > a:hover {
background: rgba(0, 245, 255, 0.06) !important;
border-left: 2px solid rgba(0, 245, 255, 0.4) !important;
}
/* Kill dbt's white/bright selected item backgrounds in sidebar */
.app-menu a.selected,
.app-menu li.selected > a {
background: rgba(0, 245, 255, 0.04) !important;
background-color: rgba(0, 245, 255, 0.04) !important;
color: #00f5ff !important;
}
.app-menu a:hover {
background: rgba(0, 245, 255, 0.06) !important;
background-color: rgba(0, 245, 255, 0.06) !important;
}
/* ============================================================
MAIN CONTENT PANEL
============================================================ */
.panel,
.panel-default {
background: rgba(0, 10, 30, 0.75) !important;
border: 1px solid rgba(0, 245, 255, 0.12) !important;
border-radius: 8px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
/* backdrop-filter removed — causes scroll glitching */
position: relative !important;
overflow: hidden !important;
}
/* Top accent line */
.panel.panel-default::before {
content: '';
position: absolute;
top: 0; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,245,255,0.5), transparent);
pointer-events: none;
}
/* Top-right corner bracket */
.panel.panel-default::after {
content: '';
position: absolute;
top: -1px; right: -1px;
width: 20px; height: 20px;
border-top: 2px solid rgba(0, 245, 255, 0.6);
border-right: 2px solid rgba(0, 245, 255, 0.6);
pointer-events: none;
}
.panel-body {
background: transparent !important;
padding: 28px 32px !important;
}
/* ============================================================
TYPOGRAPHY
============================================================ */
h1, h2, h3, h4, h5, h6 {
font-family: 'Orbitron', monospace !important;
color: var(--neon-blue) !important;
text-transform: uppercase !important;
letter-spacing: 3px !important;
text-shadow: var(--glow-blue) !important;
}
h1 {
font-size: 18px !important;
color: var(--text-secondary) !important;
text-shadow: none !important;
}
/* Resource name span inside h1 — matches theme */
h1 > span, h1 > span.ng-binding {
color: var(--text-secondary) !important;
text-shadow: none !important;
}
h2 {
font-size: 13px !important;
letter-spacing: 4px !important;
margin-top: 28px !important;
margin-bottom: 10px !important;
color: rgba(0, 245, 255, 0.85) !important;
padding-bottom: 6px !important;
border-bottom: 1px solid rgba(0, 245, 255, 0.12) !important;
}
h3, h4 {
font-size: 12px !important;
letter-spacing: 2px !important;
color: rgba(0, 245, 255, 0.8) !important;
}
h5, h6 {
font-size: 11px !important;
letter-spacing: 2px !important;
color: rgba(0, 245, 255, 0.7) !important;
}
/* Resource type badge (TABLE, VIEW, etc.) */
small, small.ng-binding {
color: var(--text-secondary) !important;
font-family: 'Orbitron', sans-serif !important;
letter-spacing: 2px !important;
}
p, li {
font-family: 'Rajdhani', sans-serif !important;
color: rgba(170, 210, 235, 0.9) !important;
line-height: 1.85 !important;
font-size: 14px !important;
}
/* Detail page — catch-all text readability */
.panel-body span,
.panel-body div,
.panel-body label {
color: var(--text-primary) !important;
}
.panel-body strong,
.panel-body b,
.panel-body dt {
color: var(--neon-blue) !important;
font-family: 'Orbitron', sans-serif !important;
font-size: 11px !important;
letter-spacing: 1px !important;
}
.panel-body dd {
color: var(--text-secondary) !important;
}
/* Global app text color override */
.app-body span,
.app-body div:not(.logo):not(#dvt-particles) {
color: var(--text-primary) !important;
}
a {
color: rgba(0, 245, 255, 0.8) !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
a:hover {
color: #00f5ff !important;
text-shadow: 0 0 8px rgba(0, 245, 255, 0.4) !important;
}
em, i {
font-style: italic !important;
color: rgba(255, 200, 100, 0.85) !important;
}
/* ============================================================
INLINE CODE / KEYWORD TAGS
============================================================ */
code,
pre,
.app-tag {
font-family: 'Share Tech Mono', monospace !important;
background: rgba(0, 30, 60, 0.8) !important;
color: #00f5ff !important;
border: 1px solid rgba(0, 245, 255, 0.25) !important;
border-radius: 3px !important;
padding: 1px 6px !important;
font-size: 11px !important;
letter-spacing: 1px !important;
}
/* ============================================================
SEARCH RESULTS
============================================================ */
.result.search-result {
background: rgba(0, 8, 22, 0.8) !important;
border: 1px solid rgba(0, 245, 255, 0.1) !important;
border-radius: 5px !important;
margin: 4px 8px 4px 0 !important;
padding: 8px 12px !important;
transition: all 0.25s ease !important;
display: block !important;
text-decoration: none !important;
position: relative !important;
overflow: hidden !important;
}
.result.search-result::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(180deg,
transparent,
rgba(0, 245, 255, 0.6),
transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.result.search-result:hover::before { opacity: 1; }
.result.search-result:hover {
background: rgba(0, 20, 45, 0.95) !important;
border-color: rgba(0, 245, 255, 0.35) !important;
box-shadow: 0 0 20px rgba(0, 245, 255, 0.08) !important;
transform: translateX(3px) !important;
}
/* ============================================================
FLOATING GRAPH BUTTON
============================================================ */
/* Lineage graph floating button — circular with neon glow */
.btn.btn-info.btn-pill.btn-lg,
.app-footer .btn.btn-info,
.btn.btn-info.btn-pill {
background: rgba(0, 10, 30, 0.9) !important;
background-color: rgba(0, 10, 30, 0.9) !important;
border: 2px solid rgba(0, 245, 255, 0.6) !important;
border-radius: 50% !important;
box-shadow:
0 0 15px rgba(0, 245, 255, 0.4),
0 0 35px rgba(0, 245, 255, 0.15),
inset 0 0 10px rgba(0, 245, 255, 0.1) !important;
/* no animation — static glow */
color: #00f5ff !important;
}
.btn.btn-info.btn-pill svg,
.btn.btn-info.btn-pill svg use,
.btn.btn-info.btn-pill svg path {
fill: #00f5ff !important;
color: #00f5ff !important;
}
/* Kill the square background behind the circular lineage button */
.btn.btn-info.btn-pill.btn-shadow,
.btn.btn-pill.btn-shadow {
background-clip: padding-box !important;
}
.app-footer,
.launcher,
.launcher.ng-isolate-scope,
.launcher-section,
.launcher-btn {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
@keyframes floatPulse {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.05); opacity: 1; }
}
/* ============================================================
CHECKBOXES / FORM CONTROLS
============================================================ */
input[type="checkbox"] {
accent-color: var(--neon-blue) !important;
}
/* ============================================================
MISC / UTILITY
============================================================ */
hr {
border-color: rgba(0, 245, 255, 0.15) !important;
}
tr:hover,
li:hover {
background: rgba(0, 245, 255, 0.03) !important;
}
/* ============================================================
DVT ADDITIONAL FIXES — graph, tables, panels
============================================================ */
/* Lineage graph dark background */
#cy, .graph-container, [data-cy], .viz-container {
background: #020818 !important;
}
/* Graph launcher area */
.graph-launcher, .launcher {
background: rgba(0, 20, 60, 0.95) !important;
}
/* Lineage Graph header */
.graph-launcher h4, .launcher h4 {
color: var(--neon-blue) !important;
font-family: 'Orbitron', sans-serif !important;
}
/* Tables — dark theme */
table, .table {
background: rgba(0, 20, 60, 0.7) !important;
color: var(--text-primary) !important;
border-color: var(--panel-border) !important;
}
table th, .table th, .table > thead > tr > th {
background: rgba(0, 40, 80, 0.9) !important;
color: var(--neon-blue) !important;
font-family: 'Orbitron', sans-serif !important;
font-size: 11px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
border-color: var(--panel-border) !important;
}
table td, .table td, .table > tbody > tr > td,
table td span, .table td span, .table td a,
table td div, .table td div {
background: transparent !important;
color: var(--text-primary) !important;
border-color: rgba(0, 245, 255, 0.1) !important;
font-family: 'Rajdhani', sans-serif !important;
font-size: 13px !important;
}
/* Column detail rows */
.column-row td, .column-row span, .column-row div,
.column-row a {
color: var(--text-primary) !important;
}
.table-hover > tbody > tr:hover > td {
background: rgba(0, 245, 255, 0.05) !important;
}
/* Bottom controls bar in lineage */
.graph-options, .graph-controls {
background: rgba(0, 20, 60, 0.95) !important;
border-color: var(--panel-border) !important;
}
/* Close button */
.btn-close, .close, [aria-label="Close"] {
color: var(--neon-blue) !important;
opacity: 0.8 !important;
}
/* Search bar */
input[type="search"], input[type="text"], .form-control {
background: rgba(0, 20, 60, 0.8) !important;
color: var(--text-primary) !important;
border-color: var(--panel-border) !important;
}
input::placeholder {
color: var(--text-secondary) !important;
}
/* Code blocks */
code, .code-block, pre {
background: rgba(0, 10, 30, 0.9) !important;
color: var(--neon-blue) !important;
border-color: var(--panel-border) !important;
font-family: 'Share Tech Mono', monospace !important;
}
/* Dropdown menus */
.dropdown-menu {
background: rgba(0, 20, 60, 0.95) !important;
border-color: var(--panel-border) !important;
}
.dropdown-menu > li > a {
color: var(--text-primary) !important;
}
.dropdown-menu > li > a:hover {
background: rgba(0, 245, 255, 0.1) !important;
color: var(--neon-blue) !important;
}
/* Tabs */
.nav-tabs > li > a {
color: var(--text-secondary) !important;
}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover {
color: var(--neon-blue) !important;
border-color: var(--neon-blue) !important;
background: transparent !important;
}
/* Model detail panel backgrounds */
.app-scroll {
background: transparent !important;
}
/* Column details — expanded row */
.column-row-selected,
.column-row-selected td,
.column-detail,
.column-detail td,
tr.column-row-selected,
tr.column-detail {
background: rgba(0, 15, 40, 0.95) !important;
background-color: rgba(0, 15, 40, 0.95) !important;
color: var(--text-primary) !important;
}
/* Column expanded panel (DETAILS / GENERIC DATA TESTS) */
.column-detail .panel,
.column-detail .panel-default,
.column-detail .panel-body,
.column-detail td > div,
.column-detail td > div > div {
background: rgba(0, 12, 30, 0.95) !important;
background-color: rgba(0, 12, 30, 0.95) !important;
color: var(--text-primary) !important;
border-color: var(--panel-border) !important;
}
/* ALL table rows — no white backgrounds ever */
table tr, .table tr,
table tr.ng-scope, .table tr.ng-scope {
background: transparent !important;
background-color: transparent !important;
}
table tr td, .table tr td {
background: transparent !important;
background-color: transparent !important;
}
/* Floating graph button glow */
.btn-floating, [style*="position: fixed"][style*="bottom"] {
box-shadow: 0 0 20px rgba(0, 245, 255, 0.5), 0 0 40px rgba(0, 245, 255, 0.2) !important;
}
/* Graph header bar */
.graph-launcher .app-header,
.graph-launcher .app-navbar,
[data-launcher] .app-header,
[data-launcher] .app-navbar,
.launcher .app-header {
background: rgba(0, 15, 40, 0.95) !important;
border-bottom: 1px solid var(--panel-border) !important;
}
/* Graph fullscreen area */
[data-launcher="fullscreen"],
.launcher[data-launcher="fullscreen"] {
background: #020818 !important;
}
/* Graph canvas container */
#cy {
background: #020818 !important;
}
/* Close button in graph */
.btn-shadow, .close {
color: var(--neon-blue) !important;
text-shadow: var(--glow-blue) !important;
}
/* Update Graph button */
#submit-graph-selection {
background: rgba(0, 245, 255, 0.15) !important;
color: var(--neon-blue) !important;
border: 1px solid var(--panel-border) !important;
font-family: 'Orbitron', sans-serif !important;
}
#submit-graph-selection:hover {
background: rgba(0, 245, 255, 0.3) !important;
}
/* Graph bottom bar */
.graph-options, .launcher-footer, .launcher-cell {
background: rgba(0, 15, 40, 0.95) !important;
border-top: 1px solid var(--panel-border) !important;
}
.launcher-footer label, .launcher-footer .label-text {
color: var(--neon-purple) !important;
font-family: 'Orbitron', sans-serif !important;
font-size: 10px !important;
letter-spacing: 1px !important;
text-shadow: 0 0 8px rgba(123, 47, 255, 0.6) !important;
}
/* Graph bottom bar tab labels (resources, packages, tags, --select, --exclude) */
.launcher-footer a,
.launcher-footer span,
.launcher-footer .nav-tabs > li > a,
.graph-options a,
.graph-options label,
.graph-options span,
.field-label,
.launcher-footer .field-label,
.launcher-cell .field-label {
color: var(--neon-purple) !important;
font-family: 'Orbitron', sans-serif !important;
font-size: 10px !important;
letter-spacing: 1px !important;
text-shadow: 0 0 8px rgba(123, 47, 255, 0.4) !important;
}
/* Graph bottom bar input fields and select */
.launcher-footer .field-input,
.launcher-footer input,
.launcher-footer select,
.launcher-cell .field-input,
.launcher-cell input,
.launcher-cell select {
background: rgba(0, 10, 30, 0.8) !important;
color: var(--text-primary) !important;
border-color: var(--panel-border) !important;
}
/* Tooltips — dark theme */
.tooltip, .tooltip-inner, [role="tooltip"],
.popover, .popover-content {
background: rgba(0, 10, 30, 0.95) !important;
color: var(--text-primary) !important;
border: 1px solid var(--panel-border) !important;
font-family: 'Rajdhani', sans-serif !important;
box-shadow: 0 0 15px rgba(0, 245, 255, 0.2) !important;
}
.tooltip .arrow::before, .tooltip .tooltip-arrow::before {
border-color: rgba(0, 245, 255, 0.25) !important;
}
/* Fullscreen graph header text */
.graph-launcher h4, [data-launcher] h4 {
font-family: 'Orbitron', sans-serif !important;
color: var(--neon-blue) !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
}
/* FIX: launcher-window teal background + white text */
.launcher-window {
background: #020818 !important;
border: 1px solid rgba(0, 245, 255, 0.15) !important;
color: var(--text-primary) !important;
}
.launcher-window *,
.launcher-header,
.launcher-header * {
color: var(--text-primary) !important;
}
/* Launcher footer/cell — text primary, but field-labels get purple */
.launcher-cell,
.launcher-footer {
color: var(--text-primary) !important;
}
/* FIX: context menu buttons */
.graph-node-context-menu-item,
.cy-context-menus-cxt-menu {
background: rgba(0, 20, 60, 0.95) !important;
color: var(--text-primary) !important;
border-color: var(--panel-border) !important;
}
.graph-node-context-menu-item:hover {
background: rgba(0, 245, 255, 0.15) !important;
color: var(--neon-blue) !important;
}
/* ============================================================
NUCLEAR OVERRIDES — kill all remaining whites/darks
These rules sit last so they win on equal specificity.
============================================================ */
/* Global: any .btn inside the app should never be plain white */
.btn:not(.btn-pill), .btn-sm, .btn-default, .btn-primary:not(.btn-pill),
.btn:not(.btn-pill):hover, .btn-sm:hover, .btn-default:hover,
.btn:not(.btn-pill):focus, .btn:not(.btn-pill):active, .btn.active:not(.btn-pill),
.btn-sm:focus, .btn-sm:active, .btn-sm.active,
span.switch-label.btn.btn-sm,
span.switch-label.btn.btn-sm.active,
span.switch-label.btn.btn-sm:hover,
span.switch-label.btn.btn-sm:focus,
.switches .switch .switch-label.btn,
.switches .switch .switch-label.btn.active {
background: transparent !important;
color: inherit !important;
border-color: transparent !important;
box-shadow: none !important;
outline: none !important;
}
/* Logo container — force neon color inheritance */
.logo, .logo * {
color: var(--neon-blue) !important;
}
/* Nav tabs — already partially styled but ensure no dark inheritance */
.nav-tabs, .nav-tabs > li, .nav-tabs > li > a {
color: var(--text-secondary) !important;
border-color: transparent !important;
background: transparent !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
color: var(--neon-blue) !important;
border-color: var(--neon-blue) !important;
background: transparent !important;
}
/* UL/OL list containers */
ul, ol {
color: var(--text-primary) !important;
}
/* Select dropdowns */
select, select.form-control {
background: rgba(0, 12, 35, 0.8) !important;
color: var(--text-primary) !important;
border-color: var(--panel-border) !important;
}
/* Ensure no dark-colored divs/spans leak through */
.app-scroll, .app-body, .app-column, .app-row {
color: var(--text-primary) !important;
}
/* FIX: Resource name header bar — dbt sets this to near-white */
.app-links,
.app-links.app-sticky,
.app-links.app-pad {
background: rgba(0, 8, 25, 0.95) !important;
background-color: rgba(0, 8, 25, 0.95) !important;
border-bottom: 1px solid var(--panel-border) !important;
}
/* Bootstrap tooltips */
.tooltip-inner {
background: rgba(0, 10, 30, 0.95) !important;
color: var(--text-primary) !important;
border: 1px solid var(--panel-border) !important;
font-family: 'Rajdhani', sans-serif !important;
}
.tooltip.top .tooltip-arrow,
.tooltip.bottom .tooltip-arrow {
border-top-color: rgba(0, 245, 255, 0.25) !important;
border-bottom-color: rgba(0, 245, 255, 0.25) !important;
}
/* Popover */
.popover {
background: rgba(0, 10, 30, 0.95) !important;
border-color: var(--panel-border) !important;
}
.popover-content {
color: var(--text-primary) !important;
}
/* Force small/badge elements (TABLE, SOURCE, VIEW, model, seed) */
small, .small,
h1 small, h1 .small,
h2 small, h3 small, h4 small, h5 small, h6 small {
color: #7b2fff !important;
font-family: 'Orbitron', sans-serif !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
text-shadow: 0 0 8px rgba(123, 47, 255, 0.5) !important;
}
/* LAST RULE — purple badge for resource type (TABLE, SOURCE, VIEW, etc.) */
small, small.ng-binding, h1 > small, h1 > small.ng-binding {
color: #7b2fff !important;
text-shadow: 0 0 8px rgba(123, 47, 255, 0.5) !important;
}