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

Last change on this file since 14516 was 14516, checked in by mikedld, 6 years ago

Use jQuery UI's ui-helper-hidden CSS class instead of our own

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