🔀 Merge pull request #34 from davep/focus-cosmetics

Improve the cosmetics of the main panels in the application

ChangeLog.md

@@ -8,6 +8,8 @@
   ([#30](https://github.com/davep/braindrop/pull/30))
 - Improved the way the age and the tags share the line in the raindrops view
   widget. ([#31](https://github.com/davep/braindrop/pull/31))
+- Improved the styling of the main panels.
+  ([#34](https://github.com/davep/braindrop/pull/34))
 
 ## v0.1.1
 

src/braindrop/app/screens/main.py

@@ -113,11 +113,18 @@ class Main(Screen[None]):
             padding-right: 0;
             border: none;
             border-left: round $border 50%;
+            background: $surface;
             scrollbar-gutter: stable;
             scrollbar-background: $surface;
+            scrollbar-background-hover: $surface;
+            scrollbar-background-active: $surface;
             &:focus, &:focus-within {
                 border: none;
                 border-left: round $border;
+                background: $panel 80%;
+                scrollbar-background: $panel;
+                scrollbar-background-hover: $panel;
+                scrollbar-background-active: $panel;
             }
         }
 

src/braindrop/app/widgets/extended_option_list.py

@@ -72,6 +72,14 @@ def __exit__(
 class OptionListEx(OptionList):
     """The Textual `OptionList` with more features."""
 
+    DEFAULT_CSS = """
+    OptionListEx {
+        &:focus {
+            background-tint: initial;
+        }
+    }
+    """
+
     BINDINGS = [
         Binding("j, right", "cursor_down", show=False),
         Binding("k, left", "cursor_up", show=False),

src/braindrop/app/widgets/raindrop_details.py

@@ -111,9 +111,8 @@ class RaindropDetails(VerticalScroll):
         background: $surface;
 
         &:focus, &:focus-within {
-            background-tint: $foreground 5%;
             .detail, Tags, Tags:focus{
-                background: $boost 150%;
+                background: $boost 200%;
             }
         }