bump maxversions
[themes.git] / EarlyBlue / mozapps / extensions / extensions.css
... / ...
CommitLineData
1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5@import url("chrome://global/skin/inContentUI.css");
6
7@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
8
9.nav-button {
10 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
11}
12
13#forward-btn {
14 -moz-border-start: none;
15}
16
17#back-btn:-moz-locale-dir(ltr),
18#forward-btn:-moz-locale-dir(rtl) {
19 -moz-image-region: rect(42px 25px 63px 0px);
20}
21
22#back-btn[disabled="true"]:-moz-locale-dir(ltr),
23#forward-btn[disabled="true"]:-moz-locale-dir(rtl) {
24 -moz-image-region: rect(42px 50px 63px 25px);
25}
26
27#back-btn:-moz-locale-dir(rtl),
28#forward-btn:-moz-locale-dir(ltr) {
29 -moz-image-region: rect(63px 25px 84px 0px);
30}
31
32#back-btn[disabled="true"]:-moz-locale-dir(rtl),
33#forward-btn[disabled="true"]:-moz-locale-dir(ltr) {
34 -moz-image-region: rect(63px 50px 84px 25px);
35}
36
37
38/*** global warnings ***/
39
40.global-warning-container {
41 overflow-x: hidden;
42}
43
44.global-warning {
45 -moz-box-align: center;
46 padding: 0 8px;
47 color: #000000;
48 font-weight: bold;
49}
50
51#addons-page[warning] .global-warning-container {
52 background-color: #FFFFCC;
53}
54
55#detail-view .global-warning {
56 padding: 4px 12px;
57 border-bottom: 1px solid #9999CC;
58}
59
60@media (max-width: 600px) {
61 .global-warning-text {
62 display: none;
63 }
64
65 .global-warning .warning-icon {
66 /* background-color: #FFF;
67 box-shadow: 0px 0px 2px 5px #FFF;
68 border-radius: 10px; */
69 }
70}
71
72/*** global informations ***/
73#addons-page .global-info-container {
74 background-color: #9C9CFF;
75}
76
77/* Plugins aren't yet disabled by safemode (bug 342333),
78 so don't show that warning when viewing plugins. */
79#addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container,
80#addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning-container {
81 background-color: inherit;
82 background-image: none;
83}
84
85
86/*** notification icons ***/
87
88.warning-icon {
89 list-style-image: url("chrome://global/skin/icons/warning-16.png");
90 width: 16px;
91 height: 16px;
92 margin: 3px 0;
93}
94
95.error-icon {
96 list-style-image: url("chrome://global/skin/icons/error-16.png");
97 width: 16px;
98 height: 16px;
99 margin: 3px 0;
100}
101
102.pending-icon,
103.info-icon {
104 list-style-image: url("chrome://global/skin/icons/information-16.png");
105 width: 16px;
106 height: 16px;
107 margin: 3px 0;
108}
109
110.addon-view[pending="disable"] .pending-icon,
111.addon-view[pending="uninstall"] .pending-icon {
112 list-style-image: url("chrome://global/skin/icons/warning-16.png");
113 width: 16px;
114 height: 15px;
115 margin: 3px 0;
116}
117
118
119/*** view alert boxes ***/
120
121.alert-container {
122 -moz-box-align: center;
123}
124
125.alert-spacer-before {
126 -moz-box-flex: 1;
127}
128
129.alert-spacer-after {
130 -moz-box-flex: 3;
131}
132
133.alert {
134 -moz-box-align: center;
135 padding: 10px;
136 color: #000000;
137 border: 1px inset #CCD0DD;
138 border-radius: 8px;
139 background-color: #CCD0DD;
140 background-clip: padding-box;
141}
142
143.alert .alert-title {
144 font-weight: bold;
145 font-size: 200%;
146 margin-bottom: 15px;
147}
148
149.alert button {
150 margin: 1em 2em;
151}
152
153.loading {
154 list-style-image: url("chrome://global/skin/icons/loading.gif");
155 padding-left: 20px;
156 padding-right: 20px;
157}
158
159
160/*** category selector ***/
161
162#categories {
163 -moz-appearance: none;
164 border: none;
165 -moz-margin-end: -1px;
166 background-color: transparent;
167 position: relative;
168 margin-top: 31px;
169}
170
171.category {
172 background-color: transparent;
173 color: #404040;
174 min-height: 0;
175 padding: 10px 4px;
176 border-width: 1px;
177 border-style: solid;
178 border-color: transparent;
179 -moz-box-align: center;
180 overflow: hidden;
181}
182
183.category[disabled] {
184 border-top: 0;
185 border-bottom: 0;
186 height: 0;
187 opacity: 0;
188 transition-property: height, opacity;
189 transition-duration: 1s, 0.8s;
190}
191
192.category:not([disabled]) {
193 height: 52px;
194 transition-property: height, opacity;
195 transition-duration: 1s, 0.8s;
196}
197
198.category[selected] {
199 background-color: #FFFFFF;
200 color: #000000;
201 border-color: #666699;
202}
203
204.category-name {
205 font-size: 150%;
206}
207
208/* Maximize the size of the viewport when the window is small */
209@media (max-width: 800px) {
210 .category-name {
211 display: none;
212 }
213}
214
215.category-badge {
216 background-color: #666699;
217 padding: 2px 8px;
218 margin: 6px 0;
219 border: 1px outset #666699;
220 color: #FFFFFF;
221 font-weight: bold;
222 text-align: center;
223}
224
225.category-badge[value="0"] {
226 visibility: hidden;
227}
228
229.category-icon {
230 width: 32px;
231 height: 32px;
232 -moz-margin-start: 6px;
233}
234
235#category-search > .category-icon {
236 list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
237}
238#category-discover > .category-icon {
239 list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
240}
241#category-locale > .category-icon {
242 list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
243}
244#category-searchengine > .category-icon {
245 list-style-image: url("chrome://mozapps/skin/extensions/category-searchengines.png");
246}
247#category-extension > .category-icon {
248 list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
249}
250#category-service > .category-icon {
251 list-style-image: url("chrome://mozapps/skin/extensions/category-service.png");
252}
253#category-theme > .category-icon {
254 list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
255}
256#category-plugin > .category-icon {
257 list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
258}
259#category-dictionary > .category-icon {
260 list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png");
261}
262#category-availableUpdates > .category-icon {
263 list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
264}
265#category-recentUpdates > .category-icon {
266 list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
267}
268
269
270/*** header ***/
271
272#header {
273 margin-bottom: 18px;
274 height: 2em;
275}
276
277#header-search {
278 color: #000000;
279 border: 1px inset #CCD0DD;
280 padding: 3px;
281 background-color: #CCD0DD;
282 margin: 0;
283}
284
285#header-search .textbox-input::-moz-placeholder {
286 color: #808080;
287}
288
289#header-search[focused] {
290 background-color: #FFFFFF;
291}
292
293@media (max-width: 600px) {
294 #header-search {
295 width: 12em;
296 }
297}
298
299#header-utils-btn {
300 list-style-image: url("chrome://mozapps/skin/extensions/utilities.png");
301 -moz-margin-end: 16px;
302}
303
304.view-header {
305 background-color: #9999CC;
306 padding: 4px;
307 margin: 0;
308 min-height: 31px;
309 border-bottom: 1px solid #666699;
310}
311
312
313/*** sorters ***/
314
315.sort-controls {
316 -moz-appearance: none;
317}
318
319.sorter {
320 -moz-appearance: none;
321 border: 1px solid transparent;
322 background-color: transparent;
323 color: #000000;
324 padding: 0 5px;
325 margin: 0 6px;
326 min-width: 12px !important;
327 -moz-box-direction: reverse;
328}
329
330.sorter .button-box {
331 padding-top: 0;
332 padding-bottom: 0;
333}
334
335.sorter:hover {
336 border: 1px outset #666699;
337}
338
339.sorter[checkState="1"],
340.sorter[checkState="2"] {
341 background-color: #666699;
342 color: #FFFFFF;
343 border: 1px inset #666699;
344}
345
346.sorter[checkState="1"] {
347 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
348}
349
350.sorter[checkState="2"] {
351 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
352}
353
354.sorter .button-icon {
355 -moz-margin-start: 4px;
356}
357
358
359/*** discover view ***/
360
361.discover-spacer-before,
362.discover-spacer-after {
363 -moz-box-flex: 1;
364}
365
366#discover-error .alert {
367 max-width: 45em;
368 -moz-box-flex: 1;
369}
370
371.discover-logo {
372 list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png");
373 -moz-margin-end: 15px;
374}
375
376.discover-title {
377 font-weight: bold;
378 font-size: 24px;
379 /* font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif; */
380 margin: 0 0 15px 0;
381}
382
383.discover-description {
384 text-align: justify;
385 margin: 0 0 15px 0;
386}
387
388.discover-footer {
389 text-align: justify;
390}
391
392
393/*** list ***/
394
395.list {
396 margin: 0;
397 border: none;
398 background-color: transparent;
399}
400
401.addon {
402 border-bottom: 1px solid #9999CC;
403 padding: 5px;
404 background-origin: border-box;
405}
406
407.details {
408 cursor: pointer;
409 margin: 0;
410 -moz-margin-start: 10px;
411}
412
413.icon-container {
414 width: 48px;
415 height: 48px;
416 margin: 3px 7px;
417 -moz-box-align: center;
418 -moz-box-pack: center;
419}
420
421.icon {
422 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
423 max-width: 48px;
424 max-height: 48px;
425}
426
427.addon[active="false"] .icon {
428 filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
429}
430
431.addon-view[type="theme"] .icon {
432 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
433}
434
435.addon-view[type="locale"] .icon {
436 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
437}
438
439.addon-view[type="plugin"] .icon {
440 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
441}
442
443.addon-view[type="dictionary"] .icon {
444 list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
445}
446
447.name-container {
448 font-size: 150%;
449 font-weight: bold;
450 color: #404040;
451 margin-bottom: 0;
452 -moz-box-align: end;
453 -moz-box-flex: 1;
454}
455
456.creator {
457 font-weight: bold;
458}
459
460.creator .text-link {
461 /* color: #0066CC; */
462}
463
464.description-container {
465 -moz-margin-start: 6px;
466 -moz-box-align: center;
467}
468
469.description {
470 margin: 0;
471}
472
473.warning,
474.pending,
475.error,
476.info {
477 -moz-margin-start: 48px;
478 font-weight: bold;
479 -moz-box-align: center;
480}
481
482.content-container,
483.basicinfo-container {
484 -moz-box-align: start;
485}
486
487.addon[status="installing"] > .content-container {
488 -moz-box-align: stretch;
489}
490
491.advancedinfo-container,
492.update-info-container {
493 -moz-box-align: center;
494}
495
496.update-available {
497 -moz-box-align: end;
498}
499
500.install-status-container {
501 -moz-box-pack: end;
502 -moz-box-align: end;
503}
504
505.name-outer-container {
506 -moz-box-pack: center;
507}
508
509.relnotes-toggle-container,
510.icon-outer-container {
511 -moz-box-pack: start;
512}
513
514.status-container,
515.control-container {
516 -moz-box-pack: end;
517}
518
519.addon-view .warning {
520 color: #808000;
521}
522
523.addon-view .error {
524 color: #FF0000;
525}
526
527.addon-view .pending {
528 color: #33FF33;
529}
530
531.addon-view[pending="disable"] .pending,
532.addon-view[pending="uninstall"] .pending {
533 color: #000000;
534}
535
536.addon .relnotes-container {
537 -moz-box-align: start;
538 -moz-margin-start: 6px;
539 height: 0;
540 overflow: hidden;
541 opacity: 0;
542 transition-property: height, opacity;
543 transition-duration: 0.5s, 0.5s;
544}
545
546.addon[show-relnotes] .relnotes-container {
547 opacity: 1;
548 transition-property: height, opacity;
549 transition-duration: 0.5s, 0.5s;
550}
551
552.addon .relnotes-header {
553 font-weight: bold;
554 margin: 10px 0;
555}
556
557.addon .relnotes-toggle {
558 border: none;
559 background: transparent;
560 font-weight: bold;
561 -moz-box-direction: reverse;
562 cursor: pointer;
563 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
564}
565
566.addon .relnotes-toggle > .button-box > .button-icon {
567 -moz-padding-start: 4px;
568}
569
570.addon[show-relnotes] .relnotes-toggle {
571 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
572}
573
574.addon[active="false"] {
575 background-color: #DDDDDD;
576}
577
578.addon-view[active="false"],
579.addon-view[active="false"] .name-container {
580 color: #666699;
581}
582
583.addon-view[notification="warning"] {
584 background-color: #FFFFCC;
585}
586
587.addon-view[notification="error"] {
588 background-color: #FFD0DD;
589}
590
591.addon-view[notification="info"] {
592 background-color: #9999CC;
593}
594
595.addon-view[pending="enable"],
596.addon-view[pending="upgrade"],
597.addon-view[pending="install"] {
598 background-color: #CCFFDD;
599}
600
601.addon-view[pending="enable"] .pending,
602.addon-view[pending="upgrade"] .pending,
603.addon-view[pending="install"] .pending {
604 color: #008000;
605}
606
607.addon-view[pending="disable"],
608.addon-view[pending="uninstall"] {
609 background-color: #808080;
610}
611
612.addon[selected] {
613 background-color: #336699;
614 color: #FFFFFF;
615}
616
617.addon[selected] .name-container {
618 color: #FFFFFF;
619}
620
621.addon[active="false"][selected] {
622 color: #AAAAAA;
623}
624
625.addon[active="false"][selected] .name-container {
626 color: #DDDDDD;
627}
628
629
630/*** item - uninstalled ***/
631
632.addon[status="uninstalled"] {
633 border: none;
634}
635
636.addon[status="uninstalled"] > .container {
637 -moz-box-align: center;
638 padding: 4px 20px;
639 background-color: #808080;
640 border-radius: 8px;
641 font-size: 120%;
642}
643
644.addon[status="uninstalled"][selected] {
645 background-color: transparent;
646}
647
648
649/*** search view ***/
650
651#search-filter {
652 padding: 5px 20px;
653 -moz-box-align: center;
654 background-color: #FFFFFF;
655 font-size: 120%;
656 border-bottom: 1px solid #666699;
657 overflow-x: hidden;
658}
659
660#search-filter-label {
661 font-weight: bold;
662 color: #808080;
663}
664
665.search-filter-radio {
666 -moz-appearance: none;
667 padding: 0 6px;
668 margin: 0 3px;
669 border-radius: 10000px;
670}
671
672.search-filter-radio[selected] {
673 background-color: #3366699;
674 color: #000000;
675}
676
677.search-filter-radio .radio-check-box1 {
678 display: none;
679}
680
681.search-filter-radio .radio-icon {
682 display: none;
683}
684
685#search-allresults-link {
686 margin-top: 1em;
687 margin-bottom: 2em;
688}
689
690/*** detail view ***/
691
692#detail-view .loading {
693 opacity: 0;
694}
695
696#detail-view[loading-extended] .loading {
697 opacity: 1;
698 transition-property: opacity;
699 transition-duration: 1s;
700}
701
702.detail-view-container {
703 padding: 0 2em 2em 2em;
704 font-size: 110%;
705}
706
707#detail-notifications {
708 margin-top: 1em;
709 margin-bottom: 2em;
710}
711
712#detail-notifications .warning,
713#detail-notifications .pending,
714#detail-notifications .error {
715 -moz-margin-start: 0;
716}
717
718#detail-icon-container {
719 width: 64px;
720 -moz-margin-end: 10px;
721 margin-top: 6px;
722}
723
724#detail-icon {
725 max-width: 64px;
726 max-height: 64px;
727}
728
729#detail-summary {
730 margin-bottom: 2em;
731}
732
733#detail-name-container {
734 font-size: 200%;
735}
736
737#detail-screenshot {
738 -moz-margin-end: 2em;
739 max-width: 300px;
740 max-height: 300px;
741}
742
743#detail-screenshot[loading] {
744 background-image: url("chrome://communicator/skin/brand/throbber-anim.gif");
745 background-position: 50% 50%;
746 background-repeat: no-repeat;
747}
748
749#detail-screenshot[loading="error"] {
750 background-image: url("chrome://global/skin/icons/alert-error.gif");
751}
752
753#detail-desc-container {
754 margin-bottom: 2em;
755}
756
757#detail-desc, #detail-fulldesc {
758 -moz-margin-start: 6px;
759 white-space: pre-wrap;
760 /* This is necessary to fix layout issues with multi-line descriptions, see
761 bug 592712*/
762 outline: solid transparent;
763 min-width: 8em;
764}
765
766#detail-fulldesc {
767 margin-top: 1em;
768}
769
770#detail-contributions {
771 border-radius: 5px;
772 border: 1px solid #666699;
773 margin-bottom: 2em;
774 padding: 1em;
775 background-color: #FFFFCC;
776}
777
778#detail-contrib-description {
779 font-style: italic;
780 margin-bottom: 1em;
781 color: #000000;
782}
783
784#detail-contrib-suggested {
785 color: #808080;
786 font-weight: bold;
787}
788
789#detail-contrib-btn {
790 list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
791}
792
793#detail-contrib-btn .button-icon {
794 -moz-margin-end: 3px;
795}
796
797#detail-grid {
798 margin-bottom: 2em;
799}
800
801#detail-grid > columns > column:first-child {
802 min-width: 15em;
803 max-width: 25em;
804}
805
806.detail-row[first-row="true"],
807.detail-row-complex[first-row="true"],
808setting[first-row="true"] {
809 border-top: none;
810}
811
812.detail-row,
813.detail-row-complex,
814setting {
815 border-top: 1px solid #808080;
816 -moz-box-align: center;
817 min-height: 30px;
818}
819
820#detail-controls {
821 margin-bottom: 1em;
822}
823
824#detail-view[active="false"]:not([pending]):not([notification]) {
825 /* background-color: foo; */
826}
827
828setting[first-row="true"] {
829 margin-top: 2em;
830}
831
832setting {
833 -moz-box-align: start;
834}
835
836.preferences-alignment {
837 min-height: 30px;
838 -moz-box-align: center;
839}
840
841.preferences-description {
842 font-size: 90.9%;
843 color: #808080;
844 margin-top: -2px;
845 -moz-margin-start: 2em;
846 white-space: pre-wrap;
847}
848
849.preferences-description:empty {
850 display: none;
851}
852
853setting[type="radio"] > radiogroup {
854 -moz-box-orient: horizontal;
855}
856
857menulist { /* Fixes some styling inconsistencies */
858 margin: 1px 5px 2px 5px;
859}
860
861/*** creator ***/
862
863.creator > label {
864 -moz-margin-start: 0;
865 -moz-margin-end: 0;
866}
867
868.creator > .text-link {
869 margin-top: 1px;
870 margin-bottom: 1px;
871}
872
873
874/*** rating ***/
875
876.meta-rating {
877 -moz-margin-end: 0;
878 padding-top: 2px;
879}
880
881.meta-rating > .star {
882 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
883 padding: 0 1px;
884}
885
886.meta-rating > .star[on="true"] {
887 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
888}
889
890
891/*** download progress ***/
892
893.download-progress {
894 background-color: #CCD0DD;
895 border: 1px solid #808080;
896 width: 200px;
897 height: 21px;
898 margin: 0 8px;
899}
900
901.download-progress[mode="undetermined"] .status-container {
902 padding: 0 2px;
903}
904
905.download-progress .start-cap,
906.download-progress[complete] .end-cap,
907.download-progress[mode="undetermined"] .end-cap,
908.download-progress .progress .progress-bar {
909 background-color: #336699;
910}
911
912.download-progress .progress .progress-bar {
913 border-left-width: 0;
914 border-right-width: 0;
915 min-height: 21px;
916}
917
918.download-progress .progress {
919 background-color: transparent;
920 padding: 0;
921 margin: 0;
922 border: none;
923}
924
925.download-progress .start-cap, .download-progress .end-cap {
926 width: 12px;
927}
928
929.download-progress .start-cap:-moz-locale-dir(ltr),
930.download-progress .end-cap:-moz-locale-dir(rtl) {
931 border-radius: 3px 0 0 3px;
932}
933
934.download-progress .end-cap:-moz-locale-dir(ltr),
935.download-progress .start-cap:-moz-locale-dir(rtl) {
936 border-radius: 0 3px 3px 0;
937}
938
939.download-progress .cancel {
940 -moz-appearance: none;
941 background-color: #CCD0DD;
942 border: 1px solid #666699;
943 padding: 3px;
944 min-width: 0;
945 margin: 3px;
946}
947
948.download-progress .cancel .button-box {
949 padding: 0;
950 border: none;
951}
952
953.download-progress .cancel .button-text {
954 display: none;
955}
956
957.download-progress .cancel .button-icon {
958 -moz-margin-start: 0;
959}
960
961.download-progress .cancel {
962 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
963}
964
965.download-progress .status-container {
966 -moz-box-align: center;
967}
968
969.download-progress .status {
970/* text-shadow: #FFF 0 0 2px; */
971}
972
973/*** install status ***/
974
975.install-status {
976 -moz-box-align: center;
977}
978
979
980/*** check for updates ***/
981
982#updates-container {
983 -moz-box-align: center;
984}
985
986#updates-container .button-link {
987 font-weight: bold;
988}
989
990#updates-installed,
991#updates-downloaded {
992 color: #00CC00;
993 font-weight: bold;
994}
995
996#update-selected {
997 margin: 12px;
998}
999
1000/*** buttons ***/
1001
1002.addon-control[disabled="true"] {
1003 display: none;
1004}
1005
1006button.button-link {
1007 background: transparent;
1008 border: none;
1009 text-decoration: underline;
1010 color: #0000FF;
1011 cursor: pointer;
1012 min-width: 0;
1013 margin: 0 6px;
1014}
1015
1016/* Needed to override normal button style from inContent.css */
1017button.button-link:not([disabled="true"]):active:hover {
1018}