incorporate toolkit winstripe changes until 2011-02-13
[themes.git] / LCARStrek / mozapps / extensions / extensions.css
1 /* ***** BEGIN LICENSE BLOCK *****
2  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
3  *
4  * The contents of this file are subject to the Mozilla Public License Version
5  * 1.1 (the "License"); you may not use this file except in compliance with
6  * the License. You may obtain a copy of the License at
7  * http://www.mozilla.org/MPL/
8  *
9  * Software distributed under the License is distributed on an "AS IS" basis,
10  * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
11  * for the specific language governing rights and limitations under the
12  * License.
13  *
14  * The Original Code is the Extension Manager UI.
15  *
16  * The Initial Developer of the Original Code is
17  * the Mozilla Foundation.
18  * Portions created by the Initial Developer are Copyright (C) 2010
19  * the Initial Developer. All Rights Reserved.
20  *
21  * Contributor(s):
22  *   Blair McBride <bmcbride@mozilla.com>
23  *
24  * Alternatively, the contents of this file may be used under the terms of
25  * either the GNU General Public License Version 2 or later (the "GPL"), or
26  * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
27  * in which case the provisions of the GPL or the LGPL are applicable instead
28  * of those above. If you wish to allow use of your version of this file only
29  * under the terms of either the GPL or the LGPL, and not to allow others to
30  * use your version of this file under the terms of the MPL, indicate your
31  * decision by deleting the provisions above and replace them with the notice
32  * and other provisions required by the GPL or the LGPL. If you do not delete
33  * the provisions above, a recipient may use your version of this file under
34  * the terms of any one of the MPL, the GPL or the LGPL.
35  *
36  * ***** END LICENSE BLOCK ***** */
37
38 #addons-page {
39   background-color: #000000;
40   color: #FF9F00;
41   margin: 20px;
42 }
43
44 #view-port-container {
45   /* Needed to allow the radius to clip the inner content, see bug 595656 */
46   overflow: hidden;
47   border: 1px solid #9C9CFF;
48   border-radius: 5px;
49 }
50
51 .nav-button {
52   list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
53   min-width: 0;
54 }
55
56 #forward-btn {
57   -moz-border-start: none;
58 }
59
60 #back-btn:-moz-locale-dir(ltr),
61 #forward-btn:-moz-locale-dir(rtl) {
62   -moz-image-region: rect(42px 25px 63px 0px);
63 }
64
65 #back-btn[disabled="true"]:-moz-locale-dir(ltr),
66 #forward-btn[disabled="true"]:-moz-locale-dir(rtl) {
67   -moz-image-region: rect(42px 50px 63px 25px);
68 }
69
70 #back-btn:-moz-locale-dir(rtl),
71 #forward-btn:-moz-locale-dir(ltr) {
72   -moz-image-region: rect(63px 25px 84px 0px);
73 }
74
75 #back-btn[disabled="true"]:-moz-locale-dir(rtl),
76 #forward-btn[disabled="true"]:-moz-locale-dir(ltr) {
77   -moz-image-region: rect(63px 50px 84px 25px);
78 }
79
80 /*** global warnings ***/
81
82 .global-warning-container {
83   overflow-x: hidden;
84 }
85
86 .global-warning {
87   -moz-box-align: center;
88   padding: 0 8px;
89   color: #000000;
90   font-weight: bold;
91 }
92
93 #addons-page[warning] .global-warning-container {
94   background-color: #FFCF00;
95 }
96
97 #detail-view .global-warning {
98   padding: 4px 12px;
99   border-bottom: 3px solid #000000;  
100 }
101
102 @media all and (max-width: 600px) {
103   .global-warning-text {
104     display: none;
105   }
106
107   .global-warning .warning-icon {
108     /* background-color: #FFF;
109     box-shadow: 0px 0px 2px 5px #FFF;
110     border-radius: 10px; */
111   }
112 }
113
114 /* Plugins aren't yet disabled by safemode (bug 342333),
115    so don't show that warning when viewing plugins. */
116 #addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container,
117 #addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning-container {
118   background-color: inherit;
119   background-image: none;
120 }
121
122
123 /*** notification icons ***/
124
125 .warning-icon {
126   list-style-image: url("chrome://global/skin/icons/warning-16.png");
127   width: 16px;
128   height: 16px;
129   margin: 1px 0;
130 }
131
132 .error-icon {
133   list-style-image: url("chrome://global/skin/icons/error-16.png");
134   width: 16px;
135   height: 16px;
136   margin: 1px 0;
137 }
138
139 .pending-icon,
140 .info-icon {
141   list-style-image: url("chrome://global/skin/icons/information-16.png");
142   width: 16px;
143   height: 16px;
144   margin: 1px 0;
145 }
146
147 .addon-view[pending="disable"] .pending-icon,
148 .addon-view[pending="uninstall"] .pending-icon {
149   list-style-image: url("chrome://global/skin/icons/warning-16.png");
150   width: 16px;
151   height: 15px;
152   margin: 3px 0;
153 }
154
155
156 /*** view alert boxes ***/
157
158 .alert-container {
159   -moz-box-align: center;
160 }
161
162 .alert-spacer-before {
163   -moz-box-flex: 1;
164 }
165
166 .alert-spacer-after {
167   -moz-box-flex: 3;
168 }
169
170 .alert {
171   -moz-box-align: center;
172   padding: 10px;
173   color: #FF9F00;
174   border: 1px solid #9C9CFF;
175   border-radius: 8px;
176   background-color: #000000;
177 }
178
179 .alert .alert-title {
180   font-weight: bold;
181   font-size: 200%;
182   margin-bottom: 15px;
183 }
184
185 .alert .addon-control {
186   margin: 1em 2em;
187 }
188
189 .loading {
190   list-style-image: url("chrome://global/skin/icons/loading.gif");
191   padding-left: 20px;
192   padding-right: 20px;
193 }
194
195
196 /*** category selector ***/
197
198 #categories {
199   -moz-appearance: none;
200   border: none;
201   -moz-margin-end: -1px;
202   background-color: transparent;
203   position: relative;
204   margin-top: 31px;
205 }
206
207 .category {
208   background-color: transparent;
209   color: #FF9F00;
210   min-height: 0;
211   padding: 10px 4px;
212   border-width: 1px;
213   border-style: solid;
214   border-color: transparent;
215   -moz-box-align: center;
216   overflow: hidden;
217 }
218
219 .category:-moz-locale-dir(ltr) {
220   border-top-left-radius: 5px;
221   border-bottom-left-radius: 5px;
222 }
223
224 .category:-moz-locale-dir(rtl) {
225   border-top-right-radius: 5px;
226   border-bottom-right-radius: 5px;
227 }
228
229 .category[disabled] {
230   border-top: 0;
231   border-bottom: 0;
232   height: 0;
233   opacity: 0;
234   -moz-transition-property: height, opacity;
235   -moz-transition-duration: 1s, 0.8s;
236 }
237
238 .category:not([disabled]) {
239   height: 52px;
240   -moz-transition-property: height, opacity;
241   -moz-transition-duration: 1s, 0.8s;
242 }
243
244 .category[selected] {
245   background-color: #008484;
246   color: #FFCF00;
247   border-color: #9C9CFF;
248 }
249
250 .category-name {
251   font-size: 150%;
252 }
253
254 /* Maximize the size of the viewport when the window is small */
255 @media all and (max-width: 800px) {
256   .category-name {
257     display: none;
258   }
259 }
260
261 .category-badge {
262   background-color: #E7ADE7;
263   padding: 2px 8px;
264   margin: 6px 0;
265   border-radius: 10000px;
266   color: #000000;
267   font-weight: bold;
268   text-align: center;
269 }
270
271 .category-badge[value="0"] {
272   visibility: hidden;
273 }
274
275 .category-icon {
276   width: 32px;
277   height: 32px;
278   -moz-margin-start: 6px;
279 }
280
281 #category-search > .category-icon {
282   list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
283 }
284 #category-discover > .category-icon {
285   list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
286 }
287 #category-languages > .category-icon {
288   list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
289 }
290 #category-searchengines > .category-icon {
291   list-style-image: url("chrome://mozapps/skin/extensions/category-searchengines.png");
292 }
293 #category-extensions > .category-icon {
294   list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
295 }
296 #category-themes > .category-icon {
297   list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
298 }
299 #category-plugins > .category-icon {
300   list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
301 }
302 #category-availableUpdates > .category-icon {
303   list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
304 }
305 #category-recentUpdates > .category-icon {
306   list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
307 }
308
309
310 /*** header ***/
311
312 #header {
313   margin-bottom: 18px;
314   height: 2em;
315 }
316
317 #header-search {
318   color: #E7ADE7;
319   border: 1px solid #9C9CFF;
320   border-radius: 4px;
321   padding: 3px;
322   background-color: #000000;
323   margin: 0;
324 }
325
326 #header-search .textbox-input:-moz-placeholder {
327   color: #8050B0;
328 }
329
330 #header-search[focused="true"] {
331   border-color: #008484;
332 }
333
334 #header-utils-btn {
335   min-width: 4.5em;
336   list-style-image: url("chrome://mozapps/skin/extensions/utilities.png");
337   -moz-margin-end: 18px;
338 }
339
340 #header-utils-btn:hover,
341 #header-utils-btn:hover:active,
342 #header-utils-btn[open="true"] {
343   list-style-image: url("chrome://mozapps/skin/extensions/utilities-hover.png");
344 }
345
346 #header-utils-btn > .button-box > .button-menu-dropmarker {
347   border: none;
348   background: transparent;
349 }
350
351 #header-utils-btn:hover > .button-box > .button-menu-dropmarker {
352   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
353 }
354
355 .view-header {
356   background-color: #9C9CFF;
357   color: #000000;
358   border-radius: 8px;
359   padding: 0px 1em;
360   margin: 3px;
361   min-height: 31px;
362 }
363
364
365 /*** sorters ***/
366
367 .sort-controls {
368   -moz-appearance: none;
369   border-right: 3px solid #000000;
370 }
371
372 .sorter {
373   -moz-appearance: none;
374   border: none;
375   border-left: 3px solid #000000;
376   background-color: transparent;
377   color: #8050B0;
378   border-radius: 0;
379   padding: 0 6px;
380   -moz-padding-start: 6px;
381   -moz-padding-end: 3px;
382   margin: 0;
383   min-width: 12px !important;
384   -moz-box-direction: reverse;
385 }
386 .sorter:hover {
387   background-color: #FFCF00;
388   color: #000000;
389 }
390
391 .sorter .button-box {
392   padding-top: 0;
393   padding-bottom: 0;
394 }
395
396 .sorter[checkState="1"],
397 .sorter[checkState="2"] {
398   background-color: #008484;
399   color: #FFCF00;
400 }
401
402 .sorter[checkState="1"] {
403   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
404 }
405
406 .sorter[checkState="2"] {
407   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
408 }
409
410 .sorter .button-icon {
411   -moz-margin-start: 4px;
412 }
413
414
415 /*** list ***/
416
417 .list {
418   margin: 0;
419   border: none;
420   background-color: transparent;
421 }
422
423 .addon {
424   border-bottom: 1px solid #9C9CFF;
425   padding: 5px;
426   background-origin: border-box;
427 }
428
429 .details {
430   cursor: pointer;
431   margin: 0;
432   -moz-margin-start: 10px;
433 }
434
435 .icon-container {
436   width: 48px;
437   height: 48px;
438   margin: 3px 7px;
439 }
440
441 .icon {
442   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
443   max-width: 48px;
444   max-height: 48px;
445 }
446
447 .addon[active="false"] .icon {
448 /*  filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale"); */
449 }
450
451 .addon-view[type="theme"] .icon {
452   list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
453 }
454
455 .addon-view[type="locale"] .icon {
456   list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
457 }
458
459 .addon-view[type="plugin"] .icon {
460   list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
461 }
462
463 .name-container {
464   font-size: 150%;
465   font-weight: bold;
466   color: #9C9CFF;
467   margin-bottom: 0;
468 }
469
470 .creator {
471   font-weight: bold;
472 }
473
474 .creator .text-link {
475   /* color: #0066CC; */
476 }
477
478 .description-container {
479   margin-top: 8px;
480   -moz-margin-start: 6px;
481 }
482
483 .description {
484   margin: 0;
485 }
486
487 .warning,
488 .pending,
489 .error,
490 .info {
491   -moz-margin-start: 48px;
492   font-weight: bold;
493 }
494
495 .addon-view .warning {
496   color: #FFCF00;
497 }
498
499 .addon-view .error {
500   color: #FF0000;
501 }
502
503 .addon-view .pending {
504   color: #008484;
505 }
506
507 .addon-view[pending="disable"] .pending,
508 .addon-view[pending="uninstall"] .pending {
509   color: #FF9C00;
510 }
511
512 .addon .relnotes-container {
513   -moz-box-align: start;
514   -moz-margin-start: 6px;
515   height: 0;
516   overflow: hidden;
517   opacity: 0;
518   -moz-transition-property: height, opacity;
519   -moz-transition-duration: 0.5s, 0.5s;
520 }
521
522 .addon[show-relnotes] .relnotes-container {
523   opacity: 1;
524   -moz-transition-property: height, opacity;
525   -moz-transition-duration: 0.5s, 0.5s;
526 }
527
528 .addon .relnotes-header {
529   font-weight: bold;
530   margin: 10px 0;
531 }
532
533 .addon .relnotes-toggle {
534   border: none;
535   background: transparent;
536   font-weight: bold;
537   -moz-box-direction: reverse;
538   cursor: pointer;
539   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
540 }
541
542 .addon .relnotes-toggle > .button-box > .button-icon {
543   -moz-padding-start: 4px;
544 }
545
546 .addon[show-relnotes] .relnotes-toggle {
547   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
548 }
549
550 .addon[active="false"] {
551   /* background-color: rgba(135, 135, 135, 0.1); */
552 }
553
554 .addon-view[active="false"],
555 .addon-view[active="false"] .name-container {
556   color: #E7ADE7;
557 }
558
559 .addon-view[notification="warning"] {
560   background-color : #FFCF00;
561   color: #000000;
562 }
563
564 .addon-view[notification="warning"] .warning {
565   color: #000000;
566 }
567
568 .addon-view[notification="warning"] .name-container {
569   color: #000000;
570 }
571
572 .addon-view[notification="error"] {
573   background-color: #FF0000;
574   color: #000000;
575 }
576
577 .addon-view[notification="error"] .error {
578   color: #000000;
579 }
580
581 .addon-view[notification="info"] {
582   background-color: #9C9CFF;
583   color: #000000;
584 }
585
586 .addon-view[pending="enable"],
587 .addon-view[pending="upgrade"],
588 .addon-view[pending="install"] {
589   background-color: #008484;
590 }
591
592 .addon-view[pending="disable"],
593 .addon-view[pending="uninstall"] {
594   color: #8050B0;
595 }
596
597
598 /*** item - uninstalled ***/
599
600 .addon[status="uninstalled"] {
601   border: none;
602 }
603
604 .addon[status="uninstalled"] > .container {
605   -moz-box-align: center;
606   padding: 4px 20px;
607   background-color: #8050B0;
608   border-radius: 8px;
609   font-size: 120%;
610 }
611
612 .addon[status="uninstalled"][selected] {
613   background-color: transparent;
614 }
615
616 .addon[selected] {
617   background-color: #008484;
618   color: #FF9F00;
619 }
620
621 .addon[selected] .name-container {
622   color: #FFCF00;
623 }
624
625 .addon[active="false"][selected] {
626   color: #E7ADE7;
627 }
628
629 .addon[active="false"][selected] .name-container {
630   color: #E7ADE7;
631 }
632
633
634 /*** search view ***/
635
636 #search-filter {
637   padding: 5px 20px;
638   -moz-box-align: center;
639   background-color: #000000;
640   font-size: 120%;
641   border-bottom: 1px solid #9C9CFF;
642   overflow-x: hidden;
643 }
644
645 #search-filter-label {
646   font-weight: bold;
647   color: #FFCF00;
648 }
649
650 .search-filter-radio {
651   padding: 0 6px;
652   margin: 0 3px;
653   border-radius: 10000px;
654 }
655
656 .search-filter-radio[selected] {
657   background-color: #008484;
658   color: #000000;
659 }
660
661 .search-filter-radio .radio-check-box1 {
662   display: none;
663 }
664
665 .search-filter-radio .radio-icon {
666   display: none;
667 }
668
669 #search-allresults-link {
670   margin-top: 1em;
671   margin-bottom: 2em;
672 }
673
674 /*** detail view ***/
675
676 #detail-view .loading {
677   opacity: 0;
678 }
679
680 #detail-view[loading-extended] .loading {
681   opacity: 1;
682   -moz-transition-property: opacity;
683   -moz-transition-duration: 1s;
684 }
685
686 .detail-view-container {
687   padding: 0 2em 2em 2em;
688   font-size: 110%;
689 }
690
691 #detail-notifications {
692   margin-top: 1em;
693   margin-bottom: 2em;
694 }
695
696 #detail-notifications .warning,
697 #detail-notifications .pending,
698 #detail-notifications .error {
699   -moz-margin-start: 0;
700 }
701
702 #detail-icon {
703   -moz-margin-end: 10px;
704   margin-top: 6px;
705   max-width: 64px;
706   max-height: 64px;
707 }
708
709 #detail-summary {
710   margin-bottom: 2em;
711 }
712
713 #detail-name-container {
714   font-size: 200%;
715 }
716
717 #detail-screenshot {
718   -moz-margin-end: 2em;
719   max-width: 300px;
720   max-height: 300px;
721 }
722
723 #detail-desc-container {
724   margin-bottom: 2em;
725 }
726
727 #detail-desc, #detail-fulldesc {
728   -moz-margin-start: 6px;
729   white-space: pre-wrap;
730   /* This is necessary to fix layout issues with multi-line descriptions, see
731      bug 592712*/
732   outline: solid transparent;
733   min-width: 8em;
734 }
735
736 #detail-fulldesc {
737   margin-top: 1em;
738 }
739
740 #detail-contributions {
741   border-radius: 5px;
742   border: 1px solid #9C9CFF;
743   margin-bottom: 2em;
744   padding: 1em;
745   background-color: #FFCF00;
746 }
747
748 #detail-contrib-description {
749   font-style: italic;
750   margin-bottom: 1em;
751   color: #000000;
752 }
753
754 #detail-contrib-suggested {
755   color: #8050B0;
756   font-weight: bold;
757 }
758
759 #detail-contrib-btn {
760   list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
761 }
762
763 #detail-contrib-btn .button-icon {
764   -moz-margin-end: 3px;
765 }
766
767 #detail-grid {
768   margin-bottom: 2em;
769 }
770
771 .detail-row[first-row="true"],
772 .detail-row-complex[first-row="true"] {
773   border-top: none;
774 }
775
776 .detail-row,
777 .detail-row-complex {
778   border-top: 1px solid #9C9CFF;
779   -moz-box-align: center;
780 }
781
782 .detail-row-value {
783   -moz-margin-start: 0;
784 }
785
786 #detail-controls {
787   margin-bottom: 1em;
788 }
789
790 #detail-view[active="false"]:not([pending]):not([notification]) {
791   /* background-color: foo; */
792 }
793
794 /*** creator ***/
795
796 .creator > label {
797   -moz-margin-end: 0;
798 }
799
800 .creator > .text-link {
801   margin-top: 1px;
802   margin-bottom: 1px;
803 }
804
805
806 /*** rating ***/
807
808 .meta-rating {
809   -moz-margin-start: 0;
810   -moz-margin-end: 0;
811   padding-top: 2px;
812 }
813
814 .meta-rating > .star {
815   list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
816   padding: 0 1px;
817 }
818
819 .meta-rating > .star[on="true"] {
820   list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
821 }
822
823
824 /*** download progress ***/
825
826 .download-progress {
827   background-color: #000000;
828   border-radius: 10000px;
829   border: 1px solid #FF9F00;
830   width: 200px;
831   height: 21px;
832   margin: 0 8px;
833 }
834
835 .download-progress[mode="undetermined"] .status-container {
836   padding: 0 2px;
837 }
838
839 .download-progress .start-cap,
840 .download-progress[complete] .end-cap,
841 .download-progress[mode="undetermined"] .end-cap,
842 .download-progress .progress .progress-bar {
843   background-color: #008484;
844 }
845
846 .download-progress .progress .progress-bar  {
847   border-left-width: 0;
848   border-right-width: 0;
849   min-height: 21px;
850 }
851
852 .download-progress .progress {
853   background-color: transparent;
854   padding: 0;
855   margin: 0;
856   border: none;
857 }
858
859 .download-progress .start-cap, .download-progress .end-cap {
860   width: 12px;
861 }
862
863 .download-progress .start-cap:-moz-locale-dir(ltr),
864 .download-progress .end-cap:-moz-locale-dir(rtl) {
865   border-radius: 3px 0 0 3px;
866 }
867
868 .download-progress .end-cap:-moz-locale-dir(ltr),
869 .download-progress .start-cap:-moz-locale-dir(rtl) {
870   border-radius: 0 3px 3px 0;
871 }
872
873 .download-progress .cancel {
874   -moz-appearance: none;
875   background-color: #8050B0;
876   border: 1px solid #9C9CFF;
877   padding: 3px;
878   border-radius: 3px;
879   min-width: 0;
880   margin: 3px;
881 }
882
883 .download-progress .cancel .button-box {
884   padding: 0;
885   border: none;
886 }
887
888 .download-progress .cancel .button-text {
889   display: none;
890 }
891
892 .download-progress .cancel .button-icon {
893   -moz-margin-start: 0;
894 }
895
896 .download-progress .cancel {
897   list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
898 }
899
900 .download-progress .status-container {
901   -moz-box-align: center;
902 }
903
904 .download-progress .status {
905 /*  text-shadow: #FFF 0 0 2px; */
906 }
907
908 /*** install status ***/
909
910 .install-status {
911   -moz-box-align: center;
912 }
913
914
915 /*** check for updates ***/
916
917 #updates-container {
918   -moz-box-align: center;
919 }
920
921 #updates-container .button-link {
922   font-weight: bold;
923 }
924
925 #updates-installed,
926 #updates-downloaded {
927   color: #008484;
928   font-weight: bold;
929 }
930
931 #update-selected {
932   margin: 12px;
933 }
934
935 /*** buttons ***/
936
937 .addon-control[disabled="true"] {
938   display: none;
939 }
940
941 .button-link {
942   background: transparent;
943   border: none;
944   text-decoration: underline;
945   color: blue;
946   cursor: pointer;
947   min-width: 0;
948   margin: 0 6px;
949 }