From: Jordan Lee Date: Tue, 30 Aug 2011 00:16:34 +0000 (+0000) Subject: (trunk web) make the corners of the footer buttons handle transparency. X-Git-Tag: 2.40b1~111 X-Git-Url: https://granicus.if.org/sourcecode?a=commitdiff_plain;h=05155db22c707df3ece5c2e41de492c060cc2da2;p=transmission (trunk web) make the corners of the footer buttons handle transparency. --- diff --git a/web/images/graphics/chrome.png b/web/images/graphics/chrome.png index 6cc615368..d8de9ea59 100644 Binary files a/web/images/graphics/chrome.png and b/web/images/graphics/chrome.png differ diff --git a/web/index.html b/web/index.html index 4e505df42..f30cf84fc 100755 --- a/web/index.html +++ b/web/index.html @@ -471,7 +471,6 @@
-
+
 
 
-
 
-
diff --git a/web/javascript/transmission.js b/web/javascript/transmission.js index f82424026..8c23be3f9 100644 --- a/web/javascript/transmission.js +++ b/web/javascript/transmission.js @@ -53,8 +53,8 @@ Transmission.prototype = $('#open_link').click(function(e) { tr.openTorrentClicked(e); }); $('#upload_confirm_button').click(function(e) { tr.confirmUploadClicked(e); return false;}); $('#upload_cancel_button').click(function(e) { tr.hideUploadDialog(); return false; }); - $('#turtle_button').click(function() { tr.toggleTurtleClicked(); return false; }); - $('#compact-button').click(function() { tr.toggleCompactClicked(); return false; }); + $('#turtle-button').click(function() { tr.toggleTurtleClicked(); }); + $('#compact-button').click(function() { tr.toggleCompactClicked(); }); $('#prefs-tab-general').click(function() { tr.selectPrefsTab('general'); }); $('#prefs-tab-speed').click(function() { tr.selectPrefsTab('speed'); }); $('#prefs-tab-peers').click(function() { tr.selectPrefsTab('peers'); }); @@ -752,19 +752,12 @@ Transmission.prototype = }, updateTurtleButton: function() { - var t; - var w = $('#turtle_button'); - if (this[Prefs._TurtleState]) { - w.addClass('turtleEnabled'); - w.removeClass('turtleDisabled'); - t = [ 'Click to disable Temporary Speed Limits' ]; - } else { - w.removeClass('turtleEnabled'); - w.addClass('turtleDisabled'); - t = [ 'Click to enable Temporary Speed Limits' ]; - } - t.push('(', Transmission.fmt.speed(this._prefs[RPC._TurtleUpSpeedLimit]), 'up,', - Transmission.fmt.speed(this._prefs[RPC._TurtleDownSpeedLimit]), 'down)'); + var enabled = this[Prefs._TurtleState], + w = $('#turtle-button'), + t = [ 'Click to ', (enabled?'disable':'enable'), ' Temporary Speed Limits', + '(', Transmission.fmt.speed(this._prefs[RPC._TurtleUpSpeedLimit]), 'up,', + Transmission.fmt.speed(this._prefs[RPC._TurtleDownSpeedLimit]), 'down)' ]; + w.toggleClass('enabled',enabled); w.attr('title', t.join(' ')); }, diff --git a/web/stylesheets/common.css b/web/stylesheets/common.css index a6c5eb2b0..6e2c784b6 100644 --- a/web/stylesheets/common.css +++ b/web/stylesheets/common.css @@ -28,6 +28,17 @@ a { outline: 0; } +#toolbar, +#statusbar, +.torrent_footer { + background-color: #B9B9B9; /* fallback color if gradients are not supported */ + background-image: -webkit-gradient(linear, left top, left bottom, from(#C9C9C9), to(#A7A7A7)); + background-image: -webkit-linear-gradient(top, #C9C9C9, #A7A7A7); + background-image: -moz-linear-gradient(top, #C9C9C9, #A7A7A7); + background-image: -ms-linear-gradient(top, #C9C9C9, #A7A7A7); + background-image: -o-linear-gradient(top, #C9C9C9, #A7A7A7); + background-image: linear-gradient(top, #C9C9C9, #A7A7A7); /* standard, but currently unimplemented */ +} /*** **** @@ -39,7 +50,6 @@ a { width: 100%; height: 75px; margin: 0; - background: transparent url('../images/graphics/chrome.png') left top repeat-x; border: 1px outset #AEBBCB; overflow: hidden; -moz-user-select: none; @@ -126,7 +136,6 @@ li#inspector div:active div.toolbar_image { background-position: right -22 ***/ #statusbar { - background: #ACACAC; border: 1px outset #AEBBCB; height: 24px; width: 100%; @@ -864,90 +873,66 @@ li.inspector_torrent_file_list_entry.complete div.file_priority_control { *--------------------------------------*/ div.torrent_footer { - background: #aaa url('../images/graphics/chrome.png') left -142px repeat-x; + height: 22px; border-top: 1px solid #555; bottom: 0; - height: 22px; position: fixed; width: 100%; z-index: 3; } -div.torrent_footer ul#settings_menu li#button { - height: 22px; - width: 32px !important; - background: transparent url('../images/graphics/chrome.png') left -75px no-repeat; - margin: 0 0 0 3px; - padding: 0; - float: left; +div.torrent_footer > * { position: relative; + float: left; + margin: 2px 4px; +} +div.torrent_footer > *, +div.torrent_footer ul#settings_menu li#button { + height: 18px; + width: 32px; + cursor: pointer; -moz-user-select: none; -webkit-user-select: none; } -div.torrent_footer ul#settings_menu li#button:active { - background: transparent url('../images/graphics/chrome.png') -32px -75px no-repeat; +div.torrent_footer ul#settings_menu li#button { + background: transparent url('../images/graphics/chrome.png') left top no-repeat; + padding: 0; + position: relative; } - +div.torrent_footer ul#settings_menu li#button:active, div.torrent_footer ul#settings_menu li#button:hover { - background: transparent url('../images/graphics/chrome.png') -32px -75px no-repeat; + background-position: -32px top; } -div.torrent_footer div#disk_space_container { - float: right; - font-size: 1.1em; - line-height: 22px; - vertical-align: middle; - margin: 0 20px 0 0; - padding: 0px; +#turtle-button { + background: transparent url('../images/graphics/chrome.png') left -18px no-repeat; } - -div.torrent_footer div#turtle_button { - height: 22px; - width: 32px !important; - margin: 0 0 0 38px; - padding: 0; - cursor: pointer; - -moz-user-select: none; - -webkit-user-select: none; -} - -.turtleEnabled { - background: transparent url('../images/graphics/chrome.png') left -119px no-repeat; -} -.turtleEnabled:active { - background: transparent url('../images/graphics/chrome.png') -32px -119px no-repeat; +#turtle-button:active, +#turtle-button:hover { + background-position: -32px -18px; } -.turtleDisabled { - background: transparent url('../images/graphics/chrome.png') left -97px no-repeat; +#turtle-button.enabled { + background-position: left -36px; } -.turtleDisabled:active { - background: transparent url('../images/graphics/chrome.png') -32px -97px no-repeat; +#turtle-button.enabled:active, +#turtle-button.enabled:hover { + background-position: -32px -36px; } -div.torrent_footer #compact-button { - height: 22px; - width: 32px !important; - visibility: visible; - padding: 0; - float: left; - margin-left: 38px; - position: relative; - cursor: pointer; - -moz-user-select: none; - -webkit-user-select: none; +#compact-button { + background: transparent url('../images/graphics/chrome.png') left -54px no-repeat; } -div.torrent_footer #compact-button { - background: transparent url('../images/graphics/chrome.png') left -185px no-repeat; +#compact-button:active, +#compact-button:hover { + background-position: -32px -54px; } -div.torrent_footer #compact-button:active { - background: transparent url('../images/graphics/chrome.png') -32px -185px no-repeat; +#compact-button.enabled { + background-position: left -72px; } -div.torrent_footer #compact-button.enabled { - background: transparent url('../images/graphics/chrome.png') left -163px no-repeat; -} -div.torrent_footer #compact-button.enabled:active { - background: transparent url('../images/graphics/chrome.png') -32px -163px no-repeat; +#compact-button.enabled:active, +#compact-button.enabled:hover { + background-position: -32px -72px; } @@ -1284,17 +1269,20 @@ div#prefs_container div#pref_error { .trans_menu { margin: 0; padding: 0; - cursor: default; } -.trans_menu, .trans_menu ul { +.trans_menu, +.trans_menu ul { list-style: none; } .trans_menu ul { + /* place it right above the button */ + position: relative; + bottom: 18px; + min-width: 210px; - background-color: #fff; - opacity: .98; + background-color: white; padding: 5px 0; text-align: left; list-style: none; @@ -1310,7 +1298,7 @@ div#prefs_container div#pref_error { min-width: 175px; } -.trans_menu li { +.trans_menu > * li { margin: 0; padding: 0 10px 2px 20px !important; color: #000; @@ -1327,7 +1315,8 @@ div#prefs_container div#pref_error { text-shadow: none; } -.trans_menu li.separator, .trans_menu li.separator.hover { +.trans_menu li.separator, +.trans_menu li.separator.hover { border-top: 1px solid #ddd; margin: 5px 0; padding: 0px; @@ -1343,7 +1332,7 @@ div#prefs_container div#pref_error { } .trans_menu li.hover li.hover span.arrow, .trans_menu li.hover li.hover li.hover span.selected { - color: #fff; + color: white; } .trans_menu span.selected { @@ -1365,21 +1354,11 @@ div#prefs_container div#pref_error { margin: 0; } -.trans_menu li.main { - float: left; - padding: 0 !important; - width: 30px !important; -} - .trans_menu li.main li { z-index: 2; min-width: 78px; } -.trans_menu li.main.active { - background: transparent url('../images/graphics/chrome.png') right -75px no-repeat !important; -} - .trans_menu a { text-decoration: none; cursor: default; diff --git a/web/stylesheets/mobile.css b/web/stylesheets/mobile.css index 8c54ac1a1..08d54070f 100644 --- a/web/stylesheets/mobile.css +++ b/web/stylesheets/mobile.css @@ -857,9 +857,8 @@ ul.single_file li.inspector_torrent_file_list_entry>.file_priority_control, li.i *--------------------------------------*/ div.torrent_footer { - margin: -1px 0 0; + margin: 0px; height: 20px; - background: #ddd url('../images/graphics/filter_bar.png') repeat-x left -51px; border-top: 1px solid #777; position: relative; width: 100%; @@ -868,6 +867,14 @@ div.torrent_footer { color: #222; text-shadow: 0 1px 1px #fff; overflow: hidden; + + background-color: #B9B9B9; /* fallback color if gradients are not supported */ + background-image: -webkit-gradient(linear, left top, left bottom, from(#C9C9C9), to(#A7A7A7)); + background-image: -webkit-linear-gradient(top, #C9C9C9, #A7A7A7); + background-image: -moz-linear-gradient(top, #C9C9C9, #A7A7A7); + background-image: -ms-linear-gradient(top, #C9C9C9, #A7A7A7); + background-image: -o-linear-gradient(top, #C9C9C9, #A7A7A7); + background-image: linear-gradient(top, #C9C9C9, #A7A7A7); /* standard, but currently unimplemented */ } div.torrent_footer div#disk_space_container, div.torrent_footer a#preferences_link { @@ -904,69 +911,41 @@ iframe#torrent_upload_frame { margin: 0; } -div.torrent_footer #compact-button { +div.torrent_footer #compact-button, +div.torrent_footer #turtle-button { position: absolute; - top: 0px; - right: 0px; - margin: 2px; height: 18px; width: 32px !important; -} -div.torrent_footer #compact-button { - background: transparent url('../images/graphics/chrome.png') left -31px no-repeat; -} -div.torrent_footer #compact-button.active { - background: transparent url('../images/graphics/chrome.png') -32px -31px no-repeat; -} -div.torrent_footer #compact-button.enabled { - background: transparent url('../images/graphics/chrome.png') left -53px no-repeat; -} -div.torrent_footer #compact-button.enabled.active { - background: transparent url('../images/graphics/chrome.png') -32px -53px no-repeat; -} - -div.torrent_footer div#turtle_button { - position: absolute; top: 0px; - left: 0px; margin: 2px; - height: 18px; - width: 32px !important; } -.turtleEnabled { - background: transparent url('../images/graphics/chrome.png') left -121px no-repeat; +#compact-button { + right: 0px; + background: transparent url('../images/graphics/chrome.png') left -54px no-repeat; } -.turtleEnabled:active { - background: transparent url('../images/graphics/chrome.png') -32px -121px no-repeat; +#compact-button:active { + background-position: -32px -54px; } -.turtleDisabled { - background: transparent url('../images/graphics/chrome.png') left -99px no-repeat; +#compact-button.enabled { + background-position: left -72px; } -.turtleDisabled:active { - background: transparent url('../images/graphics/chrome.png') -32px -99px no-repeat; +#compact-button.enabled:active { + background-position: -32px -72px; } -div.torrent_footer #compact-button { - position: absolute; - top: 0px; - right: 0px; - margin: 2px; - height: 18px; - width: 32px !important; - visibility: visible; -} -div.torrent_footer #compact-button { - background: transparent url('../images/graphics/chrome.png') left -187px no-repeat; +#turtle-button { + left: 0px; + background: transparent url('../images/graphics/chrome.png') left -18px no-repeat; } -div.torrent_footer #compact-button:active { - background: transparent url('../images/graphics/chrome.png') -32px -187px no-repeat; +#turtle-button:active { + background-position: -32px -18px; } -div.torrent_footer #compact-button.enabled { - background: transparent url('../images/graphics/chrome.png') left -165px no-repeat; +#turtle-button.enabled { + background-position: left -36px; } -div.torrent_footer #compact-button.enabled:active { - background: transparent url('../images/graphics/chrome.png') -32px -165px no-repeat; +#turtle-button.enabled:active { + background-position: -32px -36px; } /*--------------------------------------