From 5849239f5e4ce8634d7c573cdc94ae82cf4dec7f Mon Sep 17 00:00:00 2001 From: Konrad Mohrfeldt Date: Wed, 12 Oct 2011 21:13:43 +0200 Subject: [PATCH] updated styles for top bar --- k4ever/media/css/style.css | 210 +++++++++++++++++++++---------------- 1 file changed, 121 insertions(+), 89 deletions(-) diff --git a/k4ever/media/css/style.css b/k4ever/media/css/style.css index 18aaad9..18b0815 100644 --- a/k4ever/media/css/style.css +++ b/k4ever/media/css/style.css @@ -1,7 +1,8 @@ -/* THOSE ARE JUST TEMPORARY, I CHANGE THEM LATER INTO LOCAL RESOURCES */ +/* THOSE ARE JUST TEMPORARYLY, I CHANGE THEM LATER INTO LOCAL RESOURCES */ +/* OR DOES SHE?! */ -@import url(http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic&subset=latin); -@import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin); +@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700); +@import url(http://fonts.googleapis.com/css?family=Istok+Web:400,700); /* jQuery Theme */ /* @import url(jquery-ui-1.8.10.custom.css); */ @@ -18,90 +19,93 @@ b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { - background: transparent; - border: 0; - margin: 0; - padding: 0; - vertical-align: baseline; + background: transparent; + border: 0; + margin: 0; + padding: 0; + vertical-align: baseline; } -/* added by seba because nobody else did this. */ .content { margin: 5px; } -/* end of addition */ body { - line-height: 1; + line-height: 1; } h1, h2, h3, h4, h5, h6 { - clear: both; - font-weight: normal; + clear: both; + font-weight: bold; + font-family: "Istok Web", inherit; } ol, ul, li { - list-style: none; + list-style: none; } blockquote { - quotes: none; + quotes: none; } blockquote:before, blockquote:after { - content: ''; - content: none; + content: ''; + content: none; } del { - text-decoration: line-through; + text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } a img { - border: none; + border: none; } /* GENERAL SETTINGS */ body { - font: 11px "lucida grande", tahoma, verdana, arial, sans-serif; -} - -h1, h2, h3, h4, h5, h6 { - font-family: 'Droid Serif', Garamond, serif; + font: 11px "Open Sans", Tahoma, Verdana, Arial, sans-serif; } p { margin-bottom: 7px; } input { - padding: 2px 5px; - border: 1px solid #E5E5E5; - background: none repeat scroll 0 0 #FBFBFB; + padding: 2px 5px; + border: 1px solid #E5E5E5; + background: none repeat scroll 0 0 #FBFBFB; } input[type=text]:focus, input[type=search]:focus, input[type=password]:focus { - background: #FAFFBD; + background: #FAFFBD; } /* HEADER */ #header { - margin-bottom: 20px; + margin-bottom: 20px; + background: #333; + background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#111111)); + background-image: -webkit-linear-gradient(top, #666666, #111111); + background-image: -moz-linear-gradient(top, #666666, #111111); + background-image: -ms-linear-gradient(top, #666666, #111111); + background-image: -o-linear-gradient(top, #666666, #111111); + background-image: linear-gradient(top, #666666, #111111); + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#111111'); } #header > div { - padding: 5px 10px; + padding: 5px 10px; } #header .search { - background: url("img/logo.png") 10px center no-repeat #323232; - height: 40px; + background: url("img/logo.png") 10px center no-repeat transparent; + height: 40px; } #header .search input[type='search'] { @@ -110,73 +114,99 @@ input[type=text]:focus, input[type=search]:focus, input[type=password]:focus { } #header .search form { - float: right; - line-height: 40px; + float: right; + line-height: 40px; } #header .base_nav { - background: url("img/base_nav_bg.gif") repeat-x #339DD1; - text-transform: uppercase; - height: 50px; - color: white; + background: #3398cc; + background-image: -webkit-gradient(linear, left top, left bottom, from(#32bbef), to(#3398cc)); + background-image: -webkit-linear-gradient(top, #32bbef, #3398cc); + background-image: -moz-linear-gradient(top, #32bbef, #3398cc); + background-image: -ms-linear-gradient(top, #32bbef, #3398cc); + background-image: -o-linear-gradient(top, #32bbef, #3398cc); + background-image: linear-gradient(top, #32bbef, #3398cc); + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#32bbef', EndColorStr='#3398cc'); + text-transform: uppercase; + color: white; + border-bottom: 2px solid black; + padding-top: 10px; + /*border-top: 2px solid black;*/ + -webkit-box-shadow: 0 3px 8px 0 black inset; } #header .base_nav h1 { - color: white; - float: left; - margin-right: 20px; - line-height: 50px; + color: white; + display: inline-block; + margin: 0 20px 0 0; + padding: 5px 0 0 0; + vertical-align: middle; + line-height: 1; + text-shadow: 0 -1px #777; } #header .base_nav ul { - float: left; + display: inline-block; + vertical-align: middle; } #header .base_nav ul li { - display: inline-block; - text-transform: uppercase; - line-height: 36px; + display: inline-block; + font-weight: bold; + margin-right: 10px; } #header .base_nav a { - display: block; - margin-top: 7px; - padding: 0 10px; - text-decoration: none; - color: white; + text-align: center; + //background: #3398cc; + display: block; + vertical-align: middle; + text-decoration: none; + color: inherit; + padding: 10px 15px; + margin: 3px 0; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + border-radius: 20px; + -webkit-transition: background .2s; } #header .base_nav a:hover { - background: white; - color: #339DD1; + -webkit-transition: background .2s; + background: white; + color: #339DD1; + -webkit-box-shadow: 0 1px 0 0 #777 inset; + -moz-box-shadow: 0 1px 0 0 #777 inset; + box-shadow: 0 1px 0 0 #777 inset; } span.balance { - float: right; - line-height: 50px; + float:right; + padding: 10px 0; + margin: 3px 0; } /* LOGIN FORM */ form.login { - width: 300px; - margin: 60px auto; - /*-moz-box-shadow: 3px 3px 6px #333; - -webkit-box-shadow: 3px 3px 6px #333;*/ - box-shadow: 1px 1px 2px #eaeaea; - border: 1px solid #E5E5E5; - padding: 20px; + width: 300px; + margin: 60px auto; + -moz-box-shadow: 1px 1px 2px #eaeaea; + -webkit-box-shadow: 1px 1px 2px #eaeaea; + box-shadow: 1px 1px 2px #eaeaea; + border: 1px solid #E5E5E5; + padding: 20px; } form.login label { - display: block; - margin-top: 10px; - margin-bottom: 3px; + display: block; + margin-top: 10px; + margin-bottom: 3px; } form.login input { - font-size: 24px; - width: 97%; + font-size: 24px; + width: 97%; } form.login input[type=submit] { @@ -214,37 +244,39 @@ form.login input[type=submit]:active { /* NOTIFICATIONS */ div.error, div.notice, div.success { - border-top: 1px solid #DDD; - padding: 0.6em 0.8em; - position: fixed; - bottom: 0; - width: 100%; + border-top: 1px solid #DDD; + padding: 0.6em 0.8em; + position: fixed; + bottom: 0; + width: 100%; } div.error h2, div.notice h2, div.success h2 { - font-size: 100%; - font-weight: bold; - margin-bottom: 10px; + font-size: 100%; + font-weight: bold; + margin-bottom: 10px; } div.error { - background: #FBE3E4; - color: #8A1F11; - border-color: #FBC2C4; + background: #FBE3E4; + color: #8A1F11; + border-color: #FBC2C4; } + div.error a { color:#8A1F11; } div.notice { - background: #FFF6BF; - color: #514721; - border-color: #FFD324; + background: #FFF6BF; + color: #514721; + border-color: #FFD324; } + div.notice a { color:#514721; } div.success{ - background: #E6EFC2; - color: #264409; - border-color: #C6D880; + background: #E6EFC2; + color: #264409; + border-color: #C6D880; } div.success a { color:#264409; } @@ -384,11 +416,11 @@ table.details td { } .content a:hover { - background: #3398CC; - color: white; + background: #3398CC; + color: white; } .content h1 { - font: 20px "lucida grande", tahoma, verdana, arial, sans-serif; + font-size: 20px; text-align: center; }