8c883845791b4fefcf0520b1b91aae1f98978701
[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   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   background-color: #008484;
244   color: #FFCF00;
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: #9C9CFF;
355   color: #000000;
356   border-radius: 8px;
357   padding: 0px 1em;
358   margin: 3px;
359   min-height: 31px;
360 }
361
362
363 /*** sorters ***/
364
365 .sort-controls {
366   -moz-appearance: none;
367   border-right: 3px solid #000000;
368 }
369
370 .sorter {
371   -moz-appearance: none;
372   border: none;
373   border-left: 3px solid #000000;
374   background-color: transparent;
375   color: #8050B0;
376   border-radius: 0;
377   padding: 0 6px;
378   -moz-padding-start: 6px;
379   -moz-padding-end: 3px;
380   margin: 0;
381   min-width: 12px !important;
382   -moz-box-direction: reverse;
383 }
384 .sorter:hover {
385   background-color: #FFCF00;
386   color: #000000;
387 }
388
389 .sorter .button-box {
390   padding-top: 0;
391   padding-bottom: 0;
392 }
393
394 .sorter[checkState="1"],
395 .sorter[checkState="2"] {
396   background-color: #008484;
397   color: #FFCF00;
398 }
399
400 .sorter[checkState="1"] {
401   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
402 }
403
404 .sorter[checkState="2"] {
405   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
406 }
407
408 .sorter .button-icon {
409   -moz-margin-start: 4px;
410 }
411
412
413 /*** list ***/
414
415 .list {
416   margin: 0;
417   border: none;
418   background-color: transparent;
419 }
420
421 .addon {
422   border-bottom: 1px solid #9C9CFF;
423   padding: 5px;
424   background-origin: border-box;
425 }
426
427 .details {
428   cursor: pointer;
429   margin: 0;
430   -moz-margin-start: 10px;
431 }
432
433 .icon-container {
434   width: 48px;
435   height: 48px;
436   margin: 22px 7px 7px 7px;
437 }
438
439 .icon {
440   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
441   max-width: 48px;
442   max-height: 48px;
443 }
444
445 .addon[active="false"] .icon {
446 /*  filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale"); */
447 }
448
449 .addon-view[type="theme"] .icon {
450   list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
451 }
452
453 .addon-view[type="locale"] .icon {
454   list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
455 }
456
457 .addon-view[type="plugin"] .icon {
458   list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
459 }
460
461 .name-container {
462   font-size: 150%;
463   font-weight: bold;
464   color: #9C9CFF;
465   margin-bottom: 0;
466 }
467
468 .creator {
469   font-weight: bold;
470 }
471
472 .creator .text-link {
473   /* color: #0066CC; */
474 }
475
476 .description-container {
477   margin-top: 8px;
478   -moz-margin-start: 6px;
479 }
480
481 .description {
482   margin: 0;
483 }
484
485 .warning,
486 .pending,
487 .error,
488 .info {
489   -moz-margin-start: 48px;
490   font-weight: bold;
491 }
492
493 .addon-view .warning {
494   color: #FFCF00;
495 }
496
497 .addon-view .error {
498   color: #FF0000;
499 }
500
501 .addon-view .pending {
502   color: #008484;
503 }
504
505 .addon-view[pending="disable"] .pending,
506 .addon-view[pending="uninstall"] .pending {
507   color: #FF9C00;
508 }
509
510 .addon .relnotes-container {
511   -moz-box-align: start;
512   -moz-margin-start: 6px;
513   height: 0;
514   overflow: hidden;
515   opacity: 0;
516   -moz-transition-property: height, opacity;
517   -moz-transition-duration: 0.5s, 0.5s;
518 }
519
520 .addon[show-relnotes] .relnotes-container {
521   opacity: 1;
522   -moz-transition-property: height, opacity;
523   -moz-transition-duration: 0.5s, 0.5s;
524 }
525
526 .addon .relnotes-header {
527   font-weight: bold;
528   margin: 10px 0;
529 }
530
531 .addon .relnotes-toggle {
532   border: none;
533   background: transparent;
534   font-weight: bold;
535   -moz-box-direction: reverse;
536   cursor: pointer;
537   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
538 }
539
540 .addon .relnotes-toggle > .button-box > .button-icon {
541   -moz-padding-start: 4px;
542 }
543
544 .addon[show-relnotes] .relnotes-toggle {
545   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
546 }
547
548 .addon[active="false"] {
549   /* background-color: rgba(135, 135, 135, 0.1); */
550 }
551
552 .addon-view[active="false"],
553 .addon-view[active="false"] .name-container {
554   color: #E7ADE7;
555 }
556
557 .addon-view[notification="warning"] {
558   background-color : #FFCF00;
559   color: #000000;
560 }
561
562 .addon-view[notification="warning"] .warning {
563   color: #000000;
564 }
565
566 .addon-view[notification="warning"] .name-container {
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: #FF9F00;
617 }
618
619 .addon[selected] .name-container {
620   color: #FFCF00;
621 }
622
623 .addon[active="false"][selected] {
624   color: #E7ADE7;
625 }
626
627 .addon[active="false"][selected] .name-container {
628   color: #E7ADE7;
629 }
630
631
632 /*** search view ***/
633
634 #search-filter {
635   padding: 5px 20px;
636   -moz-box-align: center;
637   background-color: #000000;
638   font-size: 120%;
639   border-bottom: 1px solid #9C9CFF;
640   overflow-x: hidden;
641 }
642
643 #search-filter-label {
644   font-weight: bold;
645   color: #FFCF00;
646 }
647
648 .search-filter-radio {
649   padding: 0 6px;
650   margin: 0 3px;
651   border-radius: 10000px;
652 }
653
654 .search-filter-radio[selected] {
655   background-color: #008484;
656   color: #000000;
657 }
658
659 .search-filter-radio .radio-check-box1 {
660   display: none;
661 }
662
663 .search-filter-radio .radio-icon {
664   display: none;
665 }
666
667 #search-allresults-link {
668   margin-top: 1em;
669   margin-bottom: 2em;
670 }
671
672 /*** detail view ***/
673
674 #detail-view .loading {
675   opacity: 0;
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, #detail-fulldesc {
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-fulldesc {
735   margin-top: 1em;
736 }
737
738 #detail-contributions {
739   border-radius: 5px;
740   border: 1px solid #9C9CFF;
741   margin-bottom: 2em;
742   padding: 1em;
743   background-color: #FFCF00;
744 }
745
746 #detail-contrib-description {
747   font-style: italic;
748   margin-bottom: 1em;
749   color: #000000;
750 }
751
752 #detail-contrib-suggested {
753   color: #8050B0;
754   font-weight: bold;
755 }
756
757 #detail-contrib-btn {
758   list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
759 }
760
761 #detail-contrib-btn .button-icon {
762   -moz-margin-end: 3px;
763 }
764
765 #detail-grid {
766   margin-bottom: 2em;
767 }
768
769 .detail-row[first-row="true"],
770 .detail-row-complex[first-row="true"] {
771   border-top: none;
772 }
773
774 .detail-row,
775 .detail-row-complex {
776   border-top: 1px solid #9C9CFF;
777   -moz-box-align: center;
778 }
779
780 .detail-row-value {
781   -moz-margin-start: 0;
782 }
783
784 #detail-controls {
785   margin-bottom: 1em;
786 }
787
788 #detail-view[active="false"]:not([pending]):not([notification]) {
789   /* background-color: foo; */
790 }
791
792 /*** creator ***/
793
794 .creator > label {
795   -moz-margin-end: 0;
796 }
797
798 .creator > .text-link {
799   margin-top: 1px;
800   margin-bottom: 1px;
801 }
802
803
804 /*** rating ***/
805
806 .meta-rating {
807   -moz-margin-start: 0;
808   -moz-margin-end: 0;
809   padding-top: 2px;
810 }
811
812 .meta-rating > .star {
813   list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
814   padding: 0 1px;
815 }
816
817 .meta-rating > .star[on="true"] {
818   list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
819 }
820
821
822 /*** download progress ***/
823
824 .download-progress {
825   background-color: #000000;
826   border-radius: 10000px;
827   border: 1px solid #FF9F00;
828   width: 200px;
829   height: 21px;
830   margin: 0 8px;
831 }
832
833 .download-progress[mode="undetermined"] .status-container {
834   padding: 0 2px;
835 }
836
837 .download-progress .start-cap,
838 .download-progress[complete] .end-cap,
839 .download-progress[mode="undetermined"] .end-cap,
840 .download-progress .progress .progress-bar {
841   background-color: #008484;
842 }
843
844 .download-progress .progress .progress-bar  {
845   border-left-width: 0;
846   border-right-width: 0;
847   min-height: 21px;
848 }
849
850 .download-progress .progress {
851   background-color: transparent;
852   padding: 0;
853   margin: 0;
854   border: none;
855 }
856
857 .download-progress .start-cap, .download-progress .end-cap {
858   width: 12px;
859 }
860
861 .download-progress .start-cap:-moz-locale-dir(ltr),
862 .download-progress .end-cap:-moz-locale-dir(rtl) {
863   border-radius: 3px 0 0 3px;
864 }
865
866 .download-progress .end-cap:-moz-locale-dir(ltr),
867 .download-progress .start-cap:-moz-locale-dir(rtl) {
868   border-radius: 0 3px 3px 0;
869 }
870
871 .download-progress .cancel {
872   -moz-appearance: none;
873   background-color: #8050B0;
874   border: 1px solid #9C9CFF;
875   padding: 3px;
876   border-radius: 3px;
877   min-width: 0;
878   margin: 3px;
879 }
880
881 .download-progress .cancel .button-box {
882   padding: 0;
883   border: none;
884 }
885
886 .download-progress .cancel .button-text {
887   display: none;
888 }
889
890 .download-progress .cancel .button-icon {
891   -moz-margin-start: 0;
892 }
893
894 .download-progress .cancel {
895   list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
896 }
897
898 .download-progress .status-container {
899   -moz-box-align: center;
900 }
901
902 .download-progress .status {
903 /*  text-shadow: #FFF 0 0 2px; */
904 }
905
906 /*** install status ***/
907
908 .install-status {
909   -moz-box-align: center;
910 }
911
912
913 /*** check for updates ***/
914
915 #updates-container {
916   -moz-box-align: center;
917 }
918
919 #updates-container .button-link {
920   font-weight: bold;
921 }
922
923 #updates-installed,
924 #updates-downloaded {
925   color: #008484;
926   font-weight: bold;
927 }
928
929 #update-selected {
930   margin: 12px;
931 }
932
933 /*** buttons ***/
934
935 .addon-control[disabled="true"] {
936   display: none;
937 }
938
939 .button-link {
940   background: transparent;
941   border: none;
942   text-decoration: underline;
943   color: blue;
944   cursor: pointer;
945   min-width: 0;
946   margin: 0 6px;
947 }