From 6eb1be27f7b495bacf2d671f5bd8ede5fce45d51 Mon Sep 17 00:00:00 2001 From: Daniel Boles Date: Sun, 6 Jan 2019 19:18:47 +0000 Subject: [PATCH 1/2] Adwaita: Fix bg of backdrop:disabled spinbutton +- The +/- buttons are meant to be transparent, showing the base_color, but when backdropped they were picking up background-image from the base button, meaning they suddenly became more like theme_bg_color instead, and jumped out of the spinbutton when in backdrop unlike the rest of it. This looks strange and achieves nothing (especially not indicating that they are disabled, which is already served fine by their dim fg colour). Fix this by explicitly saying we don't want any background-image there. --- gtk/theme/Adwaita/_common.scss | 1 + gtk/theme/Adwaita/gtk-contained-dark.css | 2 +- gtk/theme/Adwaita/gtk-contained.css | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 4072e44683..737321a961 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -1216,6 +1216,7 @@ spinbutton { &:backdrop:disabled { color: transparentize($backdrop_insensitive_color,0.7); background-color: transparent; + background-image: none; border-style: none none none solid; // It is needed or it gets overridden &:dir(rtl) { border-style: none solid none none; } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 7023c845c0..9b02dce917 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -505,7 +505,7 @@ spinbutton:not(.vertical) button:active { background-color: rgba(0, 0, 0, 0.1); spinbutton:not(.vertical) button:backdrop { color: #86898a; background-color: transparent; border-color: rgba(32, 36, 37, 0.3); transition: 200ms ease-out; } -spinbutton:not(.vertical) button:backdrop:disabled { color: rgba(86, 97, 100, 0.3); background-color: transparent; border-style: none none none solid; } +spinbutton:not(.vertical) button:backdrop:disabled { color: rgba(86, 97, 100, 0.3); background-color: transparent; background-image: none; border-style: none none none solid; } spinbutton:not(.vertical) button:backdrop:disabled:dir(rtl) { border-style: none solid none none; } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 5ece9e6869..e1e059f936 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -513,7 +513,7 @@ spinbutton:not(.vertical) button:active { background-color: rgba(0, 0, 0, 0.1); spinbutton:not(.vertical) button:backdrop { color: #96999a; background-color: transparent; border-color: rgba(192, 192, 189, 0.3); transition: 200ms ease-out; } -spinbutton:not(.vertical) button:backdrop:disabled { color: rgba(195, 195, 192, 0.3); background-color: transparent; border-style: none none none solid; } +spinbutton:not(.vertical) button:backdrop:disabled { color: rgba(195, 195, 192, 0.3); background-color: transparent; background-image: none; border-style: none none none solid; } spinbutton:not(.vertical) button:backdrop:disabled:dir(rtl) { border-style: none solid none none; } From d1b14a7deb9d27f510dc18ba5b4c9b8954e0715f Mon Sep 17 00:00:00 2001 From: Daniel Boles Date: Sun, 6 Jan 2019 19:58:50 +0000 Subject: [PATCH 2/2] HC: Fix fgcolor of backdrop:disabled spinbutton +- We shouldn't give the icons here the same fg colour as the bg... which makes them disappear and the buttons look like meaningless flat squares. Fix by just using the same colour the same as foreground disabled. Note: insensitive_fg_color is more prominent than !disabled, so clearly wrong. --- gtk/theme/HighContrast/_common.scss | 6 ++++-- gtk/theme/HighContrast/gtk-contained-inverse.css | 4 ++-- gtk/theme/HighContrast/gtk-contained.css | 4 ++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index 1f8457322c..9b6cde1d5a 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -980,7 +980,10 @@ spinbutton { background-color: $bg_color; } - &:disabled { color: transparentize($insensitive_fg_color, 0.7); } + &:disabled, + &:backdrop:disabled { + color: transparentize($insensitive_fg_color, 0.7); + } &:active { background-color: $osd_bg_color; @@ -994,7 +997,6 @@ spinbutton { } &:backdrop:disabled { - color: $insensitive_bg_color; background-image: none; border-style: none none none solid; // It is needed or it gets overridden diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css index fadb1ce2d0..313980cb4c 100644 --- a/gtk/theme/HighContrast/gtk-contained-inverse.css +++ b/gtk/theme/HighContrast/gtk-contained-inverse.css @@ -405,13 +405,13 @@ spinbutton:not(.vertical) button:dir(rtl) { border-style: none solid none none; spinbutton:not(.vertical) button:hover { color: #fff; background-color: #000; } -spinbutton:not(.vertical) button:disabled { color: rgba(128, 128, 128, 0.3); } +spinbutton:not(.vertical) button:disabled, spinbutton:not(.vertical) button:backdrop:disabled { color: rgba(128, 128, 128, 0.3); } spinbutton:not(.vertical) button:active { background-color: rgba(0, 0, 0, 0.8); color: #fff; } spinbutton:not(.vertical) button:backdrop { color: #fff; background-color: transparent; border-color: rgba(115, 115, 115, 0.3); } -spinbutton:not(.vertical) button:backdrop:disabled { color: #070707; background-image: none; border-style: none none none solid; } +spinbutton:not(.vertical) button:backdrop:disabled { background-image: none; border-style: none none none solid; } spinbutton:not(.vertical) button:backdrop:disabled:dir(rtl) { border-style: none solid none none; } diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css index e0e6a58e8e..c174d6c607 100644 --- a/gtk/theme/HighContrast/gtk-contained.css +++ b/gtk/theme/HighContrast/gtk-contained.css @@ -409,13 +409,13 @@ spinbutton:not(.vertical) button:dir(rtl) { border-style: none solid none none; spinbutton:not(.vertical) button:hover { color: #000; background-color: #fff; } -spinbutton:not(.vertical) button:disabled { color: rgba(128, 128, 128, 0.3); } +spinbutton:not(.vertical) button:disabled, spinbutton:not(.vertical) button:backdrop:disabled { color: rgba(128, 128, 128, 0.3); } spinbutton:not(.vertical) button:active { background-color: rgba(0, 0, 0, 0.8); color: #fff; } spinbutton:not(.vertical) button:backdrop { color: #000; background-color: transparent; border-color: rgba(141, 141, 141, 0.3); } -spinbutton:not(.vertical) button:backdrop:disabled { color: white; background-image: none; border-style: none none none solid; } +spinbutton:not(.vertical) button:backdrop:disabled { background-image: none; border-style: none none none solid; } spinbutton:not(.vertical) button:backdrop:disabled:dir(rtl) { border-style: none solid none none; }