HC: Avoid same BG/FG colors in flat treeview entry

Selected rows in tree views in HighContrast have a background colour the
same or nearly as the normal text colour, so we cannot let entries in
such rows have transparent backgrounds, or the text inside the entry
becomes nearly or totally impossible to see.

Dodge this by giving entry.flat inside treeview and with :focus the
$base_color, which is different from the text & so lets that be seen.

https://gitlab.gnome.org/GNOME/gtk/merge_requests/125

3 files changed, 7 insertions, 2 deletions

diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 0cb48c1c2b..397a317937 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -215,6 +215,9 @@ entry {
         border-color: transparent;
         border-radius: 0;
         box-shadow: none;
+
+        // Dodge transparency in selected treeview row, else bg & fg end up same
+        treeview &:focus { background-color: $base_color; }
       }
     }
 
@@ -928,7 +931,6 @@ button:link, button:visited {
  * GtkSpinButton *
  *****************/
 spinbutton {
-   
   &:not(.vertical) {
     // in this horizontal configuration, the whole spinbutton
     // behaves as the entry, so we extend the entry styling
@@ -938,7 +940,6 @@ spinbutton {
     border-color: $borders_color;
     box-shadow: none;
     padding: 0;
-    
  
     entry {
       min-width: 28px;
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 49305bc6b1..dc0365ee01 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -92,6 +92,8 @@ spinbutton:not(.vertical) undershoot.right, entry undershoot.right { background-
 
 spinbutton.flat:focus:not(.vertical), spinbutton.flat:backdrop:not(.vertical), spinbutton.flat:disabled:not(.vertical), spinbutton.flat:not(.vertical), entry.flat:focus, entry.flat:backdrop, entry.flat:disabled, entry.flat { min-height: 0; padding: 2px; background-image: none; border-color: transparent; border-radius: 0; box-shadow: none; }
 
+treeview spinbutton.flat:focus:focus:not(.vertical), treeview spinbutton.flat:backdrop:focus:not(.vertical), treeview spinbutton.flat:disabled:focus:not(.vertical), treeview spinbutton.flat:focus:not(.vertical), treeview entry.flat:focus:focus, treeview entry.flat:backdrop:focus, treeview entry.flat:disabled:focus, treeview entry.flat:focus { background-color: #111; }
+
 spinbutton:focus:not(.vertical), entry:focus { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #090909, #111 90%); border-color: #ddd; box-shadow: inset 0 2px 2px -2px #090909, inset 0 0 0 1px #ddd; }
 
 spinbutton:disabled:not(.vertical), entry:disabled { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #090909, #111 90%); color: gray; border-color: gray; background-image: linear-gradient(to bottom, #070707, #070707); box-shadow: none; }
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index af4f54b0a1..98ab363c39 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -92,6 +92,8 @@ spinbutton:not(.vertical) undershoot.right, entry undershoot.right { background-
 
 spinbutton.flat:focus:not(.vertical), spinbutton.flat:backdrop:not(.vertical), spinbutton.flat:disabled:not(.vertical), spinbutton.flat:not(.vertical), entry.flat:focus, entry.flat:backdrop, entry.flat:disabled, entry.flat { min-height: 0; padding: 2px; background-image: none; border-color: transparent; border-radius: 0; box-shadow: none; }
 
+treeview spinbutton.flat:focus:focus:not(.vertical), treeview spinbutton.flat:backdrop:focus:not(.vertical), treeview spinbutton.flat:disabled:focus:not(.vertical), treeview spinbutton.flat:focus:not(.vertical), treeview entry.flat:focus:focus, treeview entry.flat:backdrop:focus, treeview entry.flat:disabled:focus, treeview entry.flat:focus { background-color: #fff; }
+
 spinbutton:focus:not(.vertical), entry:focus { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); border-color: #000; box-shadow: inset 0 2px 2px -2px gray, inset 0 0 0 1px #000; }
 
 spinbutton:disabled:not(.vertical), entry:disabled { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); color: gray; border-color: gray; background-image: linear-gradient(to bottom, white, white); box-shadow: none; }