Merge branch 'master' of git://gitorious.org/rekonq/mainline into i18n

1 files changed, 152 insertions, 87 deletions

diff --git a/src/data/home.html b/src/data/home.html
index 9d8f390f..25236743 100644
--- a/src/data/home.html
+++ b/src/data/home.html
@@ -6,134 +6,170 @@
 
 <style type="text/css">
 
-/* ------------------------------------------------------- */
-/* generic styles */
-
-html, body, div, h1, h2, h3, h4, a, p{
-margin:0;
-padding:0;
-border:0;
+/* -------------------------------------------------------- */
+/* css reset */
+* {
+border: 0; padding: 0; margin: 0;
 }
 
-body{
+/* -------------------------------------------------------- */
+/* generic styles */
+
+body {
 background: url(%2/tile.gif) repeat-x #fff;
-font-family: sans-serif;
-font-size: 0.8em;
-text-align: center;
+font-family: sans-serif; font-size: 0.8em;
 }
 
-h1{
-font: normal bold 2em sans-serif;
-text-align:right;
-color: #3F7AB7;
-margin-right:3%;
-margin-top: 0.5%;
-float:right;
+#rekonq-newtabpage {
+width: 100%;
+text-align: center; /* center #navigation */
 }
 
-h2{
-font: normal bold 1.2em sans-serif;
-color: #3F7AB7;
-margin-top: 2em;
+#content {
+text-align: left;
+margin: 0 1% 2% 1%;
 }
 
-h3{
+h3 {
 border-bottom-width: 1px;
 -webkit-border-image: url(%2/category.png) 1 1 1 1  stretch stretch;
-padding: 0.2em;
-margin-top: 0.5em;
-margin-bottom: 0.5em;
-font: normal bold 1em sans-serif;
+padding: 0.2em; margin: 0.5em 0;
+font: normal bold 1em;
 }
 
-h4{
-font-size: 1em;
-margin-top: 0.5em;
-}
-
-a{
+a {
 color: #3F7AB7;
 text-decoration: none;
+-webkit-transition-property: color;
+-webkit-transition-duration: 0.5s;
+-webkit-transition-timing-function: ease;
 }
-a:hover{
+a:hover {
 color: black;
 }
 
-/* ------------------------------------------------------- */
-/* page sections */
+/* -------------------------------------------------------- */
+/* Top bar */
 
-#container {
-width: 100%;
+#top {
+margin: 20px;
 }
 
-#navigation {
+.topBar {
 display: inline-block;
-margin-top: 2%;
-margin-bottom: 2%;
-text-align: center;
 border-width: 5px;
--webkit-border-image: url(%2/bg2.png) 12 12 12 12  stretch stretch;
 }
 
-#content {
-text-align: left;
-margin: 2%;
+#navigation {
+-webkit-border-image: url(%2/bg2.png) 12 12 12 12  stretch stretch;
+max-width: 55%;
 }
 
-/* -------------------------------------------------------- */
-/* div navigations styles */
+#actions, #balance {
+margin-top: 12px;
+width: 20%;
+}
 
-.link{
-display: inline-block;
+#actions {
+float: right;
 }
 
-.link img{
-vertical-align: middle;
-margin-right: 5px;
+#balance {
+display: hidden; float: left;
+height: 16px;
 }
 
-.link a{
+.link {
+display: inline-block;
+}
+.link img, .link span {
+vertical-align: middle; display: inline-block; 
+}
+.link a, .link span {
 color: black;
-text-decoration:none;
-font: normal 1em sans-serif;
+}
+
+#actions .link {
+-webkit-transition-property: opacity;
+-webkit-transition-duration: 0.8s;
+-webkit-transition-timing-function: ease;
+opacity: 0.2;
+}
+#actions .link:hover {
+opacity: 1;
+}
+#actions .link img {
+margin-right: 3px; width: 16px;
 }
 
 .current{
 border-width: 6px;
 -webkit-border-image: url(%2/button.png) 6 stretch stretch;
 }
-
-#navigation .link:not(.current){
-margin-right: 10px;
-margin-left: 10px;
+.link:not(.current){
+margin: 0 10px;
 }
 
+/* -------------------------------------------------------- */
+/* Previews */
 
-.favorites{
+#content.favorites, #content.closedTabs {
 text-align: center;
-margin-top: -5%;
 }
 
-/* -------------------------------------------------------- */
-/* Thumbnail class */
-
 .thumbnail {
-text-align: center;
 display: inline-block;
-width:25%;
-margin-top: 7%;
-min-width:250px;
-min-height:192px;
+width: 25%; min-width: 240px;
+height: 170px;
+margin: 3% 0 3% 0;
 }
 
-.thumbnail object{
-text-align: center;
-width:228px;
-height:192px;
+.thumb-inner {
+width: 232px; /* 200 + 16*2 */
+margin: auto;
+}
+
+.preview {
+display: table-cell; vertical-align: middle;
+width: 200px; height: 150px;
+padding: 14px 16px 12px;
+background: url(%2/bg.png) no-repeat;
+-webkit-background-size: 100% 100%; 
+}
+
+.title {
+padding: 0 12px;
+}
+
+.thumbnail:hover .preview , 
+.thumbnail:hover .button img {
+opacity: 0.8;
+}
+.button img, .preview {
+-webkit-transition-property: opacity;
+-webkit-transition-duration: 0.8s;
+-webkit-transition-timing-function: ease-in-out;
+}
+
+.button img {
+display: inline-block;
+width: 16px;
+height: 16px;
+opacity: 0;
+}
+.remove {
+float: right;
+}
+.modify {
+float: left;
+}
+
+.thumbnail a:hover, .thumbnail span {
+color:#3F7AB7;
 }
 
 /* -------------------------------------------------------- */
-/* Bookmarks page*/
+/* Bookmarks page */
 
 .bookfolder{
 margin-left: 2em;
@@ -141,39 +177,68 @@ margin-bottom: 0.5em;
 }
 
 /* -------------------------------------------------------- */
+/* Downloads page */
+
+.download{
+margin: 1.5em 0;
+}
+
+.download img{
+float: left;
+margin-right: 5px;
+}
+
+/* -------------------------------------------------------- */
+/* Empty pages : in the end : need to overwrite */
+#content.empty {
+margin-top: 10%;
+text-align: center;
+}
+
+
 </style>
 </head>
 
 <body>
 
-<div id="container">
-    <div id="navigation">
+<div id="rekonq-newtabpage">
+    <div id="top">
+        <div class="topBar" id="balance"></div> <!-- This # is the same size as #actions to center #navigation -->
+        <div class="topBar" id="navigation"></div>
+        <div class="topBar" id="actions"></div>
     </div>
-    
     <div id="content">
-    
     </div>
 </div>
 
 <div id="models" style="display:none">
+    <div></div>
     <div class="link">
         <a href="">
             <img src="" />
+            <span></span>
         </a>
     </div>
     <div class="thumbnail">
-        <object type="application/image-preview" data="">
-            <param name="title" />
-            <param name="index" />
-            <param name="isFavorite" />
-        </object>
+        <div class ="thumb-inner">
+            <a>
+                <div class ="preview">
+                    <img />
+                </div>
+            </a>
+            <div class="title">
+                <a class="button modify"><img /></a>
+                <span><a></a></span>
+                <a class="button remove"><img /></a>
+            </div>
+        </div>
     </div>
     <h3></h3>
     <a></a>
-    </br>
-    <p class="bookfolder"></h3>
+    <br />
+    <img />
+    <p class="bookfolder"></p>
 </div>
 
-
 </body>
 </html>