updated styles for top bar

13 years ago · 5849239f5e
parent 9729e675ff
commit 5849239f5e
1 changed files with 121 additions and 89 deletions
--- 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;
 }