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