[gtk+] Adwaita: colorchooser and color button style rewrite

[Lapo Calamandrei <lapo src gnome org>]

commit 5de71413fe5a24aedcd0e39dce84b9b3385ea593
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Fri Jan 8 16:31:30 2016 +0100

    Adwaita: colorchooser and color button style rewrite
    
    fixing https://bugzilla.gnome.org/show_bug.cgi?id=760169 in the
    process.

 gtk/theme/Adwaita/_common.scss           |  174 +++++++++++++-----------------
 gtk/theme/Adwaita/gtk-contained-dark.css |  128 +++++++++-------------
 gtk/theme/Adwaita/gtk-contained.css      |  128 +++++++++-------------
 3 files changed, 180 insertions(+), 250 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 82b2b0f..80ce5cf 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -758,14 +758,14 @@ modelbutton.flat arrow {
 }
 
 button.color {
-  padding: 5px; // Uniform padding on the GtkColorButton
-
-  > colorswatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets 
overridden by the colorchooser style
-    > overlay, & { border-radius: 0; }
-    box-shadow: inset 0 1px 1px transparentize(black, 0.9),
-                _widget_edge();
-    &:disabled,
-    &:backdrop { box-shadow: none; }
+  padding: 4px;
+  colorswatch:only-child {
+    &, overlay { border-radius: 0; }
+    @if $variant == 'light' {
+      box-shadow: 0 1px _text_shadow_color();
+      &:disabled,
+      &:backdrop { box-shadow: none; }
+    }
   }
 }
 
@@ -3166,117 +3166,91 @@ tooltip {
 
 colorswatch {
   // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
-  // is colorswatch overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
-  // is applied to the overlay box.
-
-  $_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
+  // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
+  // applied to the overlay box.
 
   $_colorswatch_radius: 5px;
-
-  box-shadow: $_colorswatch_shadow;
-
-  // take care of colorswatches on selected elements
-  :selected & {
-    box-shadow: none;
-    & overlay, & overlay:hover {
-      border-color: $selected_fg_color;
-    }
-  }
-
-  // we need to re-set the shadow here since it get axed by the previous bit
-  &:selected { box-shadow: $_colorswatch_shadow; }
+  $_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3),
+                                                        inset 0 3px 2px -2px transparentize(black, 0.5));
 
   // base color corners rounding
   // to avoid the artifacts caused by rounded corner anti-aliasing the base color
   // sports a bigger radius.
   // nth-child is needed by the custom color strip.
-  // The :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
-  // and GtkColorSwatch.overlay, I know it's weird, but this is gtk+, not a browser.
   &.top {
-    border-top-left-radius: $_colorswatch-radius + 1px;
-    border-top-right-radius: $_colorswatch-radius + 1px;
+    border-top-left-radius: $_colorswatch_radius + 0.5px;
+    border-top-right-radius: $_colorswatch_radius + 0.5px;
+    overlay {
+      border-top-left-radius: $_colorswatch_radius;
+      border-top-right-radius: $_colorswatch_radius;
+    }
   }
   &.bottom {
-    border-bottom-left-radius: $_colorswatch-radius + 1px;
-    border-bottom-right-radius: $_colorswatch-radius + 1px;
-  }
-  &.left, &:first-child:not(overlay):not(.top) {
-    border-top-left-radius: $_colorswatch-radius + 1px;
-    border-bottom-left-radius: $_colorswatch-radius + 1px;
-  }
-  &.right, &:last-child:not(overlay):not(.bottom) {
-    border-top-right-radius: $_colorswatch-radius + 1px;
-    border-bottom-right-radius: $_colorswatch-radius + 1px;
-  }
-  &:only-child:not(overlay) { border-radius: $_colorswatch-radius + 1px; }
-
-  // overlay corner rounding
-  &.top > overlay {
-    border-top-left-radius: $_colorswatch-radius;
-    border-top-right-radius: $_colorswatch-radius;
-  }
-  &.bottom > overlay {
-    border-bottom-left-radius: $_colorswatch-radius;
-    border-bottom-right-radius: $_colorswatch-radius;
-  }
-  &:first-child:not(.top) > overlay {
-    border-top-left-radius: $_colorswatch-radius;
-    border-bottom-left-radius: $_colorswatch-radius;
-  }
-  &:last-child:not(.bottom) > overlay {
-    border-top-right-radius: $_colorswatch-radius;
-    border-bottom-right-radius: $_colorswatch-radius;
-  }
-  &:only-child > overlay { border-radius: $_colorswatch-radius; }
-
-  // hover effect
-  &.activatable:hover,
-  &.activatable:hover:selected {
-    background-image: linear-gradient(135deg, transparentize(white, 0.3),
-                                              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));
-  }
-  &:backdrop,
-  &:backdrop:selected
-  &.dark:backdrop,
-  &.dark:backdrop:selected {
-    background-image: none;
-    box-shadow: none;
+    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
+    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+    overlay {
+      border-bottom-left-radius: $_colorswatch_radius;
+      border-bottom-right-radius: $_colorswatch_radius;
+    }
+  }
+  &.left, &:first-child:not(.top) {
+    border-top-left-radius: $_colorswatch_radius + 0.5px;
+    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
+    overlay {
+      border-top-left-radius: $_colorswatch_radius;
+      border-bottom-left-radius: $_colorswatch_radius;
+    }
+  }
+  &.right, &:last-child:not(.bottom) {
+    border-top-right-radius: $_colorswatch_radius + 0.5px;
+    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+    overlay {
+      border-top-right-radius: $_colorswatch_radius;
+      border-bottom-right-radius: $_colorswatch_radius;
+    }
   }
 
-  // indicator and keynav outline colors
-  &.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); }
+  &.dark overlay {
+    color: $selected_fg_color;
+    &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
+    &:backdrop { color: $backdrop_selected_fg_color; }
   }
-  &.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); }
+
+  &.light overlay {
+    color: $text_color;
+    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
+    &:backdrop { color: $backdrop_text_color; }
   }
 
-  // border color
-  & overlay,
-  & overlay:selected {
-    background: none;
-    border: none;
+  overlay {
+    box-shadow: $_colorswatch_overlay_shadow;
+    border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
+    &:hover { box-shadow: inset 0 1px transparentize(white, 0.7); }
+    &:backdrop, &:backdrop:hover {
+      border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
+      box-shadow: none;
+    }
   }
 
-  // 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
+    border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
+    &:only-child { border-radius: $_colorswatch_radius; }
+    overlay {
+      @include button(normal);
+      &:hover { @include button(hover); }
+      &:backdrop { @include button(backdrop); }
+    }
   }
+
+  &:disabled {
+    opacity: 0.5;
+    overlay {
+      border-color: transparentize(black, 0.4);
+      box-shadow: none;
+    }
+  }
+
+  row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
 }
 
 
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index f3680e7..977819f 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1259,17 +1259,9 @@ modelbutton.flat arrow {
 
 button.color, headerbar button.color.titlebutton,
 .titlebar button.color.titlebutton {
-  padding: 5px; }
-  button.color > colorswatch:first-child:last-child, headerbar button.color.titlebutton > 
colorswatch:first-child:last-child,
-  .titlebar button.color.titlebutton > colorswatch:first-child:last-child {
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0); }
-    button.color > colorswatch:first-child:last-child > overlay, button.color > 
colorswatch:first-child:last-child, headerbar button.color.titlebutton > colorswatch:first-child:last-child,
-    .titlebar button.color.titlebutton > colorswatch:first-child:last-child {
-      border-radius: 0; }
-    button.color > colorswatch:first-child:last-child:disabled, headerbar button.color.titlebutton > 
colorswatch:first-child:last-child:disabled,
-    .titlebar button.color.titlebutton > colorswatch:first-child:last-child:disabled, button.color > 
colorswatch:first-child:last-child:backdrop, headerbar button.color.titlebutton > 
colorswatch:first-child:last-child:backdrop,
-    .titlebar button.color.titlebutton > colorswatch:first-child:last-child:backdrop {
-      box-shadow: none; }
+  padding: 4px; }
+  button.color colorswatch:only-child, button.color colorswatch:only-child overlay {
+    border-radius: 0; }
 
 /*********
  * Links *
@@ -4385,71 +4377,55 @@ tooltip {
 /*****************
  * Color Chooser *
  *****************/
-colorswatch {
-  box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0); }
-  :selected colorswatch {
-    box-shadow: none; }
-    :selected colorswatch overlay, :selected colorswatch overlay:hover {
-      border-color: #ffffff; }
-  colorswatch:selected {
-    box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0); }
-  colorswatch.top {
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px; }
-  colorswatch.bottom {
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px; }
-  colorswatch.left, colorswatch:first-child:not(overlay):not(.top) {
-    border-top-left-radius: 6px;
-    border-bottom-left-radius: 6px; }
-  colorswatch.right, colorswatch:last-child:not(overlay):not(.bottom) {
-    border-top-right-radius: 6px;
-    border-bottom-right-radius: 6px; }
-  colorswatch:only-child:not(overlay) {
-    border-radius: 6px; }
-  colorswatch.top > overlay {
+colorswatch.top {
+  border-top-left-radius: 5.5px;
+  border-top-right-radius: 5.5px; }
+  colorswatch.top overlay {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px; }
-  colorswatch.bottom > overlay {
+colorswatch.bottom {
+  border-bottom-left-radius: 5.5px;
+  border-bottom-right-radius: 5.5px; }
+  colorswatch.bottom overlay {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px; }
-  colorswatch:first-child:not(.top) > overlay {
+colorswatch.left, colorswatch:first-child:not(.top) {
+  border-top-left-radius: 5.5px;
+  border-bottom-left-radius: 5.5px; }
+  colorswatch.left overlay, colorswatch:first-child:not(.top) overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px; }
-  colorswatch:last-child:not(.bottom) > overlay {
+colorswatch.right, colorswatch:last-child:not(.bottom) {
+  border-top-right-radius: 5.5px;
+  border-bottom-right-radius: 5.5px; }
+  colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px; }
-  colorswatch:only-child > overlay {
-    border-radius: 5px; }
-  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:backdrop, colorswatch:backdrop:selected
-  colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
-    background-image: none;
+colorswatch.dark overlay {
+  color: #ffffff; }
+  colorswatch.dark overlay:hover {
+    border-color: #1c1f1f; }
+  colorswatch.dark overlay:backdrop {
+    color: #ffffff; }
+colorswatch.light overlay {
+  color: white; }
+  colorswatch.light overlay:hover {
+    border-color: #1c1f1f; }
+  colorswatch.light overlay:backdrop {
+    color: #d5d5d5; }
+colorswatch overlay {
+  box-shadow: inset 0 3px 2px -2px rgba(0, 0, 0, 0.5);
+  border: 1px solid #1c1f1f; }
+  colorswatch overlay:hover {
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); }
+  colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover {
+    border-color: #1c1f1f;
     box-shadow: none; }
-  colorswatch.dark {
-    color: white;
-    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 {
-    color: black;
-    outline-color: rgba(0, 0, 0, 0.5);
-    border: 1px solid #1c1f1f; }
-    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;
+colorswatch#add-color-button {
+  border-radius: 5px 5px 0 0; }
+  colorswatch#add-color-button:only-child {
+    border-radius: 5px; }
+  colorswatch#add-color-button overlay {
     color: #eeeeec;
     outline-color: rgba(238, 238, 236, 0.3);
     border-color: #1c1f1f;
@@ -4457,7 +4433,7 @@ colorswatch {
     text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(238, 238, 236, 0); }
-    colorswatch#add-color-button:hover {
+    colorswatch#add-color-button overlay:hover {
       color: #eeeeec;
       outline-color: rgba(238, 238, 236, 0.3);
       border-color: #1c1f1f;
@@ -4471,20 +4447,20 @@ colorswatch {
       text-shadow: 0 -1px rgba(0, 0, 0, 0.76376);
       -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76376);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(238, 238, 236, 0); }
-    colorswatch#add-color-button:backdrop {
+    colorswatch#add-color-button overlay:backdrop {
       color: #949796;
       border-color: #1f2222;
       background-image: linear-gradient(to bottom, #393f3f);
       text-shadow: none;
       -gtk-icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); }
-    colorswatch#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;
-      -gtk-icon-shadow: none; }
+colorswatch:disabled {
+  opacity: 0.5; }
+  colorswatch:disabled overlay {
+    border-color: rgba(0, 0, 0, 0.6);
+    box-shadow: none; }
+row:selected colorswatch {
+  box-shadow: 0 0 0 2px #ffffff; }
 
 /********
  * Misc *
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 5e56c90..f6c3c05 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1259,16 +1259,12 @@ modelbutton.flat arrow {
 
 button.color, headerbar button.color.titlebutton,
 .titlebar button.color.titlebutton {
-  padding: 5px; }
-  button.color > colorswatch:first-child:last-child, headerbar button.color.titlebutton > 
colorswatch:first-child:last-child,
-  .titlebar button.color.titlebutton > colorswatch:first-child:last-child {
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0); }
-    button.color > colorswatch:first-child:last-child > overlay, button.color > 
colorswatch:first-child:last-child, headerbar button.color.titlebutton > colorswatch:first-child:last-child,
-    .titlebar button.color.titlebutton > colorswatch:first-child:last-child {
+  padding: 4px; }
+  button.color colorswatch:only-child {
+    box-shadow: 0 1px rgba(255, 255, 255, 0.76923); }
+    button.color colorswatch:only-child, button.color colorswatch:only-child overlay {
       border-radius: 0; }
-    button.color > colorswatch:first-child:last-child:disabled, headerbar button.color.titlebutton > 
colorswatch:first-child:last-child:disabled,
-    .titlebar button.color.titlebutton > colorswatch:first-child:last-child:disabled, button.color > 
colorswatch:first-child:last-child:backdrop, headerbar button.color.titlebutton > 
colorswatch:first-child:last-child:backdrop,
-    .titlebar button.color.titlebutton > colorswatch:first-child:last-child:backdrop {
+    button.color colorswatch:only-child:disabled, button.color colorswatch:only-child:backdrop {
       box-shadow: none; }
 
 /*********
@@ -4557,71 +4553,55 @@ tooltip {
 /*****************
  * Color Chooser *
  *****************/
-colorswatch {
-  box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0); }
-  :selected colorswatch {
-    box-shadow: none; }
-    :selected colorswatch overlay, :selected colorswatch overlay:hover {
-      border-color: #ffffff; }
-  colorswatch:selected {
-    box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0); }
-  colorswatch.top {
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px; }
-  colorswatch.bottom {
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px; }
-  colorswatch.left, colorswatch:first-child:not(overlay):not(.top) {
-    border-top-left-radius: 6px;
-    border-bottom-left-radius: 6px; }
-  colorswatch.right, colorswatch:last-child:not(overlay):not(.bottom) {
-    border-top-right-radius: 6px;
-    border-bottom-right-radius: 6px; }
-  colorswatch:only-child:not(overlay) {
-    border-radius: 6px; }
-  colorswatch.top > overlay {
+colorswatch.top {
+  border-top-left-radius: 5.5px;
+  border-top-right-radius: 5.5px; }
+  colorswatch.top overlay {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px; }
-  colorswatch.bottom > overlay {
+colorswatch.bottom {
+  border-bottom-left-radius: 5.5px;
+  border-bottom-right-radius: 5.5px; }
+  colorswatch.bottom overlay {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px; }
-  colorswatch:first-child:not(.top) > overlay {
+colorswatch.left, colorswatch:first-child:not(.top) {
+  border-top-left-radius: 5.5px;
+  border-bottom-left-radius: 5.5px; }
+  colorswatch.left overlay, colorswatch:first-child:not(.top) overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px; }
-  colorswatch:last-child:not(.bottom) > overlay {
+colorswatch.right, colorswatch:last-child:not(.bottom) {
+  border-top-right-radius: 5.5px;
+  border-bottom-right-radius: 5.5px; }
+  colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px; }
-  colorswatch:only-child > overlay {
-    border-radius: 5px; }
-  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:backdrop, colorswatch:backdrop:selected
-  colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
-    background-image: none;
+colorswatch.dark overlay {
+  color: #ffffff; }
+  colorswatch.dark overlay:hover {
+    border-color: rgba(0, 0, 0, 0.8); }
+  colorswatch.dark overlay:backdrop {
+    color: #ffffff; }
+colorswatch.light overlay {
+  color: black; }
+  colorswatch.light overlay:hover {
+    border-color: rgba(0, 0, 0, 0.5); }
+  colorswatch.light overlay:backdrop {
+    color: #333333; }
+colorswatch overlay {
+  box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.3); }
+  colorswatch overlay:hover {
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); }
+  colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover {
+    border-color: rgba(0, 0, 0, 0.3);
     box-shadow: none; }
-  colorswatch.dark {
-    color: white;
-    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 {
-    color: black;
-    outline-color: rgba(0, 0, 0, 0.5);
-    border: 1px solid rgba(0, 0, 0, 0.3); }
-    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;
+colorswatch#add-color-button {
+  border-radius: 5px 5px 0 0; }
+  colorswatch#add-color-button:only-child {
+    border-radius: 5px; }
+  colorswatch#add-color-button overlay {
     color: #2e3436;
     outline-color: rgba(46, 52, 54, 0.3);
     border-color: #9d9d99;
@@ -4629,7 +4609,7 @@ colorswatch {
     text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0); }
-    colorswatch#add-color-button:hover {
+    colorswatch#add-color-button overlay:hover {
       color: #2e3436;
       outline-color: rgba(46, 52, 54, 0.3);
       border-color: #9d9d99;
@@ -4643,20 +4623,20 @@ colorswatch {
       text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
       -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
       box-shadow: inset 0 1px white, 0 1px rgba(255, 255, 255, 0); }
-    colorswatch#add-color-button:backdrop {
+    colorswatch#add-color-button overlay:backdrop {
       color: #8b8e8f;
       border-color: #a5a5a1;
       background-image: linear-gradient(to bottom, #e8e8e7);
       text-shadow: none;
       -gtk-icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
-    colorswatch#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;
-      -gtk-icon-shadow: none; }
+colorswatch:disabled {
+  opacity: 0.5; }
+  colorswatch:disabled overlay {
+    border-color: rgba(0, 0, 0, 0.6);
+    box-shadow: none; }
+row:selected colorswatch {
+  box-shadow: 0 0 0 2px #ffffff; }
 
 /********
  * Misc *