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