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-availableUpdates > .category-icon {
226 list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
228 #category-recentUpdates > .category-icon {
229 list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
232 /*** main content ***/
234 #addons-page > hbox {
235 /* This applies to the box surrounding all content. */
236 background-color: #A09090;
237 border-radius: 1em 0 0 0;
248 #headered-views-content {
249 border-radius: 1em 0 0 0;
250 background-color: #000000;
258 background-color: #A09090;
261 @media (max-width: 600px) {
268 list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities");
269 margin-inline-end: 16px;
272 #header-utils-btn:hover,
273 #header-utils-btn:hover:active,
274 #header-utils-btn[open="true"] {
275 list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-hover");
278 #header-utils-btn > .button-box > .button-menu-dropmarker {
280 background: transparent;
283 #header-utils-btn:hover > .button-box > .button-menu-dropmarker {
284 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
289 background-color: #9C9CFF;
299 .header-button[disabled="true"] > .toolbarbutton-icon {
302 .header-button:not([disabled="true"]):hover,
303 #header-utils-btn:not([disabled="true"]):hover {
307 .header-button > .toolbarbutton-text {
312 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
316 border-inline-start: none;
319 #back-btn:-moz-locale-dir(ltr),
320 #forward-btn:-moz-locale-dir(rtl) {
321 -moz-image-region: rect(42px 25px 63px 0px);
324 #back-btn[disabled="true"]:-moz-locale-dir(ltr),
325 #forward-btn[disabled="true"]:-moz-locale-dir(rtl) {
326 -moz-image-region: rect(42px 50px 63px 25px);
329 #back-btn:-moz-locale-dir(rtl),
330 #forward-btn:-moz-locale-dir(ltr) {
331 -moz-image-region: rect(63px 25px 84px 0px);
334 #back-btn[disabled="true"]:-moz-locale-dir(rtl),
335 #forward-btn[disabled="true"]:-moz-locale-dir(ltr) {
336 -moz-image-region: rect(63px 50px 84px 25px);
342 border-right: 3px solid #000000;
347 border-left: 3px solid #000000;
348 background-color: transparent;
352 min-width: 12px !important;
353 -moz-box-direction: reverse;
356 background-color: #FFCF00;
360 .sorter .button-box {
365 .sorter[checkState="1"],
366 .sorter[checkState="2"] {
367 background-color: #008484;
371 .sorter[checkState="1"] {
372 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
375 .sorter[checkState="2"] {
376 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
379 .sorter .button-icon {
380 margin-inline-start: 6px;
384 /*** discover view ***/
387 background-image: linear-gradient(#A09090 28px, #000000 28px, #000000 100%);
390 .discover-spacer-before,
391 .discover-spacer-after {
395 #discover-error .alert {
401 list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png");
402 margin-inline-end: 15px;
408 /* font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif; */
412 .discover-description {
422 border-radius: 1em 0px 0px;
429 border-width: 0 !important;
430 background-color: transparent;
433 .list > scrollbox > .scrollbox-innerbox {
434 border: 1px dotted transparent;
437 .list:-moz-focusring > scrollbox > .scrollbox-innerbox {
438 border-color: #008484;
442 border-bottom: 1px solid #9C9CFF;
444 background-origin: border-box;
447 .addon:not(:only-child):last-child {
448 border-bottom-width: 0;
454 margin-inline-start: 10px;
461 -moz-box-align: center;
462 -moz-box-pack: center;
466 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg");
471 .content-inner-container {
472 margin-inline-end: 5px;
475 .addon[active="false"] .icon {
476 filter: grayscale(1);
479 .addon-view[type="theme"] .icon {
480 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
483 .addon-view[type="locale"] .icon {
484 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
487 .addon-view[type="plugin"] .icon {
488 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
491 .addon-view[type="dictionary"] .icon {
492 list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
495 .addon-view[type="experiment"] .icon {
496 list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png");
512 .description-container {
513 margin-inline-start: 6px;
514 -moz-box-align: center;
526 margin-inline-start: 48px;
528 -moz-box-align: center;
532 .basicinfo-container {
533 -moz-box-align: start;
536 .addon[status="installing"] > .content-container {
537 -moz-box-align: stretch;
540 .update-info-container {
541 -moz-box-align: center;
548 .install-status-container {
553 .name-outer-container {
554 -moz-box-pack: center;
557 .relnotes-toggle-container,
558 .icon-outer-container {
559 -moz-box-pack: start;
567 .addon-view .warning {
575 .addon-view .pending {
579 .addon-view[pending="disable"] .pending,
580 .addon-view[pending="uninstall"] .pending {
584 .addon .relnotes-container {
585 -moz-box-align: start;
586 margin-inline-start: 6px;
590 transition-property: height, opacity;
591 transition-duration: 0.5s, 0.5s;
594 .addon[show-relnotes] .relnotes-container {
596 transition-property: height, opacity;
597 transition-duration: 0.5s, 0.5s;
600 .addon .relnotes-header {
605 .addon .relnotes-toggle {
607 background: transparent;
609 -moz-box-direction: reverse;
611 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
614 .addon .relnotes-toggle > .button-box > .button-icon {
615 padding-inline-start: 4px;
618 .addon[show-relnotes] .relnotes-toggle {
619 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
622 .addon-view[notification],
623 .addon-view[pending] {
624 --view-highlight-color: transparent;
626 background-image: radial-gradient(at 50% 0%,
627 var(--view-highlight-color) 0%,
630 background-color: var(--view-highlight-color);
633 .addon-view[notification="warning"] {
634 --view-highlight-color: #FFCF00;
638 .addon-view[notification="warning"] .warning {
642 .addon-view[notification="warning"] .name-container {
646 .addon-view[notification="warning"] .text-link:hover {
650 .addon-view[notification="error"] {
651 --view-highlight-color: #FF0000;
655 .addon-view[notification="error"] .error {
659 .addon-view[notification="info"] {
660 --view-highlight-color: #9C9CFF;
664 .addon-view[pending="enable"],
665 .addon-view[pending="upgrade"],
666 .addon-view[pending="install"] {
667 --view-highlight-color: #008484;
670 .addon-view[pending="enable"] .pending,
671 .addon-view[pending="upgrade"] .pending,
672 .addon-view[pending="install"] .pending {
676 .addon-view[pending="disable"],
677 .addon-view[pending="uninstall"] {
682 /*** item - uninstalled ***/
684 .addon[status="uninstalled"] {
688 .addon[status="uninstalled"] > .container {
689 -moz-box-align: center;
691 background-color: #8050B0;
696 .addon[status="uninstalled"][selected] {
697 background-color: transparent;
701 background-color: #008484;
705 .addon[selected] .name-container {
709 .addon[active="false"] {
710 background-color: #8050B0;
714 .addon-view[active="false"] .name-container {
719 .addon[active="false"][selected] {
723 .addon[active="false"][selected] .name-container {
728 /*** search view ***/
732 /* margin-right: 48px;
734 -moz-box-align: center;
735 background-color: #000000;
737 border-bottom: 1px solid #9C9CFF;
741 #search-filter-label {
744 margin-inline-end: 10px;
747 #search-allresults-link {
752 /*** detail view ***/
754 #detail-view .loading {
758 #detail-view[loading-extended] .loading {
760 transition-property: opacity;
761 transition-duration: 1s;
764 .detail-view-container {
765 padding: 0 2em 2em 2em;
769 #detail-notifications {
774 #detail-notifications .warning,
775 #detail-notifications .pending,
776 #detail-notifications .error {
777 margin-inline-start: 0;
780 #detail-icon-container {
782 margin-inline-end: 10px;
795 #detail-name-container {
800 #detail-screenshot-box {
801 margin-inline-end: 2em;
802 /* background-color: white;*/
811 #detail-screenshot[loading] {
812 background-image: url("chrome://global/skin/icons/loading.png");
813 background-position: 50% 50%;
814 background-repeat: no-repeat;
817 @media (min-resolution: 1.1dppx) {
818 #detail-screenshot[loading] {
819 background-image: url("chrome://global/skin/icons/loading@2x.png");
820 background-size: 16px;
824 #detail-screenshot[loading="error"] {
825 background-image: url("chrome://global/skin/icons/alert-error.gif");
828 #detail-desc-container {
832 #detail-desc, #detail-fulldesc {
833 margin-inline-start: 6px;
834 white-space: pre-wrap;
835 /* This is necessary to fix layout issues with multi-line descriptions, see
837 outline: solid transparent;
845 #detail-contributions {
847 border: 1px solid #9C9CFF;
850 background-color: #FFCF00;
853 #detail-contrib-description {
859 #detail-contrib-suggested {
864 #detail-contrib-btn {
865 list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
868 #detail-contrib-btn .button-icon {
869 margin-inline-end: 3px;
877 #detail-grid > columns > column:first-child {
881 .detail-row[first-row="true"],
882 .detail-row-complex[first-row="true"],
883 setting[first-row="true"] {
890 border-top: 1px solid #9C9CFF;
891 -moz-box-align: center;
900 .inline-options-browser,
901 setting[first-row="true"] {
906 -moz-box-align: start;
909 .preferences-alignment {
911 -moz-box-align: center;
914 .preferences-description {
918 margin-inline-start: 2em;
919 white-space: pre-wrap;
922 .preferences-description:empty {
926 setting[type="radio"] > radiogroup {
927 -moz-box-orient: horizontal;
933 margin-inline-end: 0;
936 .creator > .text-link {
945 margin-inline-end: 0;
949 .meta-rating > .star {
950 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
954 .meta-rating > .star[on="true"] {
955 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
959 /*** download progress ***/
962 background-color: #000000;
964 border: 1px solid #FF9F00;
970 .download-progress[mode="undetermined"] {
971 border-color: #A09090;
974 .download-progress .start-cap,
975 .download-progress[complete] .end-cap,
976 .download-progress[mode="undetermined"] .end-cap,
977 .download-progress .progress .progress-bar {
978 background-color: #008484;
981 .download-progress .progress .progress-bar {
982 border-left-width: 0;
983 border-right-width: 0;
987 .download-progress .progress {
988 background-color: transparent;
994 .download-progress .start-cap, .download-progress .end-cap {
998 .download-progress .start-cap:-moz-locale-dir(ltr),
999 .download-progress .end-cap:-moz-locale-dir(rtl) {
1000 border-radius: 1px 0 0 1px;
1003 .download-progress .end-cap:-moz-locale-dir(ltr),
1004 .download-progress .start-cap:-moz-locale-dir(rtl) {
1005 border-radius: 0 1px 1px 0;
1008 .download-progress .cancel {
1009 -moz-appearance: none;
1010 background-color: #8050B0;
1011 border: 1px solid #9C9CFF;
1019 .download-progress .cancel .button-box {
1024 .download-progress .cancel .button-text {
1028 .download-progress .cancel .button-icon {
1029 margin-inline-start: 0;
1032 .download-progress .cancel {
1033 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
1036 .download-progress .status-container {
1037 -moz-box-align: center;
1040 .download-progress .status {
1041 /* text-shadow: #FFF 0 0 2px; */
1044 /*** install status ***/
1047 -moz-box-align: center;
1051 /*** check for updates ***/
1053 #updates-container {
1054 -moz-box-align: center;
1057 #updates-container .button-link {
1062 #updates-downloaded {
1073 .addon-control[disabled="true"]:not(.no-auto-hide) {
1077 .no-auto-hide .addon-control {
1078 display: block !important;
1081 button.button-link {
1082 background: transparent;
1084 text-decoration: underline;
1091 /* Needed to override normal button style from inContent.css */
1092 button.button-link:not([disabled="true"]):active:hover {
1095 /*** telemetry experiments ***/
1097 #detail-experiment-container {
1102 #detail-experiment-bullet-container,
1103 #detail-experiment-state,
1104 #detail-experiment-time,
1105 .experiment-bullet-container,
1108 vertical-align: middle;
1109 display: inline-block;
1112 .addon .experiment-bullet,
1113 #detail-experiment-bullet {
1117 .addon[active="true"] .experiment-bullet,
1118 #detail-view[active="true"] #detail-experiment-bullet {
1122 /*** info UI for add-ons that have been disabled for being unsigned ***/
1124 #show-disabled-unsigned-extensions:not(:hover) {
1125 background-color: #FF0000;
1128 #disabled-unsigned-addons-info {
1134 #disabled-unsigned-addons-heading {
1137 margin-bottom: .5em;