GNOME.org
 

[gnome-themes-standard/wip/sass] notebook work - redid the tab logic to use borders istead of box-shadow as tab active indicato

commit 79b6be03e1d8e773c1b4ce3b8c76e1eeabd78565
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu May 29 19:11:28 2014 +0200

    notebook work
      - redid the tab logic to use borders istead of box-shadow as
        tab active indicator
      - based insensitive and backdrop colors on mix in the process
      - properly(?) square tab close button
      - unrelated, tried to make window close button transition less glitchy

 themes/Adwaita/gtk-3.0/_colors.scss           |    4 +-
 themes/Adwaita/gtk-3.0/_common.scss           |  112 +++++++++++++++------
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |  130 ++++++++++++++-----------
 themes/Adwaita/gtk-3.0/gtk-contained.css      |  110 ++++++++++++---------
 4 files changed, 220 insertions(+), 136 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_colors.scss b/themes/Adwaita/gtk-3.0/_colors.scss
index a12e4f7..a84935b 100644
--- a/themes/Adwaita/gtk-3.0/_colors.scss
+++ b/themes/Adwaita/gtk-3.0/_colors.scss
@@ -18,13 +18,13 @@ $success_color: $selected_bg_color;
 $destructive_color: if($variant =='light', #ef2929, darken(#ef2929,10%));
 
 //insensitive state derived colors
-$insensitive_fg_color: if($variant =='light', lighten($fg_color, 30%), lighten($fg_color, 10%));
+$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
 $insensitive_bg_color: $bg_color;
 $insensitive_borders_color: $borders_color;
 
 //colors for the backdrop state, derived from the main colors.
 $backdrop_base_color: if($variant =='light', darken($base_color,1%), darken($base_color,5%));
 $backdrop_bg_color: $bg_color;
-$backdrop_fg_color: if($variant =='light', lighten($fg_color,10%), $fg_color);
+$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
 $backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), 
lighten($insensitive_fg_color,5%));
 $backdrop_borders_color: $borders_color;
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index b99ff7c..b5ac79c 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -623,7 +623,6 @@ GtkPopover {
 .notebook {
   padding: 0;
   border-style: solid;
-  border-color: $borders_color;
   background-color: $base_color;
   -GtkNotebook-initial-gap: 10;
   -GtkNotebook-arrow-spacing: 5;
@@ -633,58 +632,105 @@ GtkPopover {
   -GtkWidget-focus-padding: 0;
   -GtkWidget-focus-line-width: 0;
   transition: all 200ms ease-out;
-  &.frame { border-width: 1px; }
+  &:backdrop {
+    background-color: $backdrop_base_color;
+  }
+  &.frame {
+    border-width: 1px;
+    border-color: $borders_color;
+    &:backdrop { border-color: $backdrop_borders_color; }
+  }
   &.header {
-    background-color: darken($bg_color,5%);
-    box-shadow: inset 0 6px 4px -5px mix($borders_color, $bg_color, 50%);
-// I want just a top shadow
-// so negative spread
-    border-width: 0px;
+    background-color: mix($bg_color, $borders_color, 60%);
+    box-shadow: inset 0 2px 3px -1px transparentize(black, 0.85);
     &.frame {
       border: 1px solid $borders_color;
       &.top { border-bottom: none; };
       &.bottom { border-top: none; };
       &.right { border-left: none; };
       &.left { border-right: none; };
+      &:backdrop {
+        border-color: $backdrop_borders_color;
+        // same color as backdrop pushed button, we use mix in both cases
+        // hence, FIXME
+        background-color: transparentize($backdrop_borders_color,.7);
+        box-shadow: none;
+      }
     }
   }
   tab {
     border-width: 0;
+    border-color: transparent;
     background-color: transparent;
+
     $tab_indicator_size: 2px;
-    $active_tab_indicator: $selected_bg_color;
-    $prelight_tab_indicator: $borders_color;
-    &.top, &.bottom { padding: 8px 20px; }; //horizontal tab sizing
-    &.left, &.right { padding: 5px 20px; }; //vertical tab sizing
-    &.top:hover { box-shadow: inset 0 (-$tab_indicator_size) $prelight_tab_indicator; };
-    &.top:active { box-shadow: inset 0 (-$tab_indicator_size) $active_tab_indicator; };
-    &.bottom:hover { box-shadow: inset 0 $tab_indicator_size $prelight_tab_indicator; };
-    &.bottom:active { box-shadow: inset 0 $tab_indicator_size $active_tab_indicator; };
-    &.right:hover { box-shadow: inset $tab_indicator_size 0 $prelight_tab_indicator; };
-    &.right:active { box-shadow: inset $tab_indicator_size 0 $active_tab_indicator; };
-    &.left:hover { box-shadow: inset (-$tab_indicator_size) 0 $prelight_tab_indicator; };
-    &.left:active { box-shadow: inset (-$tab_indicator_size) 0 $active_tab_indicator; };
-    //FIXME: with backdrop in the mix this will explode we need smarter code
+    //vertical tab sizing
+    $vt_vpadding: 8px;
+    $vt_hpadding: 20px;
+    // horizontal tab sizing
+    $ht_vpadding: 5px;
+    $ht_hpadding: 20px;
+
+    &.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
+    &.left, &.right { padding: $ht_vpadding $ht_hpadding; }
+    &.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;
+    }
+    &.left {
+      padding-right: ($ht_hpadding -$tab_indicator_size);
+      border-right-width: $tab_indicator_size;
+    }
+    &.right {
+      padding-left: ($ht_hpadding -$tab_indicator_size);
+      border-left-width: $tab_indicator_size;
+    }
+
+    //here's the interesting stuff
+    &:hover {
+      border-color: $borders_color;
+    }
+    &:active, &:backdrop:active {
+      border-color: $selected_bg_color;
+    }
+    &:backdrop {
+      background-color: transparent;
+      border-color: transparent;
+    }
     &.reorderable-page:active {
       border-width: 0 1px 0 1px;
       background-color: transparentize($bg_color, .5); ;// darken($bg_color,3%);
-      border-color: mix($borders_color,$bg_color, 50%);
+      border-color: transparentize($borders_color,0.5);
     }
     GtkLabel { //tab text
       font-weight: bold;
-      color: lighten($fg_color,30%); //FIXME
-      &.active-page { color: $fg_color; } //active tab text
-      &.prelight-page { color: lighten($fg_color,15%); } //prelight tab text
+      color: $insensitive_fg_color;
+      // prelight tab text
+      &.prelight-page { color: mix($fg_color, $insensitive_fg_color, 50%); }
+      //active tab text
+      &.active-page {
+        color: $fg_color;
+        &:backdrop { color: $backdrop_fg_color; }
+      }
+      &:backdrop {
+        color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
+      }
     }
-    
+
     .button { //tab close button
-      padding: 0 6px; //FIXME not really doing anything
       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); }
+      & > GtkImage { // this is a hack
+        padding: 4px;
+      }
     }
   }
 }
@@ -808,7 +854,7 @@ $asset_suffix: if($variant=='dark', '-dark', '');
 /************
  * GtkScale *
  ************/
-.scale { // FIXME: vertical
+.scale {
   -GtkScale-slider-length: 20;
   -GtkRange-slider-width: 20;
   -GtkRange-trough-border: 2;
@@ -823,7 +869,7 @@ $asset_suffix: if($variant=='dark', '-dark', '');
                                transparentize(white,0.85)),
                 inset 0 #{-2px} $bg_color,
                 inset 0 #{-1px} mix($bg_color,$borders_color,50%);
-    &:insensitive { 
+    &:insensitive {
       background-image: linear-gradient(to bottom, $insensitive_bg_color);
       box-shadow: none;
     }
@@ -850,7 +896,7 @@ $asset_suffix: if($variant=='dark', '-dark', '');
                 $widget_edge;
     &.highlight {
       border-color: darken($selected_bg_color,30%);
-      background-color: $selected_bg_color; 
+      background-color: $selected_bg_color;
       box-shadow: $widget_edge;
       &:backdrop {
          border-color: $selected_bg_color;
@@ -858,14 +904,14 @@ $asset_suffix: if($variant=='dark', '-dark', '');
          box-shadow: none;
       }
     }
-    &:insensitive, &.hilight:insensitive { 
+    &:insensitive, &.hilight:insensitive {
       border-color: $insensitive_borders_color;
       background-color: $insensitive_bg_color;
       box-shadow: $widget_edge;
     }
     &:backdrop {
       border-color: $backdrop_borders_color;
-      background-color: mix($backdrop_bg_color,$borders_color); 
+      background-color: mix($backdrop_bg_color,$borders_color);
       box-shadow: none;
     }
     &:backdrop:insensitive, .hilight:backdrop:insensitive {
@@ -914,7 +960,7 @@ GtkScrolledWindow {
   .button { padding: 6px; }
 }
 
- 
+
 /**********************
  * Window Decorations *
  *********************/
@@ -947,6 +993,7 @@ GtkScrolledWindow {
   padding: 8px;
   border-color: transparent;
   background-image: none;
+  transition-property: border, box-shadow, color;
   box-shadow: inset 0 1px transparentize(white,1),
               0 1px transparentize($borders_edge,1);
   &:hover { @include button(normal); }
@@ -954,5 +1001,6 @@ GtkScrolledWindow {
   &:backdrop {
     @include button(backdrop);
     border-color: transparent;
+    transition-property: border, box-shadow, color;
   }
 }
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 6d67d50..9de362b 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -71,7 +71,7 @@
     color: #eeeeec; }
   .gtkstyle-fallback:insensitive {
     background-color: #393f3f;
-    color: white; }
+    color: #939695; }
   .gtkstyle-fallback:selected {
     background-color: #215d9c;
     color: white; }
@@ -122,7 +122,7 @@
     border-style: solid;
     border-width: 1px;
     background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
-    color: white;
+    color: #939695;
     border-color: #1c1f1f;
     background-image: linear-gradient(to bottom, #393f3f);
     box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
@@ -131,7 +131,7 @@
     border-style: solid;
     border-width: 1px;
     background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
-    color: #eeeeec;
+    color: #c9cbc9;
     background-image: linear-gradient(to bottom, #262626);
     box-shadow: 0 1px rgba(255, 255, 255, 0); }
   .entry:backdrop:insensitive {
@@ -139,7 +139,7 @@
     border-style: solid;
     border-width: 1px;
     background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
-    color: white;
+    color: #a0a3a2;
     background-image: linear-gradient(to bottom, #393f3f);
     box-shadow: 0 1px rgba(255, 255, 255, 0); }
   .entry:selected, .entrybackdrop:selected {
@@ -197,7 +197,7 @@
   .button:backdrop {
     border-width: 1px;
     border-style: solid;
-    color: #eeeeec;
+    color: #c9cbc9;
     border-color: #1c1f1f;
     background-image: linear-gradient(to bottom, #393f3f);
     text-shadow: none;
@@ -206,27 +206,27 @@
     .button:backdrop:active {
       border-width: 1px;
       border-style: solid;
-      color: #eeeeec;
+      color: #c9cbc9;
       border-color: #1c1f1f;
       background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.3));
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .button:backdrop:insensitive {
       border-width: 1px;
       border-style: solid;
-      color: white;
+      color: #a0a3a2;
       border-color: #1c1f1f;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .button:backdrop:insensitive:active {
       border-width: 1px;
       border-style: solid;
-      color: white;
+      color: #a0a3a2;
       border-color: #1c1f1f;
       background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.1));
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
   .button:insensitive {
     border-width: 1px;
     border-style: solid;
-    color: white;
+    color: #939695;
     border-color: #1c1f1f;
     background-image: linear-gradient(to bottom, #393f3f);
     text-shadow: none;
@@ -235,7 +235,7 @@
     .button:insensitive:active {
       border-width: 1px;
       border-style: solid;
-      color: white;
+      color: #939695;
       border-color: #1c1f1f;
       background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.2));
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
@@ -278,13 +278,13 @@
       .button.suggested-action:backdrop:insensitive {
         border-width: 1px;
         border-style: solid;
-        color: white;
+        color: #a0a3a2;
         border-color: #1c1f1f;
         box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .button.suggested-action:insensitive {
       border-width: 1px;
       border-style: solid;
-      color: white;
+      color: #939695;
       border-color: #1c1f1f;
       background-image: linear-gradient(to bottom, #393f3f);
       text-shadow: none;
@@ -329,13 +329,13 @@
       .button.destructive-action:backdrop:insensitive {
         border-width: 1px;
         border-style: solid;
-        color: white;
+        color: #a0a3a2;
         border-color: #1c1f1f;
         box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .button.destructive-action:insensitive {
       border-width: 1px;
       border-style: solid;
-      color: white;
+      color: #939695;
       border-color: #1c1f1f;
       background-image: linear-gradient(to bottom, #393f3f);
       text-shadow: none;
@@ -371,7 +371,7 @@
   .menuitem.button:backdrop, .menuitem.button:backdrop:active:insensitive, .menuitem.button:hover:backdrop, 
.menuitem.button:insensitive:backdrop, .menuitem.button:active:insensitive:backdrop, 
.menuitem.button:active:backdrop, .menuitem.button:active:hover:backdrop, 
.menuitem.button:active:selected:backdrop {
     text-shadow: none;
     icon-shadow: none;
-    color: white;
+    color: #939695;
     background-color: #393f3f;
     background-image: none;
     border: none;
@@ -390,14 +390,14 @@ GtkColorButton.button {
   border-radius: 0;
   box-shadow: none; }
   .spinbutton .button:insensitive {
-    color: rgba(255, 255, 255, 0.3); }
+    color: rgba(147, 150, 149, 0.3); }
   .spinbutton .button:active {
     box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); }
   .spinbutton .button:backdrop {
     border-color: rgba(28, 31, 31, 0.3); }
   .spinbutton .button:backdrop:insensitive {
     border-width: 0 0 0 1px;
-    color: rgba(255, 255, 255, 0.3); }
+    color: rgba(160, 163, 162, 0.3); }
 .spinbutton.vertical .button:first-child {
   border-width: 1px;
   border-style: solid;
@@ -428,7 +428,7 @@ GtkColorButton.button {
   .spinbutton.vertical .button:first-child:insensitive {
     border-width: 1px;
     border-style: solid;
-    color: white;
+    color: #939695;
     border-color: #1c1f1f;
     background-image: linear-gradient(to bottom, #393f3f);
     text-shadow: none;
@@ -464,7 +464,7 @@ GtkColorButton.button {
   .spinbutton.vertical .button:last-child:insensitive {
     border-width: 1px;
     border-style: solid;
-    color: white;
+    color: #939695;
     border-color: #1c1f1f;
     background-image: linear-gradient(to bottom, #393f3f);
     text-shadow: none;
@@ -473,7 +473,7 @@ GtkColorButton.button {
 .spinbutton.vertical .button:backdrop {
   border-width: 1px;
   border-style: solid;
-  color: #eeeeec;
+  color: #c9cbc9;
   border-color: #1c1f1f;
   background-image: linear-gradient(to bottom, #393f3f);
   text-shadow: none;
@@ -482,7 +482,7 @@ GtkColorButton.button {
 .spinbutton.vertical .button:backdrop:insensitive {
   border-width: 1px;
   border-style: solid;
-  color: white;
+  color: #a0a3a2;
   border-color: #1c1f1f;
   box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 .spinbutton.vertical.entry {
@@ -505,15 +505,15 @@ GtkComboBox {
   text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
   icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); }
   GtkComboBox:insensitive {
-    color: white;
+    color: #939695;
     text-shadow: none;
     icon-shadow: none; }
   GtkComboBox:backdrop {
-    color: #eeeeec;
+    color: #c9cbc9;
     text-shadow: none;
     icon-shadow: none; }
   GtkComboBox:backdrop:insensitive {
-    color: white; }
+    color: #a0a3a2; }
   GtkComboBox .separator {
     -GtkWidget-wide-separators: true;
     -GtkWidget-horizontal-separator: 0;
@@ -669,7 +669,6 @@ GtkPopover {
 .notebook {
   padding: 0;
   border-style: solid;
-  border-color: #1c1f1f;
   background-color: #333333;
   -GtkNotebook-initial-gap: 10;
   -GtkNotebook-arrow-spacing: 5;
@@ -679,12 +678,16 @@ GtkPopover {
   -GtkWidget-focus-padding: 0;
   -GtkWidget-focus-line-width: 0;
   transition: all 200ms ease-out; }
+  .notebook:backdrop {
+    background-color: #262626; }
   .notebook.frame {
-    border-width: 1px; }
+    border-width: 1px;
+    border-color: #1c1f1f; }
+    .notebook.frame:backdrop {
+      border-color: #1c1f1f; }
   .notebook.header {
     background-color: #2d3232;
-    box-shadow: inset 0 6px 4px -5px #2a2f2f;
-    border-width: 0px; }
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15); }
     .notebook.header.frame {
       border: 1px solid #1c1f1f; }
       .notebook.header.frame.top {
@@ -695,42 +698,53 @@ GtkPopover {
         border-left: none; }
       .notebook.header.frame.left {
         border-right: none; }
+      .notebook.header.frame:backdrop {
+        border-color: #1c1f1f;
+        background-color: rgba(28, 31, 31, 0.3);
+        box-shadow: none; }
   .notebook tab {
     border-width: 0;
+    border-color: transparent;
     background-color: transparent; }
     .notebook tab.top, .notebook tab.bottom {
       padding: 8px 20px; }
     .notebook tab.left, .notebook tab.right {
       padding: 5px 20px; }
-    .notebook tab.top:hover {
-      box-shadow: inset 0 -2px #1c1f1f; }
-    .notebook tab.top:active {
-      box-shadow: inset 0 -2px #215d9c; }
-    .notebook tab.bottom:hover {
-      box-shadow: inset 0 2px #1c1f1f; }
-    .notebook tab.bottom:active {
-      box-shadow: inset 0 2px #215d9c; }
-    .notebook tab.right:hover {
-      box-shadow: inset 2px 0 #1c1f1f; }
-    .notebook tab.right:active {
-      box-shadow: inset 2px 0 #215d9c; }
-    .notebook tab.left:hover {
-      box-shadow: inset -2px 0 #1c1f1f; }
-    .notebook tab.left:active {
-      box-shadow: inset -2px 0 #215d9c; }
+    .notebook tab.top {
+      padding-bottom: 6px;
+      border-bottom-width: 2px; }
+    .notebook tab.bottom {
+      padding-top: 6px;
+      border-top-width: 2px; }
+    .notebook tab.left {
+      padding-right: 18px;
+      border-right-width: 2px; }
+    .notebook tab.right {
+      padding-left: 18px;
+      border-left-width: 2px; }
+    .notebook tab:hover {
+      border-color: #1c1f1f; }
+    .notebook tab:active, .notebook tab:backdrop:active {
+      border-color: #215d9c; }
+    .notebook tab:backdrop {
+      background-color: transparent;
+      border-color: transparent; }
     .notebook tab.reorderable-page:active {
       border-width: 0 1px 0 1px;
       background-color: rgba(57, 63, 63, 0.5);
-      border-color: #2a2f2f; }
+      border-color: rgba(28, 31, 31, 0.5); }
     .notebook tab GtkLabel {
       font-weight: bold;
-      color: white; }
+      color: #939695; }
+      .notebook tab GtkLabel.prelight-page {
+        color: #c0c2c0; }
       .notebook tab GtkLabel.active-page {
         color: #eeeeec; }
-      .notebook tab GtkLabel.prelight-page {
-        color: white; }
+        .notebook tab GtkLabel.active-page:backdrop {
+          color: #c9cbc9; }
+      .notebook tab GtkLabel:backdrop {
+        color: #b4b7b5; }
     .notebook tab .button {
-      padding: 0 6px;
       border: 1px solid transparent;
       box-shadow: none;
       background-image: linear-gradient(to bottom, transparent);
@@ -753,6 +767,8 @@ GtkPopover {
         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); }
+      .notebook tab .button > GtkImage {
+        padding: 4px; }
 
 /**************
  * Scrollbars *
@@ -835,7 +851,7 @@ GtkSwitch {
     GtkSwitch.slider:insensitive {
       border-width: 1px;
       border-style: solid;
-      color: white;
+      color: #939695;
       border-color: #1c1f1f;
       background-image: linear-gradient(to bottom, #393f3f);
       text-shadow: none;
@@ -844,7 +860,7 @@ GtkSwitch {
     GtkSwitch.slider:backdrop {
       border-width: 1px;
       border-style: solid;
-      color: #eeeeec;
+      color: #c9cbc9;
       border-color: #1c1f1f;
       background-image: linear-gradient(to bottom, #393f3f);
       text-shadow: none;
@@ -853,7 +869,7 @@ GtkSwitch {
     GtkSwitch.slider:backdrop:insensitive {
       border-width: 1px;
       border-style: solid;
-      color: white;
+      color: #a0a3a2;
       border-color: #1c1f1f;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
@@ -1255,7 +1271,7 @@ GtkPopover GtkModelButton.button.radio:backdrop:active:insensitive {
     .scale.slider:backdrop:insensitive {
       border-width: 1px;
       border-style: solid;
-      color: white;
+      color: #a0a3a2;
       border-color: #1c1f1f;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .scale.slider:active {
@@ -1287,7 +1303,7 @@ GtkPopover GtkModelButton.button.radio:backdrop:active:insensitive {
       background-color: #2a2f2f;
       box-shadow: none; }
     .scale.trough:backdrop:insensitive, .scale.trough .hilight:backdrop:insensitive {
-      border-color: white;
+      border-color: #a0a3a2;
       background-color: #393f3f; }
 
 /**********
@@ -1339,6 +1355,7 @@ GtkScrolledWindow GtkViewport.frame {
   padding: 8px;
   border-color: transparent;
   background-image: none;
+  transition-property: border, box-shadow, color;
   box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); }
   .button.titlebutton:hover {
     border-width: 1px;
@@ -1361,10 +1378,11 @@ GtkScrolledWindow GtkViewport.frame {
   .button.titlebutton:backdrop {
     border-width: 1px;
     border-style: solid;
-    color: #eeeeec;
+    color: #c9cbc9;
     border-color: #1c1f1f;
     background-image: linear-gradient(to bottom, #393f3f);
     text-shadow: none;
     icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
-    border-color: transparent; }
+    border-color: transparent;
+    transition-property: border, box-shadow, color; }
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 0d99e8f..c0eb071 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -71,7 +71,7 @@
     color: #2e3436; }
   .gtkstyle-fallback:insensitive {
     background-color: #ededed;
-    color: #748489; }
+    color: #8d9091; }
   .gtkstyle-fallback:selected {
     background-color: #4a90d9;
     color: white; }
@@ -122,7 +122,7 @@
     border-style: solid;
     border-width: 1px;
     background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
-    color: #748489;
+    color: #8d9091;
     border-color: #a1a1a1;
     background-image: linear-gradient(to bottom, #ededed);
     box-shadow: 0 1px white; }
@@ -131,7 +131,7 @@
     border-style: solid;
     border-width: 1px;
     background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
-    color: #454f52;
+    color: #54595a;
     background-image: linear-gradient(to bottom, #fcfcfc);
     box-shadow: 0 1px rgba(255, 255, 255, 0); }
   .entry:backdrop:insensitive {
@@ -197,7 +197,7 @@
   .button:backdrop {
     border-width: 1px;
     border-style: solid;
-    color: #454f52;
+    color: #54595a;
     border-color: #a1a1a1;
     background-image: linear-gradient(to bottom, #ededed);
     text-shadow: none;
@@ -206,7 +206,7 @@
     .button:backdrop:active {
       border-width: 1px;
       border-style: solid;
-      color: #454f52;
+      color: #54595a;
       border-color: #a1a1a1;
       background-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.3));
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
@@ -226,7 +226,7 @@
   .button:insensitive {
     border-width: 1px;
     border-style: solid;
-    color: #748489;
+    color: #8d9091;
     border-color: #a1a1a1;
     background-image: linear-gradient(to bottom, #ededed);
     text-shadow: none;
@@ -235,7 +235,7 @@
     .button:insensitive:active {
       border-width: 1px;
       border-style: solid;
-      color: #748489;
+      color: #8d9091;
       border-color: #a1a1a1;
       background-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.2));
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
@@ -284,7 +284,7 @@
     .button.suggested-action:insensitive {
       border-width: 1px;
       border-style: solid;
-      color: #748489;
+      color: #8d9091;
       border-color: #a1a1a1;
       background-image: linear-gradient(to bottom, #ededed);
       text-shadow: none;
@@ -335,7 +335,7 @@
     .button.destructive-action:insensitive {
       border-width: 1px;
       border-style: solid;
-      color: #748489;
+      color: #8d9091;
       border-color: #a1a1a1;
       background-image: linear-gradient(to bottom, #ededed);
       text-shadow: none;
@@ -371,7 +371,7 @@
   .menuitem.button:backdrop, .menuitem.button:backdrop:active:insensitive, .menuitem.button:hover:backdrop, 
.menuitem.button:insensitive:backdrop, .menuitem.button:active:insensitive:backdrop, 
.menuitem.button:active:backdrop, .menuitem.button:active:hover:backdrop, 
.menuitem.button:active:selected:backdrop {
     text-shadow: none;
     icon-shadow: none;
-    color: #748489;
+    color: #8d9091;
     background-color: #ededed;
     background-image: none;
     border: none;
@@ -390,7 +390,7 @@ GtkColorButton.button {
   border-radius: 0;
   box-shadow: none; }
   .spinbutton .button:insensitive {
-    color: rgba(116, 132, 137, 0.3); }
+    color: rgba(141, 144, 145, 0.3); }
   .spinbutton .button:active {
     box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); }
   .spinbutton .button:backdrop {
@@ -428,7 +428,7 @@ GtkColorButton.button {
   .spinbutton.vertical .button:first-child:insensitive {
     border-width: 1px;
     border-style: solid;
-    color: #748489;
+    color: #8d9091;
     border-color: #a1a1a1;
     background-image: linear-gradient(to bottom, #ededed);
     text-shadow: none;
@@ -464,7 +464,7 @@ GtkColorButton.button {
   .spinbutton.vertical .button:last-child:insensitive {
     border-width: 1px;
     border-style: solid;
-    color: #748489;
+    color: #8d9091;
     border-color: #a1a1a1;
     background-image: linear-gradient(to bottom, #ededed);
     text-shadow: none;
@@ -473,7 +473,7 @@ GtkColorButton.button {
 .spinbutton.vertical .button:backdrop {
   border-width: 1px;
   border-style: solid;
-  color: #454f52;
+  color: #54595a;
   border-color: #a1a1a1;
   background-image: linear-gradient(to bottom, #ededed);
   text-shadow: none;
@@ -505,11 +505,11 @@ GtkComboBox {
   text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
   icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); }
   GtkComboBox:insensitive {
-    color: #748489;
+    color: #8d9091;
     text-shadow: none;
     icon-shadow: none; }
   GtkComboBox:backdrop {
-    color: #454f52;
+    color: #54595a;
     text-shadow: none;
     icon-shadow: none; }
   GtkComboBox:backdrop:insensitive {
@@ -669,7 +669,6 @@ GtkPopover {
 .notebook {
   padding: 0;
   border-style: solid;
-  border-color: #a1a1a1;
   background-color: white;
   -GtkNotebook-initial-gap: 10;
   -GtkNotebook-arrow-spacing: 5;
@@ -679,12 +678,16 @@ GtkPopover {
   -GtkWidget-focus-padding: 0;
   -GtkWidget-focus-line-width: 0;
   transition: all 200ms ease-out; }
+  .notebook:backdrop {
+    background-color: #fcfcfc; }
   .notebook.frame {
-    border-width: 1px; }
+    border-width: 1px;
+    border-color: #a1a1a1; }
+    .notebook.frame:backdrop {
+      border-color: #a1a1a1; }
   .notebook.header {
-    background-color: #e0e0e0;
-    box-shadow: inset 0 6px 4px -5px #c7c7c7;
-    border-width: 0px; }
+    background-color: #cecece;
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15); }
     .notebook.header.frame {
       border: 1px solid #a1a1a1; }
       .notebook.header.frame.top {
@@ -695,42 +698,53 @@ GtkPopover {
         border-left: none; }
       .notebook.header.frame.left {
         border-right: none; }
+      .notebook.header.frame:backdrop {
+        border-color: #a1a1a1;
+        background-color: rgba(161, 161, 161, 0.3);
+        box-shadow: none; }
   .notebook tab {
     border-width: 0;
+    border-color: transparent;
     background-color: transparent; }
     .notebook tab.top, .notebook tab.bottom {
       padding: 8px 20px; }
     .notebook tab.left, .notebook tab.right {
       padding: 5px 20px; }
-    .notebook tab.top:hover {
-      box-shadow: inset 0 -2px #a1a1a1; }
-    .notebook tab.top:active {
-      box-shadow: inset 0 -2px #4a90d9; }
-    .notebook tab.bottom:hover {
-      box-shadow: inset 0 2px #a1a1a1; }
-    .notebook tab.bottom:active {
-      box-shadow: inset 0 2px #4a90d9; }
-    .notebook tab.right:hover {
-      box-shadow: inset 2px 0 #a1a1a1; }
-    .notebook tab.right:active {
-      box-shadow: inset 2px 0 #4a90d9; }
-    .notebook tab.left:hover {
-      box-shadow: inset -2px 0 #a1a1a1; }
-    .notebook tab.left:active {
-      box-shadow: inset -2px 0 #4a90d9; }
+    .notebook tab.top {
+      padding-bottom: 6px;
+      border-bottom-width: 2px; }
+    .notebook tab.bottom {
+      padding-top: 6px;
+      border-top-width: 2px; }
+    .notebook tab.left {
+      padding-right: 18px;
+      border-right-width: 2px; }
+    .notebook tab.right {
+      padding-left: 18px;
+      border-left-width: 2px; }
+    .notebook tab:hover {
+      border-color: #a1a1a1; }
+    .notebook tab:active, .notebook tab:backdrop:active {
+      border-color: #4a90d9; }
+    .notebook tab:backdrop {
+      background-color: transparent;
+      border-color: transparent; }
     .notebook tab.reorderable-page:active {
       border-width: 0 1px 0 1px;
       background-color: rgba(237, 237, 237, 0.5);
-      border-color: #c7c7c7; }
+      border-color: rgba(161, 161, 161, 0.5); }
     .notebook tab GtkLabel {
       font-weight: bold;
-      color: #748489; }
+      color: #8d9091; }
+      .notebook tab GtkLabel.prelight-page {
+        color: #5d6263; }
       .notebook tab GtkLabel.active-page {
         color: #2e3436; }
-      .notebook tab GtkLabel.prelight-page {
-        color: #515c5f; }
+        .notebook tab GtkLabel.active-page:backdrop {
+          color: #54595a; }
+      .notebook tab GtkLabel:backdrop {
+        color: #8d9090; }
     .notebook tab .button {
-      padding: 0 6px;
       border: 1px solid transparent;
       box-shadow: none;
       background-image: linear-gradient(to bottom, transparent);
@@ -753,6 +767,8 @@ GtkPopover {
         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; }
+      .notebook tab .button > GtkImage {
+        padding: 4px; }
 
 /**************
  * Scrollbars *
@@ -835,7 +851,7 @@ GtkSwitch {
     GtkSwitch.slider:insensitive {
       border-width: 1px;
       border-style: solid;
-      color: #748489;
+      color: #8d9091;
       border-color: #a1a1a1;
       background-image: linear-gradient(to bottom, #ededed);
       text-shadow: none;
@@ -844,7 +860,7 @@ GtkSwitch {
     GtkSwitch.slider:backdrop {
       border-width: 1px;
       border-style: solid;
-      color: #454f52;
+      color: #54595a;
       border-color: #a1a1a1;
       background-image: linear-gradient(to bottom, #ededed);
       text-shadow: none;
@@ -1339,6 +1355,7 @@ GtkScrolledWindow GtkViewport.frame {
   padding: 8px;
   border-color: transparent;
   background-image: none;
+  transition-property: border, box-shadow, color;
   box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
   .button.titlebutton:hover {
     border-width: 1px;
@@ -1361,10 +1378,11 @@ GtkScrolledWindow GtkViewport.frame {
   .button.titlebutton:backdrop {
     border-width: 1px;
     border-style: solid;
-    color: #454f52;
+    color: #54595a;
     border-color: #a1a1a1;
     background-image: linear-gradient(to bottom, #ededed);
     text-shadow: none;
     icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
-    border-color: transparent; }
+    border-color: transparent;
+    transition-property: border, box-shadow, color; }
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]