Changeset 13180


Ignore:
Timestamp:
Jan 24, 2012, 8:49:46 PM (10 years ago)
Author:
jordan
Message:

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

Location:
trunk/web
Files:
2 added
2 deleted
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/web/index.html

    r13102 r13180  
    4141                        <div id="toolbar-open" title="Open Torrent"></div>
    4242                        <div id="toolbar-remove" title="Remove Selected Torrents"></div>
     43                        <div id="toolbar-separator"></div>
    4344                        <div id="toolbar-start" title="Start Selected Torrents"></div>
    4445                        <div id="toolbar-pause" title="Pause Selected Torrents"></div>
    45                         <div id="toolbar-select" title="Toggle Selection"></div>
     46                        <div id="toolbar-separator"></div>
     47                        <div id="toolbar-start-all" title="Start All Torrents"></div>
     48                        <div id="toolbar-pause-all" title="Pause All Torrents"></div>
    4649                        <div id="toolbar-inspector" title="Toggle Inspector"></div>
    4750                </div>

  • trunk/web/javascript/transmission.js

    r13090 r13180  
    4545                $('#toolbar-pause').click($.proxy(this.stopSelectedClicked,this));
    4646                $('#toolbar-start').click($.proxy(this.startSelectedClicked,this));
     47                $('#toolbar-pause-all').click($.proxy(this.stopAllClicked,this));
     48                $('#toolbar-start-all').click($.proxy(this.startAllClicked,this));
    4749                $('#toolbar-remove').click($.proxy(this.removeClicked,this));
    4850                $('#toolbar-open').click($.proxy(this.openTorrentClicked,this));
    49                 $('#toolbar-select').click($.proxy(this.toggleSelectionClicked,this));
    5051
    5152                $('#prefs-button').click($.proxy(this.togglePrefsDialogClicked,this));
    … …  
    438439        },
    439440
    440         toggleSelectionClicked: function(ev) {
    441                 if (this.isButtonEnabled(ev)) {
    442                         if (this._rows.length !== this.getSelectedRows().length)
    443                                 this.selectAll();
    444                         else
    445                                 this.deselectAll();
    446                 }
    447         },
    448 
    449441        stopSelectedClicked: function(ev) {
    450442                if (this.isButtonEnabled(ev)) {
    … …  
    457449                if (this.isButtonEnabled(ev)) {
    458450                        this.startSelectedTorrents(false);
     451                        this.hideMobileAddressbar();
     452                }
     453        },
     454
     455        stopAllClicked: function(ev) {
     456                if (this.isButtonEnabled(ev)) {
     457                        this.stopAllTorrents();
     458                        this.hideMobileAddressbar();
     459                }
     460        },
     461
     462        startAllClicked: function(ev) {
     463                if (this.isButtonEnabled(ev)) {
     464                        this.startAllTorrents(false);
    459465                        this.hideMobileAddressbar();
    460466                }
    … …  
    928934        },
    929935
     936        startAllTorrents: function(force) {
     937                this.startTorrents(this.getAllTorrents(), force);
     938        },
    930939        startSelectedTorrents: function(force) {
    931940                this.startTorrents(this.getSelectedTorrents(), force);
    … …  
    955964        },
    956965
     966        stopAllTorrents: function() {
     967                this.stopTorrents(this.getAllTorrents());
     968        },
    957969        stopSelectedTorrents: function() {
    958970                this.stopTorrents(this.getSelectedTorrents());

  • trunk/web/style/transmission/common.css

    r13093 r13180  
    4646div#toolbar {
    4747  width: 100%;
    48   height: 35px;
     48  height: 36px;
    4949  margin: 0px;
    5050  padding: 2px;
    5151  border-bottom: 1px solid #AAA;
    52   background: url("images/red-texture.png") repeat; }
     52  background-color: #cccccc;
     53  background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
     54  background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
     55  background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
     56  background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
     57  background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
     58  background-image: linear-gradient(top, #dddddd, #bbbbbb); }
    5359  div#toolbar > * {
    5460    cursor: pointer;
    … …  
    6066    border-width: 1px;
    6167    padding: 3px;
    62     margin-top: 5px;
    63     width: 18px;
    64     height: 18px;
    65     padding: 2px 8px;
     68    width: 34px;
     69    height: 34px;
    6670    float: left;
    67     border: 1px solid #888; }
    68   div#toolbar div#toolbar-open {
    69     -moz-border-radius-topleft: 5px;
    70     -moz-border-radius-bottomleft: 5px;
    71     border-top-left-radius: 5px;
    72     border-bottom-left-radius: 5px;
    73     background-color: #dddddd;
    74     background-image: url("images/toolbar-folder.png");
    75     /* fallback */
    76     background-image: url("images/toolbar-folder.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
    77     /* Saf4+, Chrome */
    78     background-image: url("images/toolbar-folder.png"), -webkit-linear-gradient(top, white, #bbbbbb);
    79     /* Chrome 10+, Saf5.1+ */
    80     background-image: url("images/toolbar-folder.png"), -moz-linear-gradient(top, white, #bbbbbb);
    81     /* FF3.6+ */
    82     background-image: url("images/toolbar-folder.png"), -ms-linear-gradient(top, white, #bbbbbb);
    83     /* IE10 */
    84     background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, white, #bbbbbb);
    85     /* Opera 11.10+ */
    86     background-position: center;
    87     background-repeat: no-repeat;
     71    border: none;
     72    padding: 0px 3px; }
     73  div#toolbar > div#toolbar-separator {
     74    height: 25px;
     75    margin-top: 8px;
     76    margin-bottom: 5px;
     77    border-left: 1px solid #aaa;
     78    width: 3px; }
     79  div#toolbar > div#toolbar-open {
     80    background: url("images/toolbar-folder.png") no-repeat;
    8881    margin-left: 4px; }
    89     div#toolbar div#toolbar-open:active, div#toolbar div#toolbar-open:hover, div#toolbar div#toolbar-open.selected {
    90       background-color: #e6e6ff;
    91       background-image: url("images/toolbar-folder.png");
    92       /* fallback */
    93       background-image: url("images/toolbar-folder.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
    94       /* Saf4+, Chrome */
    95       background-image: url("images/toolbar-folder.png"), -webkit-linear-gradient(top, #cdcdff, white);
    96       /* Chrome 10+, Saf5.1+ */
    97       background-image: url("images/toolbar-folder.png"), -moz-linear-gradient(top, #cdcdff, white);
    98       /* FF3.6+ */
    99       background-image: url("images/toolbar-folder.png"), -ms-linear-gradient(top, #cdcdff, white);
    100       /* IE10 */
    101       background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, #cdcdff, white);
    102       /* Opera 11.10+ */
    103       background-position: center;
    104       background-repeat: no-repeat; }
    10582  div#toolbar > div#toolbar-remove {
    106     -moz-border-radius-topright: 5px;
    107     -moz-border-radius-bottomright: 5px;
    108     border-top-right-radius: 5px;
    109     border-bottom-right-radius: 5px;
    110     background-color: #dddddd;
    111     background-image: url("images/toolbar-close.png");
    112     /* fallback */
    113     background-image: url("images/toolbar-close.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
    114     /* Saf4+, Chrome */
    115     background-image: url("images/toolbar-close.png"), -webkit-linear-gradient(top, white, #bbbbbb);
    116     /* Chrome 10+, Saf5.1+ */
    117     background-image: url("images/toolbar-close.png"), -moz-linear-gradient(top, white, #bbbbbb);
    118     /* FF3.6+ */
    119     background-image: url("images/toolbar-close.png"), -ms-linear-gradient(top, white, #bbbbbb);
    120     /* IE10 */
    121     background-image: url("images/toolbar-close.png"), -o-linear-gradient(top, white, #bbbbbb);
    122     /* Opera 11.10+ */
    123     background-position: center;
    124     background-repeat: no-repeat; }
    125     div#toolbar > div#toolbar-remove:active, div#toolbar > div#toolbar-remove:hover, div#toolbar > div#toolbar-remove.selected {
    126       background-color: #e6e6ff;
    127       background-image: url("images/toolbar-close.png");
    128       /* fallback */
    129       background-image: url("images/toolbar-close.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
    130       /* Saf4+, Chrome */
    131       background-image: url("images/toolbar-close.png"), -webkit-linear-gradient(top, #cdcdff, white);
    132       /* Chrome 10+, Saf5.1+ */
    133       background-image: url("images/toolbar-close.png"), -moz-linear-gradient(top, #cdcdff, white);
    134       /* FF3.6+ */
    135       background-image: url("images/toolbar-close.png"), -ms-linear-gradient(top, #cdcdff, white);
    136       /* IE10 */
    137       background-image: url("images/toolbar-close.png"), -o-linear-gradient(top, #cdcdff, white);
    138       /* Opera 11.10+ */
    139       background-position: center;
    140       background-repeat: no-repeat; }
     83    background: url("images/toolbar-close.png") no-repeat; }
    14184  div#toolbar > div#toolbar-start {
    142     -moz-border-radius-topleft: 5px;
    143     -moz-border-radius-bottomleft: 5px;
    144     border-top-left-radius: 5px;
    145     border-bottom-left-radius: 5px;
    146     background-color: #dddddd;
    147     background-image: url("images/toolbar-start.png");
    148     /* fallback */
    149     background-image: url("images/toolbar-start.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
    150     /* Saf4+, Chrome */
    151     background-image: url("images/toolbar-start.png"), -webkit-linear-gradient(top, white, #bbbbbb);
    152     /* Chrome 10+, Saf5.1+ */
    153     background-image: url("images/toolbar-start.png"), -moz-linear-gradient(top, white, #bbbbbb);
    154     /* FF3.6+ */
    155     background-image: url("images/toolbar-start.png"), -ms-linear-gradient(top, white, #bbbbbb);
    156     /* IE10 */
    157     background-image: url("images/toolbar-start.png"), -o-linear-gradient(top, white, #bbbbbb);
    158     /* Opera 11.10+ */
    159     background-position: center;
    160     background-repeat: no-repeat;
    161     margin-left: 20px; }
    162     div#toolbar > div#toolbar-start:active, div#toolbar > div#toolbar-start:hover, div#toolbar > div#toolbar-start.selected {
    163       background-color: #e6e6ff;
    164       background-image: url("images/toolbar-start.png");
    165       /* fallback */
    166       background-image: url("images/toolbar-start.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
    167       /* Saf4+, Chrome */
    168       background-image: url("images/toolbar-start.png"), -webkit-linear-gradient(top, #cdcdff, white);
    169       /* Chrome 10+, Saf5.1+ */
    170       background-image: url("images/toolbar-start.png"), -moz-linear-gradient(top, #cdcdff, white);
    171       /* FF3.6+ */
    172       background-image: url("images/toolbar-start.png"), -ms-linear-gradient(top, #cdcdff, white);
    173       /* IE10 */
    174       background-image: url("images/toolbar-start.png"), -o-linear-gradient(top, #cdcdff, white);
    175       /* Opera 11.10+ */
    176       background-position: center;
    177       background-repeat: no-repeat; }
     85    background: url("images/toolbar-start.png") no-repeat; }
    17886  div#toolbar > div#toolbar-pause {
    179     -moz-border-radius-topright: 5px;
    180     -moz-border-radius-bottomright: 5px;
    181     border-top-right-radius: 5px;
    182     border-bottom-right-radius: 5px;
    183     background-color: #dddddd;
    184     background-image: url("images/toolbar-pause.png");
    185     /* fallback */
    186     background-image: url("images/toolbar-pause.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
    187     /* Saf4+, Chrome */
    188     background-image: url("images/toolbar-pause.png"), -webkit-linear-gradient(top, white, #bbbbbb);
    189     /* Chrome 10+, Saf5.1+ */
    190     background-image: url("images/toolbar-pause.png"), -moz-linear-gradient(top, white, #bbbbbb);
    191     /* FF3.6+ */
    192     background-image: url("images/toolbar-pause.png"), -ms-linear-gradient(top, white, #bbbbbb);
    193     /* IE10 */
    194     background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, white, #bbbbbb);
    195     /* Opera 11.10+ */
    196     background-position: center;
    197     background-repeat: no-repeat; }
    198     div#toolbar > div#toolbar-pause:active, div#toolbar > div#toolbar-pause:hover, div#toolbar > div#toolbar-pause.selected {
    199       background-color: #e6e6ff;
    200       background-image: url("images/toolbar-pause.png");
    201       /* fallback */
    202       background-image: url("images/toolbar-pause.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
    203       /* Saf4+, Chrome */
    204       background-image: url("images/toolbar-pause.png"), -webkit-linear-gradient(top, #cdcdff, white);
    205       /* Chrome 10+, Saf5.1+ */
    206       background-image: url("images/toolbar-pause.png"), -moz-linear-gradient(top, #cdcdff, white);
    207       /* FF3.6+ */
    208       background-image: url("images/toolbar-pause.png"), -ms-linear-gradient(top, #cdcdff, white);
    209       /* IE10 */
    210       background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, #cdcdff, white);
    211       /* Opera 11.10+ */
    212       background-position: center;
    213       background-repeat: no-repeat; }
    214   div#toolbar > div#toolbar-select {
    215     -moz-border-radius: 5px;
    216     border-radius: 5px;
    217     background-color: #dddddd;
    218     background-image: url("images/toolbar-pointer.png");
    219     /* fallback */
    220     background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
    221     /* Saf4+, Chrome */
    222     background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, white, #bbbbbb);
    223     /* Chrome 10+, Saf5.1+ */
    224     background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, white, #bbbbbb);
    225     /* FF3.6+ */
    226     background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, white, #bbbbbb);
    227     /* IE10 */
    228     background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, white, #bbbbbb);
    229     /* Opera 11.10+ */
    230     background-position: center;
    231     background-repeat: no-repeat;
    232     margin-left: 20px; }
    233     div#toolbar > div#toolbar-select:active, div#toolbar > div#toolbar-select:hover, div#toolbar > div#toolbar-select.selected {
    234       background-color: #e6e6ff;
    235       background-image: url("images/toolbar-pointer.png");
    236       /* fallback */
    237       background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
    238       /* Saf4+, Chrome */
    239       background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, #cdcdff, white);
    240       /* Chrome 10+, Saf5.1+ */
    241       background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, #cdcdff, white);
    242       /* FF3.6+ */
    243       background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, #cdcdff, white);
    244       /* IE10 */
    245       background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, #cdcdff, white);
    246       /* Opera 11.10+ */
    247       background-position: center;
    248       background-repeat: no-repeat; }
     87    background: url("images/toolbar-pause.png") no-repeat; }
     88  div#toolbar > div#toolbar-start-all {
     89    background: url("images/toolbar-start-all.png") no-repeat; }
     90  div#toolbar > div#toolbar-pause-all {
     91    background: url("images/toolbar-pause-all.png") no-repeat; }
    24992  div#toolbar > div#toolbar-inspector {
    250     -moz-border-radius: 5px;
    251     border-radius: 5px;
    252     background-color: #dddddd;
    253     background-image: url("images/toolbar-info.png");
    254     /* fallback */
    255     background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
    256     /* Saf4+, Chrome */
    257     background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, white, #bbbbbb);
    258     /* Chrome 10+, Saf5.1+ */
    259     background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, white, #bbbbbb);
    260     /* FF3.6+ */
    261     background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, white, #bbbbbb);
    262     /* IE10 */
    263     background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, white, #bbbbbb);
    264     /* Opera 11.10+ */
    265     background-position: center;
    266     background-repeat: no-repeat;
     93    background: url("images/toolbar-info.png") no-repeat;
    26794    float: right;
    268     margin-right: 8px; }
    269     div#toolbar > div#toolbar-inspector:active, div#toolbar > div#toolbar-inspector:hover, div#toolbar > div#toolbar-inspector.selected {
    270       background-color: #e6e6ff;
    271       background-image: url("images/toolbar-info.png");
    272       /* fallback */
    273       background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
    274       /* Saf4+, Chrome */
    275       background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, #cdcdff, white);
    276       /* Chrome 10+, Saf5.1+ */
    277       background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, #cdcdff, white);
    278       /* FF3.6+ */
    279       background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, #cdcdff, white);
    280       /* IE10 */
    281       background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, #cdcdff, white);
    282       /* Opera 11.10+ */
    283       background-position: center;
    284       background-repeat: no-repeat; }
     95    margin-right: 4px; }
    28596  div#toolbar > *.disabled {
    28697    opacity: 0.25; }
    … …  
    292103***/
    293104#statusbar {
    294   height: 24px;
     105  height: 26px;
    295106  width: 100%;
    296107  border-bottom: 1px solid #AAA;
    … …  
    391202div#torrent_container {
    392203  position: fixed;
    393   top: 65px;
     204  top: 66px;
    394205  bottom: 22px;
    395206  right: 0px;
    … …  
    593404  text-align: left;
    594405  padding: 15px;
    595   top: 65px;
     406  top: 66px;
    596407  position: fixed;
    597408  width: 570px;

  • trunk/web/style/transmission/common.scss

    r13093 r13180  
    119119****
    120120***/
     121$toolbar-gradient-top: #ddd;
     122$toolbar-gradient-bottom: #bbb;
     123$toolbar-height: 36px;
    121124
    122125div#toolbar
    123126{
    124         $separator-spacing: 20px;
    125 
    126127        width: 100%;
    127         height: 35px;
     128        height: $toolbar-height;
    128129        margin: 0px;
    129130        padding: 2px;
    130131        border-bottom: 1px solid #AAA;
    131         background: url('images/red-texture.png') repeat;
     132        @include verticalGradient($toolbar-gradient-top, $toolbar-gradient-bottom);
    132133
    133134        $idle-color-top: $nonselected-gradient-top;
    … …  
    138139        > * {
    139140                @include button;
    140                 margin-top: 5px;
    141                 width: 18px;
    142                 height: 18px;
    143                 padding: 2px 8px;
     141                width: 34px;
     142                height: 34px;
    144143                float: left;
    145                 border: 1px solid #888;
    146         }
    147 
    148         div#toolbar-open {
    149                 @include leftRoundedBox(5px);
    150                 @include buttonImage('images/toolbar-folder.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
     144                border: none;
     145                padding: 0px 3px;
     146        }
     147
     148        >div#toolbar-separator {
     149                height: 25px;
     150                margin-top: 8px;
     151                margin-bottom: 5px;
     152                border-left: 1px solid #aaa;
     153                width: 3px;
     154        }
     155
     156        > div#toolbar-open {
     157                background: url('images/toolbar-folder.png') no-repeat;
    151158                margin-left: 4px;
    152159        }
    153160        > div#toolbar-remove {
    154                 @include rightRoundedBox(5px);
    155                 @include buttonImage('images/toolbar-close.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
     161                background: url('images/toolbar-close.png') no-repeat;
    156162        }
    157163        > div#toolbar-start {
    158                 @include leftRoundedBox(5px);
    159                 @include buttonImage('images/toolbar-start.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    160                 margin-left: $separator-spacing;
     164                background: url('images/toolbar-start.png') no-repeat;
    161165        }
    162166        > div#toolbar-pause {
    163                 @include rightRoundedBox(5px);
    164                 @include buttonImage('images/toolbar-pause.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    165         }
    166         > div#toolbar-select {
    167                 @include roundedBox(5px);
    168                 @include buttonImage('images/toolbar-pointer.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    169                 margin-left: $separator-spacing;
     167                background: url('images/toolbar-pause.png') no-repeat;
     168        }
     169        > div#toolbar-start-all {
     170                background: url('images/toolbar-start-all.png') no-repeat;
     171        }
     172        > div#toolbar-pause-all {
     173                background: url('images/toolbar-pause-all.png') no-repeat;
    170174        }
    171175
    172176        > div#toolbar-inspector {
    173                 @include roundedBox(5px);
    174                 @include buttonImage('images/toolbar-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
     177                background: url('images/toolbar-info.png') no-repeat;
    175178                float: right;
    176                 margin-right: 8px;
     179                margin-right: 4px;
    177180        }
    178181
    … …  
    190193$statusbar-gradient-top: #ddd;
    191194$statusbar-gradient-bottom: #bbb;
     195$statusbar-height: 26px;
    192196
    193197#statusbar
    194198{
    195         height: 24px;
     199        height: $statusbar-height;
    196200        width: 100%;
    197201        border-bottom: 1px solid #AAA;
    … …  
    314318***/
    315319
    316 $torrent-container-top: 65px;
     320$torrent-container-top: $toolbar-height + $statusbar-height + 4px;
    317321$torrent-list-button-width: 14px;
    318322

  • trunk/web/style/transmission/images/Makefile.am

    r13074 r13180  
    1616  inspector-peers.png \
    1717  inspector-trackers.png \
    18   red-texture.png \
    1918  lock_icon.png \
    2019  logo.png \
    … …  
    2524  toolbar-info.png \
    2625  toolbar-pause.png \
    27   toolbar-pointer.png \
    2826  toolbar-start.png \
     27  toolbar-pause-all.png \
     28  toolbar-start-all.png \
    2929  turtle.png \
    3030  wrench.png

  • trunk/web/style/transmission/mobile.css

    r13093 r13180  
    4545div#toolbar {
    4646  width: 100%;
    47   height: 35px;
     47  height: 36px;
    4848  margin: 0px;
    4949  padding: 2px;
    5050  border-bottom: 1px solid #AAA;
    51   background: url("images/red-texture.png") repeat; }
     51  background-color: #cccccc;
     52  background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
     53  background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
     54  background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
     55  background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
     56  background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
     57  background-image: linear-gradient(top, #dddddd, #bbbbbb); }
    5258  div#toolbar > * {
    5359    cursor: pointer;
    … …  
    6066    padding: 3px;
    6167    margin-top: 5px;
    62     width: 18px;
    63     height: 18px;
    64     padding: 2px 8px;
     68    width: 34px;
     69    height: 34px;
    6570    float: left;
    66     border: 1px solid #888; }
     71    border: none;
     72    padding: 0px 3px; }
     73  div#toolbar > div#toolbar-separator {
     74    height: 25px;
     75    margin-top: 8px;
     76    margin-bottom: 5px;
     77    border-left: 1px solid #aaa;
     78    width: 3px; }
    6779  div#toolbar div#toolbar-open {
    68     -moz-border-radius-topleft: 5px;
    69     -moz-border-radius-bottomleft: 5px;
    70     border-top-left-radius: 5px;
    71     border-bottom-left-radius: 5px;
    72     background-color: #dddddd;
    73     background-image: url("images/toolbar-folder.png");
    74     /* fallback */
    75     background-image: url("images/toolbar-folder.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
    76     /* Saf4+, Chrome */
    77     background-image: url("images/toolbar-folder.png"), -webkit-linear-gradient(top, white, #bbbbbb);
    78     /* Chrome 10+, Saf5.1+ */
    79     background-image: url("images/toolbar-folder.png"), -moz-linear-gradient(top, white, #bbbbbb);
    80     /* FF3.6+ */
    81     background-image: url("images/toolbar-folder.png"), -ms-linear-gradient(top, white, #bbbbbb);
    82     /* IE10 */
    83     background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, white, #bbbbbb);
    84     /* Opera 11.10+ */
    85     background-position: center;
    86     background-repeat: no-repeat;
    87     margin-left: 4px; }
    88     div#toolbar div#toolbar-open:active, div#toolbar div#toolbar-open.selected {
    89       background-color: #e6e6ff;
    90       background-image: url("images/toolbar-folder.png");
    91       /* fallback */
    92       background-image: url("images/toolbar-folder.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
    93       /* Saf4+, Chrome */
    94       background-image: url("images/toolbar-folder.png"), -webkit-linear-gradient(top, #cdcdff, white);
    95       /* Chrome 10+, Saf5.1+ */
    96       background-image: url("images/toolbar-folder.png"), -moz-linear-gradient(top, #cdcdff, white);
    97       /* FF3.6+ */
    98       background-image: url("images/toolbar-folder.png"), -ms-linear-gradient(top, #cdcdff, white);
    99       /* IE10 */
    100       background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, #cdcdff, white);
    101       /* Opera 11.10+ */
    102       background-position: center;
    103       background-repeat: no-repeat; }
     80    background: url("images/toolbar-folder.png") no-repeat; }
    10481  div#toolbar > div#toolbar-remove {
    105     -moz-border-radius-topright: 5px;
    106     -moz-border-radius-bottomright: 5px;
    107     border-top-right-radius: 5px;
    108     border-bottom-right-radius: 5px;
    109     background-color: #dddddd;
    110     background-image: url("images/toolbar-close.png");
    111     /* fallback */
    112     background-image: url("images/toolbar-close.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
    113     /* Saf4+, Chrome */
    114     background-image: url("images/toolbar-close.png"), -webkit-linear-gradient(top, white, #bbbbbb);
    115     /* Chrome 10+, Saf5.1+ */
    116     background-image: url("images/toolbar-close.png"), -moz-linear-gradient(top, white, #bbbbbb);
    117     /* FF3.6+ */
    118     background-image: url("images/toolbar-close.png"), -ms-linear-gradient(top, white, #bbbbbb);
    119     /* IE10 */
    120     background-image: url("images/toolbar-close.png"), -o-linear-gradient(top, white, #bbbbbb);
    121     /* Opera 11.10+ */
    122     background-position: center;
    123     background-repeat: no-repeat; }
    124     div#toolbar > div#toolbar-remove:active, div#toolbar > div#toolbar-remove.selected {
    125       background-color: #e6e6ff;
    126       background-image: url("images/toolbar-close.png");
    127       /* fallback */
    128       background-image: url("images/toolbar-close.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
    129       /* Saf4+, Chrome */
    130       background-image: url("images/toolbar-close.png"), -webkit-linear-gradient(top, #cdcdff, white);
    131       /* Chrome 10+, Saf5.1+ */
    132       background-image: url("images/toolbar-close.png"), -moz-linear-gradient(top, #cdcdff, white);
    133       /* FF3.6+ */
    134       background-image: url("images/toolbar-close.png"), -ms-linear-gradient(top, #cdcdff, white);
    135       /* IE10 */
    136       background-image: url("images/toolbar-close.png"), -o-linear-gradient(top, #cdcdff, white);
    137       /* Opera 11.10+ */
    138       background-position: center;
    139       background-repeat: no-repeat; }
     82    background: url("images/toolbar-close.png") no-repeat; }
    14083  div#toolbar > div#toolbar-start {
    141     -moz-border-radius-topleft: 5px;
    142     -moz-border-radius-bottomleft: 5px;
    143     border-top-left-radius: 5px;
    144     border-bottom-left-radius: 5px;
    145     background-color: #dddddd;
    146     background-image: url("images/toolbar-start.png");
    147     /* fallback */
    148     background-image: url("images/toolbar-start.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
    149     /* Saf4+, Chrome */
    150     background-image: url("images/toolbar-start.png"), -webkit-linear-gradient(top, white, #bbbbbb);
    151     /* Chrome 10+, Saf5.1+ */
    152     background-image: url("images/toolbar-start.png"), -moz-linear-gradient(top, white, #bbbbbb);
    153     /* FF3.6+ */
    154     background-image: url("images/toolbar-start.png"), -ms-linear-gradient(top, white, #bbbbbb);
    155     /* IE10 */
    156     background-image: url("images/toolbar-start.png"), -o-linear-gradient(top, white, #bbbbbb);
    157     /* Opera 11.10+ */
    158     background-position: center;
    159     background-repeat: no-repeat;
    160     margin-left: 20px; }
    161     div#toolbar > div#toolbar-start:active, div#toolbar > div#toolbar-start.selected {
    162       background-color: #e6e6ff;
    163       background-image: url("images/toolbar-start.png");
    164       /* fallback */
    165       background-image: url("images/toolbar-start.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
    166       /* Saf4+, Chrome */
    167       background-image: url("images/toolbar-start.png"), -webkit-linear-gradient(top, #cdcdff, white);
    168       /* Chrome 10+, Saf5.1+ */
    169       background-image: url("images/toolbar-start.png"), -moz-linear-gradient(top, #cdcdff, white);
    170       /* FF3.6+ */
    171       background-image: url("images/toolbar-start.png"), -ms-linear-gradient(top, #cdcdff, white);
    172       /* IE10 */
    173       background-image: url("images/toolbar-start.png"), -o-linear-gradient(top, #cdcdff, white);
    174       /* Opera 11.10+ */
    175       background-position: center;
    176       background-repeat: no-repeat; }
     84    background: url("images/toolbar-start.png") no-repeat; }
    17785  div#toolbar > div#toolbar-pause {
    178     -moz-border-radius-topright: 5px;
    179     -moz-border-radius-bottomright: 5px;
    180     border-top-right-radius: 5px;
    181     border-bottom-right-radius: 5px;
    182     background-color: #dddddd;
    183     background-image: url("images/toolbar-pause.png");
    184     /* fallback */
    185     background-image: url("images/toolbar-pause.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
    186     /* Saf4+, Chrome */
    187     background-image: url("images/toolbar-pause.png"), -webkit-linear-gradient(top, white, #bbbbbb);
    188     /* Chrome 10+, Saf5.1+ */
    189     background-image: url("images/toolbar-pause.png"), -moz-linear-gradient(top, white, #bbbbbb);
    190     /* FF3.6+ */
    191     background-image: url("images/toolbar-pause.png"), -ms-linear-gradient(top, white, #bbbbbb);
    192     /* IE10 */
    193     background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, white, #bbbbbb);
    194     /* Opera 11.10+ */
    195     background-position: center;
    196     background-repeat: no-repeat; }
    197     div#toolbar > div#toolbar-pause:active, div#toolbar > div#toolbar-pause.selected {
    198       background-color: #e6e6ff;
    199       background-image: url("images/toolbar-pause.png");
    200       /* fallback */
    201       background-image: url("images/toolbar-pause.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
    202       /* Saf4+, Chrome */
    203       background-image: url("images/toolbar-pause.png"), -webkit-linear-gradient(top, #cdcdff, white);
    204       /* Chrome 10+, Saf5.1+ */
    205       background-image: url("images/toolbar-pause.png"), -moz-linear-gradient(top, #cdcdff, white);
    206       /* FF3.6+ */
    207       background-image: url("images/toolbar-pause.png"), -ms-linear-gradient(top, #cdcdff, white);
    208       /* IE10 */
    209       background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, #cdcdff, white);
    210       /* Opera 11.10+ */
    211       background-position: center;
    212       background-repeat: no-repeat; }
    213   div#toolbar > div#toolbar-select {
    214     -moz-border-radius: 5px;
    215     border-radius: 5px;
    216     background-color: #dddddd;
    217     background-image: url("images/toolbar-pointer.png");
    218     /* fallback */
    219     background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
    220     /* Saf4+, Chrome */
    221     background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, white, #bbbbbb);
    222     /* Chrome 10+, Saf5.1+ */
    223     background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, white, #bbbbbb);
    224     /* FF3.6+ */
    225     background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, white, #bbbbbb);
    226     /* IE10 */
    227     background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, white, #bbbbbb);
    228     /* Opera 11.10+ */
    229     background-position: center;
    230     background-repeat: no-repeat;
    231     margin-left: 20px; }
    232     div#toolbar > div#toolbar-select:active, div#toolbar > div#toolbar-select.selected {
    233       background-color: #e6e6ff;
    234       background-image: url("images/toolbar-pointer.png");
    235       /* fallback */
    236       background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
    237       /* Saf4+, Chrome */
    238       background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, #cdcdff, white);
    239       /* Chrome 10+, Saf5.1+ */
    240       background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, #cdcdff, white);
    241       /* FF3.6+ */
    242       background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, #cdcdff, white);
    243       /* IE10 */
    244       background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, #cdcdff, white);
    245       /* Opera 11.10+ */
    246       background-position: center;
    247       background-repeat: no-repeat; }
     86    background: url("images/toolbar-pause.png") no-repeat; }
     87  div#toolbar > div#toolbar-start-all {
     88    background: url("images/toolbar-start-all.png") no-repeat; }
     89  div#toolbar > div#toolbar-pause-all {
     90    background: url("images/toolbar-pause-all.png") no-repeat; }
    24891  div#toolbar > div#toolbar-inspector {
    249     -moz-border-radius: 5px;
    250     border-radius: 5px;
    251     background-color: #dddddd;
    252     background-image: url("images/toolbar-info.png");
    253     /* fallback */
    254     background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
    255     /* Saf4+, Chrome */
    256     background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, white, #bbbbbb);
    257     /* Chrome 10+, Saf5.1+ */
    258     background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, white, #bbbbbb);
    259     /* FF3.6+ */
    260     background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, white, #bbbbbb);
    261     /* IE10 */
    262     background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, white, #bbbbbb);
    263     /* Opera 11.10+ */
    264     background-position: center;
    265     background-repeat: no-repeat;
    266     float: right;
    267     margin-right: 8px; }
    268     div#toolbar > div#toolbar-inspector:active, div#toolbar > div#toolbar-inspector.selected {
    269       background-color: #e6e6ff;
    270       background-image: url("images/toolbar-info.png");
    271       /* fallback */
    272       background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(#cdcdff), to(white));
    273       /* Saf4+, Chrome */
    274       background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, #cdcdff, white);
    275       /* Chrome 10+, Saf5.1+ */
    276       background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, #cdcdff, white);
    277       /* FF3.6+ */
    278       background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, #cdcdff, white);
    279       /* IE10 */
    280       background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, #cdcdff, white);
    281       /* Opera 11.10+ */
    282       background-position: center;
    283       background-repeat: no-repeat; }
     92    background: url("images/toolbar-info.png") no-repeat;
     93    float: right; }
    28494  div#toolbar > *.disabled {
    28595    opacity: 0.25; }
    … …  
    291101***/
    292102#statusbar {
    293   height: 24px;
     103  height: 26px;
    294104  width: 100%;
    295105  border-bottom: 1px solid #AAA;

  • trunk/web/style/transmission/mobile.scss

    r13093 r13180  
    112112***/
    113113
     114$toolbar-gradient-top: #ddd;
     115$toolbar-gradient-bottom: #bbb;
     116$toolbar-height: 36px;
     117
    114118div#toolbar
    115119{
    116         $separator-spacing: 20px;
    117 
    118120        width: 100%;
    119         height: 35px;
     121        height: $toolbar-height;
    120122        margin: 0px;
    121123        padding: 2px;
    122124        border-bottom: 1px solid #AAA;
    123         background: url('images/red-texture.png') repeat;
     125        @include verticalGradient($toolbar-gradient-top, $toolbar-gradient-bottom);
    124126
    125127        $idle-color-top: $nonselected-gradient-top;
    … …  
    131133                @include button;
    132134                margin-top: 5px;
    133                 width: 18px;
    134                 height: 18px;
    135                 padding: 2px 8px;
     135                width: 34px;
     136                height: 34px;
    136137                float: left;
    137                 border: 1px solid #888;
     138                border: none;
     139                padding: 0px 3px;
     140        }
     141
     142        >div#toolbar-separator {
     143                height: 25px;
     144                margin-top: 8px;
     145                margin-bottom: 5px;
     146                border-left: 1px solid #aaa;
     147                width: 3px;
    138148        }
    139149
    140150        div#toolbar-open {
    141                 @include leftRoundedBox(5px);
    142                 @include buttonImage('images/toolbar-folder.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    143                 margin-left: 4px;
     151                background: url('images/toolbar-folder.png') no-repeat;
    144152        }
    145153        > div#toolbar-remove {
    146                 @include rightRoundedBox(5px);
    147                 @include buttonImage('images/toolbar-close.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
     154                background: url('images/toolbar-close.png') no-repeat;
    148155        }
    149156        > div#toolbar-start {
    150                 @include leftRoundedBox(5px);
    151                 @include buttonImage('images/toolbar-start.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    152                 margin-left: $separator-spacing;
     157                background: url('images/toolbar-start.png') no-repeat;
    153158        }
    154159        > div#toolbar-pause {
    155                 @include rightRoundedBox(5px);
    156                 @include buttonImage('images/toolbar-pause.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    157         }
    158         > div#toolbar-select {
    159                 @include roundedBox(5px);
    160                 @include buttonImage('images/toolbar-pointer.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
    161                 margin-left: $separator-spacing;
     160                background: url('images/toolbar-pause.png') no-repeat;
     161        }
     162        > div#toolbar-start-all {
     163                background: url('images/toolbar-start-all.png') no-repeat;
     164        }
     165        > div#toolbar-pause-all {
     166                background: url('images/toolbar-pause-all.png') no-repeat;
    162167        }
    163168
    164169        > div#toolbar-inspector {
    165                 @include roundedBox(5px);
    166                 @include buttonImage('images/toolbar-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
     170                background: url('images/toolbar-info.png') no-repeat;
    167171                float: right;
    168                 margin-right: 8px;
    169172        }
    170173
    … …  
    182185$statusbar-gradient-top: #ddd;
    183186$statusbar-gradient-bottom: #bbb;
     187$statusbar-height: 26px;
    184188
    185189#statusbar
    186190{
    187         height: 24px;
     191        height: $statusbar-height;
    188192        width: 100%;
    189193        border-bottom: 1px solid #AAA;
Note: See TracChangeset for help on using the changeset viewer.