[gtk+] Adwaita: Update notebook styling

From: Matthias Clasen <matthiasc src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk+] Adwaita: Update notebook styling
Date: Mon, 9 Nov 2015 02:09:28 +0000 (UTC)
commit f564f16b5c1ac526d7452dc39f270a69b8fda10d
Author: Matthias Clasen <mclasen redhat com>
Date:   Sun Nov 8 18:11:25 2015 -0500

    Adwaita: Update notebook styling
    
    Adapt to the changes in the previous commit.

 gtk/theme/Adwaita/_common.scss           |  123 +++++++++++++++---------------
 gtk/theme/Adwaita/gtk-contained-dark.css |   95 ++++++++++++-----------
 gtk/theme/Adwaita/gtk-contained.css      |   95 ++++++++++++-----------
 3 files changed, 162 insertions(+), 151 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index ffb5d31..8802066 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1573,7 +1573,17 @@ notebook {
     border: 1px solid $borders_color;
     &:backdrop { border-color: $backdrop_borders_color; }
   }
+
   & 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%);
@@ -1588,79 +1598,86 @@ 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;
     }
-  }
-  //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;
+    &.top, &.bottom {
+      & tabs arrow.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
+      & tabs arrow.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
     }
-  }
-  & 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;
+    &.left, &.right {
+      & tabs arrow.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+      & tabs arrow.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
     }
-  }
-  & 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;
+    & tabs 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); }
+      &:backdrop:insensitive { color: $backdrop_insensitive_color; }
     }
   }
 
-  tab {
+  & tab {
     border-width: 0;
     border-style: solid;
     border-color: transparent;
@@ -1754,26 +1771,6 @@ notebook {
   }
 }
 
-notebook header tabs arrow.arrow {
-      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
-      color: red; //$insensitive_fg_color;
-      &:hover {
-        color: mix($fg_color, $insensitive_fg_color, 50%);
-      }
-      &:active {
-        color: green; //$fg_color;
-      }
-      &:insensitive {
-        color: blue; //transparentize($insensitive_fg_color,0.7);
-      }
-      &:backdrop {
-        color: brown; //transparentize($backdrop_fg_color,0.6);
-        &:insensitive {
-          color: $backdrop_insensitive_color;
-        }
-      }
-}
-
 /**************
  * Scrollbars *
  **************/
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 8d2a023..79a200b 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/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;
@@ -2148,49 +2147,69 @@ notebook {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #1c1f1f; }
       notebook header.top:backdrop {
         box-shadow: inset 0 -1px #1f2222; }
+      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 {
         box-shadow: inset 0 1px #1f2222; }
+      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 {
         box-shadow: inset 1px 0 #1f2222; }
+      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 {
         box-shadow: inset -1px 0 #1f2222; }
+      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.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 header.top tabs arrow.up, notebook header.bottom tabs arrow.up {
+      -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
+    notebook header.top tabs arrow.down, notebook header.bottom tabs arrow.down {
+      -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
+    notebook header.left tabs arrow.up, notebook header.right tabs arrow.up {
+      -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+    notebook header.left tabs arrow.down, notebook header.right tabs arrow.down {
+      -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
+    notebook header tabs arrow {
+      color: #949796; }
+      notebook header tabs arrow:hover {
+        color: #c1c3c1; }
+      notebook header tabs arrow:active {
+        color: #eeeeec; }
+      notebook header tabs arrow:insensitive {
+        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;
@@ -2334,18 +2353,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 *
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 97d02b2..d971b59 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/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;
@@ -2154,49 +2153,69 @@ notebook {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #a1a1a1; }
       notebook header.top:backdrop {
         box-shadow: inset 0 -1px darkgray; }
+      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 {
         box-shadow: inset 0 1px darkgray; }
+      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 {
         box-shadow: inset 1px 0 darkgray; }
+      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 {
         box-shadow: inset -1px 0 darkgray; }
+      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.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 header.top tabs arrow.up, notebook header.bottom tabs arrow.up {
+      -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
+    notebook header.top tabs arrow.down, notebook header.bottom tabs arrow.down {
+      -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
+    notebook header.left tabs arrow.up, notebook header.right tabs arrow.up {
+      -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+    notebook header.left tabs arrow.down, notebook header.right tabs arrow.down {
+      -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
+    notebook header tabs arrow {
+      color: #8e9192; }
+      notebook header tabs arrow:hover {
+        color: #5e6364; }
+      notebook header tabs arrow:active {
+        color: #2e3436; }
+      notebook header tabs arrow:insensitive {
+        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;
@@ -2340,18 +2359,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 *
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]