From 8343d45f3dfd631a3f5ac4213918f285930eb446 Mon Sep 17 00:00:00 2001 From: matgic78 Date: Thu, 17 Dec 2009 18:22:23 +0100 Subject: Re-implemented previews in homepage without using plugins. Not finished yet : Little things that change: -nice buttons appearing on hover -transitions on hover TODO: -when a preview is empty or when loading, it is very ugly -for now there's no way to choose the page you want to preview -port "closed Tabs" to this new architecture -totally remove PreviewImage classes -eventually, specific contextmenu for previews --- src/data/home.html | 76 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 63 insertions(+), 13 deletions(-) (limited to 'src/data/home.html') diff --git a/src/data/home.html b/src/data/home.html index 9d8f390f..8db3d894 100644 --- a/src/data/home.html +++ b/src/data/home.html @@ -54,6 +54,10 @@ margin-top: 0.5em; a{ color: #3F7AB7; text-decoration: none; +-webkit-transition-property: color; +-webkit-transition-duration: 0.5s; +-webkit-transition-timing-function: ease; + } a:hover{ color: black; @@ -118,18 +122,61 @@ 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%; margin-top: 7%; +min-width:250px; min-height:192px; +} + +.preview { +display: block; +width: 200px; +height: 150px; +padding: 14px 16px; +background: url(%2/bg.png) no-repeat; +-webkit-background-size: 100% 100%; +-webkit-background-clip: padding; +} +.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; } -.thumbnail object{ +.remove { + float: right; +} +.modify { + float: left; +} + +.title { +display: block; +width: 200px; +height: 15px; +padding: 0 14px; text-align: center; -width:228px; -height:192px; +} + +.thumbnail a { +text-align:center; +} +.thumbnail a:hover { +color:#3F7AB7; +} + +.thumbnail span { + } /* -------------------------------------------------------- */ @@ -162,11 +209,14 @@ margin-bottom: 0.5em;
- - - - - + + +
+ + + +
+

-- cgit v1.2.1