admin/metro-warden
1
0
Fork 0
mirror of https://github.com/samjage/metro-warden.git synced 2026-06-06 04:40:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit: Metro Warden TUI network operations center

Browse Source
This commit is contained in:
samjage
2026-03-22 21:33:40 -04:00
commit 98a17d9b7e
45 changed files with 4215 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles/metro.tcss
+331
View File
@@ -0,0 +1,331 @@
/**
* Metro Warden — Industrial Dark Metro Map Theme
*
* Colour palette:
* Deep charcoal background : #1a1a2e
* Surface / panels : #16213e
* Border / accent : #0f3460
* Electric blue primary : #00d4ff
* Amber warning : #ff8c00
* Green active : #00ff88
* Muted text : #8892a4
* Error / danger : #ff4444
*/
/* ── Root variables ─────────────────────────────────────────────────── */
$background: #1a1a2e;
$surface: #16213e;
$panel: #0f3460;
$primary: #00d4ff;
$secondary: #0099bb;
$accent: #00ff88;
$warning: #ff8c00;
$error: #ff4444;
$success: #00ff88;
$text: #e0e6f0;
$text-muted: #8892a4;
$border: #0f3460;
$cursor: #00d4ff 30%;
/* ── App shell ──────────────────────────────────────────────────────── */
App {
background: $background;
color: $text;
}
Screen {
background: $background;
layers: base overlay;
}
/* ── Header ─────────────────────────────────────────────────────────── */
MetroHeader {
height: 3;
background: $surface;
border-bottom: heavy $primary;
color: $text;
}
MetroHeader .header-brand {
color: $primary;
text-style: bold;
width: 1fr;
content-align: left middle;
padding-left: 1;
}
MetroHeader .header-clock {
color: $text-muted;
content-align: center middle;
min-width: 26;
}
MetroHeader .header-status {
color: $success;
content-align: right middle;
width: 1fr;
padding-right: 1;
}
MetroHeader .status-warn {
color: $warning;
}
/* ── Footer ─────────────────────────────────────────────────────────── */
Footer {
background: $surface;
color: $text-muted;
border-top: heavy $border;
}
Footer .footer-key--label {
color: $primary;
}
/* ── TabbedContent ──────────────────────────────────────────────────── */
TabbedContent {
height: 1fr;
background: $background;
}
TabPane {
background: $background;
padding: 0;
}
Tabs {
background: $surface;
border-bottom: heavy $border;
}
Tab {
color: $text-muted;
background: $surface;
padding: 0 2;
}
Tab:hover {
color: $text;
background: $panel;
}
Tab.-active {
color: $primary;
background: $background;
border-top: heavy $primary;
text-style: bold;
}
Tab.-active:hover {
color: $primary;
}
/* ── DataTable ──────────────────────────────────────────────────────── */
DataTable {
background: $surface;
color: $text;
border: round $border;
scrollbar-color: $panel;
scrollbar-background: $background;
}
DataTable > .datatable--header {
background: $panel;
color: $primary;
text-style: bold;
}
DataTable > .datatable--cursor {
background: $primary 20%;
color: $text;
}
DataTable > .datatable--hover {
background: $panel;
}
DataTable > .datatable--fixed {
background: $surface;
color: $primary;
}
DataTable > .datatable--zebra {
background: $background;
}
/* ── Input / Form controls ──────────────────────────────────────────── */
Input {
background: $surface;
border: round $border;
color: $text;
padding: 0 1;
}
Input:focus {
border: round $primary;
color: $text;
}
Input.-invalid {
border: round $error;
}
Switch {
background: $surface;
border: round $border;
}
Switch:focus {
border: round $primary;
}
Switch.-on {
color: $accent;
}
Select {
background: $surface;
border: round $border;
color: $text;
}
Select:focus {
border: round $primary;
}
/* ── Button ─────────────────────────────────────────────────────────── */
Button {
background: $panel;
color: $text;
border: round $border;
padding: 0 2;
}
Button:hover {
background: $border;
border: round $primary;
}
Button:focus {
border: round $primary;
}
Button.-primary {
background: $primary 40%;
color: $primary;
border: round $primary;
text-style: bold;
}
Button.-primary:hover {
background: $primary 60%;
}
/* ── RichLog ────────────────────────────────────────────────────────── */
RichLog {
background: $surface;
border: round $border;
color: $text;
scrollbar-color: $panel;
padding: 0 1;
}
/* ── Labels / Static ────────────────────────────────────────────────── */
Label {
color: $text;
}
Static {
color: $text;
}
/* ── Shared tab utilities ──────────────────────────────────────────── */
.tab-title {
color: $primary;
text-style: bold;
height: 1;
margin-bottom: 1;
padding-left: 1;
}
.section-header {
color: $accent;
text-style: bold;
height: 1;
margin-top: 1;
margin-bottom: 1;
}
.hint {
color: $text-muted;
height: 1;
margin-top: 1;
padding-left: 1;
}
.filter-label {
color: $text-muted;
content-align: left middle;
}
/* ── Pulse animation (for active indicators) ────────────────────────── */
.pulse {
color: $accent;
}
.pulse-off {
color: $panel;
}
/* ── Status colours ─────────────────────────────────────────────────── */
.status-up {
color: $success;
text-style: bold;
}
.status-down {
color: $error;
text-style: bold;
}
.status-warn {
color: $warning;
}
.status-nominal {
color: $success;
}
/* ── Scrollbar ──────────────────────────────────────────────────────── */
ScrollBar {
background: $background;
color: $panel;
}
ScrollBar > .scrollbar--bar {
color: $border;
background: $surface;
}
ScrollBar > .scrollbar--bar:hover {
color: $primary;
}
/* ── Modal / Overlay ────────────────────────────────────────────────── */
ModalScreen {
background: $background 80%;
align: center middle;
}
/* ── Notification (toast) ───────────────────────────────────────────── */
Toast {
background: $surface;
border: round $primary;
color: $text;
}
/* ── Loading indicator ──────────────────────────────────────────────── */
LoadingIndicator {
background: $background;
color: $primary;
}