diff --git a/README.md b/README.md index 5c9c9087..39f88754 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,11 @@ ###About I created this, in order to completely redeign the user-interface of the current Headphones by rembo10. -##Latest -* Added new screenshots -* Added universal custom scrollbar - DONE -* Added edited progress bars, and title - DONE +##Latest Changes +* Created "ColorStyles.css" to easy personalize main colors. +* CD art now rotates. +* Changed the layout a bit. +* * Added footer, and moved filter and info to it. +* * Sub menu has been moved to header. ###Screenshots Since i edit the style and images alot to optimize it's code, these screen will be edited again once i feel satisfied. diff --git a/data/css/data_table.css b/data/css/data_table.css index 3f0a29fb..a9f98487 100644 --- a/data/css/data_table.css +++ b/data/css/data_table.css @@ -3,7 +3,6 @@ -webkit-border-radius: 5px; -moz-border-radius: 5px; width: 100%; - margin: 0px auto 0 auto; background-color: #313131; min-height: 155px; clear: both; diff --git a/data/css/style.css b/data/css/style.css deleted file mode 100755 index e93874b6..00000000 --- a/data/css/style.css +++ /dev/null @@ -1,986 +0,0 @@ -/* HTML5 ✰ Boilerplate */ - -html, body, div, span, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, -small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, figcaption, figure, -footer, header, hgroup, menu, nav, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} - -blockquote, q { quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { content: ''; content: none; } -ins { background-color: #ff9; color: #000; text-decoration: none; } -mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } -del { text-decoration: line-through; } -table { border-collapse: collapse; border-spacing: 0; } -hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } -input, select { vertical-align: middle; } - -body { font:13px/1.231 sans-serif; *font-size:small; } -select, input, textarea, button { font:99% sans-serif; } -pre, code, kbd, samp { font-family: monospace, sans-serif; } - -a:hover, a:active { outline: none; } -ul, ol { margin-left: 2em; } -ol { list-style-type: decimal; } -nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } -small { font-size: 85%; } -strong, th { font-weight: bold; } -td { vertical-align: top; } - -sub, sup { font-size: 75%; line-height: 0; position: relative; } -sup { top: -0.5em; } -sub { bottom: -0.25em; } - -pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; } -textarea { overflow: auto; } -.ie6 legend, .ie7 legend { margin-left: -7px; } -input[type="radio"] { vertical-align: text-bottom; } -input[type="checkbox"] { vertical-align: bottom; } -.ie7 input[type="checkbox"] { vertical-align: baseline; } -.ie6 input { vertical-align: text-bottom; } -label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } -button, input, select, textarea { margin: 0; } -input:valid, textarea:valid { } -input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } -.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } - -::-moz-selection{ background: grey; color:#fff; text-shadow: none; } -::selection { background: grey; color:#fff; text-shadow: none; } - -button { width: auto; overflow: visible; } -.ie7 img { -ms-interpolation-mode: bicubic; } - -body, select, input, textarea { color: #444; } -h1, h2, h3, h4, h5, h6 { font-weight: bold; } - -/* - // ========================================== \\ - || || - || Custom Styles || - || || - \\ ========================================== // -*/ - -/* - * 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, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 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, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 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, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); - border-bottom: 1px solid #000; -} -footer { - 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-top: 1px solid #000; -} - -.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%); -} - -.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*/ -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%); -} -table thead.fixed -{ -position: fixed; -width: 100%; -} -table thead.fixed tr -{ -display: block; -width: 100%; -} - -/* - * Univarsal - * */ - - .clear{ - clear:both; - } - - /*Removes outline in Chrome*/ - *:focus{ - outline: none; - } - - /* - * Links Styles - * */ -a:link { - color: #fff; - text-decoration: none; - } -a:visited { - color: #fff; - text-decoration: none; - } -a:hover { /*this effect is not shown in NN4.xx*/ - color: #fff; - text-decoration: underline; - } -a:active {/*colour in NN4.xx is red*/ - color: #fff; - text-decoration: underline; - } -a.blue { - color: blue; - } - -#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; } - - - -table.display thead tr th -{ -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;} -h3 { font-size: 12px; color: #FFF; text-decoration: none;} -h4 { font-size: 10px; color: #FFF; text-decoration: none;} - -p { margin-top: 8px; margin-bottom: 8px; } - -p.indented { margin-top: 20px; margin-bottom: 20px; font-size: 12px; } -p.center { text-align: center; font-size: 18px; } -.smalltext2 { font-size: 12px; margin-left: 45px; } - -/*Main Header*/ -header -{ -position: fixed; -left: 0px; -top: 0px; -z-index: 999; -width: 100%; -height: 35px; -border-bottom: 1px solid #000; -} - -div#logo -{ - padding-left: 10px; - height: 30px; - width: 30px; -} -/*Update box*/ -div.btnClose -{ - overflow: hidden; - -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); - cursor: pointer; - width: 20px; - height: 20px; - position: relative; - top: -20px; - right: -20px; - float: right; - border: 1px solid #000; - box-shadow: 0px 0px 3px #000; - font-weight: bold; - font-size: 12px; - line-height: 18px; -} - -div#updatebar -{ - border-top: 1px solid #000; - text-align: center; - width: 160px; - min-height: 60px; - position: fixed; - bottom: 31px; - left: 0px; - z-index: 9999; - padding: 20px; -} - -a.update-link -{ - border: 1px solid #000; - border-radius: 3px; - padding: 5px 10px 5px 10px; - font-size: 16px; - font-weight: bold; - background-image: linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,153,7) 100%); - background-image: -o-linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,153,7) 100%); - background-image: -moz-linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,153,7) 100%); - background-image: -webkit-linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,153,7) 100%); - background-image: -ms-linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,153,7) 100%); - text-shadow: 1px 1px 0px rgb(0,173,7); - color: #000; -} - -/*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:hover { -display: block; -width: 100%; -background: #292929; -} - -ul#nav li.selected -{ -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-bottom: 1px solid #000; -border-top: 1px solid #000; -font-weight: bold; -} - -ul#nav li a -{ -line-height: 25px; -padding-left: 30px; -font-size: 12px; -color: #FFF; -text-decoration: none; -width: 170px; -display: block; -} -ul#nav li a:hover { color: #fff; } - -/*Subhead menu*/ -div#subhead_container -{ -position: fixed; -top: 0px; -left: 90px; -height: 35px; -z-index: 1000; -} - -ul#subhead_menu -{ -height: 35px; -list-style: none; -padding: 0px; -margin: 0px; -} - -ul#subhead_menu li -{ -float: left; -line-height: 35px; -border-left: 1px solid rgb(45,45,45); -border-right: 1px solid rgb(15,15,15); -display: inline; -text-align: center; -} - -ul#subhead_menu li:hover -{ -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, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 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, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 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-left: 1px solid rgb(15,15,15); -} - -ul#subhead_menu li a -{ - padding-left: 10px; - padding-right: 10px; - display: block; - line-height: 35px; - color: rgb(0,0,0); - text-shadow: 1px 1px 0px rgba(255,255,255,0.3); - font-size: 12px; - font-weight: bold; - text-decoration: none; -} - -ul#subhead_menu li a:hover -{ -color: rgb(255,255,255); -font-weight: bold; -} - -/* Searchbar Styles */ -div#searchbar -{ - position: fixed; - top: 5px; - right: 20px; - border-radius: 20px; - color: #fff; - background-color: rgb(70,0,10); - border-top: 1px solid rgb(90,0,20); - border-left: 1px solid rgb(90,0,20); - box-shadow: 1px 1px 2px rgb(240,0,20); -} -div#searchbar input[type=text] { -background-color: rgb(70,0,10); -border-radius: 20px 0px 0px 20px; -color: #fff; -padding: 2px 10px 2px 10px; -border: 0; -box-shadow: none; -} -div#searchbar select -{ - color: #fff; - background-color: rgb(80,0,10); - border: 0; -} -div#searchbar input[type=submit] -{ -background-color: rgb(70,0,10); -border-radius: 0px 20px 20px 0px; -border-top: 1px solid #000; -border-left: 1px solid rgb(45,0,10); -height: 22px; -width: 40px; -line-height: 13px; -margin-top: -1px; -margin-right: -15px; -color: #000; -text-align: center; -} - -div#searchbar input[type=submit]:hover { -color: rgb(170,0,10); } - - - -div#main -{ - position: fixed; - top: 35px; - left: 200px; - min-width: 200px; - min-height: 300px; - height: 100%; - width: 100%; -} - -/*Filter position*/ -.dataTables_filter -{ - position: fixed; - bottom: 0px; - left: 200px; - z-index: 901; - padding-left: 10px; - height: 30px; - line-height: 30px; - width: 250px; - font-size: 12px; - font-weight: bold; - color: rgb(20,0,5); - text-shadow: 1px 1px rgb(123,0,10); -} - -/*Filter text input styles*/ -#artist_table_filter type[type="text"], -#log_table_filter type[type="text"], -.dataTables_filter [type="text"] { - color: #FFF; - border-radius: 20px; - -webkit-border-radius: 20px; - -moz-border-radius: 20px; - height: 12px; - padding-left: 10px; - background-color: rgb(30,0,10); - border: 1px solid #000; - 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 -{ - 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 -{ - background: rgb(30,170,140); - border: 1px solid #000; - border-radius: 3px; - color: #000; - font-size: 12px; - height: 18px; - line-height: 18px; - text-align: center; - font-weight: bold; - float: left; - padding: 3px 6px 3px 6px; -} -#status.btnStatus:hover { - text-decoration: none; -} - -#status a -{ - color: #000; - display: block; -} - -/*Status buttons*/ -.btnDownloaded -{ - 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: -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: -ms-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%); -text-shadow: 1px 1px 0px rgb(87,170,0); -} -.btnWanted -{ - background-image: linear-gradient(bottom, rgb(85,0,128) 0%, rgb(128,0,153) 100%); -background-image: -o-linear-gradient(bottom, rgb(85,0,128) 0%, rgb(128,0,153) 100%); -background-image: -moz-linear-gradient(bottom, rgb(85,0,128) 0%, rgb(128,0,153) 100%); -background-image: -webkit-linear-gradient(bottom, rgb(85,0,128) 0%, rgb(128,0,153) 100%); -background-image: -ms-linear-gradient(bottom, rgb(85,0,128) 0%, rgb(128,0,153) 100%); -text-shadow: 1px 1px 0px rgb(128,0,160); -} -.btnSkipped { -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%); -text-shadow: 1px 1px 0px rgb(180,180,180); -} - -.btnAbort { -background-image: linear-gradient(bottom, rgb(128,0,0) 0%, rgb(153,0,0) 100%); -background-image: -o-linear-gradient(bottom, rgb(128,0,0) 0%, rgb(153,0,0) 100%); -background-image: -moz-linear-gradient(bottom, rgb(128,0,0) 0%, rgb(153,0,0) 100%); -background-image: -webkit-linear-gradient(bottom, rgb(128,0,0) 0%, rgb(153,0,0) 100%); -background-image: -ms-linear-gradient(bottom, rgb(128,0,0) 0%, rgb(153,0,0) 100%); -text-shadow: 1px 1px 0px rgb(190,0,31); -} -.btnGet { - background-image: linear-gradient(bottom, rgb(128,26,0) 0%, rgb(153,61,0) 100%); -background-image: -o-linear-gradient(bottom, rgb(128,26,0) 0%, rgb(153,61,0) 100%); -background-image: -moz-linear-gradient(bottom, rgb(128,26,0) 0%, rgb(153,61,0) 100%); -background-image: -webkit-linear-gradient(bottom, rgb(128,26,0) 0%, rgb(153,61,0) 100%); -background-image: -ms-linear-gradient(bottom, rgb(128,26,0) 0%, rgb(153,61,0) 100%); -text-shadow: 1px 1px 0px rgb(173,61,0); -} -.btnNew -{ - 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: -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: -ms-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%); - text-shadow: 1px 1px 0px rgb(87,170,0); -} -.btnRetry { - 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: -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: -ms-linear-gradient(bottom, rgb(51,128,0) 0%, rgb(87,153,0) 100%); - text-shadow: 1px 1px 0px rgb(87,160,0); -} -.btnBack -{ - margin-top: 10px; - background: #212121; - padding: 10px; - -} - -.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 */ - -.checkbox, -.radio { - width: 19px; - height: 25px; - padding: 0 5px 0 0; - background: url(../images/checkbox.png) no-repeat; - display: block; - clear: left; - float: left; -} - -.radio -{ - background: url(../images/radio.png) no-repeat; -} - -.select{ - position: absolute; - height: 18px; - width: 120px; - padding: 0 10px 0 8px; - color: #000; - font-weight: bold; - text-shadow: 1px 1px 0px rgb(170,170,170); - font-size: 12px/21px; - line-height: 18px; - 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; - background-color: rgb(160,160,160); -} - -/*Tooltip*/ -.tooltip -{ - margin-right: 3px; - float: left; - position: relative; - color: #000; - border-radius: 20px; - border: 1px solid #000; - box-shadow: 1px 1px 0px rgb(90,90,90); - width: 20px; - font-weight: bold; - font-size: 12px; - height: 20px; - text-align: center; - line-height: 20px; - cursor: help; - text-shadow: 1px 1px 0px rgba(255,255,255,0.2); -} -.tooltip:after { - content: "!"; -} -/*Tooltip info*/ -.tooltip span -{ - display: none; -} -.tooltip:hover span -{ - border: 1px solid #000; - border-radius: 3px; - box-shadow: 0px 0px 3px #000; - color: #000; - display: block; - font-style: italic; - font-weight: normal; - position: absolute; - z-index: 999; - top: 10px; - left: 30px; - text-align: left; - padding: 3px 6px 3px 6px; - width: 15em; - 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%); -} - -.submit, -input[type="submit"] -{ - border: 1px solid #000; - border-radius: 3px; - color: #000; - font-weight: bold; - padding: 3px 6px 3px 6px; - 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%); - text-shadow: 1px 1px 0px rgb(180,180,180); -} -.text-pass, -.text-field, -input[type="password"], -input[type="text"] -{ - color: rgb(120,120,120); - padding: 3px 10px 3px 10px; - border-radius: 20px; - background-color: rgb(30,30,30); - border: 0; - border-top: 1px solid rgb(20,20,20); - border-left: 1px solid rgb(20,20,20); - box-shadow: 1px 1px 1px rgb(70,70,70); -} -.manage_wrapper { width: 88%; margin: 20px auto 0 auto; padding: 25px; min-height: 150px; clear: both; _height: 302px; zoom: 1; } -.table_wrapper_half { float: left; width: 50%; min-height: 100px; margin-top: 25px; } - -.configtable { font-size: 14px; line-height:18px; } -.configtable td { width: 350px; padding: 10px; } -.configtable td#middle { vertical-align: middle; } - -/* Artist Table Style*/ -table#artist_table { width: 100%;} - -table#artist_table th#select { text-align: left; } -table#artist_table th#name { text-align: left; min-width: 150px; } -table#artist_table th#status { text-align: left; min-width: 40px; } -table#artist_table th#album { text-align: left; min-width: 100px; } -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#status { vertical-align: middle; text-align: left; } -table#artist_table td#album { vertical-align: middle; text-align: left; } -table#artist_table td#have { vertical-align: middle; } - -#artist_table div { color: #000; text-shadow: 1px 1px rgb(100,100,100); font-size: 12px; font-weight: bold; } - -/* - Paddingheader -*/ -div#paddingheader { -padding-top: 48px; -font-size: 24px; -font-weight: bold; -text-align: left; -} -div#nopaddingheader { font-size: 24px; font-weight: bold; text-align: left; } - - -table#album_table { width: 100%; } -/* Album Tableheader*/ -table#album_table th#select { vertical-align: middle; text-align: left; min-width: 10px; } -table#album_table th#albumart { text-align: left; min-width: 50px; } -table#album_table th#albumname { text-align: left; min-width: 150px; } -table#album_table th#reldate { width: 175px; text-align: left; min-width: 70px; } -table#album_table th#status { width: 175px; text-align: left; min-width: 80px; } -table#album_table th#type { width: 175px; text-align: left; min-width: 100px; } -table#album_table th#bitrate { text-align: left; min-width: 60px; } -/* Album tabledata */ -table#album_table td#select { vertical-align: middle; text-align: left; } -table#album_table td#albumart { vertical-align: middle; text-align: left; } - -/* Album art image sizes */ -.album-art-small { float: left; background: url(../images/cover-small.png) no-repeat top left; padding-top:4px; padding-left: 14px; padding-right: 8px; padding-bottom: 4px;} -.album-art-small img { width: 100px; height: 100px; } -.album-art-big { float: left; height: 200px; width: 200px; background: url(../images/cover-cd.png) no-repeat top left; padding-top:5px; padding-left: 27px; padding-bottom: 5px; padding-right: 110px; } -.album-art-big img { width: 200px; height: 200px; } - -#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#reldate { vertical-align: middle; text-align: left; } -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#have { vertical-align: middle; } -table#album_table td#bitrate { vertical-align: middle; text-align: left; } - -div#albumheader { margin: 20px 0px 40px 0px; min-height: 200px; } - -/* - Track -*/ -div#track_wrapper { font-size: 16px; width: 100%; clear:both; } -div#track_table { margin-top: 20px; } -table#track_table th#number { text-align: right; min-width: 8px; } -table#track_table th#name { text-align:left ; min-width: 160px; } -table#track_table th#duration { text-align: left; min-width: 70px; } -table#track_table th#location { text-align: left; min-width: 180px; } -table#track_table th#bitrate { text-align: left; min-width: 75px; } - -table#track_table td#number { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; } -table#track_table td#name { 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#bitrate { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; } -table#history_table { width: 100%; font-size: 12px; } - -/* History table*/ - -table#history_table td#dateadded { vertical-align: middle; text-align: left; min-width: 150px; font-size: 14px; } -table#history_table td#filename { vertical-align: middle; text-align: left; min-width: 100px; font-size: 15px; } -table#history_table td#size { vertical-align: middle; text-align: left; min-width: 75px; font-size: 14px; } -table#history_table td#status { vertical-align: middle; text-align: left; font-size: 14px; } -table#history_table td#action { vertical-align: middle; text-align: left; font-size: 14px; } - -/* - Log -*/ -#log_table_wrapper { padding-top: 20px; } -table#log_table { width: 100%; } - -table#log_table th#timestamp { text-align: left; min-width: 150px; } -table#log_table th#level { text-align: left; min-width: 60px; } -table#log_table th#message { text-align: left; min-width: 500px; } -/* - Upcoming -*/ -/*Upcoming Tablehead*/ -table#upcoming_table th#albumart { text-align: left; min-width: 20%; } -table#upcoming_table th#albumname { text-align: left; min-width: 200px; } -table#upcoming_table th#artistname { text-align: left; min-width: 150px; } -table#upcoming_table th#reldate { text-align: left; min-width: 100px; } -table#upcoming_table th#type { text-align: left; min-width: 75px; } - -/*Upcoming Tabledata*/ -table#upcoming_table td#select { vertical-align: middle; text-align: left; } -table#upcoming_table td#albumart { vertical-align: middle; text-align: left; min-width: 50px; } -table#upcoming_table td#albumname { vertical-align: middle; text-align: left; min-width: 200px; } -table#upcoming_table td#artistname { vertical-align: middle; text-align: left; min-width: 150px; } -table#upcoming_table td#reldate { vertical-align: middle; text-align: left; min-width: 100px; } -table#upcoming_table td#type { vertical-align: middle; text-align: left; min-width: 75px; } -table#upcoming_table td#status { vertical-align: middle; text-align: left; } - -/*Wanted Tablehead*/ -table#wanted_table { width: 100%; } -table#wanted_table th#albumart { text-align: left; min-width: 50px; } -table#wanted_table th#albumname { text-align: left; min-width: 200px; } -table#wanted_table th#artistname { text-align: left; min-width: 150px; } -table#wanted_table th#reldate { text-align: left; min-width: 100px; } -table#wanted_table th#type { text-align: left; min-width: 75px; } - -/*Wanted Tabledata*/ -table#wanted_table td#select { vertical-align: middle; text-align: left; } -table#wanted_table td#albumart { vertical-align: middle; text-align: left; min-width: 50px; } -table#wanted_table td#albumname { vertical-align: middle; text-align: left; min-width: 200px; } -table#wanted_table td#artistname { vertical-align: middle; text-align: left; min-width: 150px; } -table#wanted_table td#reldate { vertical-align: middle; text-align: left; min-width: 100px; } -table#wanted_table td#type { vertical-align: middle; text-align: left; min-width: 75px; } -table#wanted_table td#status { vertical-align: middle; text-align: left; } - -/*Search Results Tablehead*/ -table#searchresults_table th#albumname { text-align: left; min-width: 225px; } -table#searchresults_table th#artistname { text-align: left; min-width: 325px; } -table#searchresults_table th#score { text-align: left; min-width: 75px; } - -table#searchresults_table td#albumname { vertical-align: middle; text-align: left; min-width: 200px; } -table#searchresults_table td#artistname { vertical-align: middle; text-align: left; min-width: 300px; } -table#searchresults_table td#score { vertical-align: middle; text-align: left; min-width: 75px; } - -/*progress container*/ - -div.progress-container span -{ - float: left; - margin: auto; -} -div.progress-container -{ - border: 1px solid rgb(20,20,20); - width: 100%; - height: 15px; - margin: 2px 5px 2px 0px; - background: rgb(30,30,30); - color: rgb(30,30,30); - text-shadow: 1px 1px rgb(50,50,50); - text-align: center; - border-radius: 20px; - overflow: hidden; -} -/*Progress bar*/ -div.progress-container div -{ - height: 100%; - background-image: url(../images/progress.png); -} -/*text format for match/procent*/ -.searchmatch, -.havetracks -{ - display: block; - float: left; - width: 100%; - font-size: 12px; - position: relative; - text-align: center; - color: rgb(0,0,0); - text-shadow: 1px 1px 0px rgb(50,50,50); -} - - -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#donate { text-align: center; margin: 20px auto 20px auto; } - -div#shutdown{ text-align: center; vertical-align: middle; } - -.cloudtag { padding-top: 30px; font-size:16px; } -#cloud a.tag1 { font-size: 0.7em; font-weight: 100; } -#cloud a.tag2 { font-size: 0.8em; font-weight: 200; } -#cloud a.tag3 { font-size: 0.9em; font-weight: 300; } -#cloud a.tag4 { font-size: 1.0em; font-weight: 400; } -#cloud a.tag5 { font-size: 1.2em; font-weight: 500; } -#cloud a.tag6 { font-size: 1.4em; font-weight: 600; } -#cloud a.tag7 { font-size: 1.6em; font-weight: 700; } -#cloud a.tag8 { font-size: 1.8em; font-weight: 800; } -#cloud a.tag9 { font-size: 2.2em; font-weight: 900; } -#cloud a.tag10 { font-size: 2.5em; font-weight: 900; } - -#cloud { padding: 2px; line-height: 1.5em; text-align: center; } -#cloud a { padding: 0px; } -#cloud { margin: 0; } -#cloud li { display: inline; } - - - -.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } -.hidden { display: none; visibility: hidden; } -.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } -.visuallyhidden.focusable:active, -.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } -.invisible { visibility: hidden; } -.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } -.clearfix:after { clear: both; } -.clearfix { zoom: 1; } - - -@media all and (orientation:portrait) { - -} - -@media all and (orientation:landscape) { - -} - -@media screen and (max-device-width: 480px) { - html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } -} - - -@media print { - * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; - -ms-filter: none !important; } - a, a:visited { color: #444 !important; text-decoration: underline; } - a[href]:after { content: " (" attr(href) ")"; } - abbr[title]:after { content: " (" attr(title) ")"; } - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } - pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } - thead { display: table-header-group; } - tr, img { page-break-inside: avoid; } - @page { margin: 0.5cm; } - p, h2, h3 { orphans: 3; widows: 3; } - h2, h3{ page-break-after: avoid; } -} \ No newline at end of file diff --git a/data/images/cover.psd b/data/images/cover.psd index f8a059e0..53673d03 100644 Binary files a/data/images/cover.psd and b/data/images/cover.psd differ diff --git a/data/interfaces/default/album.html b/data/interfaces/default/album.html index 1360bb12..09cf1820 100644 --- a/data/interfaces/default/album.html +++ b/data/interfaces/default/album.html @@ -23,10 +23,14 @@ <%def name="body()">
-

< Back to ${album['ArtistName']}

+ + Back to ${album['ArtistName']} + +
albumart +

${album['AlbumTitle']}

diff --git a/data/interfaces/default/base.html b/data/interfaces/default/base.html index ce6be856..d0180073 100755 --- a/data/interfaces/default/base.html +++ b/data/interfaces/default/base.html @@ -20,7 +20,8 @@ - + + diff --git a/data/interfaces/default/config.html b/data/interfaces/default/config.html index c9dd37e5..77eb5a58 100644 --- a/data/interfaces/default/config.html +++ b/data/interfaces/default/config.html @@ -12,579 +12,622 @@
<%def name="body()"> -
-
-

Web Interface

 + +
+

Web Interface

 - - - - - +
-

HTTP Host:

- -
- - i.e. localhost or 0.0.0.0 - -
- 		-

HTTP Username:

- -
+ + + + - - + + - - + + - - - -
+

HTTP Host:

+ +
+ + i.e. localhost or 0.0.0.0 + +
+ 		+

HTTP Username:

+ +
-

HTTP Port:

- -
+

HTTP Port:

+ + 		-

-

HTTP Password:

- -

-
+

+

HTTP Password:

+ +

+
-

- Launch Browser on Startup: - -

-
-
-
-

Download Settings

 - - - - - - + + + +
-

SABnzbd:

-
-

SABnzbd Host:

-
- - Usually http://localhost:8080 - -
-
+

+ Launch Browser on Startup: + +

+
+
+
+

Download Settings

 + + + + + + + + + + + + - - + + + + + + - - - - - - - - - - - - - - - - - + + - - - + + + + - - - + + + - - + + + + + + + + +
+

SABnzbd:

+
+

+ SABnzbd Host: +

+ +
+ + Usually http://localhost:8080 + +
+ 		+

+ SABnzbd Username: +

+ +
+

+ SABnzbd API: +

+ + 		+

SABnzbd Password:

+ +
-

SABnzbd Username:

-
+

SABnzbd Category:

+ 		+

Music Download Directory:

+
+ + Full path to the directory where SAB downloads your music | i.e. /Users/name/Downloads/music + +
+
+

+ Use Black Hole: + +

+
-

SABnzbd API:

- 		-

SABnzbd Password:

-
-

SABnzbd Category:

- 		-

Music Download Directory:

-
- - Full path to the directory where SAB downloads your music | i.e. /Users/name/Downloads/music - -
-
-

- Use Black Hole: - -

- 		-

Black Hole Directory:

- -
Folder your Download program watches for NZBs
-
+

+ Black Hole Directory: +

+ +
+ + Folder your Download program watches for NZBs + +
+
-

Usenet Retention: - -

-
+

+ Usenet Retention: +

+ +
-



Torrent:

-
+

Torrent:

+
-

Black Hole Directory:

-
- Folder your Download program watches for Torrents -
-
+

Black Hole Directory:

+
+ Folder your Download program watches for Torrents +
+ 		+

+ Minimum seeders: +

+ +
+ + Number of minimum seeders a torrent must have to be accepted + +
+
+

+ Music Download Directory: +

+ - 		-

Minimum seeders:

+
+ + Full path to the directory where your torrent client downloads your music + i.e. /Users/name/Downloads/music + +
+
+
+
+ +

+ Search Providers +

+ + + + + + + + -
- Number of minimum seeders a torrent must have to be accepted
- - + + - - + -
- - Full path to the directory where your torrent client downloads your music - i.e. /Users/name/Downloads/music - -
- + - - -
+

SABnzbd:

+
+

+ NZBMatrix: +

+ + 		+

+ NZBMatrix Username: +

+ +
+

NZBMatrix API:

+ +
-

Music Download Directory:

+
+

Newznab:

+ + 		+

Newznab Host:

+ +
+ + i.e. http://nzb.su + +
+
-
-
-

Search Providers

 - - - - - - + + - + + - - + - - - - - - - - - - - + - - + + - - + + - + - - + + - - - + + + - - - - - - - - - -
-

SABnzbd:

-
-

NZBMatrix: - -

- 		+

Newznab API:

+ +
-

NZBMatrix Username:

- -
+

NZBs.org: + +

+ 		-

NZBMatrix API:

- -
-
-

Newznab: - -

- 		-

Newznab Host:

- -
i.e. http://nzb.su
- 		-

Newznab API:

- -
-

NZBs.org: - -

- 		- -

NZBs.org UID:

- +

NZBs.org UID:

+ - 		+ -

NZBs.org Hash:

- +

NZBs.org Hash:

+ -
-

Newzbin: - -

-
+

+ + Newzbin +

+ 		-

Newzbin UID:

- + 		+

+ Newzbin UID: + + +

- 		-

Newzbin Password:

- -
+

Newzbin Password + +

+
-

Torrent:


-
+

Torrent:

+
-

Isohunt: - -

-
- 		-

Mininova: - -

-
-
-

Kick Ass Torrents: - -

-
-
-
-

Quality & Post Processing

 - - - - - + - + + Mininova +

+

+ + Kick Ass Torrents +

+ + +
-

Album Quality:


-

- - Highest Quality excluding Lossless -

-

- - Highest Quality including Lossless -

-

- - Lossless Only -

-

- - Preferred Bitrate: - kbps -

-

- - Auto-Detect Preferred Bitrate -

- 		-

Post-Processing:

-

- - Move downloads to Destination Folder -

-

- - Rename files -

+

- - Correct metadata -

+ + Isohunt: +

- - Delete leftover files (.m3u, .nfo, .sfv, .nzb, etc.) -

-

- - Add album art as 'folder.jpg' to album folder -

-

- - Embed album art in each file -

-

- - Embed lyrics -

-
+
+
+ +

+ Quality & Post Processing +

+ - - -
+ + + + + -

- Path to Destination folder: -

- -
- - i.e. /Users/name/Music/iTunes or /Volumes/share/music - -
- - -
+

Album Quality:


+

+ + Highest Quality excluding Lossless +

+

+ + Highest Quality including Lossless +

+

+ + Lossless Only +

+

+ + Preferred Bitrate: + kbps +

+

+ + Auto-Detect Preferred Bitrate +

+ 		+

Post-Processing:

+

+ + Move downloads to Destination Folder +

+

+ + Rename files +

+

+ + Correct metadata +

+

+ + Delete leftover files (.m3u, .nfo, .sfv, .nzb, etc.) +

+

+ + Add album art as 'folder.jpg' to album folder +

+

+ + Embed album art in each file +

+

+ + Embed lyrics +

+
-
-
-

Advanced Settings

 + + +
+ +

+ Path to Destination folder: +

+ +
+ + i.e. /Users/name/Music/iTunes or /Volumes/share/music + +
+ + + +
+
+

Advanced Settings

 - - - - - - - + + + + + +
-

Renaming Options:

-
-

- Folder Format: -

- -
- - Use: artist, album, year, releasetype and first (first letter in artist name) - E.g.: first/artist/album [year] = G/Girl Talk/All Day [2010] - -
-

-

- File Format: -

- -
- - Use: tracknumber, title, artist, album and year - -
- 		-

Miscellaneous:

-
-

- - Automatically Include Extras When Adding an Artist -

-
(EPs, Compilations, Live Albums, Remix Albums and Singles)
-

-

- Interface: -

-

Log Directory:

- -
-
- - Note: this option requires the lame or ffmpeg encoder - -
-

Re-Encoding Options:

- -
-

- - Re-encode downloads during postprocessing -

-
-
-

- - Only re-encode lossless files (.flac) -

-
- <% - if config['encoder'] == 'lame': - lameselect = 'selected="selected"' - ffmpegselect = '' - else: - lameselect = '' - ffmpegselect = 'selected="selected"' - %> -

Encoder: + + + + + + + - - - -
+

Renaming Options:

+
+

+ Folder Format: +

+ +
+ + Use: artist, album, year, releasetype and first (first letter in artist name) + E.g.: first/artist/album [year] = G/Girl Talk/All Day [2010] + +
+

+

+ File Format: +

+ +
+ + Use: tracknumber, title, artist, album and year + +
+ 		+

Miscellaneous:

+
+

+ + Automatically Include Extras When Adding an Artist +

+
(EPs, Compilations, Live Albums, Remix Albums and Singles)
+

+

+ Interface: +

- Format: -

-
- -

- Audio Properties: -

-
-

- VBR/CBR: - + +

+

Log Directory:

+ +
+
+ + Note: this option requires the lame or ffmpeg encoder + +
+

Re-Encoding Options:

+

+ + Re-encode downloads during postprocessing +

+
+ + Only re-encode lossless files (.flac) +
+ <% + if config['encoder'] == 'lame': + lameselect = 'selected="selected"' + ffmpegselect = '' + else: + lameselect = '' + ffmpegselect = 'selected="selected"' + %> +

Encoder:

+ - Quality: - -
-

Bitrate: +

Format:

+ +
+

+ Audio Properties: +

+
+

VBR/CBR: + +

+

+ Quality: + +

+
+

Bitrate: + - <% - if config["samplingfrequency"] == 44100: - freq44100 = 'selected="selected"' - freq48000 = '' - else: - freq44100 = '' - freq48000 = 'selected="selected"' - %> - Sampling: -
-
-

Advanced Encoding Options:

-

- (ignores audio properties) -

- -
-

Path to Encoder:

-
- 		-

- Prowl Notification: -

-

- - Enable Prowl Notifications -

-
-

- API key: -

-

-

- - Notify on snatch? -

-
-

- Priority (-2,-1,0,1 or 2): -

- -
-
-

Muscbrainz Mirror: -

-

+ <% + if config["samplingfrequency"] == 44100: + freq44100 = 'selected="selected"' + freq48000 = '' + else: + freq44100 = '' + freq48000 = 'selected="selected"' + %> +

+

+ Sampling: + +

+
+
+

Advanced Encoding Options:

+

+ (ignores audio properties) +

+ +
+

Path to Encoder:

+ + + 		+

+ Prowl Notification: +

+

+ + Enable Prowl Notifications +

+
+

+ API key: +

+ +
+
+

+ + Notify on snatch? +

+
+

+ Priority (-2,-1,0,1 or 2): +

+ +
+
+

Muscbrainz Mirror:

+ +
+


- (Web Interface changes require a restart to take effect)

-
+ (Web Interface changes require a restart to take effect) +

+ <%def name="javascriptIncludes()"> diff --git a/data/js/FancyScript.js b/data/js/FancyScript.js index 43ef877f..e410a8ad 100644 --- a/data/js/FancyScript.js +++ b/data/js/FancyScript.js @@ -53,3 +53,19 @@ $(document).ready(function () { $("#main").hide(); $("#main").fadeIn("slow"); }); + +//CD Rotate +$(function() { +var $rotateElement = $(".album-art-cd"); +rotate(0); +function rotate(degree) { + + // For webkit browsers: e.g. Chrome + $rotateElement.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); + // For Mozilla browser: e.g. Firefox + $rotateElement.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); + + // Animate rotation with a recursive call + setTimeout(function() { rotate(++degree); },30); + } +});