[epiphany] overview: fix issues on the layout CSS

[Lorenzo Tilve <ltilve src gnome org>]

commit 02a90f2a0b2acd3eb66807a664b14d661904221a
Author: Lorenzo Tilve <ltilve igalia com>
Date:   Sun Feb 23 10:10:28 2014 +0100

    overview: fix issues on the layout CSS
    
        - fix regresion that broke CSS animation when removing items
        - avoid user agent ul padding to affect grid centering
    
    https://bugzilla.gnome.org/show_bug.cgi?id=724652

 embed/ephy-embed-shell.c    |    2 +-
 src/resources/overview.html |   20 +++++++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)
---
diff --git a/embed/ephy-embed-shell.c b/embed/ephy-embed-shell.c
index 7fa3be5..1122eaf 100644
--- a/embed/ephy-embed-shell.c
+++ b/embed/ephy-embed-shell.c
@@ -43,7 +43,7 @@
 
 #define PAGE_SETUP_FILENAME "page-setup-gtk.ini"
 #define PRINT_SETTINGS_FILENAME "print-settings.ini"
-#define OVERVIEW_RELOAD_DELAY 1000
+#define OVERVIEW_RELOAD_DELAY 500
 
 #define EPHY_EMBED_SHELL_GET_PRIVATE(object)(G_TYPE_INSTANCE_GET_PRIVATE ((object), EPHY_TYPE_EMBED_SHELL, 
EphyEmbedShellPrivate))
 
diff --git a/src/resources/overview.html b/src/resources/overview.html
index e78e386..6f95e73 100755
--- a/src/resources/overview.html
+++ b/src/resources/overview.html
@@ -40,16 +40,21 @@
   }
 
   #grid {
+      /* Width for 5 thumbnails and their paddings */
+      max-width: 1060px;
+      margin-left: auto;
+      margin-right:auto;
       padding: 0;
   }
 
   #item-list {
-    text-align: center;
+    padding: 0;
   }
 
   #grid li {
       list-style-type: none;
       display: inline-block;
+      vertical-align:top;
   }
 
   .overview-item {
@@ -61,8 +66,9 @@
       padding: 15px;
       outline: 0;
       position: relative;
-      transition: all 0.5s ease-in-out;
+      transition: 0;
       top: 0;
+      float: left;
   }
 
   .title {
@@ -82,12 +88,10 @@
       width: 180px;
       height: 135px;
       display: block;
-      transition: all 0.2s ease-in-out;
       border: 1px solid #ccc;
       background: url(ephy-resource:///org/gnome/epiphany/missing-thumbnail.png) center no-repeat,
                   linear-gradient(to bottom, #e8e8e8, #fff);
       background-repeat: no-repeat;
-      animation: fadeOut 0.5s;
       position: relative;
   }
 
@@ -132,10 +136,11 @@
   }
 
   .removed .overview-item {
-      height: 0;
+      transition: all 0.75s ease-in-out;
       width: 0;
       margin: 15px 0;
       opacity: 0;
+      padding: 0;
   }
 
   .removed .close-button {
@@ -146,6 +151,11 @@
       left: 20px;
       right: inherit;
   }
+
+  html[dir="rtl"] .overview-item {
+      float: right;
+  }
+
   </style>
 
   <script>