From a52ef891617e3fdbd0bf7e6719bbb0621d93e531 Mon Sep 17 00:00:00 2001 From: Sven Depondt Date: Fri, 28 Jul 2017 18:56:50 +0200 Subject: [PATCH] Add keyboard hotkeys for web interface --- web/index.html | 78 +++++++++++++ web/javascript/transmission.js | 131 ++++++++++++++++++++-- web/style/transmission/common.css | 172 ++++++++++++++++------------- web/style/transmission/common.scss | 34 ++++-- 4 files changed, 322 insertions(+), 93 deletions(-) diff --git a/web/index.html b/web/index.html index e3f131e70..d99f35164 100755 --- a/web/index.html +++ b/web/index.html @@ -281,6 +281,83 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyAction
/Show hotkeys dialog
,Open preferences
EnterConfirm dialog
ESCClose/cancel dialog
aSelect all torrents
SHIFT + aDeselect all torrents
cToggle compact view
dDelete selected torrents
BackspaceDelete selected torrents
DELDelete selected torrents
mMove torrent/Set location
oAdd/open a torrent
uAdd/open a torrent
pPause selected torrents
rResume selected torrents
tToggle turtle mode
+
+
@@ -348,6 +425,7 @@
  • Transmission Tip Jar
  • ---
  • Statistics
    • +
  • Hotkeys
    • diff --git a/web/javascript/transmission.js b/web/javascript/transmission.js index 6502182a5..bf0ea998a 100644 --- a/web/javascript/transmission.js +++ b/web/javascript/transmission.js @@ -455,11 +455,111 @@ Transmission.prototype = { keyDown: function (ev) { var handled = false; var rows = this._rows; - var up = ev.keyCode === 38; // up key pressed - var dn = ev.keyCode === 40; // down key pressed - var shift = ev.keyCode === 16; // shift key pressed + var up_key = ev.keyCode === 38; // up key pressed + var dn_key = ev.keyCode === 40; // down key pressed + var a_key = ev.keyCode === 65; // a key pressed + var c_key = ev.keyCode === 67; // c key pressed + var d_key = ev.keyCode === 68; // d key pressed + var m_key = ev.keyCode === 77; // m key pressed + var o_key = ev.keyCode === 79; // o key pressed + var p_key = ev.keyCode === 80; // p key pressed + var r_key = ev.keyCode === 82; // r key pressed + var t_key = ev.keyCode === 84; // t key pressed + var u_key = ev.keyCode === 85; // u key pressed + var shift_key = ev.keyCode === 16; // shift key pressed + var slash_key = ev.keyCode === 191; // slash (/) key pressed + var backspace_key = ev.keyCode === 8; // backspace key pressed + var del_key = ev.keyCode === 46; // delete key pressed + var enter_key = ev.keyCode === 13; // enter key pressed + var esc_key = ev.keyCode === 27; // esc key pressed + var comma_key = ev.keyCode === 188; // comma key pressed + + if ($('.dialog_heading:visible').length == 0) { + if (comma_key) { + this.togglePrefsDialogClicked(); + handled = true; + } + + if (a_key) { + if (ev.shiftKey) { + this.deselectAll(); + } else { + this.selectAll(); + } + handled = true; + } + + if (c_key) { + this.toggleCompactClicked(); + handled = true; + } + + if ((backspace_key || del_key || d_key) && rows.length) { + this.removeSelectedTorrents(); + handled = true; + } + + if (m_key) { + this.moveSelectedTorrents() + handled = true; + } + + if (o_key || u_key) { + $('body').addClass('open_showing'); + this.uploadTorrentFile(); + this.updateButtonStates(); + handled = true; + } + + if (p_key) { + this.stopSelectedTorrents(); + handled = true; + } + + if (r_key) { + this.startSelectedTorrents(); + handled = true; + } + + if (t_key) { + this.toggleTurtleClicked(); + handled = true; + } + } + + if (enter_key) { + // check if remove dialog + if ($('.dialog_heading:visible').text().match("Remove") != null) { + $("#dialog_confirm_button").click(); + handled = true; + } + + // check if upload torrent dialog + if ($('.dialog_heading:visible').text() == "Upload Torrent Files") { + this.confirmUploadClicked(); + handled = true; + } + + // check if location dialog + if ($('.dialog_heading:visible').text() == "Set Location") { + this.confirmMoveClicked(); + handled = true; + } + } + + if (slash_key) { + this.showHotkeysDialog(); + handled = true; + } + + if (esc_key) { + this.hideMoveDialog(); + this.hideUploadDialog(); + dialog.hideDialog(); + handled = true; + } - if ((up || dn) && rows.length) { + if ((up_key || dn_key) && rows.length) { var last = this.indexOfLastTorrent(), i = last, anchor = this._shift_index, @@ -467,9 +567,9 @@ Transmission.prototype = { min = 0, max = rows.length - 1; - if (dn && (i + 1 <= max)) { + if (dn_key && (i + 1 <= max)) { ++i; - } else if (up && (i - 1 >= min)) { + } else if (up_key && (i - 1 >= min)) { --i; }; @@ -493,7 +593,7 @@ Transmission.prototype = { this._last_torrent_clicked = r.getTorrentId(); this.scrollToRow(r); handled = true; - } else if (shift) { + } else if (shift_key) { this._shift_index = this.indexOfLastTorrent(); } @@ -722,6 +822,10 @@ Transmission.prototype = { this.showStatsDialog(); break; + case 'hotkeys': + this.showHotkeysDialog(); + break; + case 'about-button': o = 'Transmission ' + this.serverVersion; $('#about-dialog #about-title').html(o); @@ -1764,5 +1868,18 @@ Transmission.prototype = { onStatsDialogClosed: function () { this.hideMobileAddressbar(); this.togglePeriodicStatsRefresh(false); + }, + + /*** + **** + **** Hotkeys + **** + ***/ + showHotkeysDialog: function () { + $('#hotkeys-dialog').dialog({ + title: 'Hotkeys', + show: 'fade', + hide: 'fade' + }); } }; diff --git a/web/style/transmission/common.css b/web/style/transmission/common.css index 1f6d8d82d..1fc2d97bd 100644 --- a/web/style/transmission/common.css +++ b/web/style/transmission/common.css @@ -38,6 +38,17 @@ body { font-size: 1.3em; font-weight: bold; } +/*** +**** +**** HOTKEYS DIALOG +**** +***/ +#hotkeys-dialog table { + width: 100%; + border-collapse: collapse; } + #hotkeys-dialog table th, #hotkeys-dialog table td { + border: 1px solid #AAA; } + /*** **** **** TOOLBAR @@ -50,12 +61,12 @@ div#toolbar { padding: 2px; border-bottom: 1px solid #AAA; 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); } + background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb)); + background-image: -webkit-linear-gradient(top, #ddd, #bbb); + background-image: -moz-linear-gradient(top, #ddd, #bbb); + background-image: -ms-linear-gradient(top, #ddd, #bbb); + background-image: -o-linear-gradient(top, #ddd, #bbb); + background-image: linear-gradient(top, #ddd, #bbb); } div#toolbar > * { cursor: pointer; -moz-user-select: none; @@ -109,12 +120,12 @@ div#toolbar { overflow: hidden; position: relative; 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); } + background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb)); + background-image: -webkit-linear-gradient(top, #ddd, #bbb); + background-image: -moz-linear-gradient(top, #ddd, #bbb); + background-image: -ms-linear-gradient(top, #ddd, #bbb); + background-image: -o-linear-gradient(top, #ddd, #bbb); + background-image: linear-gradient(top, #ddd, #bbb); } #statusbar #filter { float: left; margin-left: 5px; } @@ -396,15 +407,15 @@ div#torrent_inspector { background-color: #dddddd; background-image: url("images/inspector-info.png"); /* fallback */ - background-image: url("images/inspector-info.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); + background-image: url("images/inspector-info.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB)); /* Saf4+, Chrome */ - background-image: url("images/inspector-info.png"), -webkit-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-info.png"), -webkit-linear-gradient(top, white, #BBB); /* Chrome 10+, Saf5.1+ */ - background-image: url("images/inspector-info.png"), -moz-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-info.png"), -moz-linear-gradient(top, white, #BBB); /* FF3.6+ */ - background-image: url("images/inspector-info.png"), -ms-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-info.png"), -ms-linear-gradient(top, white, #BBB); /* IE10 */ - background-image: url("images/inspector-info.png"), -o-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-info.png"), -o-linear-gradient(top, white, #BBB); /* Opera 11.10+ */ background-position: center; background-repeat: no-repeat; @@ -429,15 +440,15 @@ div#torrent_inspector { background-color: #dddddd; background-image: url("images/inspector-peers.png"); /* fallback */ - background-image: url("images/inspector-peers.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); + background-image: url("images/inspector-peers.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB)); /* Saf4+, Chrome */ - background-image: url("images/inspector-peers.png"), -webkit-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-peers.png"), -webkit-linear-gradient(top, white, #BBB); /* Chrome 10+, Saf5.1+ */ - background-image: url("images/inspector-peers.png"), -moz-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-peers.png"), -moz-linear-gradient(top, white, #BBB); /* FF3.6+ */ - background-image: url("images/inspector-peers.png"), -ms-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-peers.png"), -ms-linear-gradient(top, white, #BBB); /* IE10 */ - background-image: url("images/inspector-peers.png"), -o-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-peers.png"), -o-linear-gradient(top, white, #BBB); /* Opera 11.10+ */ background-position: center; background-repeat: no-repeat; } @@ -461,15 +472,15 @@ div#torrent_inspector { background-color: #dddddd; background-image: url("images/inspector-trackers.png"); /* fallback */ - background-image: url("images/inspector-trackers.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); + background-image: url("images/inspector-trackers.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB)); /* Saf4+, Chrome */ - background-image: url("images/inspector-trackers.png"), -webkit-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-trackers.png"), -webkit-linear-gradient(top, white, #BBB); /* Chrome 10+, Saf5.1+ */ - background-image: url("images/inspector-trackers.png"), -moz-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-trackers.png"), -moz-linear-gradient(top, white, #BBB); /* FF3.6+ */ - background-image: url("images/inspector-trackers.png"), -ms-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-trackers.png"), -ms-linear-gradient(top, white, #BBB); /* IE10 */ - background-image: url("images/inspector-trackers.png"), -o-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-trackers.png"), -o-linear-gradient(top, white, #BBB); /* Opera 11.10+ */ background-position: center; background-repeat: no-repeat; } @@ -497,15 +508,15 @@ div#torrent_inspector { background-color: #dddddd; background-image: url("images/inspector-files.png"); /* fallback */ - background-image: url("images/inspector-files.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); + background-image: url("images/inspector-files.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB)); /* Saf4+, Chrome */ - background-image: url("images/inspector-files.png"), -webkit-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-files.png"), -webkit-linear-gradient(top, white, #BBB); /* Chrome 10+, Saf5.1+ */ - background-image: url("images/inspector-files.png"), -moz-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-files.png"), -moz-linear-gradient(top, white, #BBB); /* FF3.6+ */ - background-image: url("images/inspector-files.png"), -ms-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-files.png"), -ms-linear-gradient(top, white, #BBB); /* IE10 */ - background-image: url("images/inspector-files.png"), -o-linear-gradient(top, white, #bbbbbb); + background-image: url("images/inspector-files.png"), -o-linear-gradient(top, white, #BBB); /* Opera 11.10+ */ background-position: center; background-repeat: no-repeat; } @@ -673,18 +684,18 @@ div.file-priority-radiobox { -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; - background-color: #dcdcdc; + background-color: #dddddd; 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(#f1f1f1), to(#c8c8c8)); + background-image: url("images/file-priority-low.png"), -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#c9c9c9)); /* Saf4+, Chrome */ - background-image: url("images/file-priority-low.png"), -webkit-linear-gradient(top, #f1f1f1, #c8c8c8); + background-image: url("images/file-priority-low.png"), -webkit-linear-gradient(top, #f1f1f1, #c9c9c9); /* Chrome 10+, Saf5.1+ */ - background-image: url("images/file-priority-low.png"), -moz-linear-gradient(top, #f1f1f1, #c8c8c8); + background-image: url("images/file-priority-low.png"), -moz-linear-gradient(top, #f1f1f1, #c9c9c9); /* FF3.6+ */ - background-image: url("images/file-priority-low.png"), -ms-linear-gradient(top, #f1f1f1, #c8c8c8); + background-image: url("images/file-priority-low.png"), -ms-linear-gradient(top, #f1f1f1, #c9c9c9); /* IE10 */ - background-image: url("images/file-priority-low.png"), -o-linear-gradient(top, #f1f1f1, #c8c8c8); + background-image: url("images/file-priority-low.png"), -o-linear-gradient(top, #f1f1f1, #c9c9c9); /* Opera 11.10+ */ background-position: center; background-repeat: no-repeat; @@ -706,18 +717,18 @@ div.file-priority-radiobox { background-position: center; background-repeat: no-repeat; } div.file-priority-radiobox > div.normal { - background-color: #dcdcdc; + background-color: #dddddd; 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(#f1f1f1), to(#c8c8c8)); + background-image: url("images/file-priority-normal.png"), -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#c9c9c9)); /* Saf4+, Chrome */ - background-image: url("images/file-priority-normal.png"), -webkit-linear-gradient(top, #f1f1f1, #c8c8c8); + background-image: url("images/file-priority-normal.png"), -webkit-linear-gradient(top, #f1f1f1, #c9c9c9); /* Chrome 10+, Saf5.1+ */ - background-image: url("images/file-priority-normal.png"), -moz-linear-gradient(top, #f1f1f1, #c8c8c8); + background-image: url("images/file-priority-normal.png"), -moz-linear-gradient(top, #f1f1f1, #c9c9c9); /* FF3.6+ */ - background-image: url("images/file-priority-normal.png"), -ms-linear-gradient(top, #f1f1f1, #c8c8c8); + background-image: url("images/file-priority-normal.png"), -ms-linear-gradient(top, #f1f1f1, #c9c9c9); /* IE10 */ - background-image: url("images/file-priority-normal.png"), -o-linear-gradient(top, #f1f1f1, #c8c8c8); + background-image: url("images/file-priority-normal.png"), -o-linear-gradient(top, #f1f1f1, #c9c9c9); /* Opera 11.10+ */ background-position: center; background-repeat: no-repeat; } @@ -742,18 +753,18 @@ div.file-priority-radiobox { -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; - background-color: #dcdcdc; + background-color: #dddddd; 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(#f1f1f1), to(#c8c8c8)); + background-image: url("images/file-priority-high.png"), -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#c9c9c9)); /* Saf4+, Chrome */ - background-image: url("images/file-priority-high.png"), -webkit-linear-gradient(top, #f1f1f1, #c8c8c8); + background-image: url("images/file-priority-high.png"), -webkit-linear-gradient(top, #f1f1f1, #c9c9c9); /* Chrome 10+, Saf5.1+ */ - background-image: url("images/file-priority-high.png"), -moz-linear-gradient(top, #f1f1f1, #c8c8c8); + background-image: url("images/file-priority-high.png"), -moz-linear-gradient(top, #f1f1f1, #c9c9c9); /* FF3.6+ */ - background-image: url("images/file-priority-high.png"), -ms-linear-gradient(top, #f1f1f1, #c8c8c8); + background-image: url("images/file-priority-high.png"), -ms-linear-gradient(top, #f1f1f1, #c9c9c9); /* IE10 */ - background-image: url("images/file-priority-high.png"), -o-linear-gradient(top, #f1f1f1, #c8c8c8); + background-image: url("images/file-priority-high.png"), -o-linear-gradient(top, #f1f1f1, #c9c9c9); /* Opera 11.10+ */ background-position: center; background-repeat: no-repeat; @@ -788,12 +799,12 @@ div.torrent_footer { width: 100%; z-index: 3; 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); } + background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb)); + background-image: -webkit-linear-gradient(top, #ddd, #bbb); + background-image: -moz-linear-gradient(top, #ddd, #bbb); + background-image: -ms-linear-gradient(top, #ddd, #bbb); + background-image: -o-linear-gradient(top, #ddd, #bbb); + background-image: linear-gradient(top, #ddd, #bbb); } div.torrent_footer > div { float: left; margin: 2px 4px; @@ -810,15 +821,15 @@ div.torrent_footer { background-color: #dddddd; background-image: url("images/settings.png"); /* fallback */ - background-image: url("images/settings.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); + background-image: url("images/settings.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB)); /* Saf4+, Chrome */ - background-image: url("images/settings.png"), -webkit-linear-gradient(top, white, #bbbbbb); + background-image: url("images/settings.png"), -webkit-linear-gradient(top, white, #BBB); /* Chrome 10+, Saf5.1+ */ - background-image: url("images/settings.png"), -moz-linear-gradient(top, white, #bbbbbb); + background-image: url("images/settings.png"), -moz-linear-gradient(top, white, #BBB); /* FF3.6+ */ - background-image: url("images/settings.png"), -ms-linear-gradient(top, white, #bbbbbb); + background-image: url("images/settings.png"), -ms-linear-gradient(top, white, #BBB); /* IE10 */ - background-image: url("images/settings.png"), -o-linear-gradient(top, white, #bbbbbb); + background-image: url("images/settings.png"), -o-linear-gradient(top, white, #BBB); /* Opera 11.10+ */ background-position: center; background-repeat: no-repeat; } @@ -844,15 +855,15 @@ div.torrent_footer { background-color: #dddddd; background-image: url("images/wrench.png"); /* fallback */ - background-image: url("images/wrench.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); + background-image: url("images/wrench.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB)); /* Saf4+, Chrome */ - background-image: url("images/wrench.png"), -webkit-linear-gradient(top, white, #bbbbbb); + background-image: url("images/wrench.png"), -webkit-linear-gradient(top, white, #BBB); /* Chrome 10+, Saf5.1+ */ - background-image: url("images/wrench.png"), -moz-linear-gradient(top, white, #bbbbbb); + background-image: url("images/wrench.png"), -moz-linear-gradient(top, white, #BBB); /* FF3.6+ */ - background-image: url("images/wrench.png"), -ms-linear-gradient(top, white, #bbbbbb); + background-image: url("images/wrench.png"), -ms-linear-gradient(top, white, #BBB); /* IE10 */ - background-image: url("images/wrench.png"), -o-linear-gradient(top, white, #bbbbbb); + background-image: url("images/wrench.png"), -o-linear-gradient(top, white, #BBB); /* Opera 11.10+ */ background-position: center; background-repeat: no-repeat; } @@ -878,15 +889,15 @@ div.torrent_footer { background-color: #dddddd; background-image: url("images/turtle.png"); /* fallback */ - background-image: url("images/turtle.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); + background-image: url("images/turtle.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB)); /* Saf4+, Chrome */ - background-image: url("images/turtle.png"), -webkit-linear-gradient(top, white, #bbbbbb); + background-image: url("images/turtle.png"), -webkit-linear-gradient(top, white, #BBB); /* Chrome 10+, Saf5.1+ */ - background-image: url("images/turtle.png"), -moz-linear-gradient(top, white, #bbbbbb); + background-image: url("images/turtle.png"), -moz-linear-gradient(top, white, #BBB); /* FF3.6+ */ - background-image: url("images/turtle.png"), -ms-linear-gradient(top, white, #bbbbbb); + background-image: url("images/turtle.png"), -ms-linear-gradient(top, white, #BBB); /* IE10 */ - background-image: url("images/turtle.png"), -o-linear-gradient(top, white, #bbbbbb); + background-image: url("images/turtle.png"), -o-linear-gradient(top, white, #BBB); /* Opera 11.10+ */ background-position: center; background-repeat: no-repeat; } @@ -928,15 +939,15 @@ div.torrent_footer { background-color: #dddddd; background-image: url("images/compact.png"); /* fallback */ - background-image: url("images/compact.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); + background-image: url("images/compact.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB)); /* Saf4+, Chrome */ - background-image: url("images/compact.png"), -webkit-linear-gradient(top, white, #bbbbbb); + background-image: url("images/compact.png"), -webkit-linear-gradient(top, white, #BBB); /* Chrome 10+, Saf5.1+ */ - background-image: url("images/compact.png"), -moz-linear-gradient(top, white, #bbbbbb); + background-image: url("images/compact.png"), -moz-linear-gradient(top, white, #BBB); /* FF3.6+ */ - background-image: url("images/compact.png"), -ms-linear-gradient(top, white, #bbbbbb); + background-image: url("images/compact.png"), -ms-linear-gradient(top, white, #BBB); /* IE10 */ - background-image: url("images/compact.png"), -o-linear-gradient(top, white, #bbbbbb); + background-image: url("images/compact.png"), -o-linear-gradient(top, white, #BBB); /* Opera 11.10+ */ background-position: center; background-repeat: no-repeat; } @@ -956,6 +967,11 @@ div.torrent_footer { /* Opera 11.10+ */ background-position: center; background-repeat: no-repeat; } + div.torrent_footer #freespace-info { + float: right; + text-align: right; + border: 0px; + width: 100px; } /**** ***** @@ -986,7 +1002,7 @@ div.dialog_container div.dialog_window { -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7); top: 80px; } -@media screen and (-webkit-min-device-pixel-ratio:0) { +@media screen and (-webkit-min-device-pixel-ratio: 0) { div.dialog_container div.dialog_window { top: 0; margin-top: 71px; } } @@ -1031,7 +1047,7 @@ div.dialog_container div.dialog_window a { div.dialog_container div.dialog_window a:hover, div.dialog_container div.dialog_window a:active { - background: #c0c8d6 url("images/filter_bar.png") bottom repeat-x; } + background: #C0C8D6 url("images/filter_bar.png") bottom repeat-x; } div#upload_container div.dialog_window div.dialog_message label { margin-top: 15px; diff --git a/web/style/transmission/common.scss b/web/style/transmission/common.scss index 11094b1f1..e0f2baf99 100644 --- a/web/style/transmission/common.scss +++ b/web/style/transmission/common.scss @@ -1,10 +1,10 @@ @mixin verticalGradient($topColor, $bottomColor) { background-color: mix($topColor, $bottomColor); - background-image: -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor)); - background-image: -webkit-linear-gradient(top, $topColor, $bottomColor); - background-image: -moz-linear-gradient(top, $topColor, $bottomColor); - background-image: -ms-linear-gradient(top, $topColor, $bottomColor); - background-image: -o-linear-gradient(top, $topColor, $bottomColor); + background-image: -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor)); + background-image: -webkit-linear-gradient(top, $topColor, $bottomColor); + background-image: -moz-linear-gradient(top, $topColor, $bottomColor); + background-image: -ms-linear-gradient(top, $topColor, $bottomColor); + background-image: -o-linear-gradient(top, $topColor, $bottomColor); background-image: linear-gradient(top, $topColor, $bottomColor); } @@ -113,6 +113,24 @@ body { } } +/*** +**** +**** HOTKEYS DIALOG +**** +***/ + +#hotkeys-dialog { + table { + width: 100%; + border-collapse: collapse; + + th, td { + border: 1px solid #AAA; + } + } +} + + /*** **** **** TOOLBAR @@ -305,10 +323,10 @@ ul.torrent_list height: 14px; width: 14px; } - + div.torrent_pause { background-position: left top; } div.torrent_resume { background-position: center top; } - + &:active { div.torrent_pause { background-position: left bottom; } div.torrent_resume { background-position: center bottom; } @@ -641,7 +659,7 @@ div#torrent_inspector div.inspector_torrent_file_list_entry_name { font-size: 1.2em; - color: black; + color: black; display: inline; margin-left: 0px; } -- 2.40.0