summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Kreuzkamp <akreuzkamp@web.de>2012-06-13 22:25:32 +0200
committerAnton Kreuzkamp <akreuzkamp@web.de>2012-06-14 14:34:56 +0200
commit90a9415a0a9a02ed7dd64aa142f9cbf0c729a612 (patch)
treec2e0a9c8d8b0a2d1d8462245a84d5e1b4026e9f3
parentFix ambiguous tab shortcuts (diff)
downloadrekonq-90a9415a0a9a02ed7dd64aa142f9cbf0c729a612.tar.xz
Apply a Plasma-like style to the new-tab-page
This commit makes previews on the new-tab-page use pure css instead of a background-image and replaces the grey background of the bookmark groups by a fancy one, looking very similiar to Plasma's Air theme. It also fixes a few minor optical dissonances on the new-tab-page. REVIEW: 105123
-rw-r--r--src/data/CMakeLists.txt1
-rw-r--r--src/data/bg.pngbin15218 -> 0 bytes
-rw-r--r--src/data/home.html65
-rw-r--r--src/newtabpage.cpp18
4 files changed, 61 insertions, 23 deletions
diff --git a/src/data/CMakeLists.txt b/src/data/CMakeLists.txt
index d20f595f..c550b261 100644
--- a/src/data/CMakeLists.txt
+++ b/src/data/CMakeLists.txt
@@ -2,7 +2,6 @@
INSTALL(
FILES
bg2.png
- bg.png
tile.gif
category.png
button.png
diff --git a/src/data/bg.png b/src/data/bg.png
deleted file mode 100644
index 5ec669ac..00000000
--- a/src/data/bg.png
+++ /dev/null
Binary files differ
diff --git a/src/data/home.html b/src/data/home.html
index 8ab7ebe9..9c06bc37 100644
--- a/src/data/home.html
+++ b/src/data/home.html
@@ -31,7 +31,7 @@ DEFAULT_PATH = rekonq default installation files path
}
body {
- background: url($DEFAULT_PATH/pics/background.jpg) repeat-y #fff;
+ background: url($DEFAULT_PATH/pics/background.jpg) repeat-y center #fff;
font-family: 'Nunito', sans-serif;
font-size: 0.9em;
border: 0;
@@ -47,19 +47,19 @@ h3 {
h4 {
padding: 0.2em;
- margin: 1em 0 0.5em;
+ margin: 0.5em 0;
font: normal bold 1em;
- border-bottom: 1px solid black;
+ border-bottom: 1px solid #aaa;
+ color:#666;
}
a {
- color: #3F7AB7;
+ color: black;
text-decoration: none;
- -webkit-transition: color 0.5s ease;
}
a:hover {
- color: black;
+ opacity:0.6;
}
input {
@@ -71,12 +71,28 @@ input {
.right {
float: right;
+ line-height:28px;
+}
+
+.right a {
+ display:block;
+}
+
+.right img {
+ float: left;
+ margin-right: 5px;
}
.left {
float: left;
}
+.preview, .bookmarkfolder {
+ background-image: -webkit-radial-gradient(top, 50% 100%, rgba(255,255,255,0.7) 0%, rgba(208,208,208,0.7) 100%);
+ border-radius: 5px;
+ box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.9), 0px 0px 2px 0px rgba(0,0,0,0.9), 0px 0px 14px 0px #555;
+}
+
/* -------------------------------------------------------- */
/* content div */
@@ -156,7 +172,7 @@ input {
}
.thumb-inner {
- width: 232px; /* 200 + 16*2 */
+ width: 216px; /* 200 + 8*2 */
margin: auto;
}
@@ -165,13 +181,12 @@ input {
vertical-align: middle;
width: 200px;
height: 150px;
- padding: 14px 16px 12px;
- background: url($DEFAULT_PATH/pics/bg.png) no-repeat;
- -webkit-background-size: 100% 100%;
+ padding: 6px 8px 4px;
}
.title {
padding: 0 12px;
+ margin-top:5px;
}
.button img {
@@ -198,23 +213,45 @@ input {
opacity: 1;
}
-.thumbnail a:hover {
+.thumb-inner a {
color:#3F7AB7;
+ -webkit-transition: opacity 0.8s ease-in-out;
+}
+
+.thumb-inner:hover a {
+ opacity:0.6;
}
/* -------------------------------------------------------- */
/* Bookmarks page */
.bookmarkfolder {
- background: #CCC;
- border-radius: 15px;
- padding: 0px 15px 15px 15px;
+ padding: 0px 15px 10px 5px;
float:left;
margin: 1em;
width: 28%;
text-align: left;
}
+.bookmark {
+ border-radius: 5px;
+ width: 100%;
+ display:block;
+ padding:3px;
+ margin:2px;
+ line-height:16px;
+}
+
+.bookmark img {
+ float: left;
+ margin-right: 5px;
+}
+
+.bookmark:hover {
+ background-color: rgba(255,255,255,0.3);
+ box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.9), 0px 0px 6px 0px #888;
+}
+
/* -------------------------------------------------------- */
/* Downloads page */
diff --git a/src/newtabpage.cpp b/src/newtabpage.cpp
index 721e0f3c..3cd241a4 100644
--- a/src/newtabpage.cpp
+++ b/src/newtabpage.cpp
@@ -956,15 +956,17 @@ void NewTabPage::createBookmarkItem(const KBookmark &bookmark, QWebElement paren
if (b.contains(QL1S("favicons")))
icon = cacheDir + bookmark.icon() + QL1S(".png");
- parent.appendInside(markup(QL1S("img")));
- parent.lastChild().setAttribute(QL1S("src") , icon);
- parent.lastChild().setAttribute(QL1S("width") , QL1S("16"));
- parent.lastChild().setAttribute(QL1S("height") , QL1S("16"));
- parent.appendInside(QL1S(" "));
parent.appendInside(markup(QL1S("a")));
- parent.lastChild().setAttribute(QL1S("href") , bookmark.url().prettyUrl());
- parent.lastChild().setPlainText(checkTitle(bookmark.fullText(), 40));
- parent.appendInside(QL1S("<br />"));
+ QWebElement bookmarkElement = parent.lastChild();
+ bookmarkElement.setAttribute(QL1S("href") , bookmark.url().prettyUrl());
+ bookmarkElement.addClass("bookmark");
+
+ bookmarkElement.appendInside(markup(QL1S("img")));
+ bookmarkElement.lastChild().setAttribute(QL1S("src") , icon);
+ bookmarkElement.lastChild().setAttribute(QL1S("width") , QL1S("16"));
+ bookmarkElement.lastChild().setAttribute(QL1S("height") , QL1S("16"));
+ bookmarkElement.appendInside(QL1S(" "));
+ bookmarkElement.appendInside( checkTitle(bookmark.fullText(), 40) );
}
}