make add-ons view have a correct LCARS look again
[themes.git] / LCARStrek / mozapps / extensions / extensions.css
CommitLineData
9099c61d
RK
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/. */
4c18c82c 4
5d891ecf 5@import url("chrome://global/skin/in-content/common.css");
c1f7cc84 6
f2e2cfd1
RK
7#addons-page {
8 padding: 3px;
9 margin: 0;
10}
11
5d891ecf
RK
12.main-content {
13 padding: 0;
0de07750
RK
14}
15
5d891ecf
RK
16#nav-header {
17 min-height: 39px;
0de07750
RK
18}
19
5d891ecf
RK
20.view-pane > .list > scrollbox {
21 border-radius: 1em 0 0 0;
dae45075
RK
22/* padding-right: 48px;
23 padding-left: 48px; */
0de07750
RK
24}
25
5d891ecf
RK
26#search-list > scrollbox {
27 border-radius: 0;
0de07750
RK
28}
29
569543b3 30/*** global warnings ***/
a67d7bb0 31
72a6fd39
RK
32.global-warning-container {
33 overflow-x: hidden;
34}
35
569543b3
RK
36.global-warning {
37 -moz-box-align: center;
38 padding: 0 8px;
39 color: #000000;
40 font-weight: bold;
41}
42
43#addons-page[warning] .global-warning-container {
44 background-color: #FFCF00;
45}
46
47#detail-view .global-warning {
48 padding: 4px 12px;
f993773d 49 border-bottom: 3px solid #000000;
569543b3
RK
50}
51
f777a4f1 52@media (max-width: 600px) {
72a6fd39
RK
53 .global-warning-text {
54 display: none;
55 }
56
57 .global-warning .warning-icon {
58 /* background-color: #FFF;
59 box-shadow: 0px 0px 2px 5px #FFF;
60 border-radius: 10px; */
61 }
62}
63
f993773d 64/*** global informations ***/
f993773d 65
e1313d59
RK
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;
72}
73
569543b3
RK
74/*** notification icons ***/
75
5d891ecf
RK
76.warning-icon,
77.error-icon,
78.pending-icon,
79.info-icon {
569543b3
RK
80 width: 16px;
81 height: 16px;
ae19a7b3 82 margin: 1px 0;
569543b3
RK
83}
84
5d891ecf 85.warning-icon {
7729765c 86 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
5d891ecf
RK
87}
88
569543b3 89.error-icon {
7729765c 90 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-error.svg");
569543b3
RK
91}
92
93.pending-icon,
94.info-icon {
7729765c 95 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-positive.svg");
569543b3 96}
4c18c82c 97
72a6fd39
RK
98.addon-view[pending="disable"] .pending-icon,
99.addon-view[pending="uninstall"] .pending-icon {
7729765c 100 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
72a6fd39
RK
101}
102
72a6fd39
RK
103/*** view alert boxes ***/
104
105.alert-container {
106 -moz-box-align: center;
dae45075
RK
107 margin-right: 48px;
108 margin-left: 48px;
6598e84c 109 padding-top: .5em;
72a6fd39
RK
110}
111
112.alert-spacer-before {
113 -moz-box-flex: 1;
114}
115
116.alert-spacer-after {
117 -moz-box-flex: 3;
118}
119
120.alert {
121 -moz-box-align: center;
122 padding: 10px;
123 color: #FF9F00;
124 border: 1px solid #9C9CFF;
125 border-radius: 8px;
126 background-color: #000000;
38b75e2e 127 background-clip: padding-box;
72a6fd39
RK
128}
129
130.alert .alert-title {
131 font-weight: bold;
132 font-size: 200%;
133 margin-bottom: 15px;
134}
135
154ee8b3 136.alert button {
72a6fd39
RK
137 margin: 1em 2em;
138}
139
140.loading {
7c1e433b 141 list-style-image: url("chrome://global/skin/icons/loading.png");
72a6fd39
RK
142 padding-left: 20px;
143 padding-right: 20px;
144}
145
7c1e433b
RK
146@media (min-resolution: 1.1dppx) {
147 .loading > image {
148 width: 16px;
149 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
150 }
151}
152
7729765c
RK
153button.warning {
154 list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
155}
72a6fd39 156
4c18c82c
RK
157/*** category selector ***/
158
159#categories {
5d891ecf 160 padding-top: 0;/*31px;*/
706c344c
RK
161}
162
4c18c82c 163.category[disabled] {
5d891ecf 164 min-height: 0;
4c18c82c 165 opacity: 0;
5d891ecf 166 transition-property: min-height, opacity;
71a617ff 167 transition-duration: 1s, 0.8s;
e10e7add
RK
168}
169
4c18c82c 170.category:not([disabled]) {
5d891ecf
RK
171 min-height: 40px;
172 transition-property: min-height, opacity;
71a617ff 173 transition-duration: 1s, 0.8s;
e10e7add
RK
174}
175
72a6fd39 176/* Maximize the size of the viewport when the window is small */
f777a4f1 177@media (max-width: 800px) {
72a6fd39
RK
178 .category-name {
179 display: none;
180 }
181}
182
4c18c82c
RK
183.category-badge {
184 background-color: #E7ADE7;
185 padding: 2px 8px;
72a6fd39 186 margin: 6px 0;
dae45075 187 margin-inline-start: 6px;
5d891ecf 188 border-radius: 100%;
4c18c82c
RK
189 color: #000000;
190 font-weight: bold;
191 text-align: center;
e10e7add
RK
192}
193
4c18c82c 194.category-badge[value="0"] {
5d891ecf 195 display: none;
e10e7add
RK
196}
197
4c18c82c
RK
198#category-search > .category-icon {
199 list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
200}
201#category-discover > .category-icon {
202 list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
203}
f993773d 204#category-locale > .category-icon {
4c18c82c
RK
205 list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
206}
f993773d 207#category-extension > .category-icon {
4c18c82c
RK
208 list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
209}
89eb2c89
RK
210#category-service > .category-icon {
211 list-style-image: url("chrome://mozapps/skin/extensions/category-service.png");
212}
f993773d 213#category-theme > .category-icon {
4c18c82c
RK
214 list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
215}
f993773d 216#category-plugin > .category-icon {
4c18c82c 217 list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
e10e7add 218}
1e29db46
RK
219#category-dictionary > .category-icon {
220 list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png");
221}
2e88f3cc
RK
222#category-experiment > .category-icon {
223 list-style-image: url("chrome://mozapps/skin/extensions/category-experiments.png");
224}
0de07750
RK
225#category-availableUpdates > .category-icon {
226 list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
227}
228#category-recentUpdates > .category-icon {
229 list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
230}
e10e7add 231
f2e2cfd1
RK
232/*** main content ***/
233
234#addons-page > hbox {
5d891ecf 235 /* This applies to the box surrounding all content. */
f2e2cfd1 236 background-color: #A09090;
5d891ecf 237 border-radius: 1em 0 0 0;
f2e2cfd1
RK
238}
239
240.main-content {
f2e2cfd1 241 border: none;
7729765c 242 padding-bottom: 0;
5d891ecf
RK
243}
244
245#view-port {
6598e84c
RK
246}
247
248#headered-views-content {
f2e2cfd1 249 border-radius: 1em 0 0 0;
6598e84c 250 background-color: #000000;
f2e2cfd1 251}
4c18c82c
RK
252
253/*** header ***/
254
255#header {
706c344c 256 height: 2em;
f2e2cfd1 257 padding: 3px;
5d891ecf 258 background-color: #A09090;
3327253e
RK
259}
260
89eb2c89
RK
261@media (max-width: 600px) {
262 #header-search {
263 width: 12em;
264 }
265}
266
0de07750 267#header-utils-btn {
e6947267 268 list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities");
dae45075 269 margin-inline-end: 16px;
0de07750
RK
270}
271
ae19a7b3
RK
272#header-utils-btn:hover,
273#header-utils-btn:hover:active,
274#header-utils-btn[open="true"] {
e6947267 275 list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-hover");
ae19a7b3
RK
276}
277
ae19a7b3
RK
278#header-utils-btn > .button-box > .button-menu-dropmarker {
279 border: none;
280 background: transparent;
281}
282
283#header-utils-btn:hover > .button-box > .button-menu-dropmarker {
284 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
285}
286
4c18c82c 287.view-header {
dae45075 288 margin: 0 48px;
a67d7bb0
RK
289 background-color: #9C9CFF;
290 color: #000000;
569543b3 291 border-radius: 8px;
ae19a7b3 292 padding: 0px 1em;
4c18c82c 293 margin: 3px;
e10e7add
RK
294}
295
5d891ecf
RK
296.header-button {
297}
298
299.header-button[disabled="true"] > .toolbarbutton-icon {
300}
301
302.header-button:not([disabled="true"]):hover,
303#header-utils-btn:not([disabled="true"]):hover {
304 cursor: pointer;
305}
306
307.header-button > .toolbarbutton-text {
308 display: none;
309}
310
311.nav-button {
312 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
313}
314
315#forward-btn {
dae45075 316 border-inline-start: none;
5d891ecf
RK
317}
318
319#back-btn:-moz-locale-dir(ltr),
320#forward-btn:-moz-locale-dir(rtl) {
321 -moz-image-region: rect(42px 25px 63px 0px);
322}
323
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);
327}
328
329#back-btn:-moz-locale-dir(rtl),
330#forward-btn:-moz-locale-dir(ltr) {
331 -moz-image-region: rect(63px 25px 84px 0px);
332}
333
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);
337}
4c18c82c
RK
338
339/*** sorters ***/
340
341.sort-controls {
ae19a7b3 342 border-right: 3px solid #000000;
4c18c82c
RK
343}
344
345.sorter {
4c18c82c
RK
346 border: none;
347 border-left: 3px solid #000000;
4c18c82c 348 background-color: transparent;
5d891ecf 349 color: #000000;
569543b3 350 border-radius: 0;
72a6fd39 351 margin: 0;
4c18c82c
RK
352 min-width: 12px !important;
353 -moz-box-direction: reverse;
354}
ae19a7b3
RK
355.sorter:hover {
356 background-color: #FFCF00;
357 color: #000000;
358}
4c18c82c 359
72a6fd39
RK
360.sorter .button-box {
361 padding-top: 0;
362 padding-bottom: 0;
363}
364
4c18c82c
RK
365.sorter[checkState="1"],
366.sorter[checkState="2"] {
e10e7add
RK
367 background-color: #008484;
368 color: #FFCF00;
369}
370
4c18c82c
RK
371.sorter[checkState="1"] {
372 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
e10e7add
RK
373}
374
4c18c82c
RK
375.sorter[checkState="2"] {
376 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
e10e7add
RK
377}
378
4c18c82c 379.sorter .button-icon {
dae45075 380 margin-inline-start: 6px;
e10e7add
RK
381}
382
4c18c82c 383
1169dad4
RK
384/*** discover view ***/
385
6598e84c
RK
386#discover-view {
387 background-image: linear-gradient(#A09090 28px, #000000 28px, #000000 100%);
388}
389
1169dad4
RK
390.discover-spacer-before,
391.discover-spacer-after {
392 -moz-box-flex: 1;
393}
394
395#discover-error .alert {
396 max-width: 45em;
397 -moz-box-flex: 1;
398}
399
400.discover-logo {
401 list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png");
dae45075 402 margin-inline-end: 15px;
1169dad4
RK
403}
404
405.discover-title {
406 font-weight: bold;
407 font-size: 24px;
408 /* font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif; */
409 margin: 0 0 15px 0;
410}
411
412.discover-description {
413 text-align: justify;
414 margin: 0 0 15px 0;
415}
416
417.discover-footer {
418 text-align: justify;
419}
420
5d891ecf
RK
421#discover-browser {
422 border-radius: 1em 0px 0px;
423}
1169dad4 424
4c18c82c
RK
425/*** list ***/
426
427.list {
72a6fd39 428 margin: 0;
ed351b91 429 border-width: 0 !important;
706c344c 430 background-color: transparent;
4c18c82c
RK
431}
432
ed351b91
RK
433.list > scrollbox > .scrollbox-innerbox {
434 border: 1px dotted transparent;
435}
436
437.list:-moz-focusring > scrollbox > .scrollbox-innerbox {
438 border-color: #008484;
439}
440
706c344c
RK
441.addon {
442 border-bottom: 1px solid #9C9CFF;
443 padding: 5px;
72a6fd39 444 background-origin: border-box;
e10e7add
RK
445}
446
5d891ecf
RK
447.addon:not(:only-child):last-child {
448 border-bottom-width: 0;
449}
450
706c344c 451.details {
4c18c82c 452 cursor: pointer;
706c344c 453 margin: 0;
dae45075 454 margin-inline-start: 10px;
e10e7add
RK
455}
456
706c344c
RK
457.icon-container {
458 width: 48px;
459 height: 48px;
a0885fa2 460 margin: 3px 7px;
38b75e2e
RK
461 -moz-box-align: center;
462 -moz-box-pack: center;
e10e7add
RK
463}
464
706c344c 465.icon {
7729765c 466 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg");
706c344c
RK
467 max-width: 48px;
468 max-height: 48px;
e10e7add
RK
469}
470
5d891ecf 471.content-inner-container {
dae45075 472 margin-inline-end: 5px;
5d891ecf
RK
473}
474
72a6fd39 475.addon[active="false"] .icon {
441d0294 476 filter: grayscale(1);
72a6fd39
RK
477}
478
569543b3 479.addon-view[type="theme"] .icon {
4c18c82c 480 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
e10e7add
RK
481}
482
569543b3 483.addon-view[type="locale"] .icon {
d15f39a1
RK
484 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
485}
486
569543b3 487.addon-view[type="plugin"] .icon {
4c18c82c 488 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
e10e7add
RK
489}
490
1e29db46
RK
491.addon-view[type="dictionary"] .icon {
492 list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
493}
494
2e88f3cc
RK
495.addon-view[type="experiment"] .icon {
496 list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png");
497}
498
8a933f1e 499.name-container {
7729765c 500 font-size: 1.3rem;
72a6fd39 501 font-weight: bold;
a67d7bb0 502 color: #9C9CFF;
72a6fd39 503 margin-bottom: 0;
38b75e2e 504 -moz-box-align: end;
c1f7cc84 505 -moz-box-flex: 1;
72a6fd39
RK
506}
507
508.creator {
509 font-weight: bold;
510}
511
706c344c 512.description-container {
dae45075 513 margin-inline-start: 6px;
38b75e2e 514 -moz-box-align: center;
7729765c 515 font-size: 1.25rem;
e10e7add
RK
516}
517
706c344c
RK
518.description {
519 margin: 0;
520}
521
72a6fd39
RK
522.warning,
523.pending,
524.error,
525.info {
dae45075 526 margin-inline-start: 48px;
72a6fd39 527 font-weight: bold;
38b75e2e
RK
528 -moz-box-align: center;
529}
530
531.content-container,
532.basicinfo-container {
533 -moz-box-align: start;
534}
535
536.addon[status="installing"] > .content-container {
537 -moz-box-align: stretch;
538}
539
540.update-info-container {
541 -moz-box-align: center;
542}
543
38b75e2e
RK
544.update-available {
545 -moz-box-align: end;
546}
547
548.install-status-container {
549 -moz-box-pack: end;
550 -moz-box-align: end;
551}
552
553.name-outer-container {
554 -moz-box-pack: center;
555}
556
557.relnotes-toggle-container,
558.icon-outer-container {
559 -moz-box-pack: start;
560}
561
562.status-container,
563.control-container {
564 -moz-box-pack: end;
706c344c
RK
565}
566
72a6fd39 567.addon-view .warning {
706c344c
RK
568 color: #FFCF00;
569}
570
72a6fd39 571.addon-view .error {
4c18c82c 572 color: #FF0000;
706c344c
RK
573}
574
72a6fd39 575.addon-view .pending {
706c344c 576 color: #008484;
e10e7add
RK
577}
578
72a6fd39
RK
579.addon-view[pending="disable"] .pending,
580.addon-view[pending="uninstall"] .pending {
581 color: #FF9C00;
e10e7add
RK
582}
583
0de07750
RK
584.addon .relnotes-container {
585 -moz-box-align: start;
dae45075 586 margin-inline-start: 6px;
72a6fd39 587 height: 0;
0de07750
RK
588 overflow: hidden;
589 opacity: 0;
71a617ff
RK
590 transition-property: height, opacity;
591 transition-duration: 0.5s, 0.5s;
0de07750
RK
592}
593
594.addon[show-relnotes] .relnotes-container {
595 opacity: 1;
71a617ff
RK
596 transition-property: height, opacity;
597 transition-duration: 0.5s, 0.5s;
0de07750
RK
598}
599
600.addon .relnotes-header {
601 font-weight: bold;
72a6fd39 602 margin: 10px 0;
0de07750
RK
603}
604
605.addon .relnotes-toggle {
606 border: none;
607 background: transparent;
608 font-weight: bold;
609 -moz-box-direction: reverse;
610 cursor: pointer;
611 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
612}
613
614.addon .relnotes-toggle > .button-box > .button-icon {
dae45075 615 padding-inline-start: 4px;
0de07750
RK
616}
617
618.addon[show-relnotes] .relnotes-toggle {
619 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
620}
621
7729765c
RK
622.addon-view[notification],
623.addon-view[pending] {
624 --view-highlight-color: transparent;
625 /*
626 background-image: radial-gradient(at 50% 0%,
627 var(--view-highlight-color) 0%,
628 transparent 75%);
629 */
630 background-color: var(--view-highlight-color);
631}
632
72a6fd39 633.addon-view[notification="warning"] {
7729765c 634 --view-highlight-color: #FFCF00;
72a6fd39
RK
635 color: #000000;
636}
637
638.addon-view[notification="warning"] .warning {
639 color: #000000;
640}
641
a67d7bb0
RK
642.addon-view[notification="warning"] .name-container {
643 color: #000000;
644}
645
5d891ecf
RK
646.addon-view[notification="warning"] .text-link:hover {
647 color: #000000;
648}
649
72a6fd39 650.addon-view[notification="error"] {
7729765c 651 --view-highlight-color: #FF0000;
72a6fd39
RK
652 color: #000000;
653}
654
655.addon-view[notification="error"] .error {
656 color: #000000;
657}
658
659.addon-view[notification="info"] {
7729765c 660 --view-highlight-color: #9C9CFF;
72a6fd39
RK
661 color: #000000;
662}
663
664.addon-view[pending="enable"],
665.addon-view[pending="upgrade"],
666.addon-view[pending="install"] {
7729765c 667 --view-highlight-color: #008484;
72a6fd39
RK
668}
669
34aa92fd
RK
670.addon-view[pending="enable"] .pending,
671.addon-view[pending="upgrade"] .pending,
672.addon-view[pending="install"] .pending {
673 color: #000000;
674}
675
72a6fd39
RK
676.addon-view[pending="disable"],
677.addon-view[pending="uninstall"] {
678 color: #8050B0;
679}
680
0de07750 681
4c18c82c
RK
682/*** item - uninstalled ***/
683
684.addon[status="uninstalled"] {
685 border: none;
e10e7add
RK
686}
687
4c18c82c
RK
688.addon[status="uninstalled"] > .container {
689 -moz-box-align: center;
690 padding: 4px 20px;
691 background-color: #8050B0;
569543b3 692 border-radius: 8px;
4c18c82c 693 font-size: 120%;
e10e7add
RK
694}
695
4c18c82c
RK
696.addon[status="uninstalled"][selected] {
697 background-color: transparent;
e10e7add
RK
698}
699
72a6fd39
RK
700.addon[selected] {
701 background-color: #008484;
a67d7bb0 702 color: #FF9F00;
72a6fd39
RK
703}
704
705.addon[selected] .name-container {
a67d7bb0
RK
706 color: #FFCF00;
707}
708
5d891ecf
RK
709.addon[active="false"] {
710 background-color: #8050B0;
711 color: #E7ADE7;
712}
713
714.addon-view[active="false"] .name-container {
715 color: #E7ADE7;
716 color: #000000;
717}
718
a67d7bb0
RK
719.addon[active="false"][selected] {
720 color: #E7ADE7;
72a6fd39
RK
721}
722
723.addon[active="false"][selected] .name-container {
a67d7bb0 724 color: #E7ADE7;
72a6fd39
RK
725}
726
4c18c82c 727
4c18c82c
RK
728/*** search view ***/
729
706c344c
RK
730#search-filter {
731 padding: 5px 20px;
dae45075
RK
732/* margin-right: 48px;
733 margin-left: 48px;*/
4c18c82c
RK
734 -moz-box-align: center;
735 background-color: #000000;
736 font-size: 120%;
72a6fd39
RK
737 border-bottom: 1px solid #9C9CFF;
738 overflow-x: hidden;
e10e7add
RK
739}
740
706c344c
RK
741#search-filter-label {
742 font-weight: bold;
743 color: #FFCF00;
dae45075 744 margin-inline-end: 10px;
706c344c 745}
4c18c82c 746
0de07750
RK
747#search-allresults-link {
748 margin-top: 1em;
749 margin-bottom: 2em;
750}
751
4c18c82c
RK
752/*** detail view ***/
753
569543b3 754#detail-view .loading {
4c18c82c 755 opacity: 0;
e10e7add
RK
756}
757
569543b3 758#detail-view[loading-extended] .loading {
4c18c82c 759 opacity: 1;
71a617ff
RK
760 transition-property: opacity;
761 transition-duration: 1s;
e10e7add
RK
762}
763
4c18c82c 764.detail-view-container {
72a6fd39 765 padding: 0 2em 2em 2em;
7729765c 766 font-size: 1.25rem;
e10e7add
RK
767}
768
569543b3 769#detail-notifications {
72a6fd39 770 margin-top: 1em;
569543b3 771 margin-bottom: 2em;
e10e7add
RK
772}
773
569543b3
RK
774#detail-notifications .warning,
775#detail-notifications .pending,
72a6fd39 776#detail-notifications .error {
dae45075 777 margin-inline-start: 0;
e10e7add
RK
778}
779
f777a4f1
RK
780#detail-icon-container {
781 width: 64px;
dae45075 782 margin-inline-end: 10px;
72a6fd39 783 margin-top: 6px;
f777a4f1
RK
784}
785
786#detail-icon {
72a6fd39
RK
787 max-width: 64px;
788 max-height: 64px;
e10e7add
RK
789}
790
569543b3
RK
791#detail-summary {
792 margin-bottom: 2em;
e10e7add
RK
793}
794
569543b3 795#detail-name-container {
7729765c
RK
796 font-size: 2.5rem;
797 font-weight: normal;
d15f39a1
RK
798}
799
5d891ecf 800#detail-screenshot-box {
dae45075 801 margin-inline-end: 2em;
7c1e433b 802/* background-color: white;*/
5d891ecf
RK
803}
804
805
806#detail-screenshot {
6831f2a0
RK
807 max-width: 300px;
808 max-height: 300px;
18f5421a
RK
809}
810
904e5040 811#detail-screenshot[loading] {
7c1e433b 812 background-image: url("chrome://global/skin/icons/loading.png");
904e5040
RK
813 background-position: 50% 50%;
814 background-repeat: no-repeat;
815}
816
7c1e433b
RK
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;
821 }
822}
823
904e5040
RK
824#detail-screenshot[loading="error"] {
825 background-image: url("chrome://global/skin/icons/alert-error.gif");
826}
827
569543b3
RK
828#detail-desc-container {
829 margin-bottom: 2em;
e10e7add
RK
830}
831
8a933f1e 832#detail-desc, #detail-fulldesc {
dae45075 833 margin-inline-start: 6px;
569543b3 834 white-space: pre-wrap;
9162a092
RK
835 /* This is necessary to fix layout issues with multi-line descriptions, see
836 bug 592712*/
837 outline: solid transparent;
72a6fd39 838 min-width: 8em;
569543b3
RK
839}
840
8a933f1e
RK
841#detail-fulldesc {
842 margin-top: 1em;
843}
844
569543b3
RK
845#detail-contributions {
846 border-radius: 5px;
847 border: 1px solid #9C9CFF;
848 margin-bottom: 2em;
849 padding: 1em;
72a6fd39 850 background-color: #FFCF00;
4c18c82c
RK
851}
852
569543b3
RK
853#detail-contrib-description {
854 font-style: italic;
855 margin-bottom: 1em;
72a6fd39 856 color: #000000;
4c18c82c
RK
857}
858
569543b3 859#detail-contrib-suggested {
72a6fd39
RK
860 color: #8050B0;
861 font-weight: bold;
4c18c82c
RK
862}
863
72a6fd39 864#detail-contrib-btn {
569543b3
RK
865 list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
866}
867
72a6fd39 868#detail-contrib-btn .button-icon {
dae45075 869 margin-inline-end: 3px;
569543b3
RK
870}
871
872#detail-grid {
f777a4f1 873 min-width: 15em;
569543b3
RK
874 margin-bottom: 2em;
875}
876
f620f94d
RK
877#detail-grid > columns > column:first-child {
878 max-width: 25em;
879}
880
9162a092 881.detail-row[first-row="true"],
f620f94d
RK
882.detail-row-complex[first-row="true"],
883setting[first-row="true"] {
9162a092
RK
884 border-top: none;
885}
886
569543b3 887.detail-row,
f620f94d
RK
888.detail-row-complex,
889setting {
9162a092 890 border-top: 1px solid #9C9CFF;
4c18c82c 891 -moz-box-align: center;
5d891ecf 892 min-height: 35px;
5d891ecf 893 line-height: 20px;
e10e7add
RK
894}
895
72a6fd39
RK
896#detail-controls {
897 margin-bottom: 1em;
898}
899
7729765c 900.inline-options-browser,
f620f94d
RK
901setting[first-row="true"] {
902 margin-top: 2em;
903}
904
a62af8a9
RK
905setting {
906 -moz-box-align: start;
907}
908
909.preferences-alignment {
910 min-height: 30px;
911 -moz-box-align: center;
912}
913
f620f94d
RK
914.preferences-description {
915 font-size: 90.9%;
916 color: #808080;
917 margin-top: -2px;
dae45075 918 margin-inline-start: 2em;
a62af8a9 919 white-space: pre-wrap;
f620f94d
RK
920}
921
a62af8a9
RK
922.preferences-description:empty {
923 display: none;
f620f94d
RK
924}
925
154ee8b3
RK
926setting[type="radio"] > radiogroup {
927 -moz-box-orient: horizontal;
928}
929
4c18c82c
RK
930/*** creator ***/
931
932.creator > label {
dae45075 933 margin-inline-end: 0;
e10e7add
RK
934}
935
4c18c82c
RK
936.creator > .text-link {
937 margin-top: 1px;
938 margin-bottom: 1px;
e10e7add
RK
939}
940
4c18c82c
RK
941
942/*** rating ***/
943
944.meta-rating {
dae45075 945 margin-inline-end: 0;
72a6fd39 946 padding-top: 2px;
e10e7add
RK
947}
948
72a6fd39 949.meta-rating > .star {
4c18c82c 950 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
72a6fd39 951 padding: 0 1px;
e10e7add
RK
952}
953
72a6fd39 954.meta-rating > .star[on="true"] {
4c18c82c 955 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
e10e7add
RK
956}
957
4c18c82c
RK
958
959/*** download progress ***/
960
961.download-progress {
962 background-color: #000000;
5d891ecf 963 border-radius: 2px;
4c18c82c
RK
964 border: 1px solid #FF9F00;
965 width: 200px;
5d891ecf
RK
966 height: 30px;
967 margin: 2px 4px;
e10e7add
RK
968}
969
5d891ecf
RK
970.download-progress[mode="undetermined"] {
971 border-color: #A09090;
e1313d59
RK
972}
973
4c18c82c
RK
974.download-progress .start-cap,
975.download-progress[complete] .end-cap,
e1313d59 976.download-progress[mode="undetermined"] .end-cap,
4c18c82c
RK
977.download-progress .progress .progress-bar {
978 background-color: #008484;
e10e7add
RK
979}
980
e1313d59
RK
981.download-progress .progress .progress-bar {
982 border-left-width: 0;
983 border-right-width: 0;
984 min-height: 21px;
985}
986
4c18c82c
RK
987.download-progress .progress {
988 background-color: transparent;
72a6fd39
RK
989 padding: 0;
990 margin: 0;
991 border: none;
e10e7add
RK
992}
993
4c18c82c
RK
994.download-progress .start-cap, .download-progress .end-cap {
995 width: 12px;
e10e7add
RK
996}
997
941d657f
RK
998.download-progress .start-cap:-moz-locale-dir(ltr),
999.download-progress .end-cap:-moz-locale-dir(rtl) {
5d891ecf 1000 border-radius: 1px 0 0 1px;
e10e7add
RK
1001}
1002
941d657f
RK
1003.download-progress .end-cap:-moz-locale-dir(ltr),
1004.download-progress .start-cap:-moz-locale-dir(rtl) {
5d891ecf 1005 border-radius: 0 1px 1px 0;
e10e7add
RK
1006}
1007
72a6fd39 1008.download-progress .cancel {
4c18c82c 1009 -moz-appearance: none;
72a6fd39
RK
1010 background-color: #8050B0;
1011 border: 1px solid #9C9CFF;
1012 padding: 3px;
72a6fd39 1013 min-width: 0;
5d891ecf
RK
1014 width: 20px;
1015 height: 20px;
72a6fd39
RK
1016 margin: 3px;
1017}
1018
72a6fd39
RK
1019.download-progress .cancel .button-box {
1020 padding: 0;
4c18c82c 1021 border: none;
e10e7add
RK
1022}
1023
72a6fd39
RK
1024.download-progress .cancel .button-text {
1025 display: none;
1026}
1027
72a6fd39 1028.download-progress .cancel .button-icon {
dae45075 1029 margin-inline-start: 0;
e10e7add
RK
1030}
1031
d15f39a1
RK
1032.download-progress .cancel {
1033 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
1034}
1035
4c18c82c
RK
1036.download-progress .status-container {
1037 -moz-box-align: center;
1038}
1039
72a6fd39
RK
1040.download-progress .status {
1041/* text-shadow: #FFF 0 0 2px; */
1042}
4c18c82c
RK
1043
1044/*** install status ***/
1045
1046.install-status {
1047 -moz-box-align: center;
e10e7add
RK
1048}
1049
4c18c82c
RK
1050
1051/*** check for updates ***/
1052
1053#updates-container {
1054 -moz-box-align: center;
e10e7add
RK
1055}
1056
72a6fd39
RK
1057#updates-container .button-link {
1058 font-weight: bold;
1059}
1060
1061#updates-installed,
1062#updates-downloaded {
4c18c82c
RK
1063 color: #008484;
1064 font-weight: bold;
e10e7add
RK
1065}
1066
569543b3
RK
1067#update-selected {
1068 margin: 12px;
e10e7add
RK
1069}
1070
569543b3 1071/*** buttons ***/
4c18c82c 1072
702d3d61 1073.addon-control[disabled="true"]:not(.no-auto-hide) {
0de07750
RK
1074 display: none;
1075}
1076
702d3d61
RK
1077.no-auto-hide .addon-control {
1078 display: block !important;
1079}
1080
154ee8b3 1081button.button-link {
4c18c82c
RK
1082 background: transparent;
1083 border: none;
1084 text-decoration: underline;
dbd844cb 1085 color: #3333FF;
4c18c82c
RK
1086 cursor: pointer;
1087 min-width: 0;
706c344c 1088 margin: 0 6px;
e10e7add 1089}
154ee8b3
RK
1090
1091/* Needed to override normal button style from inContent.css */
1092button.button-link:not([disabled="true"]):active:hover {
1093}
2e88f3cc
RK
1094
1095/*** telemetry experiments ***/
1096
1097#detail-experiment-container {
1098 font-size: 80%;
1099 margin-bottom: 1em;
1100}
1101
1102#detail-experiment-bullet-container,
1103#detail-experiment-state,
1104#detail-experiment-time,
1105.experiment-bullet-container,
1106.experiment-state,
1107.experiment-time {
1108 vertical-align: middle;
1109 display: inline-block;
1110}
1111
1112.addon .experiment-bullet,
1113#detail-experiment-bullet {
1114 fill: #8050B0;
1115}
1116
1117.addon[active="true"] .experiment-bullet,
1118#detail-view[active="true"] #detail-experiment-bullet {
1119 fill: #FFCF00;
1120}
5d891ecf
RK
1121
1122/*** info UI for add-ons that have been disabled for being unsigned ***/
1123
1124#show-disabled-unsigned-extensions:not(:hover) {
1125 background-color: #FF0000;
1126}
1127
1128#disabled-unsigned-addons-info {
1129 margin-bottom: 2em;
689d5552
RK
1130 margin-right: 48px;
1131 margin-left: 48px;
5d891ecf
RK
1132}
1133
1134#disabled-unsigned-addons-heading {
1135 font-size: 1.4em;
1136 font-weight: bold;
1137 margin-bottom: .5em;
1138}
1139
1140#signing-dev-info {
1141 font-style: italic;
1142}