Tabs styled with block cursor

Textualize · Oct 30, 2024 · cd5aeeb · cd5aeeb
1 parent ace924f
commit cd5aeeb
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 30 deletions.
diff --git a/src/textual/widgets/_list_item.py b/src/textual/widgets/_list_item.py
@@ -16,24 +16,6 @@ class ListItem(Widget, can_focus=False):
     documentation for more details on use.
     """
 
-    DEFAULT_CSS = """
-    ListItem {
-        height: auto;
-        overflow: hidden hidden;
-        background: $surface;
-
-        & > :disabled {
-            background: $background;
-        }
-        & > Widget {
-            height: auto;
-            & :hover {
-                background: $block-hover-background;
-            }
-        }
-    }
-    """
-
     highlighted = reactive(False)
     """Is this item highlighted?"""
 
@@ -48,4 +30,5 @@ async def _on_click(self, _: events.Click) -> None:
         self.post_message(self._ChildClicked(self))
 
     def watch_highlighted(self, value: bool) -> None:
+        print("highlighted", value)
         self.set_class(value, "--highlight")
diff --git a/src/textual/widgets/_list_view.py b/src/textual/widgets/_list_view.py
@@ -28,14 +28,22 @@ class ListView(VerticalScroll, can_focus=True, can_focus_children=False):
     DEFAULT_CSS = """
     ListView {
         background: transparent;
-        & > ListItem.--highlight {
-            color: $block-cursor-foreground;
-            background: $block-cursor-blurred-background;
-        }
         &:focus-within {
             background-tint: $foreground 5%;
         }
-        &:focus .--highlight {
+
+        & > ListItem {
+            color: $foreground;
+            height: auto;
+            overflow: hidden hidden;
+            
+            &.--highlight {
+                color: $block-cursor-foreground;
+                background: $block-cursor-blurred-background;
+            }
+        }
+
+        &:focus > ListItem.--highlight {
             color: $block-cursor-foreground;
             background: $block-cursor-background;
             text-style: $block-cursor-text-style;

diff --git a/src/textual/widgets/_tabs.py b/src/textual/widgets/_tabs.py
@@ -31,8 +31,8 @@ class Underline(Widget):
         width: 1fr;
         height: 1;
         & > .underline--bar {
+            color: $block-cursor-background;
             background: $foreground 10%;
-            color: $block-cursor-blurred-background;
         }
     }
     """
@@ -91,8 +91,8 @@ class Tab(Static):
     DEFAULT_CSS = """
     Tab {
         width: auto;
-        height: 2;
-        padding: 1 1 0 2;
+        height: 1;
+        padding: 0 1;
         text-align: center;
         color: $foreground 50%;
 
@@ -201,15 +201,16 @@ class Tabs(Widget, can_focus=True):
     DEFAULT_CSS = """
     Tabs {
         width: 100%;
-        height: 3;
+        height: 2;
 
         &:focus {
             .underline--bar {
-                color: $block-cursor-background;
                 background: $foreground 30%;
             }
             & .-active {
-                text-style: bold;
+                text-style: $block-cursor-text-style;
+                color: $block-cursor-foreground;
+                background: $block-cursor-background;
             }
         }
 
@@ -219,7 +220,6 @@ class Tabs(Widget, can_focus=True):
 
         #tabs-list {
             width: auto;
-            min-height: 2;            
         }
         #tabs-list-bar, #tabs-list {
             width: auto;