From 56e798d1fe37c74d2f46b71d2ddc203ed5dc862b Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Sat, 18 May 2013 14:22:04 +0530
Subject: [PATCH] Better GTK 3.6 compatibility

---
 gtk-3.0/apps/granite-widgets.css |  36 +-
 gtk-3.0/gtk-widgets.css          | 647 +++++++++++++++++++++++--------
 2 files changed, 494 insertions(+), 189 deletions(-)

diff --git a/gtk-3.0/apps/granite-widgets.css b/gtk-3.0/apps/granite-widgets.css
index 507fe0a..8ccd7ad 100644
--- a/gtk-3.0/apps/granite-widgets.css
+++ b/gtk-3.0/apps/granite-widgets.css
@@ -68,10 +68,10 @@
 .content-view-window {
     border-width: 1px;
     border-style: solid;
-    border-color: shade(@theme_bg_color, 0.8);
+    border-color: shade(@theme_base_color, 0.8);
     border-radius: 2px;
-    background-color:@theme_bg_color;
-    color: @theme_fg_color;
+    background-color:@theme_base_color;
+    color: @theme_text_color;
 }
 
 .content-view,
@@ -92,37 +92,37 @@
 
 .content-view .button {
     border-style: solid;
-    border-color: shade(@theme_bg_color, 0.8);
+    border-color: shade(@theme_base_color, 0.8);
     border-radius: 2px;
-    background-color: shade(@theme_bg_color, 1.08);
+    background-color: shade(@theme_base_color, 1.08);
     background-image: none;
-    color: @theme_fg_color;
+    color: @theme_text_color;
 }
 
 .content-view .button:hover {
-    border-color: shade(@theme_bg_color, 0.7);
-    background-color: shade(@theme_bg_color, 1.10);
+    border-color: shade(@theme_base_color, 0.7);
+    background-color: shade(@theme_base_color, 1.10);
     background-image: none;
 }
 
 .content-view .button:active {
-    border-color: shade(@theme_bg_color, 0.8);
-    background-color: shade(@theme_bg_color, 0.95);
+    border-color: shade(@theme_base_color, 0.8);
+    background-color: shade(@theme_base_color, 0.95);
     background-image: none;
 }
 
 .content-view .button:active:hover {
-    border-color: shade(@theme_bg_color, 0.7);
-    color: shade(@theme_fg_color, 0.7);
+    border-color: shade(@theme_base_color, 0.7);
+    color: shade(@theme_text_color, 0.7);
 }
 
 .content-view .button:insensitive {
-    background-color: shade(@theme_bg_color, 0.9);
+    background-color: shade(@theme_base_color, 0.9);
     background-image: none;
 }
 
 .content-view .help_button * {
-    color: @theme_fg_color;
+    color: @theme_text_color;
 }   
 
 .content-view .toolbar {
@@ -131,8 +131,8 @@
     padding: 1px;
     border-width: 0 0 1px 0;
     border-style: solid;
-    border-color: shade(@theme_bg_color, 0.8);
-    background-color: @theme_bg_color;
+    border-color: shade(@theme_base_color, 0.8);
+    background-color: @theme_base_color;
     background-image: none;
 }
 
@@ -186,7 +186,7 @@ GraniteWidgetsStatusBar {
 
 /***********
  * popover *
- **********/
+ ***********/
 GraniteWidgetsPopOver {
     -GraniteWidgetsPopOver-arrow-width: 21;
     -GraniteWidgetsPopOver-arrow-height: 12;
@@ -357,7 +357,7 @@ GraniteWidgetsPopOver *.separator {
 
 /**********
  * notify *
- *********/
+ **********/
 .notify {
     border-width: 1px;
     border-style: solid;
diff --git a/gtk-3.0/gtk-widgets.css b/gtk-3.0/gtk-widgets.css
index ff1e1ba..b051b37 100644
--- a/gtk-3.0/gtk-widgets.css
+++ b/gtk-3.0/gtk-widgets.css
@@ -5,12 +5,9 @@
 * {
     engine: none;
 
-    border-width: 1px;
-
     background-clip: padding-box;
-    background-origin: border-box;
 
-    -GtkArrow-arrow-scaling: 0.6;
+    -GtkArrow-arrow-scaling: 0.5;
     -GtkButton-child-displacement-x: 0;
     -GtkButton-child-displacement-y: 0;
     -GtkButton-default-border: 0;
@@ -19,15 +16,11 @@
     -GtkButton-interior-focus: true;
     -GtkCheckButton-indicator-size: 16;
     -GtkCheckMenuItem-indicator-size: 14;
-    -GtkEntry-inner-border: 1;
-    -GtkEntry-progress-border: 0;
     -GtkExpander-expander-size: 8;
     -GtkHTML-link-color: @link_color;
     -GtkIMHtml-hyperlink-color: @link_color;
     -GtkMenu-horizontal-padding: 0;
     -GtkMenu-vertical-padding: 0;
-    -GtkMenuItem-arrow-scaling: 0.5;
-    -GtkMenuBar-internal-padding: 0;
     -GtkNotebook-initial-gap: 0;
     -GtkPaned-handle-size: 3;
     -GtkProgressBar-min-horizontal-bar-height: 12;
@@ -36,27 +29,20 @@
     -GtkRange-stepper-spacing: 0;
     -GtkRange-trough-border: 0;
     -GtkRange-trough-under-steppers: 1;
-    -GtkScrollbar-activate-slider: 1;
     -GtkScrollbar-has-backward-stepper: false;
     -GtkScrollbar-has-forward-stepper: false;
     -GtkScrollbar-min-slider-length: 100;
     -GtkScrolledWindow-scrollbar-spacing: 0;
     -GtkScrolledWindow-scrollbars-within-bevel: 1;
-    -GtkSeparatorMenuItem-horizontal-padding: 0;
     -GtkStatusbar-shadow-type: none;
     -GtkTextView-error-underline-color: @error_color;
-    -GtkToolbar-internal-padding: 0;
     -GtkToolButton-icon-spacing: 6;
     -GtkToolItemGroup-expander-size: 8;
     -GtkTreeView-expander-size: 8;
-    -GtkTreeView-vertical-separator: 0;
     -GtkWidget-focus-line-width: 1;
     -GtkWidget-focus-padding: 0;
     -GtkWidget-link-color: @link_color;
-    -GtkWidget-separator-height: 1;
-    -GtkWidget-separator-width: 1;
     -GtkWidget-visited-link-color: @link_color;
-    -GtkWidget-wide-separators: true;
     -GtkWindow-resize-grip-height: 0;
     -GtkWindow-resize-grip-width: 0;
     -WnckTasklist-fade-overlay-rect: 0;
@@ -69,31 +55,6 @@
 /***************
  * base states *
  ***************/
-GtkWindow {
-    color: @fg_color;
-}
-
-* {
-    /* inherit the color from parent by default */
-    color: inherit;
-    background-color: @bg_color;
-}
-
-*:selected,
-*:selected:focus {
-    background-color: @theme_selected_bg_color;
-    color: @theme_selected_fg_color;
-}
-
-*:active {
-    background-color: shade(@theme_bg_color, 0.85);
-}
-
-*:insensitive,
-*:insensitive:insensitive {
-    color: mix(@theme_fg_color, @theme_bg_color, 0.5);
-}
-
 .background {
     color: @theme_fg_color;
     background-color: @theme_bg_color;
@@ -112,6 +73,21 @@ GtkClutterOffscreen {
     color: @theme_fg_color;
 }
 
+*:selected,
+*:selected:focus {
+    background-color: @theme_selected_bg_color;
+    color: @theme_selected_fg_color;
+}
+
+*:active {
+    background-color: shade(@theme_bg_color, 0.85);
+}
+
+*:insensitive,
+*:insensitive:insensitive {
+    color: mix(@theme_fg_color, @theme_bg_color, 0.5);
+}
+
 .gtkstyle-fallback {
     background-color: @theme_bg_color;
     color: @theme_fg_color;
@@ -138,9 +114,18 @@ GtkClutterOffscreen {
 }
 
 /******************
- * common effects *
+ * visual effects *
  ******************/
-/* inset shadow */
+/* transitions */
+.entry {
+    transition: all 150ms ease-out;
+}
+
+.entry:focus {
+    transition: all 150ms ease-in;
+}
+
+/* inset shadows */
 .button:active,
 .primary-toolbar .button:active {
     box-shadow: inset 1px 0 alpha(@dark_shadow, 0.07),
@@ -162,28 +147,6 @@ GtkClutterOffscreen {
     box-shadow: none;
 }
 
-/* draw borders using box shadow */
-GtkScale.slider {
-    box-shadow: inset 1px 0 shade(@theme_bg_color, 0.8),
-                inset 0 1px shade(@theme_bg_color, 0.8),
-                inset -1px 0 shade(@theme_bg_color, 0.8),
-                inset 0 -1px shade(@theme_bg_color, 0.8);
-}
-
-GtkScale.slider:hover {
-    box-shadow: inset 1px 0 shade(@theme_bg_color, 0.7),
-                inset 0 1px shade(@theme_bg_color, 0.7),
-                inset -1px 0 shade(@theme_bg_color, 0.7),
-                inset 0 -1px shade(@theme_bg_color, 0.7);
-}
-
-GtkScale.slider:insensitive {
-    box-shadow: inset 1px 0 shade(@theme_bg_color, 0.9),
-                inset 0 1px shade(@theme_bg_color, 0.9),
-                inset -1px 0 shade(@theme_bg_color, 0.9),
-                inset 0 -1px shade(@theme_bg_color, 0.9);
-}
-
 /*************
  * assistant *
  *************/
@@ -212,6 +175,7 @@ GtkAssistant .sidebar {
 }
 
 .button {
+    border-width: 1px;
     border-style: solid;
     border-color: shade(@theme_bg_color, 0.8);
     border-radius: 2px;
@@ -283,32 +247,88 @@ GtkAssistant .sidebar {
     color: shade(@theme_selected_fg_color, 0.9);
 }
 
+/* linked buttons */
+.linked .button,
+.toolbar .button.raised.linked,
+.toolbar .raised.linked .button,
+.inline-toolbar.toolbar .button,
+.inline-toolbar.toolbar GtkToolButton > .button {
+    box-shadow: inset -1px 0 shade(@theme_bg_color, 0.9);
+}
+
+.linked .button:active,
+.toolbar .button.raised.linked:active,
+.toolbar .raised.linked .button:active,
+.inline-toolbar.toolbar .button:active,
+.inline-toolbar.toolbar GtkToolButton > .button:active {
+    box-shadow: inset -1px 0 shade(@theme_bg_color, 0.9);
+}
+
+.linked .button:insensitive,
+.toolbar .button.raised.linked:insensitive,
+.toolbar .raised.linked .button:insensitive,
+.inline-toolbar.toolbar .button:insensitive,
+.inline-toolbar.toolbar GtkToolButton > .button:insensitive {
+    box-shadow: inset -1px 0 shade(@theme_bg_color, 0.9);
+}
+
+/* remove box shadow from last-child and only-child */
+.linked .button:last-child,
+.toolbar .button.raised.linked:last-child,
+.toolbar .raised.linked .button:last-child,
+.inline-toolbar.toolbar .button:last-child,
+.inline-toolbar.toolbar GtkToolButton:last-child > .button,
+.linked .button:only-child,
+.toolbar .button.raised.linked:only-child,
+.toolbar .raised.linked .button:only-child,
+.inline-toolbar.toolbar .button:only-child,
+.inline-toolbar.toolbar GtkToolButton:only-child > .button,
+.linked .button:active:last-child,
+.toolbar .button:active.raised.linked:last-child,
+.toolbar .raised.linked .button:active:last-child,
+.inline-toolbar.toolbar .button:active:last-child,
+.inline-toolbar.toolbar GtkToolButton:last-child > .button:active,
+.linked .button:active:only-child,
+.toolbar .button:active.raised.linked:only-child,
+.toolbar .raised.linked .button:active:only-child,
+.inline-toolbar.toolbar .button:active:only-child,
+.inline-toolbar.toolbar GtkToolButton:only-child > .button:active,
+.linked .button:insensitive:last-child,
+.toolbar .button:insensitive.raised.linked:last-child,
+.toolbar .raised.linked .button:insensitive:last-child,
+.inline-toolbar.toolbar .button:insensitive:last-child,
+.inline-toolbar.toolbar GtkToolButton:last-child > .button:insensitive,
+.linked .button:insensitive:only-child,
+.toolbar .button:insensitive.raised.linked:only-child,
+.toolbar .raised.linked .button:insensitive:only-child,
+.inline-toolbar.toolbar .button:insensitive:only-child,
+.inline-toolbar.toolbar GtkToolButton:only-child > .button:insensitive {
+    box-shadow: none;
+}
+
 /* middle button */
 .linked .entry,
 .linked .button,
 .linked .button:active,
 .linked .button:active:hover,
-.linked .button:focus,
-.linked .button:focus:active,
 .linked .button:insensitive {
     border-width: 1px;
-    border-right-width: 0;
     border-radius: 0;
+    border-right-width: 0;
+    border-left-width: 0;
 }
 
-/* leftmost button */
+/*leftmost button */
 .linked .entry:first-child,
 .linked .button:first-child,
 .linked .button:active:first-child,
 .linked .button:active:hover:first-child,
-.linked .button:focus:first-child,
-.linked .button:focus:active:first-child,
 .linked .button:insensitive:first-child {
     border-width: 1px;
-    border-right-width: 0;
     border-radius: 2px;
-    border-top-right-radius: 0;
+    border-right-width: 0;
     border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
 }
 
 /* rightmost button */
@@ -316,11 +336,10 @@ GtkAssistant .sidebar {
 .linked .button:last-child,
 .linked .button:active:last-child,
 .linked .button:active:hover:last-child,
-.linked .button:focus:last-child,
-.linked .button:focus:active:last-child,
 .linked .button:insensitive:last-child {
     border-width: 1px;
     border-radius: 2px;
+    border-left-width: 0;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
 }
@@ -330,8 +349,6 @@ GtkAssistant .sidebar {
 .linked .button:only-child,
 .linked .button:active:only-child,
 .linked .button:active:hover:only-child,
-.linked .button:focus:only-child,
-.linked .button:focus:active:only-child,
 .linked .button:insensitive:only-child {
     border-width: 1px;
     border-radius: 2px;
@@ -342,39 +359,35 @@ GtkAssistant .sidebar {
 .linked.vertical .button,
 .linked.vertical .button:active,
 .linked.vertical .button:active:hover,
-.linked.vertical .button:focus,
-.linked.vertical .button:focus:active,
 .linked.vertical .button:insensitive {
     border-width: 1px;
-    border-bottom-width: 0;
     border-radius: 0;
+    border-top-width: 0;
+    border-bottom-width: 0;
 }
 
-/* leftmost button (vertical) */
+/* top button (vertical) */
 .linked.vertical .entry:first-child,
 .linked.vertical .button:first-child,
 .linked.vertical .button:active:first-child,
 .linked.vertical .button:active:hover:first-child,
-.linked.vertical .button:focus:first-child,
-.linked.vertical .button:focus:active:first-child,
 .linked.vertical .button:insensitive:first-child {
     border-width: 1px;
-    border-bottom-width: 0;
     border-radius: 2px;
+    border-bottom-width: 0;
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
 }
 
-/* rightmost button (vertical) */
+/* bottom button (vertical) */
 .linked.vertical .entry:last-child,
 .linked.vertical .button:last-child,
 .linked.vertical .button:active:last-child,
 .linked.vertical .button:active:hover:last-child,
-.linked.vertical .button:focus:last-child,
-.linked.vertical .button:focus:active:last-child,
 .linked.vertical .button:insensitive:last-child {
     border-width: 1px;
     border-radius: 2px;
+    border-top-width: 0;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 }
@@ -384,13 +397,70 @@ GtkAssistant .sidebar {
 .linked.vertical .button:only-child,
 .linked.vertical .button:active:only-child,
 .linked.vertical .button:active:hover:only-child,
-.linked.vertical .button:focus:only-child,
-.linked.vertical .button:focus:active:only-child,
 .linked.vertical .button:insensitive:only-child {
     border-width: 1px;
     border-radius: 2px;
 }
 
+/* linked button shadows (vertical) */
+.linked.vertical .button,
+.toolbar.vertical .button.raised.linked,
+.toolbar.vertical .raised.linked .button,
+.inline-toolbar.toolbar.vertical .button,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button {
+    box-shadow: inset 0 -1px shade(@theme_bg_color, 0.9);
+}
+
+.linked.vertical .button:active,
+.toolbar.vertical .button.raised.linked:active,
+.toolbar.vertical .raised.linked .button:active,
+.inline-toolbar.toolbar.vertical .button:active,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:active {
+    box-shadow: inset 0 -1px shade(@theme_bg_color, 0.9);
+}
+
+.linked.vertical .button:insensitive,
+.toolbar.vertical .button.raised.linked:insensitive,
+.toolbar.vertical .raised.linked .button:insensitive,
+.inline-toolbar.toolbar.vertical .button:insensitive,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:insensitive {
+    box-shadow: inset 0 -1px shade(@theme_bg_color, 0.9);
+}
+
+/* remove box shadow from last-child and only-child */
+.linked.vertical .button:last-child,
+.toolbar.vertical .button.raised.linked:last-child,
+.toolbar.vertical .raised.linked .button:last-child,
+.inline-toolbar.toolbar.vertical .button:last-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button,
+.linked.vertical .button:only-child,
+.toolbar.vertical .button.raised.linked:only-child,
+.toolbar.vertical .raised.linked .button:only-child,
+.inline-toolbar.toolbar.vertical .button:only-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button,
+.linked.vertical .button:active:last-child,
+.toolbar.vertical .button:active.raised.linked:last-child,
+.toolbar.vertical .raised.linked .button:active:last-child,
+.inline-toolbar.toolbar.vertical .button:active:last-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:active,
+.linked.vertical .button:active:only-child,
+.toolbar.vertical .button:active.raised.linked:only-child,
+.toolbar.vertical .raised.linked .button:active:only-child,
+.inline-toolbar.toolbar.vertical .button:active:only-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:active,
+.linked.vertical .button:insensitive:last-child,
+.toolbar.vertical .button:insensitive.raised.linked:last-child,
+.toolbar.vertical .raised.linked .button:insensitive:last-child,
+.inline-toolbar.toolbar.vertical .button:insensitive:last-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:insensitive,
+.linked.vertical .button:insensitive:only-child,
+.toolbar.vertical .button:insensitive.raised.linked:only-child,
+.toolbar.vertical .raised.linked .button:insensitive:only-child,
+.inline-toolbar.toolbar.vertical .button:insensitive:only-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:insensitive {
+    box-shadow: none;
+}
+
 /****************
  * cell and row *
  ****************/
@@ -442,15 +512,23 @@ column-header .button:active {
     border-radius: 0;
 }
 
-column-header .button {
-    border-color: shade(@theme_base_color, 0.8);
-    background-color: shade(@theme_base_color, 0.95);
+column-header .button,
+column-header .button:active,
+column-header .button:focus,
+column-header .button:active:focus {
+    border-color: shade(@theme_base_color, 0.9);
+    border-bottom-color: shade(@theme_base_color, 0.8);
+    background-color: shade(@theme_base_color, 0.97);
     background-image: none;
 }
 
-column-header .button:hover {
-    border-color: shade(@theme_base_color, 0.7);
-    background-color: shade(@theme_base_color, 0.97);
+column-header .button:hover,
+column-header .button:active:hover,
+column-header .button:hover:focus,
+column-header .button:active:hover:focus {
+    border-color: shade(@theme_base_color, 0.9);
+    border-bottom-color: shade(@theme_base_color, 0.8);
+    background-color: shade(@theme_base_color, 0.99);
     background-image: none;
 }
 
@@ -596,6 +674,7 @@ GtkComboBox.combobox-entry .button:insensitive {
  *********/
 .entry {
     padding: 4px 3px;
+    border-width: 1px;
     border-style: solid;
     border-color: shade(@theme_bg_color, 0.8);
     border-radius: 2px;
@@ -644,6 +723,7 @@ GtkComboBox.combobox-entry .button:insensitive {
  * frame *
  *********/
 .frame {
+    border-width: 1px;
     border-style: solid;
     border-color: shade(@theme_bg_color, 0.8);
     border-radius: 0;
@@ -824,6 +904,10 @@ GtkInfoBar {
     background-color: transparent;
 }
 
+.arrow {
+    color: alpha(@theme_fg_color, 0.7);
+}
+
 /********
  * menu *
  ********/
@@ -838,8 +922,8 @@ GtkComboBox .menu {
 .toolbar .primary-toolbar .menu,
 .menu {
     padding: 0;
-    border-width: 0;
     border-radius: 0;
+    border-style: none;
     background-color: @menu_bg_color;
     color: @menu_fg_color;
 }
@@ -872,8 +956,8 @@ GtkComboBox .menu {
 .menubar.menuitem,
 .menubar .menuitem {
     padding: 3px 5px;
-    border-style: solid;
     border-width: 1px;
+    border-style: solid;
     border-color: transparent;
     background-color: @menubar_bg_color;
     background-image: none;
@@ -906,13 +990,15 @@ GtkTreeMenu .menuitem * {
 .menuitem,
 .menu .menuitem {
     padding: 3px;
-    border-style: solid;
     border-width: 1px;
+    border-style: solid;
     border-color: transparent;
     border-radius: 0;
     background-color: @menu_bg_color;
     background-image: none;
     color: @menu_fg_color;
+
+    -GtkMenuItem-arrow-scaling: 0.5;
 }
 
 .menu .menuitem:active,
@@ -945,6 +1031,10 @@ GtkTreeMenu .menuitem * {
     background-image: none;
 }
 
+.menuitem.arrow {
+    color: alpha(@menu_fg_color, 0.6);
+}
+
 .menuitem.check:active,
 .menuitem.radio:active {
     border-style: none;
@@ -990,11 +1080,13 @@ GtkTreeMenu .menuitem * {
  ************/
 .notebook {
     padding: 0;
+    border-width: 1px;
     border-style: solid;
     border-color: shade(@theme_bg_color, 0.8);
     border-radius: 2px;
     background-color: shade(@theme_bg_color, 1.08);
     background-image: none;
+    background-clip: border-box;
 }
 
 .notebook tab {
@@ -1062,7 +1154,6 @@ GtkTreeMenu .menuitem * {
 /*************************
  * progressbar and scale *
  *************************/
-GtkScale,
 GtkProgressBar {
     padding: 0;
     border-width: 1px;
@@ -1184,43 +1275,48 @@ GtkLevelBar.vertical {
     background-image: none;
 }
 
-GtkScale {
+.scale {
+    padding: 0;
+    border-width: 1px;
+    border-radius: 2px;
+
     -GtkRange-slider-width: 15;
     -GtkRange-trough-border: 1;
     -GtkScale-slider-length: 15;
 }
 
-GtkScale.vertical {
-    -GtkScale-slider-length: 15;
-}
-
-GtkScale.slider {
-    /* we will draw the border using box shadow for now */
+.scale.slider {
     border-radius: 7px;
     background-color: shade(@theme_bg_color, 1.08);
     background-image: none;
+    /* we will draw the border using box shadow for now */
+    box-shadow: inset 1px 0 shade(@theme_bg_color, 0.8),
+                inset 0 1px shade(@theme_bg_color, 0.8),
+                inset -1px 0 shade(@theme_bg_color, 0.8),
+                inset 0 -1px shade(@theme_bg_color, 0.8);
 }
 
-GtkScale.slider:insensitive {
+.scale.slider:hover {
+    box-shadow: inset 1px 0 shade(@theme_bg_color, 0.7),
+                inset 0 1px shade(@theme_bg_color, 0.7),
+                inset -1px 0 shade(@theme_bg_color, 0.7),
+                inset 0 -1px shade(@theme_bg_color, 0.7);
+}
+
+.scale.slider:insensitive {
     background-color: shade(@theme_bg_color, 0.9);
     background-image: none;
+    box-shadow: inset 1px 0 shade(@theme_bg_color, 0.85),
+                inset 0 1px shade(@theme_bg_color, 0.85),
+                inset -1px 0 shade(@theme_bg_color, 0.85),
+                inset 0 -1px shade(@theme_bg_color, 0.85);
 }
 
-GtkScale.slider.vertical {
-    background-color: shade(@theme_bg_color, 1.08);
-    background-image: none;
-}
-
-GtkScale.slider.vertical:insensitive {
-    background-color: shade(@theme_bg_color, 0.9);
-    background-image: none;
-}
-
-GtkScale.mark {
+.scale.mark {
     border-color: shade(@theme_bg_color, 0.8);
 }
 
-GtkScale.trough {
+.scale.trough {
     margin: 6px 0;
     border-color: shade(@theme_bg_color, 0.8);
     border-radius: 2px;
@@ -1228,12 +1324,8 @@ GtkScale.trough {
     background-image: none;
 }
 
-GtkScale.trough.vertical {
+.scale.trough.vertical {
     margin: 0 6px;
-    border-color: shade(@theme_bg_color, 0.8);
-    border-radius: 2px;
-    background-color: shade(@theme_bg_color, 1.08);
-    background-image: none;
 }
 
 .menubar .menuitem .scale.highlight.left,
@@ -1254,16 +1346,9 @@ GtkScale.trough.vertical {
     background-image: none;
 }
 
-GtkScale.trough:insensitive,
+.scale.trough:insensitive,
 .scale.highlight.left:insensitive {
-    border-color: shade(@theme_bg_color, 0.9);
-    background-color: shade(@theme_bg_color, 0.9);
-    background-image: none;
-}
-
-GtkScale.trough.vertical:insensitive,
-.scale.highlight.bottom:insensitive {
-    border-color: shade(@theme_bg_color, 0.9);
+    border-color: shade(@theme_bg_color, 0.85);
     background-color: shade(@theme_bg_color, 0.9);
     background-image: none;
 }
@@ -1272,6 +1357,7 @@ GtkScale.trough.vertical:insensitive,
  * scrollbar *
  *************/
 .scrollbar {
+    border-width: 1px;
     border-style: solid;
     padding: 0;
 }
@@ -1288,7 +1374,6 @@ GtkScale.trough.vertical:insensitive,
 .scrollbar.button:active,
 .scrollbar.button:active:hover {
     border-width: 0;
-    border-color: transparent;
     border-radius: 0;
     background-color: transparent;
     background-image: none;
@@ -1338,6 +1423,7 @@ OsScrollbar:insensitive {
  * scrolled window *
  *******************/
 GtkScrolledWindow.frame {
+    border-width: 1px;
     border-style: solid;
     border-color: shade(@theme_bg_color, 0.8);
     border-radius: 0;
@@ -1355,6 +1441,7 @@ GtkScrolledWindow GtkViewport.frame {
 .sidebar.view.separator,
 .view.separator,
 .separator {
+    border-width: 1px;
     border-style: solid;
     border-color: shade(@theme_bg_color, 0.9);
     color: shade(@theme_bg_color, 0.9);
@@ -1362,7 +1449,7 @@ GtkScrolledWindow GtkViewport.frame {
 
 .button .separator,
 .button.separator {
-    border-color: shade(@theme_bg_color, 0.9);
+    border-color: shade(@theme_bg_color, 0.95);
 }
 
 .button .separator:insensitive,
@@ -1370,11 +1457,17 @@ GtkScrolledWindow GtkViewport.frame {
     border-color: shade(@theme_bg_color, 0.85);
 }
 
+.primary-toolbar GtkSeparatorToolItem,
+.primary-toolbar .separator,
+.primary-toolbar .separator:insensitive {
+    border-color: shade(@toolbar_bg_color, 0.95);
+}
+
 .toolbar .button .separator,
 .toolbar .button.separator,
 .primary-toolbar .button .separator,
 .primary-toolbar .button.separator {
-    border-color: shade(@toolbar_bg_color, 0.9);
+    border-color: shade(@toolbar_bg_color, 0.95);
 }
 
 .toolbar .button .separator:insensitive,
@@ -1388,18 +1481,13 @@ GtkScrolledWindow GtkViewport.frame {
     -GtkMenuItem-horizontal-padding: 0;
     -GtkWidget-separator-height: 1;
 
-    padding: 0;
-
-    border-image: -gtk-gradient(linear,
-                     left top, left bottom,
-                     from (shade(@menu_bg_color, 0.9)),
-                     to (shade(@menu_bg_color, 0.9))) 1;
-
-    border-color: shade(@menu_bg_color, 0.9);
+    border-style: none;
     color: shade(@menu_bg_color, 0.9);
 }
 
 GtkComboBox .separator {
+    border-style: none;
+
     /* always disable separators */
     -GtkWidget-wide-separators: true;
     -GtkWidget-horizontal-separator: 0;
@@ -1423,31 +1511,81 @@ GtkComboBox .separator {
 /**************
  * spinbutton *
  **************/
-.spinbutton.button {
-    border-color: shade(@theme_bg_color, 0.8);
-}
-
-.spinbutton.button:insensitive {
-    border-color: shade(@theme_bg_color, 0.9);
-    color: mix(@theme_fg_color, @theme_bg_color, 0.5);
-}
-
-.spinbutton.button {
+.spinbutton .button {
+    color: mix(@theme_text_color, @theme_base_color, 0.4);
+    padding: 2px 4px;
     border-width: 0;
-    border-left-width: 1px;
     border-radius: 0;
+    border-style: none;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: inset 1px 0 shade(@theme_base_color, 0.9);
 }
 
-.spinbutton.button:first-child {
-    border-radius: 2px;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+.spinbutton .button:insensitive {
+    color: mix(@theme_text_color, @theme_base_color, 0.7);
+    box-shadow: inset 1px 0 shade(@theme_bg_color, 0.95);
 }
 
-.spinbutton.button:last-child {
+.spinbutton .button:active,
+.spinbutton .button:hover {
+    color: @theme_fg_color;
+}
+
+.spinbutton .button:first-child {
+    border-radius: 2px 0 0 2px;
+    box-shadow: none;
+}
+
+.spinbutton .button:last-child {
+    border-radius: 0 2px 2px 0;
+}
+
+.spinbutton .button:dir(rtl) {
+    box-shadow: inset -1px 0 shade(@theme_base_color, 0.9);
+}
+
+.spinbutton.vertical .button {
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade(@theme_bg_color, 0.8);
     border-radius: 2px;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+    background-color: shade(@theme_bg_color, 1.08);
+    background-image: none;
+    color: @theme_fg_color;
+    box-shadow: none;
+}
+
+.spinbutton.vertical .button:hover {
+    border-color: shade(@theme_bg_color, 0.7);
+    background-color: shade(@theme_bg_color, 1.10);
+    background-image: none;
+    color: shade(@theme_fg_color, 0.7);
+}
+
+.spinbutton.vertical .button:active {
+    border-color: shade(@theme_bg_color, 0.8);
+    background-color: shade(@theme_bg_color, 0.95);
+    background-image: none;
+}
+
+.spinbutton.vertical .button:active:hover {
+    border-color: shade(@theme_bg_color, 0.7);
+    color: shade(@theme_fg_color, 0.7);
+}
+
+.spinbutton.vertical .button:focus,
+.spinbutton.vertical .button:hover:focus,
+.spinbutton.vertical .button:active:focus,
+.spinbutton.vertical .button:active:hover:focus {
+    border-color: shade(@theme_bg_color, 0.7);
+    color: shade(@theme_fg_color, 0.7);
+}
+
+.spinbutton.vertical .button:insensitive {
+    border-color: shade(@theme_bg_color, 0.85);
+    background-color: shade(@theme_bg_color, 0.9);
+    background-image: none;
 }
 
 .spinbutton.vertical .button:first-child {
@@ -1629,6 +1767,7 @@ GtkSwitch {
 }
 
 GtkSwitch.slider {
+    border-width: 1px;
     border-style: solid;
     border-color: shade(@theme_bg_color, 0.8);
     background-color: shade(@theme_bg_color, 1.08);
@@ -1670,6 +1809,108 @@ GtkTextView {
     color: @theme_text_color;
 }
 
+/*****************
+ * color chooser *
+ *****************/
+GtkColorSwatch,
+GtkColorSwatch:selected {
+    border-width: 1px;
+    border-style: solid;
+    border-color: alpha(black, 0.1);
+    border-radius: 1px;
+    background-color: transparent;
+    background-clip: border-box;
+}
+
+GtkColorSwatch:hover,
+GtkColorSwatch:selected:hover {
+    border-color: alpha(black, 0.3);
+}
+
+GtkColorSwatch.color-dark:hover {
+}
+
+GtkColorSwatch.color-light:hover {
+}
+
+GtkColorSwatch.color-light:selected:hover,
+GtkColorSwatch.color-dark:selected:hover {
+    background-image: none;
+}
+
+GtkColorSwatch.left,
+GtkColorSwatch:first-child {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+}
+
+GtkColorSwatch.right,
+GtkColorSwatch:last-child {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+
+GtkColorSwatch:only-child {
+    border-radius: 2px;
+}
+
+GtkColorSwatch.top {
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+}
+
+GtkColorSwatch.bottom {
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+
+GtkColorChooserWidget #add-color-button {
+    background-clip: padding-box;
+    border-color: alpha(black, 0.1);
+    background-color: shade(@theme_bg_color, 0.95);
+    color: @theme_fg_color;
+}
+
+GtkColorChooserWidget #add-color-button:hover {
+    border-color: alpha(black, 0.3);
+    background-color: shade(@theme_bg_color, 0.90);
+    color: @theme_fg_color;
+}
+
+.color-active-badge,
+.color-active-badge:selected {
+    border-width: 1px;
+    border-style: solid;
+    border-width: 2px;
+    background-color: transparent;
+}
+
+.color-active-badge.color-light,
+.color-active-badge.color-light:hover {
+    border-color: alpha(black, 0.3);
+    color: alpha(black, 0.3);
+}
+
+.color-active-badge.color-dark,
+.color-active-badge.color-dark:hover {
+    border-color: alpha(white, 0.3);
+    color: alpha(white, 0.3);
+}
+
+GtkColorEditor GtkColorSwatch {
+    border-radius: 2px;
+}
+
+GtkColorEditor GtkColorSwatch.color-dark:hover,
+GtkColorEditor GtkColorSwatch.color-light:hover {
+    background-image: none;
+    border-color: alpha(black, 0.3);
+}
+
+GtkColorButton.button {
+    padding: 2px;
+}
+
 /***********
  * toolbar *
  ***********/
@@ -1772,12 +2013,6 @@ GtkTextView {
     border-color: shade(@toolbar_bg_color, 0.7);
 }
 
-.primary-toolbar GtkSeparatorToolItem,
-.primary-toolbar .separator,
-.primary-toolbar .separator:insensitive {
-    border-color: shade(@toolbar_bg_color, 0.9);
-}
-
 /* inline-toolbar */
 .inline-toolbar.toolbar {
     -GtkToolbar-button-relief: normal;
@@ -1841,6 +2076,70 @@ GtkTextView {
     background-image: none;
 }
 
+/* linked buttons */
+.primary-toolbar .button.raised.linked,
+.primary-toolbar .raised.linked .button,
+.inline-toolbar.toolbar .button,
+.inline-toolbar.toolbar GtkToolButton .button {
+    box-shadow: inset -1px 0 shade(@theme_bg_color, 0.9);
+}
+
+.primary-toolbar .button.raised.linked:active,
+.primary-toolbar .button.raised.linked:focus,
+.primary-toolbar .button.raised.linked:focus:active,
+.primary-toolbar .raised.linked .button:active,
+.primary-toolbar .raised.linked .button:focus,
+.primary-toolbar .raised.linked .button:focus:active,
+.inline-toolbar.toolbar .button:active,
+.inline-toolbar.toolbar .button:focus,
+.inline-toolbar.toolbar .button:focus:active,
+.inline-toolbar.toolbar GtkToolButton .button:active,
+.inline-toolbar.toolbar GtkToolButton .button:focus,
+.inline-toolbar.toolbar GtkToolButton .button:focus:active {
+    box-shadow: inset -1px 0 shade(@theme_bg_color, 0.9);
+}
+
+.primary-toolbar .button.raised.linked:insensitive,
+.primary-toolbar .raised.linked .button:insensitive,
+.inline-toolbar.toolbar .button:insensitive,
+.inline-toolbar.toolbar GtkToolButton .button:insensitive {
+    box-shadow: inset -1px 0 shade(@theme_bg_color, 0.9);
+}
+
+/* remove box shadow from last-child and only-child */
+.linked .button:last-child,
+.toolbar .button.raised.linked:last-child,
+.toolbar .raised.linked .button:last-child,
+.inline-toolbar.toolbar .button:last-child,
+.inline-toolbar.toolbar GtkToolButton:last-child > .button,
+.linked .button:only-child,
+.toolbar .button.raised.linked:only-child,
+.toolbar .raised.linked .button:only-child,
+.inline-toolbar.toolbar .button:only-child,
+.inline-toolbar.toolbar GtkToolButton:only-child > .button,
+.linked .button:active:last-child,
+.toolbar .button:active.raised.linked:last-child,
+.toolbar .raised.linked .button:active:last-child,
+.inline-toolbar.toolbar .button:active:last-child,
+.inline-toolbar.toolbar GtkToolButton:last-child > .button:active,
+.linked .button:active:only-child,
+.toolbar .button:active.raised.linked:only-child,
+.toolbar .raised.linked .button:active:only-child,
+.inline-toolbar.toolbar .button:active:only-child,
+.inline-toolbar.toolbar GtkToolButton:only-child > .button:active,
+.linked .button:insensitive:last-child,
+.toolbar .button:insensitive.raised.linked:last-child,
+.toolbar .raised.linked .button:insensitive:last-child,
+.inline-toolbar.toolbar .button:insensitive:last-child,
+.inline-toolbar.toolbar GtkToolButton:last-child > .button:insensitive,
+.linked .button:insensitive:only-child,
+.toolbar .button:insensitive.raised.linked:only-child,
+.toolbar .raised.linked .button:insensitive:only-child,
+.inline-toolbar.toolbar .button:insensitive:only-child,
+.inline-toolbar.toolbar GtkToolButton:only-child > .button:insensitive {
+    box-shadow: none;
+}
+
 /* middle button */
 .primary-toolbar .button.raised.linked,
 .primary-toolbar .button.raised.linked:active,
@@ -1863,8 +2162,9 @@ GtkTextView {
 .inline-toolbar.toolbar GtkToolButton .button:focus:active,
 .inline-toolbar.toolbar GtkToolButton .button:insensitive {
     border-width: 1px;
-    border-right-width: 0;
     border-radius: 0;
+    border-right-width: 0;
+    border-left-width: 0;
 }
 
 /* leftmost button */
@@ -1889,10 +2189,10 @@ GtkTextView {
 .inline-toolbar.toolbar GtkToolButton:first-child .button:focus:active,
 .inline-toolbar.toolbar GtkToolButton:first-child .button:insensitive {
     border-width: 1px;
-    border-right-width: 0;
     border-radius: 2px;
-    border-top-right-radius: 0;
+    border-right-width: 0;
     border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
 }
 
 /* rightmost button */
@@ -1918,11 +2218,12 @@ GtkTextView {
 .inline-toolbar.toolbar GtkToolButton:last-child .button:insensitive {
     border-width: 1px;
     border-radius: 2px;
+    border-left-width: 0;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
 }
 
-/* single button */
+/* linked single button */
 .primary-toolbar.toolbar .button:only-child,
 .primary-toolbar.toolbar .button:active:only-child,
 .primary-toolbar.toolbar .button:focus:only-child,
@@ -1968,6 +2269,10 @@ GtkTextView {
  * treeview *
  ************/
 GtkTreeView {
+    -GtkTreeView-vertical-separator: 0;
+
+    -GtkWidget-focus-line-width: 1;
+    -GtkWidget-focus-padding: 1;
 }
 
 GtkTreeView.dnd {