[gtk+] HighContrast: update notebook styling

[Matthias Clasen <matthiasc src gnome org>]

commit e892b918dc0d88a2850a9f24cf42f599e48a1f2d
Author: Matthias Clasen <mclasen redhat com>
Date:   Sat Nov 7 11:31:24 2015 -0500

    HighContrast: update notebook styling
    
    Adapt to the changes in the previous commit.

 gtk/theme/HighContrast/_common.scss |  128 ++++++++++++-------------------
 gtk/theme/HighContrast/gtk.css      |  145 ++++++++++++++---------------------
 2 files changed, 106 insertions(+), 167 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index ca9a2b2..0cfbf23 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/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,85 +1281,58 @@ notebook {
       box-shadow: none;
     }
   }
-  tab {
-    border-width: 0;
-    border-style: solid;
-    border-color: transparent;
-    background-color: transparent;
-
-    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; }
-
+  //vertical tab sizing
+  $vt_vpadding: 8px;
+  $vt_hpadding: 20px;
+  // horizontal tab sizing
+  $ht_vpadding: 5px;
+  $ht_hpadding: 20px;
+  $tab_indicator_size: 3px;
 
-    /* works for testnotebookdnd, but there's a superfluous border
-       in gedit or web, commented out for now, needs gtk fixes
+  & header.top tab {
+    padding: $vt_vpadding $vt_hpadding;
+    border-bottom-width: $tab_indicator_size;
     &.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;
-      }
+      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 {
-      &.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;
+      padding-left: 12px;  // for a nicer close button
+      padding-right: 12px; // placement
+      border-left-width: 1px;
+      border-right-width: 1px;
     }
-    &.left {
-      //padding-right: ($ht_hpadding -$tab_indicator_size);
-      border-right-width: $tab_indicator_size;
+  }
+  & header.left tab {
+    padding: $ht_vpadding $ht_hpadding;
+    border-right-width: $tab_indicator_size;
+    &.reorderable-page {
+      border-bottom-width: 1px;
+      border-top-width: 1px;
     }
-    &.right {
-      //padding-left: ($ht_hpadding -$tab_indicator_size);
-      border-left-width: $tab_indicator_size;
+  }
+  & 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;
+    background-color: transparent;
+
+    outline-offset: 0;
 
     //here's the interesting stuff
     &:hover {
@@ -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);
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index 06caea1..6fc2228 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/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 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 {
+  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 tab.reorderable-page.left, notebook tab.reorderable-page.right {
+  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.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; }
+  notebook tab {
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+    background-color: transparent;
+    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 {