Gtk3: Adjusted selected backdrop fg/bg colors: shades of grey.

Before: "blue on grey" was unreadable. Issue: shimmerproject#300 Deleted several specific styles in favor of one general style.
DarkTrick · Sep 25, 2021 · 3da1600 · 3da1600
1 parent fcbcb0e
commit 3da1600
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 19 deletions.
diff --git a/light/gtk-3.0/_colors.scss b/light/gtk-3.0/_colors.scss
@@ -60,7 +60,8 @@ $backdrop_text_color: mix($text_color, $backdrop_base_color, 80%);
 $backdrop_bg_color: $bg_color;
 $backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%);
 $backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
-$backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color);
+$backdrop_selected_fg_color: if($variant == 'light', darken($base_color, 50%), $backdrop_text_color);
+$backdrop_selected_bg_color: if($variant == 'light', darken($base_color, 17%), lighten($bg_color, 17%));
 $backdrop_borders_color: mix($borders_color, $bg_color, 90%);
 $backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
 $backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%);

diff --git a/light/gtk-3.0/_common.scss b/light/gtk-3.0/_common.scss
@@ -41,6 +41,7 @@ $button_radius: 3px;
   -gtk-secondary-caret-color: $selected_bg_color
 }
 
+selection { @extend %selected_items; }
 
 /***************
  * Base States *
@@ -114,9 +115,8 @@ treeview.expander:disabled { -gtk-icon-effect: dim; }
   }
 
   &:selected {
+    @extend %selected_items;
     &:focus, & {
-      @extend %selected_items;
-
       border-radius: 3px;
     }
   }
@@ -126,8 +126,6 @@ treeview.expander:disabled { -gtk-icon-effect: dim; }
 textview {
   text {
     @extend %view;
-
-    selection { &:focus, & { @extend %selected_items; }}
   }
 }
 
@@ -181,11 +179,6 @@ label {
   row:selected &,
   &:selected { @extend %nobg_selected_items; }
 
-  selection {
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
-  }
-
   &:disabled {
     color: $insensitive_fg_color;
 
@@ -199,10 +192,6 @@ label {
 
     selection { @extend %selected_items:disabled; }
   }
-
-  &:backdrop {
-    selection { @extend %selected_items:backdrop; }
-  }
 }
 
 .dim-label {
@@ -317,8 +306,6 @@ entry {
 
     &:backdrop:disabled { @include entry(backdrop-insensitive); }
 
-    selection { @extend %selected_items; }
-
     // entry error and warning style
     @each $e_type, $e_color in (error, $error_color),
                                (warning, $warning_color) {
@@ -1824,8 +1811,6 @@ treeview.view {
   &:selected {
     &:focus, & {
       border-radius: 0;
-
-      @extend %selected_items;
     }
 
     &:backdrop, & {
@@ -4506,7 +4491,17 @@ headerbar.selection-mode button.titlebutton,
 // catch all extend :)
 
 %selected_items {
-  background-color: $selected_bg_color;
+
+  // don't differentiate between focussed and unfocussed widgets.
+  &:focus, &{
+    color: $selected_fg_color;
+    background-color: $selected_bg_color;
+  }
+
+  &:backdrop {
+    color: $backdrop_selected_fg_color;
+    background-color: $backdrop_selected_bg_color;
+  }
 
   @at-root %nobg_selected_items, & {
     color: $selected_fg_color;
@@ -4517,6 +4512,7 @@ headerbar.selection-mode button.titlebutton,
 
     &:backdrop {
       color: $backdrop_selected_fg_color;
+      background-color: $backdrop_selected_bg_color;
 
       &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
     }