Changeset 13053


Ignore:
Timestamp:
Oct 27, 2011, 2:31:58 AM (10 years ago)
Author:
jordan
Message:

(trunk web) give the filter bar a gradient background like the bottom bar's. continue resolving the diffs between common.scss and mobile.scss.

Location:
trunk/web/style/transmission
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/web/style/transmission/common.css

    r13052 r13053  
    3434div#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-image: url("images/toolbar-pause.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
    3535div#toolbar > div#toolbar-pause:active, div#toolbar > div#toolbar-pause:hover, div#toolbar > div#toolbar-pause.selected { background-color: #7dc9f2; background-image: url("images/toolbar-pause.png"); /* fallback */ background-image: url("images/toolbar-pause.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-pause.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-pause.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-pause.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-pause.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
    36 div#toolbar > div#toolbar-select { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -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-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-image: url("images/toolbar-pointer.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; margin-left: 20px; }
     36div#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-image: url("images/toolbar-pointer.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; margin-left: 20px; }
    3737div#toolbar > div#toolbar-select:active, div#toolbar > div#toolbar-select:hover, div#toolbar > div#toolbar-select.selected { background-color: #7dc9f2; background-image: url("images/toolbar-pointer.png"); /* fallback */ background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-pointer.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
    38 div#toolbar > div#toolbar-prefs { -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-wrench.png"); /* fallback */ background-image: url("images/toolbar-wrench.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-wrench.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-wrench.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-wrench.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-wrench.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-wrench.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; border-right-width: 0px; float: right; }
    39 div#toolbar > div#toolbar-prefs:active, div#toolbar > div#toolbar-prefs:hover, div#toolbar > div#toolbar-prefs.selected { background-color: #7dc9f2; background-image: url("images/toolbar-wrench.png"); /* fallback */ background-image: url("images/toolbar-wrench.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-wrench.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-wrench.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-wrench.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-wrench.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-wrench.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
    40 div#toolbar > div#toolbar-inspector { -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-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-image: url("images/toolbar-info.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; float: right; margin-right: 8px; }
     38div#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-image: url("images/toolbar-info.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; float: right; margin-right: 8px; }
    4139div#toolbar > div#toolbar-inspector:active, div#toolbar > div#toolbar-inspector:hover, div#toolbar > div#toolbar-inspector.selected { background-color: #7dc9f2; background-image: url("images/toolbar-info.png"); /* fallback */ background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-info.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
    4240div#toolbar > *.disabled { opacity: 0.25; }
     
    4745****
    4846***/
    49 #statusbar { height: 24px; width: 100%; border-bottom: 1px solid #AAA; overflow: hidden; position: relative; background-color: #CCC; }
     47#statusbar { height: 24px; width: 100%; border-bottom: 1px solid #AAA; overflow: hidden; position: relative; background-color: #dddddd; background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); background-image: -webkit-linear-gradient(top, white, #bbbbbb); background-image: -moz-linear-gradient(top, white, #bbbbbb); background-image: -ms-linear-gradient(top, white, #bbbbbb); background-image: -o-linear-gradient(top, white, #bbbbbb); background-image: linear-gradient(top, white, #bbbbbb); }
    5048#statusbar #speed-info { margin-top: 5px; margin-left: 45%; text-align: left; }
    5149#statusbar #speed-info * { display: inline-block; }
     
    9997ul.torrent_list li.torrent div.torrent_name.paused { font-weight: normal; color: #777; }
    10098ul.torrent_list li.torrent div.torrent_progress_details, ul.torrent_list li.torrent div.torrent_peer_details { clear: left; font-size: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    101 ul.torrent_list li.torrent div.torrent_progress_details.error, ul.torrent_list li.torrent div.torrent_peer_details.error { color: #FF0000; }
     99ul.torrent_list li.torrent div.torrent_progress_details.error, ul.torrent_list li.torrent div.torrent_peer_details.error { color: #F00; }
    102100
    103101/** Progressbar  Each progressbar has three elemens: a parent container and two children, complete and incomplete.  The only thing needed to set the progressbar percentage is to set the complete child's width as a percentage. This is because incomplete is pinned to the full width and height of the parent, and complete is pinned to the left side of the parent and has a higher z-index.  The progressbar has different colors depending on its state, so there are five 'decorator' classNames: paused, queued, magnet, leeching, seeding. */
     
    230228*****
    231229****/
    232 div.torrent_footer { height: 22px; border-top: 1px solid #555; bottom: 0; position: fixed; width: 100%; z-index: 3; }
     230div.torrent_footer { height: 22px; border-top: 1px solid #555; bottom: 0; position: fixed; width: 100%; z-index: 3; background-color: #dddddd; background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); background-image: -webkit-linear-gradient(top, white, #bbbbbb); background-image: -moz-linear-gradient(top, white, #bbbbbb); background-image: -ms-linear-gradient(top, white, #bbbbbb); background-image: -o-linear-gradient(top, white, #bbbbbb); background-image: linear-gradient(top, white, #bbbbbb); }
    233231div.torrent_footer > * { float: left; margin: 2px 4px; width: 18px; height: 12px; padding: 2px 8px; float: left; border: 1px solid #888; }
    234 div.torrent_footer div.main_container { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -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/settings.png"); /* fallback */ background-image: url("images/settings.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/settings.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/settings.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/settings.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/settings.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/settings.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
     232div.torrent_footer div.main_container { -moz-border-radius: 5px; border-radius: 5px; 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)); /* Saf4+, Chrome */ background-image: url("images/settings.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/settings.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/settings.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/settings.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/settings.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
    235233div.torrent_footer div.main_container:active, div.torrent_footer div.main_container:hover, div.torrent_footer div.main_container.selected { background-color: #7dc9f2; background-image: url("images/settings.png"); /* fallback */ background-image: url("images/settings.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/settings.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/settings.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/settings.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/settings.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/settings.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
    236 div.torrent_footer #turtle-button { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -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/turtle.png"); /* fallback */ background-image: url("images/turtle.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/turtle.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/turtle.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/turtle.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/turtle.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/turtle.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
     234div.torrent_footer #prefs-button { -moz-border-radius: 5px; border-radius: 5px; background-color: #dddddd; background-image: url("images/toolbar-wrench.png"); /* fallback */ background-image: url("images/toolbar-wrench.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-wrench.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-wrench.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-wrench.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-wrench.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-wrench.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; float: right; }
     235div.torrent_footer #prefs-button:active, div.torrent_footer #prefs-button:hover, div.torrent_footer #prefs-button.selected { background-color: #7dc9f2; background-image: url("images/toolbar-wrench.png"); /* fallback */ background-image: url("images/toolbar-wrench.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-wrench.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-wrench.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-wrench.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-wrench.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-wrench.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
     236div.torrent_footer #turtle-button { -moz-border-radius: 5px; border-radius: 5px; 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)); /* Saf4+, Chrome */ background-image: url("images/turtle.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/turtle.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/turtle.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/turtle.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/turtle.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
    237237div.torrent_footer #turtle-button:active, div.torrent_footer #turtle-button:hover, div.torrent_footer #turtle-button.selected { background-color: #7dc9f2; background-image: url("images/turtle.png"); /* fallback */ background-image: url("images/turtle.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/turtle.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/turtle.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/turtle.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/turtle.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/turtle.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
    238 div.torrent_footer #compact-button { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -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/compact.png"); /* fallback */ background-image: url("images/compact.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/compact.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/compact.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/compact.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/compact.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/compact.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
     238div.torrent_footer #compact-button { -moz-border-radius: 5px; border-radius: 5px; 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)); /* Saf4+, Chrome */ background-image: url("images/compact.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/compact.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/compact.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/compact.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/compact.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
    239239div.torrent_footer #compact-button:active, div.torrent_footer #compact-button:hover, div.torrent_footer #compact-button.selected { background-color: #7dc9f2; background-image: url("images/compact.png"); /* fallback */ background-image: url("images/compact.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/compact.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/compact.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/compact.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/compact.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/compact.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
    240240
  • trunk/web/style/transmission/common.scss

    r13052 r13053  
    4444        padding: 3px;
    4545}
    46 @mixin roundedButton($radius) {
    47         @include button;
    48         border-top-left-radius: $radius;
    49         border-top-right-radius: $radius;
    50         border-bottom-left-radius: $radius;
    51         border-bottom-right-radius: $radius;
    52         -moz-border-radius-topleft: $radius;
    53         -moz-border-radius-bottomleft: $radius;
    54         -moz-border-radius-topright: $radius;
    55         -moz-border-radius-bottomright: $radius;
     46
     47@mixin roundedBox($radius) {
     48        -moz-border-radius: $radius;
     49        border-radius: $radius;
    5650}
    5751
     
    6761        border-top-right-radius: $radius;
    6862        border-bottom-right-radius: $radius;
     63}
     64
     65@mixin roundedButton($radius) {
     66        @include button;
     67        @include roundedBox($radius);
    6968}
    7069
     
    178177        }
    179178        > div#toolbar-select {
    180                 @include leftRoundedBox(5px);
    181                 @include rightRoundedBox(5px);
     179                @include roundedBox(5px);
    182180                @include buttonImage('images/toolbar-pointer.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    183181                margin-left: $separator-spacing;
    184182        }
    185183
    186         > div#toolbar-prefs {
    187                 @include leftRoundedBox(5px);
    188                 @include buttonImage('images/toolbar-wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    189                 border-right-width: 0px;
    190                 float: right;
    191         }
    192184        > div#toolbar-inspector {
    193                 @include rightRoundedBox(5px);
     185                @include roundedBox(5px);
    194186                @include buttonImage('images/toolbar-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    195187                float: right;
     
    215207        overflow: hidden;
    216208        position: relative;
    217         background-color: #CCC;
     209        @include verticalGradient($nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
    218210
    219211        #speed-info
     
    286278#filter-popup
    287279{
    288         color: #222;/* !important; */
    289         background: #FFF;
    290         z-index: 100;
     280        color: #222;/* !important; */
     281        background: #FFF;
     282        z-index: 100;
    291283
    292284        li { text-align: left }
     
    376368                background-color: white;
    377369
    378                 &.compact {
    379                         padding: 4px;
    380                 }
    381 
     370                &.compact { padding: 4px; }
    382371                &.even { background-color: #F7F7F7; }
    383372                &.selected
     
    422411                div.torrent_progress_details.error,
    423412                div.torrent_peer_details.error {
    424                         color: #FF0000;
     413                        color: #F00;
    425414                }
    426415        }
     
    944933        z-index: 3;
    945934
     935        @include verticalGradient($nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
     936
    946937        > * {
    947938                float: left;
     
    960951
    961952        div.main_container {
    962                 @include leftRoundedBox(5px);
    963                 @include rightRoundedBox(5px);
     953                @include roundedBox(5px);
    964954                @include buttonImage('images/settings.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    965955        }
    966956
     957        #prefs-button {
     958                @include roundedBox(5px);
     959                @include buttonImage('images/toolbar-wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
     960                float: right;
     961        }
     962
    967963        #turtle-button {
    968                 @include leftRoundedBox(5px);
    969                 @include rightRoundedBox(5px);
     964                @include roundedBox(5px);
    970965                @include buttonImage('images/turtle.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    971966        }
    972967
    973968        #compact-button {
    974                 @include leftRoundedBox(5px);
    975                 @include rightRoundedBox(5px);
     969                @include roundedBox(5px);
    976970                @include buttonImage('images/compact.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    977971        }
  • trunk/web/style/transmission/mobile.css

    r13051 r13053  
    2323****
    2424***/
    25 div#toolbar { width: 100%; height: 25px; margin: 0px; padding: 2px; border-bottom: 1px solid #AAA; background: url("images/red-texture.png") repeat-x; }
    26 div#toolbar > * { cursor: pointer; -moz-user-select: none; -webkit-user-select: none; display: inline-block; border-style: solid; border-color: #aaa; border-width: 1px; padding: 3px; width: 18px; height: 18px; padding: 2px 8px; float: left; border: 1px solid #888; }
     25div#toolbar { width: 100%; height: 35px; margin: 0px; padding: 2px; border-bottom: 1px solid #AAA; background: url("images/red-texture.png") repeat; }
     26div#toolbar > * { cursor: pointer; -moz-user-select: none; -webkit-user-select: none; display: inline-block; border-style: solid; border-color: #aaa; border-width: 1px; padding: 3px; margin-top: 5px; width: 18px; height: 18px; padding: 2px 8px; float: left; border: 1px solid #888; }
    2727div#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-image: url("images/toolbar-folder.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; margin-left: 4px; }
    2828div#toolbar div#toolbar-open:active, div#toolbar div#toolbar-open:hover, div#toolbar div#toolbar-open.selected { background-color: #7dc9f2; background-image: url("images/toolbar-folder.png"); /* fallback */ background-image: url("images/toolbar-folder.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-folder.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-folder.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-folder.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-folder.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
     
    3333div#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-image: url("images/toolbar-pause.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
    3434div#toolbar > div#toolbar-pause:active, div#toolbar > div#toolbar-pause:hover, div#toolbar > div#toolbar-pause.selected { background-color: #7dc9f2; background-image: url("images/toolbar-pause.png"); /* fallback */ background-image: url("images/toolbar-pause.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-pause.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-pause.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-pause.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-pause.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
    35 div#toolbar > div#toolbar-select { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -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-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-image: url("images/toolbar-pointer.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; margin-left: 20px; }
     35div#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-image: url("images/toolbar-pointer.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; margin-left: 20px; }
    3636div#toolbar > div#toolbar-select:active, div#toolbar > div#toolbar-select:hover, div#toolbar > div#toolbar-select.selected { background-color: #7dc9f2; background-image: url("images/toolbar-pointer.png"); /* fallback */ background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-pointer.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
    37 div#toolbar > div#toolbar-prefs { -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-wrench.png"); /* fallback */ background-image: url("images/toolbar-wrench.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-wrench.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-wrench.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-wrench.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-wrench.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-wrench.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; border-right-width: 0px; float: right; }
    38 div#toolbar > div#toolbar-prefs:active, div#toolbar > div#toolbar-prefs:hover, div#toolbar > div#toolbar-prefs.selected { background-color: #7dc9f2; background-image: url("images/toolbar-wrench.png"); /* fallback */ background-image: url("images/toolbar-wrench.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-wrench.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-wrench.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-wrench.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-wrench.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-wrench.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
    39 div#toolbar > div#toolbar-inspector { -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-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-image: url("images/toolbar-info.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; float: right; margin-right: 8px; }
     37div#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-image: url("images/toolbar-info.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; float: right; margin-right: 8px; }
    4038div#toolbar > div#toolbar-inspector:active, div#toolbar > div#toolbar-inspector:hover, div#toolbar > div#toolbar-inspector.selected { background-color: #7dc9f2; background-image: url("images/toolbar-info.png"); /* fallback */ background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-info.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
    4139div#toolbar > *.disabled { opacity: 0.25; }
     
    4644****
    4745***/
    48 #statusbar { height: 24px; width: 100%; border-bottom: 1px solid #AAA; overflow: hidden; position: relative; background-color: #CCC; }
     46#statusbar { height: 24px; width: 100%; border-bottom: 1px solid #AAA; overflow: hidden; position: relative; background-color: #dddddd; background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); background-image: -webkit-linear-gradient(top, white, #bbbbbb); background-image: -moz-linear-gradient(top, white, #bbbbbb); background-image: -ms-linear-gradient(top, white, #bbbbbb); background-image: -o-linear-gradient(top, white, #bbbbbb); background-image: linear-gradient(top, white, #bbbbbb); }
    4947#statusbar #speed-info { margin-top: 5px; margin-left: 45%; text-align: left; }
    5048#statusbar #speed-info * { display: inline-block; }
     
    6664***/
    6765#filter-popup { color: #222; /* !important; */ background: #FFF; z-index: 100; }
    68 #filter-popup #filter-by-state .row .filter-img { display: none; }
    69 #filter-popup #filter-by-state .row .filter-name { left: 0px; }
    7066#filter-popup .row { text-align: left; cursor: pointer; margin: 15px 2px; position: relative; height: 18px; -moz-user-select: none; -webkit-user-select: none; }
    7167#filter-popup .row .filter-img { border: none; width: 16px; height: 16px; position: absolute; left: 0px; }
    7268#filter-popup .row .filter-name { position: absolute; left: 20px; }
    7369#filter-popup .row .count { float: right; color: #aaa; }
     70#filter-popup .row:hover, #filter-popup .row.selected { font-weight: bold; }
    7471#filter-popup li { text-align: left; }
    75 #filter-popup .row:hover, #filter-popup .row.selected { font-weight: bold; }
    7672#filter-popup #filter-by-state { float: left; width: 120px; overflow: hidden; text-overflow: ellipsis; }
     73#filter-popup #filter-by-state .row .filter-img { display: none; }
     74#filter-popup #filter-by-state .row .filter-name { left: 0px; }
    7775#filter-popup #filter-by-tracker { float: right; width: 130px; overflow: hidden; text-overflow: ellipsis; }
    7876
     
    8381***/
    8482ul.torrent_list { margin: 0; padding: 0; text-align: left; }
    85 
    8683ul.torrent_list li { list-style-type: none; list-style-image: none; clear: both; display: block; padding: 0; margin: 0; vertical-align: middle; }
    87 
    8884ul.torrent_list li.torrent { border-bottom: 1px solid #ccc; padding: 4px 10px; color: #666; font-size: 11px; margin: 0 !important; background: white; }
    89 
    9085ul.torrent_list li.torrent.compact { padding: 4px; }
    91 
    92 .torrent div.torrent_progress_details, .torrent div.torrent_peer_details { clear: both; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    93 
    9486ul.torrent_list li.torrent.even { background-color: #EDF3FE; }
    95 
    9687ul.torrent_list li.torrent.selected { background-color: #3879D7; color: #FFF; }
    97 
     88ul.torrent_list li.torrent.selected div.torrent_name { color: #FFF; }
    9889ul.torrent_list li.torrent div.torrent_name { font-size: 1.3em; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #222; margin-bottom: 2px; }
    99 
    10090ul.torrent_list li.torrent div.torrent_name.compact { font-size: 1.0em; font-weight: normal; }
    101 
    10291ul.torrent_list li.torrent div.torrent_name.paused { font-weight: normal; color: #777; }
    103 
    104 ul.torrent_list li.torrent.selected div.torrent_name { color: #fff; }
    105 
    106 ul.torrent_list div.torrent_progress_details, ul.torrent_list div.torrent_peer_details { clear: left; font-size: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    107 
    108 ul.torrent_list li.torrent div.torrent_progress_details.error { color: #FF0000; }
    109 
    110 ul.torrent_list li.torrent.selected div.torrent_progress_details.error { color: #FFF; }
    111 
    112 ul.torrent_list li.torrent div.torrent_peer_details.error { color: #FF0000; }
    113 
    114 ul.torrent_list li.torrent.selected div.torrent_peer_details.error { color: #FFF; }
     92ul.torrent_list li.torrent div.torrent_progress_details, ul.torrent_list li.torrent div.torrent_peer_details { clear: both; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     93ul.torrent_list li.torrent div.torrent_progress_details, ul.torrent_list li.torrent div.torrent_peer_details { clear: left; font-size: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     94ul.torrent_list li.torrent div.torrent_progress_details.error, ul.torrent_list li.torrent div.torrent_peer_details.error { color: #F00; }
     95ul.torrent_list li.torrent.selected div.torrent_progress_details.error, ul.torrent_list li.torrent.selected div.torrent_peer_details.error { color: #FFF; }
    11596
    11697/** Progressbar  Each progressbar has three elemens: a parent container and two children, complete and incomplete.  The only thing needed to set the progressbar percentage is to set the complete child's width as a percentage. This is because incomplete is pinned to the full width and height of the parent, and complete is pinned to the left side of the parent and has a higher z-index.  The progressbar has different colors depending on its state, so there are five 'decorator' classNames: paused, queued, magnet, leeching, seeding. */
     
    209190div#torrent_inspector div.tracker_host { font-size: 1.2em; font-weight: bold; color: #222; }
    210191div#torrent_inspector #inspector_file_list { padding: 0 0 0 0; margin: 0 0 0 0; text-align: left; cursor: default; overflow: hidden; }
    211 div#torrent_inspector ul.inspector_torrent_file_list { width: 100%; margin: 0  0 0 0; padding-bottom: 10px; text-align: left; display: block; cursor: default; list-style-type: none; list-style: none; list-style-image: none; }
     192div#torrent_inspector ul.inspector_torrent_file_list { width: 100%; margin: 0  0 0 0; padding-bottom: 10px; text-align: left; display: block; cursor: default; list-style-type: none; list-style: none; list-style-image: none; clear: both; }
    212193div#torrent_inspector li.inspector_torrent_file_list_entry { padding: 3px 0 3px 2px; display: block; }
    213194div#torrent_inspector li.inspector_torrent_file_list_entry.skip { color: #666; }
    214195div#torrent_inspector li.inspector_torrent_file_list_entry.even { background-color: #EEEEEE; }
    215 div#torrent_inspector div.inspector_torrent_file_list_entry_name { font-size: 1.2em; font-weight: bold; color: #222; margin-left: 20px; }
    216 div#torrent_inspector li.inspector_torrent_file_list_entry.skip > .inspector_torrent_file_list_entry_name { color: #666; }
    217 div#torrent_inspector div.inspector_torrent_file_list_entry_progress { font-size: 1em; color: #666; margin-left: 20px; }
    218 div#torrent_inspector div.file_wanted_control { background-position: left -19px; float: left; position: absolute; cursor: pointer; margin: 3px 0 0 0; width: 19px; height: 19px; background-image: url("images/buttons/file_wanted_buttons.png"); background-repeat: no-repeat; background-color: transparent; }
     196div#torrent_inspector div.inspector_torrent_file_list_entry_name { font-size: 1.2em; color: black; display: inline; margin-left: 0px; }
     197div#torrent_inspector li.inspector_torrent_file_list_entry.skip > .inspector_torrent_file_list_entry_name { color: #999; }
     198div#torrent_inspector div.inspector_torrent_file_list_entry_progress { color: #999; margin-left: 20px; }
    219199div#torrent_inspector li.inspector_torrent_file_list_entry.skip > .file_wanted_control { background-position: left top; }
    220200div#torrent_inspector li.inspector_torrent_file_list_entry.complete > .file_wanted_control { background-position: left -19px; }
     
    241221div.torrent_footer > * { cursor: pointer; -moz-user-select: none; -webkit-user-select: none; display: inline-block; border-style: solid; border-color: #aaa; border-width: 1px; padding: 3px; position: relative; float: left; margin: 2px 4px; width: 18px; height: 12px; padding: 2px 8px; float: left; border: 1px solid #888; }
    242222div.torrent_footer div.main_container, div.torrent_footer ul#settings_menu { display: none; }
    243 div.torrent_footer #turtle-button { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -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/turtle.png"); /* fallback */ background-image: url("images/turtle.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/turtle.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/turtle.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/turtle.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/turtle.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/turtle.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
     223div.torrent_footer #prefs-button { -moz-border-radius: 5px; border-radius: 5px; background-color: #dddddd; background-image: url("images/toolbar-wrench.png"); /* fallback */ background-image: url("images/toolbar-wrench.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-wrench.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-wrench.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-wrench.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-wrench.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-wrench.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; float: right; }
     224div.torrent_footer #prefs-button:active, div.torrent_footer #prefs-button:hover, div.torrent_footer #prefs-button.selected { background-color: #7dc9f2; background-image: url("images/toolbar-wrench.png"); /* fallback */ background-image: url("images/toolbar-wrench.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-wrench.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-wrench.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-wrench.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-wrench.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-wrench.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
     225div.torrent_footer #turtle-button { -moz-border-radius: 5px; border-radius: 5px; 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)); /* Saf4+, Chrome */ background-image: url("images/turtle.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/turtle.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/turtle.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/turtle.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/turtle.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
    244226div.torrent_footer #turtle-button:active, div.torrent_footer #turtle-button:hover, div.torrent_footer #turtle-button.selected { background-color: #7dc9f2; background-image: url("images/turtle.png"); /* fallback */ background-image: url("images/turtle.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/turtle.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/turtle.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/turtle.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/turtle.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/turtle.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
    245 div.torrent_footer #compact-button { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -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/compact.png"); /* fallback */ background-image: url("images/compact.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/compact.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/compact.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/compact.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/compact.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/compact.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
     227div.torrent_footer #compact-button { -moz-border-radius: 5px; border-radius: 5px; 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)); /* Saf4+, Chrome */ background-image: url("images/compact.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/compact.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/compact.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/compact.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/compact.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
    246228div.torrent_footer #compact-button:active, div.torrent_footer #compact-button:hover, div.torrent_footer #compact-button.selected { background-color: #7dc9f2; background-image: url("images/compact.png"); /* fallback */ background-image: url("images/compact.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/compact.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/compact.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/compact.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/compact.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/compact.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
    247229
  • trunk/web/style/transmission/mobile.scss

    r13051 r13053  
    4444        padding: 3px;
    4545}
    46 @mixin roundedButton($radius) {
    47         @include button;
    48         border-top-left-radius: $radius;
    49         border-top-right-radius: $radius;
    50         border-bottom-left-radius: $radius;
    51         border-bottom-right-radius: $radius;
    52         -moz-border-radius-topleft: $radius;
    53         -moz-border-radius-bottomleft: $radius;
    54         -moz-border-radius-topright: $radius;
    55         -moz-border-radius-bottomright: $radius;
     46
     47@mixin roundedBox($radius) {
     48        -moz-border-radius: $radius;
     49        border-radius: $radius;
    5650}
    5751
     
    6862        border-bottom-right-radius: $radius;
    6963}
    70 @mixin roundedBox($radius) {
    71         -moz-border-radius: $radius;
    72         border-radius: $radius;
    73 }
    74 
    75 @mixin buttonGroupRightButton {
    76         @include rightRoundedBox(5px);
    77         border-left-width: 0px;
     64
     65@mixin roundedButton($radius) {
     66        @include button;
     67        @include roundedBox($radius);
    7868}
    7969
     
    143133
    144134        width: 100%;
    145         height: 25px;
     135        height: 35px;
    146136        margin: 0px;
    147137        padding: 2px;
    148138        border-bottom: 1px solid #AAA;
    149         background: url('images/red-texture.png') repeat-x;
     139        background: url('images/red-texture.png') repeat;
    150140
    151141        $idle-color-top: $nonselected-gradient-color-top;
     
    156146        > * {
    157147                @include button;
     148                margin-top: 5px;
    158149                width: 18px;
    159150                height: 18px;
     
    182173        }
    183174        > div#toolbar-select {
    184                 @include leftRoundedBox(5px);
    185                 @include rightRoundedBox(5px);
     175                @include roundedBox(5px);
    186176                @include buttonImage('images/toolbar-pointer.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    187177                margin-left: $separator-spacing;
    188178        }
    189179
    190         > div#toolbar-prefs {
    191                 @include leftRoundedBox(5px);
    192                 @include buttonImage('images/toolbar-wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    193                 border-right-width: 0px;
    194                 float: right;
    195         }
    196180        > div#toolbar-inspector {
    197                 @include rightRoundedBox(5px);
     181                @include roundedBox(5px);
    198182                @include buttonImage('images/toolbar-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    199183                float: right;
     
    219203        overflow: hidden;
    220204        position: relative;
    221         background-color: #CCC;
     205        @include verticalGradient($nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
    222206
    223207        #speed-info
     
    279263#filter-popup
    280264{
    281         color: #222;/* !important; */
    282         background: #FFF;
    283         z-index: 100;
    284 
    285         #filter-by-state .row .filter-img {
    286                 display: none;
    287         }
    288         #filter-by-state .row .filter-name {
    289                 left: 0px;
    290         }
     265        color: #222;/* !important; */
     266        background: #FFF;
     267        z-index: 100;
     268
    291269        .row {
    292270                text-align: left;
     
    313291                        color: #aaa;
    314292                }
     293                &:hover, &.selected {
     294                        font-weight: bold;
     295                }
    315296        }
    316297        li {
    317298                text-align: left
    318299        }
    319         .row:hover,
    320         .row.selected {
    321                 font-weight: bold;
    322         }
     300
    323301        #filter-by-state {
    324302                float: left;
     
    326304                overflow: hidden;
    327305                text-overflow: ellipsis;
    328         }
     306                .row .filter-img { display: none; }
     307                .row .filter-name { left: 0px; }
     308        }
     309
    329310        #filter-by-tracker {
    330311                float: right;
     
    341322***/
    342323
    343 ul.torrent_list {
     324ul.torrent_list
     325{
    344326        margin: 0;
    345327        padding: 0;
    346328        text-align: left;
    347 }
    348 
    349 ul.torrent_list li {
    350         list-style-type: none;
    351         list-style-image: none;
    352         clear: both;
    353         display: block;
    354         padding: 0;
    355         margin: 0;
    356         vertical-align: middle;
    357 }
    358 
    359 ul.torrent_list li.torrent {
    360         border-bottom: 1px solid #ccc;
    361         padding: 4px 10px;
    362         color: #666;
    363         font-size: 11px;
    364         margin: 0 !important;
    365         background: white;
    366 }
    367 
    368 ul.torrent_list li.torrent.compact {
    369         padding: 4px;
    370 }
    371 
    372 .torrent div.torrent_progress_details, .torrent div.torrent_peer_details {
    373         clear: both;
    374         white-space: nowrap;
    375         overflow: hidden;
    376         text-overflow: ellipsis;
    377 }
    378 
    379 ul.torrent_list li.torrent.even {
    380         background-color: #EDF3FE;
    381 }
    382 
    383 ul.torrent_list li.torrent.selected {
    384         background-color: #3879D7;
    385         color: #FFF;
    386 }
    387 
    388 ul.torrent_list li.torrent div.torrent_name {
    389         font-size: 1.3em;
    390         font-weight: bold;
    391         overflow: hidden;
    392         text-overflow: ellipsis;
    393         white-space: nowrap;
    394         color: #222;
    395         margin-bottom: 2px;
    396 }
    397 
    398 ul.torrent_list li.torrent div.torrent_name.compact {
    399         font-size: 1.0em;
    400         font-weight: normal;
    401 }
    402 
    403 ul.torrent_list li.torrent div.torrent_name.paused {
    404         font-weight: normal;
    405         color: #777;
    406 }
    407 
    408 ul.torrent_list li.torrent.selected div.torrent_name {
    409         color: #fff;
    410 }
    411 
    412 ul.torrent_list div.torrent_progress_details,
    413 ul.torrent_list div.torrent_peer_details {
    414         clear: left;
    415         font-size: 1em;
    416         overflow: hidden;
    417         text-overflow: ellipsis;
    418         white-space: nowrap;
    419 }
    420 
    421 ul.torrent_list li.torrent div.torrent_progress_details.error {
    422         color: #FF0000;
    423 }
    424 ul.torrent_list li.torrent.selected div.torrent_progress_details.error {
    425         color: #FFF;
    426 }
    427 ul.torrent_list li.torrent div.torrent_peer_details.error {
    428         color: #FF0000;
    429 }
    430 ul.torrent_list li.torrent.selected div.torrent_peer_details.error {
    431         color: #FFF;
     329
     330        li {
     331                list-style-type: none;
     332                list-style-image: none;
     333                clear: both;
     334                display: block;
     335                padding: 0;
     336                margin: 0;
     337                vertical-align: middle;
     338        }
     339
     340        li.torrent {
     341                border-bottom: 1px solid #ccc;
     342                padding: 4px 10px;
     343                color: #666;
     344                font-size: 11px;
     345                margin: 0 !important;
     346                background: white;
     347                &.compact { padding: 4px; }
     348                &.even { background-color: #EDF3FE; }
     349                &.selected {
     350                        background-color: #3879D7;
     351                        color: #FFF;
     352                        div.torrent_name { color: #FFF; }
     353                }
     354
     355                div.torrent_name {
     356                        font-size: 1.3em;
     357                        font-weight: bold;
     358                        overflow: hidden;
     359                        text-overflow: ellipsis;
     360                        white-space: nowrap;
     361                        color: #222;
     362                        margin-bottom: 2px;
     363
     364                        &.compact { font-size: 1.0em; font-weight: normal; }
     365                        &.paused { font-weight: normal; color: #777; }
     366                }
     367
     368                div.torrent_progress_details,
     369                div.torrent_peer_details {
     370                        clear: both;
     371                        white-space: nowrap;
     372                        overflow: hidden;
     373                        text-overflow: ellipsis;
     374                }
     375
     376
     377                div.torrent_progress_details,
     378                div.torrent_peer_details {
     379                        clear: left;
     380                        font-size: 1em;
     381                        overflow: hidden;
     382                        text-overflow: ellipsis;
     383                        white-space: nowrap;
     384                }
     385
     386                div.torrent_progress_details.error,
     387                div.torrent_peer_details.error {
     388                        color: #F00;
     389                }
     390
     391                &.selected div.torrent_progress_details.error,
     392                &.selected div.torrent_peer_details.error {
     393                        color: #FFF;
     394                }
     395        }
     396
    432397}
    433398
     
    810775                list-style: none;
    811776                list-style-image: none;
     777                clear: both;
    812778        }
    813779        li.inspector_torrent_file_list_entry {
    814780                padding: 3px 0 3px 2px;
    815781                display: block;
    816         }
    817 
    818         li.inspector_torrent_file_list_entry.skip {
    819                 color: #666;
    820         }
    821 
    822         li.inspector_torrent_file_list_entry.even {
    823                 background-color: #EEEEEE;
    824         }
     782                &.skip { color: #666; }
     783                &.even { background-color: #EEEEEE; }
     784        }
     785
    825786        div.inspector_torrent_file_list_entry_name {
    826787                font-size: 1.2em;
    827                 font-weight: bold;
    828                 color: #222;
     788                color: black;
     789                display: inline;
     790                margin-left: 0px;
     791        }
     792        li.inspector_torrent_file_list_entry.skip>.inspector_torrent_file_list_entry_name {
     793                color: #999;
     794        }
     795        div.inspector_torrent_file_list_entry_progress {
     796                color: #999;
    829797                margin-left: 20px;
    830         }
    831         li.inspector_torrent_file_list_entry.skip>.inspector_torrent_file_list_entry_name {
    832                 color: #666;
    833         }
    834         div.inspector_torrent_file_list_entry_progress {
    835                 font-size: 1em;
    836                 color: #666;
    837                 margin-left: 20px;
    838         }
    839         div.file_wanted_control {
    840                 background-position: left -19px;
    841                 float: left;
    842                 position: absolute;
    843                 cursor: pointer;
    844                 margin: 3px 0 0 0;
    845                 width: 19px;
    846                 height: 19px;
    847                 background-image: url('images/buttons/file_wanted_buttons.png');
    848                 background-repeat: no-repeat;
    849                 background-color: transparent;
    850798        }
    851799
     
    948896        }
    949897
     898        #prefs-button {
     899                @include roundedBox(5px);
     900                @include buttonImage('images/toolbar-wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
     901                float: right;
     902        }
     903
    950904        #turtle-button {
    951                 @include leftRoundedBox(5px);
    952                 @include rightRoundedBox(5px);
     905                @include roundedBox(5px);
    953906                @include buttonImage('images/turtle.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    954907        }
    955908
    956909        #compact-button {
    957                 @include leftRoundedBox(5px);
    958                 @include rightRoundedBox(5px);
     910                @include roundedBox(5px);
    959911                @include buttonImage('images/compact.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    960912        }
Note: See TracChangeset for help on using the changeset viewer.