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/inContentUI.css");
13 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
17 -moz-border-start: none;
20 #back-btn:-moz-locale-dir(ltr),
21 #forward-btn:-moz-locale-dir(rtl) {
22 -moz-image-region: rect(42px 25px 63px 0px);
25 #back-btn[disabled="true"]:-moz-locale-dir(ltr),
26 #forward-btn[disabled="true"]:-moz-locale-dir(rtl) {
27 -moz-image-region: rect(42px 50px 63px 25px);
30 #back-btn:-moz-locale-dir(rtl),
31 #forward-btn:-moz-locale-dir(ltr) {
32 -moz-image-region: rect(63px 25px 84px 0px);
35 #back-btn[disabled="true"]:-moz-locale-dir(rtl),
36 #forward-btn[disabled="true"]:-moz-locale-dir(ltr) {
37 -moz-image-region: rect(63px 50px 84px 25px);
41 /*** global warnings ***/
43 .global-warning-container {
48 -moz-box-align: center;
54 #addons-page[warning] .global-warning-container {
55 background-color: #FFCF00;
58 #detail-view .global-warning {
60 border-bottom: 3px solid #000000;
63 @media (max-width: 600px) {
64 .global-warning-text {
68 .global-warning .warning-icon {
69 /* background-color: #FFF;
70 box-shadow: 0px 0px 2px 5px #FFF;
71 border-radius: 10px; */
75 /*** global informations ***/
76 #addons-page .global-info-container {
77 background-color: #9C9CFF;
78 border-top-right-radius: 5px;
79 border-top-left-radius: 5px;
82 /* Plugins aren't yet disabled by safemode (bug 342333),
83 so don't show that warning when viewing plugins. */
84 #addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container,
85 #addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning-container {
86 background-color: inherit;
87 background-image: none;
91 /*** notification icons ***/
94 list-style-image: url("chrome://global/skin/icons/warning-16.png");
101 list-style-image: url("chrome://global/skin/icons/error-16.png");
109 list-style-image: url("chrome://global/skin/icons/information-16.png");
115 .addon-view[pending="disable"] .pending-icon,
116 .addon-view[pending="uninstall"] .pending-icon {
117 list-style-image: url("chrome://global/skin/icons/warning-16.png");
124 /*** view alert boxes ***/
127 -moz-box-align: center;
130 .alert-spacer-before {
134 .alert-spacer-after {
139 -moz-box-align: center;
142 border: 1px solid #9C9CFF;
144 background-color: #000000;
145 background-clip: padding-box;
148 .alert .alert-title {
159 list-style-image: url("chrome://global/skin/icons/loading.gif");
165 /*** category selector ***/
168 background-color: #A09090;
176 background-color: #000000;
180 -moz-box-align: center;
184 .category:not([disabled]):hover {
185 background-color: #FFCF00;
189 .category[disabled] {
194 transition-property: height, opacity;
195 transition-duration: 1s, 0.8s;
198 .category:not([disabled]) {
200 transition-property: height, opacity;
201 transition-duration: 1s, 0.8s;
204 .category[selected] {
205 background-color: #008484;
213 /* Maximize the size of the viewport when the window is small */
214 @media (max-width: 800px) {
221 background-color: #E7ADE7;
224 border-radius: 10000px;
230 .category-badge[value="0"] {
237 -moz-margin-start: 6px;
240 #category-search > .category-icon {
241 list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
243 #category-discover > .category-icon {
244 list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
246 #category-locale > .category-icon {
247 list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
249 #category-searchengine > .category-icon {
250 list-style-image: url("chrome://mozapps/skin/extensions/category-searchengines.png");
252 #category-extension > .category-icon {
253 list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
255 #category-service > .category-icon {
256 list-style-image: url("chrome://mozapps/skin/extensions/category-service.png");
258 #category-theme > .category-icon {
259 list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
261 #category-plugin > .category-icon {
262 list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
264 #category-dictionary > .category-icon {
265 list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png");
267 #category-experiment > .category-icon {
268 list-style-image: url("chrome://mozapps/skin/extensions/category-experiments.png");
270 #category-availableUpdates > .category-icon {
271 list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
273 #category-recentUpdates > .category-icon {
274 list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
277 /*** main content ***/
279 #addons-page > hbox {
280 /* This applied both to the header and the box surrounding the main content. */
281 background-color: #A09090;
285 background-color: #000000;
287 border-top: 3px solid #000000;
288 -moz-border-start: 3px solid #000000;
289 border-radius: 1em 0 0 0;
297 border-radius: 1em 0 0 0;
302 border: 1px solid #9C9CFF;
304 background-color: #000000;
308 #header-search .textbox-input::-moz-placeholder {
312 #header-search[focused] {
313 border-color: #008484;
316 @media (max-width: 600px) {
323 list-style-image: url("chrome://mozapps/skin/extensions/utilities.png");
324 -moz-margin-end: 16px;
327 #header-utils-btn:hover,
328 #header-utils-btn:hover:active,
329 #header-utils-btn[open="true"] {
330 list-style-image: url("chrome://mozapps/skin/extensions/utilities-hover.png");
333 #header-utils-btn > .button-box > .button-menu-dropmarker {
335 background: transparent;
338 #header-utils-btn:hover > .button-box > .button-menu-dropmarker {
339 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
343 background-color: #9C9CFF;
355 -moz-appearance: none;
356 border-right: 3px solid #000000;
360 -moz-appearance: none;
362 border-left: 3px solid #000000;
363 background-color: transparent;
367 -moz-padding-start: 6px;
368 -moz-padding-end: 3px;
370 min-width: 12px !important;
371 -moz-box-direction: reverse;
374 background-color: #FFCF00;
378 .sorter .button-box {
383 .sorter[checkState="1"],
384 .sorter[checkState="2"] {
385 background-color: #008484;
389 .sorter[checkState="1"] {
390 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
393 .sorter[checkState="2"] {
394 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
397 .sorter .button-icon {
398 -moz-margin-start: 4px;
402 /*** discover view ***/
404 .discover-spacer-before,
405 .discover-spacer-after {
409 #discover-error .alert {
415 list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png");
416 -moz-margin-end: 15px;
422 /* font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif; */
426 .discover-description {
441 background-color: transparent;
445 border-bottom: 1px solid #9C9CFF;
447 background-origin: border-box;
453 -moz-margin-start: 10px;
460 -moz-box-align: center;
461 -moz-box-pack: center;
465 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
470 .addon[active="false"] .icon {
471 filter: grayscale(1);
474 .addon-view[type="theme"] .icon {
475 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
478 .addon-view[type="locale"] .icon {
479 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
482 .addon-view[type="plugin"] .icon {
483 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
486 .addon-view[type="dictionary"] .icon {
487 list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
490 .addon-view[type="experiment"] .icon {
491 list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png");
507 .creator .text-link {
508 /* color: #0066CC; */
511 .description-container {
512 -moz-margin-start: 6px;
513 -moz-box-align: center;
524 -moz-margin-start: 48px;
526 -moz-box-align: center;
530 .basicinfo-container {
531 -moz-box-align: start;
534 .addon[status="installing"] > .content-container {
535 -moz-box-align: stretch;
538 .advancedinfo-container,
539 .update-info-container {
540 -moz-box-align: center;
547 .install-status-container {
552 .name-outer-container {
553 -moz-box-pack: center;
556 .relnotes-toggle-container,
557 .icon-outer-container {
558 -moz-box-pack: start;
566 .addon-view .warning {
574 .addon-view .pending {
578 .addon-view[pending="disable"] .pending,
579 .addon-view[pending="uninstall"] .pending {
583 .addon .relnotes-container {
584 -moz-box-align: start;
585 -moz-margin-start: 6px;
589 transition-property: height, opacity;
590 transition-duration: 0.5s, 0.5s;
593 .addon[show-relnotes] .relnotes-container {
595 transition-property: height, opacity;
596 transition-duration: 0.5s, 0.5s;
599 .addon .relnotes-header {
604 .addon .relnotes-toggle {
606 background: transparent;
608 -moz-box-direction: reverse;
610 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
613 .addon .relnotes-toggle > .button-box > .button-icon {
614 -moz-padding-start: 4px;
617 .addon[show-relnotes] .relnotes-toggle {
618 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
621 .addon[active="false"] {
622 background-color: #8050B0;
626 .addon-view[active="false"] .name-container {
631 .addon-view[notification="warning"] {
632 background-color : #FFCF00;
636 .addon-view[notification="warning"] .warning {
640 .addon-view[notification="warning"] .name-container {
644 .addon-view[notification="error"] {
645 background-color: #FF0000;
649 .addon-view[notification="error"] .error {
653 .addon-view[notification="info"] {
654 background-color: #9C9CFF;
658 .addon-view[pending="enable"],
659 .addon-view[pending="upgrade"],
660 .addon-view[pending="install"] {
661 background-color: #008484;
664 .addon-view[pending="enable"] .pending,
665 .addon-view[pending="upgrade"] .pending,
666 .addon-view[pending="install"] .pending {
670 .addon-view[pending="disable"],
671 .addon-view[pending="uninstall"] {
676 /*** item - uninstalled ***/
678 .addon[status="uninstalled"] {
682 .addon[status="uninstalled"] > .container {
683 -moz-box-align: center;
685 background-color: #8050B0;
690 .addon[status="uninstalled"][selected] {
691 background-color: transparent;
695 background-color: #008484;
699 .addon[selected] .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 {
728 .search-filter-radio {
731 border-radius: 10000px;
734 .search-filter-radio[selected] {
735 background-color: #008484;
739 .search-filter-radio .radio-check-box1 {
743 .search-filter-radio .radio-icon {
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 -moz-margin-start: 0;
780 #detail-icon-container {
782 -moz-margin-end: 10px;
795 #detail-name-container {
800 -moz-margin-end: 2em;
805 #detail-screenshot[loading] {
806 background-image: url("chrome://communicator/skin/brand/throbber-anim.png");
807 background-position: 50% 50%;
808 background-repeat: no-repeat;
811 #detail-screenshot[loading="error"] {
812 background-image: url("chrome://global/skin/icons/alert-error.gif");
815 #detail-desc-container {
819 #detail-desc, #detail-fulldesc {
820 -moz-margin-start: 6px;
821 white-space: pre-wrap;
822 /* This is necessary to fix layout issues with multi-line descriptions, see
824 outline: solid transparent;
832 #detail-contributions {
834 border: 1px solid #9C9CFF;
837 background-color: #FFCF00;
840 #detail-contrib-description {
846 #detail-contrib-suggested {
851 #detail-contrib-btn {
852 list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
855 #detail-contrib-btn .button-icon {
856 -moz-margin-end: 3px;
864 #detail-grid > columns > column:first-child {
868 .detail-row[first-row="true"],
869 .detail-row-complex[first-row="true"],
870 setting[first-row="true"] {
877 border-top: 1px solid #9C9CFF;
878 -moz-box-align: center;
886 #detail-view[active="false"]:not([pending]):not([notification]) {
887 /* background-color: foo; */
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;
919 menulist { /* Fixes some styling inconsistencies */
920 margin: 1px 5px 2px 5px;
929 .creator > .text-link {
942 .meta-rating > .star {
943 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
947 .meta-rating > .star[on="true"] {
948 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
952 /*** download progress ***/
955 background-color: #000000;
956 border-radius: 10000px;
957 border: 1px solid #FF9F00;
963 .download-progress[mode="undetermined"] .status-container {
967 .download-progress .start-cap,
968 .download-progress[complete] .end-cap,
969 .download-progress[mode="undetermined"] .end-cap,
970 .download-progress .progress .progress-bar {
971 background-color: #008484;
974 .download-progress .progress .progress-bar {
975 border-left-width: 0;
976 border-right-width: 0;
980 .download-progress .progress {
981 background-color: transparent;
987 .download-progress .start-cap, .download-progress .end-cap {
991 .download-progress .start-cap:-moz-locale-dir(ltr),
992 .download-progress .end-cap:-moz-locale-dir(rtl) {
993 border-radius: 3px 0 0 3px;
996 .download-progress .end-cap:-moz-locale-dir(ltr),
997 .download-progress .start-cap:-moz-locale-dir(rtl) {
998 border-radius: 0 3px 3px 0;
1001 .download-progress .cancel {
1002 -moz-appearance: none;
1003 background-color: #8050B0;
1004 border: 1px solid #9C9CFF;
1011 .download-progress .cancel .button-box {
1016 .download-progress .cancel .button-text {
1020 .download-progress .cancel .button-icon {
1021 -moz-margin-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 {