[gnome-themes-standard/wip/sass] level bars completion - make the two type of levelbars the same height - entry mixin for trough

[Lapo Calamandrei <lapo src gnome org>]

commit 58c8f0912d1d2589388188550fdb85ab77d3610a
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Fri Jun 6 14:34:45 2014 +0200

    level bars completion
      - make the two type of levelbars the same height
      - entry mixin for trough
      - implemented backdrop state

 themes/Adwaita/gtk-3.0/_common.scss           |   36 +++++++++++++++---------
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |   36 ++++++++++++++++++------
 themes/Adwaita/gtk-3.0/gtk-contained.css      |   36 ++++++++++++++++++------
 3 files changed, 76 insertions(+), 32 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index f9346c3..36cd95f 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -1,7 +1,6 @@
 * {
   engine: adwaita;
   padding: 0;
-  background-clip: padding-box;
   -GtkToolButton-icon-spacing: 4;
   -GtkTextView-error-underline-color: $error_color;
   -GtkPaned-handle-size: 5;
@@ -1162,34 +1161,39 @@ GtkProgressBar.trough {
  ****************/
 
 GtkLevelBar {
-    -GtkLevelBar-min-block-width: 34;
-    -GtkLevelBar-min-block-height: 3;
+  -GtkLevelBar-min-block-width: 34;
+  -GtkLevelBar-min-block-height: 3;
 }
 
 GtkLevelBar.vertical {
-    -GtkLevelBar-min-block-width: 3;
-    -GtkLevelBar-min-block-height: 34;
+  -GtkLevelBar-min-block-width: 3;
+  -GtkLevelBar-min-block-height: 34;
 }
 
 .level-bar {
   &.trough {
+    // FIXME: outset not working
     padding: 2px;
-    border-width: 1px;
-    border-style: solid;
     border-radius: 3px;
-    border-color: $borders_color;
-    box-shadow: inset 1px 1px transparentize(black, 0.9),
-                $widget_edge;
-    background-color: $base_color;
+    @include entry(normal);
+    &:backdrop {
+      @include entry(backdrop);
+    }
   }
   &.fill-block {
+    // FIXME: it would be nice to set make fill blocks bigger, but we'd need
+    // :nth-child working on discrete indicators
     border-width: 1px;
     border-style: solid;
     border-color: $selected_borders_color;
     background-color: $selected_bg_color;
+    box-shadow: 0 1px transparentize(black, 0.9);
+    &:backdrop {
+      border-color: $selected_bg_color;
+      box-shadow: none;
+    }
     &.indicator-continuous {
-      padding: 2px;
-      border-radius: 2px;
+      border-radius: 1px;
     }
     &.indicator-discrete {
       &.horizontal { margin: 0 1px; }
@@ -1198,17 +1202,21 @@ GtkLevelBar.vertical {
     &.level-high {
       border-color: darken($success_color,10%);
       background-color: $success_color;
+      &:backdrop { border-color: $success_color; }
     }
     &.level-low {
       border-color: darken($warning_color,10%);
       background-color: $warning_color;
+      &:backdrop { border-color: $warning_color; };
     }
     &.empty-fill-block {
       background-color: transparent;
       border-color: transparentize($borders_color, 0.8);
+      box-shadow: none;
+      &:backdrop { border-color: transparentize($backdrop_borders_color,0.8); }
     }
   }
-}
+}  
 
 // catch all extend :)
 
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 6139092..2579fc5 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -1,7 +1,6 @@
 * {
   engine: adwaita;
   padding: 0;
-  background-clip: padding-box;
   -GtkToolButton-icon-spacing: 4;
   -GtkTextView-error-underline-color: #cc0000;
   -GtkPaned-handle-size: 5;
@@ -1374,20 +1373,32 @@ GtkLevelBar.vertical {
 
 .level-bar.trough {
   padding: 2px;
-  border-width: 1px;
-  border-style: solid;
   border-radius: 3px;
+  background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
+  background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
   border-color: #1c1f1f;
-  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1);
-  background-color: #333333; }
+  box-shadow: inset 0 2px 2px -2px #191919, 0 1px rgba(238, 238, 236, 0.1); }
+  .level-bar.trough:backdrop {
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
+    color: #c9cbc9;
+    background-image: linear-gradient(to bottom, #262626);
+    box-shadow: 0 1px rgba(255, 255, 255, 0); }
 .level-bar.fill-block {
   border-width: 1px;
   border-style: solid;
   border-color: #14375d;
-  background-color: #215d9c; }
+  background-color: #215d9c;
+  box-shadow: 0 1px rgba(0, 0, 0, 0.1); }
+  .level-bar.fill-block:backdrop {
+    border-color: #215d9c;
+    box-shadow: none; }
   .level-bar.fill-block.indicator-continuous {
-    padding: 2px;
-    border-radius: 2px; }
+    border-radius: 1px; }
   .level-bar.fill-block.indicator-discrete.horizontal {
     margin: 0 1px; }
   .level-bar.fill-block.indicator-discrete.vertical {
@@ -1395,12 +1406,19 @@ GtkLevelBar.vertical {
   .level-bar.fill-block.level-high {
     border-color: #40760c;
     background-color: #5aa411; }
+    .level-bar.fill-block.level-high:backdrop {
+      border-color: #5aa411; }
   .level-bar.fill-block.level-low {
     border-color: #c26000;
     background-color: #f57900; }
+    .level-bar.fill-block.level-low:backdrop {
+      border-color: #f57900; }
   .level-bar.fill-block.empty-fill-block {
     background-color: transparent;
-    border-color: rgba(28, 31, 31, 0.2); }
+    border-color: rgba(28, 31, 31, 0.2);
+    box-shadow: none; }
+    .level-bar.fill-block.empty-fill-block:backdrop {
+      border-color: rgba(28, 31, 31, 0.2); }
 
 .view:selected, .view:selected:focus, .view:selected:backdrop, .entry:selected, .entry:selected:focus, 
.entry:selected:backdrop, .button:selected, .button:selected:focus, .button:selected:backdrop {
   background-color: #215d9c;
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 4c4f233..8f84d42 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -1,7 +1,6 @@
 * {
   engine: adwaita;
   padding: 0;
-  background-clip: padding-box;
   -GtkToolButton-icon-spacing: 4;
   -GtkTextView-error-underline-color: #cc0000;
   -GtkPaned-handle-size: 5;
@@ -1374,20 +1373,32 @@ GtkLevelBar.vertical {
 
 .level-bar.trough {
   padding: 2px;
-  border-width: 1px;
-  border-style: solid;
   border-radius: 3px;
+  background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
+  background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
   border-color: #a1a1a1;
-  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px white;
-  background-color: white; }
+  box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px white; }
+  .level-bar.trough:backdrop {
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
+    color: #54595a;
+    background-image: linear-gradient(to bottom, #fcfcfc);
+    box-shadow: 0 1px rgba(255, 255, 255, 0); }
 .level-bar.fill-block {
   border-width: 1px;
   border-style: solid;
   border-color: #184472;
-  background-color: #4a90d9; }
+  background-color: #4a90d9;
+  box-shadow: 0 1px rgba(0, 0, 0, 0.1); }
+  .level-bar.fill-block:backdrop {
+    border-color: #4a90d9;
+    box-shadow: none; }
   .level-bar.fill-block.indicator-continuous {
-    padding: 2px;
-    border-radius: 2px; }
+    border-radius: 1px; }
   .level-bar.fill-block.indicator-discrete.horizontal {
     margin: 0 1px; }
   .level-bar.fill-block.indicator-discrete.vertical {
@@ -1395,12 +1406,19 @@ GtkLevelBar.vertical {
   .level-bar.fill-block.level-high {
     border-color: #5aa411;
     background-color: #73d216; }
+    .level-bar.fill-block.level-high:backdrop {
+      border-color: #73d216; }
   .level-bar.fill-block.level-low {
     border-color: #c26000;
     background-color: #f57900; }
+    .level-bar.fill-block.level-low:backdrop {
+      border-color: #f57900; }
   .level-bar.fill-block.empty-fill-block {
     background-color: transparent;
-    border-color: rgba(161, 161, 161, 0.2); }
+    border-color: rgba(161, 161, 161, 0.2);
+    box-shadow: none; }
+    .level-bar.fill-block.empty-fill-block:backdrop {
+      border-color: rgba(161, 161, 161, 0.2); }
 
 .view:selected, .view:selected:focus, .view:selected:backdrop, .entry:selected, .entry:selected:focus, 
.entry:selected:backdrop, .button:selected, .button:selected:focus, .button:selected:backdrop {
   background-color: #4a90d9;