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