CSS Gradient

This commit is contained in:
unknown
2012-03-10 11:57:29 +01:00
parent 4a9b8a1072
commit f7ccfe547c
2 changed files with 111 additions and 51 deletions

View File

@@ -80,6 +80,52 @@ h1, h2, h3, h4, h5, h6 { font-weight: bold; }
\\ ========================================== //
*/
/*
* Colors
* */
header
{
background-image: linear-gradient(bottom, rgb(194,0,0) 0%, rgb(230,0,19) 100%);
background-image: -o-linear-gradient(bottom, rgb(194,0,0) 0%, rgb(230,0,19) 100%);
background-image: -moz-linear-gradient(bottom, rgb(194,0,0) 0%, rgb(230,0,19) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(194,0,0) 0%, rgb(230,0,19) 100%);
background-image: -ms-linear-gradient(bottom, rgb(194,0,0) 0%, rgb(230,0,19) 100%);
border-bottom: 1px solid #000;
}
#subhead_container{
background-image: linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
background-image: -o-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
background-image: -moz-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
background-image: -ms-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
border-bottom: 1px solid #000;
}
.dataTables_filter { /*Filter search*/
background-image: linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
background-image: -o-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
background-image: -moz-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
background-image: -ms-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
border-bottom: 1px solid #000;
}
.selected:hover { /*Selected left side menu link*/
background-image: linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -o-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -moz-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -ms-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
}
/*Tablehead color*/
table.display thead tr th
{
background-image: linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
background-image: -o-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
background-image: -moz-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
background-image: -ms-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
}
/*
* Univarsal
* */
@@ -95,7 +141,6 @@ h1, h2, h3, h4, h5, h6 { font-weight: bold; }
/*
* Links Styles
* */
a:link {
color: #fff;
text-shadow: 1px 1px 2px #000;
@@ -122,22 +167,17 @@ a.blue {
#container { width: 960px; margin: auto; }
body { background-color: #313131; width: 100%; height: 100%; color: #c2c2c2; overflow: hidden;}
body { background-color: #313131; color: #c2c2c2;}
table.display thead tr th
{
background-image: linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
background-image: -o-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
background-image: -moz-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
background-image: -ms-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
{
border: 1px solid #000;
color: #000;
text-shadow: 1px 1px rgb(100,100,100);
line-height: 100%;
}
}
h1 { font-size: 14px; padding: 10px 0px 10px 10px; color: #FFF; text-decoration: none; background-color: #212121;}
h2 { font-size: 13px; color: #FFF; text-decoration: none;}
@@ -152,17 +192,11 @@ header
{
width: 100%;
height: 65px;
background: #313131;
border-bottom: 1px solid #000;
position: fixed;
top: 0px;
left: 0px;
z-index: 998;
background-image: linear-gradient(bottom, rgb(101,0,91) 0%, rgb(171,0,148) 100%);
background-image: -o-linear-gradient(bottom, rgb(101,0,91) 0%, rgb(171,0,148) 100%);
background-image: -moz-linear-gradient(bottom, rgb(101,0,91) 0%, rgb(171,0,148) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(101,0,91) 0%, rgb(171,0,148) 100%);
background-image: -ms-linear-gradient(bottom, rgb(101,0,91) 0%, rgb(171,0,148) 100%);
z-index: 998;
}
div#updatebar { box-shadow: 5px 5px 3px #000; text-align: center; width: 300px; min-height: 60px; position: fixed; bottom: 20px; right: 10px; z-index: 9999; padding: 20px; margin: auto; background-color: rgba(0,0,0,0.8); }
@@ -175,51 +209,67 @@ display: block;
width: 100%;
background: #292929;
}
ul#nav li a { line-height: 25px; padding-left: 10px; font-size: 12px; color: #FFF; text-decoration: none; width: 100%; display: block; }
ul#nav li a:hover { color: #fff; }
.selected {
background-image: linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -o-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -moz-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -ms-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
}
.selected:hover {
background-image: linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -o-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -moz-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -ms-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
ul#nav li.selected
{
background-image: url(../images/nav-link-selected.png);
border-bottom: 1px solid #000;
border-top: 1px solid #000;
font-weight: bold;
}
ul#nav li a { line-height: 25px; padding-left: 10px; font-size: 12px; color: #FFF; text-decoration: none; width: 100%; display: block; }
ul#nav li a:hover { color: #fff; }
/*Subhead menu*/
div#subhead_container
{
border-bottom: 1px solid #000;
height: 40px;
width:100%;
position: fixed;
top: 65px;
left: 200px;
background-image: linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -o-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -moz-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
background-image: -ms-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
list-style-type: none; z-index: 200; overflow: hidden;
z-index: 200;
overflow: hidden;
}
ul#subhead_menu {
margin-top: 5px;
ul#subhead_menu
{
list-style: none;
}
ul#subhead_menu li { width: 100%; height: 100%; display: inline; }
ul#subhead_menu li a { padding: 0px 15px 0px 15px; line-height: 40px; vertical-align: middle; color: white; font-size: 16px; text-decoration: none; }
ul#subhead_menu li a:hover { width: 100%; height: 100%; background-color: #grey; }
ul#subhead_menu li
{
height: 40px;
padding: 0px 6px 0px 6px;
line-height: 40px;
display: inline-block;
}
/*
* Searchbar Styles
* */
ul#subhead_menu li:hover
{
padding: 0px 5px 0px 5px;
background: url(../images/nav-link-selected.png);
border-left: 1px solid #000;
border-right: 1px solid #000;
}
ul#subhead_menu li a
{
display: inline-block;
line-height: 40px;
color: white;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
ul#subhead_menu li a:hover
{
font-weight: bold;
}
/* Searchbar Styles */
div#searchbar
{
margin: 20px 30px auto auto;
@@ -235,22 +285,28 @@ div#searchbar
div#searchbar input[type=text] { background-color: #fff; border-radius: 20px 0px 0px 20px; padding: 2px 10px 2px 10px; border: 0; border-right: 1px solid #909090 }
div#searchbar input[type=submit] { background-color: #fff; border-radius: 0px 20px 20px 0px; padding: 2px 10px 2px 10px; border: 0; border-left: 1px solid #909090 }
div#searchbar input[type=submit]:hover { background-color: #ac0000; color: #FFF; text-shadow: 1px 1px 3px #000; }
div#searchbar select { background-color: #fff; padding: 2px 10px 2px 10px; border: 0; }
div#searchbar select
{
background-color: #fff;
padding: 2px 10px 2px 10px;
border: 0;
}
div#main { position: absolute; top: 90px; left: 200px; width: 100%; min-width: 200px; min-height: 300px; margin: 20px; }
/*Filter position*/
.dataTables_filter
{
color: #fff;
width: 200px;
padding-left: 10px; line-height: 40px;
position: fixed;
top: 60px;
top: 65px;
z-index: 2;
left: 200px;
background: #000 url(../images/subhead.png);
height: 40px; width: 100%;
}
.table_wrapper { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; width: 100%; background-color: #313131; position: relative; min-height: 50px; clear: both; _height: 302px; zoom: 1; }
.manage_wrapper { width: 88%; margin: 20px auto 0 auto; padding: 25px; min-height: 150px; clear: both; _height: 302px; zoom: 1; }
.table_wrapper_left { background-color: #313131; float: left; width: 40%; min-height: 100px; margin-top: 25px; margin-right: auto; -moz-border-radius: 5px; border-radius: 5px; }