reoderable tab

 - rewrite, saner tabs
 - saner close button, needs love still

3 files changed, 77 insertions, 90 deletions

diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index b81c6c68..72cf9573 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -889,32 +889,33 @@ GtkPopover {
       background-color: transparent;
       border-color: transparent;
     }
-    // FIXME? we're considering just top reorderable tabs
     &.reorderable-page {
-      border-width: 0;
-      padding: ($vt_vpadding)-2px ($vt_hpadding)-1px;
+      border-color: transparent;
+      border-left: 1px solid transparent;
+      border-right: 1px solid transparent;
       &:hover {
-        border-width: 0 0 3px 0;
-        border-color: transparentize($borders_color,0.5);
-        background-color: transparentize($bg_color, .8);
-        color: mix($fg_color, $insensitive_fg_color, 50%);
+        border-color: transparentize($borders_color,0.7);
+        border-bottom-color: transparentize($borders_color,0.7);
+        background-color: transparentize($bg_color,0.8);
       }
-      &:active {
-        padding: $vt_vpadding ($vt_hpadding)-1px
-                 ($vt_vpadding)-3px ($vt_hpadding)-1px;
-                 //FIXME close button still jumps
-        border-width: 0 1px 3px 1px;
-        background-color: transparentize($bg_color, .5);
+      &:active, &.active-page {
+        background-color: transparentize($bg_color,0.5);
         border-color: transparentize($borders_color,0.5);
         border-bottom-color: $selected_bg_color;
         &:hover {
-          background-color: transparentize($bg_color, 0.3);
+          background-color: transparentize($bg_color,0.3);
         }
-        &:backdrop, &:active:backdrop {
-          border-color: lighten($backdrop_borders_color,10%);
-          background-color: mix($backdrop_borders_color,$backdrop_bg_color, 8%);
+        &:backdrop {
+          border-left-color: $backdrop_borders_color;
+          border-right-color: $backdrop_borders_color;
+          background-color: $backdrop_bg_color;
+          border-bottom-color: $selected_bg_color;
         }
       }
+      &:backdrop {
+        border-color: transparent;
+        background-color: transparent;
+      }
     }
     GtkLabel { //tab text
       // this doesn't affect labels on reorderable pages, not css fault.
@@ -936,14 +937,20 @@ GtkPopover {
       }
     }
     .button { //tab close button
-      border: 1px solid transparent; //avoid jumping around
-      box-shadow: none; //FIXME glitch in the transition
-      background-image: linear-gradient(to bottom, transparent);
-      color: transparentize($fg_color, .5);
-      &:hover { @include button(normal); }
-      &:active { @include button(active); }
+      border: 1px solid transparent;
+      @extend %undecorated_button;
+      icon-shadow: none;
+      transition: none;
+      color: inherit;
+      &:hover {
+        border-color: $borders_color;
+        text-shadow: none;
+      }
+      &:active {
+        box-shadow: inset 0 1px 1px transparentize(black,0.7);
+      }
       & > GtkImage { // this is a hack which makes tabs grow
-        padding: 3px;
+        padding: 2px;
       }
     }
   }
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 1121f5a7..ebe19c1d 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -436,7 +436,7 @@
     border-radius: 3px;
     border-style: solid; }
 
-GtkLinkButton.button, GtkLinkButton.button:hover, GtkLinkButton.button:active, GtkLinkButton.button:backdrop {
+GtkLinkButton.button, GtkLinkButton.button:hover, GtkLinkButton.button:active, GtkLinkButton.button:backdrop, .notebook tab .button {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
@@ -938,24 +938,27 @@ GtkPopover {
       background-color: transparent;
       border-color: transparent; }
     .notebook tab.reorderable-page {
-      border-width: 0;
-      padding: 6px 19px; }
+      border-color: transparent;
+      border-left: 1px solid transparent;
+      border-right: 1px solid transparent; }
       .notebook tab.reorderable-page:hover {
-        border-width: 0 0 3px 0;
-        border-color: rgba(28, 31, 31, 0.5);
-        background-color: rgba(57, 63, 63, 0.2);
-        color: #c0c2c0; }
-      .notebook tab.reorderable-page:active {
-        padding: 8px 19px 5px 19px;
-        border-width: 0 1px 3px 1px;
+        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 {
         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:hover, .notebook tab.reorderable-page.active-page:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        .notebook tab.reorderable-page:active:backdrop, .notebook tab.reorderable-page:active:active:backdrop {
-          border-color: #363d3d;
-          background-color: #363c3c; }
+        .notebook tab.reorderable-page:active:backdrop, .notebook tab.reorderable-page.active-page:backdrop {
+          border-left-color: #1e2222;
+          border-right-color: #1e2222;
+          background-color: #393f3f;
+          border-bottom-color: #215d9c; }
+      .notebook tab.reorderable-page:backdrop {
+        border-color: transparent;
+        background-color: transparent; }
     .notebook tab GtkLabel {
       padding: 0 2px;
       font-weight: bold;
@@ -970,29 +973,16 @@ GtkPopover {
         color: #878b8a; }
     .notebook tab .button {
       border: 1px solid transparent;
-      box-shadow: none;
-      background-image: linear-gradient(to bottom, transparent);
-      color: rgba(238, 238, 236, 0.5); }
+      icon-shadow: none;
+      transition: none;
+      color: inherit; }
       .notebook tab .button:hover {
-        border-width: 1px;
-        border-style: solid;
-        color: #eeeeec;
-        background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
         border-color: #1c1f1f;
-        text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
-        icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
+        text-shadow: none; }
       .notebook tab .button:active {
-        border-width: 1px;
-        border-style: solid;
-        color: #eeeeec;
-        border-color: #1c1f1f;
-        background-image: linear-gradient(to bottom, #212424, #2d3232 3%);
-        text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
-        icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
-        box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3); }
       .notebook tab .button > GtkImage {
-        padding: 3px; }
+        padding: 2px; }
 
 .notebook > .frame,
 .notebook > .view {
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 262d2344..cb93add6 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -436,7 +436,7 @@
     border-radius: 3px;
     border-style: solid; }
 
-GtkLinkButton.button, GtkLinkButton.button:hover, GtkLinkButton.button:active, GtkLinkButton.button:backdrop {
+GtkLinkButton.button, GtkLinkButton.button:hover, GtkLinkButton.button:active, GtkLinkButton.button:backdrop, .notebook tab .button {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
@@ -938,24 +938,27 @@ GtkPopover {
       background-color: transparent;
       border-color: transparent; }
     .notebook tab.reorderable-page {
-      border-width: 0;
-      padding: 6px 19px; }
+      border-color: transparent;
+      border-left: 1px solid transparent;
+      border-right: 1px solid transparent; }
       .notebook tab.reorderable-page:hover {
-        border-width: 0 0 3px 0;
-        border-color: rgba(161, 161, 161, 0.5);
-        background-color: rgba(237, 237, 237, 0.2);
-        color: #5d6263; }
-      .notebook tab.reorderable-page:active {
-        padding: 8px 19px 5px 19px;
-        border-width: 0 1px 3px 1px;
+        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 {
         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:hover, .notebook tab.reorderable-page.active-page:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        .notebook tab.reorderable-page:active:backdrop, .notebook tab.reorderable-page:active:active:backdrop {
-          border-color: #c2c2c2;
-          background-color: #e7e7e7; }
+        .notebook tab.reorderable-page:active:backdrop, .notebook tab.reorderable-page.active-page:backdrop {
+          border-left-color: #a8a8a8;
+          border-right-color: #a8a8a8;
+          background-color: #ededed;
+          border-bottom-color: #4a90d9; }
+      .notebook tab.reorderable-page:backdrop {
+        border-color: transparent;
+        background-color: transparent; }
     .notebook tab GtkLabel {
       padding: 0 2px;
       font-weight: bold;
@@ -970,29 +973,16 @@ GtkPopover {
         color: #8d9090; }
     .notebook tab .button {
       border: 1px solid transparent;
-      box-shadow: none;
-      background-image: linear-gradient(to bottom, transparent);
-      color: rgba(46, 52, 54, 0.5); }
+      icon-shadow: none;
+      transition: none;
+      color: inherit; }
       .notebook tab .button:hover {
-        border-width: 1px;
-        border-style: solid;
-        color: #2e3436;
-        background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
         border-color: #a1a1a1;
-        text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-        icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-        box-shadow: inset 0 1px white, 0 1px white; }
+        text-shadow: none; }
       .notebook tab .button:active {
-        border-width: 1px;
-        border-style: solid;
-        color: #2e3436;
-        border-color: #a1a1a1;
-        background-image: linear-gradient(to bottom, #c7c7c7, #d1d1d1 3%, lightgray);
-        text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-        icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-        box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px white; }
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3); }
       .notebook tab .button > GtkImage {
-        padding: 3px; }
+        padding: 2px; }
 
 .notebook > .frame,
 .notebook > .view {