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

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

(trunk web) fix positioning issue w/the torrent list going directly under the toolbars

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