improve positioning and coloring in page info and properties window
[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.view-header {
169 background: #9999CC;
170 padding: 4px;
171 margin: 0px;
172 border-bottom: 1px solid #666699;
173}
174
175
176/*** sorters ***/
177
178.sort-controls {
179 -moz-appearance: none;
180}
181
182.sorter {
183 -moz-appearance: none;
184 border: none;
185 background-color: transparent;
186 /* -moz-border-radius: 100%; */
187 padding: 0px 6px;
188 margin: 0px 6px;
189 min-width: 12px !important;
190 -moz-box-direction: reverse;
191}
192
193.sorter[checkState="1"],
194.sorter[checkState="2"] {
195 background-color: #666699;
196}
197
198.sorter[checkState="1"] {
199 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
200}
201
202.sorter[checkState="2"] {
203 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
204}
205
206.sorter .button-icon {
207 -moz-margin-start: 4px;
208}
209
210
211/*** empty list notification ***/
212
213.empty-list-notice {
214 -moz-box-align: center;
215}
216
217.empty-list-notice > button {
218 margin: 20px;
219}
220
221
222/*** list ***/
223
224.list {
225 -moz-appearance: none;
226 margin: 0px;
227 border: none;
228}
229
230.addon[status="installed"], .addon[status="installing"] {
231 background-color: #CCD0DD;
232 /* -moz-border-radius: 10px; */
233 border: 1px solid #9999CC;
234 padding: 6px 7px;
235 margin: 3px 8px;
236}
237
238.addon[status="installing"] {
239 -moz-box-align: center;
240 border-color: #336699;
241}
242
243.addon[selected]:not([status="uninstalled"]) {
244 background: #DDDDDD;
245 border-style: inset;
246 color: inherit;
247}
248
249.addon[status="installed"][selected]:not([pending="true"]) {
250 border: none;
251 padding: 8px 9px;
252}
253
254.addon[status="installed"][active="false"] .fade {
255 opacity: 0.5;
256}
257
258.addon[status="installed"][pending="true"] {
259 border-color: red;
260}
261
262.addon[selected] {
263 /* color: -moz-dialogtext; */
264}
265
266.addon[selected] .text-link {
267 /* color: -moz-nativehyperlinktext; */
268}
269
270.addon .toggle-more {
271 /* -moz-border-radius: 100%; */
272 padding: 0px 6px;
273 margin: 0px 6px;
274 min-width: 12px !important;
275 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
276 -moz-box-direction: reverse;
277 border: 1px solid transparent;
278 background: transparent;
279 cursor: pointer;
280}
281
282.addon .toggle-more > .button-box > .button-icon {
283 -moz-padding-start: 4px;
284}
285
286.addon[show-extra] .toggle-more {
287 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
288}
289
290.addon .toggle-more:hover {
291 background-color: #CCD0DD;
292 border: 1px outset #CCD0DD;
293}
294
295.addon[selected] .toggle-more:hover {
296 background-color: #CCD0DD;
297 border: 1px outset #CCD0DD;
298}
299
300.addon .extra-details {
301 height: 0px;
302 overflow: hidden;
303 opacity: 0;
304 text-align: end;
305 -moz-transition-property: height, opacity;
306 -moz-transition-duration: 0.5s, 0.5s;
307}
308
309.addon[show-extra] .extra-details {
310 opacity: 1;
311 -moz-transition-property: height, opacity;
312 -moz-transition-duration: 0.5s, 0.5s;
313}
314
315.addon .icon {
316 margin: 7px 5px;
317 width: 32px;
318 height: 32px;
319 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
320}
321
322.addon[type="theme"] .icon {
323 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
324}
325
326.addon[type="locale"] .icon {
327 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
328}
329
330.addon[type="plugin"] .icon {
331 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
332}
333
334.addon .name-container {
335 -moz-box-align: end;
336}
337
338.addon .name,
339.addon .version {
340 font-size: 150%;
341 margin-bottom: 0px;
342}
343
344.addon .disabled-postfix {
345 font-size: 130%;
346}
347
348.addon .description {
349 margin-top: 8px;
350 -moz-margin-start: 6px;
351}
352
353.addon .warning {
354 color: #FF0000;
355 -moz-box-align: start;
356}
357
358.addon .warning-icon {
359 opacity: 0.7;
360 list-style-image: url("chrome://global/skin/icons/warning-16.png");
361}
362
363.addon[selected] .warning-icon {
364 opacity: 1;
365}
366
367.addon .details-container {
368 -moz-box-align: end;
369 -moz-margin-start: 20px;
370}
371
372.addon .control-container {
373 -moz-box-align: center;
374 -moz-box-pack: end;
375 margin-top: 6px;
376}
377
378.addon[selected] .details-container {
379 border-color: #9999CC;
380}
381
382
383/*** item - uninstalled ***/
384
385.addon[status="uninstalled"] {
386 border: none;
387}
388
389.addon[status="uninstalled"] > .container {
390 -moz-box-align: center;
391 padding: 4px 20px;
392 background-color: #808080;
393 -moz-border-radius: 8px;
394 font-size: 120%;
395}
396
397.addon[status="uninstalled"][selected] {
398 background-color: transparent;
399}
400
401
402
403/*** search view ***/
404
405.search-filter {
406 padding: 20px;
407 -moz-box-align: center;
408 background-color: #FFFFFF;
409 font-size: 120%;
410}
411
412
413/*** detail view ***/
414
415#detail-view[active="false"] .fade {
416 opacity: 0.5;
417}
418
419#detail-view > .loading {
420 opacity: 0;
421}
422
423#detail-view:not([loading]) > .loading {
424 visibility: collapse;
425}
426
427#detail-view[loading-extended] > .loading {
428 -moz-box-align: center;
429 -moz-box-pack: center;
430 opacity: 1;
431 -moz-transition-property: opacity;
432 -moz-transition-duration: 1s;
433}
434
435#detail-view > .loading > image {
436 list-style-image: url("chrome://global/skin/icons/loading.gif");
437}
438
439.detail-view-container {
440 overflow: auto;
441 padding: 10px 20px;
442}
443
444.detail-basicinfo {
445 padding: 10px 0px;
446 -moz-box-align: center;
447}
448
449.detail-extra {
450 margin-top: 20px;
451}
452
453#detail-desc {
454 min-height: 40px;
455 margin-bottom: 20px;
456}
457
458#detail-icon {
459 width: 32px;
460 height: 32px;
461 -moz-margin-end: 10px;
462 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
463}
464
465#detail-view[type="theme"] #detail-icon {
466 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
467}
468
469#detail-view[type="locale"] #detail-icon {
470 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
471}
472
473#detail-view[type="plugin"] #detail-icon {
474 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
475}
476
477#detail-name {
478 font-size: 200%;
479}
480
481#detail-screenshot {
482 width: 140px;
483 height: 140px;
484 background-color: blue;
485 margin: 0px 10px 0px 0px;
486}
487
488.detail-prefs {
489 -moz-box-align: start;
490}
491
492.meta-label {
493 font-weight: bold;
494}
495
496#detail-notification {
497 -moz-box-align: center;
498 -moz-box-pack: center;
499 margin: 0px 50px;
500 padding: 4px 20px;
501 background-color: #FFFFCC;
502 /* -moz-border-radius: 8px; */
503 font-size: 120%;
504 border: 1px solid #666699;
505}
506
507
508/*** creator ***/
509
510.creator > label {
511 -moz-margin-start: 0px;
512 -moz-margin-end: 0px;
513}
514
515.creator > .text-link {
516 margin-top: 1px;
517 margin-bottom: 1px;
518}
519
520
521/*** rating ***/
522
523.meta-rating {
524 -moz-margin-start: 0px;
525 -moz-margin-end: 0px;
526 vertical-align: text-top;
527}
528
529.meta-rating[showrating="average"] > .star {
530 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
531 padding: 0px 1px;
532}
533
534.meta-rating[showrating="user"] > .star {
535 list-style-image: url("chrome://mozapps/skin/extensions/rating-unrated.png");
536 padding: 2px 3px;
537}
538
539.meta-rating > .star[on="true"],
540.meta-rating[showrating="user"] > .star[hover] {
541 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
542 padding: 0px 1px;
543}
544
545
546/*** download progress ***/
547
548.download-progress {
549 background-color: #CCD0DD;
550 /* -moz-border-radius: 100%; */
551 border: 1px solid #808080;
552 width: 200px;
553 height: 24px;
554 margin: 0px 8px;
555}
556
557.download-progress .start-cap,
558.download-progress[complete] .end-cap,
559.download-progress .progress .progress-bar {
560 background-color: #336699;
561}
562
563.download-progress .progress {
564 background-color: transparent;
565}
566
567.download-progress .start-cap, .download-progress .end-cap {
568 width: 12px;
569}
570
571.download-progress .start-cap {
572 -moz-border-radius: 100% 0 0 100%;
573}
574
575.download-progress .end-cap {
576 -moz-border-radius: 0 100% 100% 0;
577}
578
579.download-progress .progress {
580 -moz-appearance: none;
581 padding: 0px;
582 margin: 0px;
583 border: none;
584}
585
586.download-progress .pause, .download-progress .cancel {
587 -moz-appearance: none;
588 background-color: #CCD0DD;
589 border-width: 1px 0px 0px 1px;
590 border-style: solid;
591 -moz-border-top-colors: #FFFFFF;
592 -moz-border-left-colors: #FFFFFF;
593 /* -moz-border-radius: 100%; */
594 min-width: 16px;
595 width: 16px;
596 height: 16px;
597 margin: 3px;
598}
599
600.download-progress .pause {
601 list-style-image: url('chrome://mozapps/skin/extensions/pause.png');
602}
603
604.download-progress .cancel {
605 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
606}
607
608.download-progress .status-container {
609 -moz-box-align: center;
610}
611
612
613/*** install status ***/
614
615.install-status {
616 -moz-box-align: center;
617}
618
619
620/*** check for updates ***/
621
622#updates-container {
623 -moz-box-align: center;
624}
625
626#updates-installed, #updates-downloaded {
627 color: #00CC00;
628 font-weight: bold;
629}
630
631
632/*** buttons ***/
633
634.addon-control {
635 padding: 0px 5px;
636}
637
638.addon-control[disabled="true"] {
639 display: none;
640}
641
642.contribute {
643 -moz-padding-start: 20px;
644 -moz-padding-end: 4px;
645}
646
647.button-link {
648 background: transparent;
649 border: none;
650 text-decoration: underline;
651 color: #CCCCFF;
652 cursor: pointer;
653 min-width: 0;
654}