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;
111 .alert-spacer-before {
115 .alert-spacer-after {
120 -moz-box-align: center;
123 border: 1px solid #9C9CFF;
125 background-color: #000000;
126 background-clip: padding-box;
129 .alert .alert-title {
140 list-style-image: url("chrome://global/skin/icons/loading.png");
145 @media (min-resolution: 1.1dppx) {
148 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
153 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
156 /*** category selector ***/
159 padding-top: 0;/*31px;*/
162 .category[disabled] {
165 transition-property: min-height, opacity;
166 transition-duration: 1s, 0.8s;
169 .category:not([disabled]) {
171 transition-property: min-height, opacity;
172 transition-duration: 1s, 0.8s;
175 /* Maximize the size of the viewport when the window is small */
176 @media (max-width: 800px) {
183 background-color: #E7ADE7;
186 margin-inline-start: 6px;
193 .category-badge[value="0"] {
197 #category-search > .category-icon {
198 list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
200 #category-discover > .category-icon {
201 list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
203 #category-locale > .category-icon {
204 list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
206 #category-extension > .category-icon {
207 list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
209 #category-service > .category-icon {
210 list-style-image: url("chrome://mozapps/skin/extensions/category-service.png");
212 #category-theme > .category-icon {
213 list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
215 #category-plugin > .category-icon {
216 list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
218 #category-dictionary > .category-icon {
219 list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png");
221 #category-experiment > .category-icon {
222 list-style-image: url("chrome://mozapps/skin/extensions/category-experiments.png");
224 #category-availableUpdates > .category-icon {
225 list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
227 #category-recentUpdates > .category-icon {
228 list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
231 /*** main content ***/
233 #addons-page > hbox {
234 /* This applies to the box surrounding all content. */
235 background-color: #A09090;
236 border-radius: 1em 0 0 0;
245 background-color: #000000;
246 border-radius: 1em 0 0 0;
254 background-color: #A09090;
257 @media (max-width: 600px) {
264 list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities");
265 margin-inline-end: 16px;
268 #header-utils-btn:hover,
269 #header-utils-btn:hover:active,
270 #header-utils-btn[open="true"] {
271 list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-hover");
274 #header-utils-btn > .button-box > .button-menu-dropmarker {
276 background: transparent;
279 #header-utils-btn:hover > .button-box > .button-menu-dropmarker {
280 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
285 background-color: #9C9CFF;
295 .header-button[disabled="true"] > .toolbarbutton-icon {
298 .header-button:not([disabled="true"]):hover,
299 #header-utils-btn:not([disabled="true"]):hover {
303 .header-button > .toolbarbutton-text {
308 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
312 border-inline-start: none;
315 #back-btn:-moz-locale-dir(ltr),
316 #forward-btn:-moz-locale-dir(rtl) {
317 -moz-image-region: rect(42px 25px 63px 0px);
320 #back-btn[disabled="true"]:-moz-locale-dir(ltr),
321 #forward-btn[disabled="true"]:-moz-locale-dir(rtl) {
322 -moz-image-region: rect(42px 50px 63px 25px);
325 #back-btn:-moz-locale-dir(rtl),
326 #forward-btn:-moz-locale-dir(ltr) {
327 -moz-image-region: rect(63px 25px 84px 0px);
330 #back-btn[disabled="true"]:-moz-locale-dir(rtl),
331 #forward-btn[disabled="true"]:-moz-locale-dir(ltr) {
332 -moz-image-region: rect(63px 50px 84px 25px);
338 border-right: 3px solid #000000;
343 border-left: 3px solid #000000;
344 background-color: transparent;
348 min-width: 12px !important;
349 -moz-box-direction: reverse;
352 background-color: #FFCF00;
356 .sorter .button-box {
361 .sorter[checkState="1"],
362 .sorter[checkState="2"] {
363 background-color: #008484;
367 .sorter[checkState="1"] {
368 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
371 .sorter[checkState="2"] {
372 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
375 .sorter .button-icon {
376 margin-inline-start: 6px;
380 /*** discover view ***/
382 .discover-spacer-before,
383 .discover-spacer-after {
387 #discover-error .alert {
393 list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png");
394 margin-inline-end: 15px;
400 /* font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif; */
404 .discover-description {
414 border-radius: 1em 0px 0px;
421 border-width: 0 !important;
422 background-color: transparent;
425 .list > scrollbox > .scrollbox-innerbox {
426 border: 1px dotted transparent;
429 .list:-moz-focusring > scrollbox > .scrollbox-innerbox {
430 border-color: #008484;
434 border-bottom: 1px solid #9C9CFF;
436 background-origin: border-box;
439 .addon:not(:only-child):last-child {
440 border-bottom-width: 0;
446 margin-inline-start: 10px;
453 -moz-box-align: center;
454 -moz-box-pack: center;
458 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg");
463 .content-inner-container {
464 margin-inline-end: 5px;
467 .addon[active="false"] .icon {
468 filter: grayscale(1);
471 .addon-view[type="theme"] .icon {
472 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
475 .addon-view[type="locale"] .icon {
476 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
479 .addon-view[type="plugin"] .icon {
480 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
483 .addon-view[type="dictionary"] .icon {
484 list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
487 .addon-view[type="experiment"] .icon {
488 list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png");
504 .description-container {
505 margin-inline-start: 6px;
506 -moz-box-align: center;
518 margin-inline-start: 48px;
520 -moz-box-align: center;
524 .basicinfo-container {
525 -moz-box-align: start;
528 .addon[status="installing"] > .content-container {
529 -moz-box-align: stretch;
532 .update-info-container {
533 -moz-box-align: center;
540 .install-status-container {
545 .name-outer-container {
546 -moz-box-pack: center;
549 .relnotes-toggle-container,
550 .icon-outer-container {
551 -moz-box-pack: start;
559 .addon-view .warning {
567 .addon-view .pending {
571 .addon-view[pending="disable"] .pending,
572 .addon-view[pending="uninstall"] .pending {
576 .addon .relnotes-container {
577 -moz-box-align: start;
578 margin-inline-start: 6px;
582 transition-property: height, opacity;
583 transition-duration: 0.5s, 0.5s;
586 .addon[show-relnotes] .relnotes-container {
588 transition-property: height, opacity;
589 transition-duration: 0.5s, 0.5s;
592 .addon .relnotes-header {
597 .addon .relnotes-toggle {
599 background: transparent;
601 -moz-box-direction: reverse;
603 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
606 .addon .relnotes-toggle > .button-box > .button-icon {
607 padding-inline-start: 4px;
610 .addon[show-relnotes] .relnotes-toggle {
611 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
614 .addon-view[notification],
615 .addon-view[pending] {
616 --view-highlight-color: transparent;
618 background-image: radial-gradient(at 50% 0%,
619 var(--view-highlight-color) 0%,
622 background-color: var(--view-highlight-color);
625 .addon-view[notification="warning"] {
626 --view-highlight-color: #FFCF00;
630 .addon-view[notification="warning"] .warning {
634 .addon-view[notification="warning"] .name-container {
638 .addon-view[notification="warning"] .text-link:hover {
642 .addon-view[notification="error"] {
643 --view-highlight-color: #FF0000;
647 .addon-view[notification="error"] .error {
651 .addon-view[notification="info"] {
652 --view-highlight-color: #9C9CFF;
656 .addon-view[pending="enable"],
657 .addon-view[pending="upgrade"],
658 .addon-view[pending="install"] {
659 --view-highlight-color: #008484;
662 .addon-view[pending="enable"] .pending,
663 .addon-view[pending="upgrade"] .pending,
664 .addon-view[pending="install"] .pending {
668 .addon-view[pending="disable"],
669 .addon-view[pending="uninstall"] {
674 /*** item - uninstalled ***/
676 .addon[status="uninstalled"] {
680 .addon[status="uninstalled"] > .container {
681 -moz-box-align: center;
683 background-color: #8050B0;
688 .addon[status="uninstalled"][selected] {
689 background-color: transparent;
693 background-color: #008484;
697 .addon[selected] .name-container {
701 .addon[active="false"] {
702 background-color: #8050B0;
706 .addon-view[active="false"] .name-container {
711 .addon[active="false"][selected] {
715 .addon[active="false"][selected] .name-container {
720 /*** search view ***/
724 /* margin-right: 48px;
726 -moz-box-align: center;
727 background-color: #000000;
729 border-bottom: 1px solid #9C9CFF;
733 #search-filter-label {
736 margin-inline-end: 10px;
739 #search-allresults-link {
744 /*** detail view ***/
746 #detail-view .loading {
750 #detail-view[loading-extended] .loading {
752 transition-property: opacity;
753 transition-duration: 1s;
756 .detail-view-container {
757 padding: 0 2em 2em 2em;
761 #detail-notifications {
766 #detail-notifications .warning,
767 #detail-notifications .pending,
768 #detail-notifications .error {
769 margin-inline-start: 0;
772 #detail-icon-container {
774 margin-inline-end: 10px;
787 #detail-name-container {
792 #detail-screenshot-box {
793 margin-inline-end: 2em;
794 /* background-color: white;*/
803 #detail-screenshot[loading] {
804 background-image: url("chrome://global/skin/icons/loading.png");
805 background-position: 50% 50%;
806 background-repeat: no-repeat;
809 @media (min-resolution: 1.1dppx) {
810 #detail-screenshot[loading] {
811 background-image: url("chrome://global/skin/icons/loading@2x.png");
812 background-size: 16px;
816 #detail-screenshot[loading="error"] {
817 background-image: url("chrome://global/skin/icons/alert-error.gif");
820 #detail-desc-container {
824 #detail-desc, #detail-fulldesc {
825 margin-inline-start: 6px;
826 white-space: pre-wrap;
827 /* This is necessary to fix layout issues with multi-line descriptions, see
829 outline: solid transparent;
837 #detail-contributions {
839 border: 1px solid #9C9CFF;
842 background-color: #FFCF00;
845 #detail-contrib-description {
851 #detail-contrib-suggested {
856 #detail-contrib-btn {
857 list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
860 #detail-contrib-btn .button-icon {
861 margin-inline-end: 3px;
869 #detail-grid > columns > column:first-child {
873 .detail-row[first-row="true"],
874 .detail-row-complex[first-row="true"],
875 setting[first-row="true"] {
882 border-top: 1px solid #9C9CFF;
883 -moz-box-align: center;
892 .inline-options-browser,
893 setting[first-row="true"] {
898 -moz-box-align: start;
901 .preferences-alignment {
903 -moz-box-align: center;
906 .preferences-description {
910 margin-inline-start: 2em;
911 white-space: pre-wrap;
914 .preferences-description:empty {
918 setting[type="radio"] > radiogroup {
919 -moz-box-orient: horizontal;
925 margin-inline-end: 0;
928 .creator > .text-link {
937 margin-inline-end: 0;
941 .meta-rating > .star {
942 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
946 .meta-rating > .star[on="true"] {
947 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
951 /*** download progress ***/
954 background-color: #000000;
956 border: 1px solid #FF9F00;
962 .download-progress[mode="undetermined"] {
963 border-color: #A09090;
966 .download-progress .start-cap,
967 .download-progress[complete] .end-cap,
968 .download-progress[mode="undetermined"] .end-cap,
969 .download-progress .progress .progress-bar {
970 background-color: #008484;
973 .download-progress .progress .progress-bar {
974 border-left-width: 0;
975 border-right-width: 0;
979 .download-progress .progress {
980 background-color: transparent;
986 .download-progress .start-cap, .download-progress .end-cap {
990 .download-progress .start-cap:-moz-locale-dir(ltr),
991 .download-progress .end-cap:-moz-locale-dir(rtl) {
992 border-radius: 1px 0 0 1px;
995 .download-progress .end-cap:-moz-locale-dir(ltr),
996 .download-progress .start-cap:-moz-locale-dir(rtl) {
997 border-radius: 0 1px 1px 0;
1000 .download-progress .cancel {
1001 -moz-appearance: none;
1002 background-color: #8050B0;
1003 border: 1px solid #9C9CFF;
1011 .download-progress .cancel .button-box {
1016 .download-progress .cancel .button-text {
1020 .download-progress .cancel .button-icon {
1021 margin-inline-start: 0;
1024 .download-progress .cancel {
1025 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
1028 .download-progress .status-container {
1029 -moz-box-align: center;
1032 .download-progress .status {
1033 /* text-shadow: #FFF 0 0 2px; */
1036 /*** install status ***/
1039 -moz-box-align: center;
1043 /*** check for updates ***/
1045 #updates-container {
1046 -moz-box-align: center;
1049 #updates-container .button-link {
1054 #updates-downloaded {
1065 .addon-control[disabled="true"]:not(.no-auto-hide) {
1069 .no-auto-hide .addon-control {
1070 display: block !important;
1073 button.button-link {
1074 background: transparent;
1076 text-decoration: underline;
1083 /* Needed to override normal button style from inContent.css */
1084 button.button-link:not([disabled="true"]):active:hover {
1087 /*** telemetry experiments ***/
1089 #detail-experiment-container {
1094 #detail-experiment-bullet-container,
1095 #detail-experiment-state,
1096 #detail-experiment-time,
1097 .experiment-bullet-container,
1100 vertical-align: middle;
1101 display: inline-block;
1104 .addon .experiment-bullet,
1105 #detail-experiment-bullet {
1109 .addon[active="true"] .experiment-bullet,
1110 #detail-view[active="true"] #detail-experiment-bullet {
1114 /*** info UI for add-ons that have been disabled for being unsigned ***/
1116 #show-disabled-unsigned-extensions:not(:hover) {
1117 background-color: #FF0000;
1120 #disabled-unsigned-addons-info {
1126 #disabled-unsigned-addons-heading {
1129 margin-bottom: .5em;