From b677c18b037befc0b5d35f66dfc9b078ba1bc6f0 Mon Sep 17 00:00:00 2001
From: Jordan Lee <jordan@transmissionbt.com>
Date: Fri, 21 Oct 2011 02:58:19 +0000
Subject: [PATCH] (trunk web) #3862 "on iPhone web ui, some buttons are too
 small to tap" -- fix file priority buttons.

---
 web/javascript/file-row.js                    | 110 ++++++++--------
 web/style/transmission/common.css             | 120 ++++++++++++++----
 web/style/transmission/images/Makefile.am     |   3 +
 .../transmission/images/buttons/Makefile.am   |   1 -
 .../images/buttons/file_priority_buttons.png  | Bin 3769 -> 0 bytes
 .../images/file-priority-high.png             | Bin 0 -> 340 bytes
 .../transmission/images/file-priority-low.png | Bin 0 -> 335 bytes
 .../images/file-priority-normal.png           | Bin 0 -> 185 bytes
 web/style/transmission/mobile.css             | 119 +++++++++++++----
 9 files changed, 245 insertions(+), 108 deletions(-)
 delete mode 100644 web/style/transmission/images/buttons/file_priority_buttons.png
 create mode 100644 web/style/transmission/images/file-priority-high.png
 create mode 100644 web/style/transmission/images/file-priority-low.png
 create mode 100644 web/style/transmission/images/file-priority-normal.png

diff --git a/web/javascript/file-row.js b/web/javascript/file-row.js
index fd5469f5a..e034285d7 100644
--- a/web/javascript/file-row.js
+++ b/web/javascript/file-row.js
@@ -19,7 +19,9 @@ function FileRow(torrent, i)
 	},
 
 	elements = {
-		priority_control: null,
+		priority_low_button: null,
+		priority_normal_button: null,
+		priority_high_button: null,
 		progress: null,
 		root: null
 	},
@@ -51,24 +53,15 @@ function FileRow(torrent, i)
 
 	refreshWantedHTML = function()
 	{
-		var e = elements.root,
-		    c = [ e.classNameConst ];
-
-		if (!fields.isWanted) { c.push('skip'); }
-		if (isDone()) { c.push('complete'); }
-		e.className = c.join(' ');
+		var e = $(elements.root);
+		e.toggleClass('skip', !fields.isWanted);
+		e.toggleClass('complete', isDone());
 	},
 	refreshPriorityHTML = function()
 	{
-		var e = elements.priority_control,
-		    c = [ e.classNameConst ];
-
-		switch(fields.priority) {
-			case -1 : c.push('low'); break;
-			case 1  : c.push('high'); break;
-			default : c.push('normal'); break;
-		}
-		e.className = c.join(' ');
+		$(elements.priority_high_button  ).toggleClass('selected', fields.priority ===  1 );
+		$(elements.priority_normal_button).toggleClass('selected', fields.priority ===  0 );
+		$(elements.priority_low_button   ).toggleClass('selected', fields.priority === -1 );
 	},
 	refreshProgressHTML = function()
 	{
@@ -99,60 +92,57 @@ function FileRow(torrent, i)
 	},
 
 	createRow = function(torrent, i) {
-		var file = torrent.getFile(i),
-		    name, root, wanted_div, pri_div, file_div, prog_div;
+		var file = torrent.getFile(i), e, name, root, box;
 
 		root = document.createElement('li');
 		root.id = 't' + fields.torrent.getId() + 'f' + fields.index;
-		root.classNameConst = 'inspector_torrent_file_list_entry ' + ((i%2)?'odd':'even');
-		root.className = root.classNameConst;
+		root.className = 'inspector_torrent_file_list_entry ' + ((i%2)?'odd':'even');
+		elements.root = root;
 
-		wanted_div = document.createElement('div');
-		wanted_div.className = "file_wanted_control";
-		$(wanted_div).click(function(){ fireWantedChanged(!fields.isWanted); });
+		e = document.createElement('div');
+		e.className = "file_wanted_control";
+		$(e).click(function(){ fireWantedChanged(!fields.isWanted); });
+		root.appendChild(e);
 
-		pri_div = document.createElement('div');
-		pri_div.classNameConst = "file_priority_control";
-		pri_div.className = pri_div.classNameConst;
-		$(pri_div).bind('click',function(ev){
-			var prio,
-			    x = ev.pageX,
-			    e = ev.target;
-			while (e) {
-				x -= e.offsetLeft;
-				e = e.offsetParent;
-			}
-			// ugh.
-			if (isMobileDevice) {
-				if (x < 8) prio = -1;
-				else if (x < 27) prio = 0;
-				else prio = 1;
-			} else {
-				if (x < 12) prio = -1;
-				else if (x < 23) prio = 0;
-				else prio = 1;
-			}
-			firePriorityChanged(prio);
-		});
+		e = document.createElement('div');
+		e.className = 'file-priority-radiobox';
+		box = e;
+
+			e = document.createElement('div');
+			e.className = 'low';
+			e.title = 'Low Priority';
+			$(e).click(function(){ firePriorityChanged(-1); });
+			elements.priority_low_button = e;
+			box.appendChild(e);
+
+			e = document.createElement('div');
+			e.className = 'normal';
+			e.title = 'Normal Priority';
+			$(e).click(function(){ firePriorityChanged(0); });
+			elements.priority_normal_button = e;
+			box.appendChild(e);
+
+			e = document.createElement('div');
+			e.title = 'High Priority';
+			e.className = 'high';
+			$(e).click(function(){ firePriorityChanged(1); });
+			elements.priority_high_button = e;
+			box.appendChild(e);
+
+		root.appendChild(box);
 
 		name = file.name || 'Unknown';
 		name = name.substring(name.lastIndexOf('/')+1);
 		name = name.replace(/([\/_\.])/g, "$1&#8203;");
-		file_div = document.createElement('div');
-		file_div.className = "inspector_torrent_file_list_entry_name";
-		file_div.innerHTML = name;
+		e = document.createElement('div');
+		e.className = "inspector_torrent_file_list_entry_name";
+		e.innerHTML = name;
+		root.appendChild(e);
 
-		prog_div = document.createElement('div');
-		prog_div.className = "inspector_torrent_file_list_entry_progress";
-
-		root.appendChild(wanted_div);
-		root.appendChild(pri_div);
-		root.appendChild(file_div);
-		root.appendChild(prog_div);
-
-		elements.root = root;
-		elements.priority_control = pri_div;
-		elements.progress = prog_div;
+		e = document.createElement('div');
+		e.className = "inspector_torrent_file_list_entry_progress";
+		root.appendChild(e);
+		elements.progress = e;
 
 		refresh();
 		return root;
diff --git a/web/style/transmission/common.css b/web/style/transmission/common.css
index 85c72ee78..2cf6014b5 100644
--- a/web/style/transmission/common.css
+++ b/web/style/transmission/common.css
@@ -923,38 +923,110 @@ li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
 	cursor: default;
 }
 
-div.file_priority_control {
+div.file-priority-radiobox {
+	display: inline;
 	float: right;
-	margin: 4px 0 0 0;
-	width: 35px;
-	height: 19px;
-	background-image: url('images/buttons/file_priority_buttons.png');
-	background-repeat: no-repeat;
-	background-color: transparent;
+	margin: 4px;
+	margin-top: 2px;
+}
+div.file-priority-radiobox > * {
+	font-size: 20px;
 	cursor: pointer;
+	display: inline-block;
+	width: 30px;
+	height: 12px;
+	border-style: solid;
+	border-color: #aaa;
+	border-width: 1px;
+	padding: 3px;
 }
-div.file_priority_control.normal {
-	background-position: left top;
+
+div.file-priority-radiobox > div.low {
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
+	-moz-border-radius-topleft: 5px;
+	-moz-border-radius-bottomleft: 5px;
+	border-right-width: 0px;
+
+	background: #D7D7D7;
+	background-image: url(images/file-priority-low.png); /* fallback */
+	background-image: url(images/file-priority-low.png), -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#D7D7D7)); /* Saf4+, Chrome */
+	background-image: url(images/file-priority-low.png), -webkit-linear-gradient(top, #EDEDED, #D7D7D7); /* Chrome 10+, Saf5.1+ */
+	background-image: url(images/file-priority-low.png), -moz-linear-gradient(top, #EDEDED, #D7D7D7); /* FF3.6+ */
+	background-image: url(images/file-priority-low.png), -ms-linear-gradient(top, #EDEDED, #D7D7D7); /* IE10 */
+	background-image: url(images/file-priority-low.png), -o-linear-gradient(top, #EDEDED, #D7D7D7); /* Opera 11.10+ */
+	background-image: url(images/file-priority-low.png), linear-gradient(top, #EDEDED, #D7D7D7); /* W3C */
+	background-position: center;
+	background-repeat: no-repeat;
 }
-div.file_priority_control.normal:hover {
-	background-position: right top;
+div.file-priority-radiobox > div.low.selected {
+	background: #93e8ff;
+	background-image: url(images/file-priority-low.png); /* fallback */
+	background-image: url(images/file-priority-low.png), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */
+	background-image: url(images/file-priority-low.png), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */
+	background-image: url(images/file-priority-low.png), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */
+	background-image: url(images/file-priority-low.png), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */
+	background-image: url(images/file-priority-low.png), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */
+	background-image: url(images/file-priority-low.png), linear-gradient(top, #68abe6, #93e8ff); /* W3C */
+	background-position: center;
+	background-repeat: no-repeat;
 }
-div.file_priority_control.high {
-	background-position: left -19px;
+
+
+div.file-priority-radiobox > div.normal {
+	background: #D7D7D7;
+	background-image: url(images/file-priority-normal.png); /* fallback */
+	background-image: url(images/file-priority-normal.png), -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#D7D7D7)); /* Saf4+, Chrome */
+	background-image: url(images/file-priority-normal.png), -webkit-linear-gradient(top, #EDEDED, #D7D7D7); /* Chrome 10+, Saf5.1+ */
+	background-image: url(images/file-priority-normal.png), -moz-linear-gradient(top, #EDEDED, #D7D7D7); /* FF3.6+ */
+	background-image: url(images/file-priority-normal.png), -ms-linear-gradient(top, #EDEDED, #D7D7D7); /* IE10 */
+	background-image: url(images/file-priority-normal.png), -o-linear-gradient(top, #EDEDED, #D7D7D7); /* Opera 11.10+ */
+	background-image: url(images/file-priority-normal.png), linear-gradient(top, #EDEDED, #D7D7D7); /* W3C */
+	background-position: center;
+	background-repeat: no-repeat;
 }
-div.file_priority_control.high:hover {
-	background-position: right -19px;
+div.file-priority-radiobox > div.normal.selected {
+	background: #93e8ff;
+	background-image: url(images/file-priority-normal.png); /* fallback */
+	background-image: url(images/file-priority-normal.png), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */
+	background-image: url(images/file-priority-normal.png), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */
+	background-image: url(images/file-priority-normal.png), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */
+	background-image: url(images/file-priority-normal.png), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */
+	background-image: url(images/file-priority-normal.png), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */
+	background-image: url(images/file-priority-normal.png), linear-gradient(top, #68abe6, #93e8ff); /* W3C */
+	background-position: center;
+	background-repeat: no-repeat;
 }
-div.file_priority_control.low {
-	background-position: left -38px;
+
+
+div.file-priority-radiobox > div.high {
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+	-moz-border-radius-topright: 5px;
+	-moz-border-radius-bottomright: 5px;
+	border-left-width: 0px;
+	background: #D7D7D7;
+	background-image: url(images/file-priority-high.png); /* fallback */
+	background-image: url(images/file-priority-high.png), -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#D7D7D7)); /* Saf4+, Chrome */
+	background-image: url(images/file-priority-high.png), -webkit-linear-gradient(top, #EDEDED, #D7D7D7); /* Chrome 10+, Saf5.1+ */
+	background-image: url(images/file-priority-high.png), -moz-linear-gradient(top, #EDEDED, #D7D7D7); /* FF3.6+ */
+	background-image: url(images/file-priority-high.png), -ms-linear-gradient(top, #EDEDED, #D7D7D7); /* IE10 */
+	background-image: url(images/file-priority-high.png), -o-linear-gradient(top, #EDEDED, #D7D7D7); /* Opera 11.10+ */
+	background-image: url(images/file-priority-high.png), linear-gradient(top, #EDEDED, #D7D7D7); /* W3C */
+	background-position: center;
+	background-repeat: no-repeat;
 }
-div.file_priority_control.low:hover {
-	background-position: right -38px;
-}
-ul.single_file li.inspector_torrent_file_list_entry>.file_priority_control,
-li.inspector_torrent_file_list_entry.complete div.file_priority_control {
-	background-position: left -57px;
-	cursor: default;
+div.file-priority-radiobox > div.high.selected {
+	background: #93e8ff;
+	background-image: url(images/file-priority-high.png); /* fallback */
+	background-image: url(images/file-priority-high.png), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */
+	background-image: url(images/file-priority-high.png), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */
+	background-image: url(images/file-priority-high.png), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */
+	background-image: url(images/file-priority-high.png), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */
+	background-image: url(images/file-priority-high.png), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */
+	background-image: url(images/file-priority-high.png), linear-gradient(top, #68abe6, #93e8ff); /* W3C */
+	background-position: center;
+	background-repeat: no-repeat;
 }
 
 
diff --git a/web/style/transmission/images/Makefile.am b/web/style/transmission/images/Makefile.am
index 401bf7493..f50f227b5 100644
--- a/web/style/transmission/images/Makefile.am
+++ b/web/style/transmission/images/Makefile.am
@@ -4,6 +4,9 @@ datadir = ${datarootdir}/${PACKAGE_NAME}/${subdir}
 dist_data_DATA = \
   blue-turtle.png \
   chrome.png \
+  file-priority-high.png \
+  file-priority-low.png \
+  file-priority-normal.png \
   filter_bar.png \
   filter_icon.png \
   iphone_chrome.png \
diff --git a/web/style/transmission/images/buttons/Makefile.am b/web/style/transmission/images/buttons/Makefile.am
index 25d872979..37def7b13 100644
--- a/web/style/transmission/images/buttons/Makefile.am
+++ b/web/style/transmission/images/buttons/Makefile.am
@@ -2,7 +2,6 @@ datadir = ${datarootdir}/${PACKAGE_NAME}/${subdir}
 
 dist_data_DATA = \
   cancel.png \
-  file_priority_buttons.png \
   file_wanted_buttons.png \
   info_activity.png \
   info_files.png \
diff --git a/web/style/transmission/images/buttons/file_priority_buttons.png b/web/style/transmission/images/buttons/file_priority_buttons.png
deleted file mode 100644
index 1d4b12b4d98ae8fa937ee67fa92d3a452f43649b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3769
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

diff --git a/web/style/transmission/images/file-priority-high.png b/web/style/transmission/images/file-priority-high.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc490b8fc20b08cdaefcc9b70764cade3eab894d
GIT binary patch
literal 340
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k#^NA%Cx&(BWL^R}Y)RhkE)4%c
zaKYZ?lYt_f1s;*b3=G`DAk4@xYmNj^kiEpy*OmP?mnajDg<R&XJwTx=o-U3d8WXop
zILp=KAkwNob(esk??HQkbj25k=C|IKTU@r+iT`3Ui*5Vv7jvW7wp$v_61k`(WpT&)
zc}@8Y$wl#DvDdF`d%MLwKJ@DMgUd3{U2s?My}a;Q<vyLRM-kIhonJgWE6H`ZU`6b8
z-Ay{yoQf5C6(<g`IDXiZE#f*|#nYlMd0Hv|%6Sug^NVHD-&V%y9}P0U|9$)8(2IwI
zBl)NKT;3Bk?PyT>?QP}j-#54O@I+iH{ktGjO1f>Mq++Ge&UMzjip<Pnzo$+KICz`?
foXx@;_UqYey^MZbo*p~_=syNeS3j3^P6<r_vi*XH

literal 0
HcmV?d00001

diff --git a/web/style/transmission/images/file-priority-low.png b/web/style/transmission/images/file-priority-low.png
new file mode 100644
index 0000000000000000000000000000000000000000..c8cc936bb1d89445158e276630fba0e702d1ff02
GIT binary patch
literal 335
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k#^NA%Cx&(BWL^R}Y)RhkE)4%c
zaKYZ?lYt_f1s;*b3=G`DAk4@xYmNj^kiEpy*OmP?mnajjgpJH;Q=rg!PZ!4!jo__4
zwp`5)0<G<5yEHhwj?8xpbmZQ;dBZ8gNqXTY6pMNs&Q0_yT0W)m<i4XFIhU54Xg<z!
zzlP`HedE5xGHnZw+$)`1xoqG2uPw~tmpmQwZkK(Z*0pHCrYrU(1<lOUXD!=#z4Yv=
z^Q%_zb(^yDm|GNl%$)uFr|xN^u-X;x?i+oZX(+Sf^l}x?WfpyrzI}^cbR^Bcxuqj>
z)~n3h+c=sYJo;_7p1bY#t)&J$U%%MoKi>83W}%GR#^$wi*9$tu1WvAZ@yb-%q;uM3
a|5H}&O~#utEX_c{#o+1c=d#Wzp$PyU5QlsK

literal 0
HcmV?d00001

diff --git a/web/style/transmission/images/file-priority-normal.png b/web/style/transmission/images/file-priority-normal.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb01551c1f1fcefbb3d3261b2d203f1fbd500d91
GIT binary patch
literal 185
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k#^NA%Cx&(BWL^R}Y)RhkE)4%c
zaKYZ?lYt_f1s;*b3=G`DAk4@xYmNj^kiEpy*OmP?mnai2_l`wfuYp3Ao-U3d8t0P}
zBsv}3+}vEl!oFz=*ef*LXWS^#ykyA|F@gW;LZ^*8y1G6w6$%Sn7e4UT;f%eElPJUL
XZA#w@9AAh44Po$f^>bP0l+XkKZj3b5

literal 0
HcmV?d00001

diff --git a/web/style/transmission/mobile.css b/web/style/transmission/mobile.css
index 3b998346a..fd0dc5854 100644
--- a/web/style/transmission/mobile.css
+++ b/web/style/transmission/mobile.css
@@ -792,37 +792,110 @@ li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
 	cursor: default;
 }
 
-div.file_priority_control {
+div.file-priority-radiobox {
+	display: inline;
 	float: right;
-	margin: 4px 0 0 0;
-	width: 35px;
-	height: 19px;
-	background-image: url('images/buttons/file_priority_buttons.png');
-	background-repeat: no-repeat;
-	background-color: transparent;
+	margin: 4px;
+	margin-top: 2px;
+}
+div.file-priority-radiobox > * {
+	font-size: 20px;
 	cursor: pointer;
+	display: inline-block;
+	width: 30px;
+	height: 12px;
+	border-style: solid;
+	border-color: #aaa;
+	border-width: 1px;
+	padding: 3px;
 }
-div.file_priority_control.normal {
-	background-position: left top;
+
+div.file-priority-radiobox > div.low {
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
+	-moz-border-radius-topleft: 5px;
+	-moz-border-radius-bottomleft: 5px;
+	border-right-width: 0px;
+
+	background: #D7D7D7;
+	background-image: url(images/file-priority-low.png); /* fallback */
+	background-image: url(images/file-priority-low.png), -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#D7D7D7)); /* Saf4+, Chrome */
+	background-image: url(images/file-priority-low.png), -webkit-linear-gradient(top, #EDEDED, #D7D7D7); /* Chrome 10+, Saf5.1+ */
+	background-image: url(images/file-priority-low.png), -moz-linear-gradient(top, #EDEDED, #D7D7D7); /* FF3.6+ */
+	background-image: url(images/file-priority-low.png), -ms-linear-gradient(top, #EDEDED, #D7D7D7); /* IE10 */
+	background-image: url(images/file-priority-low.png), -o-linear-gradient(top, #EDEDED, #D7D7D7); /* Opera 11.10+ */
+	background-image: url(images/file-priority-low.png), linear-gradient(top, #EDEDED, #D7D7D7); /* W3C */
+	background-position: center;
+	background-repeat: no-repeat;
 }
-div.file_priority_control.normal:hover {
-	background-position: right top;
+div.file-priority-radiobox > div.low.selected {
+	background: #93e8ff;
+	background-image: url(images/file-priority-low.png); /* fallback */
+	background-image: url(images/file-priority-low.png), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */
+	background-image: url(images/file-priority-low.png), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */
+	background-image: url(images/file-priority-low.png), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */
+	background-image: url(images/file-priority-low.png), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */
+	background-image: url(images/file-priority-low.png), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */
+	background-image: url(images/file-priority-low.png), linear-gradient(top, #68abe6, #93e8ff); /* W3C */
+	background-position: center;
+	background-repeat: no-repeat;
 }
-div.file_priority_control.high {
-	background-position: left -19px;
+
+
+div.file-priority-radiobox > div.normal {
+	background: #D7D7D7;
+	background-image: url(images/file-priority-normal.png); /* fallback */
+	background-image: url(images/file-priority-normal.png), -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#D7D7D7)); /* Saf4+, Chrome */
+	background-image: url(images/file-priority-normal.png), -webkit-linear-gradient(top, #EDEDED, #D7D7D7); /* Chrome 10+, Saf5.1+ */
+	background-image: url(images/file-priority-normal.png), -moz-linear-gradient(top, #EDEDED, #D7D7D7); /* FF3.6+ */
+	background-image: url(images/file-priority-normal.png), -ms-linear-gradient(top, #EDEDED, #D7D7D7); /* IE10 */
+	background-image: url(images/file-priority-normal.png), -o-linear-gradient(top, #EDEDED, #D7D7D7); /* Opera 11.10+ */
+	background-image: url(images/file-priority-normal.png), linear-gradient(top, #EDEDED, #D7D7D7); /* W3C */
+	background-position: center;
+	background-repeat: no-repeat;
 }
-div.file_priority_control.high:hover {
-	background-position: right -19px;
+div.file-priority-radiobox > div.normal.selected {
+	background: #93e8ff;
+	background-image: url(images/file-priority-normal.png); /* fallback */
+	background-image: url(images/file-priority-normal.png), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */
+	background-image: url(images/file-priority-normal.png), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */
+	background-image: url(images/file-priority-normal.png), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */
+	background-image: url(images/file-priority-normal.png), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */
+	background-image: url(images/file-priority-normal.png), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */
+	background-image: url(images/file-priority-normal.png), linear-gradient(top, #68abe6, #93e8ff); /* W3C */
+	background-position: center;
+	background-repeat: no-repeat;
 }
-div.file_priority_control.low {
-	background-position: left -38px;
+
+
+div.file-priority-radiobox > div.high {
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+	-moz-border-radius-topright: 5px;
+	-moz-border-radius-bottomright: 5px;
+	border-left-width: 0px;
+	background: #D7D7D7;
+	background-image: url(images/file-priority-high.png); /* fallback */
+	background-image: url(images/file-priority-high.png), -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#D7D7D7)); /* Saf4+, Chrome */
+	background-image: url(images/file-priority-high.png), -webkit-linear-gradient(top, #EDEDED, #D7D7D7); /* Chrome 10+, Saf5.1+ */
+	background-image: url(images/file-priority-high.png), -moz-linear-gradient(top, #EDEDED, #D7D7D7); /* FF3.6+ */
+	background-image: url(images/file-priority-high.png), -ms-linear-gradient(top, #EDEDED, #D7D7D7); /* IE10 */
+	background-image: url(images/file-priority-high.png), -o-linear-gradient(top, #EDEDED, #D7D7D7); /* Opera 11.10+ */
+	background-image: url(images/file-priority-high.png), linear-gradient(top, #EDEDED, #D7D7D7); /* W3C */
+	background-position: center;
+	background-repeat: no-repeat;
 }
-div.file_priority_control.low:hover {
-	background-position: right -38px;
-}
-ul.single_file li.inspector_torrent_file_list_entry>.file_priority_control, li.inspector_torrent_file_list_entry.complete div.file_priority_control {
-	background-position: left -57px;
-	cursor: default;
+div.file-priority-radiobox > div.high.selected {
+	background: #93e8ff;
+	background-image: url(images/file-priority-high.png); /* fallback */
+	background-image: url(images/file-priority-high.png), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */
+	background-image: url(images/file-priority-high.png), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */
+	background-image: url(images/file-priority-high.png), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */
+	background-image: url(images/file-priority-high.png), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */
+	background-image: url(images/file-priority-high.png), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */
+	background-image: url(images/file-priority-high.png), linear-gradient(top, #68abe6, #93e8ff); /* W3C */
+	background-position: center;
+	background-repeat: no-repeat;
 }