[gnome-panel] theme: make the click event on the task list button work on the edges too

[Alberts Muktupāvels <muktupavels src gnome org>]

commit 423118861f86e4df441b33ac356064f45cc2d0a5
Author: Antonio Ospite <ao2 ao2 it>
Date:   Sun Mar 5 19:01:12 2017 +0100

    theme: make the click event on the task list button work on the edges too
    
    By making the button take all the available space and only styling the
    box inside a button, it is possible to have a rounded look with a border
    and a margin but still catch the click events on the edges of the panel.
    
    Thanks Alberts Muktupāvels for the idea.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=769012

 data/theme/Adwaita/gnome-panel-dark.css |   18 ++++++++++++++----
 data/theme/Adwaita/gnome-panel.css      |   19 +++++++++++++++----
 2 files changed, 29 insertions(+), 8 deletions(-)
---
diff --git a/data/theme/Adwaita/gnome-panel-dark.css b/data/theme/Adwaita/gnome-panel-dark.css
index 7306277..56edf7c 100644
--- a/data/theme/Adwaita/gnome-panel-dark.css
+++ b/data/theme/Adwaita/gnome-panel-dark.css
@@ -73,7 +73,17 @@ gp-arrow-button:active {
   padding: 3px 0px;
 }
 
-#tasklist-button {
+#tasklist-button,
+#tasklist-button:hover,
+#tasklist-button:active,
+#tasklist-button:checked {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-image: none;
+}
+
+#tasklist-button > box {
   padding: 2px 4px;
   margin: 1px;
   border: 1px solid;
@@ -87,14 +97,14 @@ gp-arrow-button:active {
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
 }
 
-#tasklist-button:hover {
+#tasklist-button:hover > box {
   background-image: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30);
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
   -gtk-icon-effect: highlight;
 }
 
-#tasklist-button:active,
-#tasklist-button:checked {
+#tasklist-button:active > box,
+#tasklist-button:checked > box {
   outline-color: rgba(238, 238, 236, 0.3);
   border-color: #1b1f20;
   background-image: none;
diff --git a/data/theme/Adwaita/gnome-panel.css b/data/theme/Adwaita/gnome-panel.css
index 2a078e3..a3d51b8 100644
--- a/data/theme/Adwaita/gnome-panel.css
+++ b/data/theme/Adwaita/gnome-panel.css
@@ -78,7 +78,18 @@ gp-arrow-button:active {
   padding: 3px 0px;
 }
 
-#tasklist-button {
+
+#tasklist-button,
+#tasklist-button:hover,
+#tasklist-button:active,
+#tasklist-button:checked {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-image: none;
+}
+
+#tasklist-button > box {
   padding: 2px 4px;
   margin: 1px;
   border: 1px solid;
@@ -92,14 +103,14 @@ gp-arrow-button:active {
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
 }
 
-#tasklist-button:hover {
+#tasklist-button:hover > box {
   background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
   box-shadow: inset 0 1px white;
   -gtk-icon-effect: highlight;
 }
 
-#tasklist-button:active,
-#tasklist-button:checked {
+#tasklist-button:active > box,
+#tasklist-button:checked > box {
   outline-color: rgba(46, 52, 54, 0.3);
   border-color: #b6b6b3;
   background-image: none;