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;
22 /* padding-right: 48px;
23 padding-left: 48px; */
26 #search-list > scrollbox {
30 /*** global warnings ***/
32 .global-warning-container {
37 -moz-box-align: center;
43 #addons-page[warning] .global-warning-container {
44 background-color: #FFCF00;
47 #detail-view .global-warning {
49 border-bottom: 3px solid #000000;
52 @media (max-width: 600px) {
53 .global-warning-text {
57 .global-warning .warning-icon {
58 /* background-color: #FFF;
59 box-shadow: 0px 0px 2px 5px #FFF;
60 border-radius: 10px; */
64 /*** global informations ***/
66 /* Plugins aren't yet disabled by safemode (bug 342333),
67 so don't show that warning when viewing plugins. */
68 #addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container,
69 #addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning-container {
70 background-color: inherit;
71 background-image: none;
74 /*** notification icons ***/
86 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
90 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-error.svg");
95 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-positive.svg");
98 .addon-view[pending="disable"] .pending-icon,
99 .addon-view[pending="uninstall"] .pending-icon {
100 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
103 /*** view alert boxes ***/
106 -moz-box-align: center;
112 .alert-spacer-before {
116 .alert-spacer-after {
121 -moz-box-align: center;
124 border: 1px solid #9C9CFF;
126 background-color: #000000;
127 background-clip: padding-box;
130 .alert .alert-title {
141 list-style-image: url("chrome://global/skin/icons/loading.png");
146 @media (min-resolution: 1.1dppx) {
149 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
154 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
157 /*** category selector ***/
160 padding-top: 0;/*31px;*/
163 .category[disabled] {
166 transition-property: min-height, opacity;
167 transition-duration: 1s, 0.8s;
170 .category:not([disabled]) {
172 transition-property: min-height, opacity;
173 transition-duration: 1s, 0.8s;
176 /* Maximize the size of the viewport when the window is small */
177 @media (max-width: 800px) {
184 background-color: #E7ADE7;
187 margin-inline-start: 6px;
194 .category-badge[value="0"] {
198 #category-search > .category-icon {
199 list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
201 #category-discover > .category-icon {
202 list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
204 #category-locale > .category-icon {
205 list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
207 #category-extension > .category-icon {
208 list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
210 #category-service > .category-icon {
211 list-style-image: url("chrome://mozapps/skin/extensions/category-service.png");
213 #category-theme > .category-icon {
214 list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
216 #category-plugin > .category-icon {
217 list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
219 #category-dictionary > .category-icon {
220 list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png");
222 #category-experiment > .category-icon {
223 list-style-image: url("chrome://mozapps/skin/extensions/category-experiments.png");
225 #category-legacy > .category-icon {
226 list-style-image: url("chrome://mozapps/skin/extensions/category-legacy.svg");
228 #category-availableUpdates > .category-icon {
229 list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
231 #category-recentUpdates > .category-icon {
232 list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
235 /*** main content ***/
237 #addons-page > hbox {
238 /* This applies to the box surrounding all content. */
239 background-color: #A09090;
240 border-radius: 1em 0 0 0;
251 #headered-views-content {
252 border-radius: 1em 0 0 0;
253 background-color: #000000;
261 background-color: #A09090;
264 @media (max-width: 600px) {
271 list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");
272 -moz-context-properties: fill;
274 margin-inline-end: 16px;
277 #header-utils-btn:hover,
278 #header-utils-btn:hover:active,
279 #header-utils-btn[open="true"] {
283 #header-utils-btn > .button-box > .button-menu-dropmarker {
285 background: transparent;
288 #header-utils-btn:hover > .button-box > .button-menu-dropmarker {
289 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
294 background-color: #9C9CFF;
304 .header-button[disabled="true"] > .toolbarbutton-icon {
307 .header-button:not([disabled="true"]):hover,
308 #header-utils-btn:not([disabled="true"]):hover {
312 .header-button > .toolbarbutton-text {
317 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
321 border-inline-start: none;
324 #back-btn:-moz-locale-dir(ltr),
325 #forward-btn:-moz-locale-dir(rtl) {
326 -moz-image-region: rect(42px 25px 63px 0px);
329 #back-btn[disabled="true"]:-moz-locale-dir(ltr),
330 #forward-btn[disabled="true"]:-moz-locale-dir(rtl) {
331 -moz-image-region: rect(42px 50px 63px 25px);
334 #back-btn:-moz-locale-dir(rtl),
335 #forward-btn:-moz-locale-dir(ltr) {
336 -moz-image-region: rect(63px 25px 84px 0px);
339 #back-btn[disabled="true"]:-moz-locale-dir(rtl),
340 #forward-btn[disabled="true"]:-moz-locale-dir(ltr) {
341 -moz-image-region: rect(63px 50px 84px 25px);
347 border-right: 3px solid #000000;
352 border-left: 3px solid #000000;
353 background-color: transparent;
357 min-width: 12px !important;
358 -moz-box-direction: reverse;
361 background-color: #FFCF00;
365 .sorter .button-box {
370 .sorter[checkState="1"],
371 .sorter[checkState="2"] {
372 background-color: #008484;
376 .sorter[checkState="1"] {
377 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
380 .sorter[checkState="2"] {
381 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
384 .sorter .button-icon {
385 margin-inline-start: 6px;
389 /*** discover view ***/
392 background-image: linear-gradient(#A09090 28px, #000000 28px, #000000 100%);
395 .discover-spacer-before,
396 .discover-spacer-after {
400 #discover-error .alert {
406 list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png");
407 margin-inline-end: 15px;
413 /* font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif; */
417 .discover-description {
427 border-radius: 1em 0px 0px;
434 border-width: 0 !important;
435 background-color: transparent;
438 .list > scrollbox > .scrollbox-innerbox {
439 border: 1px dotted transparent;
442 .list:-moz-focusring > scrollbox > .scrollbox-innerbox {
443 border-color: #008484;
447 border-bottom: 1px solid #9C9CFF;
449 background-origin: border-box;
452 .addon:not(:only-child):last-child {
453 border-bottom-width: 0;
459 margin-inline-start: 10px;
466 -moz-box-align: center;
467 -moz-box-pack: center;
471 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg");
476 .content-inner-container {
477 margin-inline-end: 5px;
480 .addon[active="false"] .icon {
481 filter: grayscale(1);
484 .addon-view[type="theme"] .icon {
485 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
488 .addon-view[type="locale"] .icon {
489 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
492 .addon-view[type="plugin"] .icon {
493 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
496 .addon-view[type="dictionary"] .icon {
497 list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
500 .addon-view[type="experiment"] .icon {
501 list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png");
514 background-color: #FFCF00;
516 padding: 4px 5px 3px;
519 -moz-user-focus: ignore;
522 .legacy-warning:hover {
523 background-color: #FF9F00;
525 text-decoration: none;
528 #detail-view .legacy-warning {
536 .description-container {
537 margin-inline-start: 6px;
538 -moz-box-align: center;
550 margin-inline-start: 48px;
552 -moz-box-align: center;
556 .basicinfo-container {
557 -moz-box-align: start;
560 .addon[status="installing"] > .content-container {
561 -moz-box-align: stretch;
564 .update-info-container {
565 -moz-box-align: center;
572 .install-status-container {
577 .name-outer-container {
578 -moz-box-pack: center;
581 .relnotes-toggle-container,
582 .icon-outer-container {
583 -moz-box-pack: start;
591 .addon-view .warning {
599 .addon-view .pending {
603 .addon-view[pending="disable"] .pending,
604 .addon-view[pending="uninstall"] .pending {
608 .addon .relnotes-container {
609 -moz-box-align: start;
610 margin-inline-start: 6px;
614 transition-property: height, opacity;
615 transition-duration: 0.5s, 0.5s;
618 .addon[show-relnotes] .relnotes-container {
620 transition-property: height, opacity;
621 transition-duration: 0.5s, 0.5s;
624 .addon .relnotes-header {
629 .addon .relnotes-toggle {
631 background: transparent;
633 -moz-box-direction: reverse;
635 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
638 .addon .relnotes-toggle > .button-box > .button-icon {
639 padding-inline-start: 4px;
642 .addon[show-relnotes] .relnotes-toggle {
643 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
646 .addon-view[notification],
647 .addon-view[pending] {
648 --view-highlight-color: transparent;
650 background-image: radial-gradient(at 50% 0%,
651 var(--view-highlight-color) 0%,
654 background-color: var(--view-highlight-color);
657 .addon-view[notification="warning"] {
658 --view-highlight-color: #FFCF00;
662 .addon-view[notification="warning"] .warning {
666 .addon-view[notification="warning"] .name-container {
670 .addon-view[notification="warning"] .text-link:hover {
674 .addon-view[notification="error"] {
675 --view-highlight-color: #FF0000;
679 .addon-view[notification="error"] .error {
683 .addon-view[notification="info"] {
684 --view-highlight-color: #9C9CFF;
688 .addon-view[pending="enable"],
689 .addon-view[pending="upgrade"],
690 .addon-view[pending="install"] {
691 --view-highlight-color: #008484;
694 .addon-view[pending="enable"] .pending,
695 .addon-view[pending="upgrade"] .pending,
696 .addon-view[pending="install"] .pending {
700 .addon-view[pending="disable"],
701 .addon-view[pending="uninstall"] {
706 /*** item - uninstalled ***/
708 .addon[status="uninstalled"] {
712 .addon[status="uninstalled"] > .container {
713 -moz-box-align: center;
715 background-color: #8050B0;
720 .addon[status="uninstalled"][selected] {
721 background-color: transparent;
725 background-color: #008484;
729 .addon[selected] .name-container {
733 .addon[active="false"] {
734 background-color: #8050B0;
738 .addon-view[active="false"] .name-container {
743 .addon[active="false"][selected] {
747 .addon[active="false"][selected] .name-container {
752 /*** search view ***/
756 /* margin-right: 48px;
758 -moz-box-align: center;
759 background-color: #000000;
761 border-bottom: 1px solid #9C9CFF;
765 #search-filter-label {
768 margin-inline-end: 10px;
771 #search-allresults-link {
776 /*** detail view ***/
778 #detail-view .loading {
782 #detail-view[loading-extended] .loading {
784 transition-property: opacity;
785 transition-duration: 1s;
788 .detail-view-container {
789 padding: 0 2em 2em 2em;
793 #detail-notifications {
798 #detail-notifications .warning,
799 #detail-notifications .pending,
800 #detail-notifications .error {
801 margin-inline-start: 0;
804 #detail-icon-container {
806 margin-inline-end: 10px;
819 #detail-name-container {
824 #detail-screenshot-box {
825 margin-inline-end: 2em;
826 /* background-color: white;*/
835 #detail-screenshot[loading] {
836 background-image: url("chrome://global/skin/icons/loading.png");
837 background-position: 50% 50%;
838 background-repeat: no-repeat;
841 @media (min-resolution: 1.1dppx) {
842 #detail-screenshot[loading] {
843 background-image: url("chrome://global/skin/icons/loading@2x.png");
844 background-size: 16px;
848 #detail-screenshot[loading="error"] {
849 background-image: url("chrome://global/skin/icons/alert-error.gif");
852 #detail-desc-container {
856 #detail-desc, #detail-fulldesc {
857 margin-inline-start: 6px;
858 white-space: pre-wrap;
859 /* This is necessary to fix layout issues with multi-line descriptions, see
861 outline: solid transparent;
869 #detail-contributions {
871 border: 1px solid #9C9CFF;
874 background-color: #FFCF00;
877 #detail-contrib-description {
883 #detail-contrib-suggested {
888 #detail-contrib-btn {
889 list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
892 #detail-contrib-btn .button-icon {
893 margin-inline-end: 3px;
901 #detail-grid > columns > column:first-child {
905 .detail-row[first-row="true"],
906 .detail-row-complex[first-row="true"],
907 setting[first-row="true"] {
914 border-top: 1px solid #9C9CFF;
915 -moz-box-align: center;
924 .inline-options-browser,
925 setting[first-row="true"] {
930 -moz-box-align: start;
933 .preferences-alignment {
935 -moz-box-align: center;
938 .preferences-description {
942 margin-inline-start: 2em;
943 white-space: pre-wrap;
946 .preferences-description:empty {
950 setting[type="radio"] > radiogroup {
951 -moz-box-orient: horizontal;
957 margin-inline-end: 0;
960 .creator > .text-link {
969 margin-inline-end: 0;
973 .meta-rating > .star {
974 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
978 .meta-rating > .star[on="true"] {
979 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
983 /*** download progress ***/
986 background-color: #000000;
988 border: 1px solid #FF9F00;
994 .download-progress[mode="undetermined"] {
995 border-color: #A09090;
998 .download-progress .start-cap,
999 .download-progress[complete] .end-cap,
1000 .download-progress[mode="undetermined"] .end-cap,
1001 .download-progress .progress .progress-bar {
1002 background-color: #008484;
1005 .download-progress .progress .progress-bar {
1006 border-left-width: 0;
1007 border-right-width: 0;
1011 .download-progress .progress {
1012 background-color: transparent;
1018 .download-progress .start-cap, .download-progress .end-cap {
1022 .download-progress .start-cap:-moz-locale-dir(ltr),
1023 .download-progress .end-cap:-moz-locale-dir(rtl) {
1024 border-radius: 1px 0 0 1px;
1027 .download-progress .end-cap:-moz-locale-dir(ltr),
1028 .download-progress .start-cap:-moz-locale-dir(rtl) {
1029 border-radius: 0 1px 1px 0;
1032 .download-progress .cancel {
1033 -moz-appearance: none;
1034 background-color: #8050B0;
1035 border: 1px solid #9C9CFF;
1043 .download-progress .cancel .button-box {
1048 .download-progress .cancel .button-text {
1052 .download-progress .cancel .button-icon {
1053 margin-inline-start: 0;
1056 .download-progress .cancel {
1057 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
1060 .download-progress .status-container {
1061 -moz-box-align: center;
1064 .download-progress .status {
1065 /* text-shadow: #FFF 0 0 2px; */
1068 /*** install status ***/
1071 -moz-box-align: center;
1075 /*** check for updates ***/
1077 #updates-container {
1078 -moz-box-align: center;
1081 #updates-container .button-link {
1086 #updates-downloaded {
1097 .addon-control[disabled="true"]:not(.no-auto-hide) {
1101 .no-auto-hide .addon-control {
1102 display: block !important;
1105 button.button-link {
1106 background: transparent;
1108 text-decoration: underline;
1115 /* Needed to override normal button style from inContent.css */
1116 button.button-link:not([disabled="true"]):active:hover {
1119 .addon-control.replacement {
1120 background-color: #008484;
1124 /*** telemetry experiments ***/
1126 #detail-experiment-container {
1131 #detail-experiment-bullet-container,
1132 #detail-experiment-state,
1133 #detail-experiment-time,
1134 .experiment-bullet-container,
1137 vertical-align: middle;
1138 display: inline-block;
1141 .addon .experiment-bullet,
1142 #detail-experiment-bullet {
1146 .addon[active="true"] .experiment-bullet,
1147 #detail-view[active="true"] #detail-experiment-bullet {
1151 /*** info UI for add-ons that have been disabled for being unsigned ***/
1153 #show-disabled-unsigned-extensions:not(:hover) {
1154 background-color: #FF0000;
1157 #disabled-unsigned-addons-info {
1163 #disabled-unsigned-addons-heading,
1164 #legacy-extensions-heading {
1167 margin-bottom: .5em;
1174 #detail-findUpdates-btn[hidden] {