tweak notebook styling

7 files changed, 202 insertions, 189 deletions

diff --git a/common/gtk-3.0/3.20/gtk-dark.css b/common/gtk-3.0/3.20/gtk-dark.css
index 6d619cb..70f826b 100644
--- a/common/gtk-3.0/3.20/gtk-dark.css
+++ b/common/gtk-3.0/3.20/gtk-dark.css
@@ -1494,8 +1494,10 @@ notebook {
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   notebook.frame {
     border: 1px solid #2b2e39; }
+    notebook.frame header {
+      margin: -1px; }
   notebook header {
-    padding: 2px;
+    padding: 3px;
     background-color: #383C4A; }
     notebook header.top {
       box-shadow: inset 0 -1px #2b2e39; }
@@ -1573,29 +1575,29 @@ notebook {
         color: #D3DAE3; }
       notebook header tabs arrow:disabled {
         color: rgba(211, 218, 227, 0.15); }
-  notebook header tab {
-    background-color: rgba(64, 69, 82, 0); }
-    notebook header tab label {
-      color: rgba(211, 218, 227, 0.45); }
-    notebook header tab:hover {
-      background-color: rgba(64, 69, 82, 0.5);
-      border-color: #2b2e39; }
-      notebook header tab:hover label {
-        color: rgba(211, 218, 227, 0.725); }
-    notebook header tab:active {
-      background-color: #404552;
-      border-color: #2b2e39; }
-      notebook header tab:active label {
-        color: #D3DAE3; }
-    notebook header tab button {
-      min-height: 18px;
-      min-width: 16px;
-      padding: 0;
-      color: #9da3ad; }
-      notebook header tab button:hover {
-        color: #ff4d4d; }
-      notebook header tab button:active, notebook header tab button:active:hover {
-        color: #5294E2; }
+    notebook header tab {
+      background-color: rgba(64, 69, 82, 0); }
+      notebook header tab label {
+        color: rgba(211, 218, 227, 0.45); }
+      notebook header tab:hover {
+        background-color: rgba(64, 69, 82, 0.5);
+        border-color: #2b2e39; }
+        notebook header tab:hover label {
+          color: rgba(211, 218, 227, 0.725); }
+      notebook header tab:active {
+        background-color: #404552;
+        border-color: #2b2e39; }
+        notebook header tab:active label {
+          color: #D3DAE3; }
+      notebook header tab button {
+        min-height: 18px;
+        min-width: 16px;
+        padding: 0;
+        color: #9da3ad; }
+        notebook header tab button:hover {
+          color: #ff4d4d; }
+        notebook header tab button:active, notebook header tab button:active:hover {
+          color: #5294E2; }
 
 * {
   -GtkRange-slider-width: 13;
diff --git a/common/gtk-3.0/3.20/gtk-darker.css b/common/gtk-3.0/3.20/gtk-darker.css
index 2fed205..a3a9520 100644
--- a/common/gtk-3.0/3.20/gtk-darker.css
+++ b/common/gtk-3.0/3.20/gtk-darker.css
@@ -1493,8 +1493,10 @@ notebook {
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   notebook.frame {
     border: 1px solid #dcdfe3; }
+    notebook.frame header {
+      margin: -1px; }
   notebook header {
-    padding: 2px;
+    padding: 3px;
     background-color: #F5F6F7; }
     notebook header.top {
       box-shadow: inset 0 -1px #dcdfe3; }
@@ -1572,29 +1574,29 @@ notebook {
         color: #5c616c; }
       notebook header tabs arrow:disabled {
         color: rgba(92, 97, 108, 0.25); }
-  notebook header tab {
-    background-color: rgba(255, 255, 255, 0); }
-    notebook header tab label {
-      color: rgba(92, 97, 108, 0.55); }
-    notebook header tab:hover {
-      background-color: rgba(255, 255, 255, 0.5);
-      border-color: #dcdfe3; }
-      notebook header tab:hover label {
-        color: rgba(92, 97, 108, 0.775); }
-    notebook header tab:active {
-      background-color: #ffffff;
-      border-color: #dcdfe3; }
-      notebook header tab:active label {
-        color: #5c616c; }
-    notebook header tab button {
-      min-height: 18px;
-      min-width: 16px;
-      padding: 0;
-      color: #92959d; }
-      notebook header tab button:hover {
-        color: #ff4d4d; }
-      notebook header tab button:active, notebook header tab button:active:hover {
-        color: #5294E2; }
+    notebook header tab {
+      background-color: rgba(255, 255, 255, 0); }
+      notebook header tab label {
+        color: rgba(92, 97, 108, 0.55); }
+      notebook header tab:hover {
+        background-color: rgba(255, 255, 255, 0.5);
+        border-color: #dcdfe3; }
+        notebook header tab:hover label {
+          color: rgba(92, 97, 108, 0.775); }
+      notebook header tab:active {
+        background-color: #ffffff;
+        border-color: #dcdfe3; }
+        notebook header tab:active label {
+          color: #5c616c; }
+      notebook header tab button {
+        min-height: 18px;
+        min-width: 16px;
+        padding: 0;
+        color: #92959d; }
+        notebook header tab button:hover {
+          color: #ff4d4d; }
+        notebook header tab button:active, notebook header tab button:active:hover {
+          color: #5294E2; }
 
 * {
   -GtkRange-slider-width: 13;
diff --git a/common/gtk-3.0/3.20/gtk-solid-dark.css b/common/gtk-3.0/3.20/gtk-solid-dark.css
index 6633838..9feac77 100644
--- a/common/gtk-3.0/3.20/gtk-solid-dark.css
+++ b/common/gtk-3.0/3.20/gtk-solid-dark.css
@@ -1494,8 +1494,10 @@ notebook {
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   notebook.frame {
     border: 1px solid #2b2e39; }
+    notebook.frame header {
+      margin: -1px; }
   notebook header {
-    padding: 2px;
+    padding: 3px;
     background-color: #383C4A; }
     notebook header.top {
       box-shadow: inset 0 -1px #2b2e39; }
@@ -1573,29 +1575,29 @@ notebook {
         color: #D3DAE3; }
       notebook header tabs arrow:disabled {
         color: rgba(211, 218, 227, 0.15); }
-  notebook header tab {
-    background-color: rgba(64, 69, 82, 0); }
-    notebook header tab label {
-      color: rgba(211, 218, 227, 0.45); }
-    notebook header tab:hover {
-      background-color: rgba(64, 69, 82, 0.5);
-      border-color: #2b2e39; }
-      notebook header tab:hover label {
-        color: rgba(211, 218, 227, 0.725); }
-    notebook header tab:active {
-      background-color: #404552;
-      border-color: #2b2e39; }
-      notebook header tab:active label {
-        color: #D3DAE3; }
-    notebook header tab button {
-      min-height: 18px;
-      min-width: 16px;
-      padding: 0;
-      color: #9da3ad; }
-      notebook header tab button:hover {
-        color: #ff4d4d; }
-      notebook header tab button:active, notebook header tab button:active:hover {
-        color: #5294E2; }
+    notebook header tab {
+      background-color: rgba(64, 69, 82, 0); }
+      notebook header tab label {
+        color: rgba(211, 218, 227, 0.45); }
+      notebook header tab:hover {
+        background-color: rgba(64, 69, 82, 0.5);
+        border-color: #2b2e39; }
+        notebook header tab:hover label {
+          color: rgba(211, 218, 227, 0.725); }
+      notebook header tab:active {
+        background-color: #404552;
+        border-color: #2b2e39; }
+        notebook header tab:active label {
+          color: #D3DAE3; }
+      notebook header tab button {
+        min-height: 18px;
+        min-width: 16px;
+        padding: 0;
+        color: #9da3ad; }
+        notebook header tab button:hover {
+          color: #ff4d4d; }
+        notebook header tab button:active, notebook header tab button:active:hover {
+          color: #5294E2; }
 
 * {
   -GtkRange-slider-width: 13;
diff --git a/common/gtk-3.0/3.20/gtk-solid-darker.css b/common/gtk-3.0/3.20/gtk-solid-darker.css
index e7a7e2f..eba9392 100644
--- a/common/gtk-3.0/3.20/gtk-solid-darker.css
+++ b/common/gtk-3.0/3.20/gtk-solid-darker.css
@@ -1493,8 +1493,10 @@ notebook {
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   notebook.frame {
     border: 1px solid #dcdfe3; }
+    notebook.frame header {
+      margin: -1px; }
   notebook header {
-    padding: 2px;
+    padding: 3px;
     background-color: #F5F6F7; }
     notebook header.top {
       box-shadow: inset 0 -1px #dcdfe3; }
@@ -1572,29 +1574,29 @@ notebook {
         color: #5c616c; }
       notebook header tabs arrow:disabled {
         color: rgba(92, 97, 108, 0.25); }
-  notebook header tab {
-    background-color: rgba(255, 255, 255, 0); }
-    notebook header tab label {
-      color: rgba(92, 97, 108, 0.55); }
-    notebook header tab:hover {
-      background-color: rgba(255, 255, 255, 0.5);
-      border-color: #dcdfe3; }
-      notebook header tab:hover label {
-        color: rgba(92, 97, 108, 0.775); }
-    notebook header tab:active {
-      background-color: #ffffff;
-      border-color: #dcdfe3; }
-      notebook header tab:active label {
-        color: #5c616c; }
-    notebook header tab button {
-      min-height: 18px;
-      min-width: 16px;
-      padding: 0;
-      color: #92959d; }
-      notebook header tab button:hover {
-        color: #ff4d4d; }
-      notebook header tab button:active, notebook header tab button:active:hover {
-        color: #5294E2; }
+    notebook header tab {
+      background-color: rgba(255, 255, 255, 0); }
+      notebook header tab label {
+        color: rgba(92, 97, 108, 0.55); }
+      notebook header tab:hover {
+        background-color: rgba(255, 255, 255, 0.5);
+        border-color: #dcdfe3; }
+        notebook header tab:hover label {
+          color: rgba(92, 97, 108, 0.775); }
+      notebook header tab:active {
+        background-color: #ffffff;
+        border-color: #dcdfe3; }
+        notebook header tab:active label {
+          color: #5c616c; }
+      notebook header tab button {
+        min-height: 18px;
+        min-width: 16px;
+        padding: 0;
+        color: #92959d; }
+        notebook header tab button:hover {
+          color: #ff4d4d; }
+        notebook header tab button:active, notebook header tab button:active:hover {
+          color: #5294E2; }
 
 * {
   -GtkRange-slider-width: 13;
diff --git a/common/gtk-3.0/3.20/gtk-solid.css b/common/gtk-3.0/3.20/gtk-solid.css
index fa55ed0..1ee4059 100644
--- a/common/gtk-3.0/3.20/gtk-solid.css
+++ b/common/gtk-3.0/3.20/gtk-solid.css
@@ -1497,8 +1497,10 @@ notebook {
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   notebook.frame {
     border: 1px solid #dcdfe3; }
+    notebook.frame header {
+      margin: -1px; }
   notebook header {
-    padding: 2px;
+    padding: 3px;
     background-color: #F5F6F7; }
     notebook header.top {
       box-shadow: inset 0 -1px #dcdfe3; }
@@ -1576,29 +1578,29 @@ notebook {
         color: #5c616c; }
       notebook header tabs arrow:disabled {
         color: rgba(92, 97, 108, 0.25); }
-  notebook header tab {
-    background-color: rgba(255, 255, 255, 0); }
-    notebook header tab label {
-      color: rgba(92, 97, 108, 0.55); }
-    notebook header tab:hover {
-      background-color: rgba(255, 255, 255, 0.5);
-      border-color: #dcdfe3; }
-      notebook header tab:hover label {
-        color: rgba(92, 97, 108, 0.775); }
-    notebook header tab:active {
-      background-color: #ffffff;
-      border-color: #dcdfe3; }
-      notebook header tab:active label {
-        color: #5c616c; }
-    notebook header tab button {
-      min-height: 18px;
-      min-width: 16px;
-      padding: 0;
-      color: #92959d; }
-      notebook header tab button:hover {
-        color: #ff4d4d; }
-      notebook header tab button:active, notebook header tab button:active:hover {
-        color: #5294E2; }
+    notebook header tab {
+      background-color: rgba(255, 255, 255, 0); }
+      notebook header tab label {
+        color: rgba(92, 97, 108, 0.55); }
+      notebook header tab:hover {
+        background-color: rgba(255, 255, 255, 0.5);
+        border-color: #dcdfe3; }
+        notebook header tab:hover label {
+          color: rgba(92, 97, 108, 0.775); }
+      notebook header tab:active {
+        background-color: #ffffff;
+        border-color: #dcdfe3; }
+        notebook header tab:active label {
+          color: #5c616c; }
+      notebook header tab button {
+        min-height: 18px;
+        min-width: 16px;
+        padding: 0;
+        color: #92959d; }
+        notebook header tab button:hover {
+          color: #ff4d4d; }
+        notebook header tab button:active, notebook header tab button:active:hover {
+          color: #5294E2; }
 
 * {
   -GtkRange-slider-width: 13;
diff --git a/common/gtk-3.0/3.20/gtk.css b/common/gtk-3.0/3.20/gtk.css
index fbb5803..1f8b1eb 100644
--- a/common/gtk-3.0/3.20/gtk.css
+++ b/common/gtk-3.0/3.20/gtk.css
@@ -1497,8 +1497,10 @@ notebook {
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   notebook.frame {
     border: 1px solid #dcdfe3; }
+    notebook.frame header {
+      margin: -1px; }
   notebook header {
-    padding: 2px;
+    padding: 3px;
     background-color: #F5F6F7; }
     notebook header.top {
       box-shadow: inset 0 -1px #dcdfe3; }
@@ -1576,29 +1578,29 @@ notebook {
         color: #5c616c; }
       notebook header tabs arrow:disabled {
         color: rgba(92, 97, 108, 0.25); }
-  notebook header tab {
-    background-color: rgba(255, 255, 255, 0); }
-    notebook header tab label {
-      color: rgba(92, 97, 108, 0.55); }
-    notebook header tab:hover {
-      background-color: rgba(255, 255, 255, 0.5);
-      border-color: #dcdfe3; }
-      notebook header tab:hover label {
-        color: rgba(92, 97, 108, 0.775); }
-    notebook header tab:active {
-      background-color: #ffffff;
-      border-color: #dcdfe3; }
-      notebook header tab:active label {
-        color: #5c616c; }
-    notebook header tab button {
-      min-height: 18px;
-      min-width: 16px;
-      padding: 0;
-      color: #92959d; }
-      notebook header tab button:hover {
-        color: #ff4d4d; }
-      notebook header tab button:active, notebook header tab button:active:hover {
-        color: #5294E2; }
+    notebook header tab {
+      background-color: rgba(255, 255, 255, 0); }
+      notebook header tab label {
+        color: rgba(92, 97, 108, 0.55); }
+      notebook header tab:hover {
+        background-color: rgba(255, 255, 255, 0.5);
+        border-color: #dcdfe3; }
+        notebook header tab:hover label {
+          color: rgba(92, 97, 108, 0.775); }
+      notebook header tab:active {
+        background-color: #ffffff;
+        border-color: #dcdfe3; }
+        notebook header tab:active label {
+          color: #5c616c; }
+      notebook header tab button {
+        min-height: 18px;
+        min-width: 16px;
+        padding: 0;
+        color: #92959d; }
+        notebook header tab button:hover {
+          color: #ff4d4d; }
+        notebook header tab button:active, notebook header tab button:active:hover {
+          color: #5294E2; }
 
 * {
   -GtkRange-slider-width: 13;
diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss
index 4545492..9085f90 100644
--- a/common/gtk-3.0/3.20/sass/_common.scss
+++ b/common/gtk-3.0/3.20/sass/_common.scss
@@ -1577,24 +1577,25 @@ notebook {
   background-color: $base_color;
   transition: all 200ms $ease-out-quad;
 
-  &.frame { border: 1px solid $borders_color; }
+  &.frame {
+    border: 1px solid $borders_color;
+
+    header { margin: -1px; }  // ugly hack to hide the borders around the header
+  }
 
   header {
     $vpadding: 4px;
     $hpadding: 15px;
-    padding: 2px;
+    padding: 3px;
     background-color: $bg_color;
 
-    $_header_border: $borders_color;
-
-    // FIXME use borders and margins
-    &.top {    box-shadow: inset  0  -1px $_header_border; }
-    &.bottom { box-shadow: inset  0   1px $_header_border; }
-    &.right {  box-shadow: inset  1px 0   $_header_border; }
-    &.left {   box-shadow: inset -1px 0   $_header_border; }
+    &.top {    box-shadow: inset  0  -1px $borders_color; }
+    &.bottom { box-shadow: inset  0   1px $borders_color; }
+    &.right {  box-shadow: inset  1px 0   $borders_color; }
+    &.left {   box-shadow: inset -1px 0   $borders_color; }
 
   @each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) {
-
+      // sizing and borders
       &.#{$_pos} {
         padding-#{$_bpos}: 0;
 
@@ -1603,16 +1604,16 @@ notebook {
           border: 1px solid transparent;
           border-#{$_bpos}: none;
 
+          // nicer close button placement
           &.reorderable-page {
-            padding-left: 12px;  // for a nicer close button
-            padding-right: 12px; // placement
+            padding-left: 12px;
+            padding-right: 12px;
           }
-
-          // Tab overlap
+          // tab overlap
           @if $_pos==top or $_pos==bottom { margin-right: -1px; }
           @else { margin-bottom: -1px; }
 
-          // Tab border radius
+          // tab border radius
           @if $_pos==top { border-radius: 1px 1px 0 0; }
           @else if $_pos==bottom { border-radius: 0 0 1px 1px; }
           @else if $_pos==left { border-radius: 1px 0 0 1px; }
@@ -1620,7 +1621,7 @@ notebook {
         }
       }
     }
-
+    // overflow arrows
     &.top, &.bottom {
       tabs arrow.up {
         -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
@@ -1648,41 +1649,41 @@ notebook {
       &:active { color: $fg_color; }
       &:disabled { color: transparentize($insensitive_fg_color,0.3); }
     }
-  }
-
-  header tab {
-    background-color: transparentize($base_color, 1);
-
-    label { color: $insensitive_fg_color; }
-
-    &:hover {
-      background-color: transparentize($base_color, 0.5);
-      border-color: $borders_color;
-
-      label { color: mix($fg_color, $insensitive_fg_color, 50%); }
-    }
-    &:active {
-      background-color: $base_color;
-      border-color: $borders_color;
+    // tab colors
+    tab {
+      background-color: transparentize($base_color, 1);
 
-      label { color: $fg_color; }
-    }
+      label { color: $insensitive_fg_color; }
 
-    button {              // close button
-      min-height: 18px;
-      min-width: 16px;
-      padding: 0;
-      color: mix($bg_color, $fg_color, 35%);
+      &:hover {
+        background-color: transparentize($base_color, 0.5);
+        border-color: $borders_color;
 
-      @extend %undecorated_button;
+        label { color: mix($fg_color, $insensitive_fg_color, 50%); }
+      }
+      &:active {
+        background-color: $base_color;
+        border-color: $borders_color;
 
-      &:hover {
-        @extend %undecorated_button;
-        color: lighten(red, 15%);
+        label { color: $fg_color; }
       }
-      &:active, &:active:hover {
+      // close button
+      button {
+        min-height: 18px;
+        min-width: 16px;
+        padding: 0;
+        color: mix($bg_color, $fg_color, 35%);
+
         @extend %undecorated_button;
-        color: $selected_bg_color;
+
+        &:hover {
+          @extend %undecorated_button;
+          color: lighten(red, 15%);
+        }
+        &:active, &:active:hover {
+          @extend %undecorated_button;
+          color: $selected_bg_color;
+        }
       }
     }
   }