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

Last change on this file since 13756 was 13756, checked in by jordan, 8 years ago

(web) #4873 -- fix the margins of the toolbar buttons in mobile css

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