Merge lp:~elementary-design/egtk/dark-theme into lp:~elementary-design/egtk/trunk

[Danielle Foré]

implement dark theming for gtk 3

This branch implements the long-awaited dark-theme

[Danielle Foré (danrabbit)]

Okay, we're getting very close!

There seems to be a regression in the metacity theme with highlights at the top of maximized windows.

In GThumb, you can see an example of a group of .linked buttons in the headerbar. I think those aren't being styled properly.

sidebar selection goes blue sometimes

At the top of modal sheets, it's white. If we want to make the change to having sheets have rounded corners like modals used to, I'm okay with that.

The highlight for the "pressed" image in metacity is too harsh. We should either edit the image or do this highlight programically

It looks like there is a very bright border around insensitive gtk scale (as seen in Totem)

I'm wondering if we want insensitive symbolic icons to be black instead of grey?

we might want to revisit some of the :focus styles

review: Needs Fixing

[Danielle Foré (danrabbit)]

Also, :insensitive buttons aren't very sexy

[Danielle Foré (danrabbit)]

Highlights on bottom toolbars are a bit too harsh

[Danielle Foré (danrabbit)]

Okay, so it looks like we still have the following:

* Fix :focus styles
* Fix metacity maximized window highlight regression
* Fix borders for modal sheets
* Fix highlights on Pane handles
* Fix separators on static notebooks

review: Needs Fixing

[Cassidy James Blaede (cassidyjames)]

Granite about dialogs look really janky with the dark theme. See: http://i.imgur.com/Zu9QqJ8.png

review: Needs Fixing

[Danielle Foré (danrabbit)]

Okay, I'm going to go ahead and merge this. It's not that much more broken than trunk is with Gtk 3.12. It'll be easier to continue development with this merged.

review: Approve

[RabbitBot (rabbitbot-a)]

There are additional revisions which have not been approved in review. Please seek review and approval of these new revisions.

=== modified file 'gtk-3.0/assets/check.svg'
--- gtk-3.0/assets/check.svg	2013-08-28 23:13:41 +0000
+++ gtk-3.0/assets/check.svg	2014-02-09 08:49:06 +0000
@@ -15,7 +15,7 @@
    height="16"
    id="svg7539"
    inkscape:version="0.48.4 r9939"
-   sodipodi:docname="check-off.svg">
+   sodipodi:docname="check.svg">
   <sodipodi:namedview
      pagecolor="#ffffff"
      bordercolor="#666666"
@@ -26,14 +26,14 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:window-width="1280"
-     inkscape:window-height="758"
+     inkscape:window-height="747"
      id="namedview33"
      showgrid="false"
-     inkscape:zoom="16.58825"
-     inkscape:cx="-0.87417935"
-     inkscape:cy="8.500206"
+     inkscape:zoom="33.5625"
+     inkscape:cx="8"
+     inkscape:cy="8"
      inkscape:window-x="0"
-     inkscape:window-y="22"
+     inkscape:window-y="28"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg7539" />
   <defs
@@ -86,7 +86,7 @@
        id="linearGradient3012"
        xlink:href="#linearGradient4751-5-4-1-2-9-1-2-3-365-589-154-4-7-64-3-8-6-5-3-1"
        gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.8047894,0,0,0.60165743,-516.81815,-380.08054)" />
+       gradientTransform="matrix(0.74288252,0,0,0.55537609,-477.67845,-350.22801)" />
     <linearGradient
        x1="257.57822"
        y1="289.32889"
@@ -198,12 +198,12 @@
     </rdf:RDF>
   </metadata>
   <rect
-     width="13"
-     height="13"
-     rx="2"
-     ry="2"
-     x="-14.499832"
-     y="1.4998016"
+     width="12"
+     height="12"
+     rx="1.5"
+     ry="1.5"
+     x="-14"
+     y="2"
      transform="scale(-1,1)"
      id="rect6132-8-2-8-0-0-0-10-0-6-0-6-2-0-5-7-3-3-7-8-4-0-2-5-3-6-7-8"
      style="opacity:0.98999999;color:#000000;fill:url(#linearGradient3012);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999982;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

=== added file 'gtk-3.0/granite-widgets-dark.css'
--- gtk-3.0/granite-widgets-dark.css	1970-01-01 00:00:00 +0000
+++ gtk-3.0/granite-widgets-dark.css	2014-02-09 08:49:06 +0000
@@ -0,0 +1,91 @@
+/* Copyright 2011-2013 elementary LLC.
+*
+* This file is part of the elementary GTK theme.
+*
+* The elementary GTK theme is free software: you can redistribute it
+* and/or modify it under the terms of the GNU General Public License as
+* published by the Free Software Foundation, either version 3 of the
+* License, or (at your option) any later version.
+*
+* The elementary GTK theme is distributed in the hope that it will be
+* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
+* Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along
+* with the elementary GTK theme. If not, see http://www.gnu.org/licenses/.
+*/
+
+/*************
+ * Statusbar *
+ ************/
+ GraniteWidgetsStatusBar GtkLabel,
+ GraniteWidgetsStatusBar GtkImage{
+    
+    color: shade (@text_color, 0.90);   
+
+}
+
+
+GraniteWidgetsStatusBar {
+    padding: 3px;
+    
+    text-shadow: 0 1px alpha (#000, 0.4);
+    icon-shadow: 0 1px alpha (#000, 0.4);
+
+    background-image: linear-gradient(to bottom,
+                                  @titlebar_color,
+                                  shade (@titlebar_color, 0.88)
+                                  );
+
+    border-style:solid;
+    border-width: 1px 0 0 0;
+    border-top-color: shade (@bg_color, 0.52);
+
+    box-shadow: inset 0 1px 0 0 alpha (#fff, 0.1);
+}
+
+/***********
+ * Popover *
+ **********/
+
+GraniteWidgetsPopOver {
+
+    -GraniteWidgetsPopOver-arrow-width: 21;
+    -GraniteWidgetsPopOver-arrow-height: 10;
+    -GraniteWidgetsPopOver-border-radius: 5px;
+    -GraniteWidgetsPopOver-border-width: 1;
+    -GraniteWidgetsPopOver-shadow-size: 12;
+    
+    border: 1px solid alpha (#000, 0.3);
+    margin: 0;
+}
+
+.popover_bg {
+    background-color: transparent;
+
+    background-image: linear-gradient(to bottom,
+                                  alpha (@titlebar_color, 0.97),
+                                  alpha (@titlebar_color, 0.97) 80%,
+                                  alpha (@titlebar_color, 0.97)
+                                  );
+
+    border: 1px solid alpha (#000, 0.3);
+}
+
+GraniteWidgetsPopOver .sidebar.view,
+GraniteWidgetsPopOver * {
+    background-color: transparent;
+}
+
+GraniteWidgetsPopOver .button {
+    background-image: none;
+    background-color: transparent;    
+}
+
+GraniteWidgetsPopOver .button:active,
+GraniteWidgetsPopOver .button:hover:active {
+    background-image: none;
+    background-color: alpha (#000, 0.05);
+    border-color: shade (@base_color, 0.74);
+}

=== modified file 'gtk-3.0/granite-widgets.css'
--- gtk-3.0/granite-widgets.css	2014-01-19 19:05:11 +0000
+++ gtk-3.0/granite-widgets.css	2014-02-09 08:49:06 +0000
@@ -35,7 +35,7 @@
     border-width: 1px 0 0 0;
     border-top-color: shade (@bg_color, 0.52);
 
-    box-shadow: inset 0 1px 0 0 alpha (#fff, 0.20);
+    box-shadow: inset 0 1px 0 0 alpha (#fff, 0.05);
 }
 
 /***********

=== added file 'gtk-3.0/gtk-dark.css'
--- gtk-3.0/gtk-dark.css	1970-01-01 00:00:00 +0000
+++ gtk-3.0/gtk-dark.css	2014-02-09 08:49:06 +0000
@@ -0,0 +1,73 @@
+/* Copyright 2011-2013 elementary LLC.
+*
+* This file is part of the elementary GTK theme.
+*
+* The elementary GTK theme is free software: you can redistribute it
+* and/or modify it under the terms of the GNU General Public License as
+* published by the Free Software Foundation, either version 3 of the
+* License, or (at your option) any later version.
+*
+* The elementary GTK theme is distributed in the hope that it will be
+* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
+* Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along
+* with the elementary GTK theme. If not, see http://www.gnu.org/licenses/.
+*/
+
+/* Default color scheme */
+@define-color base_color #262a2e;
+@define-color bg_color shade (@base_color, 0.96);
+@define-color fg_color #2e3436;
+@define-color insensitive_color #999;
+@define-color inset_dark_color alpha (#000, 0.06);
+@define-color inset_dark_color_backdrop alpha (#000, 0.03);
+@define-color menu_separator alpha (#000, 0.15);
+@define-color progress_row_trough_color #DEDEDE;
+@define-color selected_bg_color #3d9bda;
+@define-color selected_fg_color #FFF;
+@define-color text_color #919e9b;
+@define-color titlebar_color #262a2e;
+@define-color tooltip_bg_color #000;
+@define-color tooltip_fg_color #FFF;
+
+@define-color internal_element_color mix(@text_color, @base_color, 0.4);
+@define-color internal_element_prelight mix(@text_color, @base_color, 0.2);
+@define-color internal_element_insensitive mix(@internal_element_color, @base_color, 0.7);
+
+@define-color view_symbolic_color shade(@internal_element_color, 0.80);
+
+/* Colormap actually used by the theme, to be overridden in other css files */
+@define-color theme_base_color @base_color;
+@define-color theme_text_color @text_color;
+@define-color theme_bg_color @bg_color;
+@define-color theme_fg_color @fg_color;
+@define-color theme_tooltip_bg_color @tooltip_bg_color;
+@define-color theme_tooltip_fg_color @tooltip_fg_color;
+@define-color theme_selected_bg_color @selected_bg_color;
+@define-color theme_selected_fg_color @selected_fg_color;
+
+@define-color link_color #08C;
+@define-color frame_color #8a9580;
+@define-color inactive_frame_color #c7ccc1;
+@define-color warning_color #f57900;
+@define-color error_color #cc0000;
+@define-color success_color #4e9a06;
+@define-color metacity_color #262a2e;
+
+@define-color info_fg_color rgb (0, 136, 204);
+@define-color info_bg_color rgb (252, 252, 189);
+@define-color warning_fg_color rgb (173, 120, 41);
+@define-color warning_bg_color rgb (250, 173, 61);
+@define-color question_fg_color rgb (97, 122, 214);
+@define-color question_bg_color rgb (138, 173, 212);
+@define-color error_fg_color rgb (166, 38, 38);
+@define-color error_bg_color rgb (237, 54, 54);
+
+
+@define-color insensitive_bg_color #f4f4f2;
+@define-color insensitive_fg_color #a7aba7;
+
+@import url("gtk-widgets.css");
+@import url("gtk-widgets-dark.css");
\ No newline at end of file

=== added file 'gtk-3.0/gtk-widgets-dark.css'
--- gtk-3.0/gtk-widgets-dark.css	1970-01-01 00:00:00 +0000
+++ gtk-3.0/gtk-widgets-dark.css	2014-02-09 08:49:06 +0000
@@ -0,0 +1,2079 @@
+
+/* Copyright 2011-2013 elementary LLC.
+*
+* This file is part of the elementary GTK theme.
+*
+* The elementary GTK theme is free software: you can redistribute it
+* and/or modify it under the terms of the GNU General Public License as
+* published by the Free Software Foundation, either version 3 of the
+* License, or (at your option) any later version.
+*
+* The elementary GTK theme is distributed in the hope that it will be
+* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
+* Public License for more details.
+* You should have received a copy of the GNU General Public License along
+* with the elementary GTK theme. If not, see http://www.gnu.org/licenses/.
+*/
+
+/***************
+ * Base States *
+ **************/
+
+.background {
+    color: @text_color;
+}
+
+*:selected,
+*:selected:focus {
+    /* FIXME: We should set the bg color in each widget */
+    background-color: alpha (@selected_bg_color, 0.9);
+    color: @selected_fg_color;
+}
+
+.gtkstyle-fallback {
+    background-color: @bg_color;
+    color: @fg_color;
+}
+
+/************
+ * Tooltips *
+ ************/
+ 
+/* FIXME: find out class name for granite overlay
+           or have it changed to .tooltip in granite */
+.tooltip,
+.files-overlay-bar {
+    background-color: alpha (black, 0.7);
+    border-radius: 3px;
+    border: 0;
+    padding: 3px 6px;
+    margin: 3px;
+    text-shadow: 0 1px 2px alpha (#000, 0.6);
+}
+
+.tooltip GtkLabel,
+.files-overlay-bar GtkLabel {
+    color: white;
+    text-shadow: 0 1px 2px alpha (#000, 0.6);
+}
+
+/*****************
+ * Miscellaneous *
+ ****************/
+
+.view.rubberband,
+.rubberband {
+    background-color: alpha (@selected_bg_color, 0.35);
+    border: 1px solid @selected_bg_color;
+}
+
+.dnd {
+    background-color: alpha (@selected_bg_color, 0.4);
+    background-image: none;
+
+    border: 1px solid @selected_bg_color;
+    border-radius: 3px;
+
+    margin: 3px;
+}
+
+/**************
+ * Separators *
+ *************/
+ 
+.separator {
+    color: @menu_separator;
+}
+
+
+.pane-separator,
+.pane-separator:prelight,
+.pane-separator:selected {
+    border: 1px solid shade (@base_color, 0.55);
+    border-width: 0 1px;
+
+    background-image: url("assets/pane-handle.svg"),
+                        linear-gradient(to right,
+                                  @base_color,
+                                  shade (@base_color, 0.88)
+                                  );
+    background-position: 50%;
+    background-repeat: no-repeat;
+}
+
+.pane-separator.vertical,
+.pane-separator.vertical:prelight,
+.pane-separator.vertical:selected {
+    border-width: 1px 0;
+
+    background-image: url("assets/pane-handle.svg"),
+                        linear-gradient(to bottom,
+                                  @base_color,
+                                  shade (@base_color, 0.88)
+                                  );
+}
+
+/*************
+* Text Entry *
+*************/
+
+.entry {
+    background-image: linear-gradient(to bottom,
+                                  shade (@titlebar_color, 0.93),
+                                  shade (@titlebar_color, 0.97)
+                                  );
+
+    border: 1px solid alpha (#000, 0.22);
+    border-radius: 2.5px;
+
+    box-shadow: inset 0 1px 0 0 alpha (@inset_dark_color, 0.7),
+                inset 0 0 0 1px alpha (@inset_dark_color, 0.3),
+                0 1px 0 1px alpha (#fff, 0.01);
+                
+    color: @text_color;
+
+    icon-shadow: 0 1px alpha (#000, 0.4);
+    text-shadow: 0 1px alpha (#000, 0.4);
+
+    padding: 4px;
+
+    transition: all 200ms ease-out;
+}
+
+
+.header-bar .entry,
+.toolbar .entry {
+    background-image: linear-gradient(to bottom,
+                                  alpha (#000, 0.10),
+                                  transparent 5px
+                                  ),
+                        linear-gradient(to bottom,
+                                  shade (@titlebar_color, 0.90),
+                                  @titlebar_color
+                                  );
+                                  
+    border-color: alpha (#000, 0.47);
+    box-shadow: inset 0 0 0 1px @inset_dark_color,
+                0 1px 0 1px alpha (#fff, 0.05);
+}
+
+.header-bar .entry:backdrop,
+.toolbar .entry:backdrop {
+    background-image: linear-gradient(to bottom,
+                                  alpha (#000, 0.05),
+                                  transparent 5px
+                                  ),
+                        linear-gradient(to bottom,
+                                  shade (@titlebar_color, 0.93),
+                                  shade (@titlebar_color, 0.94)
+                                  );
+
+    border: 1px solid alpha (#000, 0.47);
+    border-radius: 2.5px;
+
+    box-shadow: inset 0 1px 0 0 alpha (@inset_dark_color, 0.7),
+                inset 0 0 0 1px alpha (@inset_dark_color, 0.3),
+                0 1px 0 1px alpha (#fff, 0.05);
+                
+    color: @insensitive_fg_color;
+
+    icon-shadow: 0 1px alpha (#000, 0.4);
+    text-shadow: 0 1px alpha (#000, 0.4);
+}
+
+.entry:focus {
+    border-color: alpha (@selected_bg_color, 0.80);
+    box-shadow: inset 0 0 0 1px alpha (@selected_bg_color, 0.23),
+                0 1px 0 1px alpha (#fff, 0.05);
+
+    transition: all 200ms ease-in;
+}
+
+.entry.progressbar,
+.entry.progressbar:focus {
+    background-image: linear-gradient(to bottom,
+                                  shade (@selected_bg_color, 1.23),
+                                  shade (@selected_bg_color, 1.37)
+                                  );
+    background-size: auto;
+
+    border-color: @selected_bg_color;
+    
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.entry:insensitive {
+    background-image: linear-gradient(to bottom,
+                                  alpha (#000, 0.05),
+                                  transparent 5px
+                                  );
+}
+
+.header-bar .entry:insensitive,
+.toolbar .entry:insensitive {
+    border-color: alpha (#000, 0.25);
+    box-shadow: inset 0 0 0 1px @inset_dark_color,
+                0 1px 0 1px alpha (#fff, 0.05);
+}
+
+.header-bar .entry:insensitive:backdrop,
+.toolbar .entry:insensitive:backdrop {
+    border-color: alpha (#000, 0.20);
+    box-shadow: inset 0 0 0 1px @inset_dark_color_backdrop,
+                0 1px 0 1px alpha (#fff, 0.05);
+}
+
+ /*******************
+ * Symbolic images *
+ *******************/
+.image {
+    color: @internal_element_color;
+}
+
+.image:hover {
+    color: @internal_element_prelight;
+}
+
+.image:selected,
+.image:selected:hover {
+    color: @selected_fg_color;
+}
+
+.view.image,
+.view.image:hover {
+    color: @view_symbolic_color;
+}
+
+.view.image:selected,
+.view.image:selected:hover {
+    color: @selected_fg_color;
+}
+
+/****************
+ * Progress bar *
+ ****************/
+
+GtkProgressBar {
+    border-radius: 12px;
+    padding: 1px;
+}
+
+GtkProgressBar.progressbar {
+    background-image: linear-gradient(to bottom,
+                                  shade (@base_color, 0.88),
+                                  @base_color
+                                  );
+
+    border-style: none;
+    box-shadow: inset 0 0 0 1px alpha (#000, 0.1);
+}
+
+GtkProgressBar.trough {
+    border: 1px solid alpha (#000, 0.35);
+
+    background-image: linear-gradient(to bottom,
+                                  alpha (#000, 0.15),
+                                  alpha (#000, 0.07)
+                                  );
+
+    box-shadow: inset 0 0 0 1px alpha (#000, 0.03),
+                0 1px 0 1px alpha (#fff, 0.30);
+}
+
+/**********************************
+ * Progress bar in a Tree or Cell *
+ *********************************/
+
+.progressbar row,
+.progressbar row:hover {
+    color: @selected_fg_color;
+    text-shadow: 0 1px alpha (#000, 0.3);
+    icon-shadow: 0 1px alpha (#000, 0.3);
+
+    background-image: linear-gradient(to left top,
+                                  alpha (#fff, 0.10),
+                                  alpha (#fff, 0.10) 25%,
+                                  transparent 25%,
+                                  transparent 50%,
+                                  alpha (#fff, 0.10) 50%,
+                                  alpha (#fff, 0.10) 75%,
+                                  transparent 75%,
+                                  transparent
+                                  ),
+                        linear-gradient(to bottom,
+                                  shade (@selected_bg_color, 1.30),
+                                  shade (@selected_bg_color, 1.20) 50%,
+                                  shade (@selected_bg_color, 1.08) 60%,
+                                  shade (@selected_bg_color, 1.08) 70%,
+                                  shade (@selected_bg_color, 1.30)
+                                  );
+
+    background-size: 24px 24px, auto;
+
+    border-style: solid;
+    border-width: 1px;
+
+    border-image: linear-gradient(to bottom,
+                                  shade (@selected_bg_color, 1.05),
+                                  shade (@selected_bg_color, 0.88)
+                                  ) 1 1 1 1;
+
+    box-shadow: inset 0 1px 0 0 alpha (#fff, 0.50),
+                inset 0 -1px 0 0 alpha (#fff, 0.25);
+}
+
+.progressbar row:backdrop,
+.progressbar row:backdrop:hover,
+.progressbar row:selected:backdrop,
+.progressbar row:selected:backdrop:hover {
+    background-image: linear-gradient(to left top,
+                                  alpha (#fff, 0.10),
+                                  alpha (#fff, 0.10) 25%,
+                                  transparent 25%,
+                                  transparent 50%,
+                                  alpha (#fff, 0.10) 50%,
+                                  alpha (#fff, 0.10) 75%,
+                                  transparent 75%,
+                                  transparent
+                                  ),
+                        linear-gradient(to bottom,
+                                  @progress_row_trough_color,
+                                  shade (@progress_row_trough_color, 0.90) 50%,
+                                  shade (@progress_row_trough_color, 0.78) 60%,
+                                  shade (@progress_row_trough_color, 0.78) 70%,
+                                  @progress_row_trough_color
+                                  );
+
+    border-image: linear-gradient(to bottom,
+                                  shade (@progress_row_trough_color, 0.80),
+                                  shade (@progress_row_trough_color, 0.63)
+                                  ) 1 1 1 1;
+}
+
+.progressbar row:selected,
+.progressbar row:selected:focused {
+    border-image: linear-gradient(to bottom,
+                                  shade (@selected_bg_color, 0.87),
+                                  shade (@selected_bg_color, 0.80)
+                                  ) 1 1 1 1;
+}
+
+.trough row,
+.trough row:hover,
+.trough row:selected:backdrop,
+.trough row:selected:backdrop:hover  {
+
+    padding: 0;
+
+    border-style: solid;
+    border-width: 1px;
+
+    background-image: linear-gradient(to bottom,
+                                  shade (@progress_row_trough_color, 1.10),
+                                  shade (@progress_row_trough_color, 1.05) 50%,
+                                  shade (@progress_row_trough_color, 0.93) 60%,
+                                  shade (@progress_row_trough_color, 0.93) 70%,
+                                  shade (@progress_row_trough_color, 1.10)
+                                  );
+
+    border-image: linear-gradient(to bottom,
+                                  shade (@progress_row_trough_color, 0.78),
+                                  shade (@progress_row_trough_color, 0.70)
+                                  ) 1 1 1 1;
+
+    box-shadow: inset 0 0 0 1px alpha (#fff, 0.20);
+}
+
+.trough row:selected,
+.trough row:selected:focused  {
+    color: @text_color;
+
+    border-image: linear-gradient(to bottom,
+                                  shade (@selected_bg_color, 0.87),
+                                  shade (@selected_bg_color, 0.80)
+                                  ) 1 1 1 1;
+
+    text-shadow: 0 1px alpha (#fff, 0.4);
+    icon-shadow: 0 1px alpha (#fff, 0.4);
+}
+
+/********
+* Scale *
+********/
+
+.scale {
+    -GtkScale-slider-length: 16;
+    -GtkRange-slider-width: 16;
+    -GtkRange-trough-border: 0;
+}
+
+.scale.slider {
+    border: 1px solid alpha (#000, 0.25);
+    border-radius: 10px;
+    
+    background-image: linear-gradient(to bottom,
+                                  shade (@bg_color, 1.10),
+                                  shade (@bg_color, 0.88)
+                                  );
+                                  
+    box-shadow: inset 0 0 0 1px alpha (#fff, 0.01),
+                inset 0 1px 0 0 alpha (#fff, 0.10),
+                inset 0 -1px 0 0 alpha (#fff, 0.03),
+                0 1px 2px alpha (#000, 0.25);
+}
+
+.scale.slider:focus {
+    border: 1px solid alpha (@selected_bg_color, 0.9);
+
+    box-shadow: inset 0 0 0 1px alpha (#fff, 0.10),
+                inset 0 1px 0 0 alpha (#fff, 0.90),
+                inset 0 -1px 0 0 alpha (#fff, 0.30),
+                0 1px 2px alpha (@selected_bg_color, 0.95);
+}
+
+.scale.slider:backdrop {
+    background-image: linear-gradient(to bottom,
+                                  shade (@bg_color, 1.05),
+                                  shade (@bg_color, 0.95)
+                                  );
+                                  
+    border-color: alpha (#000, 0.15);
+    
+    box-shadow: inset 0 0 0 1px alpha (#fff, 0.10),
+                inset 0 1px 0 0 alpha (#fff, 0.90),
+                inset 0 -1px 0 0 alpha (#fff, 0.30),
+                0 1px 1px alpha (#000, 0.1);
+}
+
+.header-bar .scale.slider,
+.scale.slider:insensitive {
+    background-image: none;
+    border: none;
+    box-shadow: none;
+}
+
+.scale.trough {
+    margin: 6px 0 5px 0;
+
+    border: 1px solid alpha (#000, 0.35);
+    border-radius: 12px;
+
+    background-image: linear-gradient(to bottom,
+                                  alpha (#000, 0.15),
+                                  alpha (#000, 0.07)
+                                  );
+
+    box-shadow: inset 0 0 0 1px alpha (#000, 0.03),
+                0 1px 0 1px alpha (#fff, 0.1);
+}
+
+.header-bar .scale.trough {
+    border-radius: 0 12px 12px 0;
+    border-width: 1px 1px 1px 0;
+}
+
+.scale.trough:insensitive {
+    background-color: shade (@theme_bg_color, 1.25);
+    border-color: alpha (#000, 0.35);
+    border-radius: 0 12px 12px 0;
+    border-width: 1px 1px 1px 0;
+}
+
+.scale.trough.vertical {
+    margin: 0 8px;
+
+    background-image: linear-gradient(to right,
+                                  alpha (#000, 0.15),
+                                  alpha (#000, 0.07)
+                                  );
+}
+
+.scale.trough.vertical:insensitive {
+    background-image: linear-gradient(to right,
+                                  alpha (#000, 0.10),
+                                  alpha (#000, 0.02)
+                                  );
+}
+
+.scale.mark {
+    background-color: alpha (#000, 0.40);
+}
+
+.scale.highlight.left {
+    border: 1px solid alpha (#000, 0.50);
+    border-radius: 12px 0 0 12px;
+
+    background-image: linear-gradient(to bottom,
+                                  alpha (#000, 0.40),
+                                  alpha (#000, 0.30)
+                                  );
+
+    box-shadow: inset 0 0 0 1px alpha (#000, 0.05),
+                0 1px 0 1px alpha (#fff, 0.1);
+}
+
+.scale.highlight.left:insensitive {
+    border: 1px solid alpha (#000, 0.40);
+    
+    background-image: linear-gradient(to bottom,
+                                  alpha (#000, 0.30),
+                                  alpha (#000, 0.20)
+                                  );
+}
+
+/*********
+* Frames *
+*********/
+
+.frame {
+    border: 1px solid alpha (#000, 0.30);
+    color: lighter (@fg_color);
+}
+
+GtkScrolledWindow.frame {
+    border: 1px solid alpha (#000, 0.30);
+}
+
+/* avoid borders when a viewport is
+ * packed into a ScrolledWindow or Pane */
+GtkScrolledWindow GtkViewport.frame,
+GtkPaned .frame {
+    border: none;
+}
+
+/**********
+* Buttons *
+**********/
+
+.button,
+.button.menuitem.menubar,
+GtkColorButton.button,
+GtkComboBox.combobox-entry .button {
+    padding: 2px 3px;
+}
+
+.button {
+    text-shadow: 0 1px alpha (#000, 0.4);
+    icon-shadow: 0 1px alpha (#000, 0.4);
+
+    background-image: linear-gradient(to bottom,
+                                  transparent,
+                                  transparent 50%,
+                                  alpha (#000, 0.04)
+                                  );
+                                  
+    border: 1px solid alpha (#000, 0.5);
+    border-radius: 2.5px;
+
+    box-shadow: inset 0 0 0 1px alpha (#fff, 0.05),
+                inset 0 1px 0 0 alpha (#fff, 0.1),
+                inset 0 -1px 0 0 alpha (#000, 0.15),
+                0 1px 0 1px alpha (#fff, 0.1);
+
+    color: @text_color;
+}
+.header-bar .button.image-button .linked, 
+.header-bar .button.image-button, 
+.header-bar .button,
+.toolbar .button {
+     background-color: @transparent; 
+    background-image: linear-gradient(to bottom,
+                                  shade (@titlebar_color, 1.1),
+                                  shade (@titlebar_color, 0.7)
+                                  );   
+
+    box-shadow: inset 0 0 1px 1px alpha (#fff, 0.05);
+                
+    border: 1px solid alpha (#000, 0.22);
+    padding: 3px;
+}
+
+.button:hover {
+    color:@text_color;
+}
+
+.button:insensitive {
+    background-image: none;
+    background-color: transparent;
+    border-color: alpha (#000, 0.20);
+}
+
+.toolbar .button:insensitive {
+    background-image: linear-gradient(to bottom,
+                                  alpha (#fff, 0.05),
+                                  alpha (#000, 0.05)
+                                  );
+
+    border-color: alpha (#000, 0.20);
+}
+
+.button:focus {
+    color:@text_color;
+
+    border-color: @selected_bg_color;
+
+    box-shadow: inset 0 0 0 1px alpha (#fff, 0.05),
+                inset 0 1px 0 0 alpha (#fff, 0.45),
+                inset 0 -1px 0 0 alpha (#fff, 0.15),
+                0 1px 0 1px alpha (@selected_bg_color, 0.25);
+}
+
+.button:active,
+.button:hover:active,
+.button:focus:active {
+   background-color: alpha (#000, 0.10);  
+    background-image: linear-gradient(to bottom,
+                                  alpha (@titlebar_color, 0.10),
+                                 alpha (@titlebar_color, 0.7)
+                                  );    
+
+    box-shadow: inset 0 0 0 1px alpha (#000, 0.05);
+                
+    border: 1px solid alpha (#000, 0.22);
+    padding: 2px 3px;
+}
+
+.toolbar .button:active,
+.toolbar .button:hover:active,
+.toolbar .button:focus:active {
+    background-color: alpha (#000, 0.10);  
+    background-image: linear-gradient(to bottom,
+                                  alpha (@titlebar_color, 0.10),
+                                 alpha (@titlebar_color, 0.7)
+                                  );    
+
+    box-shadow: inset 0 0 0 1px alpha (#000, 0.05);
+                
+    border: 1px solid alpha (#000, 0.22);
+    padding: 3px;
+}
+
+.button:active:insensitive {
+    background-image: linear-gradient(to bottom,
+                                  shade (@bg_color, 0.85),
+                                  shade (@bg_color, 0.94) 20%,
+                                  @bg_color
+                                  );
+
+    box-shadow: inset 0 0 0 1px alpha (#000, 0.05),
+                0 1px 0 1px alpha (#fff, 0.30);
+
+}
+
+/*************************** 
+* Secondary Toolbar Button *
+***************************/
+
+.secondary-toolbar.toolbar .button {
+    padding: 0 3px 0 3px;
+}
+
+.secondary-toolbar.toolbar .button:hover {
+    padding: 0 3px 0 3px;
+
+    color: shade (@selected_bg_color, 0.65);
+
+    border-color: transparent;
+    background-image: none;
+    background-color: transparent;
+    box-shadow: none;
+}
+
+.secondary-toolbar.toolbar .button:active,
+.secondary-toolbar.toolbar .button:hover:active {
+    background-image: none;
+    background-color: alpha (#000, 0.10);
+        
+    box-shadow: inset 0 0 0 1px alpha (#000, 0.05),
+        inset 0 1px 0 0 alpha (#000, 0.25),
+        inset 0 -1px 0 0 alpha (#fff, 0.4);
+        
+    padding: 0 3px 0 3px;
+}
+
+/**************
+* Help Button *
+**************/
+
+.help_button {
+    border-radius: 12px;
+}
+
+/*****************
+ * GtkSpinButton *
+ *****************/
+
+.spinbutton .button {
+    color: @internal_element_color;
+    padding: 2px 6px;
+    border-width: 0;
+    border-radius: 0;
+    border-style: none;
+    border-image: none;
+    box-shadow: inset 1px 0 alpha (#000, 0.10);
+
+    background-color: transparent;
+    background-image: none;
+}
+
+.spinbutton .button:insensitive,
+.spinbutton .button:focus:insensitive {
+    background-color: alpha (#000, 0.02);
+    background-image: none;
+    color: @insensitive_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 alpha (#000, 0.10);
+}
+
+/*********
+* Linked *
+*********/
+
+.linked .entry {
+    box-shadow: inset -1px 0 @inset_dark_color;
+}
+
+.linked .entry:focus {
+    box-shadow: inset 1px 0 @inset_dark_color,
+                inset -1px 0 @inset_dark_color,
+                inset 1px 2px alpha(@selected_bg_color, 0.1),
+                inset 1px 1px alpha(@selected_bg_color, 0.1),
+                inset -1px -1px alpha(@selected_bg_color, 0.2);
+
+}
+
+.linked .entry:focus:first-child {
+    box-shadow: inset -1px 0 @inset_dark_color,
+                inset 1px 2px alpha(@selected_bg_color, 0.1),
+                inset 1px 1px alpha(@selected_bg_color, 0.1),
+                inset -1px -1px alpha(@selected_bg_color, 0.2);
+
+}
+
+.linked .entry:focus:last-child {
+    box-shadow: inset 1px 0 @inset_dark_color,
+                inset 1px 2px alpha(@selected_bg_color, 0.1),
+                inset 1px 1px alpha(@selected_bg_color, 0.1),
+                inset -1px -1px alpha(@selected_bg_color, 0.2);
+
+}
+
+/* Middle button */
+.linked .entry,
+.linked .button,
+.linked .button:active,
+.linked .button:active:hover,
+.linked .button:insensitive {
+    border-right-width: 0;
+    border-radius: 0;
+}
+
+/* Leftmost button */
+.linked .entry:first-child,
+.linked .button:first-child,
+.linked .button:active:first-child,
+.linked .button:active:hover:first-child,
+.linked .button:insensitive:first-child {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 2.5px;
+    border-top-left-radius: 2.5px;
+}
+
+/* Rightmost button */
+.linked .entry:last-child,
+.linked .button:last-child,
+.linked .button:active:last-child,
+.linked .button:active:hover:last-child,
+.linked .button:insensitive:last-child {
+    border-right-width: 1px;
+    border-bottom-right-radius: 2.5px;
+    border-top-right-radius: 2.5px;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+
+/* Linked single button */
+.linked .entry:only-child,
+.linked .button:only-child,
+.linked .button:active:only-child,
+.linked .button:active:hover:only-child,
+.linked .button:insensitive:only-child {
+    border-right-width: 1px;
+    border-left-width: 1px;
+    border-radius: 2.5px;
+}
+
+/* Middle button (vertical) */
+.linked.vertical .entry,
+.linked.vertical .button,
+.linked.vertical .button:active,
+.linked.vertical .button:active:hover,
+.linked.vertical .button:insensitive {
+    border-bottom-width: 0;
+    border-radius: 0;
+}
+
+/* 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:insensitive:first-child {
+    border-radius: 2.5px 2.5px 0 0;
+}
+
+/* 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:insensitive:last-child {
+    border-bottom-width: 1px;
+    border-radius: 0 0 2.5px 2.5px;
+}
+
+/* Linked single button (vertical) */
+.linked.vertical .entry:only-child,
+.linked.vertical .button:only-child,
+.linked.vertical .button:active:only-child,
+.linked.vertical .button:active:hover:only-child,
+.linked.vertical .button:insensitive:only-child {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+    border-radius: 2.5px;
+}
+
+/********************
+* Notebook and Tabs *
+********************/
+
+.dynamic-notebook {
+    /* FIXME: should really use border */
+    background-image: linear-gradient(to bottom,
+                                  shade (@titlebar_color, 0.76),
+                                  shade (@titlebar_color, 0.83) 17%,
+                                  shade (@titlebar_color, 0.90) 93%,
+                                  shade (@titlebar_color, 0.10)
+                                  );
+}
+
+.dynamic-notebook GtkLabel:insensitive,
+.dynamic-notebook .image:insensitive {
+   color: shade (@text_color, 0.65);
+}
+
+.dynamic-notebook .notebook {
+    border-width: 0;
+
+    -GtkNotebook-tab-overlap: 1px;
+    -GtkNotebook-initial-gap: 10px;
+}
+
+.dynamic-notebook .notebook tab {
+    padding: 3px;
+
+    border-radius: 0;
+
+    background-image: none;
+    background-color: transparent;
+
+    border-width: 0 1px 0 0;
+
+    border-image: linear-gradient(to bottom,
+                                  transparent,
+                                  alpha (#000, 0.20)
+                                  ) 0 1 0 0;
+}
+.dynamic-notebook .notebook tab GtkLabel {
+    color: shade (@text_color, 0.90);
+}
+
+.dynamic-notebook .notebook tab GtkImage {
+    color: shade (@text_color, 0.90);
+}
+
+.dynamic-notebook .notebook tab:nth-child(first) {
+    border-width: 0 1px 0 1px;
+    border-image: linear-gradient(to bottom,
+                                  transparent,
+                                  alpha (#000, 0.20)
+                                  ) 0 1 0 1;
+}
+
+.dynamic-notebook .notebook tab:active {
+    background-image: linear-gradient(to bottom,
+                                  shade (@titlebar_color, 1.04),
+                                  @titlebar_color
+                                  );
+
+    border-image: none;
+    border: 1px solid alpha (#000, 0.30);
+    border-radius: 4px;
+
+     color: shade (@text_color, 0.90);
+
+    box-shadow: inset 0 0 0 1px alpha (#fff, 0.1),
+   
+    inset 0 -1px 0 0 shade (@titlebar_color, 1);
+
+}
+
+.notebook {
+    border: 1px solid shade (@titlebar_color, 0.60);
+
+    border-radius: 2.5px;
+
+    -GtkNotebook-tab-overlap: 5px;
+
+    background-clip: border-box;
+    background-color: shade (@titlebar_color, 1.06);
+
+    text-shadow: 0 1px alpha (#000, 0.4);
+    icon-shadow: 0 1px alpha (#000, 0.4);
+}
+
+.notebook GtkViewport {
+    background-color: @base_color;
+}
+
+.notebook tab {
+    background-image: linear-gradient(to bottom,
+                                  shade (@titlebar_color, 0.75),
+                                  shade (@titlebar_color, 0.80)
+                                  );
+
+    border-radius: 4px;
+
+    padding: 2px 3px 0;
+}
+
+.dynamic-notebook .notebook tab .entry {
+    border-radius: 2px;
+    padding: 1px 5px;
+}
+
+.notebook tab .entry {
+    border-radius: 2px;
+    padding: 2px 5px;
+}
+
+.notebook tab:active {
+    background-image: linear-gradient(to bottom,
+                                  shade (@titlebar_color, 1.24),
+                                  shade (@titlebar_color, 1.06)
+                                  );
+
+        color: @text_color;
+}
+
+.dynamic-notebook .notebook tab .button,
+.dynamic-notebook .notebook tab .button:hover,
+.dynamic-notebook .notebook tab .button:hover:active,
+.notebook tab .button:hover,
+.notebook tab .button:hover:active {
+    background-image:   none;
+    background-color:   alpha (#000, 0.02);
+
+    border-color: alpha (#000, 0.29);
+}
+
+.dynamic-notebook .notebook tab .button:hover:active,
+.notebook tab .button:hover:active {
+    background-color:   alpha (#000, 0.10);
+}
+
+/*************
+* ComboBoxes *
+*************/
+
+GtkComboBox {
+    -GtkComboBox-arrow-scaling: 0.5;
+    -GtkComboBox-shadow-type: none;
+}
+
+GtkComboBox .separator {
+    /* always disable separators */
+    -GtkWidget-wide-separators: true;
+    -GtkWidget-horizontal-separator: 0;
+    -GtkWidget-vertical-separator: 0;
+}
+
+GtkComboBox.combobox-entry .entry:first-child,
+GtkComboBox.combobox-entry .button:first-child {
+    border-radius: 2.5px 0 0 2.5px;
+    border-right-width: 0;
+}
+
+GtkComboBox.combobox-entry .entry:last-child,
+GtkComboBox.combobox-entry .button:last-child {
+    border-radius: 0 2.5px 2.5px 0;
+    border-left-width: 0;
+}
+
+GtkComboBox.combobox-entry .entry:last-child,
+GtkComboBox.combobox-entry .button:last-child {
+    background-image: linear-gradient(to bottom,
+                                  shade (@base_color, 0.93),
+                                  shade (@base_color, 0.97)
+                                  );
+                                  
+    box-shadow: inset 0 1px 0 0 alpha (@inset_dark_color, 0.7),
+                inset 0 0 0 1px alpha (@inset_dark_color, 0.3),
+                0 1px 0 1px alpha (#fff, 0.05);
+}
+
+.toolbar GtkComboBox.combobox-entry .entry:last-child,
+.toolbar GtkComboBox.combobox-entry .button:last-child {
+    background-image: linear-gradient(to bottom,
+                                  alpha (#000, 0.10),
+                                  transparent 5px
+                                  ),
+                        linear-gradient(to bottom,
+                                  shade (@base_color, 0.90),
+                                  @base_color
+                                  );
+                                  
+    box-shadow: inset 0 0 0 1px @inset_dark_color,
+                0 1px 0 1px alpha (#fff, 0.05);
+}
+
+/*************
+* Scrollbars *
+*************/
+
+.scrollbar.trough {
+    background-color: transparent;
+    background-image: none;
+}
+
+.scrollbar.slider,
+.scrollbar.slider:prelight,
+.scrollbar.button {
+    border-width: 0;
+    background-color: alpha (#fff, 0.4);
+    border-radius: 10px;
+}
+
+/********
+* Menus *
+********/
+
+GtkTreeMenu .menuitem {
+    padding: 2px;
+}
+
+.content-view .menu,
+.menu {
+    padding: 0 1px 0 1px;
+
+    background-color:  #272b2f;
+    background-image: none;
+
+    border: 1px solid alpha (#000, 0.4);
+}
+
+
+.menu.button {
+    background-image: none;
+}
+
+.menubar {
+    color: @text_color;
+    background-color: @titlebar_color;
+    -GtkWidget-window-dragging: true;
+}
+
+.menubar .menuitem {
+    padding: 3px 6px;
+}
+
+.menu .menuitem {
+    padding: 4px 0 4px 0;
+}
+
+.menu .menuitem:active,
+.menu .menuitem:hover {
+    background-image: linear-gradient(to bottom,
+                                  shade (@selected_bg_color, 1.30),
+                                  shade (@selected_bg_color, 0.98)
+                                  );
+
+    border-style: solid;
+    border-width: 1px 0 1px 0;
+    border-image: linear-gradient(to bottom,
+                                  shade (@selected_bg_color, 1.18),
+                                  shade (@selected_bg_color, 0.88)
+                                  ) 1 0 1 0;
+
+    box-shadow: inset 0 1px 0 0 alpha (#fff, 0.30),
+                inset 0 -1px 0 0 alpha (#fff, 0.06);
+}
+
+.menu .menuitem:active,
+.menu .menuitem:hover {
+    color: @selected_fg_color;
+}
+
+.menu .menuitem *:insensitive {
+    color: @insensitive_color;
+}
+
+.menuitem .accelerator {
+    color: alpha (@text_color, 0.4);
+}
+
+.menuitem .accelerator:hover,
+.menuitem .accelerator:active {
+    color: alpha (@fg_color, 0.3);
+}
+
+GtkModelMenuItem GtkBox GtkImage {
+    padding-right: 6px;
+}
+
+.menuitem.separator {
+    color: @menu_separator;
+
+    -GtkMenuItem-horizontal-padding: 0;
+}
+
+.menuitem.check,
+.menuitem.radio,
+.menuitem.check:hover,
+.menuitem.radio:hover,
+.menuitem.check:insensitive,
+.menuitem.radio:insensitive {
+    background-image: none;
+    background-color: transparent;
+}
+
+.menuitem.check:active,
+.menuitem.radio:active {
+    background-color: transparent;
+}
+
+/*************************
+ * Check and Radio items *
+ *************************/
+
+.check,
+.radio,
+.check:insensitive,
+.radio:insensitive {
+    background-color: transparent;
+    border-style: none;
+}
+
+GtkCheckButton:hover,
+GtkCheckButton:active:hover,
+GtkCheckButton:selected,
+GtkCheckButton:selected:focus {
+    background-color: transparent;
+}
+
+.check {
+    background-image: url("assets/check.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.check:focus {
+    background-image: url("assets/check-focus.svg"); 
+}
+
+.check:active {
+    background-image: url("assets/check-active.svg"); 
+}
+
+.radio {
+    background-image: url("assets/radio.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.radio:active {
+    background-image: url("assets/radio-active.svg"); 
+}
+
+
+/***********
+* Toolbars *
+***********/
+
+.toolbar {
+    -GtkWidget-window-dragging: true;
+    
+    padding: 0 3px 3px;
+
+    border: 1px solid shade (@titlebar_color, 0.56);
+    border-width: 0 0 1px 0;
+
+    box-shadow: inset 0 -1px 0 0 alpha (#fff, 0.1);
+
+    background-image: linear-gradient(to bottom,
+                                  @titlebar_color,
+                                  @titlebar_color,
+                                  shade (@titlebar_color, 0.86)
+                                  );
+
+    text-shadow: 0 1px alpha (#000, 0.4);
+    icon-shadow: 0 1px alpha (#000, 0.4);
+}
+
+.toolbar .separator {
+    -GtkWidget-wide-separators: true;
+    -GtkWidget-horizontal-separator: 0;
+    -GtkWidget-vertical-separator: 0;
+} 
+
+/*********************
+* Secondary Toolbars *
+*********************/
+GtkBox .horizontal,
+.secondary-toolbar.toolbar {
+    padding: 2px;
+    color: shade (@text_color, 0.90);   
+    background-image: linear-gradient(to bottom,
+                                  shade (@titlebar_color, 0.84),
+                                  shade (@titlebar_color, 0.80)
+                                  );
+
+    box-shadow: inset 0 1px 0 0 alpha (#fff, 0.05),
+                inset 0 -1px 0 0 alpha (#fff, 0.05);
+
+    border-color: shade (@titlebar_color, 0.50);
+
+    text-shadow: 0 1px alpha (#000, 0.4);
+    icon-shadow: 0 1px alpha (#000, 0.4);
+}
+
+.secondary-toolbar.toolbar .button {
+    border-color: alpha (#000, 0.3);
+
+    text-shadow: 0 1px alpha (#000, 0.4);
+    icon-shadow: 0 1px alpha (#000, 0.4);
+}
+
+
+/******************
+* Bottom Toolbars *
+******************/
+
+.bottom-toolbar.toolbar {
+    padding: 8px;
+
+    border: 1px solid shade (@titlebar_color, 0.66);
+    border-width: 1px 0 0 0;
+
+    background-image: linear-gradient(to bottom,
+                                  @titlebar_color,
+                                  shade (@titlebar_color, 0.88)
+                                  );
+
+    box-shadow: inset 0 1px 0 0 alpha (#fff, 0.12),
+                inset 0 -1px 0 0 alpha (#fff, 0.05);
+}
+
+.bottom-toolbar.toolbar .button {
+    padding: 2px 3px 2px 3px;
+}
+
+/***************
+ * Header Bars *
+ **************/
+.header-bar GtkLabel,
+.header-bar GtkImage {
+    color: shade (@text_color, 0.90);
+}
+
+.header-bar {
+    background-image: linear-gradient(to bottom,
+                                  shade (@titlebar_color, 1),
+                                  shade (@titlebar_color, 0.84)
+                                  );
+
+    border-color: shade (#000, 1.08);
+    border-radius: 3px 3px 0 0;
+    border-style: solid;
+    border-width: 0 0 1px;
+
+    box-shadow: inset 0 0 0 1px alpha (#fff, 0.05),
+                inset 0 1px 0 0 alpha (#fff, 0.08);
+
+    padding: 10px 6px 8px 6px;
+}
+
+.header-bar:backdrop {
+    background-image: linear-gradient(to bottom,
+                                  shade (@titlebar_color, 1.10),
+                                  shade (@titlebar_color, 0.98)
+                                  );
+
+    box-shadow: inset 0 0 0 1px alpha (#fff, 0.05),
+                inset 0 1px 0 0 alpha (#fff, 0.08);
+
+    -gtk-image-effect: dim;
+}
+
+
+
+
+.header-bar .button:active,
+.header-bar .button:hover:active,
+.header-bar .button:focus:active {
+    
+    background-color: alpha (#000, 0.10);  
+    background-image: linear-gradient(to bottom,
+                                  alpha (@titlebar_color, 0.10),
+                                 alpha (@titlebar_color, 0.7)
+                                  );    
+
+    box-shadow: inset 0 0 0 1px alpha (#000, 0.05);
+                
+    border: 1px solid alpha (#000, 0.22);
+    padding: 3px;
+}
+
+.header-bar .button.image-button:active,
+.header-bar .button.image-button:hover:active,
+.header-bar .button.image-button:focus:active {
+    padding: 0;
+    background-color: alpha (#000, 0.10);    
+
+    box-shadow: inset 0 0 0 1px alpha (#000, 0.05);
+                
+    border: 1px solid alpha (#000, 0.22);
+    padding: 3px;
+}
+
+.header-bar .separator {
+    color: transparent;
+}
+
+.header-bar .title,
+.header-bar .button.image-button GtkImage {
+    color: shade (@text_color, 0.90);
+    font: Bold 9;
+    text-shadow: 0 1px alpha (#000, 0.6);
+    icon-shadow: 0 1px alpha (#000, 0.6);
+}
+
+.header-bar .title:backdrop,
+.header-bar .button.image-button GtkImage:backdrop {
+    color: shade (@text_color, 0.80);
+    text-shadow: none;
+    icon-shadow: none;
+}
+
+.header-bar .subtitle {
+    color: shade (@text_color, 0.80);
+    text-shadow: 0 1px alpha (#000, 0.4);
+    icon-shadow: 0 1px alpha (#000, 0.4);
+}
+
+.header-bar .subtitle:backdrop {
+    color: shade (@text_color, 0.75);
+    text-shadow: none;
+    icon-shadow: none;
+}
+
+/******************
+* Inline Toolbars *
+******************/
+
+.inline-toolbar.toolbar {
+    -GtkToolbar-button-relief: normal;
+
+    border-radius: 0;
+    border-width: 0 1px 1px 1px;
+    padding: 0;
+
+    border-image: none;
+    border-color: shade (@titlebar_color, 0.70);
+
+    background-image: linear-gradient(to bottom,
+                                  shade (@base_color, 0.92),
+                                  shade (@base_color, 0.98)
+                                  );
+
+    box-shadow: inset 0 1px 0 0 alpha (#000, 0.10),
+                inset 0 -1px 0 0 @inset_dark_color;
+}
+
+GtkPaned .inline-toolbar.toolbar {
+    border-width: 1px 0 0 0;
+    /*FIXME: This should probably use alpha just in case */
+    background-image: linear-gradient(to bottom,
+                                  shade (@titlebar_color, 0.92),
+                                  shade (@titlebar_color, 0.98)
+                                  );
+}
+
+.inline-toolbar.toolbar .button {
+    border-radius: 0;
+    border-width: 0 0 0 1px;
+    padding: 1px 2px 1px 2px;
+    background-image: none;
+    background-color: transparent;
+    box-shadow: none;
+
+    text-shadow: 0 1px alpha (#000, 0.4);
+    icon-shadow: 0 1px alpha (#000, 0.4);
+}
+
+.inline-toolbar.toolbar .button:active,
+.inline-toolbar.toolbar .button:active:hover {
+    background-color: alpha (#000, 0.05);
+    background-image: none;
+
+    border-color: shade (@base_color, 0.74);
+}
+
+.inline-toolbar.toolbar GtkToolButton:first-child .button,
+.inline-toolbar.toolbar .button:first-child {
+    border-width: 0;
+}
+
+.inline-toolbar.toolbar GtkToolButton:last-child .button,
+.inline-toolbar.toolbar .button:last-child {
+    border-width: 0 1px 0 1px;
+    border-radius: 0 2px 2px 0;
+}
+
+.inline-toolbar.toolbar .button *:insensitive,
+.inline-toolbar.toolbar .button:insensitive {
+    background-image: none;
+    background-color: alpha (#000, 0.02);
+    color: @insensitive_color;
+}
+
+/************************
+* Sidebar & Source List *
+************************/
+
+.sidebar,
+.sidebar.view,
+.sidebar .view,
+.source-list,
+.source-list.view {
+    background-color: #272b2f;
+    color: shade (@text_color, 0.90);
+}
+
+.sidebar,
+.sidebar.view,
+.sidebar .view,
+.sidebar.view:selected:backdrop,
+.sidebar.view:prelight:selected:backdrop,
+.source-list,
+.source-list.view,
+.source-list.view:selected:backdrop,
+.source-list.view:prelight:selected:backdrop {
+    text-shadow: 0 1px alpha (#000, 0.4);
+    icon-shadow: 0 1px alpha (#000, 0.4);
+}
+
+.sidebar,
+.source-list {
+    -GtkTreeView-horizontal-separator: 1px;
+    -GtkTreeView-vertical-separator: 6px;
+}
+
+.source-list.category-expander {
+    color: transparent;
+}
+.sidebar .view:prelight,
+.sidebar.view:prelight,
+.source-list.view:prelight {
+    background-color: shade (@titlebar_color, 1.10);
+}
+
+
+.sidebar .view:selected,
+.sidebar .view:prelight:selected,
+.sidebar.view:selected,
+.sidebar.view:prelight:selected,
+.source-list.view:selected,
+.source-list.view:prelight:selected,
+.source-list.view:focus:selected,
+.source-list.category-expander:hover {
+
+    color: shade (@text_color, 0.90);
+    border-style: solid;
+    border-width: 1px 0 1px 0;
+
+    background-color: transparent;
+    background-image: linear-gradient(to bottom,
+                                  alpha (#000, 0.11),
+                                  alpha (#000, 0.07)
+                                  );
+
+    border-image: linear-gradient(to bottom,
+                                  alpha (#000, 0.25),
+                                  alpha (#fff, 0.05)
+                                  ) 1 1 1 1;
+
+    box-shadow: inset 0 1px 0 0 alpha (#000, 0.03),
+                inset 0 -1px 0 0 alpha (#000, 0.10);
+}
+.sidebar .view:selected:backdrop,
+.sidebar .view:prelight:selected:backdrop,
+.sidebar.view:selected:backdrop,
+.sidebar.view:prelight:selected:backdrop,
+.source-list.view:selected:backdrop,
+.source-list.view:prelight:selected:backdrop {
+    background-image: linear-gradient(to bottom,
+                                  alpha (#000, 0.08),
+                                  alpha (#000, 0.04)
+                                  );
+
+    border-image: linear-gradient(to bottom,
+                                  alpha (#000, 0.19),
+                                  alpha (#fff, 0.10)
+                                  ) 1 1 1 1;
+}
+
+.sidebar-pane-separator,
+.sidebar-pane-separator:prelight,
+.sidebar-pane-separator:selected {
+
+    border-width: 0;
+    -GtkPaned-handle-size: 1;
+    background-image: none;
+    background-color: shade (@titlebar_color, 0.75);
+}
+
+.source-list.badge,
+.source-list.badge:prelight,
+.source-list.badge:selected,
+.source-list.badge:prelight:selected {
+    background-image: none;
+    background-color: alpha (#fff, 0.4);
+    color: @titlebar_color;
+    border-radius: 10px;
+    padding: 0 6px;
+    margin: 0 3px;
+    text-shadow: 0 1px alpha (#000, 0.1);
+    icon-shadow: 0 1px alpha (#000, 0.1);
+    border-width: 0;
+}
+
+.source-list.badge:selected,
+.source-list.badge:prelight:selected {
+    color: @titlebar_color;
+}
+
+.source-list.badge:selected:backdrop,
+.source-list.badge:selected:prelight:backdrop {
+    background-image: none;
+    background-color: alpha (#000, 0.2);
+    color: shade (@titlebar_color, 0.95);
+    text-shadow: 0 1px alpha (#000, 0.1);
+    icon-shadow: 0 1px alpha (#000, 0.1);
+}
+
+/**************************
+* Suggested Action Button *
+**************************/
+
+.suggested-action.button {
+
+    background-image: linear-gradient(to bottom,
+                                  shade (@selected_bg_color, 1.30),
+                                  @selected_bg_color
+                                  );
+
+    border-color: shade (@selected_bg_color, 0.90);
+}
+
+.suggested-action.button:insensitive {
+    border-color: alpha (#000, 0.20);
+}
+
+.suggested-action.button GtkLabel,
+.suggested-action.button GtkLabel:prelight {
+    color: @selected_fg_color;
+    text-shadow: 0 1px alpha (#000, 0.3);
+    icon-shadow: 0 1px alpha (#000, 0.3);
+}
+
+.suggested-action.button GtkLabel:insensitive {
+    text-shadow: 0 1px alpha (#fff, 0.3);
+    icon-shadow: 0 1px alpha (#fff, 0.3);
+}
+
+.suggested-action.button:active,
+.suggested-action.button:active:hover {
+    background-image: linear-gradient(to bottom,
+                                  shade (@selected_bg_color, 1.20),
+                                  @selected_bg_color
+                                  );
+
+    border-color: shade (@selected_bg_color, 0.85);
+}
+
+/****************************
+* Destructive Action Button *
+****************************/
+
+/* FIXME: change hex values to variables */
+
+.destructive-action.button {
+    background-image: linear-gradient(to bottom,
+                                  #f67564,
+                                  #cc3443
+                                  );
+    border-color: #a2302e;
+}
+
+.destructive-action.button GtkLabel,
+.destructive-action.button Gtklabel:prelight {
+    color: @selected_fg_color;
+    text-shadow: 0 1px alpha (#000, 0.2);
+    icon-shadow: 0 1px alpha (#000, 0.2);
+}
+
+/***************
+* GtkAssistant *
+***************/
+
+GtkAssistant .sidebar .highlight {
+    color: @fg_color;
+    font: bold;
+}
+
+GtkAssistant .sidebar {
+    background-color: shade (@bg_color, 0.97);
+    border-color: shade (@bg_color, 0.8);
+    border-style: solid;
+    border-width: 1px 1px 0 0;
+    color: mix (@fg_color, @bg_color, 0.40);
+    padding: 12px;
+    text-shadow: 0 1px shade (@bg_color, 1.04);
+}
+
+/*************
+ * GtkSwitch *
+ *************/
+
+GtkSwitch {
+    font: 1;
+    -GtkSwitch-slider-width: 38;
+}
+
+GtkSwitch.trough {
+    background-image: url("assets/switch-off.svg");
+    background-repeat: no-repeat;
+    background-position: 0 center;
+        
+    color: transparent;
+}
+
+GtkSwitch.trough:active {
+    background-image: url("assets/switch-on.svg");
+}
+
+GtkSwitch.trough:insensitive {
+    background-image: url("assets/switch-off-disabled.svg");
+}
+
+GtkSwitch.trough:active:insensitive {
+    background-image: url("assets/switch-on-disabled.svg");
+}
+
+GtkSwitch.slider {
+    background-image: url("assets/switch-slider.svg");
+    background-repeat: no-repeat;
+    background-position: 0 center;
+}
+
+GtkSwitch.slider:focus {
+    background-image: url("assets/switch-slider-focus.svg");
+
+}
+
+GtkSwitch.slider:insensitive {
+    background-image: none;
+    background-color: transparent;
+}
+
+/**********************
+* Tree and Icon Views *
+**********************/
+
+GtkTreeView {
+    -GtkTreeView-vertical-separator: 5px;
+    -GtkTreeView-horizontal-separator: 6px;
+    -GtkTreeView-expander-size: 8px;
+    -GtkTreeView-grid-line-pattern: "\000\000";
+}
+
+GtkTreeView row:nth-child(even) {
+    background-color: @base_color;
+}
+
+GtkTreeView row:nth-child(odd) {
+    background-color: @bg_color;
+}
+
+GtkTreeView .entry {
+    border-radius: 0;
+}
+
+GtkIconView.view.cell:selected,
+GtkIconView.view.cell:selected:focus {
+    background-color: alpha (#000, 0.18);
+    border-color: shade (@base_color, 0.74);
+    border-radius: 4px;
+    color: @text_color;
+    box-shadow: inset 0 0 0 1px @inset_dark_color;
+}
+
+.view {
+    background-color: @base_color;
+}
+
+.view:selected {
+    background-color: shade (@base_color, 0.80);
+    color: @text_color;
+}
+
+.view:selected:focus {
+    background-color: @selected_bg_color;
+    color: @selected_fg_color;
+}
+
+.cell {
+    color: @text_color;
+}
+
+.cell:selected,
+.cell:selected:focus {
+    background-color: @selected_bg_color;
+    color: @selected_fg_color;
+}
+
+.cell {
+    border-width: 0px;
+}
+
+/**********************
+ * Column Headers *
+ *********************/
+
+column-header .button,
+.content-view column-header .button {
+    border-radius: 0;
+}
+
+column-header:nth-child(first) .button,
+.content-view column-header:nth-child(first) .button {
+    border-width: 0 0 1px 0;
+}
+
+column-header .button {
+    background-image: linear-gradient(to bottom,
+                                  shade ( @titlebar_color, 0.88),
+                                   @titlebar_color
+                                  );
+
+    border-image: linear-gradient(to bottom,
+                                  shade ( @titlebar_color, 0.88),
+                                  shade ( @titlebar_color, 0.70)
+                                  ) 0 0 1 1;
+    border-width: 0 0 1px 1px;
+    font: bold;
+    padding: 4px 2px 4px 2px;
+}
+
+column-header .button:hover {
+    background-image: linear-gradient(to bottom,
+                                  shade ( @titlebar_color, 0.80),
+                                   @titlebar_color
+                                  );
+}
+
+/***********
+* Expander *
+***********/
+
+.expander {
+    color: @fg_color;
+}
+
+.expander row:selected,
+.expander row:selected:focus {
+    color: @selected_fg_color;
+}
+
+/*************
+* List Boxes *
+*************/
+
+EggListBox {
+    background-color: @base_color;
+}
+
+.list {
+    background-color: @base_color;
+}
+
+.list-row:selected {
+    background-color: @selected_bg_color;
+}
+
+/***************
+* Content View *
+***************/
+
+.content-view-window {
+    background-image: none;
+    border: 1px solid alpha (#000, 0.8);
+}
+
+.content-view,
+.content-view GtkViewport {
+    background-color: @base_color;
+
+}
+
+.content-view column-header .button {
+    border-width: 0 0 1px 1px;
+    
+    background-image: linear-gradient(to bottom,
+                              @bg_color,
+                              shade (@bg_color, 0.94)
+                              );
+
+    border-image: linear-gradient(to bottom,
+                                  shade (@base_color, 0.86),
+                                  shade (@base_color, 0.70)
+                                  ) 1 0 1 0;
+}
+
+.content-view .title,
+.content-view .option-title {
+    color: @text_color;
+    text-shadow: 0 1px alpha (#000, 0.3);
+}
+
+.content-view .subtitle,
+.content-view .option-description {
+    color: alpha (@text_color, 0.5);
+    text-shadow: 0 1px alpha (#000, 0.4);
+} 
+
+.content-view .toolbar {
+    padding: 1px;
+
+    background-image: linear-gradient(to bottom,
+                          alpha (#000, 0.10),
+                          alpha (#000, 0.03)
+                          );
+                          
+  border-color: alpha (#000, 0.05);
+}
+
+/**************
+* GtkCalendar *
+**************/
+
+GtkCalendar {
+    border-radius: 2px;
+}
+
+GtkCalendar.button,
+GtkCalendar.button:insensitive,
+GtkCalendar.header,
+GtkCalendar.view {
+    background-color: transparent;
+    background-image: none;
+}
+
+.highlight,
+GtkCalendar.highlight {
+    color: #777;
+}
+
+/*************
+* GtkInfoBar *
+*************/
+ 
+.info,
+.question,
+.warning,
+.error {
+    border-style: solid;
+    border-width: 0 0 1px 0;
+    box-shadow: inset 0 1px 0 0 alpha (#fff, 0.30),
+                inset 0 -1px 0 0 alpha (#fff, 0.06);
+}
+
+.info {
+    box-shadow: inset 0 1px 0 0 alpha (#fff, 0.15),
+                inset 0 -1px 0 0 alpha (#fff, 0.03);
+}
+
+.info GtkLabel {
+    color: @text_color;
+}
+
+.question {
+    background-image: linear-gradient(to bottom,
+                                  #55c1ec,
+                                  #44a2e9
+                                  );
+    border-color: #357fb8;
+}
+
+.question GtkLabel {
+    color: #004166;
+}
+
+.warning {
+    background-image: linear-gradient(to bottom,
+                                  #fdde76,
+                                  #fbd058
+                                  );
+    border-color: #c09e42;
+}
+
+.warning GtkLabel {
+    color: #664e00;
+}
+
+.error {
+    background-image: linear-gradient(to bottom,
+                                  #e35d4f,
+                                  #d33f3d
+                                  );
+    border-color: #a2302e;
+}
+
+.error GtkLabel {
+    color: #660000;
+}
+
+GtkInfoBar GtkLabel {
+    icon-shadow: 0 1px alpha (#fff, 0.3);
+    text-shadow: 0 1px alpha (#fff, 0.3);
+}
+
+GtkInfoBar .entry,
+GtkInfoBar .menu {
+    color: @text_color;
+}
+
+
+GtkInfoBar GtkLabel:insensitive {
+    color: @insensitive_color;
+
+}
+
+GtkInfoBar .button,
+GtkInfoBar .button:focus,
+.dynamic-notebook GtkInfoBar .button {
+
+    text-shadow: none;
+    icon-shadow: none;
+    
+    background-image: none; 
+    background-color: transparent;  
+
+    border: 1px solid alpha (#000, 0.3);
+    
+    box-shadow: inset 0 0 0 1px alpha (#fff, 0.05),
+                inset 0 1px 0 0 alpha (#fff, 0.45),
+                inset 0 -1px 0 0 alpha (#fff, 0.15),
+                0 1px 0 1px alpha (#fff, 0.15);
+}
+
+GtkInfoBar .button:active,
+GtkInfoBar .button:hover:active {
+    background-image: none;
+    background-color: alpha (#000, 0.05);
+    border-color: alpha (#000, 0.35);
+}
+
+GtkInfoBar .button:insensitive,
+GtkInfoBar .button:hover:insensitive {
+    background-image: none;
+    background-color: transparent;    
+
+    border-color: alpha (#000, 0.18);
+}
+
+/*******
+ * CSD *
+ ******/
+
+.titlebar {
+    background-image: linear-gradient(to bottom,
+                                  shade (@titlebar_color, 1.1),
+                                  shade (@titlebar_color, 0.8)
+                                  );
+
+    text-shadow: 0 1px alpha (#000, 0.4);
+    icon-shadow: 0 1px alpha (#000, 0.4);
+}
+
+.titlebar .title {
+    font: Bold 9;
+}
+
+
+.titlebar .titlebutton {
+    icon-shadow: 0px 1px alpha (#000, 0.4);
+    color: alpha (#fff, 0.50);
+    background: none;
+    padding: 3px;
+
+    border-radius: 3px;
+    border-width: 1px 1px 2px 1px;
+    border-color: transparent;
+    border-style: solid;
+    border-image: none;
+}
+
+.titlebar .titlebutton:backdrop {
+    color: alpha (#000, 0.30);
+}
+
+.window-frame {
+    border-radius: 4px 4px 0 0;
+
+    box-shadow: 0 0 0 1px alpha (#000, 0.8),
+                0 3px 7px alpha (#000, 0.86);
+
+    margin: 12px;
+}
+
+.window-frame:backdrop {
+    box-shadow: 0 0 0 1px alpha (#000, 0.8),
+                0 2px 5px alpha (#000, 0.58);
+}
+
+/**************
+* Text Styles *
+**************/
+
+.h1 { font: open sans bold 24; }
+.h2 { font: open sans light 18; }
+.h3 { font: open sans bold 12; }
+
+@import url("granite-widgets-dark.css");
+@import url("apps.css");
\ No newline at end of file

=== modified file 'gtk-3.0/gtk-widgets.css'
--- gtk-3.0/gtk-widgets.css	2014-02-09 08:08:30 +0000
+++ gtk-3.0/gtk-widgets.css	2014-02-09 08:49:06 +0000
@@ -1169,6 +1169,7 @@
 .scrollbar.trough {
     background-image: none;
     background-color: transparent;
+    background-image: none;
     border-width: 0;
     border-radius: 0;
     border-image: none;
@@ -2095,10 +2096,14 @@
 
 .info {
     background-image: linear-gradient(to bottom,
-                                  #fafafa,
-                                  #f6f6f6
+                                  shade (@bg_color, 1.01),
+                                  shade (@bg_color, 0.97)
                                   );
-    border-color: #c3c3c3;
+
+    box-shadow: inset 0 1px 0 0 #fff,
+                inset 0 -1px 0 0 alpha (#fff, 0.4);
+
+    border-color: shade (@bg_color, 0.8);
 }
 
 .info GtkLabel {

=== modified file 'gtk-3.0/gtk.css'
--- gtk-3.0/gtk.css	2014-01-19 19:05:11 +0000
+++ gtk-3.0/gtk.css	2014-02-09 08:49:06 +0000
@@ -54,6 +54,7 @@
 @define-color warning_color #f57900;
 @define-color error_color #cc0000;
 @define-color success_color #4e9a06;
+@define-color metacity_color #dedede;
 
 @define-color info_fg_color rgb (0, 136, 204);
 @define-color info_bg_color rgb (252, 252, 189);

=== modified file 'metacity-1/close.svg'
--- metacity-1/close.svg	2013-06-04 04:15:55 +0000
+++ metacity-1/close.svg	2014-02-09 08:49:06 +0000
@@ -14,8 +14,8 @@
    width="18"
    height="16"
    id="svg2"
-   inkscape:version="0.48.3.1 r9886"
-   sodipodi:docname="close-normal.svg">
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="close.svg">
   <sodipodi:namedview
      pagecolor="#ffffff"
      bordercolor="#666666"
@@ -25,7 +25,7 @@
      guidetolerance="10"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:window-width="669"
+     inkscape:window-width="677"
      inkscape:window-height="480"
      id="namedview32"
      showgrid="false"
@@ -181,11 +181,7 @@
        gradientTransform="matrix(0.7071068,0.7071068,-0.7071068,0.7071068,-18.87868,-10.43503)" />
   </defs>
   <path
-     d="M 8.9701822,7.555969 11.5,5 13,6.5 10.401435,8.987221 13,11.5 11.5,13 8.987221,10.401435 6.5,13 5,11.5 7.5857864,9 5,6.5 6.5,5 8.9701822,7.555969 z"
-     id="path2398"
-     style="opacity:0.6;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <path
      d="M 8.9701822,6.5559687 11.5,4 13,5.5 10.401435,7.987221 13,10.5 11.5,12 8.987221,9.401435 6.5,12 5,10.5 7.5857864,8 5,5.5 6.5,4 8.9701822,6.5559687 z"
      id="path2386"
-     style="opacity:0.5;color:#000000;fill:url(#linearGradient6693-5);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99829447000000004;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+     style="opacity:1;color:#bebebe;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
 </svg>

=== modified file 'metacity-1/maximize.svg'
--- metacity-1/maximize.svg	2013-06-04 04:15:55 +0000
+++ metacity-1/maximize.svg	2014-02-09 08:49:06 +0000
@@ -7,7 +7,6 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    version="1.0"
@@ -15,8 +14,8 @@
    height="16"
    id="svg2747"
    sodipodi:version="0.32"
-   inkscape:version="0.48.3.1 r9886"
-   sodipodi:docname="maximize-normal.svg"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="maximize.svg"
    inkscape:output_extension="org.inkscape.output.svg.inkscape">
   <metadata
      id="metadata9">
@@ -31,8 +30,8 @@
     </rdf:RDF>
   </metadata>
   <sodipodi:namedview
-     inkscape:window-height="430"
-     inkscape:window-width="669"
+     inkscape:window-height="446"
+     inkscape:window-width="677"
      inkscape:pageshadow="2"
      inkscape:pageopacity="0"
      guidetolerance="10.0"
@@ -86,26 +85,6 @@
          style="stop-color:#646464;stop-opacity:1"
          id="stop3591-7-4-3-0" />
     </linearGradient>
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient3587-6-5-1-5"
-       id="linearGradient6693"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.7071068,0.7071068,-0.7071068,0.7071068,-9.87868,-7.4350298)"
-       x1="19.490692"
-       y1="-4.321744"
-       x2="22.886868"
-       y2="-0.92556846" />
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient3587-6-5-1-5"
-       id="linearGradient6695"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.7071068,0.7071068,-0.7071068,0.7071068,-9.87868,-7.4350298)"
-       x1="22.863201"
-       y1="-0.94923496"
-       x2="26.23391"
-       y2="2.4214737" />
   </defs>
   <text
      id="text4087-2-6-5"
@@ -139,20 +118,9 @@
          x="531"
          y="299" /></flowRegion><flowPara
        id="flowPara38704" /></flowRoot>  <path
-     inkscape:connector-curvature="0"
-     style="opacity:0.6;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99829447000000004;marker:none;visibility:visible;display:inline;overflow:visible"
-     d="m 9,4.0000002 1.78125,1.78125 -1.5,1.5 L 9,7.5625002 10.4375,9 l 0.28125,-0.2812498 1.5,-1.5 L 14,9 l 0,-4.9999998 -5,0 z M 4,9 4,14 9,14 7.1875,12.1875 8.40625,11 9,10.4375 7.59375,9 7,9.59375 5.8125,10.8125 4,9 z"
-     id="path2394-5" />
-  <path
-     style="opacity:0.5;color:#000000;fill:url(#linearGradient6693);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99829447000000004;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-     d="m 9,3.0000002 1.78125,1.78125 -1.5,1.5 L 9,6.5625002 l 1.4375,1.4375 0.28125,-0.28125 1.5,-1.5 1.78125,1.78125 0,-5 -5,0 z"
-     id="path6691"
-     inkscape:connector-curvature="0" />
-  <path
-     style="opacity:0.5;color:#000000;fill:url(#linearGradient6695);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99829447000000004;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-     d="M 4,8.0000002 4,13 9,13 7.1875,11.1875 8.40625,10 9,9.4375 7.59375,8.0000002 7,8.5937502 5.8125,9.8125 4,8.0000002 z"
-     id="path2394"
-     inkscape:connector-curvature="0" />
+     style="opacity:1;color:#bebebe;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+     d="M 9 3 L 10.78125 4.78125 L 9.28125 6.28125 L 9 6.5625 L 10.4375 8 L 10.71875 7.71875 L 12.21875 6.21875 L 14 8 L 14 3 L 9 3 z M 4 8 L 4 13 L 9 13 L 7.1875 11.1875 L 8.40625 10 L 9 9.4375 L 7.59375 8 L 7 8.59375 L 5.8125 9.8125 L 4 8 z "
+     id="path6691" />
   <text
      id="text4087-2-6-5-1"
      y="7.7151051"

=== modified file 'metacity-1/metacity-theme-3.xml'
--- metacity-1/metacity-theme-3.xml	2014-01-24 05:43:57 +0000
+++ metacity-1/metacity-theme-3.xml	2014-02-09 08:49:06 +0000
@@ -10,7 +10,9 @@
 
 <!-- :: CONSTANTS :: -->
 
-<constant name="C_border_focused" value="shade/#DEDEDE/0.50" />
+<constant name="C_border_focused" value="shade/gtk:custom(metacity_color,gtk:bg[NORMAL])/0.5" />
+<constant name="C_highlight_color" value="shade/gtk:custom(metacity_color,gtk:bg[NORMAL])/1.4" />
+<constant name="C_text_color" value="shade/gtk:custom(text_color,gtk:bg[NORMAL])/1" />
 
 <!-- :: GEOMETRIES :: -->
 
@@ -77,9 +79,9 @@
 </draw_ops>
 
 <draw_ops name="rounded_hilight">
-	<line color="shade/#DEDEDE/1.14" x1="5" y1="1" x2="width-6" y2="1" />
-	<arc color="shade/#DEDEDE/1.14" x="1" y="1" width="7" height="7"  start_angle="270" extent_angle="90" />
-	<arc color="shade/#DEDEDE/1.14" x="width-10" y="1" width="9" height="7"  start_angle="0" extent_angle="90" />
+	<line color="C_highlight_color" x1="5" y1="1" x2="width-6" y2="1" />
+	<arc color="C_highlight_color" x="1" y="1" width="7" height="7"  start_angle="270" extent_angle="90" />
+	<arc color="C_highlight_color" x="width-10" y="1" width="9" height="7"  start_angle="0" extent_angle="90" />
 </draw_ops>
 
 
@@ -114,49 +116,50 @@
 <!-- ::: TITLES ::: -->
 
 <draw_ops name="title_focused">
-	<title color="shade/#DEDEDE/1.30" x="((width - title_width) / 2) `max` 0" y="1 `max` ((height-title_height)/2)+1"/>
+	<title color="shade/gtk:custom(theme_bg_color,gtk:bg[NORMAL])/1.30" x="((width - title_width) / 2) `max` 0" y="1 `max` ((height-title_height)/2)+1"/>
 	<title color="shade/gtk:text[NORMAL]/2.00" x="((width - title_width) / 2) `max` 0" y="0 `max` ((height-title_height)/2)"/>
 </draw_ops>
 
 <draw_ops name="title_unfocused">
-	<title color="shade/#DEDEDE/1.15" x="((width - title_width) / 2) `max` 0" y="1 `max` ((height-title_height)/2)+1"/>
+	<title color="shade/gtk:custom(theme_bg_color,gtk:bg[NORMAL])/1.15" x="((width - title_width) / 2) `max` 0" y="1 `max` ((height-title_height)/2)+1"/>
 	<title color="shade/gtk:text[NORMAL]/2.50" x="((width - title_width) / 2) `max` 0" y="0 `max` ((height-title_height)/2)"/>
 </draw_ops>
 
 <!-- ::: TITLEBAR ::: -->
 
 <draw_ops name="entire_background_focused">
-	<rectangle color="#DEDEDE" x="1" y="5" width="width-2" height="height-6" filled="true" />
-</draw_ops>
+	<rectangle color="shade/gtk:custom(metacity_color,gtk:bg[NORMAL])/1" x="1" y="5" width="width-2" height="height-6" filled="true" />
+
+</draw_ops> 
 
 <draw_ops name="entire_background_unfocused">
-	<rectangle color="shade/#DEDEDE/1.06" x="1" y="5" width="width-2" height="height-6" filled="true" />
+	<rectangle color="shade/gtk:custom(metacity_color,gtk:bg[NORMAL])/1" x="1" y="5" width="width-2" height="height-6" filled="true" />
 </draw_ops>
 
 <draw_ops name="dialog_background_focused">
-	<rectangle color="shade/#fff/0.96" x="1" y="5" width="width-2" height="height-6" filled="true" />
+	<rectangle color="shade/gtk:custom(metacity_color,gtk:bg[NORMAL])/1" x="1" y="5" width="width-2" height="height-6" filled="true" />
 </draw_ops>
 
 <draw_ops name="titlebar_fill_focused">
-	<gradient type="vertical" x="1" y="1" width="width-2" height="height-2">
-		<color value="shade/#DEDEDE/1.04"/>
-		<color value="shade/#DEDEDE/1.0"/>
+	<gradient type="vertical" x="0" y="0" width="width" height="top_height">
+		<color value="shade/gtk:custom(metacity_color,gtk:bg[NORMAL])/1"/>
+		<color value="shade/gtk:custom(metacity_color,gtk:bg[NORMAL])/1"/>
 	</gradient>
 </draw_ops>
 
 <draw_ops name="dialog_titlebar_fill_focused">
-	<rectangle color="shade/#fff/0.96" x="1" y="1" width="width-2" height="height-2" filled="true" />
+	<rectangle color="shade/gtk:custom(metacity_color,gtk:bg[NORMAL])/1" x="1" y="1" width="width-2" height="height-2" filled="true" />
 </draw_ops>
 
 <draw_ops name="titlebar_fill_unfocused">
 	<gradient type="vertical" x="1" y="1" width="width-2" height="height-2">
-		<color value="shade/#DEDEDE/1.10"/>
-		<color value="shade/#DEDEDE/1.06"/>
+			<color value="shade/gtk:custom(metacity_color,gtk:bg[NORMAL])/1"/>
+		<color value="shade/gtk:custom(metacity_color,gtk:bg[NORMAL])/1"/>
 	</gradient>
 </draw_ops>
 
 <draw_ops name="hilight">
-	<line color="shade/#DEDEDE/1.14" x1="0" y1="0" x2="width-1" y2="0" />
+	<line color="C_highlight_color" x1="0" y1="0" x2="width-1" y2="0" />
 </draw_ops>
 
 <draw_ops name="titlebar_focused">
@@ -200,7 +203,8 @@
 		x="(width - object_width) / 2"
 		y="(height - object_height) / 2"
 		width="object_width"
-		height="object_height"/>
+		height="object_height"
+        colorize="C_text_color" />
 </draw_ops>
 
 <draw_ops name="close_hover">
@@ -219,7 +223,8 @@
 	    y="(height - object_height) / 2"
 	    width="object_width"
 	    height="object_height"
-        alpha="0.6"/>
+        alpha="0.6"
+        colorize="C_text_color" />
 </draw_ops>
 
 <draw_ops name="close_unfocused_hover">
@@ -239,7 +244,8 @@
 		x="(width - object_width) / 2"
 		y="(height - object_height) / 2"
 		width="object_width"
-		height="object_height"/>
+		height="object_height"
+        colorize="C_text_color" />
 </draw_ops>
 
 <draw_ops name="maximize_hover">
@@ -258,7 +264,8 @@
 		y="(height - object_height) / 2"
 		width="object_width"
 		height="object_height"
-        alpha="0.6"/>
+        alpha="0.6"
+        colorize="C_text_color" />
 </draw_ops>
 
 <draw_ops name="maximize_unfocused_hover">
@@ -278,7 +285,8 @@
 		x="(width - object_width) / 2"
 		y="(height - object_height) / 2"
 		width="object_width"
-		height="object_height"/>
+		height="object_height"
+        colorize="C_text_color" />
 </draw_ops>
 
 <draw_ops name="unmaximize_hover">
@@ -297,7 +305,8 @@
 		y="(height - object_height) / 2"
 		width="object_width"
 		height="object_height"
-        alpha="0.6"/>
+        alpha="0.6"
+        colorize="C_text_color" />
 </draw_ops>
 
 <draw_ops name="unmaximize_unfocused_hover">
@@ -317,7 +326,8 @@
 		x="(width - object_width) / 2"
 		y="(height - object_height) / 2"
 		width="object_width"
-		height="object_height"/>
+		height="object_height"
+        colorize="C_text_color" />
 </draw_ops>
 
 <draw_ops name="minimize_hover">
@@ -336,7 +346,8 @@
 		y="(height - object_height) / 2"
 		width="object_width"
 		height="object_height"
-        alpha="0.6"/>
+        alpha="0.6"
+        colorize="C_text_color" />
 </draw_ops>
 
 <draw_ops name="minimize_unfocused_hover">

=== modified file 'metacity-1/minimize.svg'
--- metacity-1/minimize.svg	2013-06-04 04:15:55 +0000
+++ metacity-1/minimize.svg	2014-02-09 08:49:06 +0000
@@ -15,8 +15,8 @@
    height="16"
    id="svg2"
    sodipodi:version="0.32"
-   inkscape:version="0.48.3.1 r9886"
-   sodipodi:docname="minimize-normal.svg"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="minimize.svg"
    inkscape:output_extension="org.inkscape.output.svg.inkscape">
   <metadata
      id="metadata11">
@@ -31,7 +31,7 @@
     </rdf:RDF>
   </metadata>
   <sodipodi:namedview
-     inkscape:window-height="752"
+     inkscape:window-height="747"
      inkscape:window-width="1280"
      inkscape:pageshadow="2"
      inkscape:pageopacity="0.0"
@@ -46,10 +46,10 @@
      showguides="false"
      inkscape:guide-bbox="true"
      inkscape:zoom="23.714286"
-     inkscape:cx="5.364458"
+     inkscape:cx="-1.0030118"
      inkscape:cy="5.5637351"
      inkscape:window-x="0"
-     inkscape:window-y="26"
+     inkscape:window-y="28"
      inkscape:current-layer="svg2"
      inkscape:window-maximized="1">
     <sodipodi:guide
@@ -249,16 +249,6 @@
        x2="22.886868"
        y2="-0.92556846" />
     <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient3587-6-5-1-5-3-6"
-       id="linearGradient3136-3"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.7071068,0.7071068,-0.7071068,0.7071068,-25.794343,-7.9832226)"
-       x1="31.715971"
-       y1="-17.501192"
-       x2="39.465767"
-       y2="-9.7513943" />
-    <linearGradient
        id="linearGradient3587-6-5-1-5-3-6">
       <stop
          id="stop3589-9-2-8-5-9-1"
@@ -303,13 +293,7 @@
   </defs>
   <path
      inkscape:connector-curvature="0"
-     style="opacity:0.6;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99829447;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-     id="path3288-51-5"
-     d="m 7.9999995,4 0,3.9999999 -2.999999,0 L 8.1562495,12 l -3.156249,0 0,2 L 13,14 13,12 9.8437495,12 13,7.9999999 l -3.0000005,0 0,-3.9999999 z"
-     sodipodi:nodetypes="ccccccccccccc" />
-  <path
-     inkscape:connector-curvature="0"
-     style="opacity:0.5;color:#000000;fill:url(#linearGradient3136-3);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99829447;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+     style="opacity:1;color:#bebebe;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
      id="path3288-51"
      d="m 7.9999995,3 0,3.9999997 -2.999999,0 L 8.1562495,11 l -3.156249,0 0,2 L 13,13 13,11 9.8437495,11 13,6.9999997 l -3.0000005,0 0,-3.9999997 z"
      sodipodi:nodetypes="ccccccccccccc" />

=== modified file 'metacity-1/unmaximize.svg'
--- metacity-1/unmaximize.svg	2013-06-04 04:15:55 +0000
+++ metacity-1/unmaximize.svg	2014-02-09 08:49:06 +0000
@@ -14,8 +14,8 @@
    width="18"
    height="16"
    id="svg2747"
-   inkscape:version="0.48.3.1 r9886"
-   sodipodi:docname="unmaximize-normal.svg">
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="unmaximize.svg">
   <sodipodi:namedview
      pagecolor="#ffffff"
      bordercolor="#666666"
@@ -25,7 +25,7 @@
      guidetolerance="10"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:window-width="669"
+     inkscape:window-width="677"
      inkscape:window-height="480"
      id="namedview62"
      showgrid="false"
@@ -302,15 +302,7 @@
          id="tspan4089-7-2-9-13" /></text>
   </g>
   <path
-     d="M 9,14 9,9 4,9 5.8125,10.8125 4.59375,12 4,12.5625 5.40625,14 6,13.40625 7.1875,12.1875 9,14 z m 5,-5 -1.78125,-1.78125 1.5,-1.5 L 14,5.4375 12.5625,4 l -0.28125,0.28125 -1.5,1.5 L 9,4 9,9 14,9 z"
-     id="path2394-5-4"
-     style="opacity:0.6;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99829447000000004;marker:none;visibility:visible;display:inline;overflow:visible" />
-  <path
-     d="m 14,8 -1.78125,-1.78125 1.5,-1.5 L 14,4.4375 12.5625,3 l -0.28125,0.28125 -1.5,1.5 L 9,3 9,8 14,8 z"
-     id="path6691-1"
-     style="opacity:0.5;color:#000000;fill:url(#linearGradient6693-5);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99829447000000004;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <path
-     d="M 9,13 9,8 4,8 5.8125,9.8125 4.59375,11 4,11.5625 5.40625,13 6,12.40625 7.1875,11.1875 9,13 z"
-     id="path2394-2"
-     style="opacity:0.5;color:#000000;fill:url(#linearGradient6695-0);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99829447000000004;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+     style="opacity:1;color:#bebebe;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+     d="M 9 3 L 9 8 L 14 8 L 12.21875 6.21875 L 13.71875 4.71875 L 14 4.4375 L 12.5625 3 L 12.28125 3.28125 L 10.78125 4.78125 L 9 3 z M 9 8 L 4 8 L 5.8125 9.8125 L 4.59375 11 L 4 11.5625 L 5.40625 13 L 6 12.40625 L 7.1875 11.1875 L 9 13 L 9 8 z "
+     id="path6691-1" />
 </svg>