toolkit/themes/osx/mozapps/extensions/extensions.css@6474c204b198
toolkit/themes/osx/mozapps/extensions/extensions.css
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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");
7 %include ../../global/shared.inc
9 @namespace html url("http://www.w3.org/1999/xhtml");
12 /*** global warnings ***/
14 .global-warning-container {
15 overflow-x: hidden;
16 }
18 .global-warning {
19 -moz-box-align: center;
20 padding: 0 8px;
21 color: #916D15;
22 font-weight: bold;
23 }
25 .global-warning,
26 .global-warning .button-link {
27 text-shadow: @loweredShadow@;
28 }
30 #addons-page[warning] .global-warning-container {
31 background-color: rgba(255, 255, 0, 0.1);
32 background-image: url("chrome://mozapps/skin/extensions/stripes-warning.png");
33 background-repeat: repeat-x;
34 }
36 #detail-view .global-warning {
37 padding: 4px 12px;
38 min-height: 31px;
39 border-bottom: 1px solid rgba(50, 65, 92, 0.4);
40 }
42 @media (max-width: 600px) {
43 .global-warning-text {
44 display: none;
45 }
47 .global-warning .warning-icon {
48 background-color: rgba(255, 255, 255, 0.7);
49 box-shadow: 0px 0px 2px 4px rgba(255, 255, 255, 0.7);
50 border-radius: 10px;
51 }
52 }
54 /*** global informations ***/
55 #addons-page .global-info-container {
56 background-color: #e3e6eb;
57 border-top-right-radius: 5px;
58 border-top-left-radius: 5px;
59 }
61 /* Plugins aren't yet disabled by safemode (bug 342333),
62 so don't show that warning when viewing plugins. */
63 #addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container,
64 #addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning-container {
65 background-color: inherit;
66 background-image: none;
67 }
70 /*** notification icons ***/
72 .warning-icon {
73 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.png");
74 width: 16px;
75 height: 15px;
76 margin: 3px 0;
77 }
79 .error-icon {
80 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-error.png");
81 width: 16px;
82 height: 15px;
83 margin: 3px 0;
84 }
86 .pending-icon,
87 .info-icon {
88 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-positive.png");
89 width: 16px;
90 height: 15px;
91 margin: 3px 0;
92 }
94 .addon-view[pending="disable"] .pending-icon,
95 .addon-view[pending="uninstall"] .pending-icon {
96 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
97 width: 16px;
98 height: 15px;
99 margin: 3px 0;
100 }
103 /*** view alert boxes ***/
105 .alert-container {
106 -moz-box-align: center;
107 }
109 .alert-spacer-before {
110 -moz-box-flex: 1;
111 }
113 .alert-spacer-after {
114 -moz-box-flex: 3;
115 }
117 .alert {
118 -moz-box-align: center;
119 padding: 10px;
120 color: #373D48;
121 font-size: 12px;
122 border: 1px solid #A8B8D1;
123 border-radius: 8px;
124 background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(236, 241, 247, 0.7));
125 background-clip: padding-box;
126 box-shadow: 0 -3px 0 rgba(58, 78, 103, 0.05) inset,
127 0 3px 0 rgba(175, 195, 220, 0.3);
128 }
130 .alert .alert-title {
131 font-weight: bold;
132 font-size: 200%;
133 margin-bottom: 15px;
134 }
136 .alert button {
137 margin: 1em 2em;
138 }
140 .loading {
141 list-style-image: url("chrome://global/skin/icons/loading_16.png");
142 padding-left: 20px;
143 padding-right: 20px;
144 }
148 /*** category selector ***/
150 #categories {
151 -moz-appearance: none;
152 border: none;
153 -moz-margin-end: -1px;
154 background-color: transparent;
155 position: relative;
156 margin-top: 31px;
157 }
159 .category {
160 -moz-appearance: none;
161 color: #252F3B;
162 border-width: 1px;
163 border-style: solid;
164 border-color: transparent;
165 padding: 10px 4px;
166 -moz-box-align: center;
167 overflow: hidden;
168 min-height: 0;
169 }
171 .category:-moz-locale-dir(ltr) {
172 border-top-left-radius: 5px;
173 border-bottom-left-radius: 5px;
174 }
176 .category:-moz-locale-dir(rtl) {
177 border-top-right-radius: 5px;
178 border-bottom-right-radius: 5px;
179 }
181 .category[disabled] {
182 border-top: 0;
183 border-bottom: 0;
184 height: 0;
185 opacity: 0;
186 transition-property: height, opacity;
187 transition-duration: 1s, 0.8s;
188 }
190 .category:not([disabled]) {
191 height: 52px;
192 transition-property: height, opacity;
193 transition-duration: 1s, 0.8s;
194 }
196 .category[selected] {
197 background-color: rgba(255, 255, 255, 0.35);
198 color: -moz-dialogtext;
199 border-color: rgba(50, 65, 92, 0.4);
200 -moz-border-end-color: #C9CFD7;
201 }
203 .category-name {
204 font-size: 150%;
205 }
207 /* Maximize the size of the viewport when the window is small */
208 @media (max-width: 800px) {
209 .category-name {
210 display: none;
211 }
212 }
214 .category-badge {
215 background-color: #55D4FF;
216 padding: 2px 8px;
217 margin: 6px 0;
218 border-radius: 10000px;
219 color: #FFF;
220 font-weight: bold;
221 text-align: center;
222 }
224 .category-badge[value="0"] {
225 visibility: hidden;
226 }
228 .category-icon {
229 width: 32px;
230 height: 32px;
231 -moz-margin-start: 6px;
232 }
234 #category-search > .category-icon {
235 list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
236 }
237 #category-discover > .category-icon {
238 list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
239 }
240 #category-locale > .category-icon {
241 list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
242 }
243 #category-searchengine > .category-icon {
244 list-style-image: url("chrome://mozapps/skin/extensions/category-searchengines.png");
245 }
246 #category-extension > .category-icon {
247 list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
248 }
249 #category-service > .category-icon {
250 list-style-image: url("chrome://mozapps/skin/extensions/category-service.png");
251 }
252 #category-theme > .category-icon {
253 list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
254 }
255 #category-plugin > .category-icon {
256 list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
257 }
258 #category-dictionary > .category-icon {
259 list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png");
260 }
261 #category-experiment > .category-icon {
262 list-style-image: url("chrome://mozapps/skin/extensions/category-experiments.png");
263 }
264 #category-availableUpdates > .category-icon {
265 list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
266 }
267 #category-recentUpdates > .category-icon {
268 list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
269 }
272 /*** header ***/
274 #header {
275 margin-bottom: 18px;
276 }
278 .nav-button {
279 list-style-image: url(chrome://mozapps/skin/extensions/navigation.png);
280 }
282 #back-btn:-moz-locale-dir(ltr),
283 #forward-btn:-moz-locale-dir(rtl) {
284 border-top-right-radius: 0;
285 border-bottom-right-radius: 0;
286 border-right: none;
287 -moz-image-region: rect(0, 20px, 20px, 0);
288 padding-right: 3px;
289 }
291 #back-btn:-moz-locale-dir(rtl),
292 #forward-btn:-moz-locale-dir(ltr) {
293 border-top-left-radius: 0;
294 border-bottom-left-radius: 0;
295 -moz-image-region: rect(0, 40px, 20px, 20px);
296 padding-left: 3px;
297 }
299 #header-utils-btn {
300 list-style-image: url("chrome://mozapps/skin/extensions/utilities.png");
301 -moz-margin-end: 18px;
302 }
304 #header-utils-btn > .toolbarbutton-menu-dropmarker {
305 list-style-image: url("chrome://mozapps/skin/extensions/toolbarbutton-dropmarker.png");
306 padding: 0;
307 -moz-margin-start: 2px;
308 }
310 #header-search {
311 margin: 0;
312 -moz-appearance: none;
313 padding: 3px 5px 2px;
314 border: 1px solid rgba(60,73,97,0.5);
315 border-radius: 10000px;
316 box-shadow: inset 0 1px 1px rgba(0,0,0,0.15), 0 1px rgba(255,255,255,0.25);
317 background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.3));
318 background-clip: padding-box;
319 }
321 @media (max-width: 600px) {
322 #header-search {
323 width: 12em;
324 }
325 }
327 #header-search[focused] {
328 box-shadow: @focusRingShadow@, inset 0 1px 1px rgba(0,0,0,0.15);
329 border-color: -moz-mac-focusring;
330 }
332 #header-search > .textbox-input-box {
333 -moz-padding-start: 15px;
334 background: url("chrome://mozapps/skin/extensions/search.png") left no-repeat;
335 }
337 #header-search > .textbox-input-box:-moz-locale-dir(rtl) {
338 background-position: right;
339 }
341 #header-search > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
342 color: #5C6470;
343 opacity: 1.0;
344 }
346 .view-header {
347 padding: 4px;
348 margin: 0;
349 min-height: 31px;
350 border-bottom: 1px solid rgba(50, 65, 92, 0.4);
351 background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
352 }
355 /*** sorters ***/
357 .sort-controls {
358 -moz-appearance: none;
359 }
361 .sorter {
362 -moz-appearance: none;
363 border: none;
364 color: #41434B;
365 background-color: transparent;
366 border-radius: 10000px;
367 padding: 0 6px;
368 margin: 0 6px;
369 min-width: 12px !important;
370 -moz-box-direction: reverse;
371 }
373 .sorter[checkState="1"],
374 .sorter[checkState="2"],
375 .sorter:active:hover {
376 text-shadow: @loweredShadow@;
377 background-color: #C0C3CB;
378 box-shadow: inset #A3A6AC 0 1px 1px, @loweredShadow@;
379 }
381 .sorter:hover {
382 text-shadow: @loweredShadow@;
383 background-color: #C0C3CB;
384 }
386 .sorter[checkState="1"] {
387 list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
388 }
390 .sorter[checkState="2"] {
391 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
392 }
394 .sorter .button-icon {
395 -moz-margin-start: 4px;
396 }
399 /*** discover view ***/
401 .discover-spacer-before,
402 .discover-spacer-after {
403 -moz-box-flex: 1;
404 }
406 #discover-error .alert {
407 max-width: 45em;
408 -moz-box-flex: 1;
409 }
411 .discover-logo {
412 list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png");
413 -moz-margin-end: 15px;
414 }
416 .discover-title {
417 font-weight: bold;
418 font-size: 24px;
419 font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif;
420 margin: 0 0 15px 0;
421 }
423 .discover-description {
424 text-align: justify;
425 margin: 0 0 15px 0;
426 }
428 .discover-footer {
429 text-align: justify;
430 }
433 /*** list ***/
435 .list {
436 -moz-appearance: none;
437 margin: 0;
438 border: none;
439 background-color: transparent;
440 }
442 .addon {
443 border-bottom: 1px solid #B6B1B9;
444 padding: 5px;
445 color: #373D48;
446 }
448 .details {
449 cursor: pointer;
450 margin: 0;
451 -moz-margin-start: 10px;
452 }
454 .icon-container {
455 width: 48px;
456 height: 48px;
457 margin: 3px 7px;
458 -moz-box-align: center;
459 -moz-box-pack: center;
460 }
462 .icon {
463 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
464 max-width: 48px;
465 max-height: 48px;
466 }
468 .addon[active="false"] .icon {
469 filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
470 }
472 .addon-view[type="theme"] .icon {
473 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
474 }
476 .addon-view[type="locale"] .icon {
477 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
478 }
480 .addon-view[type="plugin"] .icon {
481 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
482 }
484 .addon-view[type="dictionary"] .icon {
485 list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
486 }
488 .addon-view[type="experiment"] .icon {
489 list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png");
490 }
492 .name-container {
493 font-size: 150%;
494 margin-bottom: 0;
495 font-weight: bold;
496 color: #000;
497 text-shadow: @loweredShadow@;
498 -moz-box-align: end;
499 -moz-box-flex: 1;
500 }
502 .creator {
503 font-weight: bold;
504 }
506 .creator .text-link {
507 color: #0066CC;
508 }
510 .description-container {
511 margin-top: 8px;
512 -moz-margin-start: 6px;
513 -moz-box-align: center;
514 }
516 .description {
517 margin: 0;
518 }
520 .warning,
521 .pending,
522 .error {
523 -moz-margin-start: 48px;
524 font-weight: bold;
525 text-shadow: @loweredShadow@;
526 -moz-box-align: center;
527 }
529 .content-container,
530 .basicinfo-container {
531 -moz-box-align: start;
532 }
534 .addon[status="installing"] > .content-container {
535 -moz-box-align: stretch;
536 }
538 .update-info-container {
539 -moz-box-align: center;
540 }
542 .advancedinfo-container,
543 .update-available {
544 -moz-box-align: end;
545 }
547 .install-status-container {
548 -moz-box-pack: end;
549 -moz-box-align: end;
550 }
552 .name-outer-container {
553 -moz-box-pack: center;
554 }
556 .relnotes-toggle-container,
557 .icon-outer-container {
558 -moz-box-pack: start;
559 }
561 .status-container,
562 .control-container {
563 -moz-box-pack: end;
564 }
566 .addon-view .warning {
567 color: #916D15;
568 }
570 .addon-view .error {
571 color: #864441;
572 }
574 .addon-view .pending {
575 color: #1B7123;
576 }
578 .addon-view[pending="disable"] .pending,
579 .addon-view[pending="uninstall"] .pending {
580 color: #62666E;
581 }
583 .addon-view[notification="warning"] {
584 background-image: linear-gradient(rgba(255, 255, 0, 0.2), rgba(255, 255, 0, 0.1));
585 }
587 .addon-view[notification="error"] {
588 background-image: linear-gradient(rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.1));
589 }
591 .addon-view[notification="info"] {
592 background-image: linear-gradient(rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.1));
593 }
595 .addon-view[pending="enable"],
596 .addon-view[pending="upgrade"],
597 .addon-view[pending="install"] {
598 background-image: linear-gradient(rgba(0, 255, 0, 0.2), rgba(0, 255, 0, 0.1));
599 }
601 .addon-view[pending="disable"],
602 .addon-view[pending="uninstall"] {
603 background-image: linear-gradient(rgba(128, 128, 128, 0.2), rgba(128, 128, 128, 0.1));
604 }
606 .addon .relnotes-container {
607 -moz-box-align: start;
608 height: 0;
609 overflow: hidden;
610 opacity: 0;
611 transition-property: height, opacity;
612 transition-duration: 0.5s, 0.5s;
613 }
615 .addon[show-relnotes] .relnotes-container {
616 opacity: 1;
617 transition-property: height, opacity;
618 transition-duration: 0.5s, 0.5s;
619 }
621 .addon .relnotes-header {
622 font-weight: bold;
623 margin: 10px 0;
624 }
626 .addon .relnotes-toggle {
627 -moz-appearance: none;
628 border: none;
629 background: transparent;
630 font-weight: bold;
631 -moz-box-direction: reverse;
632 cursor: pointer;
633 list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
634 }
636 .addon .relnotes-toggle > .button-box > .button-icon {
637 -moz-padding-start: 4px;
638 }
640 .addon[show-relnotes] .relnotes-toggle {
641 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
642 }
644 .addon[active="false"] {
645 background-color: rgba(135, 135, 135, 0.1);
646 background-image: linear-gradient(rgba(135, 135, 135, 0),
647 rgba(135, 135, 135, 0.1));
648 }
650 .addon-view[active="false"],
651 .addon-view[active="false"] .name-container {
652 color: #686A6B;
653 }
655 .addon-view[notification="warning"] {
656 background-image: url("chrome://mozapps/skin/extensions/stripes-warning.png"),
657 linear-gradient(rgba(255, 255, 0, 0.04),
658 rgba(255, 255, 0, 0));
659 background-repeat: repeat-x;
660 }
662 .addon-view[notification="error"] {
663 background-image: url("chrome://mozapps/skin/extensions/stripes-error.png"),
664 linear-gradient(rgba(255, 0, 0, 0.04),
665 rgba(255, 0, 0, 0));
666 background-repeat: repeat-x;
667 }
669 .addon-view[pending="enable"],
670 .addon-view[pending="upgrade"],
671 .addon-view[pending="install"] {
672 background-image: url("chrome://mozapps/skin/extensions/stripes-info-positive.png"),
673 linear-gradient(rgba(0, 255, 0, 0.04),
674 rgba(0, 255, 0, 0));
675 background-repeat: repeat-x;
676 }
678 .addon-view[pending="disable"],
679 .addon-view[pending="uninstall"] {
680 background-image: url("chrome://mozapps/skin/extensions/stripes-info-negative.png"),
681 linear-gradient(rgba(128, 128, 128, 0.04),
682 rgba(128, 128, 128, 0));
683 background-repeat: repeat-x;
684 }
686 .addon[selected] {
687 background-color: rgba(105, 125, 149, 0.39);
688 color: black;
689 }
691 .addon[selected] .name-container {
692 text-shadow: @loweredShadow@;
693 }
695 .addon[active="false"][selected] .name-container {
696 color: #3F3F3F;
697 }
700 /*** search view ***/
702 #search-filter {
703 padding: 5px 20px;
704 font-size: 120%;
705 overflow-x: hidden;
706 border-bottom: 1px solid rgba(50, 65, 92, 0.4);
707 }
709 #search-filter-label {
710 font-weight: bold;
711 color: #666;
712 }
714 .search-filter-radio {
715 -moz-appearance: none;
716 padding: 0 10px;
717 margin: 0 3px;
718 border-radius: 10000px;
719 }
721 .search-filter-radio[selected] {
722 text-shadow: @loweredShadow@;
723 background-color: #C0C3CB;
724 box-shadow: inset #A3A6AC 0 1px 1px, @loweredShadow@;
725 }
727 .search-filter-radio:hover {
728 text-shadow: @loweredShadow@;
729 background-color: #C0C3CB;
730 }
732 .search-filter-radio .radio-check {
733 display: none;
734 }
736 .search-filter-radio .radio-icon {
737 display: none;
738 }
740 #search-allresults-link {
741 margin-top: 1em;
742 margin-bottom: 2em;
743 }
745 /*** detail view ***/
747 #detail-view .loading {
748 opacity: 0;
749 }
751 #detail-view[loading-extended] .loading {
752 opacity: 1;
753 transition-property: opacity;
754 transition-duration: 1s;
755 }
757 .detail-view-container {
758 padding: 0 2em 2em 2em;
759 font-size: 110%;
760 }
762 #detail-notifications {
763 margin-top: 1em;
764 margin-bottom: 2em;
765 }
767 #detail-notifications .warning,
768 #detail-notifications .pending,
769 #detail-notifications .error {
770 -moz-margin-start: 0;
771 }
773 #detail-icon-container {
774 width: 64px;
775 -moz-margin-end: 10px;
776 margin-top: 6px;
777 }
779 #detail-icon {
780 max-width: 64px;
781 max-height: 64px;
782 }
784 #detail-summary {
785 margin-bottom: 2em;
786 }
788 #detail-name-container {
789 font-size: 200%;
790 }
792 #detail-screenshot {
793 -moz-margin-end: 2em;
794 max-width: 300px;
795 max-height: 300px;
796 }
798 #detail-screenshot[loading] {
799 background-image: url("chrome://global/skin/icons/loading_16.png"),
800 linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
801 background-position: 50% 50%;
802 background-repeat: no-repeat;
803 border-radius: 3px;
804 }
806 #detail-screenshot[loading="error"] {
807 background-image: url("chrome://global/skin/media/error.png"),
808 linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
809 }
811 #detail-desc-container {
812 margin-bottom: 2em;
813 }
815 #detail-desc, #detail-fulldesc {
816 -moz-margin-start: 6px;
817 /* This is necessary to fix layout issues with multi-line descriptions, see
818 bug 592712*/
819 outline: solid transparent;
820 white-space: pre-wrap;
821 min-width: 10em;
822 }
824 #detail-fulldesc {
825 margin-top: 1em;
826 }
828 #detail-contributions {
829 border-radius: 5px;
830 border: 1px solid rgba(50, 65, 92, 0.3);
831 margin-bottom: 2em;
832 padding: 1em;
833 background-color: rgba(255, 255, 255, 0.35);
834 }
836 #detail-contrib-description {
837 font-style: italic;
838 margin-bottom: 1em;
839 color: #373D48;
840 }
842 #detail-contrib-suggested {
843 color: grey;
844 font-weight: bold;
845 }
847 #detail-contrib-btn {
848 -moz-appearance: none;
849 color: #FFF;
850 border: 1px solid #3A4EEE;
851 border-radius: 3px;
852 list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
853 background-color: #2F73EF;
854 background-image: linear-gradient(rgba(251, 252, 253, 0.70), rgba(246, 247, 248, 0.27) 49%,
855 rgba(231, 232, 233, 0.25) 51%, rgba(225, 226, 229, 0.1));
856 }
858 #detail-contrib-btn .button-box {
859 padding: 0 6px 1px 6px;
860 }
862 #detail-contrib-btn .button-icon {
863 -moz-margin-end: 3px;
864 }
866 #detail-contrib-btn:not(:active):hover {
867 border-color: #4271FF;
868 background-color: #0459F7;
869 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1),
870 0 0 3.5px hsl(190, 90%, 80%);
871 transition: background-color .4s ease-in,
872 border-color .3s ease-in,
873 box-shadow .3s ease-in;
874 }
876 #detail-contrib-btn:active:hover {
877 background-color: #8FA1C1;
878 border-color: rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.55) rgba(0, 0, 0, 0.5);
879 box-shadow: 0 0 6.5px rgba(0, 0, 0, 0.4) inset,
880 0 0 2px rgba(0, 0, 0, 0.4) inset;
881 }
883 #detail-grid {
884 margin-bottom: 2em;
885 }
887 #detail-grid > columns > column:first-child {
888 min-width: 15em;
889 max-width: 25em;
890 }
892 .detail-row[first-row="true"],
893 .detail-row-complex[first-row="true"],
894 setting[first-row="true"] {
895 border-top: none;
896 }
898 .detail-row,
899 .detail-row-complex,
900 setting {
901 border-top: 2px solid;
902 -moz-border-top-colors: rgba(28, 31, 37, 0.2) rgba(255, 255, 255, 0.2);
903 -moz-box-align: center;
904 min-height: 30px;
905 }
907 #detail-controls {
908 margin-bottom: 1em;
909 }
911 #detail-view[active="false"]:not([pending]):not([notification]) {
912 background-image: linear-gradient(rgba(135, 135, 135, 0.1),
913 rgba(135, 135, 135, 0));
914 }
916 setting[first-row="true"] {
917 margin-top: 2em;
918 }
920 setting {
921 -moz-box-align: start;
922 }
924 .preferences-alignment {
925 min-height: 30px;
926 -moz-box-align: center;
927 }
929 .preferences-description {
930 font-size: 90.9%;
931 color: graytext;
932 margin-top: -2px;
933 -moz-margin-start: 2em;
934 white-space: pre-wrap;
935 }
937 .preferences-description:empty {
938 display: none;
939 }
941 setting[type="radio"] > radiogroup {
942 -moz-box-orient: horizontal;
943 }
946 /*** creator ***/
948 .creator > label {
949 -moz-margin-start: 0;
950 -moz-margin-end: 0;
951 }
953 .creator > .text-link {
954 margin-top: 1px;
955 margin-bottom: 1px;
956 }
959 /*** rating ***/
961 .meta-rating {
962 -moz-margin-end: 0;
963 margin-top: 2px;
964 }
966 .meta-rating > .star {
967 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
968 padding: 0 1px;
969 }
971 .meta-rating > .star[on="true"] {
972 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
973 }
976 /*** download progress ***/
978 .download-progress {
979 background-image: linear-gradient(#DCDEE3, #CBCED6);
980 border: 1px solid #858898;
981 border-radius: 3px;
982 box-shadow: inset #E3E8EC 0 1px 1px, @loweredShadow@;
983 width: 200px;
984 height: 21px;
985 margin: 0 8px;
986 }
988 .download-progress[mode="undetermined"] .progress {
989 -moz-binding: url("chrome://global/content/bindings/progressmeter.xml#progressmeter-undetermined");
990 }
992 .download-progress[mode="undetermined"] {
993 border-color: #2E773A;
994 }
996 .download-progress[mode="undetermined"] .status-container {
997 padding: 0 2px;
998 }
1000 .download-progress .start-cap,
1001 .download-progress[complete] .end-cap,
1002 .download-progress[mode="undetermined"] .end-cap,
1003 .download-progress .progress .progress-bar {
1004 -moz-appearance: none;
1005 background-image: linear-gradient(#6AC47E, #4FAC6A);
1006 margin-top: -1px;
1007 margin-bottom: -1px;
1008 border: 1px solid #2E773A;
1009 }
1011 .download-progress .start-cap {
1012 -moz-margin-start: -1px;
1013 -moz-border-end-width: 0;
1014 }
1016 .download-progress .end-cap {
1017 -moz-margin-end: -1px;
1018 -moz-border-start-width: 0px !important;
1019 }
1021 .download-progress .progress .progress-bar {
1022 border-left-width: 0;
1023 border-right-width: 0;
1024 min-height: 21px;
1025 }
1027 .download-progress .progress {
1028 -moz-appearance: none;
1029 background-color: transparent;
1030 padding: 0;
1031 margin: 0;
1032 border: none;
1033 }
1035 .download-progress .start-cap,
1036 .download-progress .end-cap {
1037 width: 4px;
1038 }
1040 .download-progress .start-cap:-moz-locale-dir(ltr),
1041 .download-progress .end-cap:-moz-locale-dir(rtl) {
1042 border-radius: 3px 0 0 3px;
1043 }
1045 .download-progress .end-cap:-moz-locale-dir(ltr),
1046 .download-progress .start-cap:-moz-locale-dir(rtl) {
1047 border-radius: 0 3px 3px 0;
1048 }
1050 .download-progress .cancel {
1051 -moz-appearance: none;
1052 background-color: rgba(255, 255, 255, 0.15);
1053 border: 1px solid rgba(0, 0, 0, 0.4);
1054 padding: 3px;
1055 border-radius: 3px;
1056 min-width: 0;
1057 margin: 3px;
1058 }
1060 .download-progress .cancel .button-text {
1061 display: none;
1062 }
1064 .download-progress .cancel .button-icon {
1065 -moz-margin-start: 0;
1066 }
1068 .download-progress .cancel {
1069 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
1070 }
1072 .download-progress .status-container {
1073 -moz-box-align: center;
1074 }
1076 .download-progress .status {
1077 text-shadow: @loweredShadow@;
1078 }
1081 /*** install status ***/
1083 .install-status {
1084 -moz-box-align: center;
1085 }
1088 /*** check for updates ***/
1090 #updates-container {
1091 -moz-box-align: center;
1092 }
1094 #updates-installed,
1095 #updates-downloaded {
1096 color: #3C735C;
1097 font-weight: bold;
1098 }
1100 #update-selected {
1101 margin: 12px;
1102 }
1105 /*** buttons ***/
1107 .addon-control[disabled="true"] {
1108 display: none;
1109 }
1111 button.button-link {
1112 -moz-appearance: none;
1113 background: transparent;
1114 border: none;
1115 box-shadow: none;
1116 text-decoration: underline;
1117 color: #0066CC;
1118 cursor: pointer;
1119 min-width: 0;
1120 margin: 0 6px;
1121 }
1123 .text-link {
1124 color: #3386D5;
1125 }
1127 .button-link:hover,
1128 .text-link:hover {
1129 color: #3DA1FF;
1130 }
1132 /* Needed to override normal button style from inContent.css */
1133 button.button-link:not([disabled="true"]):active:hover {
1134 background: transparent;
1135 border: none;
1136 box-shadow: none;
1137 }
1139 .header-button {
1140 -moz-appearance: none;
1141 padding: 0 4px;
1142 margin: 0;
1143 height: 22px;
1144 border: 1px solid rgba(60,73,97,0.5);
1145 border-radius: @toolbarbuttonCornerRadius@;
1146 box-shadow: inset 0 1px rgba(255,255,255,0.25), 0 1px rgba(255,255,255,0.25);
1147 background: linear-gradient(rgba(255,255,255,0.45), rgba(255,255,255,0));
1148 background-clip: padding-box;
1149 }
1151 .header-button .toolbarbutton-text {
1152 display: none;
1153 }
1155 .header-button[disabled="true"] .toolbarbutton-icon {
1156 opacity: 0.4;
1157 }
1159 .header-button:not([disabled="true"]):active:hover,
1160 .header-button[open="true"] {
1161 border-color: rgba(45,54,71,0.7);
1162 box-shadow: inset 0 0 4px rgb(45,54,71), 0 1px rgba(255,255,255,0.25);
1163 background-image: linear-gradient(rgba(45,54,71,0.6), rgba(45,54,71,0));
1164 }
1166 /*** telemetry experiments ***/
1168 #detail-experiment-container {
1169 font-size: 80%;
1170 margin-bottom: 1em;
1171 }
1173 #detail-experiment-bullet-container,
1174 #detail-experiment-state,
1175 #detail-experiment-time,
1176 .experiment-bullet-container,
1177 .experiment-state,
1178 .experiment-time {
1179 vertical-align: middle;
1180 display: inline-block;
1181 }
1183 .addon .experiment-bullet,
1184 #detail-experiment-bullet {
1185 fill: rgb(158, 158, 158);
1186 }
1188 .addon[active="true"] .experiment-bullet,
1189 #detail-view[active="true"] #detail-experiment-bullet {
1190 fill: rgb(106, 201, 20);
1191 }
