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

Last change on this file since 13093 was 13093, checked in by jordan, 11 years ago

(trunk web) tweak the filterbar's display of the torrent count

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