mirror
/
transmission
mirror of https://github.com/transmission/transmission
1
0
Fork 0
Code Issues Releases Wiki Activity

(trunk web) more changes to the look & feel of the buttons. This is a work in progress. 

1. sync the toolbar buttons' appearance to match the footer & inspector buttons' new look from r13016
2. make the buttons a little easier to tap as per ticket #3862
3. try new toolbar icons from the 'wireframe mono icons' (CC attribution/noncommerical 3.0) by gentleface.com, found at iconfinder.com.
This commit is contained in:
Jordan Lee 2011-10-25 23:36:47 +00:00
parent 4f1db26672
commit 74cb70503b
25 changed files with 639 additions and 2665 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/index.html
View File

@ -38,17 +38,12 @@
<body id="transmission_body">
<div id="toolbar">
<ul>
<li id="open"><div id="open_link"><div class="toolbar_image"></div>Open</div></li>
<li id="remove" class="disabled"><div id="remove_link"><div class="toolbar_image"></div>Remove</div></li>
<li class="divider">&nbsp;</li>
<li id="pause_selected" class="disabled"><div id="pause_selected_link"><div class="toolbar_image"></div>Pause</div></li>
<li id="resume_selected" class="disabled"><div id="resume_selected_link"><div class="toolbar_image"></div>Resume</div></li>
<li class="divider">&nbsp;</li>
<li id="pause_all" class="disabled"><div id="pause_all_link"><div class="toolbar_image"></div>Pause All</div></li>
<li id="resume_all" class="disabled"><div id="resume_all_link"><div class="toolbar_image"></div>Resume All</div></li>
<li id="inspector"><div id="inspector_link"><div class="toolbar_image"></div>Inspector</div></li>
</ul>
<div id="toolbar-open" title="Open Torrent"></div>
<div id="toolbar-remove" title="Remove Selected Torrents"></div>
<div id="toolbar-start" title="Start Selected Torrents"></div>
<div id="toolbar-pause" title="Pause Selected Torrents"></div>
<div id="toolbar-select" title="Toggle Selection"></div>
<div id="toolbar-inspector" title="Toggle Inspector"></div>
</div>
<div id="statusbar">
@ -176,8 +171,6 @@
<div id="torrent_inspector" style="display:none;">
<div id="inspector-close"></div>
<div id="inspector-tabs-wrapper">
<div id="inspector-tabs">
<div class="inspector-tab selected" id="inspector-tab-info" title="Info"><a href="#info"></a></div><div class="inspector-tab" id="inspector-tab-activity" title="Activity"><a href="#activity"></a></div><div class="inspector-tab" id="inspector-tab-peers" title="Peers"><a href="#peers"></a></div><div class="inspector-tab" id="inspector-tab-trackers" title="Trackers"><a href="#trackers"></a></div><div class="inspector-tab" id="inspector-tab-files" title="Files"><a href="#files"></a></div>
@ -465,11 +458,6 @@
<li id="context_verify">Verify Local Data</li>
<li class="separator"></li>
<li id="context_reannounce">Ask tracker for more peers</li>
<li class="separator"></li>
<li id="context_toggle_inspector">Show Inspector</li>
<li class="separator"></li>
<li id="context_select_all" class="context_select_all">Select All</li>
<li id="context_deselect_all" class="context_deselect_all">Deselect All</li>
</ul>
</div>

63
web/javascript/transmission.js
View File

@ -40,12 +40,11 @@ Transmission.prototype =
// Set up user events
$(".numberinput").forceNumeric();
$('#pause_all_link').click($.proxy(this.stopAllClicked,this));
$('#resume_all_link').click($.proxy(this.startAllClicked,this));
$('#pause_selected_link').click($.proxy(this.stopSelectedClicked,this));
$('#resume_selected_link').click($.proxy(this.startSelectedClicked,this));
$('#remove_link').click($.proxy(this.removeClicked,this));
$('#open_link').click($.proxy(this.openTorrentClicked,this));
$('#toolbar-pause').click($.proxy(this.stopSelectedClicked,this));
$('#toolbar-start').click($.proxy(this.startSelectedClicked,this));
$('#toolbar-remove').click($.proxy(this.removeClicked,this));
$('#toolbar-open').click($.proxy(this.openTorrentClicked,this));
$('#toolbar-select').click($.proxy(this.toggleSelectionClicked,this));
$('#prefs-button').click($.proxy(this.showPrefsDialog,this));
@ -62,7 +61,7 @@ Transmission.prototype =
$('#torrent_upload_form').submit(function() { $('#upload_confirm_button').click(); return false; });
$('#inspector-close').click($.proxy(this.toggleInspector,this));
$('#toolbar-inspector').click($.proxy(this.toggleInspector,this));
if (!isMobileDevice) {
$(document).bind('keydown', $.proxy(this.keyDown,this) );
@ -80,11 +79,9 @@ Transmission.prototype =
e = {};
e.torrent_list = $('#torrent_list')[0];
e.toolbar_buttons = $('#toolbar ul li');
e.toolbar_pause_button = $('#toolbar #pause_selected')[0];
e.toolbar_pause_all_button = $('#toolbar #pause_all')[0];
e.toolbar_start_button = $('#toolbar #resume_selected')[0];
e.toolbar_start_all_button = $('#toolbar #resume_all')[0];
e.toolbar_remove_button = $('#toolbar #remove')[0];
e.toolbar_pause_button = $('#toolbar-pause')[0];
e.toolbar_start_button = $('#toolbar-start')[0];
e.toolbar_remove_button = $('#toolbar-remove')[0];
this.elements = e;
// Apply the prefs settings to the gui
@ -99,6 +96,8 @@ Transmission.prototype =
this.togglePeriodicSessionRefresh(true);
this.filterSetup();
this.updateButtonsSoon();
},
loadDaemonPrefs: function(async) {
@ -174,9 +173,6 @@ Transmission.prototype =
context_removedata: function() { tr.removeSelectedTorrentsAndData(); },
context_verify: function() { tr.verifySelectedTorrents(); },
context_reannounce: function() { tr.reannounceSelectedTorrents(); },
context_toggle_inspector: function() { tr.toggleInspector(); },
context_select_all: function() { tr.selectAll(); },
context_deselect_all: function() { tr.deselectAll(); },
context_move_top: function() { tr.moveTop(); },
context_move_up: function() { tr.moveUp(); },
context_move_down: function() { tr.moveDown(); },
@ -436,10 +432,12 @@ Transmission.prototype =
&& p.parentNode.className!=='disabled';
},
stopAllClicked: function(ev) {
toggleSelectionClicked: function(ev) {
if (this.isButtonEnabled(ev)) {
this.stopAllTorrents();
this.hideMobileAddressbar();
if (this._rows.length !== this.getSelectedRows().length)
this.selectAll();
else
this.deselectAll();
}
},
@ -450,13 +448,6 @@ Transmission.prototype =
}
},
startAllClicked: function(ev) {
if (this.isButtonEnabled(ev)) {
this.startAllTorrents();
this.hideMobileAddressbar();
}
},
startSelectedClicked: function(ev) {
if (this.isButtonEnabled(ev)) {
this.startSelectedTorrents(false);
@ -927,9 +918,6 @@ Transmission.prototype =
startSelectedTorrents: function(force) {
this.startTorrents(this.getSelectedTorrents(), force);
},
startAllTorrents: function() {
this.startTorrents(this.getAllTorrents(), false);
},
startTorrent: function(torrent) {
this.startTorrents([ torrent ], false);
},
@ -957,9 +945,6 @@ Transmission.prototype =
stopSelectedTorrents: function() {
this.stopTorrents(this.getSelectedTorrents());
},
stopAllTorrents: function() {
this.stopTorrents(this.getAllTorrents());
},
stopTorrent: function(torrent) {
this.stopTorrents([ torrent ]);
},
@ -1117,11 +1102,9 @@ Transmission.prototype =
if (isSelected && isStopped) havePausedSel = true;
}
this.setEnabled(e.toolbar_pause_button, haveActiveSel);
this.setEnabled(e.toolbar_start_button, havePausedSel);
this.setEnabled(e.toolbar_remove_button, haveSel);
this.setEnabled(e.toolbar_pause_all_button, haveActive);
this.setEnabled(e.toolbar_start_all_button, havePaused);
this.setEnabled(e.toolbar_pause_button, haveActiveSel);
this.setEnabled(e.toolbar_start_button, havePausedSel);
this.setEnabled(e.toolbar_remove_button, haveSel);
},
/****
@ -1145,14 +1128,14 @@ Transmission.prototype =
// update the ui widgetry
$('#torrent_inspector').toggle(visible);
if (isMobileDevice) {
$('#toolbar-inspector').toggleClass('selected',visible);
this.hideMobileAddressbar();
if (!isMobileDevice) {
$('body').toggleClass('inspector_showing',visible);
this.hideMobileAddressbar();
} else {
var w = visible ? $('#torrent_inspector').outerWidth() + 1 + 'px' : '0px';
$('#torrent_container')[0].style.right = w;
}
setInnerHTML($('ul li#context_toggle_inspector')[0], (visible?'Hide':'Show')+' Inspector');
},
/****
@ -1168,7 +1151,7 @@ Transmission.prototype =
popup.dialog({
autoOpen: false,
position: isMobileDevice ? 'center' : [40,80],
position: isMobileDevice ? 'center' : [40,40],
show: 'blind',
hide: 'blind',
title: 'Show',

1481
web/style/transmission/common.css
View File

File diff suppressed because it is too large Load Diff

240
web/style/transmission/common.scss
View File

@ -51,7 +51,7 @@ a {
background-repeat: no-repeat;
}
$nonselected-gradient-color-top: #EEE;
$nonselected-gradient-color-top: white;
$nonselected-gradient-color-bottom: #BBB;
$selected-gradient-color-top: #68abe6;
$selected-gradient-color-bottom: #93e8ff;
@ -95,7 +95,7 @@ $selected-gradient-color-bottom: #93e8ff;
#toolbar,
#statusbar,
.torrent_footer {
@include verticalGradient($nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
background: #CCC;
}
/***
@ -104,18 +104,21 @@ $selected-gradient-color-bottom: #93e8ff;
****
***/
#about-dialog > * {
text-align: center;
}
#about-dialog > #about-logo {
background: transparent url('images/logo.png') top left no-repeat;
width: 64px;
height: 64px;
margin-left: 100px;
}
#about-dialog > #about-title {
font-size: 1.3em;
font-weight: bold;
#about-dialog
{
> * {
text-align: center;
}
> #about-logo {
background: transparent url('images/logo.png') top left no-repeat;
width: 64px;
height: 64px;
margin-left: 100px;
}
> #about-title {
font-size: 1.3em;
font-weight: bold;
}
}
/***
@ -124,82 +127,83 @@ $selected-gradient-color-bottom: #93e8ff;
****
***/
#toolbar
div#toolbar
{
$separator-spacing: 20px;
width: 100%;
height: 75px;
margin: 0;
border-bottom: 1px outset #AEBBCB;
overflow: hidden;
-moz-user-select: none;
-webkit-user-select: none;
height: 25px;
margin: 0px;
padding: 2px;
border-bottom: 1px solid #AAA;
ul
{
height: 50px;
margin: 0;
padding: 0 7px;
text-align: center;
li
{
list-style-type: none;
list-style-image: none;
float: left;
margin: 13px 0 0 0;
height: 50px;
padding: 0 8px;
cursor: pointer;
> div {
text-shadow: 0 1px 0 #ccc;
min-width: 32px;
}
div.toolbar_image {
width: 32px;
height: 32px;
margin: 0 auto 5px;
background-image: url('images/buttons/toolbar_buttons.png');
}
&.disabled > div {
text-shadow: 0 1px 0 #fff;
opacity: 0.25;
cursor: default;
}
&.divider {
width: 0;
border-right: 1px dotted black;
opacity: 0.2;
margin: 14px 4px 0;
height: 49px;
}
/* toolbar images */
&#open div div.toolbar_image { background-position: left 0px; }
&#open div:active div.toolbar_image { background-position: right 0px; }
&#remove div div.toolbar_image { background-position: left -32px; }
&#remove div:active div.toolbar_image { background-position: right -32px; }
&#resume_selected div div.toolbar_image { background-position: left -96px; }
&#resume_selected div:active div.toolbar_image { background-position: right -96px; }
&#pause_selected div div.toolbar_image { background-position: left -64px; }
&#pause_selected div:active div.toolbar_image { background-position: right -64px; }
&#pause_all div div.toolbar_image { background-position: left -128px; }
&#pause_all div:active div.toolbar_image { background-position: right -128px; }
&#resume_all div div.toolbar_image { background-position: left -160px; }
&#resume_all div:active div.toolbar_image { background-position: right -160px; }
&#filter div div.toolbar_image { background-position: left -192px; }
&#filter div:active div.toolbar_image { background-position: right -192px; }
&#inspector div div.toolbar_image { background-position: left -224px; }
&#inspector div:active div.toolbar_image { background-position: right -224px; }
}
> * {
@include button;
width: 18px;
height: 18px;
padding: 2px 8px;
float: left;
border: 1px solid #888;
}
#inspector {
div#toolbar-open {
@include leftRoundedBox(5px);
$image-url: 'images/toolbar-folder.png';
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
&:active {
@include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
}
margin-left: 4px;
}
> div#toolbar-remove {
@include rightRoundedBox(5px);
$image-url: 'images/toolbar-close.png';
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
&:active {
@include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
}
}
> div#toolbar-start {
@include leftRoundedBox(5px);
$image-url: 'images/toolbar-start.png';
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
&:active {
@include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
}
margin-left: $separator-spacing;
}
> div#toolbar-pause {
@include rightRoundedBox(5px);
$image-url: 'images/toolbar-pause.png';
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
&:active {
@include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
}
}
> div#toolbar-select {
@include leftRoundedBox(5px);
@include rightRoundedBox(5px);
$image-url: 'images/toolbar-pointer.png';
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
&:active {
@include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
}
margin-left: $separator-spacing;
}
> div#toolbar-inspector {
@include leftRoundedBox(5px);
@include rightRoundedBox(5px);
$image-url: 'images/toolbar-info.png';
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
&:active, &.selected {
@include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
}
float: right;
margin-right: 8px;
}
> *.disabled {
opacity: 0.25;
}
}
@ -213,7 +217,7 @@ $selected-gradient-color-bottom: #93e8ff;
{
height: 24px;
width: 100%;
border-bottom: 1px outset #AEBBCB;
border-bottom: 1px solid #AAA;
overflow: hidden;
position: relative;
@ -327,7 +331,7 @@ $selected-gradient-color-bottom: #93e8ff;
div#torrent_container {
position: fixed;
top: 102px;
top: 55px;
bottom: 22px;
right: 0px;
left: 0px;
@ -349,9 +353,13 @@ ul.torrent_list
border-bottom: 1px solid #ccc;
padding: 4px 30px 5px 10px; /* Make space for buttons on the right */
color: #666;
background-color: white;
&.compact { padding: 4px; }
&.even { background-color: #EDF3FE; }
&.compact {
padding: 4px;
}
&.even { background-color: #F7F7F7; }
&.selected
{
color: white;
@ -359,9 +367,8 @@ ul.torrent_list
div.torrent_progress_details.error,
div.torrent_peer_details.error,
div.torrent_name {
color: #FFF;
}
div.torrent_name { color: #FFF; }
&.compact { div.torrent_name { color: white; } }
}
a img {
@ -560,7 +567,7 @@ div#torrent_inspector
{
padding: 15px;
position: fixed;
top: 102px;
top: 55px;
bottom: 22px;
right: 0px;
width: $inspector-width;
@ -962,18 +969,24 @@ div.torrent_footer
width: 100%;
z-index: 3;
> * {
> * {
float: left;
margin: 2px 4px;
width: 18px;
height: 12px;
padding: 2px 8px;
float: left;
border: 1px solid #888;
}
div.main_container {
$image-url: 'images/settings.png';
@include roundedButton(3px);
@include leftRoundedBox(5px);
@include rightRoundedBox(5px);
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
&:active {
@include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
}
float: left;
margin: 2px 4px;
height: 10px;
width: 24px;
border: 1px solid #666;
}
#turtle-button {
@ -1223,24 +1236,25 @@ iframe#torrent_upload_frame {
*
*--------------------------------------*/
div#jqContextMenu {
div#jqContextMenu
{
-webkit-border-radius: 5px;
border: 1px solid rgba(0,0,0,0.1);
-moz-user-select: none;
-webkit-user-select: none;
}
div#jqContextMenu ul {
filter: alpha(opacity=98);
-moz-opacity: .98;
opacity: .98;
-webkit-box-shadow: 0 10px 25px rgba(0,0,0,0.4);
-webkit-border-radius: 5px;
}
ul {
filter: alpha(opacity=98);
-moz-opacity: .98;
opacity: .98;
-webkit-box-shadow: 0 10px 25px rgba(0,0,0,0.4);
-webkit-border-radius: 5px;
}
div#jqContextMenu li.separator, div#jqContextMenu li.separator:hover {
background: inherit !important;
border-top: 1px solid #ddd !important;
margin: 5px 0 !important;
padding: 0px;
li.separator, div#jqContextMenu li.separator:hover {
background: inherit !important;
border-top: 1px solid #ddd !important;
margin: 5px 0 !important;
padding: 0px;
}
}

7
web/style/transmission/images/Makefile.am
View File

@ -13,11 +13,16 @@ dist_data_DATA = \
inspector-info.png \
inspector-peers.png \
inspector-trackers.png \
iphone_chrome.png \
lock_icon.png \
logo.png \
progress.png \
settings.png \
toolbar-close.png \
toolbar-folder.png \
toolbar-info.png \
toolbar-pause.png \
toolbar-pointer.png \
toolbar-start.png \
turtle.png \
wrench.png

1
web/style/transmission/images/buttons/Makefile.am
View File

@ -3,5 +3,4 @@ datadir = ${datarootdir}/${PACKAGE_NAME}/${subdir}
dist_data_DATA = \
cancel.png \
file_wanted_buttons.png \
toolbar_buttons.png \
torrent_buttons.png

BIN
web/style/transmission/images/buttons/toolbar_buttons.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
web/style/transmission/images/compact.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 245 B

After

Width:  |  Height:  |  Size: 204 B

BIN
web/style/transmission/images/file-priority-high.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 340 B

After

Width:  |  Height:  |  Size: 307 B

BIN
web/style/transmission/images/file-priority-low.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 335 B

After

Width:  |  Height:  |  Size: 292 B

BIN
web/style/transmission/images/file-priority-normal.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 185 B

After

Width:  |  Height:  |  Size: 178 B

BIN
web/style/transmission/images/inspector-activity.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
web/style/transmission/images/inspector-files.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 358 B

After

Width:  |  Height:  |  Size: 270 B

BIN
web/style/transmission/images/inspector-info.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 786 B

After

Width:  |  Height:  |  Size: 655 B

BIN
web/style/transmission/images/iphone_chrome.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 362 B

BIN
web/style/transmission/images/settings.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 319 B

After

Width:  |  Height:  |  Size: 257 B

BIN
web/style/transmission/images/toolbar-close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 641 B

BIN
web/style/transmission/images/toolbar-folder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 389 B

BIN
web/style/transmission/images/toolbar-info.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 463 B

BIN
web/style/transmission/images/toolbar-pause.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 224 B

BIN
web/style/transmission/images/toolbar-pointer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 365 B

BIN
web/style/transmission/images/toolbar-start.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 B

BIN
web/style/transmission/images/turtle.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 342 B

1266
web/style/transmission/mobile.css
View File

File diff suppressed because it is too large Load Diff

222
web/style/transmission/mobile.scss
View File

@ -114,84 +114,85 @@ body.open_showing #torrent_filter_bar, body.open_showing #torrent_container {
****
***/
#toolbar {
div#toolbar
{
$separator-spacing: 20px;
background: #CCC;
width: 100%;
height: 55px;
margin: 0;
background: #6685a1 url('images/iphone_chrome.png') top left repeat-x;
border: 1px outset #AEBBCB;
}
height: 25px;
margin: 0px;
padding: 2px;
border-bottom: 1px solid #AAA;
#toolbar ul {
margin: 0;
padding: 0 3px;
text-align: center;
}
> * {
@include button;
width: 18px;
height: 18px;
padding: 2px 8px;
float: left;
border: 1px solid #888;
}
#toolbar ul li {
list-style-type: none;
list-style-image: none;
margin: 4px 0 0 0;
padding: 0 2px;
cursor: pointer;
display: inline-block;
}
div#toolbar-open {
@include leftRoundedBox(5px);
$image-url: 'images/toolbar-folder.png';
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
&:active {
@include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
}
margin-left: 4px;
}
> div#toolbar-remove {
@include rightRoundedBox(5px);
$image-url: 'images/toolbar-close.png';
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
&:active {
@include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
}
}
> div#toolbar-start {
@include leftRoundedBox(5px);
$image-url: 'images/toolbar-start.png';
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
&:active {
@include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
}
margin-left: $separator-spacing;
}
> div#toolbar-pause {
@include rightRoundedBox(5px);
$image-url: 'images/toolbar-pause.png';
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
&:active {
@include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
}
}
> div#toolbar-select {
@include leftRoundedBox(5px);
@include rightRoundedBox(5px);
$image-url: 'images/toolbar-pointer.png';
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
&:active {
@include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
}
margin-left: $separator-spacing;
}
> div#toolbar-inspector {
@include leftRoundedBox(5px);
@include rightRoundedBox(5px);
$image-url: 'images/toolbar-info.png';
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
&:active, &.selected {
@include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
}
float: right;
margin-right: 8px;
}
#toolbar li#remove, li#open, li#resume_selected, li#pause_selected {
float: left;
}
#toolbar li#resume_all, li#pause_all {
float: right;
}
#toolbar ul li > div {
color: #fff;
font-size: 9px;
text-decoration: none;
padding: 0 4px 0;
display: block;
margin: 0;
background-position: top center;
background-repeat: no-repeat;
position: relative;
font-weight: bold;
}
#toolbar ul li div.toolbar_image {
width: 32px;
height: 32px;
margin: 0 auto 2px;
background-image: url('images/buttons/toolbar_buttons.png');
}
/* toolbar images */
li#open div div.toolbar_image { background-position: left 0px; }
li#open div:active div.toolbar_image { background-position: right 0px; }
li#remove div div.toolbar_image { background-position: left -32px; }
li#remove div:active div.toolbar_image { background-position: right -32px; }
li#resume_selected div div.toolbar_image { background-position: left -96px; }
li#resume_selected div:active div.toolbar_image { background-position: right -96px; }
li#pause_selected div div.toolbar_image { background-position: left -64px; }
li#pause_selected div:active div.toolbar_image { background-position: right -64px; }
li#pause_all div div.toolbar_image { background-position: left -128px; }
li#pause_all div:active div.toolbar_image { background-position: right -128px; }
li#resume_all div div.toolbar_image { background-position: left -160px; }
li#resume_all div:active div.toolbar_image { background-position: right -160px; }
li#filter div div.toolbar_image { background-position: left -192px; }
li#filter div:active div.toolbar_image { background-position: right -192px; }
li#inspector div div.toolbar_image { background-position: left -224px; }
li#inspector div:active div.toolbar_image { background-position: right -224px; }
#toolbar ul li.disabled > div {
text-shadow: 0 1px 0 #fff;
opacity: 0.25;
cursor: default;
}
#toolbar ul li#filter,
#toolbar ul li#inspector,
#toolbar ul li.divider {
display: none;
> *.disabled {
opacity: 0.25;
}
}
/***
@ -200,46 +201,42 @@ li#inspector div:active div.toolbar_image { background-position: right -22
****
***/
#statusbar {
#statusbar
{
background: #CCC;
margin: 0;
color: #fff;
background: #6B83A1;
border: 1px outset #AEBBCB;
color: black;
border-bottom: 1px solid #AAA;
width: 100%;
overflow: hidden;
position: relative;
text-align: left;
#speed-info {
margin-top: 3px;
float: right;
margin-right: 6px;
}
#filter-button {
float: left;
border: none;
font-size: 1.2em;
padding: 1px 6px;
margin-top: 1px;
overflow: hidden;
text-overflow: ellipsis;
-moz-user-select: none;
-webkit-user-select: none;
&:hover { cursor: pointer };
#filter-button .filter-selection { text-decoration: underline; }
}
#torrent_search {
display: none;
}
}
#statusbar #speed-info {
margin-top: 3px;
float: right;
margin-right: 6px;
}
#statusbar #filter-button {
float: left;
border: none;
font-size: 1.2em;
padding: 1px 6px;
margin-top: 1px;
overflow: hidden;
text-overflow: ellipsis;
-moz-user-select: none;
-webkit-user-select: none;
}
#statusbar #filter-button:hover {
cursor: pointer;
}
#statusbar #filter-button .filter-selection {
text-decoration: underline;
}
#statusbar #torrent_search {
display: none;
}
/***
****
@ -656,16 +653,6 @@ div#torrent_inspector
text-align: left;
overflow: auto;
#inspector-close
{
float: right;
display: inline;
width: 20px;
height: 20px;
margin: 10px 10px 0px 0px;
background: transparent url('images/buttons/cancel.png') no-repeat;
}
#inspector-tabs-wrapper
{
width: 100%;
@ -931,6 +918,7 @@ div.file-priority-radiobox
@include button;
width: 30px;
height: 12px;
border: 1px solid #888;
}
> div.low {