source: trunk/web/style/transmission/common.scss @ 13755

Last change on this file since 13755 was 13755, checked in by jordan, 9 years ago

(web) #4873 -- fix left margin of the torrent list in the mobile css

File size: 22.2 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        height: 100%;
80}
81
82body {
83        font: 62.5% "lucida grande", Tahoma, Verdana, Arial, Helvetica, sans-serif; /* Resets 1em to 10px */
84        color: #222;/* !important; */
85        background: #FFF;
86        text-align: center;
87        margin: 0 0 30px;
88        overflow: hidden;
89        img { border: none; }
90        a { outline: 0; }
91}
92
93/***
94****
95****  ABOUT DIALOG
96****
97***/
98
99#about-dialog
100{
101        > * {
102                text-align: center;
103        }
104        > #about-logo {
105                background: transparent url('images/logo.png') top left no-repeat;
106                width: 64px;
107                height: 64px;
108                margin-left: 100px;
109        }
110        > #about-title {
111                font-size: 1.3em;
112                font-weight: bold;
113        }
114}
115
116/***
117****
118****  TOOLBAR
119****
120***/
121$toolbar-gradient-top: #ddd;
122$toolbar-gradient-bottom: #bbb;
123$toolbar-height: 36px;
124
125div#toolbar
126{
127        width: 100%;
128        height: $toolbar-height;
129        margin: 0px;
130        padding: 2px;
131        border-bottom: 1px solid #AAA;
132        @include verticalGradient($toolbar-gradient-top, $toolbar-gradient-bottom);
133
134        $idle-color-top: $nonselected-gradient-top;
135        $idle-color-bottom: $nonselected-gradient-bottom;
136        $active-color-top: $selected-gradient-top;
137        $active-color-bottom: $selected-gradient-bottom;
138
139        > * {
140                @include button;
141                width: 34px;
142                height: 34px;
143                float: left;
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;
158                margin-left: 4px;
159        }
160        > div#toolbar-remove {
161                background: url('images/toolbar-close.png') no-repeat;
162        }
163        > div#toolbar-start {
164                background: url('images/toolbar-start.png') no-repeat;
165        }
166        > div#toolbar-pause {
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;
174        }
175
176        > div#toolbar-inspector {
177                background: url('images/toolbar-info.png') no-repeat;
178                float: right;
179                margin-right: 4px;
180        }
181
182        > *.disabled {
183                opacity: 0.25;
184        }
185}
186
187/***
188****
189****  STATUSBAR
190****
191***/
192
193$statusbar-gradient-top: #ddd;
194$statusbar-gradient-bottom: #bbb;
195$statusbar-height: 26px;
196
197#statusbar
198{
199        height: $statusbar-height;
200        width: 100%;
201        border-bottom: 1px solid #AAA;
202        overflow: hidden;
203        position: relative;
204        @include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
205
206        #filter
207        {
208                float: left;
209                margin-left: 5px;
210
211                input#torrent_search {
212                        height: 18px;
213                        width: 100px;
214                        border-radius: 6px;
215                        &.blur { color: #999; }
216                }
217
218                #filter-count { margin-left: 8px; }
219        }
220
221        #speed-info
222        {
223                float: right;
224                margin-top: 5px;
225                margin-right: 10px;
226
227                * {
228                        display: inline-block;
229                }
230
231                #speed-up-icon {
232                        margin-left: 8px;
233                        width: 8px;
234                        height: 8px;
235                        background: url('images/arrow-up.png') bottom no-repeat;
236                }
237
238                #speed-dn-icon {
239                        width: 8px;
240                        height: 8px;
241                        background: url('images/arrow-down.png') bottom no-repeat;
242                }
243
244                #speed-up-container, #speed-dn-container {
245                        display: inline;
246                }
247        }
248}
249
250/***
251****
252****  TORRENT CONTAINER
253****
254***/
255
256$torrent-container-top: $toolbar-height + $statusbar-height + 6px;
257
258div#torrent_container {
259        position: fixed;
260        top: $torrent-container-top;
261        bottom: 22px;
262        right: 0px;
263        left: 0px;
264        padding: 0px;
265        margin: 0px;
266        overflow: auto;
267        -webkit-overflow-scrolling: touch;
268}
269
270ul.torrent_list
271{
272        width: 100%;
273        margin: 0;
274        padding: 0;
275        text-align: left;
276        cursor: pointer;
277
278        li.torrent
279        {
280                border-bottom: 1px solid #ccc;
281                padding: 4px 30px 5px 14px;
282                color: #666;
283                background-color: white;
284
285                &.compact { padding: 4px; }
286                &.even { background-color: #F7F7F7; }
287                &.selected { background-color: $selection-color; }
288                &.compact { div.torrent_name { color: black; } }
289
290                // start-stop button
291                a {
292                        float: right;
293                        position: relative;
294                        right: -22px;
295                        top: 1px;
296
297                        img {
298                                position: relative;
299                                right: -10px;
300                        }
301
302                        div {
303                                background: url('images/buttons/torrent_buttons.png');
304                                height: 14px;
305                                width: 14px;
306                        }
307       
308                        div.torrent_pause { background-position: left top; }
309                        div.torrent_resume { background-position: center top; }
310       
311                        &:active {
312                                div.torrent_pause { background-position: left bottom; }
313                                div.torrent_resume { background-position: center bottom; }
314                        }
315                        &:hover {
316                                div.torrent_pause { background-position: left center; }
317                                div.torrent_resume { background-position: center center; }
318                        }
319                }
320
321                div.torrent_name
322                {
323                        font-size: 1.3em;
324                        font-weight: bold;
325                        overflow: hidden;
326                        text-overflow: ellipsis;
327                        white-space: nowrap;
328                        color: #222;
329                        margin-top: 2px;
330                        margin-bottom: 2px;
331
332                        &.compact { font-size: 1.0em; font-weight: normal; }
333                        &.paused { font-weight: normal; color: #777; }
334                }
335
336                div.torrent_progress_details,
337                div.torrent_peer_details {
338                        clear: left;
339                        overflow: hidden;
340                        text-overflow: ellipsis;
341                        white-space: nowrap;
342                }
343
344                div.torrent_progress_details.error,
345                div.torrent_peer_details.error {
346                        color: #F00;
347                }
348
349                &.selected div.torrent_progress_details.error,
350                &.selected div.torrent_peer_details.error {
351                        color: #FFF;
352                }
353        }
354
355        /**
356         * Progressbar
357         *
358         * Each progressbar has three elemens: a parent container and two children,
359         * complete and incomplete.
360         *
361         * The only thing needed to set the progressbar percentage is to set
362         * the complete child's width as a percentage. This is because incomplete
363         * is pinned to the full width and height of the parent, and complete
364         * is pinned to the left side of the parent and has a higher z-index.
365         *
366         * The progressbar has different colors depending on its state, so there
367         * are five 'decorator' classNames: paused, queued, magnet, leeching, seeding.
368         */
369        div.torrent_progress_bar_container
370        {
371                height: 10px;
372                position: relative;
373
374                &.compact {
375                        width: 50px;
376                        position: absolute;
377                        right: 10px;
378                        margin-top: 2px;
379                        /*float: right;*/
380                }
381                &.full {
382                        margin-top: 2px;
383                        margin-bottom: 5px;
384                }
385        }
386        div.torrent_peer_details.compact
387        {
388                margin-top: 2px;
389                margin-right: 65px; /* leave room on the right for the progressbar */
390                float: right; /* pins it next to progressbar & forces torrent_name to ellipsize when it bumps up against this div */
391        }
392        div.torrent_progress_bar
393        {
394                height: 100%;
395                position: absolute;
396                top: 0px;
397                left: 0px;
398                background-image: url('images/progress.png');
399                background-repeat: repeat-x;
400                border: 1px solid #888;
401
402                &.complete                   { z-index: 2; }
403                &.complete.paused            { background-position: left -30px; border-color: #989898; }
404                &.complete.magnet            { background-position: left -20px; border-color: #CFCFCF; }
405                &.complete.leeching          { background-position: left   0px; border-color: #3D9DEA; }
406                &.complete.leeching.queued   { background-position: left -70px; border-color: #889CA5; }
407                &.complete.seeding           { background-position: left -40px; border-color: #269E30; }
408                &.complete.seeding.queued    { background-position: left -60px; border-color: #8A998D; }
409                &.incomplete                 { z-index: 1; width: 100%; }
410                &.incomplete.paused          { background-position: left -20px; border-color: #CFCFCF; }
411                &.incomplete.magnet          { background-position: left -50px; border-color: #D47778; }
412                &.incomplete.leeching        { background-position: left -20px; border-color: #CFCFCF; }
413                &.incomplete.leeching.queued { background-position: left -80px; border-color: #C4C4C4; }
414                &.incomplete.seeding         { background-position: left -10px; border-color: #29AD35; }
415        }
416}
417
418/***
419****
420****  PREFERENCES
421****
422***/
423
424#prefs-dialog.ui-tabs .ui-tabs-panel {
425        padding: 0px;
426        -moz-user-select: none;
427        -webkit-user-select: none;
428}
429
430.prefs-section
431{
432        margin: 10px;
433        text-align: left;
434
435        > * {
436                padding-top: 8px;
437                padding-left: 8px;
438        }
439
440        .title {
441                font-weight: bold;
442                font-size: larger;
443                padding-left: 0px;
444        }
445
446        .row {
447                .key {
448                        float: left;
449                        padding-top: 3px;
450                        > * { margin-left: 0px; }
451                }
452                .value {
453                        margin-left: 150px;
454                        > * { width: 100%; }
455                }
456        }
457
458        .checkbox-row {
459                > input { margin: 0px; }
460                > label { margin-left: 5px; }
461        }
462
463        #alternative-speed-limits-title {
464                padding-left: 18px;
465                background: transparent url('images/blue-turtle.png') no-repeat;
466        }
467}
468
469/***
470****
471****  TORRENT INSPECTOR
472****
473***/
474
475$inspector-width: 570px;
476
477div#torrent_inspector
478{
479        overflow: auto;
480        -webkit-overflow-scrolling: touch;
481        text-align: left;
482        padding: 15px;
483        top: $torrent-container-top;
484        position: fixed;
485        width: $inspector-width;
486        z-index: 5;
487        border-left: 1px solid #888;
488        bottom: 22px;
489        right: 0px;
490
491        $idle-color-top: $nonselected-gradient-top;
492        $idle-color-bottom: $nonselected-gradient-bottom;
493        $active-color-top: $selected-gradient-top;
494        $active-color-bottom: $selected-gradient-bottom;
495
496        #inspector-close
497        {
498                display: none;
499        }
500
501        #inspector-tabs-wrapper
502        {
503                width: 100%;
504                overflow: hidden;
505                text-align: center;
506
507                #inspector-tabs
508                {
509                        $border-radius: 5px;
510
511                        display: inline-block;
512
513                        > * {
514                                @include button;
515                                width: 30px;
516                                height: 20px;
517                        }
518
519                        > #inspector-tab-info {
520                                @include leftRoundedBox($border-radius);
521                                @include buttonImage('images/inspector-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
522                                border-left-width: 1px;
523                        }
524
525                        > #inspector-tab-peers {
526                                @include buttonImage('images/inspector-peers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
527                        }
528
529                        > #inspector-tab-trackers {
530                                @include buttonImage('images/inspector-trackers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
531                        }
532
533                        > #inspector-tab-files {
534                                @include rightRoundedBox($border-radius);
535                                @include buttonImage('images/inspector-files.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
536                        }
537                }
538        }
539
540        #inspector_header
541        {
542                margin-top: 8px;
543
544                #torrent_inspector_name
545                {
546                        font-weight: bold;
547                        font-size: large;
548                }
549        }
550
551        ul.tier_list
552        {
553                margin: 2px 0 8px 0;
554                width: 100%;
555                padding-left: 0px;
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 {
565                        overflow: hidden;
566                }
567                .tracker_activity {
568                        float: left;
569                        color: #666;
570                        width: 330px;
571                        display: table;
572                        margin-top: 1px;
573                }
574                .tracker_activity div {
575                        padding: 2px;
576                }
577                table {
578                        float: right;
579                        color: #666;
580                }
581                th {
582                        text-align: right;
583                }
584        }
585
586        li.inspector_tracker_entry {
587                padding: 3px 0 3px 2px;
588                display: block;
589
590                &.odd {
591                        background-color: #EEEEEE;
592                }
593        }
594
595        div.tracker_host {
596                font-size: 1.2em;
597                font-weight: bold;
598                color: #222;
599        }
600
601        /* Files Inspector Tab */
602
603        #inspector_file_list {
604                padding: 0 0 0 0;
605                margin: 0 0 0 0;
606                text-align: left;
607                cursor: default;
608                overflow: hidden;
609        }
610
611        #inspector_file_list {
612                width: 100%;
613                margin: 6px 0 0 0;
614                padding-top: 6px;
615                padding-bottom: 10px;
616                text-align: left;
617                display: block;
618                cursor: default;
619                list-style-type: none;
620                list-style: none;
621                list-style-image: none;
622                clear: both;
623        }
624        li.inspector_torrent_file_list_entry {
625                padding: 3px 0 3px 2px;
626                display: block;
627                &.skip { color: #666; }
628                &.even { background-color: #F7F7F7; }
629        }
630
631        div.inspector_torrent_file_list_entry_name {
632                font-size: 1.2em;
633                color: black; 
634                display: inline;
635                margin-left: 0px;
636        }
637        li.inspector_torrent_file_list_entry.skip>.inspector_torrent_file_list_entry_name {
638                color: #999;
639        }
640        div.inspector_torrent_file_list_entry_progress {
641                color: #999;
642                margin-left: 20px;
643        }
644
645        ul.single_file li.inspector_torrent_file_list_entry>.file_wanted_control,
646        li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
647                cursor: default;
648        }
649}
650
651/* Peers Inspector Tab */
652#inspector_peers_list {
653        padding: 0 0 0 0;
654        margin: 0 0 0 0;
655        text-align: left;
656        cursor: default;
657        overflow: hidden;
658
659        > div.inspector_group {
660                padding-bottom: 0;
661                margin-bottom: 0;
662        }
663}
664
665table.peer_list {
666        width: 100%;
667        border-collapse: collapse;
668        text-align: left;
669        cursor: default;
670        clear: both;
671        table-layout: fixed;
672
673        .encryptedCol { width: 16px; }
674        .upCol { width: 70px; }
675        .downCol { width: 70px; }
676        .percentCol { width: 30px; padding-right: 5px; text-align: right; }
677        .statusCol { width: 40px; padding-right: 5px; }
678        .addressCol { width: 180px; }
679        .clientCol { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
680}
681
682tr.inspector_peer_entry
683{
684        div.encrypted-peer-cell
685        {
686                width: 16px;
687                height: 16px;
688                background: transparent url('images/lock_icon.png') no-repeat;
689        }
690
691        &.odd
692        {
693                background-color: #EEEEEE;
694        }
695}
696
697/***
698****  File Priority Buttons
699***/
700
701div.file-priority-radiobox
702{
703        $border-radius: 5px;
704
705        display: inline;
706        float: right;
707        margin: 4px;
708        margin-top: 2px;
709
710        > * {
711                @include button;
712                width: 20px;
713                height: 12px;
714        }
715
716        // We have row after row of these buttons, so the flashy colors used in the inspector tabs look harsh here.
717        // Keep the same basic color theme, but look less harsh, by cutting the gradient's color range.
718        $idle-color-top:      mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 80% );
719        $idle-color-bottom:   mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 20% );
720        $active-color-top:    mix( $selected-gradient-top,    $selected-gradient-bottom,    80% );
721        $active-color-bottom: mix( $selected-gradient-top,    $selected-gradient-bottom,    20% );
722
723        > div.low {
724                @include leftRoundedBox($border-radius);
725                @include buttonImage('images/file-priority-low.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
726                border-right-width: 0px;
727        }
728
729        > div.normal {
730                @include buttonImage('images/file-priority-normal.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
731        }
732
733        > div.high {
734                @include rightRoundedBox($border-radius);
735                @include buttonImage('images/file-priority-high.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
736                border-left-width: 0px;
737        }
738}
739
740
741/****
742*****
743*****  MAIN WINDOW FOOTER
744*****
745****/
746
747div.torrent_footer
748{
749        height: 22px;
750        border-top: 1px solid #555;
751        bottom: 0;
752        position: fixed;
753        width: 100%;
754        z-index: 3;
755
756        @include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
757
758        > * {
759                float: left;
760                margin: 2px 4px;
761                width: 18px;
762                height: 12px;
763                padding: 2px 8px;
764                float: left;
765                border: 1px solid #888;
766                -moz-user-select: none;
767                -webkit-user-select: none;
768        }
769
770        $idle-color-top: $nonselected-gradient-top;
771        $idle-color-bottom: $nonselected-gradient-bottom;
772        $active-color-top: $selected-gradient-top;
773        $active-color-bottom: $selected-gradient-bottom;
774
775        div.main_container {
776                @include roundedBox(5px);
777                @include buttonImage('images/settings.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
778        }
779
780        #prefs-button {
781                @include roundedBox(5px);
782                @include buttonImage('images/wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
783        }
784
785        #turtle-button {
786                @include roundedBox(5px);
787                @include buttonImage('images/turtle.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
788                &:active, &.selected {
789                        @include imageOnVerticalGradient('images/blue-turtle.png', $active-color-top, $active-color-bottom);
790                }
791        }
792
793        #compact-button {
794                @include roundedBox(5px);
795                @include buttonImage('images/compact.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
796        }
797}
798
799/****
800*****
801*****  DIALOGS
802*****
803****/
804
805div.dialog_container {
806        position: absolute;
807        top: 0;
808        left: 0px;
809        margin: 0px;
810        width: 100%;
811        height: 100%;
812        text-align: center;
813        color: black;
814        font-size: 1.1em;
815}
816
817div.dialog_container div.dialog_window {
818        background-color: #eee;
819        margin: 0 auto;
820        opacity: .95;
821        border-top: none;
822        text-align: left;
823        width: 420px;
824        z-index: 10;
825        overflow: hidden;
826        position: relative;
827        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.7);
828        top: 80px;
829}
830@media screen and (-webkit-min-device-pixel-ratio:0) {
831        div.dialog_container div.dialog_window {
832                top: 0;
833                margin-top: 71px;
834        }
835}
836
837div.dialog_container .dialog_logo {
838        width: 64px;
839        height: 64px;
840        margin: 20px 20px 0 20px;
841        float: left;
842        background: transparent url('images/logo.png') top left no-repeat;
843}
844
845div.dialog_container div.dialog_window h2.dialog_heading {
846        display: block;
847        float: left;
848        width: 305px;
849        font-size: 1.2em;
850        color: black;
851        margin-top: 20px;
852}
853
854div.dialog_container div.dialog_window div.dialog_message {
855        float: left;
856        padding-left: 3px;
857        margin-left: -3px;
858        width: 305px;
859        overflow: hidden;
860}
861
862div.dialog_container div.dialog_window a {
863        display: block;
864        float: right;
865        margin: 10px 20px 10px -8px;
866        padding: 5px;
867        background-color: #EEE;
868        border: 1px solid #787878;
869        width: 50px;
870        height: 15px;
871        text-align: center;
872        font-weight: bold;
873        text-decoration: none;
874        color: #323232;
875        -webkit-appearance: button;
876        font: -webkit-control;
877        cursor: default;
878}
879
880div.dialog_container div.dialog_window a:hover,
881div.dialog_container div.dialog_window a:active {
882        background: #C0C8D6 url('images/filter_bar.png') bottom repeat-x;
883}
884
885div#upload_container div.dialog_window div.dialog_message label {
886        margin-top: 15px;
887        display: block;
888}
889
890div#upload_container div.dialog_window div.dialog_message input {
891        width: 249px;
892        margin: 3px 0 0 0;
893        display: block;
894}
895
896div#upload_container div.dialog_window div.dialog_message input[type=text] {
897        width: 245px;
898        padding: 2px;
899}
900
901div#upload_container div.dialog_window div.dialog_message input[type=checkbox] {
902        margin: 15px 3px 0 0;
903        display: inline;
904        width: auto;
905}
906
907div#upload_container div.dialog_window div.dialog_message #auto_start_label {
908        display: inline;
909}
910
911div.dialog_container div.dialog_window form {
912        margin: 0;
913        padding: 0px;
914}
915
916div#move_container input#torrent_path {
917        width: 286px;
918        padding: 2px;
919}
920
921
922iframe#torrent_upload_frame {
923        display: block; /* Don't change this : safari forms won't target hidden frames (they open a new window) */
924        position: absolute;
925        top: -1000px;
926        left: -1000px;
927        width: 0px;
928        height: 0px;
929        border: none;
930        padding: 0;
931        margin: 0;
932}
933
934/****
935*****
936*****  POPUP MENU
937*****
938****/
939
940.trans_menu {
941        margin: 0;
942        padding: 0;
943}
944
945.trans_menu,
946.trans_menu ul {
947        list-style: none;
948}
949
950.trans_menu ul {
951        /* place it right above the button */
952        position: relative;
953        bottom: 18px;
954
955        min-width: 210px;
956        background-color: white;
957        padding: 5px 0;
958        text-align: left;
959        list-style: none;
960        -webkit-border-radius: 5px;
961        -webkit-box-shadow: 0 10px 25px rgba(0,0,0,0.4);
962}
963
964.trans_menu ul ul {
965        min-width: 150px;
966}
967
968.trans_menu ul ul#footer_sort_menu {
969        min-width: 175px;
970}
971
972.trans_menu > * li {
973        margin: 0;
974        padding: 3px 10px 3px 20px !important;
975        color: #000;
976        cursor: default;
977        text-indent: auto !important;
978        width: inherit;
979}
980
981.trans_menu li.separator,
982.trans_menu li.separator.hover {
983        border-top: 1px solid #ddd;
984        margin: 5px 0;
985        padding: 0px;
986        background: transparent;
987}
988
989.trans_menu li span.arrow {
990        float: right;
991}
992
993.trans_menu li.hover li.hover span.arrow, .trans_menu li.hover li.hover li.hover span.selected {
994        color: white;
995}
996
997.trans_menu span.selected {
998        margin: 0 3px 0 -15px;
999        color: #666;
1000        float: left;
1001}
1002
1003.trans_menu div.outerbox {
1004        display: none;
1005        background: transparent;
1006        border: 1px solid rgba(0,0,0,0.1);
1007        -webkit-border-radius: 5px;
1008}
1009
1010.trans_menu div.inner {
1011        left: 0;
1012        margin: 0;
1013}
1014
1015.trans_menu li.main li {
1016        z-index: 2;
1017        min-width: 78px;
1018}
1019
1020.trans_menu a {
1021        text-decoration: none;
1022        cursor: default;
1023}
1024
1025/*--------------------------------------
1026 *
1027 * C O N T E X T   M E N U
1028 *
1029 *--------------------------------------*/
1030
1031div#jqContextMenu
1032{
1033        -webkit-border-radius: 5px;
1034        border: 1px solid rgba(0,0,0,0.1);
1035        -moz-user-select: none;
1036        -webkit-user-select: none;
1037
1038        ul {
1039                filter: alpha(opacity=98);
1040                -moz-opacity: .98;
1041                opacity: .98;
1042                -webkit-box-shadow: 0 10px 25px rgba(0,0,0,0.4);
1043                -webkit-border-radius: 5px;
1044        }
1045
1046        li.separator, div#jqContextMenu li.separator:hover {
1047                background: inherit !important;
1048                border-top: 1px solid #ddd !important;
1049                margin: 5px 0 !important;
1050                padding: 0px;
1051        }
1052}
Note: See TracBrowser for help on using the repository browser.