metro-warden/assets/styles/metro.tcss

/**
 * 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;
}