Update ListView styling, use blur cursor in DataTable

Textualize · Oct 8, 2024 · af34013 · af34013
1 parent bb633cf
commit af34013
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 40 deletions.
diff --git a/src/textual/design.py b/src/textual/design.py
@@ -192,8 +192,8 @@ def luminosity_range(spread) -> Iterable[tuple[str, float]]:
 
         # The cursor color for widgets such as OptionList, DataTable, etc.
         colors["cursor"] = accent.hex
-        # The blurred equivalent of the above.
-        colors["cursor-blurred"] = accent.with_alpha(0.5).hex
+        # The cursor should dim when the widget is blurred.
+        colors["cursor-blurred"] = accent.with_alpha(0.4).hex
 
         # The border color for focused widgets which have a border.
         colors["border"] = accent.hex

diff --git a/src/textual/widgets/_data_table.py b/src/textual/widgets/_data_table.py
@@ -322,50 +322,60 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
         color: $text;
         height: auto;
         max-height: 100%;
-    }
-    DataTable > .datatable--header {
-        text-style: bold;
-        background: $primary;
-        color: $text;
-    }
-    DataTable > .datatable--fixed {
-        background: $primary 50%;
-        color: $text;
-    }
 
-    DataTable > .datatable--odd-row {
+        &:dark {
+            background: initial;
+            & > .datatable--even-row {
+                background: $primary 15%;
+            }
+        }
 
-    }
+        & > .datatable--header {
+            text-style: bold;
+            background: $primary;
+            color: $text;
+        }
 
-    DataTable > .datatable--even-row {
-        background: $primary 10%;
-    }
+        & > .datatable--fixed {
+            background: $primary 50%;
+            color: $text;
+        }
 
-    DataTable > .datatable--cursor {
-        background: $cursor;
-        color: $text;
-    }
+        & > .datatable--odd-row {
 
-    DataTable > .datatable--fixed-cursor {
-        background: $cursor 92%;
-        color: $text;
-    }
+        }
 
-    DataTable > .datatable--header-cursor {
-        background: $secondary-darken-1;
-        color: $text;
-    }
+        & > .datatable--even-row {
+            background: $primary 10%;
+        }
 
-    DataTable > .datatable--header-hover {
-        background: $secondary 30%;
-    }
+        & > .datatable--cursor {
+            background: $cursor-blurred;
+            color: $text;
+        }
 
-    DataTable:dark > .datatable--even-row {
-        background: $primary 15%;
-    }
+        &:focus > .datatable--cursor {
+            background: $cursor;
+            color: $text;
+        }
 
-    DataTable > .datatable--hover {
-        background: $hover;
+        & > .datatable--fixed-cursor {
+            background: $cursor 92%;
+            color: $text;
+        }
+
+        & > .datatable--header-cursor {
+            background: $secondary-darken-1;
+            color: $text;
+        }
+
+        & > .datatable--header-hover {
+            background: $secondary 30%;
+        }
+
+        & > .datatable--hover {
+            background: $hover;
+        }
     }
     """
 

diff --git a/src/textual/widgets/_list_item.py b/src/textual/widgets/_list_item.py
@@ -29,13 +29,13 @@ class ListItem(Widget, can_focus=False):
         background: $panel-darken-1;
     }
     ListItem > Widget :hover {
-        background: $boost;
+        background: $hover;
     }
     ListView > ListItem.--highlight {
-        background: $accent 50%;
+        background: $cursor-blurred;
     }
     ListView:focus > ListItem.--highlight {
-        background: $accent;
+        background: $cursor;
     }
     ListItem > Widget {
         height: auto;