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.png");
143 @media (min-resolution: 1.1dppx) {
146 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
151 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
154 /*** category selector ***/
157 padding-top: 0;/*31px;*/
160 .category[disabled] {
163 transition-property: min-height, opacity;
164 transition-duration: 1s, 0.8s;
167 .category:not([disabled]) {
169 transition-property: min-height, opacity;
170 transition-duration: 1s, 0.8s;
173 /* Maximize the size of the viewport when the window is small */
174 @media (max-width: 800px) {
181 background-color: #E7ADE7;
184 -moz-margin-start: 6px;
191 .category-badge[value="0"] {
195 #category-search > .category-icon {
196 list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
198 #category-discover > .category-icon {
199 list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
201 #category-locale > .category-icon {
202 list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
204 #category-extension > .category-icon {
205 list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
207 #category-service > .category-icon {
208 list-style-image: url("chrome://mozapps/skin/extensions/category-service.png");
210 #category-theme > .category-icon {
211 list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
213 #category-plugin > .category-icon {
214 list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
216 #category-dictionary > .category-icon {
217 list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png");
219 #category-experiment > .category-icon {
220 list-style-image: url("chrome://mozapps/skin/extensions/category-experiments.png");
222 #category-availableUpdates > .category-icon {
223 list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
225 #category-recentUpdates > .category-icon {
226 list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
229 /*** main content ***/
231 #addons-page > hbox {
232 /* This applies to the box surrounding all content. */
233 background-color: #A09090;
234 border-radius: 1em 0 0 0;
243 background-color: #000000;
244 border-radius: 1em 0 0 0;
252 background-color: #A09090;
255 @media (max-width: 600px) {
262 list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities");
263 -moz-margin-end: 16px;
266 #header-utils-btn:hover,
267 #header-utils-btn:hover:active,
268 #header-utils-btn[open="true"] {
269 list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-hover");
272 #header-utils-btn > .button-box > .button-menu-dropmarker {
274 background: transparent;
277 #header-utils-btn:hover > .button-box > .button-menu-dropmarker {
278 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
283 -moz-margin-end: 48px;
284 background-color: #9C9CFF;
294 .header-button[disabled="true"] > .toolbarbutton-icon {
297 .header-button:not([disabled="true"]):hover,
298 #header-utils-btn:not([disabled="true"]):hover {
302 .header-button > .toolbarbutton-text {
307 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
311 -moz-border-start: none;
314 #back-btn:-moz-locale-dir(ltr),
315 #forward-btn:-moz-locale-dir(rtl) {
316 -moz-image-region: rect(42px 25px 63px 0px);
319 #back-btn[disabled="true"]:-moz-locale-dir(ltr),
320 #forward-btn[disabled="true"]:-moz-locale-dir(rtl) {
321 -moz-image-region: rect(42px 50px 63px 25px);
324 #back-btn:-moz-locale-dir(rtl),
325 #forward-btn:-moz-locale-dir(ltr) {
326 -moz-image-region: rect(63px 25px 84px 0px);
329 #back-btn[disabled="true"]:-moz-locale-dir(rtl),
330 #forward-btn[disabled="true"]:-moz-locale-dir(ltr) {
331 -moz-image-region: rect(63px 50px 84px 25px);
337 border-right: 3px solid #000000;
342 border-left: 3px solid #000000;
343 background-color: transparent;
347 min-width: 12px !important;
348 -moz-box-direction: reverse;
351 background-color: #FFCF00;
355 .sorter .button-box {
360 .sorter[checkState="1"],
361 .sorter[checkState="2"] {
362 background-color: #008484;
366 .sorter[checkState="1"] {
367 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
370 .sorter[checkState="2"] {
371 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
374 .sorter .button-icon {
375 -moz-margin-start: 6px;
379 /*** discover view ***/
381 .discover-spacer-before,
382 .discover-spacer-after {
386 #discover-error .alert {
392 list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png");
393 -moz-margin-end: 15px;
399 /* font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif; */
403 .discover-description {
413 border-radius: 1em 0px 0px;
420 border-width: 0 !important;
421 background-color: transparent;
424 .list > scrollbox > .scrollbox-innerbox {
425 border: 1px dotted transparent;
428 .list:-moz-focusring > scrollbox > .scrollbox-innerbox {
429 border-color: #008484;
433 border-bottom: 1px solid #9C9CFF;
435 background-origin: border-box;
438 .addon:not(:only-child):last-child {
439 border-bottom-width: 0;
445 -moz-margin-start: 10px;
452 -moz-box-align: center;
453 -moz-box-pack: center;
457 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg");
462 .content-inner-container {
463 -moz-margin-end: 5px;
466 .addon[active="false"] .icon {
467 filter: grayscale(1);
470 .addon-view[type="theme"] .icon {
471 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
474 .addon-view[type="locale"] .icon {
475 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
478 .addon-view[type="plugin"] .icon {
479 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
482 .addon-view[type="dictionary"] .icon {
483 list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
486 .addon-view[type="experiment"] .icon {
487 list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png");
503 .description-container {
504 -moz-margin-start: 6px;
505 -moz-box-align: center;
517 -moz-margin-start: 48px;
519 -moz-box-align: center;
523 .basicinfo-container {
524 -moz-box-align: start;
527 .addon[status="installing"] > .content-container {
528 -moz-box-align: stretch;
531 .update-info-container {
532 -moz-box-align: center;
539 .install-status-container {
544 .name-outer-container {
545 -moz-box-pack: center;
548 .relnotes-toggle-container,
549 .icon-outer-container {
550 -moz-box-pack: start;
558 .addon-view .warning {
566 .addon-view .pending {
570 .addon-view[pending="disable"] .pending,
571 .addon-view[pending="uninstall"] .pending {
575 .addon .relnotes-container {
576 -moz-box-align: start;
577 -moz-margin-start: 6px;
581 transition-property: height, opacity;
582 transition-duration: 0.5s, 0.5s;
585 .addon[show-relnotes] .relnotes-container {
587 transition-property: height, opacity;
588 transition-duration: 0.5s, 0.5s;
591 .addon .relnotes-header {
596 .addon .relnotes-toggle {
598 background: transparent;
600 -moz-box-direction: reverse;
602 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
605 .addon .relnotes-toggle > .button-box > .button-icon {
606 -moz-padding-start: 4px;
609 .addon[show-relnotes] .relnotes-toggle {
610 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
613 .addon-view[notification],
614 .addon-view[pending] {
615 --view-highlight-color: transparent;
617 background-image: radial-gradient(at 50% 0%,
618 var(--view-highlight-color) 0%,
621 background-color: var(--view-highlight-color);
624 .addon-view[notification="warning"] {
625 --view-highlight-color: #FFCF00;
629 .addon-view[notification="warning"] .warning {
633 .addon-view[notification="warning"] .name-container {
637 .addon-view[notification="warning"] .text-link:hover {
641 .addon-view[notification="error"] {
642 --view-highlight-color: #FF0000;
646 .addon-view[notification="error"] .error {
650 .addon-view[notification="info"] {
651 --view-highlight-color: #9C9CFF;
655 .addon-view[pending="enable"],
656 .addon-view[pending="upgrade"],
657 .addon-view[pending="install"] {
658 --view-highlight-color: #008484;
661 .addon-view[pending="enable"] .pending,
662 .addon-view[pending="upgrade"] .pending,
663 .addon-view[pending="install"] .pending {
667 .addon-view[pending="disable"],
668 .addon-view[pending="uninstall"] {
673 /*** item - uninstalled ***/
675 .addon[status="uninstalled"] {
679 .addon[status="uninstalled"] > .container {
680 -moz-box-align: center;
682 background-color: #8050B0;
687 .addon[status="uninstalled"][selected] {
688 background-color: transparent;
692 background-color: #008484;
696 .addon[selected] .name-container {
700 .addon[active="false"] {
701 background-color: #8050B0;
705 .addon-view[active="false"] .name-container {
710 .addon[active="false"][selected] {
714 .addon[active="false"][selected] .name-container {
719 /*** search view ***/
723 -moz-box-align: center;
724 background-color: #000000;
726 border-bottom: 1px solid #9C9CFF;
730 #search-filter-label {
733 -moz-margin-end: 10px;
736 #search-allresults-link {
741 /*** detail view ***/
743 #detail-view .loading {
747 #detail-view[loading-extended] .loading {
749 transition-property: opacity;
750 transition-duration: 1s;
753 .detail-view-container {
754 padding: 0 2em 2em 2em;
758 #detail-notifications {
763 #detail-notifications .warning,
764 #detail-notifications .pending,
765 #detail-notifications .error {
766 -moz-margin-start: 0;
769 #detail-icon-container {
771 -moz-margin-end: 10px;
784 #detail-name-container {
789 #detail-screenshot-box {
790 -moz-margin-end: 2em;
791 /* background-color: white;*/
800 #detail-screenshot[loading] {
801 background-image: url("chrome://global/skin/icons/loading.png");
802 background-position: 50% 50%;
803 background-repeat: no-repeat;
806 @media (min-resolution: 1.1dppx) {
807 #detail-screenshot[loading] {
808 background-image: url("chrome://global/skin/icons/loading@2x.png");
809 background-size: 16px;
813 #detail-screenshot[loading="error"] {
814 background-image: url("chrome://global/skin/icons/alert-error.gif");
817 #detail-desc-container {
821 #detail-desc, #detail-fulldesc {
822 -moz-margin-start: 6px;
823 white-space: pre-wrap;
824 /* This is necessary to fix layout issues with multi-line descriptions, see
826 outline: solid transparent;
834 #detail-contributions {
836 border: 1px solid #9C9CFF;
839 background-color: #FFCF00;
842 #detail-contrib-description {
848 #detail-contrib-suggested {
853 #detail-contrib-btn {
854 list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
857 #detail-contrib-btn .button-icon {
858 -moz-margin-end: 3px;
866 #detail-grid > columns > column:first-child {
870 .detail-row[first-row="true"],
871 .detail-row-complex[first-row="true"],
872 setting[first-row="true"] {
879 border-top: 1px solid #9C9CFF;
880 -moz-box-align: center;
889 .inline-options-browser,
890 setting[first-row="true"] {
895 -moz-box-align: start;
898 .preferences-alignment {
900 -moz-box-align: center;
903 .preferences-description {
907 -moz-margin-start: 2em;
908 white-space: pre-wrap;
911 .preferences-description:empty {
915 setting[type="radio"] > radiogroup {
916 -moz-box-orient: horizontal;
925 .creator > .text-link {
938 .meta-rating > .star {
939 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
943 .meta-rating > .star[on="true"] {
944 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
948 /*** download progress ***/
951 background-color: #000000;
953 border: 1px solid #FF9F00;
959 .download-progress[mode="undetermined"] {
960 border-color: #A09090;
963 .download-progress .start-cap,
964 .download-progress[complete] .end-cap,
965 .download-progress[mode="undetermined"] .end-cap,
966 .download-progress .progress .progress-bar {
967 background-color: #008484;
970 .download-progress .progress .progress-bar {
971 border-left-width: 0;
972 border-right-width: 0;
976 .download-progress .progress {
977 background-color: transparent;
983 .download-progress .start-cap, .download-progress .end-cap {
987 .download-progress .start-cap:-moz-locale-dir(ltr),
988 .download-progress .end-cap:-moz-locale-dir(rtl) {
989 border-radius: 1px 0 0 1px;
992 .download-progress .end-cap:-moz-locale-dir(ltr),
993 .download-progress .start-cap:-moz-locale-dir(rtl) {
994 border-radius: 0 1px 1px 0;
997 .download-progress .cancel {
998 -moz-appearance: none;
999 background-color: #8050B0;
1000 border: 1px solid #9C9CFF;
1008 .download-progress .cancel .button-box {
1013 .download-progress .cancel .button-text {
1017 .download-progress .cancel .button-icon {
1018 -moz-margin-start: 0;
1021 .download-progress .cancel {
1022 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
1025 .download-progress .status-container {
1026 -moz-box-align: center;
1029 .download-progress .status {
1030 /* text-shadow: #FFF 0 0 2px; */
1033 /*** install status ***/
1036 -moz-box-align: center;
1040 /*** check for updates ***/
1042 #updates-container {
1043 -moz-box-align: center;
1046 #updates-container .button-link {
1051 #updates-downloaded {
1062 .addon-control[disabled="true"]:not(.no-auto-hide) {
1066 .no-auto-hide .addon-control {
1067 display: block !important;
1070 button.button-link {
1071 background: transparent;
1073 text-decoration: underline;
1080 /* Needed to override normal button style from inContent.css */
1081 button.button-link:not([disabled="true"]):active:hover {
1084 /*** telemetry experiments ***/
1086 #detail-experiment-container {
1091 #detail-experiment-bullet-container,
1092 #detail-experiment-state,
1093 #detail-experiment-time,
1094 .experiment-bullet-container,
1097 vertical-align: middle;
1098 display: inline-block;
1101 .addon .experiment-bullet,
1102 #detail-experiment-bullet {
1106 .addon[active="true"] .experiment-bullet,
1107 #detail-view[active="true"] #detail-experiment-bullet {
1111 /*** info UI for add-ons that have been disabled for being unsigned ***/
1113 #show-disabled-unsigned-extensions:not(:hover) {
1114 background-color: #FF0000;
1117 #disabled-unsigned-addons-info {
1119 -moz-margin-end: 48px;
1122 #disabled-unsigned-addons-heading {
1125 margin-bottom: .5em;