[epiphany] overview thumbnails: improve stylesheet

[Claudio Saavedra <csaavedra src gnome org>]

commit e7e72ac6a15a0801abd978efc222410e95eb1b1b
Author: Jakub Steiner <jimmac gmail com>
Date:   Wed Feb 19 13:17:30 2014 +0100

    overview thumbnails: improve stylesheet
    
    - replace hard baked frames with css properties
    - adjust position of close buttons and reassure action with
      specific :hover state for the close button
    - avoid using alpha for normal state (feels washed out). Raise
      the thumbail on :hover and sunk it for :active
    
    The thing missing is thumbnails still having the shadow baked in.
    For this to work, the web thumnails need to remain flat.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=723950

 data/missing-thumbnail.png  |  Bin 1647 -> 1226 bytes
 src/resources/overview.html |   42 ++++++++++++++++++++++++++++++++----------
 2 files changed, 32 insertions(+), 10 deletions(-)
---
diff --git a/data/missing-thumbnail.png b/data/missing-thumbnail.png
index 549ad91..6911fbe 100644
Binary files a/data/missing-thumbnail.png and b/data/missing-thumbnail.png differ
diff --git a/src/resources/overview.html b/src/resources/overview.html
index c135c0b..e5854e7 100755
--- a/src/resources/overview.html
+++ b/src/resources/overview.html
@@ -54,6 +54,7 @@
       margin: 15px;
       outline: 0;
       transition: all 0.5s ease-in-out;
+      position: relative;
   }
 
   .title {
@@ -73,28 +74,49 @@
       width: 200px;
       height: 150px;
       display: block;
-      opacity: 0.6;
-      transition: opacity 0.2s ease-in-out;
-      background: url(ephy-about:/thumbnail-frame.png), url(ephy-about:/missing-thumbnail.png) 10px 9px;
+      transition: all 0.2s ease-in-out;
+      border: 1px solid #ccc;
+      background: url(ephy-about:/missing-thumbnail.png) center no-repeat,
+                  linear-gradient(to bottom, #e8e8e8, #fff);
       background-repeat: no-repeat;
       animation: fadeOut 0.5s;
+      position: relative;
   }
 
   .thumbnail:hover,
   :focus .thumbnail {
-      opacity: 1.0;
+      border: 1px solid #999;
+      box-shadow: 0 1px 1px rgba(0,0,0,0.3);
   }
 
+  .thumbnail:active {
+      border: 1px solid #999;
+      box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
+  }
+  
   .close-button {
-      -webkit-transition: opacity 250ms;
-      position: relative;
-      float: right;
-      top: -10px;
-      right: -5px;
+      -webkit-transition: all 250ms;
+      position: absolute;
+      top: 9px;
+      right: 6px;
       opacity: 0;
       z-index: 5;
       color: #888;
-      font-size: 1.2em;
+      font-size: 14px;
+      width: 14px;
+      height: 14px;
+      color: #fff;
+      padding: 1px 1px 3px 3px;
+      text-shadow: 0 1px 1px rgba(0,0,0,.5);
+      background-color: rgba(80,80,80,.2);
+      border-radius: 50%;
+  }
+  .close-button:hover {
+      background-color: rgba(80,80,80,.5);
+  }
+  .close-button:active {
+      text-shadow: none;
+      background-color: #333;
   }
 
   .overview-item:hover .close-button {