[gtk+] fix insensitive and backdrop states

From: Jakub Steiner <jimmac src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk+] fix insensitive and backdrop states
Date: Fri, 20 Mar 2015 12:26:14 +0000 (UTC)
commit 3f13349f2705d8a7e13264c30f08c0d9f3019d79
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri Mar 20 13:22:47 2015 +0100

    fix insensitive and backdrop states
    
    - checkboxes, labels and buttons were a mixed bag for
      :insensitive and :backdrop
    
    https://bugzilla.gnome.org/show_bug.cgi?id=746188

 gtk/theme/HighContrast/_colors.scss  |    1 -
 gtk/theme/HighContrast/_common.scss  |   48 ++++++++++++++-------------
 gtk/theme/HighContrast/_drawing.scss |   10 +++---
 gtk/theme/HighContrast/gtk.css       |   59 +++++++++++++++++++---------------
 4 files changed, 63 insertions(+), 55 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_colors.scss b/gtk/theme/HighContrast/_colors.scss
index 2a28ba2..17aec9e 100644
--- a/gtk/theme/HighContrast/_colors.scss
+++ b/gtk/theme/HighContrast/_colors.scss
@@ -33,7 +33,6 @@ $insensitive_borders_color: $borders_color;
 $backdrop_base_color: $base_color;
 $backdrop_bg_color: $bg_color;
 $backdrop_fg_color: $fg_color;
-$backdrop_insensitive_color: $insensitive_fg_color;
 $backdrop_borders_color: mix($borders_color, $bg_color, 90%);
 
 //apps rely on some named colors to be exported
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 6774f02..77985e3 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -150,9 +150,9 @@
   &:backdrop:selected {
     @extend %selected_items;
   }
- &:insensitive {
-   color: $insensitive_fg_color;
- }
+  &:insensitive, &:backdrop:insensitive {
+    color: $insensitive_fg_color;
+  }
 }
 
 /*********************
@@ -579,11 +579,13 @@ $_dot_color: $selected_bg_color;
 .menuitem.button.flat {
   @extend %undecorated_button;
   outline-offset: -1px;
-  &:hover { background-color: mix($fg_color,$bg_color,10%); }
-  &:selected { @extend %selected_items; }
-  &:backdrop, &:backdrop:hover {
+  &:hover, &:selected { @extend %selected_items; }
+  &:backdrop {
+    color: $backdrop_fg_color;
     @extend %undecorated_button;
+    &:hover { color: $selected_fg_color; background-color: selected_bg_color; }
   }
+  &:insensitive { color: $insensitive_fg_color; }
 }
 
 GtkColorButton.button { padding: 4px; } // Uniform padding on the
@@ -651,7 +653,7 @@ GtkColorButton.button { padding: 4px; } // Uniform padding on the
     }
     &:backdrop:insensitive {
       background-image: none;
-      color: transparentize($backdrop_insensitive_color,0.7);
+      color: transparentize($insensitive_fg_color,0.7);
       border-width: 0 0 0 1px; // It is needed or it gets overridden
       &:dir(rtl) { border-width: 0 1px 0 0; }
     }
@@ -756,7 +758,7 @@ GtkComboBox {
     icon-shadow: none;
   }
   &:backdrop:insensitive {
-    color: $backdrop_insensitive_color;
+    color: $insensitive_fg_color;
   }
   .menuitem { text-shadow: none; }
   .separator.vertical {
@@ -1037,7 +1039,7 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
     }
     &:insensitive {
       color: $insensitive_fg_color;
-      &:backdrop { color: $backdrop_insensitive_color; }
+      &:backdrop { color: $insensitive_fg_color; }
     }
     &:backdrop, &:backdrop:hover {
       color: $backdrop_fg_color;
@@ -1309,7 +1311,7 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
       font-weight: bold;
       color: $insensitive_fg_color; /* color: inherit doesn't work here */
       &:backdrop, &.prelight-page:backdrop {
-        color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
+        color: $insensitive_fg_color;
       }
     }
     &.prelight-page GtkLabel, GtkLabel.prelight-page {
@@ -1447,8 +1449,8 @@ GtkSwitch {
         }
         &:insensitive, &:insensitive:active {
           background-color: $insensitive_bg_color;
-          color: $backdrop_insensitive_color;
-          border-color: $backdrop_insensitive_color;
+          color: $insensitive_fg_color;
+          border-color: $insensitive_fg_color;
         }
       }
     }
@@ -1490,30 +1492,30 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
 @each $w,$a in ('check', 'checkbox'),
                ('radio','radio') {
   .#{$w} {
-    color: transparentize($fg_color,0.9);
+    color: $fg_color;
     background-image: none;
     -gtk-icon-source: -gtk-icontheme('#{$a}-symbolic');
-    &:hover { color: $borders_color; }
+    &:hover { color: mix($fg_color, $bg_color, 80%) }
     &:checked, &:active {
       -gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic');
       color: $fg_color;
-      &:hover { color: $borders_color; }
+      &:hover { color: mix($fg_color, $bg_color, 80%); }
       &:insensitive {
         color: $insensitive_fg_color;
-        &:backdrop { color: $backdrop_insensitive_color; }
+        &:backdrop { color: $insensitive_fg_color; }
       }
       &:backdrop { color: $backdrop_fg_color; }
     }
     &:insensitive {
-      color: transparentize($insensitive_fg_color,0.9);
-      &:backdrop { color: transparent; }
+      color: $insensitive_fg_color;
+      &:backdrop { color: $insensitive_fg_color; }
     }
     &:inconsistent {
       -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic');
     }
     &:backdrop {
-      color: transparentize($backdrop_fg_color,0.9);
-      &:selected { color: transparentize($backdrop_base_color,0.9); }
+      color: $backdrop_fg_color;
+      &:selected { color: $backdrop_fg_color; }
     }
   }
 }
@@ -1593,7 +1595,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       box-shadow: none;
     }
     &:backdrop:insensitive, .hilight:backdrop:insensitive {
-      border-color: $backdrop_insensitive_color;
+      border-color: $insensitive_fg_color;
       background-color: $backdrop_bg_color;
     }
   }
@@ -1629,7 +1631,7 @@ GtkProgressBar {
     font-size: 83%;
     color: transparentize($fg_color, 0.6);
     &:backdrop {
-      color: $backdrop_insensitive_color;
+      color: $insensitive_fg_color;
     }
 }
 
@@ -1746,7 +1748,7 @@ GtkLevelBar.vertical {
   background-color: $selected_bg_color;
   color: $selected_fg_color;
   outline-color: transparentize($selected_fg_color, 0.7);
-  &:backdrop { color: $backdrop_base_color; }
+  &:backdrop { background-color: $borders_color; color: $selected_fg_color; }
 }
 
 /**********
diff --git a/gtk/theme/HighContrast/_drawing.scss b/gtk/theme/HighContrast/_drawing.scss
index a14a529..330cb2e 100644
--- a/gtk/theme/HighContrast/_drawing.scss
+++ b/gtk/theme/HighContrast/_drawing.scss
@@ -69,7 +69,7 @@
     box-shadow: 0 1px transparentize(white,1);
   }
   @if $t==backdrop-insensitive {
-    color: $backdrop_insensitive_color;
+    color: $insensitive_fg_color;
     background-image: linear-gradient(to bottom, $backdrop_bg_color);
     box-shadow: 0 1px transparentize(white,1);
   }
@@ -191,8 +191,8 @@
   //
   // backdrop pushed button
   //
-    color: $backdrop_fg_color;
-    background-color: $backdrop_bg_color;
+    color: invert($backdrop_fg_color);
+    background-color: $backdrop_borders_color;
     border-color: $backdrop_borders_color;
     background-image: none;
   }
@@ -201,7 +201,7 @@
   //
   // backdrop insensitive button
   //
-    color: $backdrop_insensitive_color;
+    color: $insensitive_fg_color;
     background-color: $insensitive_bg_color;
     border-color: $backdrop_borders_color;
     background-image: none;
@@ -211,7 +211,7 @@
   //
   // backdrop insensitive pushed button
   //
-    color: $backdrop_insensitive_color;
+    color: $insensitive_fg_color;
     border-color: $backdrop_borders_color;
     background-image: none;
     background-color: mix($backdrop_borders_color,$backdrop_bg_color, 8%);
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index 0a9aa0a..a4653f7 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -174,8 +174,9 @@
     border: none;
     box-shadow: none; }
 
-.label:insensitive {
-  color: #7f7f7f; }
+.label:insensitive, .label:backdrop:insensitive {
+  color: #7f7f7f;
+  background-color: white; }
 
 /*********************
  * Spinner Animation *
@@ -468,8 +469,8 @@
     .button:backdrop:active, .button:backdrop:checked, .button.flat:backdrop:active, 
.button.flat:backdrop:checked {
       border-width: 2px;
       border-style: solid;
-      color: #000;
-      background-color: #fff;
+      color: white;
+      background-color: #8b8b8b;
       border-color: #8b8b8b;
       background-image: none; }
     .button:backdrop:insensitive, .button.flat:backdrop:insensitive {
@@ -685,8 +686,8 @@
   .inline-toolbar GtkToolButton > .button:backdrop:active {
     border-width: 2px;
     border-style: solid;
-    color: #000;
-    background-color: #fff;
+    color: white;
+    background-color: #8b8b8b;
     border-color: #8b8b8b;
     background-image: none; }
   .inline-toolbar GtkToolButton > .button:backdrop:insensitive {
@@ -766,7 +767,7 @@
   border-radius: 3px;
   border-style: solid; }
 
-.button.flat, .button.flat:backdrop, .button.flat:insensitive:backdrop, .menuitem.button.flat, 
.menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, 
.button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, 
.button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, 
.list-row.button:backdrop:hover, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, 
GtkCalendar.button:backdrop:hover {
+.button.flat, .button.flat:backdrop, .button.flat:insensitive:backdrop, .menuitem.button.flat, 
.menuitem.button.flat:backdrop, .button:link, .button:visited, .button:link:hover, .button:link:active, 
.button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab 
.button, .list-row.button, .list-row.button:backdrop:hover, GtkCalendar.button, GtkCalendar.button:hover, 
GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
@@ -777,8 +778,13 @@
 /* menu buttons */
 .menuitem.button.flat {
   outline-offset: -1px; }
-  .menuitem.button.flat:hover {
-    background-color: #e5e5e5; }
+  .menuitem.button.flat:backdrop {
+    color: #000; }
+    .menuitem.button.flat:backdrop:hover {
+      color: #fff;
+      background-color: selected_bg_color; }
+  .menuitem.button.flat:insensitive {
+    color: #7f7f7f; }
 
 GtkColorButton.button {
   padding: 4px; }
@@ -1526,7 +1532,7 @@ GtkTreeView.view.progressbar {
       color: #7f7f7f;
       /* color: inherit doesn't work here */ }
       .notebook tab GtkLabel:backdrop, .notebook tab GtkLabel.prelight-page:backdrop {
-        color: #3f3f3f; }
+        color: #7f7f7f; }
     .notebook tab.prelight-page GtkLabel, .notebook tab GtkLabel.prelight-page {
       color: #3f3f3f; }
     .notebook tab.active-page GtkLabel, .notebook tab GtkLabel.active-page {
@@ -1697,16 +1703,16 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
   outline-offset: 0; }
 
 .check {
-  color: rgba(0, 0, 0, 0.1);
+  color: #000;
   background-image: none;
   -gtk-icon-source: -gtk-icontheme("checkbox-symbolic"); }
   .check:hover {
-    color: #7f7f7f; }
+    color: #323232; }
   .check:checked, .check:active {
     -gtk-icon-source: -gtk-icontheme("checkbox-checked-symbolic");
     color: #000; }
     .check:checked:hover, .check:active:hover {
-      color: #7f7f7f; }
+      color: #323232; }
     .check:checked:insensitive, .check:active:insensitive {
       color: #7f7f7f; }
       .check:checked:insensitive:backdrop, .check:active:insensitive:backdrop {
@@ -1714,27 +1720,27 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
     .check:checked:backdrop, .check:active:backdrop {
       color: #000; }
   .check:insensitive {
-    color: rgba(127, 127, 127, 0.1); }
+    color: #7f7f7f; }
     .check:insensitive:backdrop {
-      color: transparent; }
+      color: #7f7f7f; }
   .check:inconsistent {
     -gtk-icon-source: -gtk-icontheme("checkbox-mixed-symbolic"); }
   .check:backdrop {
-    color: rgba(0, 0, 0, 0.1); }
+    color: #000; }
     .check:backdrop:selected {
-      color: rgba(255, 255, 255, 0.1); }
+      color: #000; }
 
 .radio {
-  color: rgba(0, 0, 0, 0.1);
+  color: #000;
   background-image: none;
   -gtk-icon-source: -gtk-icontheme("radio-symbolic"); }
   .radio:hover {
-    color: #7f7f7f; }
+    color: #323232; }
   .radio:checked, .radio:active {
     -gtk-icon-source: -gtk-icontheme("radio-checked-symbolic");
     color: #000; }
     .radio:checked:hover, .radio:active:hover {
-      color: #7f7f7f; }
+      color: #323232; }
     .radio:checked:insensitive, .radio:active:insensitive {
       color: #7f7f7f; }
       .radio:checked:insensitive:backdrop, .radio:active:insensitive:backdrop {
@@ -1742,15 +1748,15 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
     .radio:checked:backdrop, .radio:active:backdrop {
       color: #000; }
   .radio:insensitive {
-    color: rgba(127, 127, 127, 0.1); }
+    color: #7f7f7f; }
     .radio:insensitive:backdrop {
-      color: transparent; }
+      color: #7f7f7f; }
   .radio:inconsistent {
     -gtk-icon-source: -gtk-icontheme("radio-mixed-symbolic"); }
   .radio:backdrop {
-    color: rgba(0, 0, 0, 0.1); }
+    color: #000; }
     .radio:backdrop:selected {
-      color: rgba(255, 255, 255, 0.1); }
+      color: #000; }
 
 /************
  * GtkScale *
@@ -1970,11 +1976,12 @@ GtkLevelBar.vertical {
     .level-bar.fill-block.empty-fill-block:backdrop {
       border-color: rgba(0, 0, 0, 0.15); }
 
-.view:selected, GtkCalendar:selected, .view:selected:focus, GtkCalendar:focus:selected, 
.view:selected:hover, GtkCalendar:hover:selected, .label:selected, .label:selected:focus, 
.label:selected:hover, .label:backdrop:selected, .entry:selected, .entry:selected:focus, 
.menuitem.button.flat:selected, .sidebar:selected, GtkPlacesSidebar.sidebar .view:selected, 
GtkPlacesSidebar.sidebar GtkCalendar:selected {
+.view:selected, GtkCalendar:selected, .view:selected:focus, GtkCalendar:focus:selected, 
.view:selected:hover, GtkCalendar:hover:selected, .label:selected, .label:selected:focus, 
.label:selected:hover, .label:backdrop:selected, .entry:selected, .entry:selected:focus, 
.menuitem.button.flat:hover, .menuitem.button.flat:selected, .sidebar:selected, GtkPlacesSidebar.sidebar 
.view:selected, GtkPlacesSidebar.sidebar GtkCalendar:selected {
   background-color: #000;
   color: #fff;
   outline-color: rgba(255, 255, 255, 0.3); }
-  .view:backdrop:selected, GtkCalendar:backdrop:selected, GtkCalendar:backdrop:focus:selected, 
GtkCalendar:backdrop:hover:selected, .label:backdrop:selected, .entry:backdrop:selected, 
.menuitem.button.flat:backdrop:selected, .sidebar:backdrop:selected, GtkPlacesSidebar.sidebar 
.view:backdrop:selected, GtkPlacesSidebar.sidebar GtkCalendar:backdrop:selected {
+  .view:backdrop:selected, GtkCalendar:backdrop:selected, GtkCalendar:backdrop:focus:selected, 
GtkCalendar:backdrop:hover:selected, .label:backdrop:selected, .entry:backdrop:selected, 
.menuitem.button.flat:backdrop:hover, .menuitem.button.flat:backdrop:selected, .sidebar:backdrop:selected, 
GtkPlacesSidebar.sidebar .view:backdrop:selected, GtkPlacesSidebar.sidebar GtkCalendar:backdrop:selected {
+    background-color: #7f7f7f;
     color: #fff; }
 
 /**********
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]