[gnome-themes-standard/wip/sass] osd: initial osd styles

[Jakub Steiner <jimmac src gnome org>]

commit bb889cbc09e68fddd02e1b6a37916ef5fe792215
Author: Jakub Steiner <jimmac gmail com>
Date:   Wed Jun 4 21:10:12 2014 +0200

    osd: initial osd styles

 themes/Adwaita/gtk-3.0/_colors.scss           |    1 +
 themes/Adwaita/gtk-3.0/_common.scss           |   54 +++++++++++++-----------
 themes/Adwaita/gtk-3.0/_drawing.scss          |   32 ++++++++++++++
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |   55 +++++++++++++++++--------
 themes/Adwaita/gtk-3.0/gtk-contained.css      |   55 +++++++++++++++++--------
 5 files changed, 136 insertions(+), 61 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_colors.scss b/themes/Adwaita/gtk-3.0/_colors.scss
index 142946c..056b6ec 100644
--- a/themes/Adwaita/gtk-3.0/_colors.scss
+++ b/themes/Adwaita/gtk-3.0/_colors.scss
@@ -20,6 +20,7 @@ $destructive_color: if($variant =='light', #ef2929, darken(#ef2929,10%));
 
 $osd_fg_color: #fff;
 $osd_bg_color: transparentize(#000,0.5);
+$osd_borders_color: transparentize(#fff,0.8);
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index a5ecb22..9c2821d 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -220,8 +220,12 @@
   }
   //overlay / OSD style
   .osd & {
-    background-image: none;
-    background-color: red;
+    padding: 6px;
+    border-width: 1px;
+    @include button(osd);
+    &:insensitive { @include button(osd-insensitive); }
+    &:active { @include button(osd-active); }
+    &:backdrop { @include button(osd-backdrop); }
   }
   // Suggested and Destructive Action buttons
   @each $b_type, $b_color in (suggested-action, $selected_bg_color),
@@ -459,12 +463,26 @@ GtkComboBox {
  * Toolbars *
  ************/
 .toolbar { //FIXME: why is all this being ignored?
+  padding: 6px;
+  background-color: $bg_color;
+  &.osd {
+    background-color: $osd_bg_color;
+    border-radius: 6px;
+    padding: 12px;
+  }
+  //searchbar & inline-toolbar
+  &.inline-toolbar {
+    @extend %inset-bar;
+    border-width: 1px 0 0 0;
     padding: 6px;
-    background-color: $bg_color;
+  }
+  &.search-bar {
+    @extend %inset-bar;
+    border-width: 0 0 1px;
+    padding: 4px;
+  }
 }
 
-//searchbar & actionbar
-
 %inset-bar {
   border-style: solid;
   border-color: $borders_color;
@@ -473,24 +491,8 @@ GtkComboBox {
   box-shadow: inset 0 1px 3px -2px mix($borders_color, $_bg, 60%);
 }
 
-.search-bar {
-  @extend %inset-bar;
-  border-width: 0 0 1px;
-  padding: 4px;
-}
-
 .action-bar {
-  @extend %inset-bar;
-  border-width: 1px 0 0 0;
-  padding: 6px;
-  .title {
-    font: Bold 11;
-    padding: 0 12px;
-  }
-  .subtitle {
-    font: 9;
-    padding: 0 12px;
-  }
+  padding: 4px;
 }
 
 /***************
@@ -629,9 +631,6 @@ column-header { // FIXME: something better
 GtkPopover {
   border-radius: 5px;
   background-clip: border-box;
-  /*
-  background-color: @osd_popover_bg;
-  */
   background-color: $bg_color;
 
   border-color: $borders-color;
@@ -658,6 +657,11 @@ GtkPopover {
     icon-shadow: none;
     border: 0;
   }
+  &.osd { //FIXME DOesn't work
+    background-image: none;
+    background-color: $osd_bg_color;
+    color: $osd_fg_color;
+  }
 }
 
 /*****************
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index 1a442db..cedb318 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -273,6 +273,38 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     @include _shadows(inset 0 1px transparentize(white,1),
                       0 1px transparentize(white,1));
   }
+  
+  @else if $t==osd {
+  //
+  // normal osd button
+  //
+    background-image: linear-gradient(to bottom,
+                                  transparentize(#fff,0.9),
+                                  transparentize(#fff,0.95),
+                                  transparentize(#000,0.99));
+    border-color: $osd_borders_color;
+    box-shadow: none;
+  }
+  
+  @else if $t==osd-insensitive {
+  //
+  // insensitive osd button
+  //
+    background-image: linear-gradient(to bottom,
+                      $osd_bg_color);
+    border-color: $osd_borders_color;
+  }
+  @else if $t==osd-active {
+  //
+  // active osd button
+  //
+    background-image: linear-gradient(to bottom,
+                                  transparentize(#000,0.95),
+                                  transparentize(#fff,0.95),
+                                  transparentize(#fff,0.9));
+    border-color: $osd_borders_color;
+    box-shadow: none;
+  }
 }
 
 @mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:false) {
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index b653d1b..4d63144 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -240,8 +240,27 @@
       background-image: linear-gradient(to bottom, #333737);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
   .osd .button {
-    background-image: none;
-    background-color: red; }
+    padding: 6px;
+    border-width: 1px;
+    border-width: 1px;
+    border-style: solid;
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), 
rgba(0, 0, 0, 0.01));
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: none; }
+    .osd .button:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+      border-color: rgba(255, 255, 255, 0.2); }
+    .osd .button:active {
+      border-width: 1px;
+      border-style: solid;
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05), rgba(255, 
255, 255, 0.1));
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none; }
+    .osd .button:backdrop {
+      border-width: 1px;
+      border-style: solid; }
   .button.suggested-action {
     border-width: 1px;
     border-style: solid;
@@ -553,26 +572,25 @@ GtkComboBox {
 .toolbar {
   padding: 6px;
   background-color: #393f3f; }
+  .toolbar.osd {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 6px;
+    padding: 12px; }
+  .toolbar.inline-toolbar {
+    border-width: 1px 0 0 0;
+    padding: 6px; }
+  .toolbar.search-bar {
+    border-width: 0 0 1px;
+    padding: 4px; }
 
-.search-bar, .action-bar {
+.toolbar.inline-toolbar, .toolbar.search-bar {
   border-style: solid;
   border-color: #1c1f1f;
   background-color: #363c3c;
   box-shadow: inset 0 1px 3px -2px #262a2a; }
 
-.search-bar {
-  border-width: 0 0 1px;
-  padding: 4px; }
-
 .action-bar {
-  border-width: 1px 0 0 0;
-  padding: 6px; }
-  .action-bar .title {
-    font: Bold 11;
-    padding: 0 12px; }
-  .action-bar .subtitle {
-    font: 9;
-    padding: 0 12px; }
+  padding: 4px; }
 
 /***************
  * Header bars *
@@ -673,9 +691,6 @@ column-header .button:backdrop {
 GtkPopover {
   border-radius: 5px;
   background-clip: border-box;
-  /*
-  background-color: @osd_popover_bg;
-  */
   background-color: #393f3f;
   border-color: #1c1f1f;
   border-width: 1px;
@@ -695,6 +710,10 @@ GtkPopover {
     background-color: transparent;
     icon-shadow: none;
     border: 0; }
+  GtkPopover.osd {
+    background-image: none;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white; }
 
 /*****************
  * Notebooks and *
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 4ff2af5..dd9664b 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -240,8 +240,27 @@
       background-image: linear-gradient(to bottom, #ebebeb);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
   .osd .button {
-    background-image: none;
-    background-color: red; }
+    padding: 6px;
+    border-width: 1px;
+    border-width: 1px;
+    border-style: solid;
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), 
rgba(0, 0, 0, 0.01));
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: none; }
+    .osd .button:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+      border-color: rgba(255, 255, 255, 0.2); }
+    .osd .button:active {
+      border-width: 1px;
+      border-style: solid;
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05), rgba(255, 
255, 255, 0.1));
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none; }
+    .osd .button:backdrop {
+      border-width: 1px;
+      border-style: solid; }
   .button.suggested-action {
     border-width: 1px;
     border-style: solid;
@@ -553,26 +572,25 @@ GtkComboBox {
 .toolbar {
   padding: 6px;
   background-color: #ededed; }
+  .toolbar.osd {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 6px;
+    padding: 12px; }
+  .toolbar.inline-toolbar {
+    border-width: 1px 0 0 0;
+    padding: 6px; }
+  .toolbar.search-bar {
+    border-width: 0 0 1px;
+    padding: 4px; }
 
-.search-bar, .action-bar {
+.toolbar.inline-toolbar, .toolbar.search-bar {
   border-style: solid;
   border-color: #a1a1a1;
   background-color: #e3e3e3;
   box-shadow: inset 0 1px 3px -2px #bbbbbb; }
 
-.search-bar {
-  border-width: 0 0 1px;
-  padding: 4px; }
-
 .action-bar {
-  border-width: 1px 0 0 0;
-  padding: 6px; }
-  .action-bar .title {
-    font: Bold 11;
-    padding: 0 12px; }
-  .action-bar .subtitle {
-    font: 9;
-    padding: 0 12px; }
+  padding: 4px; }
 
 /***************
  * Header bars *
@@ -673,9 +691,6 @@ column-header .button:backdrop {
 GtkPopover {
   border-radius: 5px;
   background-clip: border-box;
-  /*
-  background-color: @osd_popover_bg;
-  */
   background-color: #ededed;
   border-color: #a1a1a1;
   border-width: 1px;
@@ -695,6 +710,10 @@ GtkPopover {
     background-color: transparent;
     icon-shadow: none;
     border: 0; }
+  GtkPopover.osd {
+    background-image: none;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white; }
 
 /*****************
  * Notebooks and *