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