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/. */
5 @import url("chrome://global/skin/inContentUI.css");
7 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
10 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
14 -moz-border-start: none;
17 #back-btn:-moz-locale-dir(ltr),
18 #forward-btn:-moz-locale-dir(rtl) {
19 -moz-image-region: rect(42px 25px 63px 0px);
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);
27 #back-btn:-moz-locale-dir(rtl),
28 #forward-btn:-moz-locale-dir(ltr) {
29 -moz-image-region: rect(63px 25px 84px 0px);
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);
38 /*** global warnings ***/
40 .global-warning-container {
45 -moz-box-align: center;
51 #addons-page[warning] .global-warning-container {
52 background-color: #FFCF00;
55 #detail-view .global-warning {
57 border-bottom: 3px solid #000000;
60 @media (max-width: 600px) {
61 .global-warning-text {
65 .global-warning .warning-icon {
66 /* background-color: #FFF;
67 box-shadow: 0px 0px 2px 5px #FFF;
68 border-radius: 10px; */
72 /*** global informations ***/
73 #addons-page .global-info-container {
74 background-color: #9C9CFF;
75 border-top-right-radius: 5px;
76 border-top-left-radius: 5px;
79 /* Plugins aren't yet disabled by safemode (bug 342333),
80 so don't show that warning when viewing plugins. */
81 #addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container,
82 #addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning-container {
83 background-color: inherit;
84 background-image: none;
88 /*** notification icons ***/
91 list-style-image: url("chrome://global/skin/icons/warning-16.png");
98 list-style-image: url("chrome://global/skin/icons/error-16.png");
106 list-style-image: url("chrome://global/skin/icons/information-16.png");
112 .addon-view[pending="disable"] .pending-icon,
113 .addon-view[pending="uninstall"] .pending-icon {
114 list-style-image: url("chrome://global/skin/icons/warning-16.png");
121 /*** view alert boxes ***/
124 -moz-box-align: center;
127 .alert-spacer-before {
131 .alert-spacer-after {
136 -moz-box-align: center;
139 border: 1px solid #9C9CFF;
141 background-color: #000000;
142 background-clip: padding-box;
145 .alert .alert-title {
156 list-style-image: url("chrome://global/skin/icons/loading.gif");
162 /*** category selector ***/
165 -moz-appearance: none;
167 -moz-margin-end: -1px;
168 background-color: transparent;
174 background-color: transparent;
180 border-color: transparent;
181 -moz-box-align: center;
185 .category:-moz-locale-dir(ltr) {
186 border-top-left-radius: 5px;
187 border-bottom-left-radius: 5px;
190 .category:-moz-locale-dir(rtl) {
191 border-top-right-radius: 5px;
192 border-bottom-right-radius: 5px;
195 .category[disabled] {
200 transition-property: height, opacity;
201 transition-duration: 1s, 0.8s;
204 .category:not([disabled]) {
206 transition-property: height, opacity;
207 transition-duration: 1s, 0.8s;
210 .category[selected] {
211 background-color: #008484;
213 border-color: #9C9CFF;
220 /* Maximize the size of the viewport when the window is small */
221 @media (max-width: 800px) {
228 background-color: #E7ADE7;
231 border-radius: 10000px;
237 .category-badge[value="0"] {
244 -moz-margin-start: 6px;
247 #category-search > .category-icon {
248 list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
250 #category-discover > .category-icon {
251 list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
253 #category-locale > .category-icon {
254 list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
256 #category-searchengine > .category-icon {
257 list-style-image: url("chrome://mozapps/skin/extensions/category-searchengines.png");
259 #category-extension > .category-icon {
260 list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
262 #category-theme > .category-icon {
263 list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
265 #category-plugin > .category-icon {
266 list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
268 #category-dictionary > .category-icon {
269 list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png");
271 #category-availableUpdates > .category-icon {
272 list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
274 #category-recentUpdates > .category-icon {
275 list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
288 border: 1px solid #9C9CFF;
291 background-color: #000000;
295 #header-search .textbox-input:-moz-placeholder {
299 #header-search[focused] {
300 border-color: #008484;
304 list-style-image: url("chrome://mozapps/skin/extensions/utilities.png");
305 -moz-margin-end: 16px;
308 #header-utils-btn:hover,
309 #header-utils-btn:hover:active,
310 #header-utils-btn[open="true"] {
311 list-style-image: url("chrome://mozapps/skin/extensions/utilities-hover.png");
314 #header-utils-btn > .button-box > .button-menu-dropmarker {
316 background: transparent;
319 #header-utils-btn:hover > .button-box > .button-menu-dropmarker {
320 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
324 background-color: #9C9CFF;
336 -moz-appearance: none;
337 border-right: 3px solid #000000;
341 -moz-appearance: none;
343 border-left: 3px solid #000000;
344 background-color: transparent;
348 -moz-padding-start: 6px;
349 -moz-padding-end: 3px;
351 min-width: 12px !important;
352 -moz-box-direction: reverse;
355 background-color: #FFCF00;
359 .sorter .button-box {
364 .sorter[checkState="1"],
365 .sorter[checkState="2"] {
366 background-color: #008484;
370 .sorter[checkState="1"] {
371 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
374 .sorter[checkState="2"] {
375 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
378 .sorter .button-icon {
379 -moz-margin-start: 4px;
383 /*** discover view ***/
385 .discover-spacer-before,
386 .discover-spacer-after {
390 #discover-error .alert {
396 list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png");
397 -moz-margin-end: 15px;
403 /* font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif; */
407 .discover-description {
422 background-color: transparent;
426 border-bottom: 1px solid #9C9CFF;
428 background-origin: border-box;
434 -moz-margin-start: 10px;
441 -moz-box-align: center;
442 -moz-box-pack: center;
446 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
451 .addon[active="false"] .icon {
452 filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
455 .addon-view[type="theme"] .icon {
456 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
459 .addon-view[type="locale"] .icon {
460 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
463 .addon-view[type="plugin"] .icon {
464 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
467 .addon-view[type="dictionary"] .icon {
468 list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
484 .creator .text-link {
485 /* color: #0066CC; */
488 .description-container {
489 -moz-margin-start: 6px;
490 -moz-box-align: center;
501 -moz-margin-start: 48px;
503 -moz-box-align: center;
507 .basicinfo-container {
508 -moz-box-align: start;
511 .addon[status="installing"] > .content-container {
512 -moz-box-align: stretch;
515 .advancedinfo-container,
516 .update-info-container {
517 -moz-box-align: center;
524 .install-status-container {
529 .name-outer-container {
530 -moz-box-pack: center;
533 .relnotes-toggle-container,
534 .icon-outer-container {
535 -moz-box-pack: start;
543 .addon-view .warning {
551 .addon-view .pending {
555 .addon-view[pending="disable"] .pending,
556 .addon-view[pending="uninstall"] .pending {
560 .addon .relnotes-container {
561 -moz-box-align: start;
562 -moz-margin-start: 6px;
566 transition-property: height, opacity;
567 transition-duration: 0.5s, 0.5s;
570 .addon[show-relnotes] .relnotes-container {
572 transition-property: height, opacity;
573 transition-duration: 0.5s, 0.5s;
576 .addon .relnotes-header {
581 .addon .relnotes-toggle {
583 background: transparent;
585 -moz-box-direction: reverse;
587 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
590 .addon .relnotes-toggle > .button-box > .button-icon {
591 -moz-padding-start: 4px;
594 .addon[show-relnotes] .relnotes-toggle {
595 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
598 .addon[active="false"] {
599 background-color: #8050B0;
603 .addon-view[active="false"] .name-container {
608 .addon-view[notification="warning"] {
609 background-color : #FFCF00;
613 .addon-view[notification="warning"] .warning {
617 .addon-view[notification="warning"] .name-container {
621 .addon-view[notification="error"] {
622 background-color: #FF0000;
626 .addon-view[notification="error"] .error {
630 .addon-view[notification="info"] {
631 background-color: #9C9CFF;
635 .addon-view[pending="enable"],
636 .addon-view[pending="upgrade"],
637 .addon-view[pending="install"] {
638 background-color: #008484;
641 .addon-view[pending="enable"] .pending,
642 .addon-view[pending="upgrade"] .pending,
643 .addon-view[pending="install"] .pending {
647 .addon-view[pending="disable"],
648 .addon-view[pending="uninstall"] {
653 /*** item - uninstalled ***/
655 .addon[status="uninstalled"] {
659 .addon[status="uninstalled"] > .container {
660 -moz-box-align: center;
662 background-color: #8050B0;
667 .addon[status="uninstalled"][selected] {
668 background-color: transparent;
672 background-color: #008484;
676 .addon[selected] .name-container {
680 .addon[active="false"][selected] {
684 .addon[active="false"][selected] .name-container {
689 /*** search view ***/
693 -moz-box-align: center;
694 background-color: #000000;
696 border-bottom: 1px solid #9C9CFF;
700 #search-filter-label {
705 .search-filter-radio {
708 border-radius: 10000px;
711 .search-filter-radio[selected] {
712 background-color: #008484;
716 .search-filter-radio .radio-check-box1 {
720 .search-filter-radio .radio-icon {
724 #search-allresults-link {
729 /*** detail view ***/
731 #detail-view .loading {
735 #detail-view[loading-extended] .loading {
737 transition-property: opacity;
738 transition-duration: 1s;
741 .detail-view-container {
742 padding: 0 2em 2em 2em;
746 #detail-notifications {
751 #detail-notifications .warning,
752 #detail-notifications .pending,
753 #detail-notifications .error {
754 -moz-margin-start: 0;
757 #detail-icon-container {
759 -moz-margin-end: 10px;
772 #detail-name-container {
777 -moz-margin-end: 2em;
782 #detail-screenshot[loading] {
783 background-image: url("chrome://communicator/skin/brand/throbber-anim.gif");
784 background-position: 50% 50%;
785 background-repeat: no-repeat;
788 #detail-screenshot[loading="error"] {
789 background-image: url("chrome://global/skin/icons/alert-error.gif");
792 #detail-desc-container {
796 #detail-desc, #detail-fulldesc {
797 -moz-margin-start: 6px;
798 white-space: pre-wrap;
799 /* This is necessary to fix layout issues with multi-line descriptions, see
801 outline: solid transparent;
809 #detail-contributions {
811 border: 1px solid #9C9CFF;
814 background-color: #FFCF00;
817 #detail-contrib-description {
823 #detail-contrib-suggested {
828 #detail-contrib-btn {
829 list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
832 #detail-contrib-btn .button-icon {
833 -moz-margin-end: 3px;
841 #detail-grid > columns > column:first-child {
845 .detail-row[first-row="true"],
846 .detail-row-complex[first-row="true"],
847 setting[first-row="true"] {
854 border-top: 1px solid #9C9CFF;
855 -moz-box-align: center;
863 #detail-view[active="false"]:not([pending]):not([notification]) {
864 /* background-color: foo; */
867 setting[first-row="true"] {
872 -moz-box-align: start;
875 .preferences-alignment {
877 -moz-box-align: center;
880 .preferences-description {
884 -moz-margin-start: 2em;
885 white-space: pre-wrap;
888 .preferences-description:empty {
892 setting[type="radio"] > radiogroup {
893 -moz-box-orient: horizontal;
896 menulist { /* Fixes some styling inconsistencies */
897 margin: 1px 5px 2px 5px;
906 .creator > .text-link {
919 .meta-rating > .star {
920 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
924 .meta-rating > .star[on="true"] {
925 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
929 /*** download progress ***/
932 background-color: #000000;
933 border-radius: 10000px;
934 border: 1px solid #FF9F00;
940 .download-progress[mode="undetermined"] .status-container {
944 .download-progress .start-cap,
945 .download-progress[complete] .end-cap,
946 .download-progress[mode="undetermined"] .end-cap,
947 .download-progress .progress .progress-bar {
948 background-color: #008484;
951 .download-progress .progress .progress-bar {
952 border-left-width: 0;
953 border-right-width: 0;
957 .download-progress .progress {
958 background-color: transparent;
964 .download-progress .start-cap, .download-progress .end-cap {
968 .download-progress .start-cap:-moz-locale-dir(ltr),
969 .download-progress .end-cap:-moz-locale-dir(rtl) {
970 border-radius: 3px 0 0 3px;
973 .download-progress .end-cap:-moz-locale-dir(ltr),
974 .download-progress .start-cap:-moz-locale-dir(rtl) {
975 border-radius: 0 3px 3px 0;
978 .download-progress .cancel {
979 -moz-appearance: none;
980 background-color: #8050B0;
981 border: 1px solid #9C9CFF;
988 .download-progress .cancel .button-box {
993 .download-progress .cancel .button-text {
997 .download-progress .cancel .button-icon {
998 -moz-margin-start: 0;
1001 .download-progress .cancel {
1002 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
1005 .download-progress .status-container {
1006 -moz-box-align: center;
1009 .download-progress .status {
1010 /* text-shadow: #FFF 0 0 2px; */
1013 /*** install status ***/
1016 -moz-box-align: center;
1020 /*** check for updates ***/
1022 #updates-container {
1023 -moz-box-align: center;
1026 #updates-container .button-link {
1031 #updates-downloaded {
1042 .addon-control[disabled="true"] {
1046 button.button-link {
1047 background: transparent;
1049 text-decoration: underline;
1056 /* Needed to override normal button style from inContent.css */
1057 button.button-link:not([disabled="true"]):active:hover {