diff --git a/src/tju/tui/app.tcss b/src/tju/tui/app.tcss index 4a5bc4f..ea07424 100644 --- a/src/tju/tui/app.tcss +++ b/src/tju/tui/app.tcss @@ -1,6 +1,8 @@ -/* ────────────────────────────────────────────────────────────────────────── - TJU TUI — lazygit / nvim-inspired stylesheet - ────────────────────────────────────────────────────────────────────────── */ +/* ───────────────────────────────────────────────────────────────────────── + TJU TUI — lazygit / Claude Code style dark stylesheet + ───────────────────────────────────────────────────────────────────────── */ + +/* ══════ Base ══════════════════════════════════════════════════════════════ */ Screen { background: $background; @@ -67,9 +69,8 @@ LoginScreen Input:focus { display: block; } -/* ════════════════════════════════════════════════════════════════════════ - Main screen — two bordered panels - ════════════════════════════════════════════════════════════════════════ */ +/* ══════ Main layout ════════════════════════════════════════════════════════ */ + MainScreen { layout: vertical; } @@ -79,9 +80,10 @@ MainScreen { height: 1fr; } -/* ── Panels: dim by default, accent border when focused (lazygit style) ─── */ +/* ══════ Panels ═════════════════════════════════════════════════════════════ */ + #menu-panel { - width: 24; + width: 22; height: 1fr; border: round $primary-darken-2; border-title-color: $text-muted; @@ -99,6 +101,7 @@ MainScreen { padding: 0; } +/* Active panel: bright accent border, like lazygit */ #menu-panel:focus-within { border: round $accent; border-title-color: $accent; @@ -109,43 +112,61 @@ MainScreen { border-title-color: $accent; } -/* ── Menu list ──────────────────────────────────────────────────────────── */ +/* ══════ Menu list ══════════════════════════════════════════════════════════ */ + #menu { background: transparent; height: 1fr; + scrollbar-size: 0 0; } +/* Default items: muted, indented 2 chars */ #menu > ListItem { - padding: 0 1; + padding: 0 1 0 2; background: transparent; - color: $text; + color: $text-muted; + height: 1; } +/* Highlighted but panel not focused: subtle surface highlight */ #menu > ListItem.-highlight { - background: $accent 20%; - color: $accent; - text-style: bold; + background: $surface; + color: $text; + border-left: tall $primary; + padding-left: 1; } +/* Highlighted and panel focused: bright accent highlight */ #menu:focus > ListItem.-highlight { - background: $accent; - color: $background; + background: $accent 22%; + color: $accent; text-style: bold; + border-left: tall $accent; + padding-left: 1; } -/* ── Content body ───────────────────────────────────────────────────────── */ +/* ══════ Content body ═══════════════════════════════════════════════════════ */ + #content-body { height: 1fr; padding: 1 2; background: transparent; } +/* Prevent VerticalScroll from showing a bright focus background */ +VerticalScroll:focus { + background: transparent; +} + .hint { color: $text-muted; + padding: 2 0; + text-align: center; + width: 100%; } .result-header { - color: $accent; + color: $text-muted; text-style: bold; margin-bottom: 1; } @@ -168,7 +189,8 @@ DataTable > .datatable--cursor { color: $background; } -/* ── Parameter bar (semester) ───────────────────────────────────────────── */ +/* ══════ Parameter bar ══════════════════════════════════════════════════════ */ + .param-bar { height: auto; margin-bottom: 1; @@ -178,12 +200,13 @@ DataTable > .datatable--cursor { .param-label { width: auto; color: $text-muted; - padding: 1 1 0 0; + padding: 0 1 0 0; } .param-input { width: 18; border: tall $primary-darken-2; + background: $background; } .param-input:focus { @@ -193,33 +216,39 @@ DataTable > .datatable--cursor { .param-hint { width: auto; color: $text-muted; - padding: 1 0 0 2; + padding: 0 0 0 2; } -/* ── Forms (settings / classroom) ───────────────────────────────────────── */ +/* ══════ Forms ══════════════════════════════════════════════════════════════ */ + .form { height: auto; + padding: 0; } .form-label { color: $text-muted; margin-top: 1; + margin-bottom: 0; } .form .param-input { width: 36; } -/* ── Error box ──────────────────────────────────────────────────────────── */ +/* ══════ Error box ══════════════════════════════════════════════════════════ */ + .error-box { color: $error; border: round $error; padding: 1 2; - margin-top: 1; + margin: 1 0; } -/* ── Loading ────────────────────────────────────────────────────────────── */ +/* ══════ Loading ════════════════════════════════════════════════════════════ */ + LoadingIndicator { height: 3; background: transparent; + color: $accent; } diff --git a/src/tju/tui/screens/main.py b/src/tju/tui/screens/main.py index fe74ba2..ed5e364 100644 --- a/src/tju/tui/screens/main.py +++ b/src/tju/tui/screens/main.py @@ -94,7 +94,7 @@ def compose(self) -> ComposeResult: content.border_title = "TJU" with content: yield VerticalScroll( - Static("\n ← 从左侧选择功能\n", classes="hint"), + Static("← 选择左侧功能", classes="hint"), id="content-body", ) yield Footer()