From f7ccfe547c8e8f96eba213c65e59491f17b6e6e9 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 10 Mar 2012 11:57:29 +0100 Subject: [PATCH] CSS Gradient --- data/css/style.css | 154 +++++++++++++++++++--------- data/interfaces/default/artist.html | 8 +- 2 files changed, 111 insertions(+), 51 deletions(-) diff --git a/data/css/style.css b/data/css/style.css index a75f952d..fa80f728 100755 --- a/data/css/style.css +++ b/data/css/style.css @@ -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; } diff --git a/data/interfaces/default/artist.html b/data/interfaces/default/artist.html index e761f31a..4dcb4336 100644 --- a/data/interfaces/default/artist.html +++ b/data/interfaces/default/artist.html @@ -24,7 +24,9 @@ <%def name="body()">
-

${artist['ArtistName']}

+

+ ${artist['ArtistName']} +

%if artist['Status'] == 'Loading':

(Album information for this artist is currently being loaded)

%endif @@ -87,7 +89,9 @@
- + + +
${album['AlbumTitle']}