196 lines
2.9 KiB
Plaintext
196 lines
2.9 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 - Minimal borders */
|
|
.panel {
|
|
border: solid #99ccff;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.panel-wide {
|
|
border: solid #99ccff;
|
|
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 Panel - Details (compact) */
|
|
#right-panel {
|
|
width: 25%;
|
|
background: #1a1a1a;
|
|
padding: 0;
|
|
}
|
|
|
|
/* 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 */
|
|
Static {
|
|
border: round #0080ff;
|
|
}
|
|
|
|
/* End of styles */ |