StreamLens/analyzer/tui/textual/styles/streamlens_v2.tcss

/* StreamLens V2 - TipTop-Inspired Styling */

/* Color Scheme - Dark theme with vibrant accents */
$primary: #0080ff;
$primary-lighten-1: #3399ff;
$primary-lighten-2: #66b3ff;
$primary-lighten-3: #99ccff;

$accent: #00ffcc;
$success: #00ff88;
$warning: #ffcc00;
$error: #ff3366;

$surface: #1a1a1a;
$surface-lighten-1: #262626;
$surface-lighten-2: #333333;
$background: #0d0d0d;
$text: #ffffff;
$text-muted: #999999;

/* Main Application Layout */
Screen {
    background: $background;
}

#main-container {
    height: 1fr;
    background: $background;
}

/* Metrics Bar - Horizontal compact display at top */
#metrics-bar {
    height: 7;
    padding: 1;
    background: $surface;
    border-bottom: thick $primary;
    align: center middle;
}

MetricCard {
    width: 1fr;
    height: 5;
    margin: 0 1;
    max-width: 20;
    border: tall $primary-lighten-2;
    padding: 0 1;
    align: center middle;
}

/* Content Area - Three column layout */
#content-area {
    height: 1fr;
    padding: 1;
}

/* Panel Styling */
.panel {
    border: solid $primary-lighten-3;
    padding: 1;
    margin: 0 1;
}

.panel-wide {
    border: solid $primary-lighten-3;
    padding: 1;
    margin: 0 1;
}

.panel-header {
    text-align: center;
    text-style: bold;
    color: $accent;
    margin-bottom: 1;
}

/* Left Panel - Main Flow Table (expanded) */
#left-panel {
    width: 70%;
    background: $surface;
}

/* Right Panel - Details */
#right-panel {
    width: 30%;
    background: $surface;
}

/* Sparkline Charts */
SparklineWidget {
    height: 5;
    margin-bottom: 1;
    padding: 0;
}

/* Enhanced Flow Table */
#flows-data-table {
    height: 1fr;
    scrollbar-background: $surface-lighten-1;
    scrollbar-color: $primary;
    scrollbar-size: 1 1;
}

#flows-data-table > .datatable--header {
    background: $surface-lighten-2;
    color: $accent;
    text-style: bold;
}

#flows-data-table > .datatable--cursor {
    background: $primary 30%;
    color: $text;
}

#flows-data-table > .datatable--hover {
    background: $primary 20%;
}

#flows-data-table > .datatable--odd-row {
    background: $surface;
}

#flows-data-table > .datatable--even-row {
    background: $surface-lighten-1;
}

/* Flow Details Panel */
FlowDetailsPanel {
    padding: 1;
}

FlowDetailsPanel Panel {
    margin-bottom: 1;
}

/* Status Colors */
.status-normal {
    color: $success;
}

.status-warning {
    color: $warning;
}

.status-error {
    color: $error;
}

.status-enhanced {
    color: $accent;
    text-style: bold;
}

/* Quality Indicators */
.quality-high {
    color: $success;
}

.quality-medium {
    color: $warning;
}

.quality-low {
    color: $error;
}

/* Animations and Transitions */
.updating {
    background: $primary 10%;
    transition: background 200ms;
}

/* Header and Footer */
Header {
    background: $surface;
    color: $text;
    border-bottom: solid $primary;
}

Footer {
    background: $surface;
    color: $text-muted;
    border-top: solid $primary;
}

/* Scrollbars */
Vertical {
    scrollbar-size: 1 1;
    scrollbar-background: $surface-lighten-1;
    scrollbar-color: $primary;
}

Horizontal {
    scrollbar-size: 1 1;
    scrollbar-background: $surface-lighten-1;
    scrollbar-color: $primary;
}

/* Focus States */
DataTable:focus {
    border: solid $accent;
}

/* Panel Borders */
Static {
    border: round $primary;
}

/* End of styles */