|
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/. */ |
|
4 |
|
5 @import url("chrome://global/skin/inContentUI.css"); |
|
6 |
|
7 %include ../../global/shared.inc |
|
8 |
|
9 @namespace html url("http://www.w3.org/1999/xhtml"); |
|
10 |
|
11 |
|
12 /*** global warnings ***/ |
|
13 |
|
14 .global-warning-container { |
|
15 overflow-x: hidden; |
|
16 } |
|
17 |
|
18 .global-warning { |
|
19 -moz-box-align: center; |
|
20 padding: 0 8px; |
|
21 color: #916D15; |
|
22 font-weight: bold; |
|
23 } |
|
24 |
|
25 .global-warning, |
|
26 .global-warning .button-link { |
|
27 text-shadow: @loweredShadow@; |
|
28 } |
|
29 |
|
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 } |
|
35 |
|
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 } |
|
41 |
|
42 @media (max-width: 600px) { |
|
43 .global-warning-text { |
|
44 display: none; |
|
45 } |
|
46 |
|
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 } |
|
53 |
|
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 } |
|
60 |
|
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 } |
|
68 |
|
69 |
|
70 /*** notification icons ***/ |
|
71 |
|
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 } |
|
78 |
|
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 } |
|
85 |
|
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 } |
|
93 |
|
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 } |
|
101 |
|
102 |
|
103 /*** view alert boxes ***/ |
|
104 |
|
105 .alert-container { |
|
106 -moz-box-align: center; |
|
107 } |
|
108 |
|
109 .alert-spacer-before { |
|
110 -moz-box-flex: 1; |
|
111 } |
|
112 |
|
113 .alert-spacer-after { |
|
114 -moz-box-flex: 3; |
|
115 } |
|
116 |
|
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 } |
|
129 |
|
130 .alert .alert-title { |
|
131 font-weight: bold; |
|
132 font-size: 200%; |
|
133 margin-bottom: 15px; |
|
134 } |
|
135 |
|
136 .alert button { |
|
137 margin: 1em 2em; |
|
138 } |
|
139 |
|
140 .loading { |
|
141 list-style-image: url("chrome://global/skin/icons/loading_16.png"); |
|
142 padding-left: 20px; |
|
143 padding-right: 20px; |
|
144 } |
|
145 |
|
146 |
|
147 |
|
148 /*** category selector ***/ |
|
149 |
|
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 } |
|
158 |
|
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 } |
|
170 |
|
171 .category:-moz-locale-dir(ltr) { |
|
172 border-top-left-radius: 5px; |
|
173 border-bottom-left-radius: 5px; |
|
174 } |
|
175 |
|
176 .category:-moz-locale-dir(rtl) { |
|
177 border-top-right-radius: 5px; |
|
178 border-bottom-right-radius: 5px; |
|
179 } |
|
180 |
|
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 } |
|
189 |
|
190 .category:not([disabled]) { |
|
191 height: 52px; |
|
192 transition-property: height, opacity; |
|
193 transition-duration: 1s, 0.8s; |
|
194 } |
|
195 |
|
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 } |
|
202 |
|
203 .category-name { |
|
204 font-size: 150%; |
|
205 } |
|
206 |
|
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 } |
|
213 |
|
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 } |
|
223 |
|
224 .category-badge[value="0"] { |
|
225 visibility: hidden; |
|
226 } |
|
227 |
|
228 .category-icon { |
|
229 width: 32px; |
|
230 height: 32px; |
|
231 -moz-margin-start: 6px; |
|
232 } |
|
233 |
|
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 } |
|
270 |
|
271 |
|
272 /*** header ***/ |
|
273 |
|
274 #header { |
|
275 margin-bottom: 18px; |
|
276 } |
|
277 |
|
278 .nav-button { |
|
279 list-style-image: url(chrome://mozapps/skin/extensions/navigation.png); |
|
280 } |
|
281 |
|
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 } |
|
290 |
|
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 } |
|
298 |
|
299 #header-utils-btn { |
|
300 list-style-image: url("chrome://mozapps/skin/extensions/utilities.png"); |
|
301 -moz-margin-end: 18px; |
|
302 } |
|
303 |
|
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 } |
|
309 |
|
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 } |
|
320 |
|
321 @media (max-width: 600px) { |
|
322 #header-search { |
|
323 width: 12em; |
|
324 } |
|
325 } |
|
326 |
|
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 } |
|
331 |
|
332 #header-search > .textbox-input-box { |
|
333 -moz-padding-start: 15px; |
|
334 background: url("chrome://mozapps/skin/extensions/search.png") left no-repeat; |
|
335 } |
|
336 |
|
337 #header-search > .textbox-input-box:-moz-locale-dir(rtl) { |
|
338 background-position: right; |
|
339 } |
|
340 |
|
341 #header-search > .textbox-input-box > html|*.textbox-input::-moz-placeholder { |
|
342 color: #5C6470; |
|
343 opacity: 1.0; |
|
344 } |
|
345 |
|
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 } |
|
353 |
|
354 |
|
355 /*** sorters ***/ |
|
356 |
|
357 .sort-controls { |
|
358 -moz-appearance: none; |
|
359 } |
|
360 |
|
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 } |
|
372 |
|
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 } |
|
380 |
|
381 .sorter:hover { |
|
382 text-shadow: @loweredShadow@; |
|
383 background-color: #C0C3CB; |
|
384 } |
|
385 |
|
386 .sorter[checkState="1"] { |
|
387 list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif"); |
|
388 } |
|
389 |
|
390 .sorter[checkState="2"] { |
|
391 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif"); |
|
392 } |
|
393 |
|
394 .sorter .button-icon { |
|
395 -moz-margin-start: 4px; |
|
396 } |
|
397 |
|
398 |
|
399 /*** discover view ***/ |
|
400 |
|
401 .discover-spacer-before, |
|
402 .discover-spacer-after { |
|
403 -moz-box-flex: 1; |
|
404 } |
|
405 |
|
406 #discover-error .alert { |
|
407 max-width: 45em; |
|
408 -moz-box-flex: 1; |
|
409 } |
|
410 |
|
411 .discover-logo { |
|
412 list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png"); |
|
413 -moz-margin-end: 15px; |
|
414 } |
|
415 |
|
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 } |
|
422 |
|
423 .discover-description { |
|
424 text-align: justify; |
|
425 margin: 0 0 15px 0; |
|
426 } |
|
427 |
|
428 .discover-footer { |
|
429 text-align: justify; |
|
430 } |
|
431 |
|
432 |
|
433 /*** list ***/ |
|
434 |
|
435 .list { |
|
436 -moz-appearance: none; |
|
437 margin: 0; |
|
438 border: none; |
|
439 background-color: transparent; |
|
440 } |
|
441 |
|
442 .addon { |
|
443 border-bottom: 1px solid #B6B1B9; |
|
444 padding: 5px; |
|
445 color: #373D48; |
|
446 } |
|
447 |
|
448 .details { |
|
449 cursor: pointer; |
|
450 margin: 0; |
|
451 -moz-margin-start: 10px; |
|
452 } |
|
453 |
|
454 .icon-container { |
|
455 width: 48px; |
|
456 height: 48px; |
|
457 margin: 3px 7px; |
|
458 -moz-box-align: center; |
|
459 -moz-box-pack: center; |
|
460 } |
|
461 |
|
462 .icon { |
|
463 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png"); |
|
464 max-width: 48px; |
|
465 max-height: 48px; |
|
466 } |
|
467 |
|
468 .addon[active="false"] .icon { |
|
469 filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale"); |
|
470 } |
|
471 |
|
472 .addon-view[type="theme"] .icon { |
|
473 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png"); |
|
474 } |
|
475 |
|
476 .addon-view[type="locale"] .icon { |
|
477 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png"); |
|
478 } |
|
479 |
|
480 .addon-view[type="plugin"] .icon { |
|
481 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png"); |
|
482 } |
|
483 |
|
484 .addon-view[type="dictionary"] .icon { |
|
485 list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png"); |
|
486 } |
|
487 |
|
488 .addon-view[type="experiment"] .icon { |
|
489 list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png"); |
|
490 } |
|
491 |
|
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 } |
|
501 |
|
502 .creator { |
|
503 font-weight: bold; |
|
504 } |
|
505 |
|
506 .creator .text-link { |
|
507 color: #0066CC; |
|
508 } |
|
509 |
|
510 .description-container { |
|
511 margin-top: 8px; |
|
512 -moz-margin-start: 6px; |
|
513 -moz-box-align: center; |
|
514 } |
|
515 |
|
516 .description { |
|
517 margin: 0; |
|
518 } |
|
519 |
|
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 } |
|
528 |
|
529 .content-container, |
|
530 .basicinfo-container { |
|
531 -moz-box-align: start; |
|
532 } |
|
533 |
|
534 .addon[status="installing"] > .content-container { |
|
535 -moz-box-align: stretch; |
|
536 } |
|
537 |
|
538 .update-info-container { |
|
539 -moz-box-align: center; |
|
540 } |
|
541 |
|
542 .advancedinfo-container, |
|
543 .update-available { |
|
544 -moz-box-align: end; |
|
545 } |
|
546 |
|
547 .install-status-container { |
|
548 -moz-box-pack: end; |
|
549 -moz-box-align: end; |
|
550 } |
|
551 |
|
552 .name-outer-container { |
|
553 -moz-box-pack: center; |
|
554 } |
|
555 |
|
556 .relnotes-toggle-container, |
|
557 .icon-outer-container { |
|
558 -moz-box-pack: start; |
|
559 } |
|
560 |
|
561 .status-container, |
|
562 .control-container { |
|
563 -moz-box-pack: end; |
|
564 } |
|
565 |
|
566 .addon-view .warning { |
|
567 color: #916D15; |
|
568 } |
|
569 |
|
570 .addon-view .error { |
|
571 color: #864441; |
|
572 } |
|
573 |
|
574 .addon-view .pending { |
|
575 color: #1B7123; |
|
576 } |
|
577 |
|
578 .addon-view[pending="disable"] .pending, |
|
579 .addon-view[pending="uninstall"] .pending { |
|
580 color: #62666E; |
|
581 } |
|
582 |
|
583 .addon-view[notification="warning"] { |
|
584 background-image: linear-gradient(rgba(255, 255, 0, 0.2), rgba(255, 255, 0, 0.1)); |
|
585 } |
|
586 |
|
587 .addon-view[notification="error"] { |
|
588 background-image: linear-gradient(rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.1)); |
|
589 } |
|
590 |
|
591 .addon-view[notification="info"] { |
|
592 background-image: linear-gradient(rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.1)); |
|
593 } |
|
594 |
|
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 } |
|
600 |
|
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 } |
|
605 |
|
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 } |
|
614 |
|
615 .addon[show-relnotes] .relnotes-container { |
|
616 opacity: 1; |
|
617 transition-property: height, opacity; |
|
618 transition-duration: 0.5s, 0.5s; |
|
619 } |
|
620 |
|
621 .addon .relnotes-header { |
|
622 font-weight: bold; |
|
623 margin: 10px 0; |
|
624 } |
|
625 |
|
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 } |
|
635 |
|
636 .addon .relnotes-toggle > .button-box > .button-icon { |
|
637 -moz-padding-start: 4px; |
|
638 } |
|
639 |
|
640 .addon[show-relnotes] .relnotes-toggle { |
|
641 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif"); |
|
642 } |
|
643 |
|
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 } |
|
649 |
|
650 .addon-view[active="false"], |
|
651 .addon-view[active="false"] .name-container { |
|
652 color: #686A6B; |
|
653 } |
|
654 |
|
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 } |
|
661 |
|
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 } |
|
668 |
|
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 } |
|
677 |
|
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 } |
|
685 |
|
686 .addon[selected] { |
|
687 background-color: rgba(105, 125, 149, 0.39); |
|
688 color: black; |
|
689 } |
|
690 |
|
691 .addon[selected] .name-container { |
|
692 text-shadow: @loweredShadow@; |
|
693 } |
|
694 |
|
695 .addon[active="false"][selected] .name-container { |
|
696 color: #3F3F3F; |
|
697 } |
|
698 |
|
699 |
|
700 /*** search view ***/ |
|
701 |
|
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 } |
|
708 |
|
709 #search-filter-label { |
|
710 font-weight: bold; |
|
711 color: #666; |
|
712 } |
|
713 |
|
714 .search-filter-radio { |
|
715 -moz-appearance: none; |
|
716 padding: 0 10px; |
|
717 margin: 0 3px; |
|
718 border-radius: 10000px; |
|
719 } |
|
720 |
|
721 .search-filter-radio[selected] { |
|
722 text-shadow: @loweredShadow@; |
|
723 background-color: #C0C3CB; |
|
724 box-shadow: inset #A3A6AC 0 1px 1px, @loweredShadow@; |
|
725 } |
|
726 |
|
727 .search-filter-radio:hover { |
|
728 text-shadow: @loweredShadow@; |
|
729 background-color: #C0C3CB; |
|
730 } |
|
731 |
|
732 .search-filter-radio .radio-check { |
|
733 display: none; |
|
734 } |
|
735 |
|
736 .search-filter-radio .radio-icon { |
|
737 display: none; |
|
738 } |
|
739 |
|
740 #search-allresults-link { |
|
741 margin-top: 1em; |
|
742 margin-bottom: 2em; |
|
743 } |
|
744 |
|
745 /*** detail view ***/ |
|
746 |
|
747 #detail-view .loading { |
|
748 opacity: 0; |
|
749 } |
|
750 |
|
751 #detail-view[loading-extended] .loading { |
|
752 opacity: 1; |
|
753 transition-property: opacity; |
|
754 transition-duration: 1s; |
|
755 } |
|
756 |
|
757 .detail-view-container { |
|
758 padding: 0 2em 2em 2em; |
|
759 font-size: 110%; |
|
760 } |
|
761 |
|
762 #detail-notifications { |
|
763 margin-top: 1em; |
|
764 margin-bottom: 2em; |
|
765 } |
|
766 |
|
767 #detail-notifications .warning, |
|
768 #detail-notifications .pending, |
|
769 #detail-notifications .error { |
|
770 -moz-margin-start: 0; |
|
771 } |
|
772 |
|
773 #detail-icon-container { |
|
774 width: 64px; |
|
775 -moz-margin-end: 10px; |
|
776 margin-top: 6px; |
|
777 } |
|
778 |
|
779 #detail-icon { |
|
780 max-width: 64px; |
|
781 max-height: 64px; |
|
782 } |
|
783 |
|
784 #detail-summary { |
|
785 margin-bottom: 2em; |
|
786 } |
|
787 |
|
788 #detail-name-container { |
|
789 font-size: 200%; |
|
790 } |
|
791 |
|
792 #detail-screenshot { |
|
793 -moz-margin-end: 2em; |
|
794 max-width: 300px; |
|
795 max-height: 300px; |
|
796 } |
|
797 |
|
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 } |
|
805 |
|
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 } |
|
810 |
|
811 #detail-desc-container { |
|
812 margin-bottom: 2em; |
|
813 } |
|
814 |
|
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 } |
|
823 |
|
824 #detail-fulldesc { |
|
825 margin-top: 1em; |
|
826 } |
|
827 |
|
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 } |
|
835 |
|
836 #detail-contrib-description { |
|
837 font-style: italic; |
|
838 margin-bottom: 1em; |
|
839 color: #373D48; |
|
840 } |
|
841 |
|
842 #detail-contrib-suggested { |
|
843 color: grey; |
|
844 font-weight: bold; |
|
845 } |
|
846 |
|
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 } |
|
857 |
|
858 #detail-contrib-btn .button-box { |
|
859 padding: 0 6px 1px 6px; |
|
860 } |
|
861 |
|
862 #detail-contrib-btn .button-icon { |
|
863 -moz-margin-end: 3px; |
|
864 } |
|
865 |
|
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 } |
|
875 |
|
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 } |
|
882 |
|
883 #detail-grid { |
|
884 margin-bottom: 2em; |
|
885 } |
|
886 |
|
887 #detail-grid > columns > column:first-child { |
|
888 min-width: 15em; |
|
889 max-width: 25em; |
|
890 } |
|
891 |
|
892 .detail-row[first-row="true"], |
|
893 .detail-row-complex[first-row="true"], |
|
894 setting[first-row="true"] { |
|
895 border-top: none; |
|
896 } |
|
897 |
|
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 } |
|
906 |
|
907 #detail-controls { |
|
908 margin-bottom: 1em; |
|
909 } |
|
910 |
|
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 } |
|
915 |
|
916 setting[first-row="true"] { |
|
917 margin-top: 2em; |
|
918 } |
|
919 |
|
920 setting { |
|
921 -moz-box-align: start; |
|
922 } |
|
923 |
|
924 .preferences-alignment { |
|
925 min-height: 30px; |
|
926 -moz-box-align: center; |
|
927 } |
|
928 |
|
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 } |
|
936 |
|
937 .preferences-description:empty { |
|
938 display: none; |
|
939 } |
|
940 |
|
941 setting[type="radio"] > radiogroup { |
|
942 -moz-box-orient: horizontal; |
|
943 } |
|
944 |
|
945 |
|
946 /*** creator ***/ |
|
947 |
|
948 .creator > label { |
|
949 -moz-margin-start: 0; |
|
950 -moz-margin-end: 0; |
|
951 } |
|
952 |
|
953 .creator > .text-link { |
|
954 margin-top: 1px; |
|
955 margin-bottom: 1px; |
|
956 } |
|
957 |
|
958 |
|
959 /*** rating ***/ |
|
960 |
|
961 .meta-rating { |
|
962 -moz-margin-end: 0; |
|
963 margin-top: 2px; |
|
964 } |
|
965 |
|
966 .meta-rating > .star { |
|
967 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png"); |
|
968 padding: 0 1px; |
|
969 } |
|
970 |
|
971 .meta-rating > .star[on="true"] { |
|
972 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png"); |
|
973 } |
|
974 |
|
975 |
|
976 /*** download progress ***/ |
|
977 |
|
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 } |
|
987 |
|
988 .download-progress[mode="undetermined"] .progress { |
|
989 -moz-binding: url("chrome://global/content/bindings/progressmeter.xml#progressmeter-undetermined"); |
|
990 } |
|
991 |
|
992 .download-progress[mode="undetermined"] { |
|
993 border-color: #2E773A; |
|
994 } |
|
995 |
|
996 .download-progress[mode="undetermined"] .status-container { |
|
997 padding: 0 2px; |
|
998 } |
|
999 |
|
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 } |
|
1010 |
|
1011 .download-progress .start-cap { |
|
1012 -moz-margin-start: -1px; |
|
1013 -moz-border-end-width: 0; |
|
1014 } |
|
1015 |
|
1016 .download-progress .end-cap { |
|
1017 -moz-margin-end: -1px; |
|
1018 -moz-border-start-width: 0px !important; |
|
1019 } |
|
1020 |
|
1021 .download-progress .progress .progress-bar { |
|
1022 border-left-width: 0; |
|
1023 border-right-width: 0; |
|
1024 min-height: 21px; |
|
1025 } |
|
1026 |
|
1027 .download-progress .progress { |
|
1028 -moz-appearance: none; |
|
1029 background-color: transparent; |
|
1030 padding: 0; |
|
1031 margin: 0; |
|
1032 border: none; |
|
1033 } |
|
1034 |
|
1035 .download-progress .start-cap, |
|
1036 .download-progress .end-cap { |
|
1037 width: 4px; |
|
1038 } |
|
1039 |
|
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 } |
|
1044 |
|
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 } |
|
1049 |
|
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 } |
|
1059 |
|
1060 .download-progress .cancel .button-text { |
|
1061 display: none; |
|
1062 } |
|
1063 |
|
1064 .download-progress .cancel .button-icon { |
|
1065 -moz-margin-start: 0; |
|
1066 } |
|
1067 |
|
1068 .download-progress .cancel { |
|
1069 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png'); |
|
1070 } |
|
1071 |
|
1072 .download-progress .status-container { |
|
1073 -moz-box-align: center; |
|
1074 } |
|
1075 |
|
1076 .download-progress .status { |
|
1077 text-shadow: @loweredShadow@; |
|
1078 } |
|
1079 |
|
1080 |
|
1081 /*** install status ***/ |
|
1082 |
|
1083 .install-status { |
|
1084 -moz-box-align: center; |
|
1085 } |
|
1086 |
|
1087 |
|
1088 /*** check for updates ***/ |
|
1089 |
|
1090 #updates-container { |
|
1091 -moz-box-align: center; |
|
1092 } |
|
1093 |
|
1094 #updates-installed, |
|
1095 #updates-downloaded { |
|
1096 color: #3C735C; |
|
1097 font-weight: bold; |
|
1098 } |
|
1099 |
|
1100 #update-selected { |
|
1101 margin: 12px; |
|
1102 } |
|
1103 |
|
1104 |
|
1105 /*** buttons ***/ |
|
1106 |
|
1107 .addon-control[disabled="true"] { |
|
1108 display: none; |
|
1109 } |
|
1110 |
|
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 } |
|
1122 |
|
1123 .text-link { |
|
1124 color: #3386D5; |
|
1125 } |
|
1126 |
|
1127 .button-link:hover, |
|
1128 .text-link:hover { |
|
1129 color: #3DA1FF; |
|
1130 } |
|
1131 |
|
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 } |
|
1138 |
|
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 } |
|
1150 |
|
1151 .header-button .toolbarbutton-text { |
|
1152 display: none; |
|
1153 } |
|
1154 |
|
1155 .header-button[disabled="true"] .toolbarbutton-icon { |
|
1156 opacity: 0.4; |
|
1157 } |
|
1158 |
|
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 } |
|
1165 |
|
1166 /*** telemetry experiments ***/ |
|
1167 |
|
1168 #detail-experiment-container { |
|
1169 font-size: 80%; |
|
1170 margin-bottom: 1em; |
|
1171 } |
|
1172 |
|
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 } |
|
1182 |
|
1183 .addon .experiment-bullet, |
|
1184 #detail-experiment-bullet { |
|
1185 fill: rgb(158, 158, 158); |
|
1186 } |
|
1187 |
|
1188 .addon[active="true"] .experiment-bullet, |
|
1189 #detail-view[active="true"] #detail-experiment-bullet { |
|
1190 fill: rgb(106, 201, 20); |
|
1191 } |