Merge lp:~flexiondotorg/ubuntu-themes/notebook-refactor into lp:ubuntu-themes

[Martin Wimpress ]

Refactor Notebooks (tabs) to use visually improved styling throughout Ambiance and Radiance. Fixes missing notebooks in Firefox (LP: #1631208)

This merge proposal is a re-factor of Notebooks (tabs) in the Ambiance and Radiance themes. The following issues are addressed:

  * Firefox has tabs in dialogs such as Certificate Viewer (LP: #1631208)
  * Notebook style is visually improved with clear distinction between active and inactive tabs
  * Notebooks in Gedit and GNOME Terminal are consistent with notebooks used elsewhere

This work was completed as part of the "Fit and Finish" sprint 24th to 25th August 2017.

[Didier Roche-Tolomelli (didrocks)]

Approving on behalf of Will C.

review: Approve

[Adolfo Jayme Barrientos (fitojb)]

So this went stale.

Unmerged revisions

556. By Martin Wimpress  on 2017-08-25

Refactor notebooks.

=== modified file 'Ambiance/gtk-3.20/apps/gnome-terminal.css'
--- Ambiance/gtk-3.20/apps/gnome-terminal.css	2016-08-01 12:10:11 +0000
+++ Ambiance/gtk-3.20/apps/gnome-terminal.css	2017-08-25 11:48:27 +0000
@@ -16,61 +16,3 @@
 terminal-screen-container {
     background-color: transparent;
 }
-
-notebook.terminal-notebook header {
-    background-color: @dark_bg_color;
-    border: none;
-}
-
-
-notebook.terminal-notebook header.top tab,
-notebook.terminal-notebook header.top tab:hover {
-    background-color: shade(@bg_color, 0.7);
-    border-width: 1px 1px 0px 1px;
-    border-radius:  8px 8px 0px 0px;
-    border-image: none;
-    border-style: solid;
-    border-color: @dark_bg_color;
-}
-
-notebook.terminal-notebook header.top tab:checked {
-    background-color: @bg_color;
-}
-
-notebook.terminal-notebook tab button,
-notebook.terminal-notebook tab button:hover {
-    background-color: transparent;
-    padding: 1px;
-}
-
-notebook.terminal-notebook > header > box,
-notebook.terminal-notebook > header > box:hover {
-    padding-left: 5px;
-}
-
-notebook.terminal-notebook > header > box button,
-notebook.terminal-notebook > header > box button:hover,
-notebook.terminal-notebook > header > box button:hover:backdrop {
-    background: inherit;
-    border: inherit;
-    padding: inherit;
-}
-
-notebook.terminal-notebook > header > box > box > button:not(:last-child):hover,
-notebook.terminal-notebook > header > box > box > button:not(:last-child):hover:backdrop,
-notebook.terminal-notebook > header > box > box > button:not(:last-child) {
-    padding-right: 5px;
-}
-
-notebook.terminal-notebook > header > box button:hover,
-notebook.terminal-notebook > header > box button:hover:backdrop {
-    color: shade (@bg_color, 0.9);
-}
-
-notebook.terminal-notebook > header > box button {
-    color: shade (@bg_color, 0.7);
-}
-
-notebook.terminal-notebook > header > box button:backdrop {
-    color: shade (@bg_color, 0.4);
-}

=== modified file 'Ambiance/gtk-3.20/gtk-main.css'
--- Ambiance/gtk-3.20/gtk-main.css	2017-05-16 10:28:50 +0000
+++ Ambiance/gtk-3.20/gtk-main.css	2017-08-25 11:48:27 +0000
@@ -110,6 +110,33 @@
 @define-color focus_color alpha (@selected_bg_color, 0.5);
 @define-color focus_bg_color alpha (@selected_bg_color, 0.1);
 
+/************
+ * notebook *
+ ************/
+
+@define-color core_color_a #C0B7A9; /* Core color for orange widgets in Ambiance. */
+@define-color core_color_b #edeceb; /* Core color for gray widgets in Ambiance. */
+
+@define-color notebook_bg_color shade(@core_color_b, 1.02);
+@define-color border_color shade(@core_color_b, 0.67);
+@define-color notebook_tab_inner_border_color shade(@core_color_b, 1.04);
+
+@define-color notebook_tab_gradient_a shade(@core_color_b, 0.97);
+@define-color notebook_tab_gradient_b shade(@core_color_b, 0.92);
+@define-color notebook_tab_gradient_c shade(@core_color_b, 0.90);
+@define-color notebook_tab_gradient_d shade(@core_color_b, 0.86);
+
+/* active tab */
+
+@define-color notebook_active_tab_border @menubar_menuitem_hover_border_color;
+
+@define-color notebook_active_tab_strip_gradient_a shade(@core_color_a, 1.05);
+@define-color notebook_active_tab_strip_gradient_b shade(@core_color_a, 0.94);
+@define-color notebook_active_tab_strip_border_bottom_color mix(#727272, shade(@core_color_a, 0.84), 0.65);
+@define-color notebook_active_tab_gradient_a shade(@core_color_b, 1.07);
+@define-color notebook_active_tab_gradient_b @notebook_bg_color;
+
+
 @define-color scale_highlight_bg #df784e;
 
 @define-color osd_fg_color #eeeeec;

=== modified file 'Ambiance/gtk-3.20/gtk-widgets.css'
--- Ambiance/gtk-3.20/gtk-widgets.css	2017-06-09 08:46:35 +0000
+++ Ambiance/gtk-3.20/gtk-widgets.css	2017-08-25 11:48:27 +0000
@@ -600,41 +600,20 @@
 /*********
  * frame *
  *********/
-.frame {
-    border-radius: 3px;
-    border-width: 1px;
-    border-style: solid;
-    border-color: shade (@bg_color, 0.82);
-    border-image: none;
-    background: none;
-}
-
-notebook.frame {
-    border: none;
-}
-
-/* XXX: this is a copy of the above; adding notebook.frame stack there didn't
- * work */
-frame border, notebook.frame > stack {
-    border-radius: 3px;
-    border-width: 1px;
-    border-style: solid;
-    border-color: shade (@bg_color, 0.82);
-    border-image: none;
-    background: none;
-}
-
-.frame.flat, frame border.flat {
-    border: none;
-}
-
-scrolledwindow > viewport.frame,
-frame > box > stack > scrolledwindow {
-    border-style: none;
-}
-
-frame > box.vertical > scrolledwindow.frame {
-    border-width: 1px 0px 1px 0px;
+.frame,
+frame > border { /* firefox location entry */
+    border-radius: 3px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade (@bg_color, 0.82);
+    border-image: none;
+    background: none;
+}
+
+.frame.flat,
+frame > border.flat,
+overlay > frame > border {
+  border: none;
 }
 
 /************
@@ -1010,119 +989,455 @@
 
 notebook {
     padding: 0;
-    background-clip: border-box;
+    border-style: none;
 }
 
 notebook.frame {
-    background-clip: border-box;
-}
-
-notebook header.top tab { padding: 4px 6px 2px 6px; }
-notebook header.top tab:checked { padding-bottom: 3px; }
-notebook header.bottom tab { padding: 2px 6px 4px 6px; }
-notebook header.bottom tab:checked { padding-top: 3px; }
-notebook header.left tab { padding: 2px 4px 2px 6px; }
-notebook header.left tab:checked { padding-right: 5px; }
-notebook header.right tab { padding: 2px 6px 2px 4px; }
-notebook header.right tab:checked { padding-left: 5px; }
+    padding: 0;
+    border-style: solid;
+    border-color: shade (@bg_color, 0.82);
+    background-color: shade (@notebook_bg_color, 1.00);
+    border-width: 1px;
+    border-radius:  4px;
+}
+
+/* pavu-control */
+window.background > box.vertical > notebook:not(.frame),
+window.background.csd > box.vertical > notebook:not(.frame),
+window.background.ssd > box.vertical > notebook:not(.frame),
+window.background.solid-csd > box.vertical > notebook:not(.frame) {
+    background-color: shade (@notebook_bg_color, 1.00);
+    border-radius: 4px 4px 0px 0px;
+}
+
+window.background > box.vertical > notebook:not(.frame) > stack > box,
+window.background.csd > box.vertical > notebook:not(.frame) > stack > box,
+window.background.ssd > box.vertical > notebook:not(.frame) > stack > box,
+window.background.solid-csd > box.vertical > notebook:not(.frame) > stack > box {
+    border-style: solid;
+    border-width: 0px 1px 1px 1px;
+    border-color: shade (@bg_color, 0.82);
+}
+
+window.background > box.vertical > notebook:not(.frame) > header.top,
+window.background.csd > box.vertical > notebook:not(.frame) > header.top,
+window.background.ssd > box.vertical > notebook:not(.frame) > header.top,
+window.background.solid-csd > box.vertical > notebook:not(.frame) > header.top {
+    border-style: solid;
+    border-width: 1px 1px 0px 1px;
+    border-color: shade (@bg_color, 0.82);
+}
+
+printdialog > box.view.vertical.dialog-vbox > box.vertical > notebook {
+    background-color: shade (@notebook_bg_color, 1.00);
+    border-radius: 0px;
+    border-style: solid;
+    border-color: @borders;
+    border-width: 0px 0px 1px 0px;
+}
+
+dialog.background.csd > box.vertical.dialog-vbox > notebook, /* meld preferences */
+dialog.background.ssd > box.vertical.dialog-vbox > notebook,
+dialog.background.solid-csd > box.vertical.dialog-vbox > notebook {
+    background-color: shade (@notebook_bg_color, 1.00);
+}
+
+notebook :hover {
+    -gtk-icon-effect: highlight;
+}
 
 notebook header {
-    border-width: 0; /* set below depending on position of tab bar */
-    border-color: shade (@bg_color, 0.82);
-    border-style: solid;
-}
-
-/* Draw a border between tabs and content ... */
-notebook:not(.frame) header.top { border-bottom-width: 1px; }
-notebook:not(.frame) header.right { border-left-width: 1px; }
-notebook:not(.frame) header.left { border-right-width: 1px; }
-notebook:not(.frame) header.bottom { border-top-width: 1px; }
-
-notebook.frame header.top { border-bottom: 1px solid @bg_color; }
-
-notebook header.top tab {
-    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 header.top tab:checked,
-notebook header.top tab:checked:hover {
-    background-image: linear-gradient(to bottom,
-                                      shade(@bg_color, 1.075),
-                                      shade(@bg_color, 1));
-    border-radius: 4px 4px 0px 0px;
-    border-width: 0px 1px 0px 1px;
-    border-style: solid;
-    border-color: @borders;
-}
-
-notebook header.right tab {
-    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 header.right tab:checked,
-notebook header.right tab:checked:hover {
+    background-image: none;
+    background-color: shade (@theme_bg_color, 1.0);
+    border-width: 0px;
+}
+
+notebook header.top {
+    margin: -1px -1px 0px 0px;
+    border-width: 0px 0px 1px 0px;
+    border-radius: 4px 4px 0px 0px;
+    background-color: @theme_bg_color;
+    box-shadow: inset  0px -1px alpha(shade(@bg_color, 0.82), 0.90);
+}
+
+printdialog notebook header.top,
+dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top,
+dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top,
+dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top {
+    border-radius: 0px;
+}
+
+notebook header.bottom {
+    margin: 0px -1px -1px 0px;
+    border-width: 1px 0px 0px 0px;
+    border-radius: 0px 0px 4px 4px;
+    background-color: @theme_bg_color;
+    box-shadow: inset  0px  1px alpha(shade(@bg_color, 0.82), 0.90);
+}
+
+notebook header.left {
+    margin: 0px 0px -1px -1px;
+    border-width: 0px 1px 0px 0px;
+    border-radius: 4px 0px 0px 4px;
+    background-color: @theme_bg_color;
+    box-shadow: inset -1px  0px alpha(shade(@bg_color, 0.82), 0.90);
+}
+
+notebook header.right {
+    margin: 0px -1px -1px 0px;
+    border-width: 0px 0px 0px 1px;
+    border-radius: 0px 4px 4px 0px;
+    background-color: @theme_bg_color;
+    box-shadow: inset  1px  0px alpha(shade(@bg_color, 0.82), 0.90);
+}
+
+notebook header tab {
+    border-color: shade (@bg_color, 0.82);
+    border-style: solid;
+    border-width: 1px;
+    background-color: transparent;
+    background-image: linear-gradient(to bottom,
+                      @notebook_tab_gradient_a,
+                      @notebook_tab_gradient_d);
+    padding: 6px;
+}
+
+notebook header tab label {
+    color: @theme_fg_color;
+    font-weight: normal;
+}
+
+notebook header .prelight-page,
+notebook header .prelight-page label {
+    color: mix (@theme_fg_color, @theme_bg_color, 0.15);
+}
+
+notebook header .active-page,
+notebook header tab .active-page label {
+    color: @theme_fg_color;
+}
+
+/* tabs and header in view areas */
+.gedit-bottom-panel-paned > grid > notebook > header.top,
+window.background > notebook > header.top, /* nautilus preferences */
+paned.horizontal > box.vertical > notebook > header.top,
+paned.horizontal > paned.vertical > notebook > header.top {
+    border-style: solid;
+    border-color: shade (@bg_color, 0.82);
+    border-width: 1px 0px 0px 1px;
+    border-radius: 4px 4px 0px 0px;
+    box-shadow: none;
+}
+
+paned.horizontal > box.vertical > notebook scrolledwindow.frame,
+paned.horizontal > paned.vertical > notebook scrolledwindow.frame {
+    border-width: 1px 1px 1px 1px;
+    border-style: solid;
+    border-color: shade (@bg_color, 0.82);
+}
+
+.gedit-bottom-panel-paned > grid > notebook > header tab,
+window.background > notebook > header tab,
+paned.horizontal > notebook > header tab,
+paned.horizontal > box.vertical > notebook > header tab,
+paned.horizontal > paned.vertical > notebook > header tab {
+    padding: 6px;
+    margin: 0px -0px 0px -1px;
+    border-width: 0px 1px 0 1px;
+    border-style: solid;
+    border-radius: 4px 4px 0 0;
+}
+
+.gedit-bottom-panel-paned > grid > notebook > header tab:checked,
+.gedit-bottom-panel-paned > grid > notebook > header tab:checked:hover,
+window.background > notebook > header.top tab:checked,
+window.background > notebook > header.top tab:checked:hover,
+paned.horizontal > notebook > header.top tab:checked,
+paned.horizontal > notebook > header.top tab:checked:hover,
+paned.horizontal > box.vertical > notebook > header.top tab:checked,
+paned.horizontal > box.vertical > notebook > header.top tab:checked:hover,
+paned.horizontal > paned.vertical > notebook > header.top tab:checked,
+paned.horizontal > paned.vertical > notebook > header.top tab:checked:hover {
+    background-image: linear-gradient(to bottom,
+                                      shade(@notebook_bg_color, 1.18),
+                                      shade(@notebook_bg_color, 1.00));
+    border-radius: 4px 4px 0 0;
+    border-width: 1px 1px 0 1px;
+    border-style: solid;
+    box-shadow: none;
+}
+
+.gedit-bottom-panel-paned > grid > notebook > header button.flat.small-button,
+paned.horizontal > box.vertical > notebook > header button.flat,
+paned.horizontal > paned.vertical > notebook > header button.flat {
+    padding: 1px;
+}
+
+/* closable-page */
+paned.horizontal > notebook {
+    border-width: 1px 1px 1px 1px;
+    border-style: solid;
+    border-color: shade (@bg_color, 0.82);
+    border-radius: 4px 4px 0px 0px;
+}
+
+paned.horizontal > notebook > header {
+    border-width: 0px 0px 0px 0px;
+    border-style: solid;
+    border-color: shade (@bg_color, 0.82);
+    border-radius: 4px 4px 0px 0px;
+}
+
+paned.horizontal > notebook > header label {
+    padding: 4px;
+}
+
+paned.horizontal > notebook > header tab {
+    border-width: 1px 1px 1px 1px;
+}
+
+paned.horizontal > notebook > header button.flat.small-button {
+    padding: 1px;
+}
+
+paned.horizontal > notebook > stack > box {
+    background-color: shade (@notebook_bg_color, 1.00);
+}
+
+/* tabs in dialog windows */
+/* horizontal tabs */
+window.background > box.vertical > notebook > header.top tab, /* pavu-control */
+window.background.csd > box.vertical > notebook > header.top tab,
+window.background.ssd > box.vertical > notebook > header.top tab,
+window.background.solid-csd > box.vertical > notebook > header.top tab,
+dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top tab, /* meld preferences */
+dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top tab,
+dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top tab,
+printdialog notebook > header.top tab,
+notebook.frame > header.top tab,
+notebook.frame > header.bottom tab {
+    margin: 0px 0px 0px -1px;
+    border-width: 1px 1px 1px 1px;
+    border-style: solid;
+}
+
+window.background > box.vertical > notebook > header.top tab, /* pavu-control */
+window.background.csd > box.vertical > notebook > header.top tab,
+window.background.ssd > box.vertical > notebook > header.top tab,
+window.background.solid-csd > box.vertical > notebook > header.top tab,
+dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top tab,
+dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top tab,
+dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top tab,
+printdialog notebook > header.top tab,
+notebook.frame > header.top tab {
+    padding: 6px;
+    border-radius: 4px 4px 0px 0px;
+}
+
+window.background > box.vertical > notebook > header.top tab:checked, /* pavu-control */
+window.background.csd > box.vertical > notebook > header.top tab:checked,
+window.background.ssd > box.vertical > notebook > header.top tab:checked,
+window.background.solid-csd > box.vertical > notebook > header.top tab:checked,
+dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top tab:checked,
+dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top tab:checked,
+dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top tab:checked,
+dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top tab:checked:hover,
+dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top tab:checked:hover,
+dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top tab:checked:hover,
+printdialog notebook > header.top tab:checked,
+printdialog notebook > header.top tab:checked:hover,
+notebook.frame > header.top tab:checked,
+notebook.frame > header.top tab:checked:hover {
+    background-image: linear-gradient(to bottom,
+                                      shade(@notebook_bg_color, 1.18),
+                                      shade(@notebook_bg_color, 1.00));
+    border-radius: 4px 4px 0px 0px;
+    border-width: 1px 1px 0px 1px;
+    border-style: solid;
+}
+
+notebook.frame > header.bottom tab {
+    padding: 6px;
+}
+
+notebook.frame > header.bottom tab:checked,
+notebook.frame > header.bottom tab:checked:hover {
+    background-image: linear-gradient(to top,
+                                      shade(@notebook_bg_color, 1.18),
+                                      shade(@notebook_bg_color, 1.00));
+    border-radius: 0px 0px 4px 4px;
+    border-style: solid;
+    border-width: 0px 1px 1px 1px;
+}
+
+/* vertical tabs */
+notebook.frame > header.left tab,
+notebook.frame > header.right tab {
+    padding: 6px;
+    margin: -1px 0px 0px 0px;
+    border-width: 1px 1px 1px 1px;
+    border-style: solid;
+}
+
+notebook.frame > header.left tab {
+    border-radius: 4px 0px 0px 4px;
+}
+
+
+notebook.frame > header.left tab:checked,
+notebook.frame > header.left tab:checked:hover {
+    background-image: linear-gradient(to right,
+                                      shade(@notebook_bg_color, 1.18),
+                                      shade(@notebook_bg_color, 1.00));
+    border-style: solid;
+    border-width: 1px 0px 1px 1px;
+    border-radius: 4px 0px 0px 4px;
+}
+
+notebook.frame > header.right tab {
+    border-radius: 0px 4px 4px 0px;
+}
+
+notebook.frame > header.right tab:checked,
+notebook.frame > header.right tab:checked:hover {
     background-image: linear-gradient(to left,
-                                      shade(@bg_color, 1.075),
-                                      shade(@bg_color, 1));
-    border-radius:  0px 4px 4px 0px;
-    border-width: 1px 0px 1px 0px;
-    border-color: shade(@bg_color, 0.95);
-}
-
-notebook header.left tab {
-    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 header.left tab:checked,
-notebook header.left tab:checked:hover {
-    background-image: linear-gradient(to right,
-                                      shade(@bg_color, 1.075),
-                                      shade(@bg_color, 1));
-    border-radius: 4px 0px 0px 4px;
-    border-width: 1px 0px 1px 0px;
-    border-color: shade(@bg_color, 0.95);
-}
-
-notebook header.bottom tab {
-    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 header.bottom tab:checked,
-notebook header.bottom tab:checked:hover {
-    background-image: linear-gradient(to top,
-                                      shade(@bg_color, 1.075),
-                                      shade(@bg_color, 1));
-    border-radius: 0 0 4px 4px;
-    border-width: 0px 1px 0px 1px;
-    border-style: solid;
-    border-color: shade(@bg_color, 0.95);
-}
-
-/* Draw a focus ring around labels in tabs */
-notebook tab label {
-    border: 1px solid transparent;
-    border-radius: 5px;
-}
-
-notebook:focus tab:checked label {
-    border-color: @focus_color;
-    background-color: @focus_bg_color;
-}
-
-notebook GtkDrawingArea {
-        background-color: shade (@bg_color, 1.02);
+                                      shade(@notebook_bg_color, 1.18),
+                                      shade(@notebook_bg_color, 1.00));
+    border-style: solid;
+    border-width: 1px 1px 1px 0px;
+    border-radius: 0px 4px 4px 0px;
+}
+
+notebook tab.reorderable-page:checked,
+notebook tab.reorderable-page:checked:hover {
+    background-image: linear-gradient(to bottom,
+                                      shade(@notebook_bg_color, 1.18),
+                                      shade(@notebook_bg_color, 1.00));
+    border-radius: 4px 4px 0 0;
+    box-shadow: none;
+    border-style: solid;
+}
+
+/* outlines */
+notebook header.top tab:checked {
+    -gtk-outline-top-left-radius: 4px;
+    -gtk-outline-top-right-radius: 4px;
+    -gtk-outline-bottom-left-radius: 0px;
+    -gtk-outline-bottom-right-radius: 0px;
+}
+
+notebook header.bottom tab:checked {
+    -gtk-outline-top-left-radius: 0px;
+    -gtk-outline-top-right-radius: 0px;
+    -gtk-outline-bottom-left-radius: 4px;
+    -gtk-outline-bottom-right-radius: 4px;
+}
+
+notebook header.left tab:checked {
+    -gtk-outline-top-left-radius: 4px;
+    -gtk-outline-top-right-radius: 0px;
+    -gtk-outline-bottom-left-radius: 0px;
+    -gtk-outline-bottom-right-radius: 4px;
+}
+
+notebook header.right tab:checked {
+    -gtk-outline-top-left-radius: 0px;
+    -gtk-outline-top-right-radius: 4px;
+    -gtk-outline-bottom-left-radius: 4px;
+    -gtk-outline-bottom-right-radius: 0px;
+}
+
+/* close button styling */
+notebook > header > tabs > tab > box > button.flat,
+notebook > header > tabs > tab > box > button.flat.small-button {
+    border-image: none;
+    background-image: none;
+    background-color: transparent;
+    border-radius: 3px;
+    border-style: none;
+    border-color: transparent;
+    border-width: 0px;
+    -gtk-icon-shadow: none;
+    padding: 0px;
+}
+
+notebook > header > tabs > tab > box > button.flat:hover,
+notebook > header > tabs > tab > box > button.flat.small-button:hover {
+    -gtk-icon-effect: highlight;
+}
+
+notebook > header > tabs > tab > box > button.flat:checked,
+notebook > header > tabs > tab > box > button.flat:hover:active,
+notebook > header > tabs > tab > box > button.flat.small-button:checked,
+notebook > header > tabs > tab > box > button.flat.small-button:hover:active {
+    color:  @button_active_text;
+    background-color: alpha(black, 0.08);
+    box-shadow: inset 0 1px alpha(black, 0.05);
+    -gtk-icon-shadow: 0 1px @button_active_text_shadow;
+    border-color: alpha(black, 0.27)
+                        alpha(black, 0.13)
+                        alpha(black, 0.13)
+                        alpha(black, 0.13);
+}
+
+notebook > header > tabs > tab.prelight-page button.flat.small-button,
+notebook > header > tabs > tab.active-page button.flat.small-button {
+    color: mix(@theme_fg_color, @theme_base_color, 0.6);
+    -gtk-icon-shadow: 0 1px @button_text_shadow;
+}
+
+notebook header.top tabs arrow.up,
+notebook header.bottom tabs arrow.up {
+    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+}
+
+notebook header.top tabs arrow.down,
+notebook header.bottom tabs arrow.down {
+    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
+}
+
+notebook header.left tabs arrow.up,
+notebook header.right tabs arrow.up {
+    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
+}
+
+notebook header.left tabs arrow.down,
+notebook header.right tabs arrow.down {
+    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+}
+
+notebook header tabs arrow {
+    color: @theme_fg_color;
+}
+
+notebook header tabs arrow:hover {
+    color: @theme_selected_bg_color;
+}
+
+notebook header tabs arrow:active {
+    color: @theme_fg_color;
+}
+
+notebook header tabs arrow:disabled {
+    color: rgba(141, 144, 145, 0.3);
+}
+
+notebook header tabs arrow:backdrop {
+    color: rgba(84, 89, 90, 0.4);
+}
+
+notebook header tabs arrow:disabled {
+    color: #c7c7c7;
+}
+
+notebook header tab:checked label {
+    color: @theme_fg_color;
+    font-weight: normal;
+}
+
+notebook header tab label {
+    color: shade (@theme_fg_color, 1.30);
+    font-weight: normal;
 }
 
 /******************

=== modified file 'Radiance/gtk-3.20/apps/gnome-terminal.css'
--- Radiance/gtk-3.20/apps/gnome-terminal.css	2016-08-04 16:31:00 +0000
+++ Radiance/gtk-3.20/apps/gnome-terminal.css	2017-08-25 11:48:27 +0000
@@ -16,61 +16,3 @@
 terminal-screen-container {
     background-color: transparent;
 }
-
-notebook.terminal-notebook header {
-    background-color: @dark_bg_color;
-    border: none;
-}
-
-
-notebook.terminal-notebook header.top tab,
-notebook.terminal-notebook header.top tab:hover {
-    background-color: shade(@bg_color, 0.75);
-    border-width: 1px 1px 0px 1px;
-    border-radius:  8px 8px 0px 0px;
-    border-image: none;
-    border-style: solid;
-    border-color: @dark_bg_color;
-}
-
-notebook.terminal-notebook header.top tab:checked {
-    background-color: shade(@bg_color, 1.2);
-}
-
-notebook.terminal-notebook tab button,
-notebook.terminal-notebook tab button:hover {
-    background-color: transparent;
-    padding: 1px;
-}
-
-notebook.terminal-notebook > header > box,
-notebook.terminal-notebook > header > box:hover {
-    padding-left: 5px;
-}
-
-notebook.terminal-notebook > header > box button,
-notebook.terminal-notebook > header > box button:hover,
-notebook.terminal-notebook > header > box button:hover:backdrop {
-    background: inherit;
-    border: inherit;
-    padding: inherit;
-}
-
-notebook.terminal-notebook > header > box > box > button:not(:last-child):hover,
-notebook.terminal-notebook > header > box > box > button:not(:last-child):hover:backdrop,
-notebook.terminal-notebook > header > box > box > button:not(:last-child) {
-    padding-right: 5px;
-}
-
-notebook.terminal-notebook > header > box button:hover,
-notebook.terminal-notebook > header > box button:hover:backdrop {
-    color: shade (@bg_color, 0.9);
-}
-
-notebook.terminal-notebook > header > box button {
-    color: shade (@bg_color, 0.7);
-}
-
-notebook.terminal-notebook > header > box button:backdrop {
-    color: shade (@bg_color, 0.4);
-}

=== modified file 'Radiance/gtk-3.20/gtk-main.css'
--- Radiance/gtk-3.20/gtk-main.css	2017-05-16 10:28:50 +0000
+++ Radiance/gtk-3.20/gtk-main.css	2017-08-25 11:48:27 +0000
@@ -107,6 +107,33 @@
 @define-color focus_color alpha (@selected_bg_color, 0.5);
 @define-color focus_bg_color alpha (@selected_bg_color, 0.1);
 
+/************
+ * notebook *
+ ************/
+
+@define-color core_color_a #C0B7A9; /* Core color for orange widgets in Radiance. */
+@define-color core_color_b #edeceb; /* Core color for gray widgets in Radiance. */
+
+@define-color notebook_bg_color shade(@core_color_b, 1.02);
+@define-color border_color shade(@core_color_b, 0.67);
+@define-color notebook_tab_inner_border_color shade(@core_color_b, 1.04);
+
+@define-color notebook_tab_gradient_a shade(@core_color_b, 0.97);
+@define-color notebook_tab_gradient_b shade(@core_color_b, 0.92);
+@define-color notebook_tab_gradient_c shade(@core_color_b, 0.90);
+@define-color notebook_tab_gradient_d shade(@core_color_b, 0.86);
+
+/* active tab */
+
+@define-color notebook_active_tab_border @menubar_menuitem_hover_border_color;
+
+@define-color notebook_active_tab_strip_gradient_a shade(@core_color_a, 1.05);
+@define-color notebook_active_tab_strip_gradient_b shade(@core_color_a, 0.94);
+@define-color notebook_active_tab_strip_border_bottom_color mix(#727272, shade(@core_color_a, 0.84), 0.65);
+@define-color notebook_active_tab_gradient_a shade(@core_color_b, 1.07);
+@define-color notebook_active_tab_gradient_b @notebook_bg_color;
+
+
 @define-color scale_highlight_bg #df784e;
 
 @define-color shadow_color alpha(black, 0.5);

=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
--- Radiance/gtk-3.20/gtk-widgets.css	2017-06-09 08:46:35 +0000
+++ Radiance/gtk-3.20/gtk-widgets.css	2017-08-25 11:48:27 +0000
@@ -609,41 +609,20 @@
 /*********
  * frame *
  *********/
-.frame {
-    border-radius: 3px;
-    border-width: 1px;
-    border-style: solid;
-    border-color: shade (@bg_color, 0.82);
-    border-image: none;
-    background: none;
-}
-
-notebook.frame {
-    border: none;
-}
-
-/* XXX: this is a copy of the above; adding notebook.frame stack there didn't
- * work */
-frame border, notebook.frame > stack {
-    border-radius: 3px;
-    border-width: 1px;
-    border-style: solid;
-    border-color: shade (@bg_color, 0.82);
-    border-image: none;
-    background: none;
-}
-
-.frame.flat, frame border.flat {
-    border: none;
-}
-
-scrolledwindow > viewport.frame,
-frame > box > stack > scrolledwindow {
-    border-style: none;
-}
-
-frame > box.vertical > scrolledwindow.frame {
-    border-width: 1px 0px 1px 0px;
+.frame,
+frame > border { /* firefox location entry */
+    border-radius: 3px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade (@bg_color, 0.82);
+    border-image: none;
+    background: none;
+}
+
+.frame.flat,
+frame > border.flat,
+overlay > frame > border {
+  border: none;
 }
 
 /************
@@ -1016,112 +995,461 @@
 /************
  * notebook *
  ************/
-notebook header.top tab { padding: 4px 6px 2px 6px; }
-notebook header.top tab:checked { padding-bottom: 3px; }
-notebook header.bottom tab { padding: 2px 6px 4px 6px; }
-notebook header.bottom tab:checked { padding-top: 3px; }
-notebook header.left tab { padding: 2px 4px 2px 6px; }
-notebook header.left tab:checked { padding-right: 5px; }
-notebook header.right tab { padding: 2px 6px 2px 4px; }
-notebook header.right tab:checked { padding-left: 5px; }
+/************
+ * notebook *
+ ************/
+
+notebook {
+    padding: 0;
+    border-style: none;
+}
+
+notebook.frame {
+    padding: 0;
+    border-style: solid;
+    border-color: shade (@bg_color, 0.82);
+    background-color: shade (@notebook_bg_color, 1.00);
+    border-width: 1px;
+    border-radius:  4px;
+}
+
+/* pavu-control */
+window.background > box.vertical > notebook:not(.frame),
+window.background.csd > box.vertical > notebook:not(.frame),
+window.background.ssd > box.vertical > notebook:not(.frame),
+window.background.solid-csd > box.vertical > notebook:not(.frame) {
+    background-color: shade (@notebook_bg_color, 1.00);
+    border-radius: 4px 4px 0px 0px;
+}
+
+window.background > box.vertical > notebook:not(.frame) > stack > box,
+window.background.csd > box.vertical > notebook:not(.frame) > stack > box,
+window.background.ssd > box.vertical > notebook:not(.frame) > stack > box,
+window.background.solid-csd > box.vertical > notebook:not(.frame) > stack > box {
+    border-style: solid;
+    border-width: 0px 1px 1px 1px;
+    border-color: shade (@bg_color, 0.82);
+}
+
+window.background > box.vertical > notebook:not(.frame) > header.top,
+window.background.csd > box.vertical > notebook:not(.frame) > header.top,
+window.background.ssd > box.vertical > notebook:not(.frame) > header.top,
+window.background.solid-csd > box.vertical > notebook:not(.frame) > header.top {
+    border-style: solid;
+    border-width: 1px 1px 0px 1px;
+    border-color: shade (@bg_color, 0.82);
+}
+
+printdialog > box.view.vertical.dialog-vbox > box.vertical > notebook {
+    background-color: shade (@theme_bg_color, 1.1);
+    border-radius: 0px;
+    border-style: solid;
+    border-color: @borders;
+    border-width: 0px 0px 1px 0px;
+}
+
+dialog.background.csd > box.vertical.dialog-vbox > notebook, /* meld preferences */
+dialog.background.ssd > box.vertical.dialog-vbox > notebook,
+dialog.background.solid-csd > box.vertical.dialog-vbox > notebook {
+    background-color: shade (@theme_bg_color, 1.1);
+}
+
+notebook :hover {
+    -gtk-icon-effect: highlight;
+}
 
 notebook header {
-    border-width: 0; /* set below depending on position of tab bar */
-    border-color: shade (@bg_color, 0.82);
-    border-style: solid;
-}
-
-/* Draw a border between tabs and content ... */
-notebook:not(.frame) header.top { border-bottom-width: 1px; }
-notebook:not(.frame) header.right { border-left-width: 1px; }
-notebook:not(.frame) header.left { border-right-width: 1px; }
-notebook:not(.frame) header.bottom { border-top-width: 1px; }
-
-notebook.frame header.top { border-bottom: 1px solid @bg_color; }
-
-notebook header.top tab {
-    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 header.top tab:checked,
-notebook header.top tab:checked:hover {
-    background-image: linear-gradient(to bottom,
-                                      shade(@bg_color, 1.075),
-                                      shade(@bg_color, 1));
-    border-radius: 4px 4px 0px 0px;
-    border-width: 0px 1px 0px 1px;
-    border-style: solid;
-    border-color: @borders;
-}
-
-notebook header.right tab {
-    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 header.right tab:checked,
-notebook header.right tab:checked:hover {
+    background-image: none;
+    background-color: shade (@theme_bg_color, 1.0);
+    border-width: 0px;
+}
+
+notebook header.top {
+    margin: -1px -1px 0px 0px;
+    border-width: 0px 0px 1px 0px;
+    border-radius: 4px 4px 0px 0px;
+    background-color: @theme_bg_color;
+    box-shadow: inset  0px -1px alpha(shade(@bg_color, 0.82), 0.90);
+}
+
+printdialog notebook header.top,
+dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top,
+dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top,
+dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top {
+    border-radius: 0px;
+}
+
+notebook header.bottom {
+    margin: 0px -1px -1px 0px;
+    border-width: 1px 0px 0px 0px;
+    border-radius: 0px 0px 4px 4px;
+    background-color: @theme_bg_color;
+    box-shadow: inset  0px  1px alpha(shade(@bg_color, 0.82), 0.90);
+}
+
+notebook header.left {
+    margin: 0px 0px -1px -1px;
+    border-width: 0px 1px 0px 0px;
+    border-radius: 4px 0px 0px 4px;
+    background-color: @theme_bg_color;
+    box-shadow: inset -1px  0px alpha(shade(@bg_color, 0.82), 0.90);
+}
+
+notebook header.right {
+    margin: 0px -1px -1px 0px;
+    border-width: 0px 0px 0px 1px;
+    border-radius: 0px 4px 4px 0px;
+    background-color: @theme_bg_color;
+    box-shadow: inset  1px  0px alpha(shade(@bg_color, 0.82), 0.90);
+}
+
+notebook header tab {
+    border-color: shade (@bg_color, 0.82);
+    border-style: solid;
+    border-width: 1px;
+    background-color: transparent;
+    background-image: linear-gradient(to bottom,
+                      @notebook_tab_gradient_a,
+                      @notebook_tab_gradient_d);
+    padding: 6px;
+}
+
+notebook header tab label {
+    color: @theme_fg_color;
+    font-weight: normal;
+}
+
+notebook header .prelight-page,
+notebook header .prelight-page label {
+    color: mix (@theme_fg_color, @theme_bg_color, 0.15);
+}
+
+notebook header .active-page,
+notebook header tab .active-page label {
+    color: @theme_fg_color;
+}
+
+/* tabs and header in view areas */
+.gedit-bottom-panel-paned > grid > notebook > header.top,
+window.background > notebook > header.top, /* nautilus preferences */
+paned.horizontal > box.vertical > notebook > header.top,
+paned.horizontal > paned.vertical > notebook > header.top {
+    border-style: solid;
+    border-color: shade (@bg_color, 0.82);
+    border-width: 1px 0px 0px 1px;
+    border-radius: 4px 4px 0px 0px;
+    box-shadow: none;
+}
+
+paned.horizontal > box.vertical > notebook scrolledwindow.frame,
+paned.horizontal > paned.vertical > notebook scrolledwindow.frame {
+    border-width: 1px 1px 1px 1px;
+    border-style: solid;
+    border-color: shade (@bg_color, 0.82);
+}
+
+.gedit-bottom-panel-paned > grid > notebook > header tab,
+window.background > notebook > header tab,
+paned.horizontal > notebook > header tab,
+paned.horizontal > box.vertical > notebook > header tab,
+paned.horizontal > paned.vertical > notebook > header tab {
+    padding: 6px;
+    margin: 0px -0px 0px -1px;
+    border-width: 0px 1px 0 1px;
+    border-style: solid;
+    border-radius: 4px 4px 0 0;
+}
+
+.gedit-bottom-panel-paned > grid > notebook > header tab:checked,
+.gedit-bottom-panel-paned > grid > notebook > header tab:checked:hover,
+window.background > notebook > header.top tab:checked,
+window.background > notebook > header.top tab:checked:hover,
+paned.horizontal > notebook > header.top tab:checked,
+paned.horizontal > notebook > header.top tab:checked:hover,
+paned.horizontal > box.vertical > notebook > header.top tab:checked,
+paned.horizontal > box.vertical > notebook > header.top tab:checked:hover,
+paned.horizontal > paned.vertical > notebook > header.top tab:checked,
+paned.horizontal > paned.vertical > notebook > header.top tab:checked:hover {
+    background-image: linear-gradient(to bottom,
+                                      shade(@notebook_bg_color, 1.18),
+                                      shade(@notebook_bg_color, 1.00));
+    border-radius: 4px 4px 0 0;
+    border-width: 1px 1px 0 1px;
+    border-style: solid;
+    box-shadow: none;
+}
+
+.gedit-bottom-panel-paned > grid > notebook > header button.flat.small-button,
+paned.horizontal > box.vertical > notebook > header button.flat,
+paned.horizontal > paned.vertical > notebook > header button.flat {
+    padding: 1px;
+}
+
+/* closable-page */
+paned.horizontal > notebook {
+    border-width: 1px 1px 1px 1px;
+    border-style: solid;
+    border-color: shade (@bg_color, 0.82);
+    border-radius: 4px 4px 0px 0px;
+}
+
+paned.horizontal > notebook > header {
+    border-width: 0px 0px 0px 0px;
+    border-style: solid;
+    border-color: shade (@bg_color, 0.82);
+    border-radius: 4px 4px 0px 0px;
+}
+
+paned.horizontal > notebook > header label {
+    padding: 4px;
+}
+
+paned.horizontal > notebook > header tab {
+    border-width: 1px 1px 1px 1px;
+}
+
+paned.horizontal > notebook > header button.flat.small-button {
+    padding: 1px;
+}
+
+paned.horizontal > notebook > stack > box {
+    background-color: shade (@notebook_bg_color, 1.00);
+}
+
+/* tabs in dialog windows */
+/* horizontal tabs */
+window.background > box.vertical > notebook > header.top tab, /* pavu-control */
+window.background.csd > box.vertical > notebook > header.top tab,
+window.background.ssd > box.vertical > notebook > header.top tab,
+window.background.solid-csd > box.vertical > notebook > header.top tab,
+dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top tab, /* meld preferences */
+dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top tab,
+dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top tab,
+printdialog notebook > header.top tab,
+notebook.frame > header.top tab,
+notebook.frame > header.bottom tab {
+    margin: 0px 0px 0px -1px;
+    border-width: 1px 1px 1px 1px;
+    border-style: solid;
+}
+
+window.background > box.vertical > notebook > header.top tab, /* pavu-control */
+window.background.csd > box.vertical > notebook > header.top tab,
+window.background.ssd > box.vertical > notebook > header.top tab,
+window.background.solid-csd > box.vertical > notebook > header.top tab,
+dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top tab,
+dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top tab,
+dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top tab,
+printdialog notebook > header.top tab,
+notebook.frame > header.top tab {
+    padding: 6px;
+    border-radius: 4px 4px 0px 0px;
+}
+
+window.background > box.vertical > notebook > header.top tab:checked, /* pavu-control */
+window.background.csd > box.vertical > notebook > header.top tab:checked,
+window.background.ssd > box.vertical > notebook > header.top tab:checked,
+window.background.solid-csd > box.vertical > notebook > header.top tab:checked,
+dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top tab:checked,
+dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top tab:checked,
+dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top tab:checked,
+dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top tab:checked:hover,
+dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top tab:checked:hover,
+dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top tab:checked:hover,
+printdialog notebook > header.top tab:checked,
+printdialog notebook > header.top tab:checked:hover,
+notebook.frame > header.top tab:checked,
+notebook.frame > header.top tab:checked:hover {
+    background-image: linear-gradient(to bottom,
+                                      shade(@notebook_bg_color, 1.18),
+                                      shade(@notebook_bg_color, 1.00));
+    border-radius: 4px 4px 0px 0px;
+    border-width: 1px 1px 0px 1px;
+    border-style: solid;
+}
+
+notebook.frame > header.bottom tab {
+    padding: 6px;
+}
+
+notebook.frame > header.bottom tab:checked,
+notebook.frame > header.bottom tab:checked:hover {
+    background-image: linear-gradient(to top,
+                                      shade(@notebook_bg_color, 1.18),
+                                      shade(@notebook_bg_color, 1.00));
+    border-radius: 0px 0px 4px 4px;
+    border-style: solid;
+    border-width: 0px 1px 1px 1px;
+}
+
+/* vertical tabs */
+notebook.frame > header.left tab,
+notebook.frame > header.right tab {
+    padding: 6px;
+    margin: -1px 0px 0px 0px;
+    border-width: 1px 1px 1px 1px;
+    border-style: solid;
+}
+
+notebook.frame > header.left tab {
+    border-radius: 4px 0px 0px 4px;
+}
+
+
+notebook.frame > header.left tab:checked,
+notebook.frame > header.left tab:checked:hover {
+    background-image: linear-gradient(to right,
+                                      shade(@notebook_bg_color, 1.18),
+                                      shade(@notebook_bg_color, 1.00));
+    border-style: solid;
+    border-width: 1px 0px 1px 1px;
+    border-radius: 4px 0px 0px 4px;
+}
+
+notebook.frame > header.right tab {
+    border-radius: 0px 4px 4px 0px;
+}
+
+notebook.frame > header.right tab:checked,
+notebook.frame > header.right tab:checked:hover {
     background-image: linear-gradient(to left,
-                                      shade(@bg_color, 1.075),
-                                      shade(@bg_color, 1));
-    border-radius:  0px 4px 4px 0px;
-    border-width: 1px 0px 1px 0px;
-    border-color: shade(@bg_color, 0.95);
-}
-
-notebook header.left tab {
-    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 header.left tab:checked,
-notebook header.left tab:checked:hover {
-    background-image: linear-gradient(to right,
-                                      shade(@bg_color, 1.075),
-                                      shade(@bg_color, 1));
-    border-radius: 4px 0px 0px 4px;
-    border-width: 1px 0px 1px 0px;
-    border-color: shade(@bg_color, 0.95);
-}
-
-notebook header.bottom tab {
-    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 header.bottom tab:checked,
-notebook header.bottom tab:checked:hover {
-    background-image: linear-gradient(to top,
-                                      shade(@bg_color, 1.075),
-                                      shade(@bg_color, 1));
-    border-radius: 0 0 4px 4px;
-    border-width: 0px 1px 0px 1px;
-    border-style: solid;
-    border-color: shade(@bg_color, 0.95);
-}
-
-/* Draw a focus ring around labels in tabs */
-notebook tab label {
-    border: 1px solid transparent;
-    border-radius: 5px;
-}
-
-notebook:focus tab:checked label {
-    border-color: @focus_color;
-    background-color: @focus_bg_color;
-}
-
-notebook GtkDrawingArea {
-        background-color: shade (@bg_color, 1.02);
+                                      shade(@notebook_bg_color, 1.18),
+                                      shade(@notebook_bg_color, 1.00));
+    border-style: solid;
+    border-width: 1px 1px 1px 0px;
+    border-radius: 0px 4px 4px 0px;
+}
+
+notebook tab.reorderable-page:checked,
+notebook tab.reorderable-page:checked:hover {
+    background-image: linear-gradient(to bottom,
+                                      shade(@notebook_bg_color, 1.18),
+                                      shade(@notebook_bg_color, 1.00));
+    border-radius: 4px 4px 0 0;
+    box-shadow: none;
+    border-style: solid;
+}
+
+/* outlines */
+notebook header.top tab:checked {
+    -gtk-outline-top-left-radius: 4px;
+    -gtk-outline-top-right-radius: 4px;
+    -gtk-outline-bottom-left-radius: 0px;
+    -gtk-outline-bottom-right-radius: 0px;
+}
+
+notebook header.bottom tab:checked {
+    -gtk-outline-top-left-radius: 0px;
+    -gtk-outline-top-right-radius: 0px;
+    -gtk-outline-bottom-left-radius: 4px;
+    -gtk-outline-bottom-right-radius: 4px;
+}
+
+notebook header.left tab:checked {
+    -gtk-outline-top-left-radius: 4px;
+    -gtk-outline-top-right-radius: 0px;
+    -gtk-outline-bottom-left-radius: 0px;
+    -gtk-outline-bottom-right-radius: 4px;
+}
+
+notebook header.right tab:checked {
+    -gtk-outline-top-left-radius: 0px;
+    -gtk-outline-top-right-radius: 4px;
+    -gtk-outline-bottom-left-radius: 4px;
+    -gtk-outline-bottom-right-radius: 0px;
+}
+
+/* close button styling */
+notebook > header > tabs > tab > box > button.flat,
+notebook > header > tabs > tab > box > button.flat.small-button {
+    border-image: none;
+    background-image: none;
+    background-color: transparent;
+    border-radius: 3px;
+    border-style: none;
+    border-color: transparent;
+    border-width: 0px;
+    -gtk-icon-shadow: none;
+    padding: 0px;
+}
+
+notebook > header > tabs > tab > box > button.flat:hover,
+notebook > header > tabs > tab > box > button.flat.small-button:hover {
+    -gtk-icon-effect: highlight;
+}
+
+notebook > header > tabs > tab > box > button.flat:checked,
+notebook > header > tabs > tab > box > button.flat:hover:active,
+notebook > header > tabs > tab > box > button.flat.small-button:checked,
+notebook > header > tabs > tab > box > button.flat.small-button:hover:active {
+    color:  @button_active_text;
+    background-color: alpha(black, 0.08);
+    box-shadow: inset 0 1px alpha(black, 0.05);
+    -gtk-icon-shadow: 0 1px @button_active_text_shadow;
+    border-color: alpha(black, 0.27)
+                        alpha(black, 0.13)
+                        alpha(black, 0.13)
+                        alpha(black, 0.13);
+}
+
+notebook > header > tabs > tab.prelight-page button.flat.small-button,
+notebook > header > tabs > tab.active-page button.flat.small-button {
+    color: mix(@theme_fg_color, @theme_base_color, 0.6);
+    -gtk-icon-shadow: 0 1px @button_text_shadow;
+}
+
+notebook header.top tabs arrow.up,
+notebook header.bottom tabs arrow.up {
+    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+}
+
+notebook header.top tabs arrow.down,
+notebook header.bottom tabs arrow.down {
+    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
+}
+
+notebook header.left tabs arrow.up,
+notebook header.right tabs arrow.up {
+    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
+}
+
+notebook header.left tabs arrow.down,
+notebook header.right tabs arrow.down {
+    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+}
+
+notebook header tabs arrow {
+    color: @theme_fg_color;
+}
+
+notebook header tabs arrow:hover {
+    color: @theme_selected_bg_color;
+}
+
+notebook header tabs arrow:active {
+    color: @theme_fg_color;
+}
+
+notebook header tabs arrow:disabled {
+    color: rgba(141, 144, 145, 0.3);
+}
+
+notebook header tabs arrow:backdrop {
+    color: rgba(84, 89, 90, 0.4);
+}
+
+notebook header tabs arrow:disabled {
+    color: #c7c7c7;
+}
+
+notebook header tab:checked label {
+    color: @theme_fg_color;
+    font-weight: normal;
+}
+
+notebook header tab label {
+    color: shade (@theme_fg_color, 1.30);
+    font-weight: normal;
 }
 
 /******************