(trunk web) restore the web ui's toolbar to the 2.42 look-and-feel

This commit is contained in:
Jordan Lee 2012-01-24 20:49:46 +00:00
parent 7e83c406d4
commit 8277b5e0e8
17 changed files with 151 additions and 507 deletions

View File

@ -40,9 +40,12 @@
<div id="toolbar">
<div id="toolbar-open" title="Open Torrent"></div>
<div id="toolbar-remove" title="Remove Selected Torrents"></div>
<div id="toolbar-separator"></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-separator"></div>
<div id="toolbar-start-all" title="Start All Torrents"></div>
<div id="toolbar-pause-all" title="Pause All Torrents"></div>
<div id="toolbar-inspector" title="Toggle Inspector"></div>
</div>

View File

@ -44,9 +44,10 @@ Transmission.prototype =
$(".numberinput").forceNumeric();
$('#toolbar-pause').click($.proxy(this.stopSelectedClicked,this));
$('#toolbar-start').click($.proxy(this.startSelectedClicked,this));
$('#toolbar-pause-all').click($.proxy(this.stopAllClicked,this));
$('#toolbar-start-all').click($.proxy(this.startAllClicked,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.togglePrefsDialogClicked,this));
@ -437,15 +438,6 @@ Transmission.prototype =
&& p.parentNode.className!=='disabled';
},
toggleSelectionClicked: function(ev) {
if (this.isButtonEnabled(ev)) {
if (this._rows.length !== this.getSelectedRows().length)
this.selectAll();
else
this.deselectAll();
}
},
stopSelectedClicked: function(ev) {
if (this.isButtonEnabled(ev)) {
this.stopSelectedTorrents();
@ -460,6 +452,20 @@ Transmission.prototype =
}
},
stopAllClicked: function(ev) {
if (this.isButtonEnabled(ev)) {
this.stopAllTorrents();
this.hideMobileAddressbar();
}
},
startAllClicked: function(ev) {
if (this.isButtonEnabled(ev)) {
this.startAllTorrents(false);
this.hideMobileAddressbar();
}
},
openTorrentClicked: function(ev) {
if (this.isButtonEnabled(ev)) {
$('body').addClass('open_showing');
@ -927,6 +933,9 @@ Transmission.prototype =
this.reannounceTorrents(this.getSelectedTorrents());
},
startAllTorrents: function(force) {
this.startTorrents(this.getAllTorrents(), force);
},
startSelectedTorrents: function(force) {
this.startTorrents(this.getSelectedTorrents(), force);
},
@ -954,6 +963,9 @@ Transmission.prototype =
this.refreshTorrents, this);
},
stopAllTorrents: function() {
this.stopTorrents(this.getAllTorrents());
},
stopSelectedTorrents: function() {
this.stopTorrents(this.getSelectedTorrents());
},

View File

@ -45,11 +45,17 @@ body {
***/
div#toolbar {
width: 100%;
height: 35px;
height: 36px;
margin: 0px;
padding: 2px;
border-bottom: 1px solid #AAA;
background: url("images/red-texture.png") repeat; }
background-color: #cccccc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(top, #dddddd, #bbbbbb); }
div#toolbar > * {
cursor: pointer;
-moz-user-select: none;
@ -59,229 +65,34 @@ div#toolbar {
border-color: #aaa;
border-width: 1px;
padding: 3px;
margin-top: 5px;
width: 18px;
height: 18px;
padding: 2px 8px;
width: 34px;
height: 34px;
float: left;
border: 1px solid #888; }
div#toolbar div#toolbar-open {
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color: #dddddd;
background-image: url("images/toolbar-folder.png");
/* fallback */
background-image: url("images/toolbar-folder.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
/* Saf4+, Chrome */
background-image: url("images/toolbar-folder.png"), -webkit-linear-gradient(top, white, #bbbbbb);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-folder.png"), -moz-linear-gradient(top, white, #bbbbbb);
/* FF3.6+ */
background-image: url("images/toolbar-folder.png"), -ms-linear-gradient(top, white, #bbbbbb);
/* IE10 */
background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat;
border: none;
padding: 0px 3px; }
div#toolbar > div#toolbar-separator {
height: 25px;
margin-top: 8px;
margin-bottom: 5px;
border-left: 1px solid #aaa;
width: 3px; }
div#toolbar > div#toolbar-open {
background: url("images/toolbar-folder.png") no-repeat;
margin-left: 4px; }
div#toolbar div#toolbar-open:active, div#toolbar div#toolbar-open:hover, div#toolbar div#toolbar-open.selected {
background-color: #e6e6ff;
background-image: url("images/toolbar-folder.png");
/* fallback */
background-image: url("images/toolbar-folder.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
/* Saf4+, Chrome */
background-image: url("images/toolbar-folder.png"), -webkit-linear-gradient(top, #cdcdff, white);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-folder.png"), -moz-linear-gradient(top, #cdcdff, white);
/* FF3.6+ */
background-image: url("images/toolbar-folder.png"), -ms-linear-gradient(top, #cdcdff, white);
/* IE10 */
background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-remove {
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #dddddd;
background-image: url("images/toolbar-close.png");
/* fallback */
background-image: url("images/toolbar-close.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
/* Saf4+, Chrome */
background-image: url("images/toolbar-close.png"), -webkit-linear-gradient(top, white, #bbbbbb);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-close.png"), -moz-linear-gradient(top, white, #bbbbbb);
/* FF3.6+ */
background-image: url("images/toolbar-close.png"), -ms-linear-gradient(top, white, #bbbbbb);
/* IE10 */
background-image: url("images/toolbar-close.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-remove:active, div#toolbar > div#toolbar-remove:hover, div#toolbar > div#toolbar-remove.selected {
background-color: #e6e6ff;
background-image: url("images/toolbar-close.png");
/* fallback */
background-image: url("images/toolbar-close.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
/* Saf4+, Chrome */
background-image: url("images/toolbar-close.png"), -webkit-linear-gradient(top, #cdcdff, white);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-close.png"), -moz-linear-gradient(top, #cdcdff, white);
/* FF3.6+ */
background-image: url("images/toolbar-close.png"), -ms-linear-gradient(top, #cdcdff, white);
/* IE10 */
background-image: url("images/toolbar-close.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
background: url("images/toolbar-close.png") no-repeat; }
div#toolbar > div#toolbar-start {
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color: #dddddd;
background-image: url("images/toolbar-start.png");
/* fallback */
background-image: url("images/toolbar-start.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
/* Saf4+, Chrome */
background-image: url("images/toolbar-start.png"), -webkit-linear-gradient(top, white, #bbbbbb);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-start.png"), -moz-linear-gradient(top, white, #bbbbbb);
/* FF3.6+ */
background-image: url("images/toolbar-start.png"), -ms-linear-gradient(top, white, #bbbbbb);
/* IE10 */
background-image: url("images/toolbar-start.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat;
margin-left: 20px; }
div#toolbar > div#toolbar-start:active, div#toolbar > div#toolbar-start:hover, div#toolbar > div#toolbar-start.selected {
background-color: #e6e6ff;
background-image: url("images/toolbar-start.png");
/* fallback */
background-image: url("images/toolbar-start.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
/* Saf4+, Chrome */
background-image: url("images/toolbar-start.png"), -webkit-linear-gradient(top, #cdcdff, white);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-start.png"), -moz-linear-gradient(top, #cdcdff, white);
/* FF3.6+ */
background-image: url("images/toolbar-start.png"), -ms-linear-gradient(top, #cdcdff, white);
/* IE10 */
background-image: url("images/toolbar-start.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
background: url("images/toolbar-start.png") no-repeat; }
div#toolbar > div#toolbar-pause {
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #dddddd;
background-image: url("images/toolbar-pause.png");
/* fallback */
background-image: url("images/toolbar-pause.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
/* Saf4+, Chrome */
background-image: url("images/toolbar-pause.png"), -webkit-linear-gradient(top, white, #bbbbbb);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-pause.png"), -moz-linear-gradient(top, white, #bbbbbb);
/* FF3.6+ */
background-image: url("images/toolbar-pause.png"), -ms-linear-gradient(top, white, #bbbbbb);
/* IE10 */
background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-pause:active, div#toolbar > div#toolbar-pause:hover, div#toolbar > div#toolbar-pause.selected {
background-color: #e6e6ff;
background-image: url("images/toolbar-pause.png");
/* fallback */
background-image: url("images/toolbar-pause.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
/* Saf4+, Chrome */
background-image: url("images/toolbar-pause.png"), -webkit-linear-gradient(top, #cdcdff, white);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-pause.png"), -moz-linear-gradient(top, #cdcdff, white);
/* FF3.6+ */
background-image: url("images/toolbar-pause.png"), -ms-linear-gradient(top, #cdcdff, white);
/* IE10 */
background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-select {
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #dddddd;
background-image: url("images/toolbar-pointer.png");
/* fallback */
background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
/* Saf4+, Chrome */
background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, white, #bbbbbb);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, white, #bbbbbb);
/* FF3.6+ */
background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, white, #bbbbbb);
/* IE10 */
background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat;
margin-left: 20px; }
div#toolbar > div#toolbar-select:active, div#toolbar > div#toolbar-select:hover, div#toolbar > div#toolbar-select.selected {
background-color: #e6e6ff;
background-image: url("images/toolbar-pointer.png");
/* fallback */
background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
/* Saf4+, Chrome */
background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, #cdcdff, white);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, #cdcdff, white);
/* FF3.6+ */
background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, #cdcdff, white);
/* IE10 */
background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
background: url("images/toolbar-pause.png") no-repeat; }
div#toolbar > div#toolbar-start-all {
background: url("images/toolbar-start-all.png") no-repeat; }
div#toolbar > div#toolbar-pause-all {
background: url("images/toolbar-pause-all.png") no-repeat; }
div#toolbar > div#toolbar-inspector {
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #dddddd;
background-image: url("images/toolbar-info.png");
/* fallback */
background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
/* Saf4+, Chrome */
background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, white, #bbbbbb);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, white, #bbbbbb);
/* FF3.6+ */
background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, white, #bbbbbb);
/* IE10 */
background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat;
background: url("images/toolbar-info.png") no-repeat;
float: right;
margin-right: 8px; }
div#toolbar > div#toolbar-inspector:active, div#toolbar > div#toolbar-inspector:hover, div#toolbar > div#toolbar-inspector.selected {
background-color: #e6e6ff;
background-image: url("images/toolbar-info.png");
/* fallback */
background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
/* Saf4+, Chrome */
background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, #cdcdff, white);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, #cdcdff, white);
/* FF3.6+ */
background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, #cdcdff, white);
/* IE10 */
background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
margin-right: 4px; }
div#toolbar > *.disabled {
opacity: 0.25; }
@ -291,7 +102,7 @@ div#toolbar {
****
***/
#statusbar {
height: 24px;
height: 26px;
width: 100%;
border-bottom: 1px solid #AAA;
overflow: hidden;
@ -390,7 +201,7 @@ div#toolbar {
***/
div#torrent_container {
position: fixed;
top: 65px;
top: 66px;
bottom: 22px;
right: 0px;
left: 0px;
@ -592,7 +403,7 @@ div#torrent_inspector {
overflow: auto;
text-align: left;
padding: 15px;
top: 65px;
top: 66px;
position: fixed;
width: 570px;
z-index: 5;

View File

@ -118,17 +118,18 @@ body {
**** TOOLBAR
****
***/
$toolbar-gradient-top: #ddd;
$toolbar-gradient-bottom: #bbb;
$toolbar-height: 36px;
div#toolbar
{
$separator-spacing: 20px;
width: 100%;
height: 35px;
height: $toolbar-height;
margin: 0px;
padding: 2px;
border-bottom: 1px solid #AAA;
background: url('images/red-texture.png') repeat;
@include verticalGradient($toolbar-gradient-top, $toolbar-gradient-bottom);
$idle-color-top: $nonselected-gradient-top;
$idle-color-bottom: $nonselected-gradient-bottom;
@ -137,43 +138,45 @@ div#toolbar
> * {
@include button;
margin-top: 5px;
width: 18px;
height: 18px;
padding: 2px 8px;
width: 34px;
height: 34px;
float: left;
border: 1px solid #888;
border: none;
padding: 0px 3px;
}
div#toolbar-open {
@include leftRoundedBox(5px);
@include buttonImage('images/toolbar-folder.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
>div#toolbar-separator {
height: 25px;
margin-top: 8px;
margin-bottom: 5px;
border-left: 1px solid #aaa;
width: 3px;
}
> div#toolbar-open {
background: url('images/toolbar-folder.png') no-repeat;
margin-left: 4px;
}
> div#toolbar-remove {
@include rightRoundedBox(5px);
@include buttonImage('images/toolbar-close.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
background: url('images/toolbar-close.png') no-repeat;
}
> div#toolbar-start {
@include leftRoundedBox(5px);
@include buttonImage('images/toolbar-start.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
margin-left: $separator-spacing;
background: url('images/toolbar-start.png') no-repeat;
}
> div#toolbar-pause {
@include rightRoundedBox(5px);
@include buttonImage('images/toolbar-pause.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
background: url('images/toolbar-pause.png') no-repeat;
}
> div#toolbar-select {
@include roundedBox(5px);
@include buttonImage('images/toolbar-pointer.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
margin-left: $separator-spacing;
> div#toolbar-start-all {
background: url('images/toolbar-start-all.png') no-repeat;
}
> div#toolbar-pause-all {
background: url('images/toolbar-pause-all.png') no-repeat;
}
> div#toolbar-inspector {
@include roundedBox(5px);
@include buttonImage('images/toolbar-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
background: url('images/toolbar-info.png') no-repeat;
float: right;
margin-right: 8px;
margin-right: 4px;
}
> *.disabled {
@ -189,10 +192,11 @@ div#toolbar
$statusbar-gradient-top: #ddd;
$statusbar-gradient-bottom: #bbb;
$statusbar-height: 26px;
#statusbar
{
height: 24px;
height: $statusbar-height;
width: 100%;
border-bottom: 1px solid #AAA;
overflow: hidden;
@ -313,7 +317,7 @@ $statusbar-gradient-bottom: #bbb;
****
***/
$torrent-container-top: 65px;
$torrent-container-top: $toolbar-height + $statusbar-height + 4px;
$torrent-list-button-width: 14px;
div#torrent_container {

View File

@ -15,7 +15,6 @@ dist_data_DATA = \
inspector-info.png \
inspector-peers.png \
inspector-trackers.png \
red-texture.png \
lock_icon.png \
logo.png \
progress.png \
@ -24,8 +23,9 @@ dist_data_DATA = \
toolbar-folder.png \
toolbar-info.png \
toolbar-pause.png \
toolbar-pointer.png \
toolbar-start.png \
toolbar-pause-all.png \
toolbar-start-all.png \
turtle.png \
wrench.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 646 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 641 B

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 389 B

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 463 B

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 932 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 210 B

After

Width:  |  Height:  |  Size: 689 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 364 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 324 B

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 378 B

After

Width:  |  Height:  |  Size: 338 B

View File

@ -44,11 +44,17 @@ body.open_showing #torrent_filter_bar, body.open_showing #torrent_container {
***/
div#toolbar {
width: 100%;
height: 35px;
height: 36px;
margin: 0px;
padding: 2px;
border-bottom: 1px solid #AAA;
background: url("images/red-texture.png") repeat; }
background-color: #cccccc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(top, #dddddd, #bbbbbb); }
div#toolbar > * {
cursor: pointer;
-moz-user-select: none;
@ -59,228 +65,32 @@ div#toolbar {
border-width: 1px;
padding: 3px;
margin-top: 5px;
width: 18px;
height: 18px;
padding: 2px 8px;
width: 34px;
height: 34px;
float: left;
border: 1px solid #888; }
border: none;
padding: 0px 3px; }
div#toolbar > div#toolbar-separator {
height: 25px;
margin-top: 8px;
margin-bottom: 5px;
border-left: 1px solid #aaa;
width: 3px; }
div#toolbar div#toolbar-open {
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color: #dddddd;
background-image: url("images/toolbar-folder.png");
/* fallback */
background-image: url("images/toolbar-folder.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
/* Saf4+, Chrome */
background-image: url("images/toolbar-folder.png"), -webkit-linear-gradient(top, white, #bbbbbb);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-folder.png"), -moz-linear-gradient(top, white, #bbbbbb);
/* FF3.6+ */
background-image: url("images/toolbar-folder.png"), -ms-linear-gradient(top, white, #bbbbbb);
/* IE10 */
background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat;
margin-left: 4px; }
div#toolbar div#toolbar-open:active, div#toolbar div#toolbar-open.selected {
background-color: #e6e6ff;
background-image: url("images/toolbar-folder.png");
/* fallback */
background-image: url("images/toolbar-folder.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
/* Saf4+, Chrome */
background-image: url("images/toolbar-folder.png"), -webkit-linear-gradient(top, #cdcdff, white);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-folder.png"), -moz-linear-gradient(top, #cdcdff, white);
/* FF3.6+ */
background-image: url("images/toolbar-folder.png"), -ms-linear-gradient(top, #cdcdff, white);
/* IE10 */
background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
background: url("images/toolbar-folder.png") no-repeat; }
div#toolbar > div#toolbar-remove {
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #dddddd;
background-image: url("images/toolbar-close.png");
/* fallback */
background-image: url("images/toolbar-close.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
/* Saf4+, Chrome */
background-image: url("images/toolbar-close.png"), -webkit-linear-gradient(top, white, #bbbbbb);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-close.png"), -moz-linear-gradient(top, white, #bbbbbb);
/* FF3.6+ */
background-image: url("images/toolbar-close.png"), -ms-linear-gradient(top, white, #bbbbbb);
/* IE10 */
background-image: url("images/toolbar-close.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-remove:active, div#toolbar > div#toolbar-remove.selected {
background-color: #e6e6ff;
background-image: url("images/toolbar-close.png");
/* fallback */
background-image: url("images/toolbar-close.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
/* Saf4+, Chrome */
background-image: url("images/toolbar-close.png"), -webkit-linear-gradient(top, #cdcdff, white);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-close.png"), -moz-linear-gradient(top, #cdcdff, white);
/* FF3.6+ */
background-image: url("images/toolbar-close.png"), -ms-linear-gradient(top, #cdcdff, white);
/* IE10 */
background-image: url("images/toolbar-close.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
background: url("images/toolbar-close.png") no-repeat; }
div#toolbar > div#toolbar-start {
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color: #dddddd;
background-image: url("images/toolbar-start.png");
/* fallback */
background-image: url("images/toolbar-start.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
/* Saf4+, Chrome */
background-image: url("images/toolbar-start.png"), -webkit-linear-gradient(top, white, #bbbbbb);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-start.png"), -moz-linear-gradient(top, white, #bbbbbb);
/* FF3.6+ */
background-image: url("images/toolbar-start.png"), -ms-linear-gradient(top, white, #bbbbbb);
/* IE10 */
background-image: url("images/toolbar-start.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat;
margin-left: 20px; }
div#toolbar > div#toolbar-start:active, div#toolbar > div#toolbar-start.selected {
background-color: #e6e6ff;
background-image: url("images/toolbar-start.png");
/* fallback */
background-image: url("images/toolbar-start.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
/* Saf4+, Chrome */
background-image: url("images/toolbar-start.png"), -webkit-linear-gradient(top, #cdcdff, white);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-start.png"), -moz-linear-gradient(top, #cdcdff, white);
/* FF3.6+ */
background-image: url("images/toolbar-start.png"), -ms-linear-gradient(top, #cdcdff, white);
/* IE10 */
background-image: url("images/toolbar-start.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
background: url("images/toolbar-start.png") no-repeat; }
div#toolbar > div#toolbar-pause {
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #dddddd;
background-image: url("images/toolbar-pause.png");
/* fallback */
background-image: url("images/toolbar-pause.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
/* Saf4+, Chrome */
background-image: url("images/toolbar-pause.png"), -webkit-linear-gradient(top, white, #bbbbbb);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-pause.png"), -moz-linear-gradient(top, white, #bbbbbb);
/* FF3.6+ */
background-image: url("images/toolbar-pause.png"), -ms-linear-gradient(top, white, #bbbbbb);
/* IE10 */
background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-pause:active, div#toolbar > div#toolbar-pause.selected {
background-color: #e6e6ff;
background-image: url("images/toolbar-pause.png");
/* fallback */
background-image: url("images/toolbar-pause.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
/* Saf4+, Chrome */
background-image: url("images/toolbar-pause.png"), -webkit-linear-gradient(top, #cdcdff, white);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-pause.png"), -moz-linear-gradient(top, #cdcdff, white);
/* FF3.6+ */
background-image: url("images/toolbar-pause.png"), -ms-linear-gradient(top, #cdcdff, white);
/* IE10 */
background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-select {
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #dddddd;
background-image: url("images/toolbar-pointer.png");
/* fallback */
background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
/* Saf4+, Chrome */
background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, white, #bbbbbb);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, white, #bbbbbb);
/* FF3.6+ */
background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, white, #bbbbbb);
/* IE10 */
background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat;
margin-left: 20px; }
div#toolbar > div#toolbar-select:active, div#toolbar > div#toolbar-select.selected {
background-color: #e6e6ff;
background-image: url("images/toolbar-pointer.png");
/* fallback */
background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
/* Saf4+, Chrome */
background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, #cdcdff, white);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, #cdcdff, white);
/* FF3.6+ */
background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, #cdcdff, white);
/* IE10 */
background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
background: url("images/toolbar-pause.png") no-repeat; }
div#toolbar > div#toolbar-start-all {
background: url("images/toolbar-start-all.png") no-repeat; }
div#toolbar > div#toolbar-pause-all {
background: url("images/toolbar-pause-all.png") no-repeat; }
div#toolbar > div#toolbar-inspector {
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #dddddd;
background-image: url("images/toolbar-info.png");
/* fallback */
background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
/* Saf4+, Chrome */
background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, white, #bbbbbb);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, white, #bbbbbb);
/* FF3.6+ */
background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, white, #bbbbbb);
/* IE10 */
background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat;
float: right;
margin-right: 8px; }
div#toolbar > div#toolbar-inspector:active, div#toolbar > div#toolbar-inspector.selected {
background-color: #e6e6ff;
background-image: url("images/toolbar-info.png");
/* fallback */
background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
/* Saf4+, Chrome */
background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, #cdcdff, white);
/* Chrome 10+, Saf5.1+ */
background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, #cdcdff, white);
/* FF3.6+ */
background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, #cdcdff, white);
/* IE10 */
background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-position: center;
background-repeat: no-repeat; }
background: url("images/toolbar-info.png") no-repeat;
float: right; }
div#toolbar > *.disabled {
opacity: 0.25; }
@ -290,7 +100,7 @@ div#toolbar {
****
***/
#statusbar {
height: 24px;
height: 26px;
width: 100%;
border-bottom: 1px solid #AAA;
overflow: hidden;

View File

@ -111,16 +111,18 @@ body.open_showing #torrent_filter_bar, body.open_showing #torrent_container {
****
***/
$toolbar-gradient-top: #ddd;
$toolbar-gradient-bottom: #bbb;
$toolbar-height: 36px;
div#toolbar
{
$separator-spacing: 20px;
width: 100%;
height: 35px;
height: $toolbar-height;
margin: 0px;
padding: 2px;
border-bottom: 1px solid #AAA;
background: url('images/red-texture.png') repeat;
@include verticalGradient($toolbar-gradient-top, $toolbar-gradient-bottom);
$idle-color-top: $nonselected-gradient-top;
$idle-color-bottom: $nonselected-gradient-bottom;
@ -130,42 +132,43 @@ div#toolbar
> * {
@include button;
margin-top: 5px;
width: 18px;
height: 18px;
padding: 2px 8px;
width: 34px;
height: 34px;
float: left;
border: 1px solid #888;
border: none;
padding: 0px 3px;
}
>div#toolbar-separator {
height: 25px;
margin-top: 8px;
margin-bottom: 5px;
border-left: 1px solid #aaa;
width: 3px;
}
div#toolbar-open {
@include leftRoundedBox(5px);
@include buttonImage('images/toolbar-folder.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
margin-left: 4px;
background: url('images/toolbar-folder.png') no-repeat;
}
> div#toolbar-remove {
@include rightRoundedBox(5px);
@include buttonImage('images/toolbar-close.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
background: url('images/toolbar-close.png') no-repeat;
}
> div#toolbar-start {
@include leftRoundedBox(5px);
@include buttonImage('images/toolbar-start.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
margin-left: $separator-spacing;
background: url('images/toolbar-start.png') no-repeat;
}
> div#toolbar-pause {
@include rightRoundedBox(5px);
@include buttonImage('images/toolbar-pause.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
background: url('images/toolbar-pause.png') no-repeat;
}
> div#toolbar-select {
@include roundedBox(5px);
@include buttonImage('images/toolbar-pointer.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
margin-left: $separator-spacing;
> div#toolbar-start-all {
background: url('images/toolbar-start-all.png') no-repeat;
}
> div#toolbar-pause-all {
background: url('images/toolbar-pause-all.png') no-repeat;
}
> div#toolbar-inspector {
@include roundedBox(5px);
@include buttonImage('images/toolbar-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
background: url('images/toolbar-info.png') no-repeat;
float: right;
margin-right: 8px;
}
> *.disabled {
@ -181,10 +184,11 @@ div#toolbar
$statusbar-gradient-top: #ddd;
$statusbar-gradient-bottom: #bbb;
$statusbar-height: 26px;
#statusbar
{
height: 24px;
height: $statusbar-height;
width: 100%;
border-bottom: 1px solid #AAA;
overflow: hidden;