update both themes for toolkit winstripe changes up to 2010-08-13
[themes.git] / EarlyBlue / mozapps / extensions / extensions.css
... / ...
CommitLineData
1/* ***** BEGIN LICENSE BLOCK *****
2 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
3 *
4 * The contents of this file are subject to the Mozilla Public License Version
5 * 1.1 (the "License"); you may not use this file except in compliance with
6 * the License. You may obtain a copy of the License at
7 * http://www.mozilla.org/MPL/
8 *
9 * Software distributed under the License is distributed on an "AS IS" basis,
10 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
11 * for the specific language governing rights and limitations under the
12 * License.
13 *
14 * The Original Code is the Extension Manager UI.
15 *
16 * The Initial Developer of the Original Code is
17 * the Mozilla Foundation.
18 * Portions created by the Initial Developer are Copyright (C) 2010
19 * the Initial Developer. All Rights Reserved.
20 *
21 * Contributor(s):
22 * Blair McBride <bmcbride@mozilla.com>
23 *
24 * Alternatively, the contents of this file may be used under the terms of
25 * either the GNU General Public License Version 2 or later (the "GPL"), or
26 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
27 * in which case the provisions of the GPL or the LGPL are applicable instead
28 * of those above. If you wish to allow use of your version of this file only
29 * under the terms of either the GPL or the LGPL, and not to allow others to
30 * use your version of this file under the terms of the MPL, indicate your
31 * decision by deleting the provisions above and replace them with the notice
32 * and other provisions required by the GPL or the LGPL. If you do not delete
33 * the provisions above, a recipient may use your version of this file under
34 * the terms of any one of the MPL, the GPL or the LGPL.
35 *
36 * ***** END LICENSE BLOCK ***** */
37
38
39.pane-splitter {
40 -moz-appearance: none;
41 border: none;
42 -moz-border-start: 1px solid #666699;
43 background-color: transparent;
44 background-image: none;
45 min-width: 1px;
46}
47
48.view-pane {
49 background-color: #FFFFFF;
50}
51
52
53/*** category selector ***/
54
55#categories {
56 -moz-appearance: none;
57 border: none;
58 margin: 0px;
59}
60
61.category {
62 border: none;
63 -moz-appearance: none;
64 padding: 10px 4px;
65 -moz-box-align: center;
66 overflow: hidden;
67 min-height: 0px;
68}
69
70.category[disabled] {
71 height: 0px;
72 opacity: 0;
73 -moz-transition-property: height, opacity;
74 -moz-transition-duration: 1s, 0.8s;
75}
76
77.category:not([disabled]) {
78 height: 52px;
79 -moz-transition-property: height, opacity;
80 -moz-transition-duration: 1s, 0.8s;
81}
82
83.category[selected] {
84 background-color: #9999CC;
85 color: #000000;
86}
87
88.category-name {
89 font-size: 150%;
90}
91
92.category-badge {
93 background-color: #666699;
94 padding: 2px 8px;
95 margin: 6px 0px;
96 border: 1px outset #666699;
97 /* -moz-border-radius: 100%; */
98 color: #FFFFFF;
99 font-weight: bold;
100 text-align: center;
101}
102
103.category-badge[value="0"] {
104 visibility: hidden;
105}
106
107.category-icon {
108 width: 32px;
109 height: 32px;
110 -moz-margin-start: 6px;
111}
112
113#category-search > .category-icon {
114 list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
115}
116#category-discover > .category-icon {
117 list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
118}
119#category-languages > .category-icon {
120 list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
121}
122#category-searchengines > .category-icon {
123 list-style-image: url("chrome://mozapps/skin/extensions/category-searchengines.png");
124}
125#category-extensions > .category-icon {
126 list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
127}
128#category-themes > .category-icon {
129 list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
130}
131#category-plugins > .category-icon {
132 list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
133}
134
135
136/*** header ***/
137
138#header {
139 background-color: #666699;
140 border: 1px inset #666699;
141 padding: 8px;
142 margin: 0px;
143 -moz-box-align: center;
144 height: 4.5em;
145}
146
147#header-name, #header-link {
148 color: #FFFFFF;
149}
150
151#header-name {
152 font-size: 180%;
153}
154
155#header-link {
156 -moz-appearance: none;
157 border: none;
158 background: transparent;
159 font-size: 120%;
160 cursor: pointer;
161 list-style-image: url("chrome://mozapps/skin/extensions/go-back.png");
162}
163
164#header-link .button-icon {
165 -moz-margin-end: 6px;
166}
167
168#header-searching {
169 list-style-image: url("chrome://global/skin/icons/loading.gif");
170}
171
172.view-header {
173 background: #9999CC;
174 padding: 4px;
175 margin: 0px;
176 border-bottom: 1px solid #666699;
177}
178
179
180/*** sorters ***/
181
182.sort-controls {
183 -moz-appearance: none;
184}
185
186.sorter {
187 -moz-appearance: none;
188 border: none;
189 background-color: transparent;
190 /* -moz-border-radius: 100%; */
191 padding: 0px 6px;
192 margin: 0px 6px;
193 min-width: 12px !important;
194 -moz-box-direction: reverse;
195}
196
197.sorter[checkState="1"],
198.sorter[checkState="2"] {
199 background-color: #666699;
200}
201
202.sorter[checkState="1"] {
203 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
204}
205
206.sorter[checkState="2"] {
207 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
208}
209
210.sorter .button-icon {
211 -moz-margin-start: 4px;
212}
213
214
215/*** empty list notification ***/
216
217.empty-list-notice {
218 -moz-box-align: center;
219}
220
221.empty-list-notice > button {
222 margin: 20px;
223}
224
225
226/*** list ***/
227
228.list {
229 -moz-appearance: none;
230 margin: 0px;
231 border: none;
232}
233
234.addon[status="installed"], .addon[status="installing"] {
235 background-color: #CCD0DD;
236 /* -moz-border-radius: 10px; */
237 border: 1px solid #9999CC;
238 padding: 6px 7px;
239 margin: 3px 8px;
240}
241
242.addon[status="installing"] {
243 -moz-box-align: center;
244 border-color: #336699;
245}
246
247.addon[selected]:not([status="uninstalled"]) {
248 background: #DDDDDD;
249 border-style: inset;
250 color: inherit;
251}
252
253.addon[status="installed"][selected]:not([pending="true"]) {
254 border: none;
255 padding: 8px 9px;
256}
257
258.addon[status="installed"][active="false"] .fade {
259 opacity: 0.5;
260}
261
262.addon[status="installed"][pending="true"] {
263 border-color: red;
264}
265
266.addon[selected] {
267 /* color: -moz-dialogtext; */
268}
269
270.addon[selected] .text-link {
271 /* color: -moz-nativehyperlinktext; */
272}
273
274.addon .toggle-more {
275 /* -moz-border-radius: 100%; */
276 padding: 0px 6px;
277 margin: 0px 6px;
278 min-width: 12px !important;
279 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
280 -moz-box-direction: reverse;
281 border: 1px solid transparent;
282 background: transparent;
283 cursor: pointer;
284}
285
286.addon .toggle-more > .button-box > .button-icon {
287 -moz-padding-start: 4px;
288}
289
290.addon[show-extra] .toggle-more {
291 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
292}
293
294.addon .toggle-more:hover {
295 background-color: #CCD0DD;
296 border: 1px outset #CCD0DD;
297}
298
299.addon[selected] .toggle-more:hover {
300 background-color: #CCD0DD;
301 border: 1px outset #CCD0DD;
302}
303
304.addon .extra-details {
305 height: 0px;
306 overflow: hidden;
307 opacity: 0;
308 text-align: end;
309 -moz-transition-property: height, opacity;
310 -moz-transition-duration: 0.5s, 0.5s;
311}
312
313.addon[show-extra] .extra-details {
314 opacity: 1;
315 -moz-transition-property: height, opacity;
316 -moz-transition-duration: 0.5s, 0.5s;
317}
318
319.addon .icon {
320 margin: 7px 5px;
321 width: 32px;
322 height: 32px;
323 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
324}
325
326.addon[type="theme"] .icon {
327 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
328}
329
330.addon[type="locale"] .icon {
331 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
332}
333
334.addon[type="plugin"] .icon {
335 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
336}
337
338.addon .name-container {
339 -moz-box-align: end;
340}
341
342.addon .name,
343.addon .version {
344 font-size: 150%;
345 margin-bottom: 0px;
346}
347
348.addon .disabled-postfix {
349 font-size: 130%;
350}
351
352.addon .description {
353 margin-top: 8px;
354 -moz-margin-start: 6px;
355}
356
357.addon .warning {
358 color: #FF0000;
359 -moz-box-align: start;
360}
361
362.addon .warning-icon {
363 opacity: 0.7;
364 list-style-image: url("chrome://global/skin/icons/warning-16.png");
365}
366
367.addon[selected] .warning-icon {
368 opacity: 1;
369}
370
371.addon .details-container {
372 -moz-box-align: end;
373 -moz-margin-start: 20px;
374}
375
376.addon .control-container {
377 -moz-box-align: center;
378 -moz-box-pack: end;
379 margin-top: 6px;
380}
381
382.addon[selected] .details-container {
383 border-color: #9999CC;
384}
385
386
387/*** item - uninstalled ***/
388
389.addon[status="uninstalled"] {
390 border: none;
391}
392
393.addon[status="uninstalled"] > .container {
394 -moz-box-align: center;
395 padding: 4px 20px;
396 background-color: #808080;
397 -moz-border-radius: 8px;
398 font-size: 120%;
399}
400
401.addon[status="uninstalled"][selected] {
402 background-color: transparent;
403}
404
405
406
407/*** search view ***/
408
409.search-filter {
410 padding: 20px;
411 -moz-box-align: center;
412 background-color: #FFFFFF;
413 font-size: 120%;
414}
415
416
417/*** detail view ***/
418
419#detail-view[active="false"] .fade {
420 opacity: 0.5;
421}
422
423#detail-view > .loading {
424 opacity: 0;
425}
426
427#detail-view:not([loading]) > .loading {
428 visibility: collapse;
429}
430
431#detail-view[loading-extended] > .loading {
432 -moz-box-align: center;
433 -moz-box-pack: center;
434 opacity: 1;
435 -moz-transition-property: opacity;
436 -moz-transition-duration: 1s;
437}
438
439#detail-view > .loading > image {
440 list-style-image: url("chrome://global/skin/icons/loading.gif");
441}
442
443.detail-view-container {
444 overflow: auto;
445 padding: 10px 20px;
446}
447
448.detail-basicinfo {
449 padding: 10px 0px;
450 -moz-box-align: center;
451}
452
453.detail-extra {
454 margin-top: 20px;
455}
456
457#detail-desc {
458 min-height: 40px;
459 margin-bottom: 20px;
460}
461
462#detail-icon {
463 width: 32px;
464 height: 32px;
465 -moz-margin-end: 10px;
466 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
467}
468
469#detail-view[type="theme"] #detail-icon {
470 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
471}
472
473#detail-view[type="locale"] #detail-icon {
474 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
475}
476
477#detail-view[type="plugin"] #detail-icon {
478 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
479}
480
481#detail-name {
482 font-size: 200%;
483}
484
485#detail-screenshot {
486 width: 140px;
487 height: 140px;
488 background-color: blue;
489 margin: 0px 10px 0px 0px;
490}
491
492.detail-prefs {
493 -moz-box-align: start;
494}
495
496.meta-label {
497 font-weight: bold;
498}
499
500#detail-notification {
501 -moz-box-align: center;
502 -moz-box-pack: center;
503 margin: 0px 50px;
504 padding: 4px 20px;
505 background-color: #FFFFCC;
506 /* -moz-border-radius: 8px; */
507 font-size: 120%;
508 border: 1px solid #666699;
509}
510
511
512/*** creator ***/
513
514.creator > label {
515 -moz-margin-start: 0px;
516 -moz-margin-end: 0px;
517}
518
519.creator > .text-link {
520 margin-top: 1px;
521 margin-bottom: 1px;
522}
523
524
525/*** rating ***/
526
527.meta-rating {
528 -moz-margin-start: 0px;
529 -moz-margin-end: 0px;
530 vertical-align: text-top;
531}
532
533.meta-rating[showrating="average"] > .star {
534 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
535 padding: 0px 1px;
536}
537
538.meta-rating[showrating="user"] > .star {
539 list-style-image: url("chrome://mozapps/skin/extensions/rating-unrated.png");
540 padding: 2px 3px;
541}
542
543.meta-rating > .star[on="true"],
544.meta-rating[showrating="user"] > .star[hover] {
545 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
546 padding: 0px 1px;
547}
548
549
550/*** download progress ***/
551
552.download-progress {
553 background-color: #CCD0DD;
554 /* -moz-border-radius: 100%; */
555 border: 1px solid #808080;
556 width: 200px;
557 height: 24px;
558 margin: 0px 8px;
559}
560
561.download-progress .start-cap,
562.download-progress[complete] .end-cap,
563.download-progress .progress .progress-bar {
564 background-color: #336699;
565}
566
567.download-progress .progress {
568 background-color: transparent;
569}
570
571.download-progress .start-cap, .download-progress .end-cap {
572 width: 12px;
573}
574
575.download-progress .start-cap:-moz-locale-dir(ltr),
576.download-progress .end-cap:-moz-locale-dir(rtl) {
577 -moz-border-radius: 100% 0 0 100%;
578}
579
580.download-progress .end-cap:-moz-locale-dir(ltr),
581.download-progress .start-cap:-moz-locale-dir(rtl) {
582 -moz-border-radius: 0 100% 100% 0;
583}
584
585.download-progress .progress {
586 -moz-appearance: none;
587 padding: 0px;
588 margin: 0px;
589 border: none;
590}
591
592.download-progress .pause, .download-progress .cancel {
593 -moz-appearance: none;
594 background-color: #CCD0DD;
595 border-width: 1px 0px 0px 1px;
596 padding-right: 1px;
597 border-style: solid;
598 -moz-border-top-colors: #FFFFFF;
599 -moz-border-left-colors: #FFFFFF;
600 /* -moz-border-radius: 100%; */
601 min-width: 16px;
602 width: 16px;
603 height: 16px;
604 margin: 3px;
605}
606
607.download-progress .pause {
608 list-style-image: url('chrome://mozapps/skin/extensions/pause.png');
609}
610
611.download-progress .cancel {
612 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
613}
614
615.download-progress .status-container {
616 -moz-box-align: center;
617}
618
619
620/*** install status ***/
621
622.install-status {
623 -moz-box-align: center;
624}
625
626
627/*** check for updates ***/
628
629#updates-container {
630 -moz-box-align: center;
631}
632
633#updates-installed, #updates-downloaded {
634 color: #00CC00;
635 font-weight: bold;
636}
637
638
639/*** buttons ***/
640
641.addon-control {
642 padding: 0px 5px;
643}
644
645.addon-control[disabled="true"] {
646 display: none;
647}
648
649.contribute {
650 -moz-padding-start: 20px;
651 -moz-padding-end: 4px;
652}
653
654.button-link {
655 background: transparent;
656 border: none;
657 text-decoration: underline;
658 color: #CCCCFF;
659 cursor: pointer;
660 min-width: 0;
661}