CSS tweaks

Author: darrenburns

src/textual/widgets/_data_table.py

@@ -320,6 +320,14 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
         height: auto;
         max-height: 100%;
 
+        &:focus {
+            background-tint: $foreground 5%;
+            & > .datatable--cursor {
+                background: $highlight-cursor;
+                color: $text;
+            }
+        }
+
         &:dark {
             background: $surface;
             & > .datatable--even-row {
@@ -351,11 +359,6 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
             color: $text;
         }
 
-        &:focus > .datatable--cursor {
-            background: $highlight-cursor;
-            color: $text;
-        }
-
         & > .datatable--fixed-cursor {
             background: $highlight-cursor 92%;
             color: $text;

src/textual/widgets/_input.py

@@ -155,6 +155,7 @@ class Input(Widget, can_focus=True):
 
         &:focus {
             border: tall $border;
+            background-tint: $foreground 5%;
         }
         &>.input--cursor {
             background: $surface;

src/textual/widgets/_list_view.py

@@ -31,6 +31,9 @@ class ListView(VerticalScroll, can_focus=True, can_focus_children=False):
         & > ListItem.--highlight {
             background: $highlight-cursor-blurred;
         }
+        &:focus-within {
+            background-tint: $foreground 5%;
+        }
         &:focus > ListItem.--highlight {
             background: $highlight-cursor;
         }

src/textual/widgets/_option_list.py

@@ -144,41 +144,36 @@ class OptionList(ScrollView, can_focus=True):
         border: tall transparent;
         padding: 0 1;
         background: $surface;
-    }
-
-    OptionList:focus {
-        border: tall $border;
-    }
-
-    OptionList > .option-list--separator {
-        color: $foreground 15%;
-    }
-
-    OptionList > .option-list--option-highlighted {
-        color: $text;
-        background: $highlight-cursor-blurred;
-    }
-
-    OptionList:focus > .option-list--option-highlighted {
-        background: $highlight-cursor;
-    }
-
-    OptionList > .option-list--option-disabled {
-        color: $text-disabled;
-    }
-
-    OptionList > .option-list--option-hover {
-        background: $highlight-hover;
-    }
-
-    OptionList > .option-list--option-hover-highlighted {
-        background: $accent 60%;
-        color: $text;
-    }
+        
+        &:focus {
+            border: tall $border;
+            background-tint: $foreground 5%;
+            & > .option-list--option-highlighted {
+                background: $highlight-cursor;
+            }
+        }
 
-    OptionList:focus > .option-list--option-hover-highlighted {
-        background: $accent;
-        color: $text;
+        & > .option-list--option-hover-highlighted {
+            background: $accent;
+            color: $text;
+        }
+        & > .option-list--separator {
+            color: $foreground 15%;
+        }
+        & > .option-list--option-highlighted {
+            color: $text;
+            background: $highlight-cursor-blurred;
+        }
+        & > .option-list--option-disabled {
+            color: $text-disabled;
+        }
+        & > .option-list--option-hover {
+            background: $highlight-hover;
+        }
+        & > .option-list--option-hover-highlighted {
+            background: $accent 60%;
+            color: $text;
+        }
     }
     """
 

src/textual/widgets/_select.py

@@ -47,14 +47,14 @@ class SelectOverlay(OptionList):
 
     DEFAULT_CSS = """
     SelectOverlay {
-        border: tall $background;
-        background: $panel;
+        border: tall $border-blurred;
+        background: $surface;
         color: $text;
         width: 100%;
         padding: 0 1;
     }
     SelectOverlay:focus {
-        border: tall $background;
+        background-tint: $foreground 5%;
     }
     SelectOverlay > .option-list--option {
         padding: 0 1;
@@ -222,7 +222,7 @@ class Select(Generic[SelectType], Vertical, can_focus=True):
         }
 
         &:focus {
-            background: $surface-active;
+            background-tint: $foreground 5%;
             border: tall $border;
         }
 
@@ -237,7 +237,7 @@ class Select(Generic[SelectType], Vertical, can_focus=True):
 
             &:focus {
                 border: tall $border;
-                background: $surface-active;
+                background-tint: $foreground 5%;
             }
         }
 

src/textual/widgets/_switch.py

@@ -70,6 +70,7 @@ class Switch(Widget, can_focus=True):
         }
         &:focus {
             border: tall $border;
+            background-tint: $foreground 5%;
         }
         &:light {
             & > .switch--slider {

src/textual/widgets/_text_area.py

@@ -118,6 +118,7 @@ class TextArea(ScrollView):
 
     &:focus {
         border: tall $accent;
+        background-tint: $foreground 5%;
     }
 
     &:dark {

src/textual/widgets/_tree.py

@@ -607,7 +607,7 @@ class Tree(Generic[TreeDataType], ScrollView, can_focus=True):
         }
 
         &:focus {
-            background: $surface-active;
+            background-tint: $foreground 5%;
             & > .tree--cursor {
                 background: $highlight-cursor;
             }