Merge lp:~larsu/ubuntu-themes/three-twelve into lp:ubuntu-themes

[Lars Karlitski]

Fixes required by the 3.12 update

Unify notebook borders and paddings to get rid of the border around tab bars (on notebooks and stand-alone, such as in gedit and gnome-terminal).

Also, style header bars similarly to window title bars, but take care that header bars that are used as tool bars keep the same look as tool bars.

Fixes required by the 3.12 update

Unify notebook borders and paddings to get rid of the border around tab bars (on notebooks and stand-alone, such as in gedit and gnome-terminal).

Also, style header bars similarly to window title bars, but take care that header bars that are used as tool bars keep the same look as tool bars.

I hope this is okay as a single commit. Let me know if you prefer the headerbar stuff in a separate commit.

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:386
http://jenkins.qa.ubuntu.com/job/ubuntu-themes-ci/70/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-utopic-amd64-ci/9
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-utopic-armhf-ci/9
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-utopic-i386-ci/9

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-themes-ci/70/rebuild

review: Approve (continuous-integration)

[lp:~larsu/ubuntu-themes/three-twelve]

387. By Lars Karlitski on 2014-07-10

Unset border-radius for header bars that are used as tool bars

388. By Lars Karlitski on 2014-07-10

Nautilus: add padding to toolbar buttons

[Lars Karlitski (larsu)]

Updated to be able to get rid of nautilus' ubuntu_title_bar_css.patch (see lp:~larsu/nautilus/remove-titlebar-css-patch ).

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:388
http://jenkins.qa.ubuntu.com/job/ubuntu-themes-ci/71/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-utopic-amd64-ci/10
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-utopic-armhf-ci/10
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-utopic-i386-ci/10

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-themes-ci/71/rebuild

review: Approve (continuous-integration)

[Sebastien Bacher (seb128)]

Looks good, thanks

review: Approve

=== modified file 'Ambiance/gtk-3.0/apps/gedit.css'
--- Ambiance/gtk-3.0/apps/gedit.css	2014-01-15 13:42:18 +0000
+++ Ambiance/gtk-3.0/apps/gedit.css	2014-07-10 15:07:43 +0000
@@ -14,7 +14,6 @@
 }
 
 GeditWindow .notebook {
-    padding: 1px;
     border-radius: 1px;
 }
 

=== modified file 'Ambiance/gtk-3.0/apps/nautilus.css'
--- Ambiance/gtk-3.0/apps/nautilus.css	2013-05-22 17:18:39 +0000
+++ Ambiance/gtk-3.0/apps/nautilus.css	2014-07-10 15:07:43 +0000
@@ -105,6 +105,10 @@
     -GtkButton-inner-border: 0;
 }
 
+NautilusWindow .header-bar .button {
+    padding: 9px;
+}
+
 /* sidebar */
 NautilusWindow .sidebar,
 NautilusWindow .sidebar .view {

=== modified file 'Ambiance/gtk-3.0/gtk-widgets.css'
--- Ambiance/gtk-3.0/gtk-widgets.css	2014-06-18 12:00:26 +0000
+++ Ambiance/gtk-3.0/gtk-widgets.css	2014-07-10 15:07:43 +0000
@@ -117,14 +117,6 @@
     box-shadow: inset -1px 0 shade (@bg_color, 0.94);
 }
 
-/**************
- * background *
- **************/
-.background {
-    background-color: @bg_color;
-    border-width: 0;
-}
-
 /**********
  * button *
  **********/
@@ -1178,101 +1170,66 @@
 /************
  * notebook *
  ************/
-.notebook {
-    background-color: shade (@bg_color, 1.02);
-    background-image: none;
-    border-radius: 3px;
-    padding: 2px;
-    background-clip: border-box;
-    border-color: shade (@bg_color, 0.82);
-    border-width: 1px;
-    border-style: solid;
-    /*box-shadow: inset 0 1px shade (@bg_color, 1.1);*/
-    /*font-weight: 300;*/
-}
-
-.notebook tab {
-    background-image: none;
-    background-color: transparent;
-    border-style: solid;
-    border-image: -gtk-gradient (linear, left top, left bottom,
-                                 from (alpha (shade (@bg_color, 0.9), 0.0)),
-                                 to (shade (@bg_color, 0.9))) 1;
-    border-image-width: 0 1px;
-    border-color: transparent;
-    border-width: 0;
-    box-shadow: none;
-    /*color: shade (@fg_color, 1.2);*/
-}
-
+.notebook tab.top { padding: 4px 6px 2px 6px; }
+.notebook tab.top:active { padding-bottom: 3px; }
+.notebook tab.bottom { padding: 2px 6px 4px 6px; }
+.notebook tab.bottom:active { padding-top: 3px; }
+.notebook tab.left { padding: 2px 4px 2px 6px; }
+.notebook tab.left:active { padding-right: 5px; }
+.notebook tab.right { padding: 2px 6px 2px 4px; }
+.notebook tab.right:active { padding-left: 5px; }
+
+/* give active tab a background, as it might be dragged across of others when reordering */
 .notebook tab:active {
+    background-color: @bg_color;
+}
+
+.notebook.header {
+    border-width: 0; /* set below depending on position of tab bar */
     border-color: shade (@bg_color, 0.82);
     border-style: solid;
-    border-width: 1px;
-    background-color: shade (@bg_color, 1.02);
-    background-image: none;
-    /*box-shadow: inset 0 1px shade (@bg_color, 1.1);*/
-
-    color: @fg_color;
-}
-
-.notebook tab GtkLabel {
-    /*padding: 1px;*/
-    padding: 1px 1px 2px 1px;
-}
-
-.notebook tab {
-    color: shade (@bg_color, 0.48);
-}
-
-.notebook tab.top:active {
-    padding: 3px 7px 1px 7px;
-}
+}
+
+/* Draw a border between tabs and content ... */
+.notebook.header.top { border-bottom-width: 1px; }
+.notebook.header.right { border-left-width: 1px; }
+.notebook.header.left { border-right-width: 1px; }
+.notebook.header.bottom { border-top-width: 1px; }
+
+/* ... unless the content is in a frame (thus having a border itself */
+.notebook.header.frame.top { border: none; }
+.notebook.header.frame.right { border: none; }
+.notebook.header.frame.right { border: none; }
+.notebook.header.frame.bottom { border: none; }
 
 .notebook tab.top {
-    padding: 2px 5px 0 5px;
-}
-
-.notebook tab.right:active {
-    padding: 4px 6px 4px 1px;
+    border-image: -gtk-gradient (linear, left top, left bottom,
+                                 from (alpha (shade (@bg_color, 0.9), 0.0)),
+                                 to (shade (@bg_color, 0.9))) 1;
+    border-image-width: 0 1px;
 }
 
 .notebook tab.right {
-    padding: 3px 4px 3px 0;
     border-image: -gtk-gradient (linear, right top, left top,
                                  from (alpha (shade (@bg_color, 0.9), 0.0)),
                                  to (shade (@bg_color, 0.9))) 1;
     border-image-width: 1px 0;
 }
 
-.notebook tab.bottom:active {
-    padding: 1px 7px 4px 7px;
+.notebook tab.left {
+    border-image: -gtk-gradient (linear, left top, right top,
+                                 from (alpha (shade (@bg_color, 0.9), 0.0)),
+                                 to (shade (@bg_color, 0.9))) 1;
+    border-image-width: 1px 0;
 }
 
 .notebook tab.bottom {
-    padding: 0 5px 3px 5px;
     border-image: -gtk-gradient (linear, left bottom, left top,
                                  from (alpha (shade (@bg_color, 0.9), 0.0)),
                                  to (shade (@bg_color, 0.9))) 1;
     border-image-width: 0 1px;
 }
 
-.notebook tab.left:active {
-    padding: 4px 1px 4px 6px;
-}
-
-.notebook tab.left {
-    padding: 3px 0 3px 4px;
-    border-image: -gtk-gradient (linear, left top, right top,
-                                 from (alpha (shade (@bg_color, 0.9), 0.0)),
-                                 to (shade (@bg_color, 0.9))) 1;
-    border-image-width: 1px 0;
-}
-
-.notebook tab .button {
-    padding: 0;
-}
-
 .notebook GtkDrawingArea {
         background-color: shade (@bg_color, 1.02);
 }
@@ -1903,6 +1860,59 @@
     background-color: @base_color;
 }
 
+/*
+ * Header Bars
+ *
+ * The following rules only style header bars when they are used as a window's
+ * titlebar widget (i.e., they have .titlebar set as well).
+ *
+ * Some applications reuse their header bar as a primary toolbar on desktops
+ * that prefer showing traditional title bars. The rules for those are further
+ * down grouped with normal toolbars.
+ */
+.titlebar.header-bar {
+    padding: 2px;
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@dark_bg_color, 1.5)),
+                                     to (@dark_bg_color));
+    border-color: shade (@dark_bg_color, 1.5);
+    border-style: solid;
+    border-width: 1px 0 0 0;
+    border-radius: 7px 7px 0 0;
+
+    color: @dark_fg_color;
+    text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
+
+    box-shadow: inset 0 1px shade (@dark_bg_color, 1.65);
+}
+
+.titlebar.header-bar .title {
+    font: bold;
+}
+
+.titlebar.header-bar:backdrop {
+    color: @backdrop_fg_color;
+    background-image: none;
+    background-color: @dark_bg_color;
+    border-top-color: @dark_bg_color;
+    box-shadow: inset 0 1px shade (@dark_bg_color, 1.2);
+}
+
+.maximized .titlebar.header-bar {
+    border-radius: 0;
+    border: none;
+}
+
+.titlebar.header-bar .button.titlebutton {
+    background-color: transparent;
+    border-image-width: 0;
+    box-shadow: none;
+}
+
+.titlebar.header-bar .button.titlebutton:hover {
+    border-image-width: 12px;
+}
+
 /***********
  * toolbar *
  ***********/
@@ -1938,6 +1948,7 @@
     border-top-color: shade (@dark_bg_color, 1.09);
     border-style: solid;
     border-width: 1px 0 1px 0;
+    border-radius: 0;
 
     color: @dark_fg_color;
     text-shadow: 0 -1px shade (@dark_bg_color, 0.7);

=== modified file 'Radiance/gtk-3.0/apps/gedit.css'
--- Radiance/gtk-3.0/apps/gedit.css	2014-01-15 13:42:18 +0000
+++ Radiance/gtk-3.0/apps/gedit.css	2014-07-10 15:07:43 +0000
@@ -14,7 +14,6 @@
 }
 
 GeditWindow .notebook {
-    padding: 1px;
     border-radius: 1px;
 }
 

=== modified file 'Radiance/gtk-3.0/apps/nautilus.css'
--- Radiance/gtk-3.0/apps/nautilus.css	2013-05-22 17:18:39 +0000
+++ Radiance/gtk-3.0/apps/nautilus.css	2014-07-10 15:07:43 +0000
@@ -105,6 +105,10 @@
     -GtkButton-inner-border: 0;
 }
 
+NautilusWindow .header-bar .button {
+    padding: 9px;
+}
+
 /* sidebar */
 NautilusWindow .sidebar,
 NautilusWindow .sidebar .view {

=== modified file 'Radiance/gtk-3.0/gtk-widgets.css'
--- Radiance/gtk-3.0/gtk-widgets.css	2014-06-18 12:00:26 +0000
+++ Radiance/gtk-3.0/gtk-widgets.css	2014-07-10 15:07:43 +0000
@@ -116,14 +116,6 @@
     box-shadow: inset -1px 0 shade (@bg_color, 0.94);
 }
 
-/**************
- * background *
- **************/
-.background {
-    background-color: @bg_color;
-    border-width: 0;
-}
-
 /**********
  * button *
  **********/
@@ -1181,101 +1173,66 @@
 /************
  * notebook *
  ************/
-.notebook {
-    background-color: shade (@bg_color, 1.02);
-    background-image: none;
-    border-radius: 3px;
-    padding: 2px;
-    background-clip: border-box;
-    border-color: shade (@bg_color, 0.82);
-    border-width: 1px;
-    border-style: solid;
-    /*box-shadow: inset 0 1px shade (@bg_color, 1.1);*/
-    /*font-weight: 300;*/
-}
-
-.notebook tab {
-    background-image: none;
-    background-color: transparent;
-    border-style: solid;
-    border-image: -gtk-gradient (linear, left top, left bottom,
-                                 from (alpha (shade (@bg_color, 0.9), 0.0)),
-                                 to (shade (@bg_color, 0.9))) 1;
-    border-image-width: 0 1px;
-    border-color: transparent;
-    border-width: 0;
-    box-shadow: none;
-    /*color: shade (@fg_color, 1.2);*/
-}
-
+.notebook tab.top { padding: 4px 6px 2px 6px; }
+.notebook tab.top:active { padding-bottom: 3px; }
+.notebook tab.bottom { padding: 2px 6px 4px 6px; }
+.notebook tab.bottom:active { padding-top: 3px; }
+.notebook tab.left { padding: 2px 4px 2px 6px; }
+.notebook tab.left:active { padding-right: 5px; }
+.notebook tab.right { padding: 2px 6px 2px 4px; }
+.notebook tab.right:active { padding-left: 5px; }
+
+/* give active tab a background, as it might be dragged across of others when reordering */
 .notebook tab:active {
+    background-color: @bg_color;
+}
+
+.notebook.header {
+    border-width: 0; /* set below depending on position of tab bar */
     border-color: shade (@bg_color, 0.82);
     border-style: solid;
-    border-width: 1px;
-    background-color: shade (@bg_color, 1.02);
-    background-image: none;
-    /*box-shadow: inset 0 1px shade (@bg_color, 1.1);*/
-
-    color: @fg_color;
-}
-
-.notebook tab GtkLabel {
-    /*padding: 1px;*/
-    padding: 1px 1px 2px 1px;
-}
-
-.notebook tab {
-    color: shade (@bg_color, 0.48);
-}
-
-.notebook tab.top:active {
-    padding: 3px 7px 1px 7px;
-}
+}
+
+/* Draw a border between tabs and content ... */
+.notebook.header.top { border-bottom-width: 1px; }
+.notebook.header.right { border-left-width: 1px; }
+.notebook.header.left { border-right-width: 1px; }
+.notebook.header.bottom { border-top-width: 1px; }
+
+/* ... unless the content is in a frame (thus having a border itself */
+.notebook.header.frame.top { border: none; }
+.notebook.header.frame.right { border: none; }
+.notebook.header.frame.right { border: none; }
+.notebook.header.frame.bottom { border: none; }
 
 .notebook tab.top {
-    padding: 2px 5px 0 5px;
-}
-
-.notebook tab.right:active {
-    padding: 4px 6px 4px 1px;
+    border-image: -gtk-gradient (linear, left top, left bottom,
+                                 from (alpha (shade (@bg_color, 0.9), 0.0)),
+                                 to (shade (@bg_color, 0.9))) 1;
+    border-image-width: 0 1px;
 }
 
 .notebook tab.right {
-    padding: 3px 4px 3px 0;
     border-image: -gtk-gradient (linear, right top, left top,
                                  from (alpha (shade (@bg_color, 0.9), 0.0)),
                                  to (shade (@bg_color, 0.9))) 1;
     border-image-width: 1px 0;
 }
 
-.notebook tab.bottom:active {
-    padding: 1px 7px 4px 7px;
+.notebook tab.left {
+    border-image: -gtk-gradient (linear, left top, right top,
+                                 from (alpha (shade (@bg_color, 0.9), 0.0)),
+                                 to (shade (@bg_color, 0.9))) 1;
+    border-image-width: 1px 0;
 }
 
 .notebook tab.bottom {
-    padding: 0 5px 3px 5px;
     border-image: -gtk-gradient (linear, left bottom, left top,
                                  from (alpha (shade (@bg_color, 0.9), 0.0)),
                                  to (shade (@bg_color, 0.9))) 1;
     border-image-width: 0 1px;
 }
 
-.notebook tab.left:active {
-    padding: 4px 1px 4px 6px;
-}
-
-.notebook tab.left {
-    padding: 3px 0 3px 4px;
-    border-image: -gtk-gradient (linear, left top, right top,
-                                 from (alpha (shade (@bg_color, 0.9), 0.0)),
-                                 to (shade (@bg_color, 0.9))) 1;
-    border-image-width: 1px 0;
-}
-
-.notebook tab .button {
-    padding: 0;
-}
-
 .notebook GtkDrawingArea {
         background-color: shade (@bg_color, 1.02);
 }
@@ -1913,6 +1870,58 @@
     background-color: @base_color;
 }
 
+/*
+ * Header Bars
+ *
+ * The following rules only style header bars when they are used as a window's
+ * titlebar widget (i.e., they have .titlebar set as well).
+ *
+ * Some applications reuse their header bar as a primary toolbar on desktops
+ * that prefer showing traditional title bars. The rules for those are further
+ * down grouped with normal toolbars.
+ */
+.titlebar.header-bar {
+    padding: 2px;
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@dark_bg_color, 1.5)),
+                                     to (@dark_bg_color));
+    border-color: shade (@dark_bg_color, 1.5);
+    border-style: solid;
+    border-width: 1px 0 0 0;
+    border-radius: 7px 7px 0 0;
+
+    color: @dark_fg_color;
+
+    box-shadow: inset 0 1px shade (@dark_bg_color, 1.65);
+}
+
+.titlebar.header-bar .title {
+    font: bold;
+}
+
+.titlebar.header-bar:backdrop {
+    color: @backdrop_fg_color;
+    background-image: none;
+    background-color: @dark_bg_color;
+    border-top-color: @dark_bg_color;
+}
+
+.maximized .titlebar.header-bar {
+    border-radius: 0;
+    border: none;
+}
+
+.titlebar.header-bar .button.titlebutton {
+    background-color: transparent;
+    border-image-width: 0;
+    box-shadow: none;
+}
+
+.titlebar.header-bar .button.titlebutton:hover {
+    border-image-width: 12px;
+}
+
+
 /***********
  * toolbar *
  ***********/
@@ -1948,6 +1957,7 @@
     border-top-color: shade (@dark_bg_color, 1.09);
     border-style: solid;
     border-width: 1px 0 1px 0;
+    border-radius: 0;
 
     color: @dark_fg_color;
     text-shadow: 0 -1px shade (@dark_bg_color, 0.7);