(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 6cc61536884baf73f86ecebc75bf4e887265e135..d8de9ea5909e3f67994ea3262114c9e8c6fcc74a 100644 (file)
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 4e505df42ef5fd439b0fb71272c98256d01fdc40..f30cf84fc7474a11cce5de4fc5622e7a692178bd 100755 (executable)
--- a/web/index.html
+++ b/web/index.html
@@ -471,7 +471,6 @@
                </div>
 
                <div class="torrent_footer">
-                       <div id="disk_space_container"></div>
                        <ul id="settings_menu">
                                <li id="button">&nbsp;
                                        <ul id="footer_super_menu">
@@ -540,9 +539,8 @@
                                        </ul>
                                </li>
                        </ul>
+                       <div id="turtle-button">&nbsp;</div>
                        <div id="compact-button">&nbsp;</div>
-                       <div id="turtle_button">&nbsp;</div>
-                       <div style="clear: both; visibility: hidden;"></div>
                </div>
 
                <div class="contextMenu" id="torrent_context_menu">

diff --git a/web/javascript/transmission.js b/web/javascript/transmission.js
index f82424026bfee5d95cfe3f43ac8c00af72f36d48..8c23be3f94c42d45c5c4f73ee8adb010585a585c 100644 (file)
--- 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 a6c5eb2b08bcfcd5615105f78e807270e0ff8c84..6e2c784b617a5d7941e3af90a15fbcc0d0105089 100644 (file)
--- 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 8c54ac1a15b1beb54b420786477c4bebb5e49bac..08d54070f434b5d1b8c25da6bc50dfc97f0c8a4c 100644 (file)
--- 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;
 }
 
 /*--------------------------------------