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