Update the style of GtkNotebook tabs

This changes the style to be less visually prominent, a bit flatter,
and hopefully more elegant.

https://bugzilla.gnome.org/show_bug.cgi?id=707922

2 files changed, 29 insertions, 117 deletions

diff --git a/themes/Adwaita/gtk-3.0/gnome-applications.css b/themes/Adwaita/gtk-3.0/gnome-applications.css
index a06f32ab..ab7f4d6f 100644
--- a/themes/Adwaita/gtk-3.0/gnome-applications.css
+++ b/themes/Adwaita/gtk-3.0/gnome-applications.css
@@ -162,12 +162,8 @@ GeditPanel.horizontal .notebook {
     border-width: 0 1px 1px 0;
 }
 
-GeditWindow .notebook {
-    border-width: 1px 0;
-}
-
-GeditPanel .notebook tab,
-GeditWindow .notebook tab {
+GeditPanel .notebook tab
+{
     border-width: 0;
 }
 
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets.css b/themes/Adwaita/gtk-3.0/gtk-widgets.css
index c69f8d45..985815a1 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets.css
@@ -1793,17 +1793,23 @@ GtkLinkButton.button:active {
     border-style: solid;
     border-width: 1px;
 
-    background-clip: border-box;
     background-color: @theme_base_color;
+    -GtkNotebook-initial-gap: 10;
+    -GtkNotebook-arrow-spacing: 5;
+    -GtkNotebook-tab-curvature: 0;
+}
 
-    -GtkNotebook-tab-overlap: 8;
-    -GtkNotebook-tab-curvature: 6;
-    /* FIXME - the gap should be applied only to top or bottom tabs */
-    -GtkNotebook-initial-gap: 8;
+.notebook.header,
+.notebook.header:backdrop {
+    background-color: shade(@theme_bg_color, 0.95);
+    box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03);
+    border: 0px;
+    border-top: 1px solid @borders;
 }
 
 .notebook GtkViewport {
     background-color: @theme_base_color;
+    border-width: 0px;
 }
 
 .notebook:backdrop,
@@ -1812,120 +1818,31 @@ GtkLinkButton.button:active {
     border-color: @unfocused_borders;
 }
 
-.notebook tab {
-    padding: 3px;
-    border-style: solid;
-    /* we draw our own custom border here for now */
-    border-width: 0;
-
-    background-image: linear-gradient(to bottom,
-                                      @notebook_tab_hilight 1px,
-                                      @notebook_tab_gradient_a 2px,
-                                      @notebook_tab_gradient_a 7px,
-                                      @notebook_tab_gradient_b);
-}
-
-.notebook tab.bottom {
-    /* FIXME: Adwaita engine arrogantly flips my gradients upside down! */
-    background-image: linear-gradient(to top,
-				      @notebook_tab_gradient_b,
-                                      @notebook_tab_gradient_a 3px,
-                                      @notebook_tab_gradient_a 7px,
-                                      @notebook_tab_gradient_b);
-}
-
+.notebook tab,
 .notebook tab:backdrop {
+    padding: 10px 20px 5px;
+    border-width: 0px;
     background-image: none;
-    background-color: @theme_unfocused_bg_color;
-    border-color: @unfocused_insensitive_borders;
-}
-
-.notebook tab:active {
-    background-image: linear-gradient(to bottom,
-                                      @notebook_selected_tab_color,
-                                      @notebook_selected_tab_color 2px,
-                                      @button_gradient_color_a 3px, /* FIXME */
-                                      @theme_base_color
-                                      );
-}
-
-.notebook tab.top:active,
-.notebook tab.bottom:active {
-    border-image-source: -gtk-gradient (linear,
-                                        left top, left bottom,
-                                        from (@notebook_active_tab_border),
-                                        to (@borders));
-}
-
-.notebook tab:active:backdrop {
-    background-image: linear-gradient(to bottom,
-                                      @unfocused_borders,
-                                      @unfocused_borders 2px,
-                                      @theme_unfocused_base_color 3px,
-                                      @theme_unfocused_base_color
-                                      );
-    background-color:  @theme_unfocused_base_color;
-    border-color: @unfocused_borders;
-}
-
-.notebook tab.top:active:backdrop,
-.notebook tab.bottom:active:backdrop {
-    /* FIXME - should be possible to set it to none and use border color */
-    border-image-source: -gtk-gradient (linear,
-                                        left top, left bottom,
-                                        from (@unfocused_borders),
-                                        to (@unfocused_borders));
-}
-
-.notebook tab.top {
-    padding: 4px 2px 0;
-}
-
-.notebook tab.top:active {
-    padding: 7px 2px 0;
-}
-
-.notebook tab.bottom {
-    padding: 0 2px 4px;
-}
-
-.notebook tab.bottom:active {
-    padding: 0 2px 7px;
-}
-
-.notebook tab.left,
-.notebook tab.right {
-    background-image: none;
-    background-color: @theme_bg_color;
-    padding: 3px;
-}
-
-.notebook tab.left {
-    border-width: 1px 0 1px 1px;
-}
-
-.notebook tab.right {
-    border-width: 1px 1px 1px 0;
+    background-color: transparent;
 }
 
-.notebook tab.left:active,
-.notebook tab.right:active {
-    background-image: none;
-    background-color: @theme_base_color;
+.notebook tab GtkLabel {
+    color: mix (@theme_fg_color, @theme_bg_color, 0.50);
+    font-weight: bold;
 }
 
-.notebook tab.left:active:backdrop,
-.notebook tab.right:active:backdrop {
-    background-image: none;
-    background-color: @theme_unfocused_base_color;
+.notebook .active-page,
+.notebook tab .active-page GtkLabel {
+    color: @theme_fg_color;
 }
 
-.notebook tab.left:active {
-    padding: 3px 3px 3px 5px;
+.notebook tab:active {
+    border-bottom-width: 2px;
+    border-bottom-color: @notebook_active_tab_border;
 }
 
-.notebook tab.right:active {
-    padding: 3px 5px 3px 3px;
+.notebook tab:active:backdrop {
+    border-bottom-color: @unfocused_insensitive_borders;
 }
 
 /* close button styling */
@@ -1940,11 +1857,10 @@ GtkLinkButton.button:active {
     border-style: solid;
     border-color: transparent;
     border-width: 1px;
-    padding: 1px;
+    padding: 1px 0px 1px 10px;
     icon-shadow: 0 1px @button_text_shadow;
 }
 
-
 .notebook tab .button:hover {
     color: @theme_fg_color;
     border-color: alpha(black, 0.1);