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");
8 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
12 -moz-border-start: none;
15 #back-btn:-moz-locale-dir(ltr),
16 #forward-btn:-moz-locale-dir(rtl) {
17 -moz-image-region: rect(42px 25px 63px 0px);
20 #back-btn[disabled="true"]:-moz-locale-dir(ltr),
21 #forward-btn[disabled="true"]:-moz-locale-dir(rtl) {
22 -moz-image-region: rect(42px 50px 63px 25px);
25 #back-btn:-moz-locale-dir(rtl),
26 #forward-btn:-moz-locale-dir(ltr) {
27 -moz-image-region: rect(63px 25px 84px 0px);
30 #back-btn[disabled="true"]:-moz-locale-dir(rtl),
31 #forward-btn[disabled="true"]:-moz-locale-dir(ltr) {
32 -moz-image-region: rect(63px 50px 84px 25px);
36 /*** global warnings ***/
38 .global-warning-container {
43 -moz-box-align: center;
49 #addons-page[warning] .global-warning-container {
50 background-color: #FFCF00;
53 #detail-view .global-warning {
55 border-bottom: 3px solid #000000;
58 @media (max-width: 600px) {
59 .global-warning-text {
63 .global-warning .warning-icon {
64 /* background-color: #FFF;
65 box-shadow: 0px 0px 2px 5px #FFF;
66 border-radius: 10px; */
70 /*** global informations ***/
71 #addons-page .global-info-container {
72 background-color: #9C9CFF;
73 border-top-right-radius: 5px;
74 border-top-left-radius: 5px;
77 /* Plugins aren't yet disabled by safemode (bug 342333),
78 so don't show that warning when viewing plugins. */
79 #addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container,
80 #addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning-container {
81 background-color: inherit;
82 background-image: none;
86 /*** notification icons ***/
89 list-style-image: url("chrome://global/skin/icons/warning-16.png");
96 list-style-image: url("chrome://global/skin/icons/error-16.png");
104 list-style-image: url("chrome://global/skin/icons/information-16.png");
110 .addon-view[pending="disable"] .pending-icon,
111 .addon-view[pending="uninstall"] .pending-icon {
112 list-style-image: url("chrome://global/skin/icons/warning-16.png");
119 /*** view alert boxes ***/
122 -moz-box-align: center;
125 .alert-spacer-before {
129 .alert-spacer-after {
134 -moz-box-align: center;
137 border: 1px solid #9C9CFF;
139 background-color: #000000;
140 background-clip: padding-box;
143 .alert .alert-title {
154 list-style-image: url("chrome://global/skin/icons/loading.gif");
160 /*** category selector ***/
163 -moz-appearance: none;
165 -moz-margin-end: -1px;
166 background-color: transparent;
172 background-color: transparent;
178 border-color: transparent;
179 -moz-box-align: center;
183 .category:-moz-locale-dir(ltr) {
184 border-top-left-radius: 5px;
185 border-bottom-left-radius: 5px;
188 .category:-moz-locale-dir(rtl) {
189 border-top-right-radius: 5px;
190 border-bottom-right-radius: 5px;
193 .category[disabled] {
198 transition-property: height, opacity;
199 transition-duration: 1s, 0.8s;
202 .category:not([disabled]) {
204 transition-property: height, opacity;
205 transition-duration: 1s, 0.8s;
208 .category[selected] {
209 background-color: #008484;
211 border-color: #9C9CFF;
218 /* Maximize the size of the viewport when the window is small */
219 @media (max-width: 800px) {
226 background-color: #E7ADE7;
229 border-radius: 10000px;
235 .category-badge[value="0"] {
242 -moz-margin-start: 6px;
245 #category-search > .category-icon {
246 list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
248 #category-discover > .category-icon {
249 list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
251 #category-locale > .category-icon {
252 list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
254 #category-searchengine > .category-icon {
255 list-style-image: url("chrome://mozapps/skin/extensions/category-searchengines.png");
257 #category-extension > .category-icon {
258 list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
260 #category-service > .category-icon {
261 list-style-image: url("chrome://mozapps/skin/extensions/category-service.png");
263 #category-theme > .category-icon {
264 list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
266 #category-plugin > .category-icon {
267 list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
269 #category-dictionary > .category-icon {
270 list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png");
272 #category-experiment > .category-icon {
273 list-style-image: url("chrome://mozapps/skin/extensions/category-experiments.png");
275 #category-availableUpdates > .category-icon {
276 list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
278 #category-recentUpdates > .category-icon {
279 list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
292 border: 1px solid #9C9CFF;
295 background-color: #000000;
299 #header-search .textbox-input::-moz-placeholder {
303 #header-search[focused] {
304 border-color: #008484;
307 @media (max-width: 600px) {
314 list-style-image: url("chrome://mozapps/skin/extensions/utilities.png");
315 -moz-margin-end: 16px;
318 #header-utils-btn:hover,
319 #header-utils-btn:hover:active,
320 #header-utils-btn[open="true"] {
321 list-style-image: url("chrome://mozapps/skin/extensions/utilities-hover.png");
324 #header-utils-btn > .button-box > .button-menu-dropmarker {
326 background: transparent;
329 #header-utils-btn:hover > .button-box > .button-menu-dropmarker {
330 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
334 background-color: #9C9CFF;
346 -moz-appearance: none;
347 border-right: 3px solid #000000;
351 -moz-appearance: none;
353 border-left: 3px solid #000000;
354 background-color: transparent;
358 -moz-padding-start: 6px;
359 -moz-padding-end: 3px;
361 min-width: 12px !important;
362 -moz-box-direction: reverse;
365 background-color: #FFCF00;
369 .sorter .button-box {
374 .sorter[checkState="1"],
375 .sorter[checkState="2"] {
376 background-color: #008484;
380 .sorter[checkState="1"] {
381 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
384 .sorter[checkState="2"] {
385 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
388 .sorter .button-icon {
389 -moz-margin-start: 4px;
393 /*** discover view ***/
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 -moz-margin-end: 15px;
413 /* font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif; */
417 .discover-description {
432 background-color: transparent;
436 border-bottom: 1px solid #9C9CFF;
438 background-origin: border-box;
444 -moz-margin-start: 10px;
451 -moz-box-align: center;
452 -moz-box-pack: center;
456 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
461 .addon[active="false"] .icon {
462 filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
465 .addon-view[type="theme"] .icon {
466 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
469 .addon-view[type="locale"] .icon {
470 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
473 .addon-view[type="plugin"] .icon {
474 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
477 .addon-view[type="dictionary"] .icon {
478 list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
481 .addon-view[type="experiment"] .icon {
482 list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png");
498 .creator .text-link {
499 /* color: #0066CC; */
502 .description-container {
503 -moz-margin-start: 6px;
504 -moz-box-align: center;
515 -moz-margin-start: 48px;
517 -moz-box-align: center;
521 .basicinfo-container {
522 -moz-box-align: start;
525 .addon[status="installing"] > .content-container {
526 -moz-box-align: stretch;
529 .advancedinfo-container,
530 .update-info-container {
531 -moz-box-align: center;
538 .install-status-container {
543 .name-outer-container {
544 -moz-box-pack: center;
547 .relnotes-toggle-container,
548 .icon-outer-container {
549 -moz-box-pack: start;
557 .addon-view .warning {
565 .addon-view .pending {
569 .addon-view[pending="disable"] .pending,
570 .addon-view[pending="uninstall"] .pending {
574 .addon .relnotes-container {
575 -moz-box-align: start;
576 -moz-margin-start: 6px;
580 transition-property: height, opacity;
581 transition-duration: 0.5s, 0.5s;
584 .addon[show-relnotes] .relnotes-container {
586 transition-property: height, opacity;
587 transition-duration: 0.5s, 0.5s;
590 .addon .relnotes-header {
595 .addon .relnotes-toggle {
597 background: transparent;
599 -moz-box-direction: reverse;
601 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
604 .addon .relnotes-toggle > .button-box > .button-icon {
605 -moz-padding-start: 4px;
608 .addon[show-relnotes] .relnotes-toggle {
609 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
612 .addon[active="false"] {
613 background-color: #8050B0;
617 .addon-view[active="false"] .name-container {
622 .addon-view[notification="warning"] {
623 background-color : #FFCF00;
627 .addon-view[notification="warning"] .warning {
631 .addon-view[notification="warning"] .name-container {
635 .addon-view[notification="error"] {
636 background-color: #FF0000;
640 .addon-view[notification="error"] .error {
644 .addon-view[notification="info"] {
645 background-color: #9C9CFF;
649 .addon-view[pending="enable"],
650 .addon-view[pending="upgrade"],
651 .addon-view[pending="install"] {
652 background-color: #008484;
655 .addon-view[pending="enable"] .pending,
656 .addon-view[pending="upgrade"] .pending,
657 .addon-view[pending="install"] .pending {
661 .addon-view[pending="disable"],
662 .addon-view[pending="uninstall"] {
667 /*** item - uninstalled ***/
669 .addon[status="uninstalled"] {
673 .addon[status="uninstalled"] > .container {
674 -moz-box-align: center;
676 background-color: #8050B0;
681 .addon[status="uninstalled"][selected] {
682 background-color: transparent;
686 background-color: #008484;
690 .addon[selected] .name-container {
694 .addon[active="false"][selected] {
698 .addon[active="false"][selected] .name-container {
703 /*** search view ***/
707 -moz-box-align: center;
708 background-color: #000000;
710 border-bottom: 1px solid #9C9CFF;
714 #search-filter-label {
719 .search-filter-radio {
722 border-radius: 10000px;
725 .search-filter-radio[selected] {
726 background-color: #008484;
730 .search-filter-radio .radio-check-box1 {
734 .search-filter-radio .radio-icon {
738 #search-allresults-link {
743 /*** detail view ***/
745 #detail-view .loading {
749 #detail-view[loading-extended] .loading {
751 transition-property: opacity;
752 transition-duration: 1s;
755 .detail-view-container {
756 padding: 0 2em 2em 2em;
760 #detail-notifications {
765 #detail-notifications .warning,
766 #detail-notifications .pending,
767 #detail-notifications .error {
768 -moz-margin-start: 0;
771 #detail-icon-container {
773 -moz-margin-end: 10px;
786 #detail-name-container {
791 -moz-margin-end: 2em;
796 #detail-screenshot[loading] {
797 background-image: url("chrome://communicator/skin/brand/throbber-anim.png");
798 background-position: 50% 50%;
799 background-repeat: no-repeat;
802 #detail-screenshot[loading="error"] {
803 background-image: url("chrome://global/skin/icons/alert-error.gif");
806 #detail-desc-container {
810 #detail-desc, #detail-fulldesc {
811 -moz-margin-start: 6px;
812 white-space: pre-wrap;
813 /* This is necessary to fix layout issues with multi-line descriptions, see
815 outline: solid transparent;
823 #detail-contributions {
825 border: 1px solid #9C9CFF;
828 background-color: #FFCF00;
831 #detail-contrib-description {
837 #detail-contrib-suggested {
842 #detail-contrib-btn {
843 list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
846 #detail-contrib-btn .button-icon {
847 -moz-margin-end: 3px;
855 #detail-grid > columns > column:first-child {
859 .detail-row[first-row="true"],
860 .detail-row-complex[first-row="true"],
861 setting[first-row="true"] {
868 border-top: 1px solid #9C9CFF;
869 -moz-box-align: center;
877 #detail-view[active="false"]:not([pending]):not([notification]) {
878 /* background-color: foo; */
881 setting[first-row="true"] {
886 -moz-box-align: start;
889 .preferences-alignment {
891 -moz-box-align: center;
894 .preferences-description {
898 -moz-margin-start: 2em;
899 white-space: pre-wrap;
902 .preferences-description:empty {
906 setting[type="radio"] > radiogroup {
907 -moz-box-orient: horizontal;
910 menulist { /* Fixes some styling inconsistencies */
911 margin: 1px 5px 2px 5px;
920 .creator > .text-link {
933 .meta-rating > .star {
934 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
938 .meta-rating > .star[on="true"] {
939 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
943 /*** download progress ***/
946 background-color: #000000;
947 border-radius: 10000px;
948 border: 1px solid #FF9F00;
954 .download-progress[mode="undetermined"] .status-container {
958 .download-progress .start-cap,
959 .download-progress[complete] .end-cap,
960 .download-progress[mode="undetermined"] .end-cap,
961 .download-progress .progress .progress-bar {
962 background-color: #008484;
965 .download-progress .progress .progress-bar {
966 border-left-width: 0;
967 border-right-width: 0;
971 .download-progress .progress {
972 background-color: transparent;
978 .download-progress .start-cap, .download-progress .end-cap {
982 .download-progress .start-cap:-moz-locale-dir(ltr),
983 .download-progress .end-cap:-moz-locale-dir(rtl) {
984 border-radius: 3px 0 0 3px;
987 .download-progress .end-cap:-moz-locale-dir(ltr),
988 .download-progress .start-cap:-moz-locale-dir(rtl) {
989 border-radius: 0 3px 3px 0;
992 .download-progress .cancel {
993 -moz-appearance: none;
994 background-color: #8050B0;
995 border: 1px solid #9C9CFF;
1002 .download-progress .cancel .button-box {
1007 .download-progress .cancel .button-text {
1011 .download-progress .cancel .button-icon {
1012 -moz-margin-start: 0;
1015 .download-progress .cancel {
1016 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
1019 .download-progress .status-container {
1020 -moz-box-align: center;
1023 .download-progress .status {
1024 /* text-shadow: #FFF 0 0 2px; */
1027 /*** install status ***/
1030 -moz-box-align: center;
1034 /*** check for updates ***/
1036 #updates-container {
1037 -moz-box-align: center;
1040 #updates-container .button-link {
1045 #updates-downloaded {
1056 .addon-control[disabled="true"] {
1060 button.button-link {
1061 background: transparent;
1063 text-decoration: underline;
1070 /* Needed to override normal button style from inContent.css */
1071 button.button-link:not([disabled="true"]):active:hover {
1074 /*** telemetry experiments ***/
1076 #detail-experiment-container {
1081 #detail-experiment-bullet-container,
1082 #detail-experiment-state,
1083 #detail-experiment-time,
1084 .experiment-bullet-container,
1087 vertical-align: middle;
1088 display: inline-block;
1091 .addon .experiment-bullet,
1092 #detail-experiment-bullet {
1096 .addon[active="true"] .experiment-bullet,
1097 #detail-view[active="true"] #detail-experiment-bullet {