[gtk/wip/jimmac/list-image-buttons] Adwaita: only tone down image buttons
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk/wip/jimmac/list-image-buttons] Adwaita: only tone down image buttons
- Date: Wed, 20 Mar 2019 10:34:20 +0000 (UTC)
commit e7e31a48357eb608eb0d6e1a5bafc5c02d7a3d04
Author: Jakub Steiner <jimmac gmail com>
Date: Wed Mar 20 11:31:50 2019 +0100
Adwaita: only tone down image buttons
- Rather than making labeled buttons inside lists toned down,
only tone down image buttons, so that we don't have to include
icon-only actions. Places like Software can continue using label
buttons with no change without having those less visible.
Fixes https://gitlab.gnome.org/GNOME/gtk/issues/1748
gtk/theme/Adwaita/_common.scss | 7 +++++--
gtk/theme/Adwaita/gtk-contained-dark.css | 10 +++++++---
gtk/theme/Adwaita/gtk-contained.css | 10 +++++++---
3 files changed, 19 insertions(+), 8 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 9066e50643..31aadc5d7a 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1097,10 +1097,13 @@ button.color {
}
/* list buttons */
-/* tone down as per new designs, see issue #1473 */
-list row button {
+/* tone down as per new designs, see issue #1473, #1748 */
+list row button.image-button {
@extend %undecorated_button;
border: 1px solid transparentize($borders_color, .5);
+ &:hover { @include button(hover); }
+ &:active,
+ &:checked { @include button(active); }
}
/*********
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index a54214a229..5ddddeee6a 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -438,7 +438,7 @@ filechooser .path-bar.linked > button:only-child { border-radius: 5px; border-st
.linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child,
.linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo {
border-radius: 5px; border-style: solid; }
-modelbutton.flat, .menuitem.button.flat, modelbutton.flat:backdrop, modelbutton.flat:backdrop:hover,
.menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, list row button, button:link,
button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover,
button:visited:active, button:visited:checked, calendar.button, .scale-popup button:hover, .scale-popup
button:backdrop:hover, .scale-popup button:backdrop:disabled, .scale-popup button:backdrop {
background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px
rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+modelbutton.flat, .menuitem.button.flat, modelbutton.flat:backdrop, modelbutton.flat:backdrop:hover,
.menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, list row button.image-button,
button:link, button:visited, button:link:hover, button:link:active, button:link:checked,
button:visited:hover, button:visited:active, button:visited:checked, calendar.button, .scale-popup
button:hover, .scale-popup button:backdrop:hover, .scale-popup button:backdrop:disabled, .scale-popup
button:backdrop { background-color: transparent; background-image: none; border-color: transparent;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none;
-gtk-icon-shadow: none; }
/* menu buttons */
modelbutton.flat, .menuitem.button.flat { min-height: 26px; padding-left: 5px; padding-right: 5px;
border-radius: 5px; outline-offset: -2px; }
@@ -458,8 +458,12 @@ button.color { padding: 4px; }
button.color colorswatch:only-child, button.color colorswatch:only-child overlay { border-radius: 0; }
/* list buttons */
-/* tone down as per new designs, see issue #1473 */
-list row button { border: 1px solid rgba(27, 27, 27, 0.5); }
+/* tone down as per new designs, see issue #1473, #1748 */
+list row button.image-button { border: 1px solid rgba(27, 27, 27, 0.5); }
+
+list row button.image-button:hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color:
#1b1b1b; border-bottom-color: #070707; text-shadow: 0 -1px rgba(0, 0, 0, 0.786353); -gtk-icon-shadow: 0 -1px
rgba(0, 0, 0, 0.786353); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07);
background-image: linear-gradient(to top, #323232, #373737 1px); }
+
+list row button.image-button:active, list row button.image-button:checked { color: #eeeeec; outline-color:
rgba(238, 238, 236, 0.3); border-color: #1b1b1b; background-image: image(#1e1e1e); box-shadow: inset 0 1px
rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
/********* Links * */
button:link > label, button:visited > label, *:link, button:link, button:visited { color: #3584e4; }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index e96af7ebf4..4f7ed19306 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -440,7 +440,7 @@ filechooser .path-bar.linked > button:only-child { border-radius: 5px; border-st
.linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child,
.linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo {
border-radius: 5px; border-style: solid; }
-modelbutton.flat, .menuitem.button.flat, modelbutton.flat:backdrop, modelbutton.flat:backdrop:hover,
.menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, list row button, button:link,
button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover,
button:visited:active, button:visited:checked, calendar.button, .scale-popup button:hover, .scale-popup
button:backdrop:hover, .scale-popup button:backdrop:disabled, .scale-popup button:backdrop {
background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px
rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+modelbutton.flat, .menuitem.button.flat, modelbutton.flat:backdrop, modelbutton.flat:backdrop:hover,
.menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, list row button.image-button,
button:link, button:visited, button:link:hover, button:link:active, button:link:checked,
button:visited:hover, button:visited:active, button:visited:checked, calendar.button, .scale-popup
button:hover, .scale-popup button:backdrop:hover, .scale-popup button:backdrop:disabled, .scale-popup
button:backdrop { background-color: transparent; background-image: none; border-color: transparent;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none;
-gtk-icon-shadow: none; }
/* menu buttons */
modelbutton.flat, .menuitem.button.flat { min-height: 26px; padding-left: 5px; padding-right: 5px;
border-radius: 5px; outline-offset: -2px; }
@@ -466,8 +466,12 @@ button.color colorswatch:only-child, button.color colorswatch:only-child overlay
.osd button.color:disabled colorswatch:only-child, .osd button.color:backdrop colorswatch:only-child, .osd
button.color:active colorswatch:only-child, .osd button.color:checked colorswatch:only-child,
button.color:disabled colorswatch:only-child, button.color:backdrop colorswatch:only-child,
button.color:active colorswatch:only-child, button.color:checked colorswatch:only-child { box-shadow: none; }
/* list buttons */
-/* tone down as per new designs, see issue #1473 */
-list row button { border: 1px solid rgba(205, 199, 194, 0.5); }
+/* tone down as per new designs, see issue #1473, #1748 */
+list row button.image-button { border: 1px solid rgba(205, 199, 194, 0.5); }
+
+list row button.image-button:hover { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color:
#cdc7c2; border-bottom-color: #bfb8b1; text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0
1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07);
background-image: linear-gradient(to top, #f6f5f4, #f8f8f7 1px); }
+
+list row button.image-button:active, list row button.image-button:checked { color: #2e3436; outline-color:
rgba(46, 52, 54, 0.3); border-color: #cdc7c2; background-image: image(#d6d1cd); box-shadow: inset 0 1px
rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
/********* Links * */
button:link > label, button:visited > label, *:link, button:link, button:visited { color: #1b6acb; }
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]