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

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

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

File size: 22.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, &:hover, &.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$torrent-list-button-width: 14px;
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}
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 $torrent-list-button-width;
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        text-align: left;
481        padding: 15px;
482        top: $torrent-container-top;
483        position: fixed;
484        width: $inspector-width;
485        z-index: 5;
486        border-left: 1px solid #888;
487        bottom: 22px;
488        right: 0px;
489
490        $idle-color-top: $nonselected-gradient-top;
491        $idle-color-bottom: $nonselected-gradient-bottom;
492        $active-color-top: $selected-gradient-top;
493        $active-color-bottom: $selected-gradient-bottom;
494
495        #inspector-close
496        {
497                display: none;
498        }
499
500        #inspector-tabs-wrapper
501        {
502                width: 100%;
503                overflow: hidden;
504                text-align: center;
505
506                #inspector-tabs
507                {
508                        $border-radius: 5px;
509
510                        display: inline-block;
511
512                        > * {
513                                @include button;
514                                width: 30px;
515                                height: 20px;
516                        }
517
518                        > #inspector-tab-info {
519                                @include leftRoundedBox($border-radius);
520                                @include buttonImage('images/inspector-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
521                                border-left-width: 1px;
522                        }
523
524                        > #inspector-tab-peers {
525                                @include buttonImage('images/inspector-peers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
526                        }
527
528                        > #inspector-tab-trackers {
529                                @include buttonImage('images/inspector-trackers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
530                        }
531
532                        > #inspector-tab-files {
533                                @include rightRoundedBox($border-radius);
534                                @include buttonImage('images/inspector-files.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
535                        }
536                }
537        }
538
539        #inspector_header
540        {
541                margin-top: 8px;
542
543                #torrent_inspector_name
544                {
545                        font-weight: bold;
546                        font-size: large;
547                }
548        }
549
550        ul.tier_list
551        {
552                margin: 2px 0 8px 0;
553                width: 100%;
554                padding-left: 0px;
555                text-align: left;
556                display: block;
557                cursor: default;
558                list-style-type: none;
559                list-style: none;
560                list-style-image: none;
561                clear: both;
562
563                li {
564                        overflow: hidden;
565                }
566                .tracker_activity {
567                        float: left;
568                        color: #666;
569                        width: 330px;
570                        display: table;
571                        margin-top: 1px;
572                }
573                .tracker_activity div {
574                        padding: 2px;
575                }
576                table {
577                        float: right;
578                        color: #666;
579                }
580                th {
581                        text-align: right;
582                }
583        }
584
585        li.inspector_tracker_entry {
586                padding: 3px 0 3px 2px;
587                display: block;
588
589                &.odd {
590                        background-color: #EEEEEE;
591                }
592        }
593
594        div.tracker_host {
595                font-size: 1.2em;
596                font-weight: bold;
597                color: #222;
598        }
599
600        /* Files Inspector Tab */
601
602        #file-list-header {
603                float: right;
604                > * {
605                        @include roundedButton(5px);
606                        @include verticalGradient($idle-color-top, $idle-color-bottom);
607                        &:active {
608                                @include verticalGradient($active-color-top, $active-color-bottom);
609                        }
610                }
611        }
612
613        #inspector_file_list {
614                padding: 0 0 0 0;
615                margin: 0 0 0 0;
616                text-align: left;
617                cursor: default;
618                overflow: hidden;
619        }
620
621        #inspector_file_list {
622                border-top: 1px solid #888;
623                width: 100%;
624                margin: 6px 0 0 0;
625                padding-top: 6px;
626                padding-bottom: 10px;
627                text-align: left;
628                display: block;
629                cursor: default;
630                list-style-type: none;
631                list-style: none;
632                list-style-image: none;
633                clear: both;
634        }
635        li.inspector_torrent_file_list_entry {
636                padding: 3px 0 3px 2px;
637                display: block;
638                &.skip { color: #666; }
639                &.even { background-color: #F7F7F7; }
640        }
641
642        div.inspector_torrent_file_list_entry_name {
643                font-size: 1.2em;
644                color: black; 
645                display: inline;
646                margin-left: 0px;
647        }
648        li.inspector_torrent_file_list_entry.skip>.inspector_torrent_file_list_entry_name {
649                color: #999;
650        }
651        div.inspector_torrent_file_list_entry_progress {
652                color: #999;
653                margin-left: 20px;
654        }
655
656        li.inspector_torrent_file_list_entry.skip>.file_wanted_control {
657                background-position: left top;
658        }
659
660        li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
661                background-position: left -19px;
662        }
663
664        ul.single_file li.inspector_torrent_file_list_entry>.file_wanted_control,
665        li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
666                background-position: left -38px;
667                cursor: default;
668        }
669}
670
671/* Peers Inspector Tab */
672#inspector_peers_list {
673        padding: 0 0 0 0;
674        margin: 0 0 0 0;
675        text-align: left;
676        cursor: default;
677        overflow: hidden;
678
679        > div.inspector_group {
680                padding-bottom: 0;
681                margin-bottom: 0;
682        }
683}
684
685table.peer_list {
686        width: 100%;
687        border-collapse: collapse;
688        text-align: left;
689        cursor: default;
690        clear: both;
691        table-layout: fixed;
692
693        .encryptedCol { width: 16px; }
694        .upCol { width: 70px; }
695        .downCol { width: 70px; }
696        .percentCol { width: 30px; padding-right: 5px; text-align: right; }
697        .statusCol { width: 40px; padding-right: 5px; }
698        .addressCol { width: 180px; }
699        .clientCol { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
700}
701
702tr.inspector_peer_entry
703{
704        div.encrypted-peer-cell
705        {
706                width: 16px;
707                height: 16px;
708                background: transparent url('images/lock_icon.png') no-repeat;
709        }
710
711        &.odd
712        {
713                background-color: #EEEEEE;
714        }
715}
716
717/***
718****  File Priority Buttons
719***/
720
721div.file-priority-radiobox
722{
723        $border-radius: 5px;
724
725        display: inline;
726        float: right;
727        margin: 4px;
728        margin-top: 2px;
729
730        > * {
731                @include button;
732                width: 20px;
733                height: 12px;
734        }
735
736        // We have row after row of these buttons, so the flashy colors used in the inspector tabs look harsh here.
737        // Keep the same basic color theme, but look less harsh, by cutting the gradient's color range.
738        $idle-color-top:      mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 80% );
739        $idle-color-bottom:   mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 20% );
740        $active-color-top:    mix( $selected-gradient-top,    $selected-gradient-bottom,    80% );
741        $active-color-bottom: mix( $selected-gradient-top,    $selected-gradient-bottom,    20% );
742
743        > div.low {
744                @include leftRoundedBox($border-radius);
745                @include buttonImage('images/file-priority-low.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
746                border-right-width: 0px;
747        }
748
749        > div.normal {
750                @include buttonImage('images/file-priority-normal.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
751        }
752
753        > div.high {
754                @include rightRoundedBox($border-radius);
755                @include buttonImage('images/file-priority-high.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
756                border-left-width: 0px;
757        }
758}
759
760
761/****
762*****
763*****  MAIN WINDOW FOOTER
764*****
765****/
766
767div.torrent_footer
768{
769        height: 22px;
770        border-top: 1px solid #555;
771        bottom: 0;
772        position: fixed;
773        width: 100%;
774        z-index: 3;
775
776        @include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
777
778        > * {
779                float: left;
780                margin: 2px 4px;
781                width: 18px;
782                height: 12px;
783                padding: 2px 8px;
784                float: left;
785                border: 1px solid #888;
786                -moz-user-select: none;
787                -webkit-user-select: none;
788        }
789
790        $idle-color-top: $nonselected-gradient-top;
791        $idle-color-bottom: $nonselected-gradient-bottom;
792        $active-color-top: $selected-gradient-top;
793        $active-color-bottom: $selected-gradient-bottom;
794
795        div.main_container {
796                @include roundedBox(5px);
797                @include buttonImage('images/settings.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
798        }
799
800        #prefs-button {
801                @include roundedBox(5px);
802                @include buttonImage('images/wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
803        }
804
805        #turtle-button {
806                @include roundedBox(5px);
807                @include buttonImage('images/turtle.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
808        }
809
810        #compact-button {
811                @include roundedBox(5px);
812                @include buttonImage('images/compact.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
813        }
814}
815
816/****
817*****
818*****  DIALOGS
819*****
820****/
821
822div.dialog_container {
823        position: absolute;
824        top: 0;
825        left: 0px;
826        margin: 0px;
827        width: 100%;
828        height: 100%;
829        text-align: center;
830        color: black;
831        font-size: 1.1em;
832}
833
834div.dialog_container div.dialog_window {
835        background-color: #eee;
836        margin: 0 auto;
837        opacity: .95;
838        border-top: none;
839        text-align: left;
840        width: 420px;
841        z-index: 10;
842        overflow: hidden;
843        position: relative;
844        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.7);
845        top: 80px;
846}
847@media screen and (-webkit-min-device-pixel-ratio:0) {
848        div.dialog_container div.dialog_window {
849                top: 0;
850                margin-top: 71px;
851        }
852}
853
854div.dialog_container .dialog_logo {
855        width: 64px;
856        height: 64px;
857        margin: 20px 20px 0 20px;
858        float: left;
859        background: transparent url('images/logo.png') top left no-repeat;
860}
861
862div.dialog_container div.dialog_window h2.dialog_heading {
863        display: block;
864        float: left;
865        width: 305px;
866        font-size: 1.2em;
867        color: black;
868        margin-top: 20px;
869}
870
871div.dialog_container div.dialog_window div.dialog_message {
872        float: left;
873        padding-left: 3px;
874        margin-left: -3px;
875        width: 305px;
876        overflow: hidden;
877}
878
879div.dialog_container div.dialog_window a {
880        display: block;
881        float: right;
882        margin: 10px 20px 10px -8px;
883        padding: 5px;
884        background-color: #EEE;
885        border: 1px solid #787878;
886        width: 50px;
887        height: 15px;
888        text-align: center;
889        font-weight: bold;
890        text-decoration: none;
891        color: #323232;
892        -webkit-appearance: button;
893        font: -webkit-control;
894        cursor: default;
895}
896
897div.dialog_container div.dialog_window a:hover,
898div.dialog_container div.dialog_window a:active {
899        background: #C0C8D6 url('images/filter_bar.png') bottom repeat-x;
900}
901
902div#upload_container div.dialog_window div.dialog_message label {
903        margin-top: 15px;
904        display: block;
905}
906
907div#upload_container div.dialog_window div.dialog_message input {
908        width: 249px;
909        margin: 3px 0 0 0;
910        display: block;
911}
912
913div#upload_container div.dialog_window div.dialog_message input[type=text] {
914        width: 245px;
915        padding: 2px;
916}
917
918div#upload_container div.dialog_window div.dialog_message input[type=checkbox] {
919        margin: 15px 3px 0 0;
920        display: inline;
921        width: auto;
922}
923
924div#upload_container div.dialog_window div.dialog_message #auto_start_label {
925        display: inline;
926}
927
928div.dialog_container div.dialog_window form {
929        margin: 0;
930        padding: 0px;
931}
932
933iframe#torrent_upload_frame {
934        display: block; /* Don't change this : safari forms won't target hidden frames (they open a new window) */
935        position: absolute;
936        top: -1000px;
937        left: -1000px;
938        width: 0px;
939        height: 0px;
940        border: none;
941        padding: 0;
942        margin: 0;
943}
944
945/****
946*****
947*****  POPUP MENU
948*****
949****/
950
951.trans_menu {
952        margin: 0;
953        padding: 0;
954}
955
956.trans_menu,
957.trans_menu ul {
958        list-style: none;
959}
960
961.trans_menu ul {
962        /* place it right above the button */
963        position: relative;
964        bottom: 18px;
965
966        min-width: 210px;
967        background-color: white;
968        padding: 5px 0;
969        text-align: left;
970        list-style: none;
971        -webkit-border-radius: 5px;
972        -webkit-box-shadow: 0 10px 25px rgba(0,0,0,0.4);
973}
974
975.trans_menu ul ul {
976        min-width: 150px;
977}
978
979.trans_menu ul ul#footer_sort_menu {
980        min-width: 175px;
981}
982
983.trans_menu > * li {
984        margin: 0;
985        padding: 3px 10px 3px 20px !important;
986        color: #000;
987        cursor: default;
988        text-indent: auto !important;
989        width: inherit;
990}
991
992.trans_menu li.separator,
993.trans_menu li.separator.hover {
994        border-top: 1px solid #ddd;
995        margin: 5px 0;
996        padding: 0px;
997        background: transparent;
998}
999
1000.trans_menu li span.arrow {
1001        float: right;
1002}
1003
1004.trans_menu li.hover li.hover span.arrow, .trans_menu li.hover li.hover li.hover span.selected {
1005        color: white;
1006}
1007
1008.trans_menu span.selected {
1009        margin: 0 3px 0 -15px;
1010        color: #666;
1011        float: left;
1012}
1013
1014.trans_menu div.outerbox {
1015        display: none;
1016        background: transparent;
1017        border: 1px solid rgba(0,0,0,0.1);
1018        -webkit-border-radius: 5px;
1019}
1020
1021.trans_menu div.inner {
1022        left: 0;
1023        margin: 0;
1024}
1025
1026.trans_menu li.main li {
1027        z-index: 2;
1028        min-width: 78px;
1029}
1030
1031.trans_menu a {
1032        text-decoration: none;
1033        cursor: default;
1034}
1035
1036/*--------------------------------------
1037 *
1038 * C O N T E X T   M E N U
1039 *
1040 *--------------------------------------*/
1041
1042div#jqContextMenu
1043{
1044        -webkit-border-radius: 5px;
1045        border: 1px solid rgba(0,0,0,0.1);
1046        -moz-user-select: none;
1047        -webkit-user-select: none;
1048
1049        ul {
1050                filter: alpha(opacity=98);
1051                -moz-opacity: .98;
1052                opacity: .98;
1053                -webkit-box-shadow: 0 10px 25px rgba(0,0,0,0.4);
1054                -webkit-border-radius: 5px;
1055        }
1056
1057        li.separator, div#jqContextMenu li.separator:hover {
1058                background: inherit !important;
1059                border-top: 1px solid #ddd !important;
1060                margin: 5px 0 !important;
1061                padding: 0px;
1062        }
1063}
Note: See TracBrowser for help on using the repository browser.