Adwaita: Update notebook styling

Adapt to the changes in the previous commit.

demos/widget-factory/widget-factory.ui

@@ -3620,6 +3620,7 @@ microphone-sensitivity-medium-symbolic</property>
                   <object class="GtkBox">
                     <property name="visible">1</property>
                     <property name="orientation">vertical</property>
+                    <property name="spacing">10</property>
                     <child>
                       <object class="GtkBox">
                         <property name="visible">1</property>
@@ -3646,6 +3647,108 @@ microphone-sensitivity-medium-symbolic</property>
                         </style>
                       </object>
                     </child>
+                    <child>
+                      <object class="GtkSeparator">
+                        <property name="visible">1</property>
+                        <property name="orientation">horizontal</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkNotebook">
+                        <property name="visible">1</property>
+                        <property name="scrollable">1</property>
+                        <child type="action-end">
+                          <object class="GtkMenuButton">
+                            <property name="visible">1</property>
+                            <property name="valign">center</property>
+                            <property name="popover">notebook_info_popover</property>
+                            <child>
+                              <object class="GtkImage">
+                                <property name="visible">1</property>
+                                <property name="icon-name">emblem-important-symbolic</property>
+                                <property name="icon-size">1</property>
+                              </object>
+                            </child>
+                            <style>
+                              <class name="image-button"/>
+                              <class name="sidebar-button"/>
+                            </style>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkBox">
+                            <property name="visible">1</property>
+                            <property name="height-request">120</property>
+                          </object>
+                          <packing>
+                            <property name="tab-expand">1</property>
+                          </packing>
+                        </child>
+                        <child type="tab">
+                          <object class="GtkLabel">
+                            <property name="visible">1</property>
+                            <property name="label" translatable="yes">Page 1</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkBox">
+                            <property name="visible">1</property>
+                            <property name="height-request">40</property>
+                          </object>
+                          <packing>
+                            <property name="tab-expand">1</property>
+                          </packing>
+                        </child>
+                        <child type="tab">
+                          <object class="GtkLabel">
+                            <property name="visible">1</property>
+                            <property name="label" translatable="yes">Page 2</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkBox">
+                            <property name="visible">1</property>
+                          </object>
+                          <packing>
+                            <property name="tab-expand">1</property>
+                          </packing>
+                        </child>
+                        <child type="tab">
+                          <object class="GtkLabel">
+                            <property name="visible">1</property>
+                            <property name="label" translatable="yes">Page 3</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkBox">
+                            <property name="visible">1</property>
+                          </object>
+                          <packing>
+                            <property name="tab-expand">1</property>
+                          </packing>
+                        </child>
+                        <child type="tab">
+                          <object class="GtkLabel">
+                            <property name="visible">1</property>
+                            <property name="label" translatable="yes">Page 4</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkBox">
+                            <property name="visible">1</property>
+                          </object>
+                          <packing>
+                            <property name="tab-expand">1</property>
+                          </packing>
+                        </child>
+                        <child type="tab">
+                          <object class="GtkLabel">
+                            <property name="visible">1</property>
+                            <property name="label" translatable="yes">Page 5</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
                     <child>
                       <object class="GtkSpinner">
                         <property name="visible">1</property>
@@ -4001,4 +4104,13 @@ bad things might happen.</property>
       <widget name="panedframe2"/>
     </widgets>
   </object>
+  <object class="GtkPopover" id="notebook_info_popover">
+    <child>
+      <object class="GtkLabel" id="notebook_info_label">
+        <property name="visible">1</property>
+        <property name="margin">10</property>
+        <property name="label">No updates at this time</property>
+      </object>
+    </child>
+  </object>
 </interface>

gtk/gtknotebook.c

@@ -44,6 +44,7 @@
 #include "gtktypebuiltins.h"
 #include "gtkwidgetpath.h"
 #include "gtkcssnodeprivate.h"
+#include "gtkcssstylepropertyprivate.h"
 #include "gtkstylecontextprivate.h"
 #include "gtkwidgetprivate.h"
 #include "a11y/gtknotebookaccessible.h"
@@ -97,17 +98,39 @@
  *
  * # CSS nodes
  *
+ * |[<!-- language="plain" -->
+ * notebook
+ * ├── header.top
+ * │   ├── [action widget]
+ * │   ├── tabs
+ * │   │   ├── [arrow]
+ * │   │   ├── tab
+ * ┊   ┊   ┊   ╰── [tab label]
+ * │   │   ├── tab[.reorderable-page]
+ * │   │   │   ╰── [tab label]
+ * │   │   ╰── [arrow]
+ * │   ╰── [action widget]
+ * │
+ * ├── [child]
+ * ┊
+ * ╰── [child]
+ * ]|
+ *
  * GtkNotebook has a main CSS node with name notebook, a subnode
- * with name tabs, and below that one subnode per tab with name
- * tab.
+ * with name header and below that a subnode with name tabs which
+ * contains one subnode per tab with name tab.
+ *
+ * If action widgets are present, their CSS nodes are placed next
+ * to the tabs node. If the notebook is scrollable, CSS nodes with
+ * name arrow are placed as first and last child of the tabs node.
  *
  * The main node gets the .frame style class when rendering the
  * background of a notebook with border. It gets the .header
  * style class for rendering the tab area background.
  *
- * The per-tab nodes get one of the style class .top, .bottom,
+ * The header node gets one of the style class .top, .bottom,
  * .left or .right, depending on where the tabs are placed. For
- * reorderable pages, the tab also gets the .reorderable-page class.
+ * reorderable pages, the tab node gets the .reorderable-page class.
  */
 
 
@@ -150,7 +173,9 @@ struct _GtkNotebookPrivate
   GdkWindow               *drag_window;
   GdkWindow               *event_window;
 
+  GtkCssNode                *header_node;
   GtkCssNode                *tabs_node;
+  GtkCssNode                *arrow_node[4];
 
   GList         *children;
   GList         *first_tab;             /* The first tab visible (for scrolling notebooks) */
@@ -217,11 +242,11 @@ enum {
 
 typedef enum
 {
-  ARROW_NONE,
   ARROW_LEFT_BEFORE,
   ARROW_RIGHT_BEFORE,
   ARROW_LEFT_AFTER,
-  ARROW_RIGHT_AFTER
+  ARROW_RIGHT_AFTER,
+  ARROW_NONE
 } GtkNotebookArrow;
 
 typedef enum
@@ -414,6 +439,8 @@ static void gtk_notebook_drag_data_received  (GtkWidget        *widget,
                                               GtkSelectionData *data,
                                               guint             info,
                                               guint             time);
+static void gtk_notebook_direction_changed   (GtkWidget        *widget,
+                                              GtkTextDirection  previous_direction);
 
 /*** GtkContainer Methods ***/
 static void gtk_notebook_set_child_property  (GtkContainer     *container,
@@ -681,6 +708,7 @@ gtk_notebook_class_init (GtkNotebookClass *class)
   widget_class->drag_data_received = gtk_notebook_drag_data_received;
   widget_class->drag_failed = gtk_notebook_drag_failed;
   widget_class->compute_expand = gtk_notebook_compute_expand;
+  widget_class->direction_changed = gtk_notebook_direction_changed;
 
   container_class->add = gtk_notebook_add;
   container_class->remove = gtk_notebook_remove;
@@ -1182,6 +1210,29 @@ gtk_notebook_class_init (GtkNotebookClass *class)
   gtk_widget_class_set_css_name (widget_class, "notebook");
 }
 
+static void
+node_style_changed_cb (GtkCssNode  *node,
+                       GtkCssStyle *old_style,
+                       GtkCssStyle *new_style,
+                       GtkWidget   *widget)
+{
+  GtkBitmask *changes;
+  static GtkBitmask *affects_size = NULL;
+
+  if (G_UNLIKELY (affects_size == NULL))
+    affects_size = _gtk_css_style_property_get_mask_affecting (GTK_CSS_AFFECTS_SIZE | GTK_CSS_AFFECTS_CLIP);
+
+  changes = _gtk_bitmask_new ();
+  changes = gtk_css_style_add_difference (changes, old_style, new_style);
+
+  if (_gtk_bitmask_intersects (changes, affects_size))
+    gtk_widget_queue_resize (widget);
+  else
+    gtk_widget_queue_draw (widget);
+
+  _gtk_bitmask_free (changes);
+}
+
 static void
 gtk_notebook_init (GtkNotebook *notebook)
 {
@@ -1205,7 +1256,7 @@ gtk_notebook_init (GtkNotebook *notebook)
   priv->show_border = TRUE;
   priv->tab_pos = GTK_POS_TOP;
   priv->scrollable = FALSE;
-  priv->in_child = 0;
+  priv->in_child = ARROW_NONE;
   priv->click_child = 0;
   priv->button = 0;
   priv->need_timer = 0;
@@ -1235,11 +1286,23 @@ gtk_notebook_init (GtkNotebook *notebook)
   gtk_drag_dest_set_track_motion (GTK_WIDGET (notebook), TRUE);
 
   widget_node = gtk_widget_get_css_node (GTK_WIDGET (notebook));
+  gtk_css_node_add_class (widget_node, g_quark_from_static_string (GTK_STYLE_CLASS_FRAME));
+
+  priv->header_node = gtk_css_node_new ();
+  gtk_css_node_set_name (priv->header_node, I_("header"));
+  gtk_css_node_add_class (priv->header_node, g_quark_from_static_string (GTK_STYLE_CLASS_TOP));
+  gtk_css_node_set_parent (priv->header_node, widget_node);
+  gtk_css_node_set_state (priv->header_node, gtk_css_node_get_state (widget_node));
+  g_signal_connect_object (priv->header_node, "style-changed", G_CALLBACK (node_style_changed_cb), notebook, 0);
+  g_object_unref (priv->header_node);
+
   priv->tabs_node = gtk_css_node_new ();
   gtk_css_node_set_name (priv->tabs_node, I_("tabs"));
-  gtk_css_node_set_parent (priv->tabs_node, widget_node);
+  gtk_css_node_set_parent (priv->tabs_node, priv->header_node);
   gtk_css_node_set_state (priv->tabs_node, gtk_css_node_get_state (widget_node));
+  g_signal_connect_object (priv->tabs_node, "style-changed", G_CALLBACK (node_style_changed_cb), notebook, 0);
   g_object_unref (priv->tabs_node);
+
 }
 
 static void
@@ -1741,6 +1804,61 @@ gtk_notebook_destroy (GtkWidget *widget)
   GTK_WIDGET_CLASS (gtk_notebook_parent_class)->destroy (widget);
 }
 
+static void
+update_node_ordering (GtkNotebook *notebook)
+{
+  GtkNotebookPrivate *priv = notebook->priv;
+  GtkPositionType tab_pos;
+  gboolean is_rtl;
+  GtkCssNode *node;
+
+  tab_pos = get_effective_tab_pos (notebook);
+  is_rtl = gtk_widget_get_direction (GTK_WIDGET (notebook)) == GTK_TEXT_DIR_RTL;
+
+  switch (tab_pos)
+    {
+    case GTK_POS_TOP:
+    case GTK_POS_BOTTOM:
+      if (priv->action_widget[ACTION_WIDGET_START])
+        {
+          node = gtk_widget_get_css_node (priv->action_widget[ACTION_WIDGET_START]);
+          if (is_rtl)
+            gtk_css_node_insert_after (priv->header_node, node, priv->tabs_node);
+          else
+            gtk_css_node_insert_before (priv->header_node, node, priv->tabs_node);
+        }
+      if (priv->action_widget[ACTION_WIDGET_END])
+        {
+          node = gtk_widget_get_css_node (priv->action_widget[ACTION_WIDGET_END]);
+          if (is_rtl)
+            gtk_css_node_insert_before (priv->header_node, node, priv->tabs_node);
+          else
+            gtk_css_node_insert_after (priv->header_node, node, priv->tabs_node);
+        }
+      break;
+    case GTK_POS_LEFT:
+    case GTK_POS_RIGHT:
+      if (priv->action_widget[ACTION_WIDGET_START])
+        {
+          node = gtk_widget_get_css_node (priv->action_widget[ACTION_WIDGET_START]);
+          gtk_css_node_insert_before (priv->header_node, node, priv->tabs_node);
+        }
+      if (priv->action_widget[ACTION_WIDGET_END])
+        {
+          node = gtk_widget_get_css_node (priv->action_widget[ACTION_WIDGET_END]);
+          gtk_css_node_insert_after (priv->header_node, node, priv->tabs_node);
+        }
+      break;
+    }
+}
+
+static void
+gtk_notebook_direction_changed (GtkWidget        *widget,
+                                GtkTextDirection  previous_direction)
+{
+  update_node_ordering (GTK_NOTEBOOK (widget));
+}
+
 static gboolean
 gtk_notebook_get_event_window_position (GtkNotebook  *notebook,
                                         GdkRectangle *rectangle)
@@ -2830,7 +2948,7 @@ gtk_notebook_button_press (GtkWidget      *widget,
     return FALSE;
 
   arrow = gtk_notebook_get_arrow (notebook, x, y);
-  if (arrow)
+  if (arrow != ARROW_NONE)
     return gtk_notebook_arrow_button_press (notebook, arrow, event->button);
 
   if (priv->menu && gdk_event_triggers_context_menu ((GdkEvent *) event))
@@ -3244,9 +3362,9 @@ gtk_notebook_leave_notify (GtkWidget        *widget,
           tab_prelight (notebook, (GdkEvent *)event);
         }
 
-      if (priv->in_child)
+      if (priv->in_child != ARROW_NONE)
         {
-          priv->in_child = 0;
+          priv->in_child = ARROW_NONE;
           gtk_notebook_redraw_arrows (notebook);
         }
     }
@@ -3487,12 +3605,87 @@ gtk_notebook_grab_notify (GtkWidget *widget,
     }
 }
 
+static void
+update_tab_state (GtkNotebook *notebook)
+{
+  GtkNotebookPrivate *priv = notebook->priv;
+  GtkStateFlags state, tab_state;
+  GList *l;
+
+  state = gtk_widget_get_state_flags (GTK_WIDGET (notebook));
+
+  state = state & ~GTK_STATE_FLAG_FOCUSED;
+
+  if (priv->header_node)
+    gtk_css_node_set_state (priv->header_node, state);
+  if (priv->tabs_node)
+    gtk_css_node_set_state (priv->header_node, state);
+
+  for (l = priv->children; l; l = l->next)
+    {
+      GtkNotebookPage *page = l->data;
+
+      tab_state = state & ~(GTK_STATE_FLAG_ACTIVE | GTK_STATE_FLAG_PRELIGHT);
+
+      if (page == priv->cur_page)
+        tab_state |= GTK_STATE_FLAG_ACTIVE;
+      if (page == priv->prelight_tab)
+        tab_state |= GTK_STATE_FLAG_PRELIGHT;
+
+      gtk_css_node_set_state (page->cssnode, tab_state);
+    }
+}
+
+static void
+update_arrow_state (GtkNotebook *notebook)
+{
+  GtkNotebookPrivate *priv = notebook->priv;
+  gint i;
+  GtkStateFlags state;
+  gboolean is_rtl, left;
+
+  is_rtl = gtk_widget_get_direction (GTK_WIDGET (notebook)) == GTK_TEXT_DIR_RTL;
+
+  for (i = 0; i < 4; i++)
+    {
+      if (priv->arrow_node[i] == NULL)
+        continue;
+
+      state = gtk_widget_get_state_flags (GTK_WIDGET (notebook));
+      state &= ~GTK_STATE_FLAG_FOCUSED;
+
+
+      left = (ARROW_IS_LEFT (i) && !is_rtl) ||
+             (!ARROW_IS_LEFT (i) && is_rtl);
+
+      if (priv->focus_tab &&
+          !gtk_notebook_search_page (notebook, priv->focus_tab,
+                                     left ? STEP_PREV : STEP_NEXT, TRUE))
+        {
+          state |= GTK_STATE_FLAG_INSENSITIVE;
+        }
+      else if (priv->in_child == i)
+        {
+          state |= GTK_STATE_FLAG_PRELIGHT;
+          if (priv->click_child == i)
+            state |= GTK_STATE_FLAG_ACTIVE;
+        }
+
+      gtk_css_node_set_state (priv->arrow_node[i], state);
+    }
+}
+
 static void
 gtk_notebook_state_flags_changed (GtkWidget     *widget,
                                   GtkStateFlags  previous_state)
 {
+  GtkNotebook *notebook = GTK_NOTEBOOK (widget);
+
+  update_tab_state (notebook);
+  update_arrow_state (notebook);
+
   if (!gtk_widget_is_sensitive (widget))
-    stop_scrolling (GTK_NOTEBOOK (widget));
+    stop_scrolling (notebook);
 }
 
 static gboolean
@@ -3513,12 +3706,86 @@ gtk_notebook_focus_out (GtkWidget     *widget,
   return FALSE;
 }
 
+static void
+update_arrow_nodes (GtkNotebook *notebook)
+{
+  GtkNotebookPrivate *priv = notebook->priv;
+  gboolean arrow[4];
+  gint i;
+
+  arrow[0] = priv->has_before_previous;
+  arrow[1] = priv->has_before_next;
+  arrow[2] = priv->has_after_previous;
+  arrow[3] = priv->has_after_next;
+
+  for (i = 0; i < 4; i++)
+    {
+      if (priv->scrollable && arrow[i])
+        {
+          if (priv->arrow_node[i] == NULL)
+            {
+              priv->arrow_node[i] = gtk_css_node_new ();
+              gtk_css_node_set_name (priv->arrow_node[i], I_("arrow"));
+              if (i == ARROW_LEFT_BEFORE || i == ARROW_LEFT_AFTER)
+                gtk_css_node_add_class (priv->arrow_node[i], g_quark_from_static_string ("down"));
+              else
+                gtk_css_node_add_class (priv->arrow_node[i], g_quark_from_static_string ("up"));
+              gtk_css_node_set_state (priv->arrow_node[i], gtk_css_node_get_state (priv->tabs_node));
+              g_signal_connect_object (priv->arrow_node[i], "style-changed", G_CALLBACK (node_style_changed_cb), notebook, 0);
+              switch (i)
+                {
+                case 0:
+                  if (priv->arrow_node[1])
+                    gtk_css_node_insert_before (priv->tabs_node, priv->arrow_node[0], priv->arrow_node[1]);
+                  else
+                    gtk_css_node_insert_before (priv->tabs_node, priv->arrow_node[0], gtk_css_node_get_first_child (priv->tabs_node));
+                  break;
+
+                case 1:
+                  if (priv->arrow_node[0])
+                    gtk_css_node_insert_after (priv->tabs_node, priv->arrow_node[1], priv->arrow_node[0]);
+                  else
+                    gtk_css_node_insert_before (priv->tabs_node, priv->arrow_node[1], gtk_css_node_get_first_child (priv->tabs_node));
+                  break;
+
+                case 2:
+                  if (priv->arrow_node[3])
+                    gtk_css_node_insert_before (priv->tabs_node, priv->arrow_node[2], priv->arrow_node[3]);
+                  else
+                    gtk_css_node_insert_after (priv->tabs_node, priv->arrow_node[2], gtk_css_node_get_last_child (priv->tabs_node));
+                  break;
+
+                case 3:
+                  if (priv->arrow_node[2])
+                    gtk_css_node_insert_after (priv->tabs_node, priv->arrow_node[3], priv->arrow_node[2]);
+                  else
+                    gtk_css_node_insert_after (priv->tabs_node, priv->arrow_node[3], gtk_css_node_get_last_child (priv->tabs_node));
+                  break;
+
+                default:
+                  g_assert_not_reached ();
+                  break;
+                }
+
+              g_object_unref (priv->arrow_node[i]);
+           }
+        }
+      else
+        {
+          if (priv->arrow_node[i])
+            {
+              gtk_css_node_set_parent (priv->arrow_node[i], NULL);
+              priv->arrow_node[i] = NULL;
+            }
+        }
+    }
+}
+
 static void
 gtk_notebook_style_updated (GtkWidget *widget)
 {
   GtkNotebook *notebook = GTK_NOTEBOOK (widget);
   GtkNotebookPrivate *priv = notebook->priv;
-
   gboolean has_before_previous;
   gboolean has_before_next;
   gboolean has_after_previous;
@@ -3536,6 +3803,8 @@ gtk_notebook_style_updated (GtkWidget *widget)
   priv->has_after_previous = has_after_previous;
   priv->has_after_next = has_after_next;
 
+  update_arrow_nodes (notebook);
+
   GTK_WIDGET_CLASS (gtk_notebook_parent_class)->style_updated (widget);
 }
 
@@ -3730,7 +3999,7 @@ gtk_notebook_drag_motion (GtkWidget      *widget,
   arrow = gtk_notebook_get_arrow (notebook,
                                   x + allocation.x,
                                   y + allocation.y);
-  if (arrow)
+  if (arrow != ARROW_NONE)
     {
       priv->click_child = arrow;
       gtk_notebook_set_scroll_timer (notebook);
@@ -4565,12 +4834,7 @@ gtk_notebook_real_insert_page (GtkNotebook *notebook,
   GtkNotebookPage *page;
   gint nchildren;
   GList *list;
-  GQuark tab_pos_names[] = {
-    g_quark_from_static_string (GTK_STYLE_CLASS_LEFT),
-    g_quark_from_static_string (GTK_STYLE_CLASS_RIGHT),
-    g_quark_from_static_string (GTK_STYLE_CLASS_TOP),
-    g_quark_from_static_string (GTK_STYLE_CLASS_BOTTOM)
-  };
+  GtkCssNode *sibling;
 
   gtk_widget_freeze_child_notify (child);
 
@@ -4585,16 +4849,21 @@ gtk_notebook_real_insert_page (GtkNotebook *notebook,
 
   page->cssnode = gtk_css_node_new ();
   gtk_css_node_set_name (page->cssnode, I_("tab"));
-  gtk_css_node_add_class (page->cssnode, tab_pos_names[get_effective_tab_pos (notebook)]);
   gtk_css_node_set_state (page->cssnode, gtk_css_node_get_state (priv->tabs_node));
-  gtk_css_node_insert_after (priv->tabs_node,
-                             page->cssnode,
-                             position > 0 ? GTK_NOTEBOOK_PAGE (g_list_nth (priv->children, position - 1))->cssnode : NULL);
+  g_signal_connect_object (page->cssnode, "style-changed", G_CALLBACK (node_style_changed_cb), notebook, 0);
+
+  if (position > 0)
+    sibling = GTK_NOTEBOOK_PAGE (g_list_nth (priv->children, position - 1))->cssnode;
+  else if (priv->arrow_node[ARROW_RIGHT_BEFORE])
+    sibling = priv->arrow_node[ARROW_RIGHT_BEFORE];
+  else
+    sibling = priv->arrow_node[ARROW_LEFT_BEFORE];
+
+  gtk_css_node_insert_after (priv->tabs_node, page->cssnode, sibling);
 
   if (!tab_label)
-    {
-      page->default_tab = TRUE;
-    }
+    page->default_tab = TRUE;
+
   page->tab_label = tab_label;
   page->menu_label = menu_label;
   page->expand = FALSE;
@@ -4820,6 +5089,8 @@ gtk_notebook_redraw_arrows (GtkNotebook *notebook)
 {
   GtkNotebookPrivate *priv = notebook->priv;
 
+  update_arrow_state (notebook);
+
   if (gtk_widget_get_mapped (GTK_WIDGET (notebook)) &&
       gtk_notebook_show_arrows (notebook))
     {
@@ -5182,14 +5453,8 @@ gtk_notebook_paint (GtkWidget    *widget,
 
   if (priv->show_border && (!priv->show_tabs || !priv->children))
     {
-      gtk_style_context_save (context);
-      gtk_style_context_add_class (context, GTK_STYLE_CLASS_FRAME);
-
-      gtk_render_background (context, cr,
-                             x, y, width, height);
-      gtk_render_frame (context, cr,
-                        x, y, width, height);
-      gtk_style_context_restore (context);
+      gtk_render_background (context, cr, x, y, width, height);
+      gtk_render_frame (context, cr, x, y, width, height);
       return;
     }
 
@@ -5206,7 +5471,7 @@ gtk_notebook_paint (GtkWidget    *widget,
   header_width = width;
   header_height = height;
 
-  gtk_style_context_save (context);
+  gtk_style_context_save_to_node (context, priv->header_node);
 
   switch (tab_pos)
     {
@@ -5232,13 +5497,8 @@ gtk_notebook_paint (GtkWidget    *widget,
       break;
     }
 
-  gtk_style_context_add_class (context, GTK_STYLE_CLASS_HEADER);
-  if (priv->show_border)
-    gtk_style_context_add_class (context, GTK_STYLE_CLASS_FRAME);
-  gtk_render_background (context, cr,
-                         header_x, header_y, header_width, header_height);
-  gtk_render_frame (context, cr,
-                    header_x, header_y, header_width, header_height);
+  gtk_render_background (context, cr, header_x, header_y, header_width, header_height);
+  gtk_render_frame (context, cr, header_x, header_y, header_width, header_height);
   gtk_style_context_restore (context);
 
   if (!NOTEBOOK_IS_TAB_LABEL_PARENT (notebook, priv->cur_page) ||
@@ -5474,10 +5734,8 @@ gtk_notebook_draw_arrow (GtkNotebook      *notebook,
 {
   GtkNotebookPrivate *priv = notebook->priv;
   GtkStyleContext *context;
-  GtkStateFlags state = 0;
   GtkWidget *widget;
   GdkRectangle arrow_rect;
-  gboolean is_rtl, left;
   gint scroll_arrow_hlength;
   gint scroll_arrow_vlength;
   gint arrow_size;
@@ -5485,33 +5743,14 @@ gtk_notebook_draw_arrow (GtkNotebook      *notebook,
 
   widget = GTK_WIDGET (notebook);
   context = gtk_widget_get_style_context (widget);
-  state = gtk_widget_get_state_flags (widget);
 
   gtk_notebook_get_arrow_rect (notebook, &arrow_rect, nbarrow);
 
-  is_rtl = gtk_widget_get_direction (widget) == GTK_TEXT_DIR_RTL;
-  left = (ARROW_IS_LEFT (nbarrow) && !is_rtl) ||
-         (!ARROW_IS_LEFT (nbarrow) && is_rtl);
-
   gtk_widget_style_get (widget,
                         "scroll-arrow-hlength", &scroll_arrow_hlength,
                         "scroll-arrow-vlength", &scroll_arrow_vlength,
                         NULL);
 
-  if (priv->focus_tab &&
-      !gtk_notebook_search_page (notebook, priv->focus_tab,
-                                 left ? STEP_PREV : STEP_NEXT, TRUE))
-    {
-      state |= GTK_STATE_FLAG_INSENSITIVE;
-    }
-  else if (priv->in_child == nbarrow)
-    {
-      state |= GTK_STATE_FLAG_PRELIGHT;
-
-      if (priv->click_child == nbarrow)
-        state |= GTK_STATE_FLAG_ACTIVE;
-    }
-
   if (priv->tab_pos == GTK_POS_LEFT ||
       priv->tab_pos == GTK_POS_RIGHT)
     {
@@ -5524,8 +5763,7 @@ gtk_notebook_draw_arrow (GtkNotebook      *notebook,
       arrow_size = scroll_arrow_hlength;
     }
 
-  gtk_style_context_save (context);
-  gtk_style_context_set_state (context, state);
+  gtk_style_context_save_to_node (context, priv->arrow_node[nbarrow]);
 
   gtk_render_arrow (context, cr, angle,
                     arrow_rect.x, arrow_rect.y,
@@ -7317,6 +7555,7 @@ gtk_notebook_set_show_border (GtkNotebook *notebook,
                               gboolean     show_border)
 {
   GtkNotebookPrivate *priv;
+  GtkCssNode *node;
 
   g_return_if_fail (GTK_IS_NOTEBOOK (notebook));
 
@@ -7326,6 +7565,12 @@ gtk_notebook_set_show_border (GtkNotebook *notebook,
     {
       priv->show_border = show_border;
 
+      node = gtk_widget_get_css_node (GTK_WIDGET (notebook));
+      if (show_border)
+        gtk_css_node_add_class (node, g_quark_from_static_string (GTK_STYLE_CLASS_FRAME));
+      else
+        gtk_css_node_remove_class (node, g_quark_from_static_string (GTK_STYLE_CLASS_FRAME));
+
       if (gtk_widget_get_visible (GTK_WIDGET (notebook)))
         gtk_widget_queue_resize (GTK_WIDGET (notebook));
 
@@ -7441,22 +7686,16 @@ gtk_notebook_update_tab_pos (GtkNotebook *notebook)
     g_quark_from_static_string (GTK_STYLE_CLASS_TOP),
     g_quark_from_static_string (GTK_STYLE_CLASS_BOTTOM)
   };
-  GList *l;
+  gint i;
 
   tab_pos = get_effective_tab_pos (notebook);
 
-  for (l = priv->children; l; l = l->next)
+  for (i = 0; i < G_N_ELEMENTS (tab_pos_names); i++)
     {
-      GtkNotebookPage *page = GTK_NOTEBOOK_PAGE (l);
-      guint i;
-
-      for (i = 0; i < G_N_ELEMENTS (tab_pos_names); i++)
-        {
-          if (tab_pos == i)
-            gtk_css_node_add_class (page->cssnode, tab_pos_names[i]);
-          else
-            gtk_css_node_remove_class (page->cssnode, tab_pos_names[i]);
-        }
+      if (tab_pos == i)
+        gtk_css_node_add_class (priv->header_node, tab_pos_names[i]);
+      else
+        gtk_css_node_remove_class (priv->header_node, tab_pos_names[i]);
     }
 }
 
@@ -7527,15 +7766,17 @@ gtk_notebook_set_scrollable (GtkNotebook *notebook,
 
   scrollable = (scrollable != FALSE);
 
-  if (scrollable != priv->scrollable)
-    {
-      priv->scrollable = scrollable;
+  if (priv->scrollable == scrollable)
+    return;
 
-      if (gtk_widget_get_visible (GTK_WIDGET (notebook)))
-        gtk_widget_queue_resize (GTK_WIDGET (notebook));
+  priv->scrollable = scrollable;
 
-      g_object_notify_by_pspec (G_OBJECT (notebook), properties[PROP_SCROLLABLE]);
-    }
+  update_arrow_nodes (notebook);
+
+  if (gtk_widget_get_visible (GTK_WIDGET (notebook)))
+    gtk_widget_queue_resize (GTK_WIDGET (notebook));
+
+  g_object_notify_by_pspec (G_OBJECT (notebook), properties[PROP_SCROLLABLE]);
 }
 
 /**
@@ -7985,6 +8226,7 @@ gtk_notebook_child_reordered (GtkNotebook     *notebook,
 {
   GtkNotebookPrivate *priv = notebook->priv;
   GList *list;
+  GtkCssNode *sibling;
 
   list = g_list_find (priv->children, page);
 
@@ -7998,9 +8240,14 @@ gtk_notebook_child_reordered (GtkNotebook     *notebook,
       gtk_notebook_menu_item_create (notebook, list);
     }
 
-  gtk_css_node_insert_after (priv->tabs_node,
-                             page->cssnode,
-                             list->prev ? GTK_NOTEBOOK_PAGE (list->prev)->cssnode : NULL);
+  if (list->prev)
+    sibling = GTK_NOTEBOOK_PAGE (list->prev)->cssnode;
+  else if (priv->arrow_node[ARROW_RIGHT_BEFORE])
+    sibling = priv->arrow_node[ARROW_RIGHT_BEFORE];
+  else
+    sibling = priv->arrow_node[ARROW_LEFT_BEFORE];
+
+  gtk_css_node_insert_after (priv->tabs_node, page->cssnode, sibling);
   gtk_notebook_update_labels (notebook);
 }
 
@@ -8410,8 +8657,10 @@ gtk_notebook_set_action_widget (GtkNotebook *notebook,
 
   if (widget)
     {
+      gtk_css_node_set_parent (gtk_widget_get_css_node (widget), priv->header_node);
       gtk_widget_set_child_visible (widget, priv->show_tabs);
       gtk_widget_set_parent (widget, GTK_WIDGET (notebook));
+      update_node_ordering (notebook);
     }
 
   gtk_widget_queue_resize (GTK_WIDGET (notebook));

gtk/theme/Adwaita/_common.scss

@@ -1545,10 +1545,9 @@ popover {
   &.osd { @extend %osd; }
 }
 
-/*****************
- * Notebooks and *
- * Tabs          *
- *****************/
+/*************
+ * Notebooks *
+ *************/
 
 notebook {
   -GtkNotebook-initial-gap: 10;
@@ -1572,20 +1571,25 @@ notebook {
   }
   &.frame {
     border: 1px solid $borders_color;
-    // FIXME doesn't work
-    &.top { border-top-width: 0; }
-    &.bottom { border-bottom-width: 0; }
-    &.right { border-right-width: 0; }
-    &.left { border-left-width: 0; }
     &:backdrop { border-color: $backdrop_borders_color; }
   }
-  &.header {
+
+  & header {
+    //vertical tab sizing
+    $vt_vpadding: 8px;
+    $vt_hpadding: 20px;
+    // horizontal tab sizing
+    $ht_vpadding: 5px;
+    $ht_hpadding: 20px;
+    $tab_indicator_size: 3px;
+    $_header_shade: inset 0 2px 3px -1px transparentize(black, 0.85);
+
     // FIXME: double borders in some case, can't fix it w/o a class tho
     // FIXME: doesn't work on dark var
     background-color: mix($bg_color, $borders_color, 70%);
 
     // this is the shading of the header behind the tabs
-    &.frame {
+    .frame & {
       border: 1px solid $borders_color;
       &.top { border-bottom-width: 0; }
       &.bottom { border-top-width: 0; }
@@ -1594,34 +1598,82 @@ notebook {
       &:backdrop { border-color: $backdrop_borders_color; }
     }
 
-    $_header_shade: inset 0 2px 3px -1px transparentize(black, 0.85);
     &.top {
       box-shadow: $_header_shade,
                   inset 0 -1px $borders_color; // border
       &:backdrop { box-shadow: inset 0 -1px $backdrop_borders_color; }
+      & tab {
+        padding: $vt_vpadding $vt_hpadding;
+        border-bottom-width: $tab_indicator_size;
+        &.reorderable-page {
+          padding-left: 12px;  // for a nicer close button
+          padding-right: 12px; // placement
+          border-left-width: 1px;
+          border-right-width: 1px;
+        }
+      }
     }
     &.bottom {
       box-shadow: $_header_shade,
                   inset 0 1px $borders_color;
       &:backdrop { box-shadow: inset 0 1px $backdrop_borders_color; }
+      & tab {
+        padding: $vt_vpadding $vt_hpadding;
+        border-top-width: $tab_indicator_size;
+        &.reorderable-page {
+          padding-left: 12px;  // for a nicer close button
+          padding-right: 12px; // placement
+          border-left-width: 1px;
+          border-right-width: 1px;
+        }
+      }
     }
     &.right {
       box-shadow: $_header_shade,
                   inset 1px 0 $borders_color;
       &:backdrop { box-shadow: inset 1px 0 $backdrop_borders_color; }
+      & tab {
+        padding: $ht_vpadding $ht_hpadding;
+        border-left-width: $tab_indicator_size;
+        &.reorderable-page {
+          border-bottom-width: 1px;
+          border-top-width: 1px;
+        }
+      }
     }
     &.left {
       box-shadow: $_header_shade,
                   inset -1px 0 $borders_color;
       &:backdrop { box-shadow: inset -1px 0 $backdrop_borders_color; }
+      & tab {
+        padding: $ht_vpadding $ht_hpadding;
+        border-right-width: $tab_indicator_size;
+        &.reorderable-page {
+          border-bottom-width: 1px;
+          border-top-width: 1px;
+        }
+      }
     }
     &:backdrop {
       // same color as backdrop pushed button
       background-color: $backdrop_dark_fill;
       box-shadow: none;
     }
+    & tabs arrow {
+      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+      color: $insensitive_fg_color;
+      &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); }
+      &:active { color: $fg_color; }
+      &:insensitive {
+        -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+        color: transparentize($insensitive_fg_color,0.7);
+      }
+      &:backdrop { color: transparentize($backdrop_fg_color,0.6); }
+      &:backdrop:insensitive { color: $backdrop_insensitive_color; }
+    }
   }
-  tab {
+
+  & tab {
     border-width: 0;
     border-style: solid;
     border-color: transparent;
@@ -1629,78 +1681,6 @@ notebook {
 
     outline-offset: 0;
 
-    $tab_indicator_size: 3px;
-    //vertical tab sizing
-    $vt_vpadding: 8px;
-    $vt_hpadding: 20px;
-    // horizontal tab sizing
-    $ht_vpadding: 5px;
-    $ht_hpadding: 20px;
-
-    //FIXME: we get double border in some cases, not considering the broken
-    //notebook content frame...
-    &.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
-    &.left, &.right { padding: $ht_vpadding $ht_hpadding; }
-
-
-    /* works for testnotebookdnd, but there's a superfluous border
-       in gedit or web, commented out for now, needs gtk fixes
-    &.reorderable-page {
-      &.top {
-        padding-top: ($vt_vpadding - 1px);
-        border-top-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.bottom {
-        padding-bottom: ($vt_vpadding - 1px);
-        border-bottom-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.left {
-        padding-left: ($ht_hpadding - 1px);
-        border-left-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-      &.right {
-        padding-right: ($ht_hpadding - 1px);
-        border-right-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-    }
-    */
-    &.reorderable-page {
-      &.top, &.bottom {
-        padding-left: 12px;  // for a nicer close button
-        padding-right: 12px; // placement
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.left, &.right {
-        border-bottom-width: 1px;
-        border-top-width: 1px;
-      }
-    }
-    &.top {
-      //padding-bottom: ($vt_vpadding -$tab_indicator_size);
-      border-bottom-width: $tab_indicator_size;
-    }
-    &.bottom {
-      //padding-top: ($vt_vpadding -$tab_indicator_size);
-      border-top-width: $tab_indicator_size;
-    }
-    &.left {
-      //padding-right: ($ht_hpadding -$tab_indicator_size);
-      border-right-width: $tab_indicator_size;
-    }
-    &.right {
-      //padding-left: ($ht_hpadding -$tab_indicator_size);
-      border-left-width: $tab_indicator_size;
-    }
-
     //here's the interesting stuff
     &:hover {
       border-color: $borders_color;
@@ -1716,7 +1696,7 @@ notebook {
                              (bottom, top),
                              (left, right),
                              (right, left) {
-      &.reorderable-page.#{$_tab} {
+      .#{$_tab} &.reorderable-page {
         border-color: transparent;
         &:hover {
           border-color: transparentize($borders_color,0.7);
@@ -1785,20 +1765,6 @@ notebook {
       }
     }
   }
-  &.arrow {
-    color: $insensitive_fg_color;
-    &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); }
-    &:active { color: $fg_color; }
-    &:insensitive {
-      color: transparentize($insensitive_fg_color,0.7);
-    }
-    &:backdrop {
-      color: transparentize($backdrop_fg_color,0.6);
-      &:insensitive {
-        color: $backdrop_insensitive_color;
-      }
-    }
-  }
 }
 
 /**************

gtk/theme/Adwaita/gtk-contained-dark.css

@@ -2109,10 +2109,9 @@ popover {
     text-shadow: none;
     transition: none; }
 
-/*****************
- * Notebooks and *
- * Tabs          *
- *****************/
+/*************
+ * Notebooks *
+ *************/
 notebook {
   -GtkNotebook-initial-gap: 10;
   -GtkNotebook-arrow-spacing: 5;
@@ -2128,104 +2127,89 @@ notebook {
     background-color: #2c2c2c; }
   notebook.frame {
     border: 1px solid #1c1f1f; }
-    notebook.frame.top {
-      border-top-width: 0; }
-    notebook.frame.bottom {
-      border-bottom-width: 0; }
-    notebook.frame.right {
-      border-right-width: 0; }
-    notebook.frame.left {
-      border-left-width: 0; }
     notebook.frame:backdrop {
       border-color: #1f2222; }
-  notebook.header {
+  notebook header {
     background-color: #303535; }
-    notebook.header.frame {
+    .frame notebook header {
       border: 1px solid #1c1f1f; }
-      notebook.header.frame.top {
+      .frame notebook header.top {
         border-bottom-width: 0; }
-      notebook.header.frame.bottom {
+      .frame notebook header.bottom {
         border-top-width: 0; }
-      notebook.header.frame.right {
+      .frame notebook header.right {
         border-left-width: 0; }
-      notebook.header.frame.left {
+      .frame notebook header.left {
         border-right-width: 0; }
-      notebook.header.frame:backdrop {
+      .frame notebook header:backdrop {
         border-color: #1f2222; }
-    notebook.header.top {
+    notebook header.top {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #1c1f1f; }
-      notebook.header.top:backdrop {
+      notebook header.top:backdrop {
         box-shadow: inset 0 -1px #1f2222; }
-    notebook.header.bottom {
+      notebook header.top tab {
+        padding: 8px 20px;
+        border-bottom-width: 3px; }
+        notebook header.top tab.reorderable-page {
+          padding-left: 12px;
+          padding-right: 12px;
+          border-left-width: 1px;
+          border-right-width: 1px; }
+    notebook header.bottom {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #1c1f1f; }
-      notebook.header.bottom:backdrop {
+      notebook header.bottom:backdrop {
         box-shadow: inset 0 1px #1f2222; }
-    notebook.header.right {
+      notebook header.bottom tab {
+        padding: 8px 20px;
+        border-top-width: 3px; }
+        notebook header.bottom tab.reorderable-page {
+          padding-left: 12px;
+          padding-right: 12px;
+          border-left-width: 1px;
+          border-right-width: 1px; }
+    notebook header.right {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #1c1f1f; }
-      notebook.header.right:backdrop {
+      notebook header.right:backdrop {
         box-shadow: inset 1px 0 #1f2222; }
-    notebook.header.left {
+      notebook header.right tab {
+        padding: 5px 20px;
+        border-left-width: 3px; }
+        notebook header.right tab.reorderable-page {
+          border-bottom-width: 1px;
+          border-top-width: 1px; }
+    notebook header.left {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #1c1f1f; }
-      notebook.header.left:backdrop {
+      notebook header.left:backdrop {
         box-shadow: inset -1px 0 #1f2222; }
-    notebook.header:backdrop {
+      notebook header.left tab {
+        padding: 5px 20px;
+        border-right-width: 3px; }
+        notebook header.left tab.reorderable-page {
+          border-bottom-width: 1px;
+          border-top-width: 1px; }
+    notebook header:backdrop {
       background-color: #303535;
       box-shadow: none; }
+    notebook header tabs arrow {
+      -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+      color: #949796; }
+      notebook header tabs arrow:hover {
+        color: #c1c3c1; }
+      notebook header tabs arrow:active {
+        color: #eeeeec; }
+      notebook header tabs arrow:insensitive {
+        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+        color: rgba(148, 151, 150, 0.3); }
+      notebook header tabs arrow:backdrop {
+        color: rgba(148, 151, 150, 0.4); }
+      notebook header tabs arrow:backdrop:insensitive {
+        color: #5d6767; }
   notebook tab {
     border-width: 0;
     border-style: solid;
     border-color: transparent;
     background-color: transparent;
-    outline-offset: 0;
-    /* works for testnotebookdnd, but there's a superfluous border
-       in gedit or web, commented out for now, needs gtk fixes
-    &.reorderable-page {
-      &.top {
-        padding-top: ($vt_vpadding - 1px);
-        border-top-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.bottom {
-        padding-bottom: ($vt_vpadding - 1px);
-        border-bottom-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.left {
-        padding-left: ($ht_hpadding - 1px);
-        border-left-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-      &.right {
-        padding-right: ($ht_hpadding - 1px);
-        border-right-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-    }
-    */ }
-    notebook tab.top, notebook tab.bottom {
-      padding: 8px 20px; }
-    notebook tab.left, notebook tab.right {
-      padding: 5px 20px; }
-    notebook tab.reorderable-page.top, notebook tab.reorderable-page.bottom {
-      padding-left: 12px;
-      padding-right: 12px;
-      border-left-width: 1px;
-      border-right-width: 1px; }
-    notebook tab.reorderable-page.left, notebook tab.reorderable-page.right {
-      border-bottom-width: 1px;
-      border-top-width: 1px; }
-    notebook tab.top {
-      border-bottom-width: 3px; }
-    notebook tab.bottom {
-      border-top-width: 3px; }
-    notebook tab.left {
-      border-right-width: 3px; }
-    notebook tab.right {
-      border-left-width: 3px; }
+    outline-offset: 0; }
     notebook tab:hover {
       border-color: #1c1f1f; }
     notebook tab:active, notebook tab:backdrop:active {
@@ -2233,80 +2217,80 @@ notebook {
     notebook tab:backdrop {
       background-color: transparent;
       border-color: transparent; }
-    notebook tab.reorderable-page.top {
+    .top notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.top:hover {
+      .top notebook tab.reorderable-page:hover {
         border-color: rgba(28, 31, 31, 0.3);
         border-bottom-color: #1c1f1f;
         background-color: rgba(57, 63, 63, 0.2); }
-      notebook tab.reorderable-page.top:active {
+      .top notebook tab.reorderable-page:active {
         background-color: rgba(57, 63, 63, 0.5);
         border-color: rgba(28, 31, 31, 0.5);
         border-bottom-color: #215d9c; }
-        notebook tab.reorderable-page.top:active:hover {
+        .top notebook tab.reorderable-page:active:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        notebook tab.reorderable-page.top:active:backdrop {
+        .top notebook tab.reorderable-page:active:backdrop {
           border-color: #1f2222;
           background-color: #393f3f;
           border-bottom-color: #215d9c; }
-      notebook tab.reorderable-page.top:backdrop {
+      .top notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.bottom {
+    .bottom notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.bottom:hover {
+      .bottom notebook tab.reorderable-page:hover {
         border-color: rgba(28, 31, 31, 0.3);
         border-top-color: #1c1f1f;
         background-color: rgba(57, 63, 63, 0.2); }
-      notebook tab.reorderable-page.bottom:active {
+      .bottom notebook tab.reorderable-page:active {
         background-color: rgba(57, 63, 63, 0.5);
         border-color: rgba(28, 31, 31, 0.5);
         border-top-color: #215d9c; }
-        notebook tab.reorderable-page.bottom:active:hover {
+        .bottom notebook tab.reorderable-page:active:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        notebook tab.reorderable-page.bottom:active:backdrop {
+        .bottom notebook tab.reorderable-page:active:backdrop {
           border-color: #1f2222;
           background-color: #393f3f;
           border-top-color: #215d9c; }
-      notebook tab.reorderable-page.bottom:backdrop {
+      .bottom notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.left {
+    .left notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.left:hover {
+      .left notebook tab.reorderable-page:hover {
         border-color: rgba(28, 31, 31, 0.3);
         border-right-color: #1c1f1f;
         background-color: rgba(57, 63, 63, 0.2); }
-      notebook tab.reorderable-page.left:active {
+      .left notebook tab.reorderable-page:active {
         background-color: rgba(57, 63, 63, 0.5);
         border-color: rgba(28, 31, 31, 0.5);
         border-right-color: #215d9c; }
-        notebook tab.reorderable-page.left:active:hover {
+        .left notebook tab.reorderable-page:active:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        notebook tab.reorderable-page.left:active:backdrop {
+        .left notebook tab.reorderable-page:active:backdrop {
           border-color: #1f2222;
           background-color: #393f3f;
           border-right-color: #215d9c; }
-      notebook tab.reorderable-page.left:backdrop {
+      .left notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.right {
+    .right notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.right:hover {
+      .right notebook tab.reorderable-page:hover {
         border-color: rgba(28, 31, 31, 0.3);
         border-left-color: #1c1f1f;
         background-color: rgba(57, 63, 63, 0.2); }
-      notebook tab.reorderable-page.right:active {
+      .right notebook tab.reorderable-page:active {
         background-color: rgba(57, 63, 63, 0.5);
         border-color: rgba(28, 31, 31, 0.5);
         border-left-color: #215d9c; }
-        notebook tab.reorderable-page.right:active:hover {
+        .right notebook tab.reorderable-page:active:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        notebook tab.reorderable-page.right:active:backdrop {
+        .right notebook tab.reorderable-page:active:backdrop {
           border-color: #1f2222;
           background-color: #393f3f;
           border-left-color: #215d9c; }
-      notebook tab.reorderable-page.right:backdrop {
+      .right notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
     notebook tab label {
@@ -2363,18 +2347,6 @@ notebook {
       notebook tab .titlebar button.titlebutton > image,
       .titlebar notebook tab button.titlebutton > image {
         padding: 2px; }
-  notebook.arrow {
-    color: #949796; }
-    notebook.arrow:hover {
-      color: #c1c3c1; }
-    notebook.arrow:active {
-      color: #eeeeec; }
-    notebook.arrow:insensitive {
-      color: rgba(148, 151, 150, 0.3); }
-    notebook.arrow:backdrop {
-      color: rgba(148, 151, 150, 0.4); }
-      notebook.arrow:backdrop:insensitive {
-        color: #5d6767; }
 
 /**************
  * Scrollbars *

gtk/theme/Adwaita/gtk-contained.css

@@ -2115,10 +2115,9 @@ popover {
     text-shadow: none;
     transition: none; }
 
-/*****************
- * Notebooks and *
- * Tabs          *
- *****************/
+/*************
+ * Notebooks *
+ *************/
 notebook {
   -GtkNotebook-initial-gap: 10;
   -GtkNotebook-arrow-spacing: 5;
@@ -2134,104 +2133,89 @@ notebook {
     background-color: white; }
   notebook.frame {
     border: 1px solid #a1a1a1; }
-    notebook.frame.top {
-      border-top-width: 0; }
-    notebook.frame.bottom {
-      border-bottom-width: 0; }
-    notebook.frame.right {
-      border-right-width: 0; }
-    notebook.frame.left {
-      border-left-width: 0; }
     notebook.frame:backdrop {
       border-color: darkgray; }
-  notebook.header {
+  notebook header {
     background-color: #d6d6d6; }
-    notebook.header.frame {
+    .frame notebook header {
       border: 1px solid #a1a1a1; }
-      notebook.header.frame.top {
+      .frame notebook header.top {
         border-bottom-width: 0; }
-      notebook.header.frame.bottom {
+      .frame notebook header.bottom {
         border-top-width: 0; }
-      notebook.header.frame.right {
+      .frame notebook header.right {
         border-left-width: 0; }
-      notebook.header.frame.left {
+      .frame notebook header.left {
         border-right-width: 0; }
-      notebook.header.frame:backdrop {
+      .frame notebook header:backdrop {
         border-color: darkgray; }
-    notebook.header.top {
+    notebook header.top {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #a1a1a1; }
-      notebook.header.top:backdrop {
+      notebook header.top:backdrop {
         box-shadow: inset 0 -1px darkgray; }
-    notebook.header.bottom {
+      notebook header.top tab {
+        padding: 8px 20px;
+        border-bottom-width: 3px; }
+        notebook header.top tab.reorderable-page {
+          padding-left: 12px;
+          padding-right: 12px;
+          border-left-width: 1px;
+          border-right-width: 1px; }
+    notebook header.bottom {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #a1a1a1; }
-      notebook.header.bottom:backdrop {
+      notebook header.bottom:backdrop {
         box-shadow: inset 0 1px darkgray; }
-    notebook.header.right {
+      notebook header.bottom tab {
+        padding: 8px 20px;
+        border-top-width: 3px; }
+        notebook header.bottom tab.reorderable-page {
+          padding-left: 12px;
+          padding-right: 12px;
+          border-left-width: 1px;
+          border-right-width: 1px; }
+    notebook header.right {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #a1a1a1; }
-      notebook.header.right:backdrop {
+      notebook header.right:backdrop {
         box-shadow: inset 1px 0 darkgray; }
-    notebook.header.left {
+      notebook header.right tab {
+        padding: 5px 20px;
+        border-left-width: 3px; }
+        notebook header.right tab.reorderable-page {
+          border-bottom-width: 1px;
+          border-top-width: 1px; }
+    notebook header.left {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #a1a1a1; }
-      notebook.header.left:backdrop {
+      notebook header.left:backdrop {
         box-shadow: inset -1px 0 darkgray; }
-    notebook.header:backdrop {
+      notebook header.left tab {
+        padding: 5px 20px;
+        border-right-width: 3px; }
+        notebook header.left tab.reorderable-page {
+          border-bottom-width: 1px;
+          border-top-width: 1px; }
+    notebook header:backdrop {
       background-color: #d5d5d5;
       box-shadow: none; }
+    notebook header tabs arrow {
+      -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+      color: #8e9192; }
+      notebook header tabs arrow:hover {
+        color: #5e6364; }
+      notebook header tabs arrow:active {
+        color: #2e3436; }
+      notebook header tabs arrow:insensitive {
+        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+        color: rgba(142, 145, 146, 0.3); }
+      notebook header tabs arrow:backdrop {
+        color: rgba(142, 145, 146, 0.4); }
+      notebook header tabs arrow:backdrop:insensitive {
+        color: #c7c7c7; }
   notebook tab {
     border-width: 0;
     border-style: solid;
     border-color: transparent;
     background-color: transparent;
-    outline-offset: 0;
-    /* works for testnotebookdnd, but there's a superfluous border
-       in gedit or web, commented out for now, needs gtk fixes
-    &.reorderable-page {
-      &.top {
-        padding-top: ($vt_vpadding - 1px);
-        border-top-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.bottom {
-        padding-bottom: ($vt_vpadding - 1px);
-        border-bottom-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.left {
-        padding-left: ($ht_hpadding - 1px);
-        border-left-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-      &.right {
-        padding-right: ($ht_hpadding - 1px);
-        border-right-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-    }
-    */ }
-    notebook tab.top, notebook tab.bottom {
-      padding: 8px 20px; }
-    notebook tab.left, notebook tab.right {
-      padding: 5px 20px; }
-    notebook tab.reorderable-page.top, notebook tab.reorderable-page.bottom {
-      padding-left: 12px;
-      padding-right: 12px;
-      border-left-width: 1px;
-      border-right-width: 1px; }
-    notebook tab.reorderable-page.left, notebook tab.reorderable-page.right {
-      border-bottom-width: 1px;
-      border-top-width: 1px; }
-    notebook tab.top {
-      border-bottom-width: 3px; }
-    notebook tab.bottom {
-      border-top-width: 3px; }
-    notebook tab.left {
-      border-right-width: 3px; }
-    notebook tab.right {
-      border-left-width: 3px; }
+    outline-offset: 0; }
     notebook tab:hover {
       border-color: #a1a1a1; }
     notebook tab:active, notebook tab:backdrop:active {
@@ -2239,80 +2223,80 @@ notebook {
     notebook tab:backdrop {
       background-color: transparent;
       border-color: transparent; }
-    notebook tab.reorderable-page.top {
+    .top notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.top:hover {
+      .top notebook tab.reorderable-page:hover {
         border-color: rgba(161, 161, 161, 0.3);
         border-bottom-color: #a1a1a1;
         background-color: rgba(237, 237, 237, 0.2); }
-      notebook tab.reorderable-page.top:active {
+      .top notebook tab.reorderable-page:active {
         background-color: rgba(237, 237, 237, 0.5);
         border-color: rgba(161, 161, 161, 0.5);
         border-bottom-color: #4a90d9; }
-        notebook tab.reorderable-page.top:active:hover {
+        .top notebook tab.reorderable-page:active:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        notebook tab.reorderable-page.top:active:backdrop {
+        .top notebook tab.reorderable-page:active:backdrop {
           border-color: darkgray;
           background-color: #ededed;
           border-bottom-color: #4a90d9; }
-      notebook tab.reorderable-page.top:backdrop {
+      .top notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.bottom {
+    .bottom notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.bottom:hover {
+      .bottom notebook tab.reorderable-page:hover {
         border-color: rgba(161, 161, 161, 0.3);
         border-top-color: #a1a1a1;
         background-color: rgba(237, 237, 237, 0.2); }
-      notebook tab.reorderable-page.bottom:active {
+      .bottom notebook tab.reorderable-page:active {
         background-color: rgba(237, 237, 237, 0.5);
         border-color: rgba(161, 161, 161, 0.5);
         border-top-color: #4a90d9; }
-        notebook tab.reorderable-page.bottom:active:hover {
+        .bottom notebook tab.reorderable-page:active:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        notebook tab.reorderable-page.bottom:active:backdrop {
+        .bottom notebook tab.reorderable-page:active:backdrop {
           border-color: darkgray;
           background-color: #ededed;
           border-top-color: #4a90d9; }
-      notebook tab.reorderable-page.bottom:backdrop {
+      .bottom notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.left {
+    .left notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.left:hover {
+      .left notebook tab.reorderable-page:hover {
         border-color: rgba(161, 161, 161, 0.3);
         border-right-color: #a1a1a1;
         background-color: rgba(237, 237, 237, 0.2); }
-      notebook tab.reorderable-page.left:active {
+      .left notebook tab.reorderable-page:active {
         background-color: rgba(237, 237, 237, 0.5);
         border-color: rgba(161, 161, 161, 0.5);
         border-right-color: #4a90d9; }
-        notebook tab.reorderable-page.left:active:hover {
+        .left notebook tab.reorderable-page:active:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        notebook tab.reorderable-page.left:active:backdrop {
+        .left notebook tab.reorderable-page:active:backdrop {
           border-color: darkgray;
           background-color: #ededed;
           border-right-color: #4a90d9; }
-      notebook tab.reorderable-page.left:backdrop {
+      .left notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.right {
+    .right notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.right:hover {
+      .right notebook tab.reorderable-page:hover {
         border-color: rgba(161, 161, 161, 0.3);
         border-left-color: #a1a1a1;
         background-color: rgba(237, 237, 237, 0.2); }
-      notebook tab.reorderable-page.right:active {
+      .right notebook tab.reorderable-page:active {
         background-color: rgba(237, 237, 237, 0.5);
         border-color: rgba(161, 161, 161, 0.5);
         border-left-color: #4a90d9; }
-        notebook tab.reorderable-page.right:active:hover {
+        .right notebook tab.reorderable-page:active:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        notebook tab.reorderable-page.right:active:backdrop {
+        .right notebook tab.reorderable-page:active:backdrop {
           border-color: darkgray;
           background-color: #ededed;
           border-left-color: #4a90d9; }
-      notebook tab.reorderable-page.right:backdrop {
+      .right notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
     notebook tab label {
@@ -2369,18 +2353,6 @@ notebook {
       notebook tab .titlebar button.titlebutton > image,
       .titlebar notebook tab button.titlebutton > image {
         padding: 2px; }
-  notebook.arrow {
-    color: #8e9192; }
-    notebook.arrow:hover {
-      color: #5e6364; }
-    notebook.arrow:active {
-      color: #2e3436; }
-    notebook.arrow:insensitive {
-      color: rgba(142, 145, 146, 0.3); }
-    notebook.arrow:backdrop {
-      color: rgba(142, 145, 146, 0.4); }
-      notebook.arrow:backdrop:insensitive {
-        color: #c7c7c7; }
 
 /**************
  * Scrollbars *

gtk/theme/HighContrast/_common.scss

@@ -1237,11 +1237,6 @@ notebook {
   }
   &.frame {
     border: 1px solid $borders_color;
-    // FIXME doesn't work
-    &.top { border-top-width: 0; }
-    &.bottom { border-bottom-width: 0; }
-    &.right { border-right-width: 0; }
-    &.left { border-left-width: 0; }
     &:backdrop { border-color: $backdrop_borders_color; }
   }
   &.header {
@@ -1250,7 +1245,7 @@ notebook {
     background-color: mix($bg_color, $borders_color, 70%);
 
     // this is the shading of the header behind the tabs
-    &.frame {
+    .frame & {
       border: 1px solid $borders_color;
       &.top { border-bottom-width: 0; }
       &.bottom { border-top-width: 0; }
@@ -1286,7 +1281,52 @@ notebook {
       box-shadow: none;
     }
   }
-  tab {
+  //vertical tab sizing
+  $vt_vpadding: 8px;
+  $vt_hpadding: 20px;
+  // horizontal tab sizing
+  $ht_vpadding: 5px;
+  $ht_hpadding: 20px;
+  $tab_indicator_size: 3px;
+
+  & header.top tab {
+    padding: $vt_vpadding $vt_hpadding;
+    border-bottom-width: $tab_indicator_size;
+    &.reorderable-page {
+      padding-left: 12px;  // for a nicer close button
+      padding-right: 12px; // placement
+      border-left-width: 1px;
+      border-right-width: 1px;
+    }
+  }
+  & header.bottom tab {
+    padding: $vt_vpadding $vt_hpadding;
+    border-top-width: $tab_indicator_size;
+    &.reorderable-page {
+      padding-left: 12px;  // for a nicer close button
+      padding-right: 12px; // placement
+      border-left-width: 1px;
+      border-right-width: 1px;
+    }
+  }
+  & header.left tab {
+    padding: $ht_vpadding $ht_hpadding;
+    border-right-width: $tab_indicator_size;
+    &.reorderable-page {
+      border-bottom-width: 1px;
+      border-top-width: 1px;
+    }
+  }
+  & header.right tab {
+    padding: $ht_vpadding $ht_hpadding;
+    border-left-width: $tab_indicator_size;
+    &.reorderable-page {
+      border-bottom-width: 1px;
+      border-top-width: 1px;
+    }
+  }
+
+  & tab {
     border-width: 0;
     border-style: solid;
     border-color: transparent;
@@ -1294,78 +1334,6 @@ notebook {
 
     outline-offset: 0;
 
-    $tab_indicator_size: 3px;
-    //vertical tab sizing
-    $vt_vpadding: 8px;
-    $vt_hpadding: 20px;
-    // horizontal tab sizing
-    $ht_vpadding: 5px;
-    $ht_hpadding: 20px;
-
-    //FIXME: we get double border in some cases, not considering the broken
-    //notebook content frame...
-    &.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
-    &.left, &.right { padding: $ht_vpadding $ht_hpadding; }
-
-
-    /* works for testnotebookdnd, but there's a superfluous border
-       in gedit or web, commented out for now, needs gtk fixes
-    &.reorderable-page {
-      &.top {
-        padding-top: ($vt_vpadding - 1px);
-        border-top-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.bottom {
-        padding-bottom: ($vt_vpadding - 1px);
-        border-bottom-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.left {
-        padding-left: ($ht_hpadding - 1px);
-        border-left-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-      &.right {
-        padding-right: ($ht_hpadding - 1px);
-        border-right-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-    }
-    */
-    &.reorderable-page {
-      &.top, &.bottom {
-        padding-left: 12px;  // for a nicer close button
-        padding-right: 12px; // placement
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.left, &.right {
-        border-bottom-width: 1px;
-        border-top-width: 1px;
-      }
-    }
-    &.top {
-      //padding-bottom: ($vt_vpadding -$tab_indicator_size);
-      border-bottom-width: $tab_indicator_size;
-    }
-    &.bottom {
-      //padding-top: ($vt_vpadding -$tab_indicator_size);
-      border-top-width: $tab_indicator_size;
-    }
-    &.left {
-      //padding-right: ($ht_hpadding -$tab_indicator_size);
-      border-right-width: $tab_indicator_size;
-    }
-    &.right {
-      //padding-left: ($ht_hpadding -$tab_indicator_size);
-      border-left-width: $tab_indicator_size;
-    }
-
     //here's the interesting stuff
     &:hover {
       border-color: $borders_color;
@@ -1381,7 +1349,7 @@ notebook {
                              (bottom, top),
                              (left, right),
                              (right, left) {
-      &.reorderable-page.#{$_tab} {
+      .#{$_tab} &.reorderable-page {
         border-color: transparent;
         &:hover {
           border-color: transparentize($borders_color,0.7);

gtk/theme/HighContrast/gtk.css

@@ -1374,29 +1374,21 @@ notebook {
     background-color: #fff; }
   notebook.frame {
     border: 1px solid gray; }
-    notebook.frame.top {
-      border-top-width: 0; }
-    notebook.frame.bottom {
-      border-bottom-width: 0; }
-    notebook.frame.right {
-      border-right-width: 0; }
-    notebook.frame.left {
-      border-left-width: 0; }
     notebook.frame:backdrop {
       border-color: #8d8d8d; }
   notebook.header {
     background-color: #d9d9d9; }
-    notebook.header.frame {
+    .frame notebook.header {
       border: 1px solid gray; }
-      notebook.header.frame.top {
+      .frame notebook.header.top {
         border-bottom-width: 0; }
-      notebook.header.frame.bottom {
+      .frame notebook.header.bottom {
         border-top-width: 0; }
-      notebook.header.frame.right {
+      .frame notebook.header.right {
         border-left-width: 0; }
-      notebook.header.frame.left {
+      .frame notebook.header.left {
         border-right-width: 0; }
-      notebook.header.frame:backdrop {
+      .frame notebook.header:backdrop {
         border-color: #8d8d8d; }
     notebook.header.top {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px gray; }
@@ -1417,61 +1409,40 @@ notebook {
     notebook.header:backdrop {
       background-color: #d7d7d7;
       box-shadow: none; }
+  notebook header.top tab {
+    padding: 8px 20px;
+    border-bottom-width: 3px; }
+    notebook header.top tab.reorderable-page {
+      padding-left: 12px;
+      padding-right: 12px;
+      border-left-width: 1px;
+      border-right-width: 1px; }
+  notebook header.bottom tab {
+    padding: 8px 20px;
+    border-top-width: 3px; }
+    notebook header.bottom tab.reorderable-page {
+      padding-left: 12px;
+      padding-right: 12px;
+      border-left-width: 1px;
+      border-right-width: 1px; }
+  notebook header.left tab {
+    padding: 5px 20px;
+    border-right-width: 3px; }
+    notebook header.left tab.reorderable-page {
+      border-bottom-width: 1px;
+      border-top-width: 1px; }
+  notebook header.right tab {
+    padding: 5px 20px;
+    border-left-width: 3px; }
+    notebook header.right tab.reorderable-page {
+      border-bottom-width: 1px;
+      border-top-width: 1px; }
   notebook tab {
     border-width: 0;
     border-style: solid;
     border-color: transparent;
     background-color: transparent;
-    outline-offset: 0;
-    /* works for testnotebookdnd, but there's a superfluous border
-       in gedit or web, commented out for now, needs gtk fixes
-    &.reorderable-page {
-      &.top {
-        padding-top: ($vt_vpadding - 1px);
-        border-top-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.bottom {
-        padding-bottom: ($vt_vpadding - 1px);
-        border-bottom-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.left {
-        padding-left: ($ht_hpadding - 1px);
-        border-left-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-      &.right {
-        padding-right: ($ht_hpadding - 1px);
-        border-right-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-    }
-    */ }
-    notebook tab.top, notebook tab.bottom {
-      padding: 8px 20px; }
-    notebook tab.left, notebook tab.right {
-      padding: 5px 20px; }
-    notebook tab.reorderable-page.top, notebook tab.reorderable-page.bottom {
-      padding-left: 12px;
-      padding-right: 12px;
-      border-left-width: 1px;
-      border-right-width: 1px; }
-    notebook tab.reorderable-page.left, notebook tab.reorderable-page.right {
-      border-bottom-width: 1px;
-      border-top-width: 1px; }
-    notebook tab.top {
-      border-bottom-width: 3px; }
-    notebook tab.bottom {
-      border-top-width: 3px; }
-    notebook tab.left {
-      border-right-width: 3px; }
-    notebook tab.right {
-      border-left-width: 3px; }
+    outline-offset: 0; }
     notebook tab:hover {
       border-color: gray; }
     notebook tab:active, notebook tab:backdrop:active {
@@ -1479,80 +1450,80 @@ notebook {
     notebook tab:backdrop {
       background-color: transparent;
       border-color: transparent; }
-    notebook tab.reorderable-page.top {
+    .top notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.top:hover {
+      .top notebook tab.reorderable-page:hover {
         border-color: rgba(128, 128, 128, 0.3);
         border-bottom-color: gray;
         background-color: rgba(255, 255, 255, 0.2); }
-      notebook tab.reorderable-page.top:active {
+      .top notebook tab.reorderable-page:active {
         background-color: rgba(255, 255, 255, 0.5);
         border-color: rgba(128, 128, 128, 0.5);
         border-bottom-color: #000; }
-        notebook tab.reorderable-page.top:active:hover {
+        .top notebook tab.reorderable-page:active:hover {
           background-color: rgba(255, 255, 255, 0.7); }
-        notebook tab.reorderable-page.top:active:backdrop {
+        .top notebook tab.reorderable-page:active:backdrop {
           border-color: #8d8d8d;
           background-color: #fff;
           border-bottom-color: #000; }
-      notebook tab.reorderable-page.top:backdrop {
+      .top notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.bottom {
+    .bottom notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.bottom:hover {
+      .bottom notebook tab.reorderable-page:hover {
         border-color: rgba(128, 128, 128, 0.3);
         border-top-color: gray;
         background-color: rgba(255, 255, 255, 0.2); }
-      notebook tab.reorderable-page.bottom:active {
+      .bottom notebook tab.reorderable-page:active {
         background-color: rgba(255, 255, 255, 0.5);
         border-color: rgba(128, 128, 128, 0.5);
         border-top-color: #000; }
-        notebook tab.reorderable-page.bottom:active:hover {
+        .bottom notebook tab.reorderable-page:active:hover {
           background-color: rgba(255, 255, 255, 0.7); }
-        notebook tab.reorderable-page.bottom:active:backdrop {
+        .bottom notebook tab.reorderable-page:active:backdrop {
           border-color: #8d8d8d;
           background-color: #fff;
           border-top-color: #000; }
-      notebook tab.reorderable-page.bottom:backdrop {
+      .bottom notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.left {
+    .left notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.left:hover {
+      .left notebook tab.reorderable-page:hover {
         border-color: rgba(128, 128, 128, 0.3);
         border-right-color: gray;
         background-color: rgba(255, 255, 255, 0.2); }
-      notebook tab.reorderable-page.left:active {
+      .left notebook tab.reorderable-page:active {
         background-color: rgba(255, 255, 255, 0.5);
         border-color: rgba(128, 128, 128, 0.5);
         border-right-color: #000; }
-        notebook tab.reorderable-page.left:active:hover {
+        .left notebook tab.reorderable-page:active:hover {
           background-color: rgba(255, 255, 255, 0.7); }
-        notebook tab.reorderable-page.left:active:backdrop {
+        .left notebook tab.reorderable-page:active:backdrop {
           border-color: #8d8d8d;
           background-color: #fff;
           border-right-color: #000; }
-      notebook tab.reorderable-page.left:backdrop {
+      .left notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.right {
+    .right notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.right:hover {
+      .right notebook tab.reorderable-page:hover {
         border-color: rgba(128, 128, 128, 0.3);
         border-left-color: gray;
         background-color: rgba(255, 255, 255, 0.2); }
-      notebook tab.reorderable-page.right:active {
+      .right notebook tab.reorderable-page:active {
         background-color: rgba(255, 255, 255, 0.5);
         border-color: rgba(128, 128, 128, 0.5);
         border-left-color: #000; }
-        notebook tab.reorderable-page.right:active:hover {
+        .right notebook tab.reorderable-page:active:hover {
           background-color: rgba(255, 255, 255, 0.7); }
-        notebook tab.reorderable-page.right:active:backdrop {
+        .right notebook tab.reorderable-page:active:backdrop {
           border-color: #8d8d8d;
           background-color: #fff;
           border-left-color: #000; }
-      notebook tab.reorderable-page.right:backdrop {
+      .right notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
     notebook tab label {