gtk3: Make check/radio visible in Firefox

regardless of whether the background is bright or dark (#123)
nana-4 · Mar 19, 2018 · 4e2aa1c · 4e2aa1c
1 parent e49293d
commit 4e2aa1c
Show file tree

Hide file tree

Showing 14 changed files with 203 additions and 1 deletion.
diff --git a/TODO.md b/TODO.md
@@ -30,7 +30,7 @@
 
 - Make gtk2 check/radio buttons a bit smaller for Qt apps ([#78](../../issues/78))
 
-- Use `#757575` as check/radio buttons color for only web interfaces ([#123](../../issues/123), if possible)
+- Use `#757575` as check/radio buttons color for some web interfaces ([#123](../../issues/123), if possible)
 
 - Make compact variant more compact ([#79](../../issues/79))
 

diff --git a/src/_sass/gtk/apps/_misc.scss b/src/_sass/gtk/apps/_misc.scss
@@ -80,6 +80,16 @@ window.background:not(.csd) {
     > checkbutton > check { @extend %small_check; }
 
     > radiobutton > radio { @extend %small_radio; }
+
+    // make check/radio visible regardless of whether the background is bright or dark
+    > checkbutton > check:not(:checked),
+    > radiobutton > radio:not(:checked) {
+      color: $grey_600;
+
+      &:hover, &:active { color: $grey_900; }
+
+      &:disabled { color: rgba($grey_600, 0.5); }
+    }
   }
 
   // remove ugly border around the menus

diff --git a/src/gtk/3.20/gtk-compact.css b/src/gtk/3.20/gtk-compact.css
@@ -4572,6 +4572,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;

diff --git a/src/gtk/3.20/gtk-dark-compact.css b/src/gtk/3.20/gtk-dark-compact.css
@@ -4572,6 +4572,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;

diff --git a/src/gtk/3.20/gtk-dark.css b/src/gtk/3.20/gtk-dark.css
@@ -4572,6 +4572,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;

diff --git a/src/gtk/3.20/gtk-light-compact.css b/src/gtk/3.20/gtk-light-compact.css
@@ -4572,6 +4572,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;

diff --git a/src/gtk/3.20/gtk-light.css b/src/gtk/3.20/gtk-light.css
@@ -4572,6 +4572,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;

diff --git a/src/gtk/3.20/gtk.css b/src/gtk/3.20/gtk.css
@@ -4572,6 +4572,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;

diff --git a/src/gtk/3.22/gtk-compact.css b/src/gtk/3.22/gtk-compact.css
@@ -4824,6 +4824,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;

diff --git a/src/gtk/3.22/gtk-dark-compact.css b/src/gtk/3.22/gtk-dark-compact.css
@@ -4824,6 +4824,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;

diff --git a/src/gtk/3.22/gtk-dark.css b/src/gtk/3.22/gtk-dark.css
@@ -4824,6 +4824,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;

diff --git a/src/gtk/3.22/gtk-light-compact.css b/src/gtk/3.22/gtk-light-compact.css
@@ -4824,6 +4824,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;

diff --git a/src/gtk/3.22/gtk-light.css b/src/gtk/3.22/gtk-light.css
@@ -4824,6 +4824,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;

diff --git a/src/gtk/3.22/gtk.css b/src/gtk/3.22/gtk.css
@@ -4824,6 +4824,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;