<!DOCTYPE html> <html> <!-- NOTE This page is the "skeleton" of rekonq pages. To let it work you need to set also some variables about (prepend a $ to actually use them): DEFAULT_PATH = rekonq default installation files path ... --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> /* -------------------------------------------------------- */ /* generic styles */ @font-face { font-family: 'Nunito'; src: url($DEFAULT_PATH/fonts/Nunito-Regular.ttf); font-weight: normal; font-style: normal; } html { height:100%; } body { background: url($DEFAULT_PATH/pics/background.png) repeat-y center #fff; font-family: 'Nunito', sans-serif; font-size: 0.9em; border: 0; padding: 0; margin: 0; } h3 { padding: 0.2em; margin: 1.5em 0 0.5em; font: normal bold 1em; } h4 { padding: 0.2em; margin: 0.5em 0; font: normal bold 1em; border-bottom: 1px solid #aaa; color:#666; } a { color: black; text-decoration: none; } a:hover { opacity:0.6; } input { min-width: 180px; font-family: 'Nunito', sans-serif; font-size: 0.8em; } .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 */ #rekonq-newtabpage { width: 90%; text-align: center; /* center #navigation */ margin: 0 5%; } #navigation { display: table; margin-left: auto; margin-right: auto; } #actions { display: table; margin: 20px auto; width: 100%; } #content { text-align: left; margin: 0; } /* -------------------------------------------------------- */ /* Top bar */ .link { display: table-cell; /*display:inline-block;*/ -webkit-transition: opacity 0.5s ease; } .link:not(.current):hover { opacity: 0.6; } .link img, .link span { vertical-align: middle; display: inline-block; margin:0 10px; } .link a, .link span { color: black; } #actions .link img { margin-right: 3px; width: 16px; } .current { border-width: 6px; -webkit-border-image: url($DEFAULT_PATH/pics/button.png) 6 stretch stretch; } .link:not(.current){ margin: 0 10px; padding:3px; } /* -------------------------------------------------------- */ /* Previews */ #content.favorites, #content.closedTabs, #content.bookmarks { text-align: center; } .thumbnail { display: inline-block; width: 25%; min-width: 240px; height: 170px; margin: 30px 0; } .thumb-inner { width: 216px; /* 200 + 8*2 */ margin: auto; } .preview { display: table-cell; vertical-align: middle; width: 200px; height: 150px; padding: 6px 8px 4px; } .title { padding: 0 12px; margin-top:5px; } .button img { display: inline-block; width: 16px; height: 16px; opacity: 0; } .button img, .preview { -webkit-transition: opacity 0.8s ease-in-out; } .thumb-inner:hover .preview { opacity: 0.6; } .thumb-inner:hover .button img { opacity: 0.4; -webkit-transition: opacity 0.8s ease-out; } .thumb-inner .button img:hover { opacity: 1; } .thumb-inner a { color:#3F7AB7; -webkit-transition: opacity 0.8s ease-in-out; } .thumb-inner:hover a { opacity:0.6; } /* -------------------------------------------------------- */ /* Bookmarks page */ .bookmarkfolder { 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 */ .download { margin: 2em 0; } .download img { float: left; margin-right: 5px; } .download a.greylink { color:grey; } /* -------------------------------------------------------- */ /* History page */ .greybox { background: #CCC; padding: 5px 10px; } .historyfolder { margin-left: 4em; margin-bottom: 1em; } /* -------------------------------------------------------- */ /* Empty pages : in the end : need to overwrite */ #content.empty { margin-top: 10%; text-align: center; } </style> </head> <body> <div id="rekonq-newtabpage"> <div id="navigation"></div> <div id="actions"></div> <div id="content"></div> </div> <!-- NOTE: These models are NOT directly shown inside the page. They are just used inside NewTabPage::markup function to ease elements creation, cloning one of these. --> <div id="models" style="display:none"> <form></form> <input></input> <div></div> <div class="link"> <a href=""> <img src="" /> <span></span> </a> </div> <div class="thumbnail"> <div class ="thumb-inner"> <a> <div class ="preview"> <img /> </div> </a> <div class="title"> <a class="button left"><img /></a> <span><a></a></span> <a class="button right"><img /></a> </div> </div> </div> <h3></h3> <h4></h4> <a></a> <br /> <img /> <div class="historyfolder"></div> <div class="bookmarkfolder"></div> </div> </body> </html>