[gtk+/wip/matthiasc/gadget-for-merge-2: 7/32] Adwaita: Update color swatch styling

[Matthias Clasen <matthiasc src gnome org>]

commit 0d4db78ff7f6828d5281ee8efd4682b8070bb07e
Author: Matthias Clasen <mclasen redhat com>
Date:   Mon Dec 14 16:10:54 2015 -0500

    Adwaita: Update color swatch styling
    
    The adjustments here are provisional and need an artistic eye.

 gtk/theme/Adwaita/_common.scss           |   16 ++++++++--------
 gtk/theme/Adwaita/gtk-contained-dark.css |   25 ++++++++++++++-----------
 gtk/theme/Adwaita/gtk-contained.css      |   25 ++++++++++++++-----------
 3 files changed, 36 insertions(+), 30 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 8de9e9c..76d3fd0 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3122,10 +3122,6 @@ colorswatch {
                                               transparentize(white, 1) 50%);
     box-shadow: inset 0 1px transparentize(white, 0.6),
                 inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6));
-    &.dark overlay { // swatches with colors with luminosity lower than 50% get the dark class
-      background-image: linear-gradient(135deg, transparentize(white, 0.5),
-                                                transparentize(white, 1) 50%);
-    }
   }
   &:backdrop,
   &:backdrop:selected
@@ -3136,22 +3132,26 @@ colorswatch {
   }
 
   // indicator and keynav outline colors
-  &.dark overlay {
+  &.dark {
     color: white;
     outline-color: transparentize(white, 0.5);
+    border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
+    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
     &:backdrop { color: transparentize(white, 0.7); }
   }
-  &.light overlay {
+  &.light {
     color: black;
     outline-color: transparentize(black, 0.5);
+    border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
+    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
     &:backdrop { color: transparentize(black, 0.7); }
   }
 
   // border color
   & overlay,
   & overlay:selected {
-    border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
-    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
+    background: none;
+    border: none;
   }
 
   // make the add color button looks like, well, a button
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 52ce6be..9668508 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -4327,26 +4327,29 @@ colorswatch {
   colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
-    colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay {
-      background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
   colorswatch:backdrop, colorswatch:backdrop:selected
   colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  colorswatch.dark overlay {
+  colorswatch.dark {
     color: white;
-    outline-color: rgba(255, 255, 255, 0.5); }
-    colorswatch.dark overlay:backdrop {
+    outline-color: rgba(255, 255, 255, 0.5);
+    border: 1px solid #1c1f1f; }
+    colorswatch.dark:hover {
+      border-color: black; }
+    colorswatch.dark:backdrop {
       color: rgba(255, 255, 255, 0.3); }
-  colorswatch.light overlay {
+  colorswatch.light {
     color: black;
-    outline-color: rgba(0, 0, 0, 0.5); }
-    colorswatch.light overlay:backdrop {
-      color: rgba(0, 0, 0, 0.3); }
-  colorswatch overlay, colorswatch overlay:selected {
+    outline-color: rgba(0, 0, 0, 0.5);
     border: 1px solid #1c1f1f; }
-    colorswatch overlay:hover, colorswatch overlay:selected:hover {
+    colorswatch.light:hover {
       border-color: black; }
+    colorswatch.light:backdrop {
+      color: rgba(0, 0, 0, 0.3); }
+  colorswatch overlay, colorswatch overlay:selected {
+    background: none;
+    border: none; }
   colorswatch#add-color-button {
     border-style: solid;
     border-width: 1px;
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index ef83a14..089c2d3 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -4499,26 +4499,29 @@ colorswatch {
   colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.1); }
-    colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay {
-      background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
   colorswatch:backdrop, colorswatch:backdrop:selected
   colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  colorswatch.dark overlay {
+  colorswatch.dark {
     color: white;
-    outline-color: rgba(255, 255, 255, 0.5); }
-    colorswatch.dark overlay:backdrop {
+    outline-color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(0, 0, 0, 0.3); }
+    colorswatch.dark:hover {
+      border-color: rgba(0, 0, 0, 0.5); }
+    colorswatch.dark:backdrop {
       color: rgba(255, 255, 255, 0.3); }
-  colorswatch.light overlay {
+  colorswatch.light {
     color: black;
-    outline-color: rgba(0, 0, 0, 0.5); }
-    colorswatch.light overlay:backdrop {
-      color: rgba(0, 0, 0, 0.3); }
-  colorswatch overlay, colorswatch overlay:selected {
+    outline-color: rgba(0, 0, 0, 0.5);
     border: 1px solid rgba(0, 0, 0, 0.3); }
-    colorswatch overlay:hover, colorswatch overlay:selected:hover {
+    colorswatch.light:hover {
       border-color: rgba(0, 0, 0, 0.5); }
+    colorswatch.light:backdrop {
+      color: rgba(0, 0, 0, 0.3); }
+  colorswatch overlay, colorswatch overlay:selected {
+    background: none;
+    border: none; }
   colorswatch#add-color-button {
     border-style: solid;
     border-width: 1px;