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

Last change on this file since 14518 was 14518, checked in by mikedld, 6 years ago

#4866: Replace existing menus with jQueryUI menu

File size: 18.5 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: 39px;
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                background-position: center center;
141                background-repeat: no-repeat;
142        }
143
144        >div#toolbar-separator {
145                height: 25px;
146                margin-top: 8px;
147                margin-bottom: 8px;
148                border-left: 1px solid #aaa;
149                width: 3px;
150        }
151
152        > div#toolbar-open {
153                background-image: url('images/toolbar-folder.png');
154        }
155        > div#toolbar-remove {
156                background-image: url('images/toolbar-close.png');
157        }
158        > div#toolbar-start {
159                background-image: url('images/toolbar-start.png');
160        }
161        > div#toolbar-pause {
162                background-image: url('images/toolbar-pause.png');
163        }
164        > div#toolbar-start-all {
165                background-image: url('images/toolbar-start-all.png');
166        }
167        > div#toolbar-pause-all {
168                background-image: url('images/toolbar-pause-all.png');
169        }
170
171        > div#toolbar-inspector {
172                background-image: url('images/toolbar-info.png');
173                float: right;
174        }
175
176        > *.disabled {
177                opacity: 0.25;
178        }
179}
180
181/***
182****
183****  STATUSBAR
184****
185***/
186
187$statusbar-gradient-top: #ddd;
188$statusbar-gradient-bottom: #bbb;
189$statusbar-height: 24px;
190
191#statusbar
192{
193        height: $statusbar-height;
194        width: 100%;
195        border-bottom: 1px solid #AAA;
196        overflow: hidden;
197        position: relative;
198        @include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
199
200        #filter
201        {
202                float: left;
203                margin-left: 5px;
204
205                input#torrent_search {
206                        display: none;
207                }
208
209                #filter-count { margin-left: 8px; }
210        }
211
212        #speed-info
213        {
214                float: right;
215                margin-top: 5px;
216                margin-right: 10px;
217
218                * {
219                        display: inline-block;
220                }
221
222                #speed-up-icon {
223                        margin-left: 8px;
224                        width: 8px;
225                        height: 8px;
226                        background: url('images/arrow-up.png') bottom no-repeat;
227                }
228
229                #speed-dn-icon {
230                        width: 8px;
231                        height: 8px;
232                        background: url('images/arrow-down.png') bottom no-repeat;
233                }
234
235                #speed-up-container, #speed-dn-container {
236                        display: inline;
237                }
238        }
239}
240
241/***
242****
243****  TORRENT CONTAINER
244****
245***/
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 14px;
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        /* Files Inspector Tab */
543        #inspector_file_list {
544                padding: 0 0 0 0;
545                margin: 0 0 0 0;
546                text-align: left;
547                cursor: default;
548                overflow: hidden;
549        }
550        #inspector_file_list {
551                border-top: 1px solid #888;
552                width: 100%;
553                margin: 6px 0 0 0;
554                padding-top: 6px;
555                padding-bottom: 10px;
556                text-align: left;
557                display: block;
558                cursor: default;
559                list-style-type: none;
560                list-style: none;
561                list-style-image: none;
562                clear: both;
563        }
564        li.inspector_torrent_file_list_entry {
565                padding: 3px 0 3px 2px;
566                display: block;
567                &.skip { color: #666; }
568                &.even { background-color: #F7F7F7; }
569        }
570
571        div.inspector_torrent_file_list_entry_name {
572                font-size: 1.2em;
573                color: black; 
574                display: inline;
575                margin-left: 0px;
576        }
577        li.inspector_torrent_file_list_entry.skip>.inspector_torrent_file_list_entry_name {
578                color: #999;
579        }
580        div.inspector_torrent_file_list_entry_progress {
581                color: #999;
582                margin-left: 20px;
583        }
584
585        ul.single_file li.inspector_torrent_file_list_entry>.file_wanted_control,
586        li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
587                cursor: default;
588        }
589}
590
591/* Peers Inspector Tab */
592#inspector_peers_list {
593        padding: 0 0 0 0;
594        margin: 0 0 0 0;
595        text-align: left;
596        cursor: default;
597        overflow: hidden;
598
599        > div.inspector_group {
600                padding-bottom: 0;
601                margin-bottom: 0;
602        }
603}
604
605table.peer_list {
606        width: 100%;
607        border-collapse: collapse;
608        text-align: left;
609        cursor: default;
610        clear: both;
611        table-layout: fixed;
612
613        .encryptedCol { width: 16px; }
614        .upCol { width: 70px; }
615        .downCol { width: 70px; }
616        .percentCol { width: 30px; padding-right: 5px; text-align: right; }
617        .statusCol { width: 40px; padding-right: 5px; }
618        .addressCol { width: 180px; }
619        .clientCol { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
620}
621
622tr.inspector_peer_entry
623{
624        div.encrypted-peer-cell
625        {
626                width: 16px;
627                height: 16px;
628                background: transparent url('images/lock_icon.png') no-repeat;
629        }
630
631        &.odd
632        {
633                background-color: #EEEEEE;
634        }
635}
636
637/***
638****  File Priority Buttons
639***/
640
641div.file-priority-radiobox
642{
643        $border-radius: 5px;
644
645        display: inline;
646        float: right;
647        margin: 4px;
648        margin-top: 2px;
649
650        > * {
651                @include button;
652                width: 20px;
653                height: 12px;
654        }
655
656        // We have row after row of these buttons, so the flashy colors used in the inspector tabs look harsh here.
657        // Keep the same basic color theme, but look less harsh, by cutting the gradient's color range.
658        $idle-color-top:      mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 80% );
659        $idle-color-bottom:   mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 20% );
660        $active-color-top:    mix( $selected-gradient-top,    $selected-gradient-bottom,    80% );
661        $active-color-bottom: mix( $selected-gradient-top,    $selected-gradient-bottom,    20% );
662
663        > div.low {
664                @include leftRoundedBox($border-radius);
665                @include buttonImage('images/file-priority-low.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
666                border-right-width: 0px;
667        }
668
669        > div.normal {
670                @include buttonImage('images/file-priority-normal.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
671        }
672
673        > div.high {
674                @include rightRoundedBox($border-radius);
675                @include buttonImage('images/file-priority-high.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
676                border-left-width: 0px;
677        }
678}
679
680
681/****
682*****
683*****  MAIN WINDOW FOOTER
684*****
685****/
686
687div.torrent_footer
688{
689        height: 22px;
690        border-top: 1px solid #555;
691        position: relative;
692        width: 100%;
693        z-index: 3;
694
695        @include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
696
697        > div {
698                position: relative;
699                float: left;
700                margin: 2px 4px;
701                width: 18px;
702                height: 12px;
703                padding: 2px 8px;
704                float: left;
705                border: 1px solid #888;
706                -moz-user-select: none;
707                -webkit-user-select: none;
708        }
709
710        $idle-color-top: $nonselected-gradient-top;
711        $idle-color-bottom: $nonselected-gradient-bottom;
712        $active-color-top: $selected-gradient-top;
713        $active-color-bottom: $selected-gradient-bottom;
714
715        #settings_menu {
716                display: none;
717        }
718
719        #prefs-button {
720                @include roundedBox(5px);
721                @include buttonImage('images/wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
722        }
723
724        #turtle-button {
725                @include roundedBox(5px);
726                @include buttonImage('images/turtle.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
727                &:active, &.selected {
728                        @include imageOnVerticalGradient('images/blue-turtle.png', $active-color-top, $active-color-bottom);
729                }
730        }
731
732        #compact-button {
733                @include roundedBox(5px);
734                @include buttonImage('images/compact.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
735        }
736
737        #freespace-info {
738                float: right;
739                text-align: right;
740                border: 0px;
741                width: 100px;
742        }
743}
744
745/****
746*****
747*****  DIALOGS
748*****
749****/
750
751div#dialog_message.dialog_message {
752        width: 280px;
753        margin: 10px auto 25px;
754        font-size: 13px;
755        line-height: 14px;
756        word-wrap: break-word;
757        overflow: hidden;
758        padding-bottom: 0;
759}
760
761#torrent_upload_file, label[for="torrent_upload_file"]{
762        display:none;
763}
764
765h2.dialog_heading {
766        text-align: center;
767        width: 300px;
768        margin: 0 auto;
769        font-size: 17px;
770}
771
772div.dialog_container a {
773        color: white;
774        padding: 7px 0;
775        background: #222;
776        text-decoration: none;
777        border: 2px solid white;
778        margin: 5px 5px 0;
779        font-weight: bold;
780        -webkit-border-radius: 16px;
781        display: inline-block;
782        width: 90px;
783        font-size: 12px;
784        text-align: center;
785}
786
787#dialog_container div.dialog_window img {
788        margin: 5px auto 12px;
789}
790
791.landscape {
792        div.dialog_container {
793                a#dialog_cancel_button { left: 155px; }
794                a#dialog_confirm_button { right: 110px; }
795                img { float: left !important; margin: 0 0 0 50px; }
796        }
797        h2#dialog_heading.dialog_heading {
798                margin: 5px auto 0;
799                margin-left: 150px;
800                text-align: left;
801        }
802        div#dialog_message.dialog_message {
803                width: 300px;
804                margin: 10px 0 20px 150px;
805                text-align: left;
806        }
807}
808
809
810.ui-menu-item {
811  text-align: left;
812  white-space: nowrap;
813}
814
815#torrent_context_menu {
816  font-size: 1em;
817  z-index: 3;
818}
819
820iframe#torrent_upload_frame {
821        display: block; /* Don't change this : safari forms won't target hidden frames (they open a new window) */
822        position: absolute;
823        top: -1000px;
824        left: -1000px;
825        width: 0px;
826        height: 0px;
827        border: none;
828        padding: 0;
829        margin: 0;
830}
Note: See TracBrowser for help on using the repository browser.