[gtk+/wip/adwaita-osd] Adwaita: initial work on osd entries

[Lapo Calamandrei <lapo src gnome org>]

commit 86b673f40b2d3c54864fe0e9da76f4c6ac284a56
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Wed Oct 8 11:39:13 2014 +0200

    Adwaita: initial work on osd entries

 gtk/resources/theme/Adwaita/_common.scss           |   60 ++++++++++-
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |  115 +++++++++++++-------
 gtk/resources/theme/Adwaita/gtk-contained.css      |  115 +++++++++++++-------
 3 files changed, 204 insertions(+), 86 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index b3efa35..f99efee 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -1444,7 +1444,7 @@ column-header.button.dnd { // for treeview-like derive widgets
 .popover {
   margin: 10px;
   padding: 2px;
-  border: 1px solid $borders-color;
+  border: 1px solid $borders_color;
   border-radius: 5px;
   //background-clip: border-box;
   background-color: $bg_color;
@@ -1465,6 +1465,58 @@ column-header.button.dnd { // for treeview-like derive widgets
     text-shadow: none;
     transition: none;
   }
+
+  &.osd {
+    @extend %osd;
+    box-shadow: none;
+    background-color: transparentize($osd_bg_color, 0.3);
+    border-color: $osd_outer_borders_color;
+    .entry { //FIXME this shouldn't belong here
+      transition: none;
+      background-color: transparent;
+      color: $osd_fg_color;
+      border-color: $osd_borders_color;
+      background-image: linear-gradient(to bottom, transparentize(black, 0.5));
+      box-shadow: none;
+      &:focus {
+        transition: none;
+        background-color: transparent;
+        box-shadow: none;
+        border-color: $selected_bg_color;
+        background-image: linear-gradient(to bottom, transparentize(black, 0.5));
+        box-shadow: entry_focus_glow($selected_bg_color);
+      }
+      &:backdrop {
+        text-shadow: none;
+        icon-shadow: none;
+      }
+      &:selected {
+        text-shadow: none;
+        background-color: $selected_bg_color;
+        color: $selected_fg_color;
+      }
+      &.spinbutton .button {
+         @include button(undecorated);
+         border-style: none none none solid;
+         border-color: $osd_borders_color;
+         border-radius: 0;
+         color: $osd_fg_color;
+         &:last-child { border-radius: 0 3px 3px 0; }
+      }
+      &.spinbutton .button:backdrop {
+         @include button(undecorated);
+         text-shadow: none;
+         icon-shadow: none;
+         border-style: none none none solid;
+         border-color: $osd_borders_color;
+         border-radius: 0;
+         color: $osd_fg_color;
+         &:last-child { border-radius: 0 3px 3px 0; }
+      }
+
+    }
+  }
+/*
   &.osd { // Also used for touch cut'n'paste overlays
           // FIXME Doesn't work
     background-image: none;
@@ -1480,9 +1532,11 @@ column-header.button.dnd { // for treeview-like derive widgets
       &:insensitive { @include button(osd-insensitive); };
     }
   }
+*/
 }
 
 //touch selection handlebars for the Popover.osd above
+/*
 .entry.cursor-handle,
 .cursor-handle {
   background-color: transparent;
@@ -1492,6 +1546,7 @@ column-header.button.dnd { // for treeview-like derive widgets
   &.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); }
   &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); }
 }
+*/
 
 /*****************
  * Notebooks and *
@@ -2954,7 +3009,8 @@ GtkVolumeButton.button { padding: 8px; }
 }
 
 /* Decouple the font of context menus from their entry/textview */
-.context-menu {
+.context-menu,
+.osd.popover {
   font: initial;
 }
 
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 7e71c3a..bfa206c 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -135,13 +135,13 @@ GtkTextView {
   .grid-child:selected {
     outline-offset: -2px; }
 
-.app-notification,
+.popover.osd, .app-notification,
 .app-notification.frame, .osd {
   color: #eeeeec;
   outline-color: rgba(238, 238, 236, 0.3);
   text-shadow: 0 1px black;
   icon-shadow: 0 1px black; }
-  .app-notification:backdrop, .osd:backdrop {
+  .popover.osd:backdrop, .app-notification:backdrop, .osd:backdrop {
     text-shadow: none; }
 
 /*********************
@@ -2058,7 +2058,24 @@ GtkCalendar.header column-header .button.titlebutton, column-header .button:hove
   border: 1px solid #1c1f1f;
   border-radius: 5px;
   background-color: #393f3f;
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
+  /*
+    &.osd { // Also used for touch cut'n'paste overlays
+            // FIXME Doesn't work
+      background-image: none;
+      background-color: $osd_bg_color;
+      border: 1px solid $borders_color;
+      color: $osd_fg_color;
+      .button {
+        color: white;
+        text-shadow: none;
+        @include button(osd);
+        &:hover { @include button(osd-hover); };
+        &:active { @include button(osd-active); };
+        &:insensitive { @include button(osd-insensitive); };
+      }
+    }
+  */ }
   .popover:backdrop {
     box-shadow: none; }
   .popover > .list, .popover > .view, .popover > .toolbar
@@ -2095,57 +2112,70 @@ GtkCalendar.header column-header .button.titlebutton, column-header .button:hove
     text-shadow: none;
     transition: none; }
   .popover.osd {
-    background-image: none;
-    background-color: #2e3436;
-    border: 1px solid #1c1f1f;
-    color: #eeeeec; }
-    .popover.osd .button {
-      color: white;
-      text-shadow: none;
-      color: #eeeeec;
-      outline-color: rgba(238, 238, 236, 0.2);
+    box-shadow: none;
+    background-color: rgba(46, 52, 54, 0.7);
+    border-color: rgba(255, 255, 255, 0.1); }
+    .popover.osd .entry {
+      transition: none;
       background-color: transparent;
-      background-clip: padding-box;
-      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+      color: #eeeeec;
       border-color: rgba(0, 0, 0, 0.7);
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
-      text-shadow: 0 1px black;
-      icon-shadow: 0 1px black; }
-      .popover.osd .button:hover {
-        color: white;
-        border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
-        box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
-        text-shadow: 0 1px black;
-        icon-shadow: 0 1px black; }
-      .popover.osd .button:active {
-        color: white;
-        border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+      box-shadow: none; }
+      .popover.osd .entry:focus {
+        transition: none;
+        background-color: transparent;
         box-shadow: none;
+        border-color: #215d9c;
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+        box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0.7); }
+      .popover.osd .entry:backdrop {
         text-shadow: none;
         icon-shadow: none; }
-      .popover.osd .button:insensitive {
-        color: #939695;
+      .popover.osd .entry:selected {
+        text-shadow: none;
+        background-color: #215d9c;
+        color: #ffffff; }
+      .popover.osd .entry.spinbutton .button {
+        border-color: transparent;
+        background-color: transparent;
+        background-image: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
+        text-shadow: none;
+        icon-shadow: none;
+        border-style: none none none solid;
         border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7));
-        box-shadow: none;
+        border-radius: 0;
+        color: #eeeeec; }
+        .popover.osd .entry.spinbutton .button:last-child {
+          border-radius: 0 3px 3px 0; }
+      .popover.osd .entry.spinbutton .button:backdrop {
+        border-color: transparent;
+        background-color: transparent;
+        background-image: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
         text-shadow: none;
-        icon-shadow: none; }
+        icon-shadow: none;
+        text-shadow: none;
+        icon-shadow: none;
+        border-style: none none none solid;
+        border-color: rgba(0, 0, 0, 0.7);
+        border-radius: 0;
+        color: #eeeeec; }
+        .popover.osd .entry.spinbutton .button:backdrop:last-child {
+          border-radius: 0 3px 3px 0; }
 
+/*
 .entry.cursor-handle,
 .cursor-handle {
   background-color: transparent;
   background-image: none;
   box-shadow: none;
-  border-style: none; }
-  .entry.cursor-handle.top,
-  .cursor-handle.top {
-    -gtk-icon-source: -gtk-icontheme("selection-start-symbolic"); }
-  .entry.cursor-handle.bottom,
-  .cursor-handle.bottom {
-    -gtk-icon-source: -gtk-icontheme("selection-end-symbolic"); }
-
+  border-style: none;
+  &.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); }
+  &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); }
+}
+*/
 /*****************
  * Notebooks and *
  * Tabs          *
@@ -4283,7 +4313,8 @@ GtkCalendar.header .menuitem.titlebutton.button:selected, .list-row:selected {
     color: #c9cbc9; }
 
 /* Decouple the font of context menus from their entry/textview */
-.context-menu {
+.context-menu,
+.osd.popover {
   font: initial; }
 
 .monospace {
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 1221968..fbb6759 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -135,13 +135,13 @@ GtkTextView {
   .grid-child:selected {
     outline-offset: -2px; }
 
-.app-notification,
+.popover.osd, .app-notification,
 .app-notification.frame, .osd {
   color: #eeeeec;
   outline-color: rgba(238, 238, 236, 0.3);
   text-shadow: 0 1px black;
   icon-shadow: 0 1px black; }
-  .app-notification:backdrop, .osd:backdrop {
+  .popover.osd:backdrop, .app-notification:backdrop, .osd:backdrop {
     text-shadow: none; }
 
 /*********************
@@ -2055,7 +2055,24 @@ GtkCalendar.header column-header .button.titlebutton, column-header .button:hove
   border: 1px solid #a1a1a1;
   border-radius: 5px;
   background-color: #ededed;
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
+  /*
+    &.osd { // Also used for touch cut'n'paste overlays
+            // FIXME Doesn't work
+      background-image: none;
+      background-color: $osd_bg_color;
+      border: 1px solid $borders_color;
+      color: $osd_fg_color;
+      .button {
+        color: white;
+        text-shadow: none;
+        @include button(osd);
+        &:hover { @include button(osd-hover); };
+        &:active { @include button(osd-active); };
+        &:insensitive { @include button(osd-insensitive); };
+      }
+    }
+  */ }
   .popover:backdrop {
     box-shadow: none; }
   .popover > .list, .popover > .view, .popover > .toolbar
@@ -2092,57 +2109,70 @@ GtkCalendar.header column-header .button.titlebutton, column-header .button:hove
     text-shadow: none;
     transition: none; }
   .popover.osd {
-    background-image: none;
-    background-color: #2e3436;
-    border: 1px solid #a1a1a1;
-    color: #eeeeec; }
-    .popover.osd .button {
-      color: white;
-      text-shadow: none;
-      color: #eeeeec;
-      outline-color: rgba(238, 238, 236, 0.2);
+    box-shadow: none;
+    background-color: rgba(46, 52, 54, 0.7);
+    border-color: rgba(255, 255, 255, 0.1); }
+    .popover.osd .entry {
+      transition: none;
       background-color: transparent;
-      background-clip: padding-box;
-      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+      color: #eeeeec;
       border-color: rgba(0, 0, 0, 0.7);
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
-      text-shadow: 0 1px black;
-      icon-shadow: 0 1px black; }
-      .popover.osd .button:hover {
-        color: white;
-        border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
-        box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
-        text-shadow: 0 1px black;
-        icon-shadow: 0 1px black; }
-      .popover.osd .button:active {
-        color: white;
-        border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+      box-shadow: none; }
+      .popover.osd .entry:focus {
+        transition: none;
+        background-color: transparent;
         box-shadow: none;
+        border-color: #4a90d9;
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+        box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.15); }
+      .popover.osd .entry:backdrop {
         text-shadow: none;
         icon-shadow: none; }
-      .popover.osd .button:insensitive {
-        color: #8d9091;
+      .popover.osd .entry:selected {
+        text-shadow: none;
+        background-color: #4a90d9;
+        color: #ffffff; }
+      .popover.osd .entry.spinbutton .button {
+        border-color: transparent;
+        background-color: transparent;
+        background-image: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+        text-shadow: none;
+        icon-shadow: none;
+        border-style: none none none solid;
         border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7));
-        box-shadow: none;
+        border-radius: 0;
+        color: #eeeeec; }
+        .popover.osd .entry.spinbutton .button:last-child {
+          border-radius: 0 3px 3px 0; }
+      .popover.osd .entry.spinbutton .button:backdrop {
+        border-color: transparent;
+        background-color: transparent;
+        background-image: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
         text-shadow: none;
-        icon-shadow: none; }
+        icon-shadow: none;
+        text-shadow: none;
+        icon-shadow: none;
+        border-style: none none none solid;
+        border-color: rgba(0, 0, 0, 0.7);
+        border-radius: 0;
+        color: #eeeeec; }
+        .popover.osd .entry.spinbutton .button:backdrop:last-child {
+          border-radius: 0 3px 3px 0; }
 
+/*
 .entry.cursor-handle,
 .cursor-handle {
   background-color: transparent;
   background-image: none;
   box-shadow: none;
-  border-style: none; }
-  .entry.cursor-handle.top,
-  .cursor-handle.top {
-    -gtk-icon-source: -gtk-icontheme("selection-start-symbolic"); }
-  .entry.cursor-handle.bottom,
-  .cursor-handle.bottom {
-    -gtk-icon-source: -gtk-icontheme("selection-end-symbolic"); }
-
+  border-style: none;
+  &.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); }
+  &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); }
+}
+*/
 /*****************
  * Notebooks and *
  * Tabs          *
@@ -4445,7 +4475,8 @@ GtkCalendar.header .menuitem.titlebutton.button:selected, .list-row:selected {
     color: #fcfcfc; }
 
 /* Decouple the font of context menus from their entry/textview */
-.context-menu {
+.context-menu,
+.osd.popover {
   font: initial; }
 
 .monospace {