[gtk+] Adwaita: fix colorchooser styling after latest gtk changes

[Lapo Calamandrei <lapo src gnome org>]

commit bcbec384da5c0974680b665b2c503c83d6454677
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Wed Oct 15 19:49:13 2014 +0200

    Adwaita: fix colorchooser styling after latest gtk changes
    
    ...commenting stuff pretty accuratelly in the process, since the
    widget is quite unobvious to figure out.

 gtk/resources/theme/Adwaita/_common.scss           |   15 ++++++++++++---
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   15 ++++++++++++---
 gtk/resources/theme/Adwaita/gtk-contained.css      |   15 ++++++++++++---
 3 files changed, 36 insertions(+), 9 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 978e117..b7963a5 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -2790,6 +2790,10 @@ GtkInfoBar {
  *****************/
 
 GtkColorSwatch {
+  // This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other 
one
+  // is GtkColorSwatch .overlay {}, GtkColorSwatch has the programmatically set background, so most of the 
style
+  // is applied to the overlay box.
+
   box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
 
   // border rounding
@@ -2801,17 +2805,19 @@ GtkColorSwatch {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
   }
-  &.left, &:first-child {
+  &.left, &:first-child, &:first-child .overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
   }
-  &.right, &:last-child {
+  &.right, &:last-child, &:last-child .overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
   }
-  &:only-child {
+  &:only-child, &:only-child .overlay {
     border-radius: 5px;
   }
+  // nth-child works just on the custom colors row
+
 
   // hover effect
   &:hover {
@@ -2855,9 +2861,12 @@ GtkColorSwatch {
 
   // make the add color button looks like, well, a button
   &#add-color-button {
+    border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi
+    border-width: 1px;   // translucent on the colored background, here it's not necessary so they need to 
be set
     @include button(normal);
     &:hover { @include button(hover); }
     &:backdrop { @include button(backdrop); }
+    .overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat
   }
 }
 
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index b2fbfc8..07e44d7 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -4186,13 +4186,13 @@ GtkColorSwatch {
   GtkColorSwatch.bottom {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch.left, GtkColorSwatch:first-child {
+  GtkColorSwatch.left, GtkColorSwatch:first-child, GtkColorSwatch:first-child .overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px; }
-  GtkColorSwatch.right, GtkColorSwatch:last-child {
+  GtkColorSwatch.right, GtkColorSwatch:last-child, GtkColorSwatch:last-child .overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch:only-child {
+  GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay {
     border-radius: 5px; }
   GtkColorSwatch:hover {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
@@ -4222,6 +4222,8 @@ GtkColorSwatch {
     GtkColorSwatch.overlay:hover {
       border-color: black; }
   GtkColorSwatch#add-color-button {
+    border-style: solid;
+    border-width: 1px;
     color: #eeeeec;
     outline-color: rgba(238, 238, 236, 0.3);
     border-color: #1c1f1f;
@@ -4244,6 +4246,13 @@ GtkColorSwatch {
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); }
+    GtkColorSwatch#add-color-button .overlay {
+      border-color: transparent;
+      background-color: transparent;
+      background-image: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
+      text-shadow: none;
+      icon-shadow: none; }
 
 /********
  * Misc *
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index a9ef6ce..eed31a9 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -4347,13 +4347,13 @@ GtkColorSwatch {
   GtkColorSwatch.bottom {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch.left, GtkColorSwatch:first-child {
+  GtkColorSwatch.left, GtkColorSwatch:first-child, GtkColorSwatch:first-child .overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px; }
-  GtkColorSwatch.right, GtkColorSwatch:last-child {
+  GtkColorSwatch.right, GtkColorSwatch:last-child, GtkColorSwatch:last-child .overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch:only-child {
+  GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay {
     border-radius: 5px; }
   GtkColorSwatch:hover {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
@@ -4383,6 +4383,8 @@ GtkColorSwatch {
     GtkColorSwatch.overlay:hover {
       border-color: rgba(0, 0, 0, 0.5); }
   GtkColorSwatch#add-color-button {
+    border-style: solid;
+    border-width: 1px;
     color: #2e3436;
     outline-color: rgba(46, 52, 54, 0.3);
     border-color: #a1a1a1;
@@ -4405,6 +4407,13 @@ GtkColorSwatch {
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+    GtkColorSwatch#add-color-button .overlay {
+      border-color: transparent;
+      background-color: transparent;
+      background-image: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+      text-shadow: none;
+      icon-shadow: none; }
 
 /********
  * Misc *