noisedestroyers
a3c50fd845
- Added ΔT (deltaT), σ (sigma), and outlier count columns to flow table - Split right panel into top (main flow) and bottom (sub-flow) sections - Removed inner panel borders for clean 3-panel layout - Added sub-flow selection logic with detailed timing statistics - Implemented per-frame-type timing analysis in sub-flow details - Color-coded outliers and timing data for quick visual assessment
203 lines
3.1 KiB
Plaintext
203 lines
3.1 KiB
Plaintext
/* StreamLens V2 - Compact Styling */
|
|
|
|
/* Main Application Layout */
|
|
Screen {
|
|
background: #0d0d0d;
|
|
}
|
|
|
|
#main-container {
|
|
height: 1fr;
|
|
background: #0d0d0d;
|
|
}
|
|
|
|
/* Metrics Bar - Ultra compact display at top */
|
|
#metrics-bar {
|
|
height: 3;
|
|
padding: 0;
|
|
background: #1a1a1a;
|
|
border-bottom: solid #0080ff;
|
|
align: center middle;
|
|
}
|
|
|
|
MetricCard {
|
|
width: 1fr;
|
|
height: 3;
|
|
margin: 0;
|
|
max-width: 18;
|
|
border: none;
|
|
padding: 0;
|
|
align: center middle;
|
|
}
|
|
|
|
/* Content Area - Maximized for grid */
|
|
#content-area {
|
|
height: 1fr;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Panel Styling - No borders for clean look */
|
|
.panel {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.panel-wide {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.panel-header {
|
|
text-align: center;
|
|
text-style: bold;
|
|
color: #00ffcc;
|
|
margin-bottom: 1;
|
|
}
|
|
|
|
/* Left Panel - Main Flow Table (maximized) */
|
|
#left-panel {
|
|
width: 75%;
|
|
background: #1a1a1a;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Right Panels - Details (compact) */
|
|
#right-panels {
|
|
width: 25%;
|
|
background: #1a1a1a;
|
|
padding: 0;
|
|
}
|
|
|
|
FlowMainDetailsPanel {
|
|
height: 3fr;
|
|
background: #1a1a1a;
|
|
border: solid #ff8800;
|
|
}
|
|
|
|
SubFlowDetailsPanel {
|
|
height: 2fr;
|
|
background: #1a1a1a;
|
|
border: solid #ff8800;
|
|
}
|
|
|
|
/* Sparkline Charts */
|
|
SparklineWidget {
|
|
height: 5;
|
|
margin-bottom: 1;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Enhanced Flow Table */
|
|
#flows-data-table {
|
|
height: 1fr;
|
|
scrollbar-background: #262626;
|
|
scrollbar-color: #0080ff;
|
|
scrollbar-size: 1 1;
|
|
}
|
|
|
|
#flows-data-table > .datatable--header {
|
|
background: #333333;
|
|
color: #00ffcc;
|
|
text-style: bold;
|
|
}
|
|
|
|
#flows-data-table > .datatable--cursor {
|
|
background: #0080ff 30%;
|
|
color: #ffffff;
|
|
}
|
|
|
|
#flows-data-table > .datatable--hover {
|
|
background: #0080ff 20%;
|
|
}
|
|
|
|
#flows-data-table > .datatable--odd-row {
|
|
background: #1a1a1a;
|
|
}
|
|
|
|
#flows-data-table > .datatable--even-row {
|
|
background: #262626;
|
|
}
|
|
|
|
/* Flow Details Panel - Compact */
|
|
FlowDetailsPanel {
|
|
padding: 0;
|
|
}
|
|
|
|
FlowDetailsPanel Panel {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Status Colors */
|
|
.status-normal {
|
|
color: #00ff88;
|
|
}
|
|
|
|
.status-warning {
|
|
color: #ffcc00;
|
|
}
|
|
|
|
.status-error {
|
|
color: #ff3366;
|
|
}
|
|
|
|
.status-enhanced {
|
|
color: #00ffcc;
|
|
text-style: bold;
|
|
}
|
|
|
|
/* Quality Indicators */
|
|
.quality-high {
|
|
color: #00ff88;
|
|
}
|
|
|
|
.quality-medium {
|
|
color: #ffcc00;
|
|
}
|
|
|
|
.quality-low {
|
|
color: #ff3366;
|
|
}
|
|
|
|
/* Animations and Transitions */
|
|
.updating {
|
|
background: #0080ff 10%;
|
|
transition: background 200ms;
|
|
}
|
|
|
|
/* Header and Footer - Ultra compact */
|
|
Header {
|
|
background: #1a1a1a;
|
|
color: #ffffff;
|
|
border-bottom: solid #0080ff;
|
|
height: 1;
|
|
padding: 0;
|
|
}
|
|
|
|
Footer {
|
|
background: #1a1a1a;
|
|
color: #999999;
|
|
border-top: solid #0080ff;
|
|
height: 1;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Scrollbars */
|
|
Vertical {
|
|
scrollbar-size: 1 1;
|
|
scrollbar-background: #262626;
|
|
scrollbar-color: #0080ff;
|
|
}
|
|
|
|
Horizontal {
|
|
scrollbar-size: 1 1;
|
|
scrollbar-background: #262626;
|
|
scrollbar-color: #0080ff;
|
|
}
|
|
|
|
/* Focus States */
|
|
DataTable:focus {
|
|
border: solid #00ffcc;
|
|
}
|
|
|
|
/* Panel Borders - Removed for clean look */
|
|
|
|
/* End of styles */ |