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