gronod/headphones
1
0
Fork 0
mirror of https://github.com/rembo10/headphones.git synced 2026-07-19 23:44:01 +01:00
Code Issues Packages Projects Releases Wiki Activity

The layout has changed a little bit, to mini-mize the "white-space" in the header and so fort.

Browse Source
This commit is contained in:
Brinken
2012-03-18 01:46:51 +01:00
parent b85f5c0227
commit ba91eecad0
9 changed files with 250 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/css/data_table.css
+7 -10
View File
@@ -28,24 +28,21 @@
} }
.dataTables_length { .dataTables_length {
width: 50%; /*
float: left; * Look in styles.css
margin-bottom: 10px; * */
color: #fff;
} }
.dataTables_filter { .dataTables_filter {
/* /*
* Look in style.css "#artist_table_filter" * Look in style.css
* */ * */
} }
.dataTables_info { .dataTables_info {
width: 50%; /*
float: left; * Look in style.css
margin-top: 15px; * */
font-weight: bold;
clear: both;
} }
.dataTables_paginate { .dataTables_paginate {
data/css/jquery.jscrollpane.css
+4 -3
View File
@@ -55,22 +55,23 @@
.jspTrack .jspTrack
{ {
background: rgb(50,50,50); background: rgb(10,10,10);
position: relative; position: relative;
} }
.jspDrag .jspDrag
{ {
background: rgb(30,30,30); background: rgb(90,0,10);
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
cursor: pointer; cursor: pointer;
border-radius: 20px; border-radius: 20px;
} }
.jspDrag:active,
.jspDrag:hover .jspDrag:hover
{ {
background: rgb(15,15,15); background: rgb(160,0,10);
} }
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspTrack,
data/css/style.css
+211 -126
View File
@@ -83,45 +83,74 @@ h1, h2, h3, h4, h5, h6 { font-weight: bold; }
* */ * */
header header
{ {
background-image: linear-gradient(bottom, rgb(194,0,0) 0%, rgb(230,0,19) 100%); 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: -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: -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: -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%); background-image: -ms-linear-gradient(bottom, rgb(194,0,0) 0%, rgb(230,0,19) 100%);
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
#subhead_container{ #subhead_container{
background-image: linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%); background-image: linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
background-image: -o-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%); background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
background-image: -moz-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%); background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
background-image: -ms-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%); background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
.dataTables_filter { /*Filter search*/ footer {
background-image: linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%); 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: -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: -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: -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%); background-image: -ms-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
border-bottom: 1px solid #000; border-top: 1px solid #000;
} }
.selected:hover { /*Selected left side menu link*/ .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: 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: -o-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: -moz-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%); 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%);
}
.tooltip
{
background-image: linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
background-image: -o-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
background-image: -moz-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
background-image: -ms-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
}
/*Update popup*/
div#updatebar
{
background-image: linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%);
background-image: -o-linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%);
background-image: -moz-linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%);
} }
/*Tablehead color*/ /*Tablehead color*/
table.display thead tr th table.display thead tr th
{ {
background-image: linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%); 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: -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: -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: -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%); background-image: -ms-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
}
table thead.fixed
{
position: fixed;
width: 100%;
}
table thead.fixed tr
{
display: block;
width: 100%;
} }
/* /*
@@ -160,7 +189,7 @@ a.blue {
color: blue; color: blue;
} }
#container { width: 960px; margin: auto; } #container { width: 100%; margin: auto; }
body { background-color: #313131; color: rgb(190,190,190); text-shadow: 1px 1px 3px #000; overflow: hidden; overflow-y: hidden; overflow-x: hidden; } body { background-color: #313131; color: rgb(190,190,190); text-shadow: 1px 1px 3px #000; overflow: hidden; overflow-y: hidden; overflow-x: hidden; }
@@ -185,28 +214,36 @@ p.indented { margin-top: 20px; margin-bottom: 20px; font-size: 12px; }
p.center { text-align: center; font-size: 18px; } p.center { text-align: center; font-size: 18px; }
.smalltext2 { font-size: 12px; margin-left: 45px; } .smalltext2 { font-size: 12px; margin-left: 45px; }
/*Main Header*/
header header
{ {
position: fixed;
left: 0px;
top: 0px;
z-index: 999;
width: 100%; width: 100%;
height: 65px; height: 35px;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
position: fixed;
top: 0px;
left: 0px;
z-index: 998;
} }
div#logo
{
padding-left: 10px;
height: 30px;
width: 30px;
}
/*Update box*/
div.btnClose div.btnClose
{ {
overflow: hidden; overflow: hidden;
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-border-radius: 0px 0px 0px 5px; -webkit-border-radius: 0px 0px 0px 5px; border-radius: 0px 0px 0px 5px;
background-color: rgb(60,0,5); background-color: rgb(60,0,5);
cursor: pointer; cursor: pointer;
width: 18px; width: 20px;
height: 18px; height: 20px;
position: relative; position: relative;
top: -29px; top: -20px;
right: -29px; right: -20px;
float: right; float: right;
border: 1px solid #000; border: 1px solid #000;
box-shadow: 0px 0px 3px #000; box-shadow: 0px 0px 3px #000;
@@ -217,17 +254,13 @@ div.btnClose
div#updatebar div#updatebar
{ {
background-image: linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%); border-top: 1px solid #000;
background-image: -o-linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%); text-align: center;
background-image: -moz-linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%); width: 160px;
background-image: -webkit-linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%);
box-shadow: 0px 0px 6px #000; text-align: center;
width: 300px;
min-height: 60px; min-height: 60px;
position: fixed; position: fixed;
bottom: 25px; bottom: 31px;
right: 25px; left: 0px;
z-index: 9999; z-index: 9999;
padding: 20px; padding: 20px;
} }
@@ -247,10 +280,16 @@ a.update-link
text-shadow: 1px 1px 0px rgb(0,173,7); text-shadow: 1px 1px 0px rgb(0,173,7);
color: #000; color: #000;
} }
div#logo { padding-left: 10px; }
ul#nav { position: fixed; top: 60px; left: 0px; list-style-type: none; height: 100%; width: 200px; padding: 0; margin: 0; background-color: #343434; border-right: 1px solid #000; padding-top: 30px; z-index: 300;} /*Main Menu*/
ul#nav {
position: fixed;
top: 35px;
left: 0px;
z-index: 998;
list-style-type: none;
height: 100%;
width: 200px; padding: 0; margin: 0; background-color: #343434; border-right: 1px solid #000; padding-top: 30px; z-index: 300;}
ul#nav li { display: block; width: 100%; padding: 0; margin: 0;} ul#nav li { display: block; width: 100%; padding: 0; margin: 0;}
ul#nav li:hover { ul#nav li:hover {
display: block; display: block;
@@ -285,17 +324,16 @@ ul#nav li a:hover { color: #fff; }
/*Subhead menu*/ /*Subhead menu*/
div#subhead_container div#subhead_container
{ {
height: 40px;
width:100%;
position: fixed; position: fixed;
top: 65px; top: 0px;
left: 200px; left: 90px;
z-index: 200; height: 35px;
overflow: hidden; z-index: 1000;
} }
ul#subhead_menu ul#subhead_menu
{ {
height: 35px;
list-style: none; list-style: none;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
@@ -304,7 +342,7 @@ margin: 0px;
ul#subhead_menu li ul#subhead_menu li
{ {
float: left; float: left;
line-height: 40px; line-height: 35px;
border-left: 1px solid rgb(45,45,45); border-left: 1px solid rgb(45,45,45);
border-right: 1px solid rgb(15,15,15); border-right: 1px solid rgb(15,15,15);
display: inline; display: inline;
@@ -313,11 +351,11 @@ text-align: center;
ul#subhead_menu li:hover ul#subhead_menu li:hover
{ {
background-image: linear-gradient(bottom, rgb(70,0,10) 0%, rgb(60,0,20) 100%); background-image: linear-gradient(bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%);
background-image: -o-linear-gradient(bottom, rgb(70,0,10) 0%, rgb(60,0,20) 100%); background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%);
background-image: -moz-linear-gradient(bottom, rgb(70,0,10) 0%, rgb(60,0,20) 100%); background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(70,0,10) 0%, rgb(60,0,20) 100%); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%);
background-image: -ms-linear-gradient(bottom, rgb(70,0,10) 0%, rgb(60,0,20) 100%); background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%);
border-right: 1px solid rgb(45,45,45); border-right: 1px solid rgb(45,45,45);
border-left: 1px solid rgb(15,15,15); border-left: 1px solid rgb(15,15,15);
} }
@@ -327,26 +365,26 @@ ul#subhead_menu li a
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
display: block; display: block;
line-height: 40px; line-height: 35px;
color: white; color: rgb(0,0,0);
text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
} }
ul#subhead_menu li a:hover ul#subhead_menu li a:hover
{ {
color: rgb(255,255,255);
font-weight: bold; font-weight: bold;
} }
/* Searchbar Styles */ /* Searchbar Styles */
div#searchbar div#searchbar
{ {
margin: 20px 30px auto auto; position: fixed;
position: fixed; top: 5px;
top: 0px; right: 20px;
right: 0px;
z-index: 1000;
border-radius: 20px; border-radius: 20px;
color: #fff; color: #fff;
background-color: rgb(70,0,10); background-color: rgb(70,0,10);
@@ -390,10 +428,9 @@ color: rgb(170,0,10); }
div#main div#main
{ {
position: absolute; position: fixed;
top: 105px; top: 35px;
left: 200px; left: 200px;
padding: 5px;
min-width: 200px; min-width: 200px;
min-height: 300px; min-height: 300px;
height: 100%; height: 100%;
@@ -403,19 +440,18 @@ div#main
/*Filter position*/ /*Filter position*/
.dataTables_filter .dataTables_filter
{ {
width: 200px; position: fixed;
padding-left: 10px; bottom: 0px;
position: fixed; left: 200px;
top: 65px; z-index: 901;
z-index: 2; padding-left: 10px;
left: 200px; height: 30px;
height: 40px; line-height: 30px;
width: 100%; width: 250px;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
color: rgb(20,0,5); color: rgb(20,0,5);
text-shadow: 1px 1px rgb(123,0,10); text-shadow: 1px 1px rgb(123,0,10);
line-height: 40px;
} }
/*Filter text input styles*/ /*Filter text input styles*/
@@ -426,15 +462,40 @@ line-height: 40px;
border-radius: 20px; border-radius: 20px;
-webkit-border-radius: 20px; -webkit-border-radius: 20px;
-moz-border-radius: 20px; -moz-border-radius: 20px;
height: 12px;
padding-left: 10px; padding-left: 10px;
background-color: rgb(30,0,10); background-color: rgb(30,0,10);
border: 1px solid #000; border: 1px solid #000;
box-shadow: 1px 1px 2px rgb(123,0,10); box-shadow: 1px 1px 2px rgb(123,0,10);
} }
.dataTables_length
{
position: fixed;
bottom: 0px;
left: 400px;
z-index: 901;
padding-left: 10px;
height: 30px;
line-height: 30px;
width: 350px;
font-size: 12px;
font-weight: bold;
color: rgb(20,0,5);
text-shadow: 1px 1px rgb(123,0,10);
}
.dataTables_info .dataTables_info
{ {
font-weight: normal; width: 200px;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 990;
text-align: left;
line-height: 30px;
font-weight: bold;
color: rgb(190,190,190);
} }
.btnStatus .btnStatus
@@ -507,20 +568,20 @@ text-shadow: 1px 1px 0px rgb(173,61,0);
} }
.btnNew .btnNew
{ {
background-image: linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%); background-image: linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%);
background-image: -o-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%); background-image: -o-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%);
background-image: -moz-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%); background-image: -moz-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%); background-image: -webkit-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%); background-image: -ms-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%);
text-shadow: 1px 1px 0px rgb(87,170,0); text-shadow: 1px 1px 0px rgb(87,170,0);
} }
.btnRetry { .btnRetry {
background-image: linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%); background-image: linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%);
background-image: -o-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%); background-image: -o-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%);
background-image: -moz-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%); background-image: -moz-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%); background-image: -webkit-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%); background-image: -ms-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%);
text-shadow: 1px 1px 0px rgb(87,160,0); text-shadow: 1px 1px 0px rgb(87,160,0);
} }
.btnBack .btnBack
{ {
@@ -530,7 +591,18 @@ text-shadow: 1px 1px 0px rgb(87,160,0);
} }
.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; } .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;
}
/*All inputs in the main content */ /*All inputs in the main content */
.checkbox, .checkbox,
@@ -551,17 +623,30 @@ text-shadow: 1px 1px 0px rgb(87,160,0);
.select{ .select{
position: absolute; position: absolute;
width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */ height: 18px;
height: 21px; width: 120px;
padding: 0 24px 0 8px; padding: 0 10px 0 8px;
color: #000; color: #000;
font-weight: bold; font-weight: bold;
text-shadow: 1px 1px 0px rgb(170,170,170); text-shadow: 1px 1px 0px rgb(170,170,170);
font-size: 12px/21px; font-size: 12px/21px;
line-height: 19px; line-height: 18px;
background: url(../images/select.png) no-repeat; border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 1px 1px 0px rgb(90,90,90);
border: 1px solid #000;
background-image: url(../images/select.png) right center;
background-image: linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
background-image: -o-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
background-image: -moz-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
background-image: -ms-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
background-image: linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
background-position: right;
background-repeat: no-repeat;
overflow: hidden; overflow: hidden;
background-color: #272727; background-color: rgb(160,160,160);
} }
/*Tooltip*/ /*Tooltip*/
@@ -581,12 +666,7 @@ text-shadow: 1px 1px 0px rgb(87,160,0);
text-align: center; text-align: center;
line-height: 20px; line-height: 20px;
cursor: help; cursor: help;
background-image: linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%); text-shadow: 1px 1px 0px rgba(255,255,255,0.2);
background-image: -o-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
background-image: -moz-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
background-image: -ms-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
text-shadow: 1px 1px 0px rgb(180,180,180);
} }
.tooltip:after { .tooltip:after {
content: "!"; content: "!";
@@ -655,16 +735,14 @@ input[type="text"]
.configtable td { width: 350px; padding: 10px; } .configtable td { width: 350px; padding: 10px; }
.configtable td#middle { vertical-align: middle; } .configtable td#middle { vertical-align: middle; }
#artist_table_wrapper { }
/* Artist Table Style*/ /* Artist Table Style*/
table#artist_table { width: 100%; padding: 20px; } table#artist_table { width: 100%;}
table#artist_table th#select { text-align: left; } table#artist_table th#select { text-align: left; }
table#artist_table th#name { text-align: left; min-width: 32%; } table#artist_table th#name { text-align: left; min-width: 150px; }
table#artist_table th#status { text-align: left; min-width: 8%; } table#artist_table th#status { text-align: left; min-width: 40px; }
table#artist_table th#album { text-align: left; min-width: 49%; } table#artist_table th#album { text-align: left; min-width: 100px; }
table#artist_table th#have { text-align: center; width: 11%; } table#artist_table th#have { text-align: center; min-width: 50px; }
table#artist_table td#name { vertical-align: middle; text-align: left; } table#artist_table td#name { vertical-align: middle; text-align: left; }
table#artist_table td#status { vertical-align: middle; text-align: left; } table#artist_table td#status { vertical-align: middle; text-align: left; }
@@ -707,10 +785,10 @@ table#album_table td#albumart { vertical-align: middle; text-align: left; }
#album-describtion { float: left; width: 400px; min-height: 200px; margin-left: 20px; } #album-describtion { float: left; width: 400px; min-height: 200px; margin-left: 20px; }
table#album_table td#albumname { vertical-align: middle; text-align: left; } table#album_table td#albumname { vertical-align: middle; text-align: left; }
table#album_table td#reldate { vertical-align: middle; text-align: left; } table#album_table td#reldate { vertical-align: middle; text-align: left; }
table#album_table td#status { vertical-align: middle; text-align: left; font-size: 13px; } table#album_table td#status { vertical-align: middle; text-align: left; }
table#album_table td#type { vertical-align: middle; text-align: left; } table#album_table td#type { vertical-align: middle; text-align: left; }
table#album_table td#have { vertical-align: middle; } table#album_table td#have { vertical-align: middle; }
table#album_table td#bitrate { vertical-align: middle; text-align: left; font-size: 13px; } table#album_table td#bitrate { vertical-align: middle; text-align: left; }
div#albumheader { margin: 20px 0px 40px 0px; min-height: 200px; } div#albumheader { margin: 20px 0px 40px 0px; min-height: 200px; }
@@ -730,7 +808,6 @@ table#track_table td#name { vertical-align: middle; text-align: left; font-size:
table#track_table td#duration { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; } table#track_table td#duration { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; }
table#track_table td#location { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; } table#track_table td#location { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; }
table#track_table td#bitrate { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; } table#track_table td#bitrate { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; }
div#history_table_wrapper { margin-top: 20px; }
table#history_table { width: 100%; font-size: 12px; } table#history_table { width: 100%; font-size: 12px; }
/* History table*/ /* History table*/
@@ -836,7 +913,15 @@ div.progress-container div
} }
footer { margin: 20px auto 20px auto; } footer
{
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 30px;
z-index: 900; /* Everything above*/
}
div#version { text-align: center; font-weight: bold; } div#version { text-align: center; font-weight: bold; }
div#donate { text-align: center; margin: 20px auto 20px auto; } div#donate { text-align: center; margin: 20px auto 20px auto; }
data/images/select.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

data/interfaces/default/artist.html
+4 -4
View File
@@ -33,18 +33,18 @@
</div> </div>
<form action="markAlbums" method="get"><input type="hidden" name="ArtistID" value=${artist['ArtistID']}> <form action="markAlbums" method="get"><input type="hidden" name="ArtistID" value=${artist['ArtistID']}>
<p class="indented">Mark selected albums as <p class="indented">Mark selected albums as
<select name="action"> <select class="styled" name="action">
<option value="Wanted">Wanted</option> <option value="Wanted">Wanted</option>
<option value="WantedNew">Wanted (new only)</option> <option value="WantedNew">Wanted (new only)</option>
<option value="Skipped">Skipped</option> <option value="Skipped">Skipped</option>
<option value="Downloaded">Downloaded</option> <option value="Downloaded">Downloaded</option>
</select> </select>
<input type="submit" value="Go"> <input type="submit" value="GO">
</p> </p>
<table class="display" id="album_table"> <table class="display" id="album_table">
<thead> <thead>
<tr> <tr>
<th id="select"><input type="checkbox" onClick="toggle(this)" /></th> <th id="select"><input class="styled" type="checkbox" onClick="toggle(this)" /></th>
<th id="albumart"></th> <th id="albumart"></th>
<th id="albumname">Name</th> <th id="albumname">Name</th>
<th id="reldate">Date</th> <th id="reldate">Date</th>
@@ -86,7 +86,7 @@
%> %>
<tr class="grade${grade}"> <tr class="grade${grade}">
<td id="select"><input type="checkbox" name="${album['AlbumID']}" class="checkbox" /></td> <td id="select"><input class="styled" type="checkbox" name="${album['AlbumID']}" class="checkbox" /></td>
<td id="albumart"> <td id="albumart">
<div class="album-art-small"> <div class="album-art-small">
<a href="albumPage?AlbumID=${album['AlbumID']}"> <a href="albumPage?AlbumID=${album['AlbumID']}">
data/interfaces/default/base.html
+5 -8
View File
@@ -33,7 +33,6 @@
<script type="text/javascript" src="js/FancyScript.js"></script> <script type="text/javascript" src="js/FancyScript.js"></script>
<!-- Custom Form elements--> <!-- Custom Form elements-->
<script type="text/javascript" src="js/custom-form-elements.js" ></script> <script type="text/javascript" src="js/custom-form-elements.js" ></script>
<link type="text/css" href="css/custom-form-elements.css" rel="stylesheet" />
<!-- jScrollPane --> <!-- jScrollPane -->
<!-- styles needed by jScrollPane --> <!-- styles needed by jScrollPane -->
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
@@ -76,10 +75,11 @@
</div> </div>
% endif % endif
<header> <header>
<div id="logo"> <div id="logo">
<a href="home"><img src="images/headphoneslogo.png" alt="headphones"></a> <a href="home"><img src="images/headphoneslogo.png" alt="headphones"></a>
</div> </div>
${next.headerIncludes()}
<div id="searchbar"> <div id="searchbar">
<form action="search" method="get"> <form action="search" method="get">
<input type="text" value="" onfocus="if(this.value==this.defaultValue) this.value='';" name="name" /> <input type="text" value="" onfocus="if(this.value==this.defaultValue) this.value='';" name="name" />
@@ -101,12 +101,9 @@
<li><a href="logs">Logs</a></li> <li><a href="logs">Logs</a></li>
<li><a href="config">Settings</a></li> <li><a href="config">Settings</a></li>
</ul> </ul>
<div id="subhead"> <div id="main" class="main">
${next.headerIncludes()} ${next.body()}
</div> </div>
<div id="main" class="main">
${next.body()}
</div>
<footer> <footer>
</footer> </footer>
data/interfaces/default/upcoming.html
+3 -3
View File
@@ -42,7 +42,7 @@
<form action="markAlbums" method="get"> <form action="markAlbums" method="get">
<div class="dataTables_mark"> <div class="dataTables_mark">
<p class="indented">Mark selected albums as <p class="indented">Mark selected albums as
<select name="action"> <select class="styled" name="action">
<option value="Skipped">Skipped</option> <option value="Skipped">Skipped</option>
<option value="Downloaded">Downloaded</option> <option value="Downloaded">Downloaded</option>
</select> </select>
@@ -54,7 +54,7 @@
<table class="display" id="wanted_table"> <table class="display" id="wanted_table">
<thead> <thead>
<tr> <tr>
<th id="select"><input type="checkbox" onClick="toggle(this)" /></th> <th id="select"><input class="styled" type="checkbox" onClick="toggle(this)" /></th>
<th id="albumart"></th> <th id="albumart"></th>
<th id="artistname">Artist</th> <th id="artistname">Artist</th>
<th id="albumname">Album Name</th> <th id="albumname">Album Name</th>
@@ -65,7 +65,7 @@
<tbody> <tbody>
%for album in wanted: %for album in wanted:
<tr class="gradeZ"> <tr class="gradeZ">
<td id="select"><input type="checkbox" name="${album['AlbumID']}" class="checkbox" /></th> <td id="select"><input class="styled" type="checkbox" name="${album['AlbumID']}" class="checkbox" /></th>
<td id="albumart"> <td id="albumart">
<div class="album-art-small"> <div class="album-art-small">
<a href="albumPage?AlbumID=${album['AlbumID']}"> <a href="albumPage?AlbumID=${album['AlbumID']}">
data/js/FancyScript.js
+15 -6
View File
@@ -13,20 +13,24 @@ $(document).ready(function() {
//On load set #main height & width //On load set #main height & width
windowWidth = $(window).width(); windowWidth = $(window).width();
windowHeight = $(window).height(); windowHeight = $(window).height();
menuWidth = $("#nav").width(); menuWidth = $("#nav").outerWidth();
headerHeight = $("header").height(); headerHeight = $("header").height();
$("#main").height(windowHeight - headerHeight - 40); footerHeight = $("footer").innerHeight();
$("#main").width(windowWidth - menuWidth - 10); $("#main").height(windowHeight - headerHeight - footerHeight);
$("#main").width(windowWidth - menuWidth);
$(".fixed").width(windowWidth - menuWidth);
}); });
//On window resize //On window resize
$(window).resize(function() { $(window).resize(function() {
windowWidth = $(window).width(); windowWidth = $(window).width();
windowHeight = $(window).height(); windowHeight = $(window).height();
menuWidth = $("#nav").width(); menuWidth = $("#nav").outerWidth();
headerHeight = $("header").height(); headerHeight = $("header").height();
$("#main").height(windowHeight - headerHeight - 40); footerHeight = $("footer").innerHeight();
$("#main").width(windowWidth - menuWidth - 10); $("#main").height(windowHeight - headerHeight - footerHeight);
$("#main").width(windowWidth - menuWidth);
$(".fixed").width(windowWidth - menuWidth);
}); });
//Update close //Update close
@@ -39,6 +43,11 @@ $(document).ready(function () {
}); });
}); });
//Add styled class to dataTables_lenght
$(document).ready(function() {
$(".dataTables_length label select").addClass("styled");
});
//Main fadeIn //Main fadeIn
$(document).ready(function () { $(document).ready(function () {
$("#main").hide(); $("#main").hide();
data/js/custom-form-elements.js
+1 -1
View File
@@ -25,7 +25,7 @@ Visit http://ryanfait.com/ for more information.
var checkboxHeight = "25"; var checkboxHeight = "25";
var radioHeight = "25"; var radioHeight = "25";
var selectWidth = "190"; var selectWidth = "130";
/* No need to change anything after this */ /* No need to change anything after this */