From c9ec401798dd5837445c7a2159ffa72d91ca1e06 Mon Sep 17 00:00:00 2001 From: Brinken Date: Tue, 13 Mar 2012 22:51:00 +0100 Subject: [PATCH] Added custom scrollbar and more JS --- data/css/data_table.css | 14 +- data/css/jquery.jscrollpane.css | 125 + data/css/style.css | 113 +- data/images/retry.png | Bin 3489 -> 3480 bytes data/interfaces/default/artist.html | 10 +- data/interfaces/default/base.html | 53 +- data/interfaces/default/searchresults.html | 14 +- data/js/{ActiveLinks.js => FancyScript.js} | 22 +- data/js/jquery-1.7.1.js | 9266 ++++++++++++++++++++ data/js/jquery.jscrollpane.js | 1395 +++ data/js/jquery.jscrollpane.min.js | 11 + data/js/jquery.mousewheel.js | 84 + 12 files changed, 11072 insertions(+), 35 deletions(-) create mode 100644 data/css/jquery.jscrollpane.css rename data/js/{ActiveLinks.js => FancyScript.js} (53%) create mode 100644 data/js/jquery-1.7.1.js create mode 100644 data/js/jquery.jscrollpane.js create mode 100644 data/js/jquery.jscrollpane.min.js create mode 100644 data/js/jquery.mousewheel.js diff --git a/data/css/data_table.css b/data/css/data_table.css index bd919c8a..c4a63f45 100644 --- a/data/css/data_table.css +++ b/data/css/data_table.css @@ -286,12 +286,22 @@ td.details { } .paging_full_numbers span.paginate_button { - background-color: #e50000; + 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; color: #fff; } .paging_full_numbers span.paginate_button:hover { - background-color: #ff0000; + background-image: linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%); +background-image: -o-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%); +background-image: -moz-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%); +background-image: -webkit-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%); +background-image: -ms-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%); +border-bottom: 1px solid #000; color: #fff; } diff --git a/data/css/jquery.jscrollpane.css b/data/css/jquery.jscrollpane.css new file mode 100644 index 00000000..82f6a420 --- /dev/null +++ b/data/css/jquery.jscrollpane.css @@ -0,0 +1,125 @@ +/* + * CSS Styles that are needed by jScrollPane for it to operate correctly. + * + * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane + * may not operate correctly without them. + */ + +.jspContainer +{ + overflow: hidden; + position: relative; +} + +.jspPane +{ + position: absolute; +} + +.jspVerticalBar +{ + position: absolute; + top: 0; + right: 0; + width: 10px; + height: 100%; + background: red; +} + +.jspHorizontalBar +{ + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 10px; + background: red; +} + +.jspVerticalBar *, +.jspHorizontalBar * +{ + margin: 0; + padding: 0; +} + +.jspCap +{ + display: none; +} + +.jspHorizontalBar .jspCap +{ + float: left; +} + +.jspTrack +{ + background: rgb(50,50,50); + position: relative; +} + +.jspDrag +{ + background: rgb(30,30,30); + position: relative; + top: 0; + left: 0; + cursor: pointer; + border-radius: 20px; +} +.jspDrag:hover +{ + background: rgb(15,15,15); +} + +.jspHorizontalBar .jspTrack, +.jspHorizontalBar .jspDrag +{ + float: left; + height: 100%; +} + +.jspArrow +{ + background: #50506d; + text-indent: -20000px; + display: block; + cursor: pointer; +} + +.jspArrow.jspDisabled +{ + cursor: default; + background: #80808d; +} + +.jspVerticalBar .jspArrow +{ + height: 10px; +} + +.jspHorizontalBar .jspArrow +{ + width: 10px; + float: left; + height: 100%; +} + +.jspVerticalBar .jspArrow:focus +{ + outline: none; +} + +.jspCorner +{ + background: #eeeef4; + float: left; + height: 100%; +} + +/* Yuk! CSS Hack for IE6 3 pixel bug :( */ +* html .jspCorner +{ + margin: 0 -3px 0 0; +} \ No newline at end of file diff --git a/data/css/style.css b/data/css/style.css index cb32fc02..0211b718 100755 --- a/data/css/style.css +++ b/data/css/style.css @@ -37,7 +37,6 @@ 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; } -html { overflow-y: scroll; } a:hover, a:active { outline: none; } ul, ol { margin-left: 2em; } ol { list-style-type: decimal; } @@ -167,7 +166,7 @@ a.blue { #container { width: 960px; margin: auto; } -body { background-color: #313131; color: #c2c2c2;} +body { background-color: #313131; color: #c2c2c2; overflow: hidden; overflow-y: hidden; overflow-x: hidden; } @@ -199,7 +198,54 @@ left: 0px; 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); } +div.btnClose +{ + overflow: hidden; + -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; + background-color: rgb(60,0,5); + cursor: pointer; + width: 18px; + height: 18px; + position: relative; + top: -29px; + right: -29px; + float: right; + border: 1px solid #000; + box-shadow: 0px 0px 3px #000; + font-weight: bold; + font-size: 12px; + line-height: 18px; +} + +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%); + box-shadow: 0px 0px 6px #000; text-align: center; + width: 300px; + min-height: 60px; + position: fixed; + bottom: 25px; + right: 25px; + z-index: 9999; + padding: 20px; +} + +a.update-link +{ + margin: 30px; + border-radius: 3px; + padding: 10px 5px 10px 5px; + font-size: 22px; + background-image: linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,199,7) 100%); +background-image: -o-linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,199,7) 100%); +background-image: -moz-linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,199,7) 100%); +background-image: -webkit-linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,199,7) 100%); +background-image: -ms-linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,199,7) 100%); + } 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;} @@ -259,8 +305,8 @@ height: 40px; padding: 0px 9px 0px 9px; line-height: 40px; display: inline-block; -border-left: 1px solid #000; -border-right: 1px solid #000; +border-left: 1px solid rgb(50,50,50); +border-right: 1px solid rgb(25,25,25); margin: 0; } @@ -322,9 +368,11 @@ border: 0; border-left: 1px solid #909090; color: #fff; } + div#searchbar input[type=submit]:hover { background-color: #ac0000; text-shadow: 1px 1px 3px #000; } + div#searchbar select { color: #fff; @@ -333,7 +381,17 @@ div#searchbar select border-color: rgb(70,0,10); } -div#main { position: absolute; top: 90px; left: 200px; width: 100%; min-width: 200px; min-height: 300px; margin: 20px; } +div#main +{ + position: absolute; + top: 105px; + left: 200px; + padding: 5px; + min-width: 200px; + min-height: 300px; + height: 100%; + width: 100%; +} /*Filter position*/ .dataTables_filter @@ -405,7 +463,7 @@ table#artist_table th#select { text-align: left; } table#artist_table th#name { text-align: left; min-width: 32%; } table#artist_table th#status { text-align: left; min-width: 8%; } table#artist_table th#album { text-align: left; min-width: 49%; } -table#artist_table th#have { text-align: center; width: 60px; } +table#artist_table th#have { text-align: center; width: 11%; } table#artist_table td#name { vertical-align: middle; text-align: left; } table#artist_table td#status { vertical-align: middle; text-align: left; } @@ -414,6 +472,9 @@ 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; @@ -421,6 +482,8 @@ 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; } @@ -450,7 +513,9 @@ table#album_table td#bitrate { vertical-align: middle; text-align: left; font-si div#albumheader { margin: 20px 0px 40px 0px; min-height: 200px; } -/* Track table*/ +/* + 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; } @@ -475,19 +540,26 @@ table#history_table td#size { vertical-align: middle; text-align: left; min-widt 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; } @@ -496,6 +568,7 @@ table#upcoming_table td#reldate { vertical-align: middle; text-align: left; min- 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; } @@ -503,6 +576,7 @@ 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; } @@ -511,6 +585,7 @@ table#wanted_table td#reldate { vertical-align: middle; text-align: left; min-wi 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; } @@ -519,9 +594,22 @@ table#searchresults_table td#albumname { vertical-align: middle; text-align: lef 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; } -div.progress-container { border: 1px solid #313131; width: 100px; height: 15px; margin: 2px 5px 2px 0; padding: 1px; background: #414141; color: white; } -div.progress-container > div { height: 100%; margin: 1px; } -.havetracks { font-size: 12px; position: relative; width: 100px; text-align: center; } +/*progress container*/ +div.progress-container { border: 1px solid #000; width: 100%; height: 15px; margin: 2px 5px 2px 5px; background: #414141; } +/*Progress bar*/ +div.progress-container > div +{ +height: 100%; +background-image: linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%); +background-image: -o-linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%); +background-image: -moz-linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%); +background-image: -webkit-linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%); +background-image: -ms-linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%); +} +/*text format for match/procent*/ +.searchscrore, +.havetracks { font-size: 12px; position: relative; width: 100%; text-align: center; color: #fff; text-shadow: 1px 1px 3px #000; } + footer { margin: 20px auto 20px auto; } div#version { text-align: center; font-weight: bold; } @@ -568,7 +656,6 @@ div#shutdown{ text-align: center; vertical-align: middle; } } @media screen and (max-device-width: 480px) { - html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } diff --git a/data/images/retry.png b/data/images/retry.png index 71774b9e7f51de4247ff0bb3cb6b28347f37292a..bfcce50456f6735a61c3f17f98e6d2d1e6e8610b 100644 GIT binary patch delta 734 zcmV<40wMjO8<-oA7YY^#1^@s6f&$Nxu_2!d5yMGDK~#9!+?ZcTQ*ji>Ki8Ad3L1ah zg)b2VThc>MHA{qusI5Q)rEFzkLg_|?T4c3K$_z=RdT3C#LO1Hc-5$0(_vh}9Z*2z- zmwSHa_dUP!JLmiRU9Lb_v_NI#nM>jWCIFuhS-iQ;ft?(bvleW?4FTA9>MD=OVL5k< z1`VKH2|U9PXrBsoG*#wO+|l}mg0?u3JKBZNOGS3;^E4jIsi@|nW4Bym*g`z zYNNPFhoM4J4LCSzBly>!7Qd<1j$wyHXKyw0zh|T4qR~NFsgcg!YJz|KDiujcL}|6- z7lf#-WTT!|(aqj!E1vOokfCqb!m|md>Vj_#SpaAi-OT@*rEl009otnYrN@7N-cHq4 z6HPUCx&}l5%1ezHDkQoFL>2@7q<95NYsIQ8hX-SApTBwe>hrR0jV|m%*e`Kzq9P~z zWx`(!`nfq|p{m?OWtoXk2*i2^Pv1IuJ>^P{k*OlF_HA2?lxX#QobyEOawvIjqR2`j zODn^ln(;99#>s&_b~bO&18{%;u`OjhRgNfGUT%})?A{M99*(s~Rs$`K4q6)Hd;MZh z9aD3j(}b&cQ5aV4D>v( zFyeJ)C`syyq{9bT4EP!GI;qu5ynN?M8>T?1NUSP5ro4A_g-!PkVUs!pZ*KR>mj7 zWi~fEFgM3@Wb%`T^VjR*$WB6QWrP3y=WNP@K}`g}eDEaQxqPelbZ|JoK2h=|5nmo8 z;#&m-Cdc`)eJ4g_vKOg=L0B8I=xb$Xf Qc>n+a07*qoM6N<$g66SZasU7T delta 743 zcmVKev<73L1ZG z;Y$R;mh{k5%@QFZYAet{DO*{XP`VMJ7Fn&5GDA|S9vYOb(2aUja#sR+&UA(!~iGv)Jb5`uYO##?{`WlbPVL5-C zdJUkJ!sNPWH2~qisUq|@pwbaVAu`lX zTohuq;!S#5L=XF_YMWstdk7Xa%4}^f32(hTb7-Y;1RhC4GPV7j0B- zGtpS>ptD~Dpsd7*q1-}ezsN!`kd$wg46S&Tq{v{r?aOx`-~2w-uhm6-i1;bzDitZ& zFH`)5P=H&5Rw~O(RFs+she51!^6Z_9HJWr&({zE`^ilDn*hD zSzKQH$!Ra6Z(SVR>tM@9Jpg|Xp4e07Q{{+U<&{<`!S4I$=Fw4;sbqNJFUlFQ)jSo{hr9Y3Z$~)h~;bq!zT}W*sxAVpJ!=DB%u4D zm0_PNLrYS3Bwc)fg+%sospBuV!D45v&lQFoU2qB zTFZ@}%2!R7MfR@yR!TPOsjs%BB(W;l$&T#G_zAvJ<{YZf3agOu!<3h&FI^niV`FSQ z(q?m$6LV7{MNew %endif -
${havetracks}/${totaltracks}
+ +
+
+
+ ${havetracks}/${totaltracks} +
+
+
+ ${bitrate} %endfor diff --git a/data/interfaces/default/base.html b/data/interfaces/default/base.html index 213a06be..0c4f31bd 100755 --- a/data/interfaces/default/base.html +++ b/data/interfaces/default/base.html @@ -21,6 +21,33 @@ + + + + ${next.javascriptIncludes()} + + + + + + + + + + + + + + + + + + ${next.headIncludes()} @@ -29,11 +56,21 @@
% if not headphones.CURRENT_VERSION:
- You're running an unknown version of Headphones. Click here to update +
X
+ You're running an unknown version of Headphones. +
+
+
+ Validate
% elif headphones.CURRENT_VERSION != headphones.LATEST_VERSION and headphones.INSTALL_TYPE != 'win':
- A newer version is available. You're ${headphones.COMMITS_BEHIND} commits behind. Click here to update +
X
+ A newer version is available. You're ${headphones.COMMITS_BEHIND} commits behind. +
+
+
+ Update
% endif
@@ -54,7 +91,7 @@
${next.body()} -
- - - - ${next.javascriptIncludes()} - - - - +