[gnome-themes-standard] popover.osd (touch selections): initial implementation

[Jakub Steiner <jimmac src gnome org>]

commit 5b5fd78d2a3e8b91cbbfbb5210937899b592852b
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri Jun 6 12:58:07 2014 +0200

    popover.osd (touch selections): initial implementation
    
    - beak of the popover seems to be more opaque
    - I cannot figure out why the normal state of the button is flushed.
      I'm getting the same for inline toolbars

 themes/Adwaita/gtk-3.0/_colors.scss           |    2 +-
 themes/Adwaita/gtk-3.0/_common.scss           |   26 ++++++++++++--
 themes/Adwaita/gtk-3.0/_drawing.scss          |   20 ++++++++--
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |   49 ++++++++++++++++++++++---
 themes/Adwaita/gtk-3.0/gtk-contained.css      |   49 ++++++++++++++++++++++---
 5 files changed, 128 insertions(+), 18 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_colors.scss b/themes/Adwaita/gtk-3.0/_colors.scss
index 830b64e..be48c43 100644
--- a/themes/Adwaita/gtk-3.0/_colors.scss
+++ b/themes/Adwaita/gtk-3.0/_colors.scss
@@ -19,7 +19,7 @@ $success_color: if($variant =='light', #73d216, darken(#73d216,10%));
 $destructive_color: if($variant =='light', #ef2929, darken(#ef2929,10%));
 
 $osd_fg_color: #fff;
-$osd_bg_color: transparentize(#000,0.5);
+$osd_bg_color: transparentize(#000,0.2);
 $osd_borders_color: transparentize(#fff,0.8);
 
 //insensitive state derived colors
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index 3f90f7e..cd30122 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -292,8 +292,8 @@
   .primary-toolbar & { icon-shadow: none; } // tango icons don't need added shadows
 }
 
-/* menu/popover buttons */
-.menuitem.button, {
+/* menu buttons */
+.menuitem.button {
   color: $fg_color;
   background-color: transparent;
   background-image: none;
@@ -671,10 +671,20 @@ GtkPopover {
     icon-shadow: none;
     border: 0;
   }
-  &.osd { //FIXME DOesn't work
+  &.osd { // Also used for touch cutnpaste 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); };
+    }
   }
 }
 
@@ -1342,6 +1352,16 @@ GtkInfoBar {
   }
 }
 
+/********************************
+ * Touch text selection handles *
+ ********************************/
+
+.cursor-handle {
+  background-color: transparent;
+  &.top { border:6px solid red; background-image: -gtk-icontheme('selection-start'); }
+  &.bottom { background-image: -gtk-icontheme('selection-end'); }
+} 
+ 
 /**********************
  * Window Decorations *
  *********************/
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index cedb318..358cc6d 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -285,14 +285,16 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     border-color: $osd_borders_color;
     box-shadow: none;
   }
-  
-  @else if $t==osd-insensitive {
+  @else if $t==osd-hover {
   //
-  // insensitive osd button
+  // active osd button
   //
     background-image: linear-gradient(to bottom,
-                      $osd_bg_color);
+                                  transparentize(#fff,0.85),
+                                  transparentize(#fff,0.9),
+                                  transparentize(#000,0.99));
     border-color: $osd_borders_color;
+    box-shadow: none;
   }
   @else if $t==osd-active {
   //
@@ -305,6 +307,16 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     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;
+    color: $insensitive_fg_color;
+  }
+  
 }
 
 @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 79bdaba..6d9b71c 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -250,8 +250,9 @@
     .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); }
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8));
+      border-color: rgba(255, 255, 255, 0.2);
+      color: #939695; }
     .osd .button:active {
       border-width: 1px;
       border-style: solid;
@@ -391,7 +392,7 @@
   .primary-toolbar .button {
     icon-shadow: none; }
 
-/* menu/popover buttons */
+/* menu buttons */
 .menuitem.button, .menuitem.button:insensitive, .menuitem.button:active:insensitive {
   color: #eeeeec;
   background-color: transparent;
@@ -579,7 +580,7 @@ GtkComboBox {
   padding: 6px;
   background-color: #393f3f; }
   .toolbar.osd {
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.8);
     border-radius: 6px;
     padding: 12px; }
   .toolbar.inline-toolbar {
@@ -723,8 +724,35 @@ GtkPopover {
     border: 0; }
   GtkPopover.osd {
     background-image: none;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.8);
+    border: 1px solid #1c1f1f;
     color: white; }
+    GtkPopover.osd .button {
+      color: white;
+      text-shadow: none;
+      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; }
+      GtkPopover.osd .button:hover {
+        border-width: 1px;
+        border-style: solid;
+        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1), 
rgba(0, 0, 0, 0.01));
+        border-color: rgba(255, 255, 255, 0.2);
+        box-shadow: none; }
+      GtkPopover.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; }
+      GtkPopover.osd .button:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8));
+        border-color: rgba(255, 255, 255, 0.2);
+        color: #939695; }
 
 /*****************
  * Notebooks and *
@@ -1568,6 +1596,17 @@ GtkInfoBar {
       background-image: linear-gradient(to bottom, #393f3f);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
+/********************************
+ * Touch text selection handles *
+ ********************************/
+.cursor-handle {
+  background-color: transparent; }
+  .cursor-handle.top {
+    border: 6px solid red;
+    background-image: -gtk-icontheme("selection-start"); }
+  .cursor-handle.bottom {
+    background-image: -gtk-icontheme("selection-end"); }
+
 /**********************
  * Window Decorations *
  *********************/
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index e081669..74f7e2a 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -250,8 +250,9 @@
     .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); }
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8));
+      border-color: rgba(255, 255, 255, 0.2);
+      color: #8d9091; }
     .osd .button:active {
       border-width: 1px;
       border-style: solid;
@@ -391,7 +392,7 @@
   .primary-toolbar .button {
     icon-shadow: none; }
 
-/* menu/popover buttons */
+/* menu buttons */
 .menuitem.button, .menuitem.button:insensitive, .menuitem.button:active:insensitive {
   color: #2e3436;
   background-color: transparent;
@@ -579,7 +580,7 @@ GtkComboBox {
   padding: 6px;
   background-color: #ededed; }
   .toolbar.osd {
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.8);
     border-radius: 6px;
     padding: 12px; }
   .toolbar.inline-toolbar {
@@ -723,8 +724,35 @@ GtkPopover {
     border: 0; }
   GtkPopover.osd {
     background-image: none;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.8);
+    border: 1px solid #a1a1a1;
     color: white; }
+    GtkPopover.osd .button {
+      color: white;
+      text-shadow: none;
+      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; }
+      GtkPopover.osd .button:hover {
+        border-width: 1px;
+        border-style: solid;
+        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1), 
rgba(0, 0, 0, 0.01));
+        border-color: rgba(255, 255, 255, 0.2);
+        box-shadow: none; }
+      GtkPopover.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; }
+      GtkPopover.osd .button:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8));
+        border-color: rgba(255, 255, 255, 0.2);
+        color: #8d9091; }
 
 /*****************
  * Notebooks and *
@@ -1568,6 +1596,17 @@ GtkInfoBar {
       background-image: linear-gradient(to bottom, #ededed);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
+/********************************
+ * Touch text selection handles *
+ ********************************/
+.cursor-handle {
+  background-color: transparent; }
+  .cursor-handle.top {
+    border: 6px solid red;
+    background-image: -gtk-icontheme("selection-start"); }
+  .cursor-handle.bottom {
+    background-image: -gtk-icontheme("selection-end"); }
+
 /**********************
  * Window Decorations *
  *********************/