From 630b5b9797e909005fd1618776f2af109209f007 Mon Sep 17 00:00:00 2001
From: Lapo Calamandrei <calamandrei@gmail.com>
Date: Wed, 18 Jun 2014 12:08:04 +0200
Subject: [PATCH] Adwaita: reorderable tabs correctly styled for every notebook
 layout

---
 gtk/resources/theme/Adwaita/_common.scss      |  48 +++++++--
 .../theme/Adwaita/gtk-contained-dark.css      | 100 +++++++++++++++---
 gtk/resources/theme/Adwaita/gtk-contained.css | 100 +++++++++++++++---
 3 files changed, 208 insertions(+), 40 deletions(-)

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index c7b6b2a795..aac6ff565a 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -899,6 +899,32 @@ GtkPopover {
     //notebook content frame...
     &.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
     &.left, &.right { padding: $ht_vpadding $ht_hpadding; }
+    &.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;
+      }
+    }
     &.top {
       padding-bottom: ($vt_vpadding -$tab_indicator_size);
       border-bottom-width: $tab_indicator_size;
@@ -927,27 +953,28 @@ GtkPopover {
       background-color: transparent;
       border-color: transparent;
     }
-    &.reorderable-page {
+    @each $_tab, $_border in (top, bottom),
+                             (bottom, top),
+                             (left, right),
+                             (right, left) {
+    &.reorderable-page.#{$_tab}, {
       border-color: transparent;
-      border-left: 1px solid transparent;
-      border-right: 1px solid transparent;
       &:hover, &.prelight-page {
         border-color: transparentize($borders_color,0.7);
-        border-bottom-color: transparentize($borders_color,0.7);
+        border-#{$_border}-color: transparentize($borders_color,0.7);
         background-color: transparentize($bg_color,0.8);
       }
       &:active, &.active-page {
         background-color: transparentize($bg_color,0.5);
         border-color: transparentize($borders_color,0.5);
-        border-bottom-color: $selected_bg_color;
+        border-#{$_border}-color: $selected_bg_color;
         &:hover {
           background-color: transparentize($bg_color,0.3);
         }
         &:backdrop {
-          border-left-color: $backdrop_borders_color;
-          border-right-color: $backdrop_borders_color;
+          border-color: $backdrop_borders_color;
           background-color: $backdrop_bg_color;
-          border-bottom-color: $selected_bg_color;
+          border-#{$_border}-color: $selected_bg_color;
         }
       }
       &:backdrop {
@@ -955,6 +982,7 @@ GtkPopover {
         background-color: transparent;
       }
     }
+    }
     GtkLabel { //tab text
       // this doesn't affect labels on reorderable pages, not css fault.
       padding: 0 2px; // needed for a nicer focus ring
@@ -1000,8 +1028,8 @@ GtkPopover {
   }
 }
 
-.notebook > .frame,
-.notebook > .view { border: none; }
+//.notebook > .frame,
+//.notebook > .view { border: none; }
 
 /**************
  * Scrollbars *
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index df3b4cd64a..53ca6c43e9 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -1050,6 +1050,26 @@ GtkPopover {
       padding: 8px 20px; }
     .notebook tab.left, .notebook tab.right {
       padding: 5px 20px; }
+    .notebook tab.reorderable-page.top {
+      padding-top: 7px;
+      border-top-width: 1px;
+      border-left-width: 1px;
+      border-right-width: 1px; }
+    .notebook tab.reorderable-page.bottom {
+      padding-bottom: 7px;
+      border-bottom-width: 1px;
+      border-left-width: 1px;
+      border-right-width: 1px; }
+    .notebook tab.reorderable-page.left {
+      padding-left: 19px;
+      border-left-width: 1px;
+      border-top-width: 1px;
+      border-bottom-width: 1px; }
+    .notebook tab.reorderable-page.right {
+      padding-right: 19px;
+      border-right-width: 1px;
+      border-top-width: 1px;
+      border-bottom-width: 1px; }
     .notebook tab.top {
       padding-bottom: 5px;
       border-bottom-width: 3px; }
@@ -1069,26 +1089,80 @@ GtkPopover {
     .notebook tab:backdrop {
       background-color: transparent;
       border-color: transparent; }
-    .notebook tab.reorderable-page {
-      border-color: transparent;
-      border-left: 1px solid transparent;
-      border-right: 1px solid transparent; }
-      .notebook tab.reorderable-page:hover, .notebook tab.reorderable-page.prelight-page {
+    .notebook tab.reorderable-page.top {
+      border-color: transparent; }
+      .notebook tab.reorderable-page.top:hover, .notebook tab.reorderable-page.top.prelight-page {
         border-color: rgba(28, 31, 31, 0.3);
         border-bottom-color: rgba(28, 31, 31, 0.3);
         background-color: rgba(57, 63, 63, 0.2); }
-      .notebook tab.reorderable-page:active, .notebook tab.reorderable-page.active-page {
+      .notebook tab.reorderable-page.top:active, .notebook tab.reorderable-page.top.active-page {
         background-color: rgba(57, 63, 63, 0.5);
         border-color: rgba(28, 31, 31, 0.5);
         border-bottom-color: #215d9c; }
-        .notebook tab.reorderable-page:active:hover, .notebook tab.reorderable-page.active-page:hover {
+        .notebook tab.reorderable-page.top:active:hover, .notebook tab.reorderable-page.top.active-page:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        .notebook tab.reorderable-page:active:backdrop, .notebook tab.reorderable-page.active-page:backdrop {
-          border-left-color: #1e2222;
-          border-right-color: #1e2222;
+        .notebook tab.reorderable-page.top:active:backdrop, .notebook tab.reorderable-page.top.active-page:backdrop {
+          border-color: #1e2222;
           background-color: #393f3f;
           border-bottom-color: #215d9c; }
-      .notebook tab.reorderable-page:backdrop {
+      .notebook tab.reorderable-page.top:backdrop {
+        border-color: transparent;
+        background-color: transparent; }
+    .notebook tab.reorderable-page.bottom {
+      border-color: transparent; }
+      .notebook tab.reorderable-page.bottom:hover, .notebook tab.reorderable-page.bottom.prelight-page {
+        border-color: rgba(28, 31, 31, 0.3);
+        border-top-color: rgba(28, 31, 31, 0.3);
+        background-color: rgba(57, 63, 63, 0.2); }
+      .notebook tab.reorderable-page.bottom:active, .notebook tab.reorderable-page.bottom.active-page {
+        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, .notebook tab.reorderable-page.bottom.active-page:hover {
+          background-color: rgba(57, 63, 63, 0.7); }
+        .notebook tab.reorderable-page.bottom:active:backdrop, .notebook tab.reorderable-page.bottom.active-page:backdrop {
+          border-color: #1e2222;
+          background-color: #393f3f;
+          border-top-color: #215d9c; }
+      .notebook tab.reorderable-page.bottom:backdrop {
+        border-color: transparent;
+        background-color: transparent; }
+    .notebook tab.reorderable-page.left {
+      border-color: transparent; }
+      .notebook tab.reorderable-page.left:hover, .notebook tab.reorderable-page.left.prelight-page {
+        border-color: rgba(28, 31, 31, 0.3);
+        border-right-color: rgba(28, 31, 31, 0.3);
+        background-color: rgba(57, 63, 63, 0.2); }
+      .notebook tab.reorderable-page.left:active, .notebook tab.reorderable-page.left.active-page {
+        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, .notebook tab.reorderable-page.left.active-page:hover {
+          background-color: rgba(57, 63, 63, 0.7); }
+        .notebook tab.reorderable-page.left:active:backdrop, .notebook tab.reorderable-page.left.active-page:backdrop {
+          border-color: #1e2222;
+          background-color: #393f3f;
+          border-right-color: #215d9c; }
+      .notebook tab.reorderable-page.left:backdrop {
+        border-color: transparent;
+        background-color: transparent; }
+    .notebook tab.reorderable-page.right {
+      border-color: transparent; }
+      .notebook tab.reorderable-page.right:hover, .notebook tab.reorderable-page.right.prelight-page {
+        border-color: rgba(28, 31, 31, 0.3);
+        border-left-color: rgba(28, 31, 31, 0.3);
+        background-color: rgba(57, 63, 63, 0.2); }
+      .notebook tab.reorderable-page.right:active, .notebook tab.reorderable-page.right.active-page {
+        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, .notebook tab.reorderable-page.right.active-page:hover {
+          background-color: rgba(57, 63, 63, 0.7); }
+        .notebook tab.reorderable-page.right:active:backdrop, .notebook tab.reorderable-page.right.active-page:backdrop {
+          border-color: #1e2222;
+          background-color: #393f3f;
+          border-left-color: #215d9c; }
+      .notebook tab.reorderable-page.right:backdrop {
         border-color: transparent;
         background-color: transparent; }
     .notebook tab GtkLabel {
@@ -1136,10 +1210,6 @@ GtkPopover {
       .notebook tab .button > GtkImage {
         padding: 2px; }
 
-.notebook > .frame,
-.notebook > .view {
-  border: none; }
-
 /**************
  * Scrollbars *
  **************/
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 45de207038..19ad7caca3 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -1050,6 +1050,26 @@ GtkPopover {
       padding: 8px 20px; }
     .notebook tab.left, .notebook tab.right {
       padding: 5px 20px; }
+    .notebook tab.reorderable-page.top {
+      padding-top: 7px;
+      border-top-width: 1px;
+      border-left-width: 1px;
+      border-right-width: 1px; }
+    .notebook tab.reorderable-page.bottom {
+      padding-bottom: 7px;
+      border-bottom-width: 1px;
+      border-left-width: 1px;
+      border-right-width: 1px; }
+    .notebook tab.reorderable-page.left {
+      padding-left: 19px;
+      border-left-width: 1px;
+      border-top-width: 1px;
+      border-bottom-width: 1px; }
+    .notebook tab.reorderable-page.right {
+      padding-right: 19px;
+      border-right-width: 1px;
+      border-top-width: 1px;
+      border-bottom-width: 1px; }
     .notebook tab.top {
       padding-bottom: 5px;
       border-bottom-width: 3px; }
@@ -1069,26 +1089,80 @@ GtkPopover {
     .notebook tab:backdrop {
       background-color: transparent;
       border-color: transparent; }
-    .notebook tab.reorderable-page {
-      border-color: transparent;
-      border-left: 1px solid transparent;
-      border-right: 1px solid transparent; }
-      .notebook tab.reorderable-page:hover, .notebook tab.reorderable-page.prelight-page {
+    .notebook tab.reorderable-page.top {
+      border-color: transparent; }
+      .notebook tab.reorderable-page.top:hover, .notebook tab.reorderable-page.top.prelight-page {
         border-color: rgba(161, 161, 161, 0.3);
         border-bottom-color: rgba(161, 161, 161, 0.3);
         background-color: rgba(237, 237, 237, 0.2); }
-      .notebook tab.reorderable-page:active, .notebook tab.reorderable-page.active-page {
+      .notebook tab.reorderable-page.top:active, .notebook tab.reorderable-page.top.active-page {
         background-color: rgba(237, 237, 237, 0.5);
         border-color: rgba(161, 161, 161, 0.5);
         border-bottom-color: #4a90d9; }
-        .notebook tab.reorderable-page:active:hover, .notebook tab.reorderable-page.active-page:hover {
+        .notebook tab.reorderable-page.top:active:hover, .notebook tab.reorderable-page.top.active-page:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        .notebook tab.reorderable-page:active:backdrop, .notebook tab.reorderable-page.active-page:backdrop {
-          border-left-color: #a8a8a8;
-          border-right-color: #a8a8a8;
+        .notebook tab.reorderable-page.top:active:backdrop, .notebook tab.reorderable-page.top.active-page:backdrop {
+          border-color: #a8a8a8;
           background-color: #ededed;
           border-bottom-color: #4a90d9; }
-      .notebook tab.reorderable-page:backdrop {
+      .notebook tab.reorderable-page.top:backdrop {
+        border-color: transparent;
+        background-color: transparent; }
+    .notebook tab.reorderable-page.bottom {
+      border-color: transparent; }
+      .notebook tab.reorderable-page.bottom:hover, .notebook tab.reorderable-page.bottom.prelight-page {
+        border-color: rgba(161, 161, 161, 0.3);
+        border-top-color: rgba(161, 161, 161, 0.3);
+        background-color: rgba(237, 237, 237, 0.2); }
+      .notebook tab.reorderable-page.bottom:active, .notebook tab.reorderable-page.bottom.active-page {
+        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, .notebook tab.reorderable-page.bottom.active-page:hover {
+          background-color: rgba(237, 237, 237, 0.7); }
+        .notebook tab.reorderable-page.bottom:active:backdrop, .notebook tab.reorderable-page.bottom.active-page:backdrop {
+          border-color: #a8a8a8;
+          background-color: #ededed;
+          border-top-color: #4a90d9; }
+      .notebook tab.reorderable-page.bottom:backdrop {
+        border-color: transparent;
+        background-color: transparent; }
+    .notebook tab.reorderable-page.left {
+      border-color: transparent; }
+      .notebook tab.reorderable-page.left:hover, .notebook tab.reorderable-page.left.prelight-page {
+        border-color: rgba(161, 161, 161, 0.3);
+        border-right-color: rgba(161, 161, 161, 0.3);
+        background-color: rgba(237, 237, 237, 0.2); }
+      .notebook tab.reorderable-page.left:active, .notebook tab.reorderable-page.left.active-page {
+        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, .notebook tab.reorderable-page.left.active-page:hover {
+          background-color: rgba(237, 237, 237, 0.7); }
+        .notebook tab.reorderable-page.left:active:backdrop, .notebook tab.reorderable-page.left.active-page:backdrop {
+          border-color: #a8a8a8;
+          background-color: #ededed;
+          border-right-color: #4a90d9; }
+      .notebook tab.reorderable-page.left:backdrop {
+        border-color: transparent;
+        background-color: transparent; }
+    .notebook tab.reorderable-page.right {
+      border-color: transparent; }
+      .notebook tab.reorderable-page.right:hover, .notebook tab.reorderable-page.right.prelight-page {
+        border-color: rgba(161, 161, 161, 0.3);
+        border-left-color: rgba(161, 161, 161, 0.3);
+        background-color: rgba(237, 237, 237, 0.2); }
+      .notebook tab.reorderable-page.right:active, .notebook tab.reorderable-page.right.active-page {
+        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, .notebook tab.reorderable-page.right.active-page:hover {
+          background-color: rgba(237, 237, 237, 0.7); }
+        .notebook tab.reorderable-page.right:active:backdrop, .notebook tab.reorderable-page.right.active-page:backdrop {
+          border-color: #a8a8a8;
+          background-color: #ededed;
+          border-left-color: #4a90d9; }
+      .notebook tab.reorderable-page.right:backdrop {
         border-color: transparent;
         background-color: transparent; }
     .notebook tab GtkLabel {
@@ -1136,10 +1210,6 @@ GtkPopover {
       .notebook tab .button > GtkImage {
         padding: 2px; }
 
-.notebook > .frame,
-.notebook > .view {
-  border: none; }
-
 /**************
  * Scrollbars *
  **************/