source: trunk/web/style/transmission/mobile.scss @ 13222

Last change on this file since 13222 was 13222, checked in by jordan, 10 years ago

(trunk web) remove dead css from the removed filter popup

File size: 18.7 KB
Line 
1@mixin verticalGradient($topColor, $bottomColor) {
2        background-color: mix($topColor, $bottomColor);
3        background-image: -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor)); 
4        background-image: -webkit-linear-gradient(top, $topColor, $bottomColor); 
5        background-image:    -moz-linear-gradient(top, $topColor, $bottomColor); 
6        background-image:     -ms-linear-gradient(top, $topColor, $bottomColor); 
7        background-image:      -o-linear-gradient(top, $topColor, $bottomColor); 
8        background-image:         linear-gradient(top, $topColor, $bottomColor);
9}
10
11@mixin imageOnVerticalGradient($src, $topColor, $bottomColor) {
12        background-color: mix($topColor, $bottomColor);
13        background-image: url($src); /* fallback */
14        background-image: url($src), -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor)); /* Saf4+, Chrome */
15        background-image: url($src), -webkit-linear-gradient(top, $topColor, $bottomColor); /* Chrome 10+, Saf5.1+ */
16        background-image: url($src), -moz-linear-gradient(top, $topColor, $bottomColor); /* FF3.6+ */
17        background-image: url($src), -ms-linear-gradient(top, $topColor, $bottomColor); /* IE10 */
18        background-image: url($src), -o-linear-gradient(top, $topColor, $bottomColor); /* Opera 11.10+ */
19        background-position: center;
20        background-repeat: no-repeat;
21}
22
23@mixin buttonImage($image-url, $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom) {
24        @include imageOnVerticalGradient($image-url, $idle-color-top, $idle-color-bottom);
25        &:active, &.selected {
26                @include imageOnVerticalGradient($image-url, $active-color-top, $active-color-bottom);
27        }
28}
29
30$nonselected-gradient-top: white;
31$nonselected-gradient-bottom: #BBB;
32$selection-color: #cdcdff;
33$selected-gradient-top: $selection-color;
34$selected-gradient-bottom: white;
35
36@mixin button {
37        cursor: pointer;
38        -moz-user-select: none;
39        -webkit-user-select: none;
40        display: inline-block;
41        border-style: solid;
42        border-color: #aaa;
43        border-width: 1px;
44        padding: 3px;
45}
46
47@mixin roundedBox($radius) {
48        -moz-border-radius: $radius;
49        border-radius: $radius;
50}
51
52@mixin leftRoundedBox($radius) {
53        -moz-border-radius-topleft: $radius;
54        -moz-border-radius-bottomleft: $radius;
55        border-top-left-radius: $radius;
56        border-bottom-left-radius: $radius;
57}
58@mixin rightRoundedBox($radius) {
59        -moz-border-radius-topright: $radius;
60        -moz-border-radius-bottomright: $radius;
61        border-top-right-radius: $radius;
62        border-bottom-right-radius: $radius;
63}
64
65@mixin roundedButton($radius) {
66        @include button;
67        @include roundedBox($radius);
68}
69
70/*--------------------------------------
71 *
72 * G L O B A L
73 *
74 *--------------------------------------*/
75
76html {
77        margin: 0;
78        padding: 0;
79}
80
81body {
82        font: 11px Helvetica, Arial, sans-serif;
83        background: #FFF;
84        text-align: center;
85        margin: 0;
86        padding: 0;
87        width: 100%;
88        overflow-x: hidden;
89        img { border: none; }
90        a { outline: 0; }
91        -webkit-text-size-adjust: none;
92
93        div#torrent_container { min-height: 328px; }
94        div.dialog_container { min-height: 326px; }
95        div#torrent_inspector { min-height: 329px; }
96        &.landscape div#torrent_container {     min-height: 147px; }
97        &.landscape div#dialog_container,
98        &.landscape div#torrent_inspector {     min-height: 143px; }
99}
100
101body.inspector_showing #torrent_filter_bar, body.inspector_showing #torrent_container,
102body.dialog_showing #torrent_filter_bar, body.dialog_showing #torrent_container, body.dialog_showing #torrent_inspector,
103body.prefs_showing #torrent_inspector, body.prefs_showing #torrent_filter_bar, body.prefs_showing #torrent_container,
104body.open_showing #torrent_filter_bar, body.open_showing #torrent_container {
105        display: none !important;
106}
107
108/***
109****
110****  TOOLBAR
111****
112***/
113
114$toolbar-gradient-top: #ddd;
115$toolbar-gradient-bottom: #bbb;
116$toolbar-height: 36px;
117
118div#toolbar
119{
120        width: 100%;
121        height: $toolbar-height;
122        margin: 0px;
123        padding: 2px;
124        border-bottom: 1px solid #AAA;
125        @include verticalGradient($toolbar-gradient-top, $toolbar-gradient-bottom);
126
127        $idle-color-top: $nonselected-gradient-top;
128        $idle-color-bottom: $nonselected-gradient-bottom;
129        $active-color-top: $selected-gradient-top;
130        $active-color-bottom: $selected-gradient-bottom;
131
132        > * {
133                @include button;
134                margin-top: 5px;
135                width: 34px;
136                height: 34px;
137                float: left;
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;
148        }
149
150        div#toolbar-open {
151                background: url('images/toolbar-folder.png') no-repeat;
152        }
153        > div#toolbar-remove {
154                background: url('images/toolbar-close.png') no-repeat;
155        }
156        > div#toolbar-start {
157                background: url('images/toolbar-start.png') no-repeat;
158        }
159        > div#toolbar-pause {
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;
167        }
168
169        > div#toolbar-inspector {
170                background: url('images/toolbar-info.png') no-repeat;
171                float: right;
172        }
173
174        > *.disabled {
175                opacity: 0.25;
176        }
177}
178
179/***
180****
181****  STATUSBAR
182****
183***/
184
185$statusbar-gradient-top: #ddd;
186$statusbar-gradient-bottom: #bbb;
187$statusbar-height: 26px;
188
189#statusbar
190{
191        height: $statusbar-height;
192        width: 100%;
193        border-bottom: 1px solid #AAA;
194        overflow: hidden;
195        position: relative;
196        @include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
197
198        #filter
199        {
200                float: left;
201                margin-left: 5px;
202
203                input#torrent_search {
204                        display: none;
205                }
206
207                #filter-count { margin-left: 8px; }
208        }
209
210        #speed-info
211        {
212                float: right;
213                margin-top: 5px;
214                margin-right: 10px;
215
216                * {
217                        display: inline-block;
218                }
219
220                #speed-up-icon {
221                        margin-left: 8px;
222                        width: 8px;
223                        height: 8px;
224                        background: url('images/arrow-up.png') bottom no-repeat;
225                }
226
227                #speed-dn-icon {
228                        width: 8px;
229                        height: 8px;
230                        background: url('images/arrow-down.png') bottom no-repeat;
231                }
232
233                #speed-up-container, #speed-dn-container {
234                        display: inline;
235                }
236        }
237}
238
239/***
240****
241****  TORRENT CONTAINER
242****
243***/
244
245$torrent-list-button-width: 0px;
246
247ul.torrent_list
248{
249        width: 100%;
250        margin: 0;
251        padding: 0;
252        text-align: left;
253        cursor: pointer;
254
255        li.torrent
256        {
257                border-bottom: 1px solid #ccc;
258                padding: 4px 30px 5px $torrent-list-button-width;
259                color: #666;
260                background-color: white;
261
262                &.compact { padding: 4px; }
263                &.even { background-color: #F7F7F7; }
264                &.selected { background-color: $selection-color; }
265                &.compact { div.torrent_name { color: black; } }
266
267                // start-stop button
268                a {
269                        display: none;
270                }
271
272                div.torrent_name
273                {
274                        font-size: 1.3em;
275                        font-weight: bold;
276                        overflow: hidden;
277                        text-overflow: ellipsis;
278                        white-space: nowrap;
279                        color: #222;
280                        margin-top: 2px;
281                        margin-bottom: 2px;
282
283                        &.compact { font-size: 1.0em; font-weight: normal; }
284                        &.paused { font-weight: normal; color: #777; }
285                }
286
287                div.torrent_progress_details,
288                div.torrent_peer_details {
289                        clear: left;
290                        overflow: hidden;
291                        text-overflow: ellipsis;
292                        white-space: nowrap;
293                }
294
295                div.torrent_progress_details.error,
296                div.torrent_peer_details.error {
297                        color: #F00;
298                }
299
300                &.selected div.torrent_progress_details.error,
301                &.selected div.torrent_peer_details.error {
302                        color: #FFF;
303                }
304        }
305
306        /**
307         * Progressbar
308         *
309         * Each progressbar has three elemens: a parent container and two children,
310         * complete and incomplete.
311         *
312         * The only thing needed to set the progressbar percentage is to set
313         * the complete child's width as a percentage. This is because incomplete
314         * is pinned to the full width and height of the parent, and complete
315         * is pinned to the left side of the parent and has a higher z-index.
316         *
317         * The progressbar has different colors depending on its state, so there
318         * are five 'decorator' classNames: paused, queued, magnet, leeching, seeding.
319         */
320        div.torrent_progress_bar_container
321        {
322                height: 10px;
323                position: relative;
324
325                &.compact {
326                        width: 50px;
327                        position: absolute;
328                        right: 10px;
329                        margin-top: 2px;
330                        /*float: right;*/
331                }
332                &.full {
333                        margin-top: 2px;
334                        margin-bottom: 5px;
335                }
336        }
337        div.torrent_peer_details.compact
338        {
339                margin-top: 2px;
340                margin-right: 65px; /* leave room on the right for the progressbar */
341                float: right; /* pins it next to progressbar & forces torrent_name to ellipsize when it bumps up against this div */
342        }
343        div.torrent_progress_bar
344        {
345                height: 100%;
346                position: absolute;
347                top: 0px;
348                left: 0px;
349                background-image: url('images/progress.png');
350                background-repeat: repeat-x;
351                border: 1px solid #888;
352
353                &.complete                   { z-index: 2; }
354                &.complete.paused            { background-position: left -30px; border-color: #989898; }
355                &.complete.magnet            { background-position: left -20px; border-color: #CFCFCF; }
356                &.complete.leeching          { background-position: left   0px; border-color: #3D9DEA; }
357                &.complete.leeching.queued   { background-position: left -70px; border-color: #889CA5; }
358                &.complete.seeding           { background-position: left -40px; border-color: #269E30; }
359                &.complete.seeding.queued    { background-position: left -60px; border-color: #8A998D; }
360                &.incomplete                 { z-index: 1; width: 100%; }
361                &.incomplete.paused          { background-position: left -20px; border-color: #CFCFCF; }
362                &.incomplete.magnet          { background-position: left -50px; border-color: #D47778; }
363                &.incomplete.leeching        { background-position: left -20px; border-color: #CFCFCF; }
364                &.incomplete.leeching.queued { background-position: left -80px; border-color: #C4C4C4; }
365                &.incomplete.seeding         { background-position: left -10px; border-color: #29AD35; }
366        }
367}
368
369/***
370****
371****  PREFERENCES
372****
373***/
374
375#prefs-dialog.ui-tabs .ui-tabs-panel {
376        padding: 0px;
377        -moz-user-select: none;
378        -webkit-user-select: none;
379}
380
381.prefs-section
382{
383        margin: 10px;
384        text-align: left;
385
386        > * {
387                padding-top: 8px;
388                padding-left: 8px;
389        }
390
391        .title {
392                font-weight: bold;
393                font-size: larger;
394                padding-left: 0px;
395        }
396
397        .row {
398                .key {
399                        float: left;
400                        padding-top: 3px;
401                        > * { margin-left: 0px; }
402                }
403                .value {
404                        margin-left: 150px;
405                        > * { width: 100%; }
406                }
407        }
408
409        .checkbox-row {
410                > input { margin: 0px; }
411                > label { margin-left: 5px; }
412        }
413
414        #alternative-speed-limits-title {
415                padding-left: 18px;
416                background: transparent url('images/blue-turtle.png') no-repeat;
417        }
418}
419
420/***
421****
422****  TORRENT INSPECTOR
423****
424***/
425
426div#torrent_inspector
427{
428        overflow: auto;
429        text-align: left;
430        padding: 15px;
431        top: 0;
432        position: relative;
433        width: 100%;
434        z-index: 2;
435
436        $idle-color-top: $nonselected-gradient-top;
437        $idle-color-bottom: $nonselected-gradient-bottom;
438        $active-color-top: $selected-gradient-top;
439        $active-color-bottom: $selected-gradient-bottom;
440
441
442        #inspector-tabs-wrapper
443        {
444                width: 100%;
445                overflow: hidden;
446                text-align: center;
447
448                #inspector-tabs
449                {
450                        $border-radius: 5px;
451
452                        display: inline-block;
453
454                        > * {
455                                @include button;
456                                width: 30px;
457                                height: 20px;
458                        }
459
460                        > #inspector-tab-info {
461                                @include leftRoundedBox($border-radius);
462                                @include buttonImage('images/inspector-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
463                                border-left-width: 1px;
464                        }
465
466                        > #inspector-tab-peers {
467                                @include buttonImage('images/inspector-peers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
468                        }
469
470                        > #inspector-tab-trackers {
471                                @include buttonImage('images/inspector-trackers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
472                        }
473
474                        > #inspector-tab-files {
475                                @include rightRoundedBox($border-radius);
476                                @include buttonImage('images/inspector-files.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
477                        }
478                }
479        }
480
481        #inspector_header
482        {
483                margin-top: 8px;
484
485                #torrent_inspector_name
486                {
487                        font-weight: bold;
488                        font-size: large;
489                }
490        }
491
492        ul.tier_list
493        {
494                margin: 2px 0 8px 0;
495                width: 100%;
496                padding-left: 0px;
497                text-align: left;
498                display: block;
499                cursor: default;
500                list-style-type: none;
501                list-style: none;
502                list-style-image: none;
503                clear: both;
504
505                li {
506                        overflow: hidden;
507                }
508                .tracker_activity {
509                        float: left;
510                        color: #666;
511                        width: 200px;
512                        display: table;
513                        margin-top: 1px;
514                }
515                .tracker_activity div {
516                        padding: 2px;
517                }
518                table {
519                        float: right;
520                        color: #666;
521                }
522                th {
523                        text-align: right;
524                }
525        }
526
527        li.inspector_tracker_entry {
528                padding: 3px 0 3px 2px;
529                display: block;
530
531                &.odd {
532                        background-color: #EEEEEE;
533                }
534        }
535
536        div.tracker_host {
537                font-size: 1.2em;
538                font-weight: bold;
539                color: #222;
540        }
541
542        #file-list-header {
543                float: right;
544                > * {
545                        @include verticalGradient($idle-color-top, $idle-color-bottom);
546                        @include roundedButton(5px);
547                        &:active {
548                                @include verticalGradient($active-color-top, $active-color-bottom);
549                        }
550                }
551        }
552
553        /* Files Inspector Tab */
554        #inspector_file_list {
555                padding: 0 0 0 0;
556                margin: 0 0 0 0;
557                text-align: left;
558                cursor: default;
559                overflow: hidden;
560        }
561        #inspector_file_list {
562                border-top: 1px solid #888;
563                width: 100%;
564                margin: 6px 0 0 0;
565                padding-top: 6px;
566                padding-bottom: 10px;
567                text-align: left;
568                display: block;
569                cursor: default;
570                list-style-type: none;
571                list-style: none;
572                list-style-image: none;
573                clear: both;
574        }
575        li.inspector_torrent_file_list_entry {
576                padding: 3px 0 3px 2px;
577                display: block;
578                &.skip { color: #666; }
579                &.even { background-color: #F7F7F7; }
580        }
581
582        div.inspector_torrent_file_list_entry_name {
583                font-size: 1.2em;
584                color: black; 
585                display: inline;
586                margin-left: 0px;
587        }
588        li.inspector_torrent_file_list_entry.skip>.inspector_torrent_file_list_entry_name {
589                color: #999;
590        }
591        div.inspector_torrent_file_list_entry_progress {
592                color: #999;
593                margin-left: 20px;
594        }
595
596        li.inspector_torrent_file_list_entry.skip>.file_wanted_control {
597                background-position: left top;
598        }
599
600        li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
601                background-position: left -19px;
602        }
603
604        ul.single_file li.inspector_torrent_file_list_entry>.file_wanted_control,
605        li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
606                background-position: left -38px;
607                cursor: default;
608        }
609}
610
611/* Peers Inspector Tab */
612#inspector_peers_list {
613        padding: 0 0 0 0;
614        margin: 0 0 0 0;
615        text-align: left;
616        cursor: default;
617        overflow: hidden;
618
619        > div.inspector_group {
620                padding-bottom: 0;
621                margin-bottom: 0;
622        }
623}
624
625table.peer_list {
626        width: 100%;
627        border-collapse: collapse;
628        text-align: left;
629        cursor: default;
630        clear: both;
631        table-layout: fixed;
632
633        .encryptedCol { width: 16px; }
634        .upCol { width: 70px; }
635        .downCol { width: 70px; }
636        .percentCol { width: 30px; padding-right: 5px; text-align: right; }
637        .statusCol { width: 40px; padding-right: 5px; }
638        .addressCol { width: 180px; }
639        .clientCol { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
640}
641
642tr.inspector_peer_entry
643{
644        div.encrypted-peer-cell
645        {
646                width: 16px;
647                height: 16px;
648                background: transparent url('images/lock_icon.png') no-repeat;
649        }
650
651        &.odd
652        {
653                background-color: #EEEEEE;
654        }
655}
656
657/***
658****  File Priority Buttons
659***/
660
661div.file-priority-radiobox
662{
663        $border-radius: 5px;
664
665        display: inline;
666        float: right;
667        margin: 4px;
668        margin-top: 2px;
669
670        > * {
671                @include button;
672                width: 20px;
673                height: 12px;
674        }
675
676        // We have row after row of these buttons, so the flashy colors used in the inspector tabs look harsh here.
677        // Keep the same basic color theme, but look less harsh, by cutting the gradient's color range.
678        $idle-color-top:      mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 80% );
679        $idle-color-bottom:   mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 20% );
680        $active-color-top:    mix( $selected-gradient-top,    $selected-gradient-bottom,    80% );
681        $active-color-bottom: mix( $selected-gradient-top,    $selected-gradient-bottom,    20% );
682
683        > div.low {
684                @include leftRoundedBox($border-radius);
685                @include buttonImage('images/file-priority-low.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
686                border-right-width: 0px;
687        }
688
689        > div.normal {
690                @include buttonImage('images/file-priority-normal.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
691        }
692
693        > div.high {
694                @include rightRoundedBox($border-radius);
695                @include buttonImage('images/file-priority-high.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
696                border-left-width: 0px;
697        }
698}
699
700
701/****
702*****
703*****  MAIN WINDOW FOOTER
704*****
705****/
706
707div.torrent_footer
708{
709        height: 22px;
710        border-top: 1px solid #555;
711        position: relative;
712        width: 100%;
713        z-index: 3;
714
715        @include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
716
717        > * {
718                position: relative;
719                float: left;
720                margin: 2px 4px;
721                width: 18px;
722                height: 12px;
723                padding: 2px 8px;
724                float: left;
725                border: 1px solid #888;
726                -moz-user-select: none;
727                -webkit-user-select: none;
728        }
729
730        $idle-color-top: $nonselected-gradient-top;
731        $idle-color-bottom: $nonselected-gradient-bottom;
732        $active-color-top: $selected-gradient-top;
733        $active-color-bottom: $selected-gradient-bottom;
734
735        div.main_container,
736        ul#settings_menu {
737                display: none;
738        }
739
740        #prefs-button {
741                @include roundedBox(5px);
742                @include buttonImage('images/wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
743        }
744
745        #turtle-button {
746                @include roundedBox(5px);
747                @include buttonImage('images/turtle.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
748        }
749
750        #compact-button {
751                @include roundedBox(5px);
752                @include buttonImage('images/compact.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
753        }
754}
755
756/****
757*****
758*****  DIALOGS
759*****
760****/
761
762div#dialog_message.dialog_message {
763        width: 280px;
764        margin: 10px auto 25px;
765        font-size: 13px;
766        line-height: 14px;
767        word-wrap: break-word;
768        overflow: hidden;
769        padding-bottom: 0;
770}
771
772#torrent_upload_file, label[for="torrent_upload_file"]{
773        display:none;
774}
775
776h2.dialog_heading {
777        text-align: center;
778        width: 300px;
779        margin: 0 auto;
780        font-size: 17px;
781}
782
783div.dialog_container a {
784        color: white;
785        padding: 7px 0;
786        background: #222;
787        text-decoration: none;
788        border: 2px solid white;
789        margin: 5px 5px 0;
790        font-weight: bold;
791        -webkit-border-radius: 16px;
792        display: inline-block;
793        width: 90px;
794        font-size: 12px;
795        text-align: center;
796}
797
798#dialog_container div.dialog_window img {
799        margin: 5px auto 12px;
800}
801
802.landscape {
803        div.dialog_container {
804                a#dialog_cancel_button { left: 155px; }
805                a#dialog_confirm_button { right: 110px; }
806                img { float: left !important; margin: 0 0 0 50px; }
807        }
808        h2#dialog_heading.dialog_heading {
809                margin: 5px auto 0;
810                margin-left: 150px;
811                text-align: left;
812        }
813        div#dialog_message.dialog_message {
814                width: 300px;
815                margin: 10px 0 20px 150px;
816                text-align: left;
817        }
818}
819
820
821// no context menu in the mobile version...
822div#torrent_context_menu {
823        display: none;
824}
825
826iframe#torrent_upload_frame {
827        display: block; /* Don't change this : safari forms won't target hidden frames (they open a new window) */
828        position: absolute;
829        top: -1000px;
830        left: -1000px;
831        width: 0px;
832        height: 0px;
833        border: none;
834        padding: 0;
835        margin: 0;
836}
Note: See TracBrowser for help on using the repository browser.