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/in-content/common.css");
20 .view-pane > .list > scrollbox {
21 border-radius: 1em 0 0 0;
24 #search-list > scrollbox {
28 /*** global warnings ***/
30 .global-warning-container {
35 -moz-box-align: center;
41 #addons-page[warning] .global-warning-container {
42 background-color: #FFCF00;
45 #detail-view .global-warning {
47 border-bottom: 3px solid #000000;
50 @media (max-width: 600px) {
51 .global-warning-text {
55 .global-warning .warning-icon {
56 /* background-color: #FFF;
57 box-shadow: 0px 0px 2px 5px #FFF;
58 border-radius: 10px; */
62 /*** global informations ***/
64 /* Plugins aren't yet disabled by safemode (bug 342333),
65 so don't show that warning when viewing plugins. */
66 #addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container,
67 #addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning-container {
68 background-color: inherit;
69 background-image: none;
73 /*** notification icons ***/
85 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
89 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-error.svg");
94 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-positive.svg");
97 .addon-view[pending="disable"] .pending-icon,
98 .addon-view[pending="uninstall"] .pending-icon {
99 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
102 /*** view alert boxes ***/
105 -moz-box-align: center;
106 -moz-margin-end: 48px;
109 .alert-spacer-before {
113 .alert-spacer-after {
118 -moz-box-align: center;
121 border: 1px solid #9C9CFF;
123 background-color: #000000;
124 background-clip: padding-box;
127 .alert .alert-title {
138 list-style-image: url("chrome://global/skin/icons/loading.gif");
144 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
147 /*** category selector ***/
150 padding-top: 0;/*31px;*/
153 .category[disabled] {
156 transition-property: min-height, opacity;
157 transition-duration: 1s, 0.8s;
160 .category:not([disabled]) {
162 transition-property: min-height, opacity;
163 transition-duration: 1s, 0.8s;
166 /* Maximize the size of the viewport when the window is small */
167 @media (max-width: 800px) {
174 background-color: #E7ADE7;
177 -moz-margin-start: 6px;
184 .category-badge[value="0"] {
188 #category-search > .category-icon {
189 list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
191 #category-discover > .category-icon {
192 list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
194 #category-locale > .category-icon {
195 list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
197 #category-extension > .category-icon {
198 list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
200 #category-service > .category-icon {
201 list-style-image: url("chrome://mozapps/skin/extensions/category-service.png");
203 #category-theme > .category-icon {
204 list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
206 #category-plugin > .category-icon {
207 list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
209 #category-dictionary > .category-icon {
210 list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png");
212 #category-experiment > .category-icon {
213 list-style-image: url("chrome://mozapps/skin/extensions/category-experiments.png");
215 #category-availableUpdates > .category-icon {
216 list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
218 #category-recentUpdates > .category-icon {
219 list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
222 /*** main content ***/
224 #addons-page > hbox {
225 /* This applies to the box surrounding all content. */
226 background-color: #A09090;
227 border-radius: 1em 0 0 0;
236 background-color: #000000;
237 border-radius: 1em 0 0 0;
245 background-color: #A09090;
248 @media (max-width: 600px) {
255 list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities");
256 -moz-margin-end: 16px;
259 #header-utils-btn:hover,
260 #header-utils-btn:hover:active,
261 #header-utils-btn[open="true"] {
262 list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-hover");
265 #header-utils-btn > .button-box > .button-menu-dropmarker {
267 background: transparent;
270 #header-utils-btn:hover > .button-box > .button-menu-dropmarker {
271 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
276 -moz-margin-end: 48px;
277 background-color: #9C9CFF;
287 .header-button[disabled="true"] > .toolbarbutton-icon {
290 .header-button:not([disabled="true"]):hover,
291 #header-utils-btn:not([disabled="true"]):hover {
295 .header-button > .toolbarbutton-text {
300 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
304 -moz-border-start: none;
307 #back-btn:-moz-locale-dir(ltr),
308 #forward-btn:-moz-locale-dir(rtl) {
309 -moz-image-region: rect(42px 25px 63px 0px);
312 #back-btn[disabled="true"]:-moz-locale-dir(ltr),
313 #forward-btn[disabled="true"]:-moz-locale-dir(rtl) {
314 -moz-image-region: rect(42px 50px 63px 25px);
317 #back-btn:-moz-locale-dir(rtl),
318 #forward-btn:-moz-locale-dir(ltr) {
319 -moz-image-region: rect(63px 25px 84px 0px);
322 #back-btn[disabled="true"]:-moz-locale-dir(rtl),
323 #forward-btn[disabled="true"]:-moz-locale-dir(ltr) {
324 -moz-image-region: rect(63px 50px 84px 25px);
330 border-right: 3px solid #000000;
335 border-left: 3px solid #000000;
336 background-color: transparent;
340 min-width: 12px !important;
341 -moz-box-direction: reverse;
344 background-color: #FFCF00;
348 .sorter .button-box {
353 .sorter[checkState="1"],
354 .sorter[checkState="2"] {
355 background-color: #008484;
359 .sorter[checkState="1"] {
360 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
363 .sorter[checkState="2"] {
364 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
367 .sorter .button-icon {
368 -moz-margin-start: 6px;
372 /*** discover view ***/
374 .discover-spacer-before,
375 .discover-spacer-after {
379 #discover-error .alert {
385 list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png");
386 -moz-margin-end: 15px;
392 /* font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif; */
396 .discover-description {
406 border-radius: 1em 0px 0px;
413 border-width: 0 !important;
414 background-color: transparent;
417 .list > scrollbox > .scrollbox-innerbox {
418 border: 1px dotted transparent;
421 .list:-moz-focusring > scrollbox > .scrollbox-innerbox {
422 border-color: #008484;
426 border-bottom: 1px solid #9C9CFF;
428 background-origin: border-box;
431 .addon:not(:only-child):last-child {
432 border-bottom-width: 0;
438 -moz-margin-start: 10px;
445 -moz-box-align: center;
446 -moz-box-pack: center;
450 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg");
455 .content-inner-container {
456 -moz-margin-end: 5px;
459 .addon[active="false"] .icon {
460 filter: grayscale(1);
463 .addon-view[type="theme"] .icon {
464 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
467 .addon-view[type="locale"] .icon {
468 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
471 .addon-view[type="plugin"] .icon {
472 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
475 .addon-view[type="dictionary"] .icon {
476 list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
479 .addon-view[type="experiment"] .icon {
480 list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png");
496 .description-container {
497 -moz-margin-start: 6px;
498 -moz-box-align: center;
510 -moz-margin-start: 48px;
512 -moz-box-align: center;
516 .basicinfo-container {
517 -moz-box-align: start;
520 .addon[status="installing"] > .content-container {
521 -moz-box-align: stretch;
524 .update-info-container {
525 -moz-box-align: center;
532 .install-status-container {
537 .name-outer-container {
538 -moz-box-pack: center;
541 .relnotes-toggle-container,
542 .icon-outer-container {
543 -moz-box-pack: start;
551 .addon-view .warning {
559 .addon-view .pending {
563 .addon-view[pending="disable"] .pending,
564 .addon-view[pending="uninstall"] .pending {
568 .addon .relnotes-container {
569 -moz-box-align: start;
570 -moz-margin-start: 6px;
574 transition-property: height, opacity;
575 transition-duration: 0.5s, 0.5s;
578 .addon[show-relnotes] .relnotes-container {
580 transition-property: height, opacity;
581 transition-duration: 0.5s, 0.5s;
584 .addon .relnotes-header {
589 .addon .relnotes-toggle {
591 background: transparent;
593 -moz-box-direction: reverse;
595 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
598 .addon .relnotes-toggle > .button-box > .button-icon {
599 -moz-padding-start: 4px;
602 .addon[show-relnotes] .relnotes-toggle {
603 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
606 .addon-view[notification],
607 .addon-view[pending] {
608 --view-highlight-color: transparent;
610 background-image: radial-gradient(at 50% 0%,
611 var(--view-highlight-color) 0%,
614 background-color: var(--view-highlight-color);
617 .addon-view[notification="warning"] {
618 --view-highlight-color: #FFCF00;
622 .addon-view[notification="warning"] .warning {
626 .addon-view[notification="warning"] .name-container {
630 .addon-view[notification="warning"] .text-link:hover {
634 .addon-view[notification="error"] {
635 --view-highlight-color: #FF0000;
639 .addon-view[notification="error"] .error {
643 .addon-view[notification="info"] {
644 --view-highlight-color: #9C9CFF;
648 .addon-view[pending="enable"],
649 .addon-view[pending="upgrade"],
650 .addon-view[pending="install"] {
651 --view-highlight-color: #008484;
654 .addon-view[pending="enable"] .pending,
655 .addon-view[pending="upgrade"] .pending,
656 .addon-view[pending="install"] .pending {
660 .addon-view[pending="disable"],
661 .addon-view[pending="uninstall"] {
666 /*** item - uninstalled ***/
668 .addon[status="uninstalled"] {
672 .addon[status="uninstalled"] > .container {
673 -moz-box-align: center;
675 background-color: #8050B0;
680 .addon[status="uninstalled"][selected] {
681 background-color: transparent;
685 background-color: #008484;
689 .addon[selected] .name-container {
693 .addon[active="false"] {
694 background-color: #8050B0;
698 .addon-view[active="false"] .name-container {
703 .addon[active="false"][selected] {
707 .addon[active="false"][selected] .name-container {
712 /*** search view ***/
716 -moz-box-align: center;
717 background-color: #000000;
719 border-bottom: 1px solid #9C9CFF;
723 #search-filter-label {
726 -moz-margin-end: 10px;
729 #search-allresults-link {
734 /*** detail view ***/
736 #detail-view .loading {
740 #detail-view[loading-extended] .loading {
742 transition-property: opacity;
743 transition-duration: 1s;
746 .detail-view-container {
747 padding: 0 2em 2em 2em;
751 #detail-notifications {
756 #detail-notifications .warning,
757 #detail-notifications .pending,
758 #detail-notifications .error {
759 -moz-margin-start: 0;
762 #detail-icon-container {
764 -moz-margin-end: 10px;
777 #detail-name-container {
782 #detail-screenshot-box {
783 -moz-margin-end: 2em;
790 /* background-color: white;*/
793 #detail-screenshot[loading] {
794 background-image: url("chrome://communicator/skin/brand/throbber-anim.png");
795 background-position: 50% 50%;
796 background-repeat: no-repeat;
799 #detail-screenshot[loading="error"] {
800 background-image: url("chrome://global/skin/icons/alert-error.gif");
803 #detail-desc-container {
807 #detail-desc, #detail-fulldesc {
808 -moz-margin-start: 6px;
809 white-space: pre-wrap;
810 /* This is necessary to fix layout issues with multi-line descriptions, see
812 outline: solid transparent;
820 #detail-contributions {
822 border: 1px solid #9C9CFF;
825 background-color: #FFCF00;
828 #detail-contrib-description {
834 #detail-contrib-suggested {
839 #detail-contrib-btn {
840 list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
843 #detail-contrib-btn .button-icon {
844 -moz-margin-end: 3px;
852 #detail-grid > columns > column:first-child {
856 .detail-row[first-row="true"],
857 .detail-row-complex[first-row="true"],
858 setting[first-row="true"] {
865 border-top: 1px solid #9C9CFF;
866 -moz-box-align: center;
875 .inline-options-browser,
876 setting[first-row="true"] {
881 -moz-box-align: start;
884 .preferences-alignment {
886 -moz-box-align: center;
889 .preferences-description {
893 -moz-margin-start: 2em;
894 white-space: pre-wrap;
897 .preferences-description:empty {
901 setting[type="radio"] > radiogroup {
902 -moz-box-orient: horizontal;
911 .creator > .text-link {
924 .meta-rating > .star {
925 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
929 .meta-rating > .star[on="true"] {
930 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
934 /*** download progress ***/
937 background-color: #000000;
939 border: 1px solid #FF9F00;
945 .download-progress[mode="undetermined"] {
946 border-color: #A09090;
949 .download-progress .start-cap,
950 .download-progress[complete] .end-cap,
951 .download-progress[mode="undetermined"] .end-cap,
952 .download-progress .progress .progress-bar {
953 background-color: #008484;
956 .download-progress .progress .progress-bar {
957 border-left-width: 0;
958 border-right-width: 0;
962 .download-progress .progress {
963 background-color: transparent;
969 .download-progress .start-cap, .download-progress .end-cap {
973 .download-progress .start-cap:-moz-locale-dir(ltr),
974 .download-progress .end-cap:-moz-locale-dir(rtl) {
975 border-radius: 1px 0 0 1px;
978 .download-progress .end-cap:-moz-locale-dir(ltr),
979 .download-progress .start-cap:-moz-locale-dir(rtl) {
980 border-radius: 0 1px 1px 0;
983 .download-progress .cancel {
984 -moz-appearance: none;
985 background-color: #8050B0;
986 border: 1px solid #9C9CFF;
994 .download-progress .cancel .button-box {
999 .download-progress .cancel .button-text {
1003 .download-progress .cancel .button-icon {
1004 -moz-margin-start: 0;
1007 .download-progress .cancel {
1008 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
1011 .download-progress .status-container {
1012 -moz-box-align: center;
1015 .download-progress .status {
1016 /* text-shadow: #FFF 0 0 2px; */
1019 /*** install status ***/
1022 -moz-box-align: center;
1026 /*** check for updates ***/
1028 #updates-container {
1029 -moz-box-align: center;
1032 #updates-container .button-link {
1037 #updates-downloaded {
1048 .addon-control[disabled="true"]:not(.no-auto-hide) {
1052 .no-auto-hide .addon-control {
1053 display: block !important;
1056 button.button-link {
1057 background: transparent;
1059 text-decoration: underline;
1066 /* Needed to override normal button style from inContent.css */
1067 button.button-link:not([disabled="true"]):active:hover {
1070 /*** telemetry experiments ***/
1072 #detail-experiment-container {
1077 #detail-experiment-bullet-container,
1078 #detail-experiment-state,
1079 #detail-experiment-time,
1080 .experiment-bullet-container,
1083 vertical-align: middle;
1084 display: inline-block;
1087 .addon .experiment-bullet,
1088 #detail-experiment-bullet {
1092 .addon[active="true"] .experiment-bullet,
1093 #detail-view[active="true"] #detail-experiment-bullet {
1097 /*** info UI for add-ons that have been disabled for being unsigned ***/
1099 #show-disabled-unsigned-extensions:not(:hover) {
1100 background-color: #FF0000;
1103 #disabled-unsigned-addons-info {
1105 -moz-margin-end: 48px;
1108 #disabled-unsigned-addons-heading {
1111 margin-bottom: .5em;