2e949ebc168d86f2f5cb9e485c092ff8d0e08730
[themes.git] / tree.css
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 "Classic" theme of mozilla.org code.
15  *
16  * The Initial Developer of the Original Code is
17  * the Mozilla Organization.
18  * Portions created by the Initial Developer are Copyright (C) 1998-2001
19  * the Initial Developer. All Rights Reserved.
20  *
21  * Contributor(s):
22  *   Robert Kaiser <KaiRo@KaiRo.at>
23  *   Joe Hewitt (hewitt@netscape.com)
24  *   Dean Tessman (dean_tessman@hotmail.com)
25  *
26  * Alternatively, the contents of this file may be used under the terms of
27  * either the GNU General Public License Version 2 or later (the "GPL"), or
28  * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
29  * in which case the provisions of the GPL or the LGPL are applicable instead
30  * of those above. If you wish to allow use of your version of this file only
31  * under the terms of either the GPL or the LGPL, and not to allow others to
32  * use your version of this file under the terms of the MPL, indicate your
33  * decision by deleting the provisions above and replace them with the notice
34  * and other provisions required by the GPL or the LGPL. If you do not delete
35  * the provisions above, a recipient may use your version of this file under
36  * the terms of any one of the MPL, the GPL or the LGPL.
37  *
38  * ***** END LICENSE BLOCK ***** */
39
40 /* ===== tree.css =======================================================
41   == Styles used by the XUL tree element.
42   ======================================================================= */
43
44 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
45
46 /* ::::: tree ::::: */
47
48 tree {
49   -moz-border-radius: 5px;
50   margin: 0px;
51   border: 1px solid #9C9CFF;
52   background-color: #000000;
53   color: #FF9F00;
54 }
55
56 /* ::::: tree focusring ::::: */
57
58 .focusring > .tree-stack > .tree-rows > .tree-bodybox {
59   outline: 1px solid transparent;
60   outline-offset: -1px;
61 }
62
63 .focusring:focus > .tree-stack > .tree-rows > .tree-bodybox {
64   outline: 1px dotted #008484;
65 }
66
67 /* ::::: tree rows ::::: */
68
69 treechildren::-moz-tree-row {
70   border: 1px solid transparent;
71   background-color: transparent;
72   min-height: 18px;
73   height: 1.3em;
74 }
75
76 treechildren::-moz-tree-row(selected) {
77   background-color: #008484;
78   color: #FFCF00;
79 }
80
81 treechildren::-moz-tree-row(selected, focus) {
82   background-color: #008484;
83   color: #FFCF00;
84 }
85
86 treechildren::-moz-tree-row(current, focus) {
87   border: 1px dotted #008484;
88 }
89
90 treechildren::-moz-tree-row(selected, current, focus) {
91   border: 1px dotted #FF9F00;
92 }
93
94 tree[seltype="cell"] > treechildren::-moz-tree-row,
95 tree[seltype="text"] > treechildren::-moz-tree-row {
96   border: none;
97   background-color: transparent;
98 }
99
100 /* ::::: tree cells ::::: */
101
102 treechildren::-moz-tree-cell {
103   padding-top: 0px;
104   padding-bottom: 0px;
105   -moz-padding-start: 1px;
106   -moz-padding-end: 1px;
107 }
108
109 tree[seltype="cell"] > treechildren::-moz-tree-cell-text,
110 tree[seltype="text"] > treechildren::-moz-tree-cell-text,
111 treechildren::-moz-tree-cell-text {
112   color: inherit;
113 }
114
115 tree[seltype="cell"] > treechildren::-moz-tree-cell {
116   border: 1px solid transparent;
117   padding: 0px 1px;
118 }
119
120 tree[seltype="text"] > treechildren::-moz-tree-cell-text {
121   border: 1px solid transparent;
122   padding-top: 0px;
123   padding-bottom: 0px;
124   -moz-padding-start: 1px;
125   -moz-padding-end: 1px;
126 }
127
128 treechildren::-moz-tree-cell-text(selected) {
129   color: #FFCF00;
130 }
131
132 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected) {
133   background-color: #008484;
134 }
135 tree[seltype="cell"] > treechildren::-moz-tree-cell-text(active, selected) {
136   color: #FFCF00;
137 }
138
139 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected) {
140   background-color: #008484;
141   color: #FFCF00;
142 }
143
144 treechildren::-moz-tree-cell-text(selected, focus) {
145   color: #FFCF00;
146 }
147
148 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, focus) {
149   background-color: #008484;
150 }
151 tree[seltype="cell"] > treechildren::-moz-tree-cell-text(active, selected, focus) {
152   color: #FFCF00;
153 }
154
155 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected, focus) {
156   background-color: #008484;
157   color: #FFCF00;
158 }
159
160 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, current, focus) {
161   border: 1px dotted #008484;
162 }
163
164 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, current, focus) {
165   border: 1px dotted #008484;
166 }
167
168 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, current, focus) {
169   border: 1px dotted #FF9F00;
170 }
171
172 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected, current, focus) {
173   border: 1px dotted #FF9F00;
174 }
175
176 /* ::::: lines connecting cells ::::: */
177
178 tree[seltype="cell"] > treechildren::-moz-tree-line,
179 tree[seltype="text"] > treechildren::-moz-tree-line,
180 treechildren::-moz-tree-line {
181   visibility: hidden;
182 }
183
184 tree[seltype="cell"] > treechildren::-moz-tree-line,
185 tree[seltype="text"] > treechildren::-moz-tree-line,
186 treechildren::-moz-tree-line {
187   border: 1px dotted #9C9CFF;
188 }
189
190 tree[seltype="cell"] > treechildren::-moz-tree-line(active, selected, focus),
191 treechildren::-moz-tree-line(selected) {
192   border: 1px dotted #000000;
193 }
194
195 /* ::::: tree separator ::::: */
196
197 treechildren::-moz-tree-separator {
198   margin-top: 1px;
199   border: 1px solid #9C9CFF;
200   height: 2px;
201 }
202
203 /* ::::: drop feedback ::::: */
204
205 tree[seltype="cell"] > treechildren::-moz-tree-cell-text(primary, dropOn),
206 tree[seltype="text"] > treechildren::-moz-tree-cell-text(primary, dropOn),
207 treechildren::-moz-tree-cell-text(dropOn) {
208   background-color: #008484;
209   color: #FFCF00;
210 }
211
212 treechildren::-moz-tree-drop-feedback {
213   background-color: #008484;
214   width: 50px;
215   height: 2px;
216   -moz-margin-start: 5px;
217 }
218
219 treechildren::-moz-tree-drop-feedback(selected) {
220   background-color: #FFCF00;
221 }
222
223 /* ::::: tree checkbox ::::: */
224
225 treechildren::-moz-tree-checkbox {
226   list-style-image: url("chrome://global/skin/tree/checkbox.gif");
227 }
228
229 treechildren::-moz-tree-checkbox(checked) {
230   list-style-image: url("chrome://global/skin/tree/checkbox-checked.gif");
231 }
232
233 /* ::::: tree progress meter ::::: */
234
235 treechildren::-moz-tree-progressmeter {
236   margin: 0px 0px;
237   border: 1px solid #FF9F00;
238   background-color: #000000;
239   color: #008484;
240 }
241
242 treechildren::-moz-tree-progressmeter(progressUndetermined) {
243   list-style-image: url("chrome://global/skin/progressmeter/progressmeter-busy.gif");
244   background-color: #008484;
245 }
246
247 treechildren::-moz-tree-cell-text(progressmeter) {
248   margin: 2px 4px;
249 }
250
251 /* ::::: tree columns ::::: */
252
253 treecol {
254   -moz-box-align: center;
255   -moz-box-pack: center;
256   border: 1px solid #FF9F00;
257   background-color: #9C9CFF;
258   color: #000000;
259   padding: 1px 4px;
260 }
261
262 treecol:first-child {
263   -moz-border-radius-topleft: 3px;
264 }
265
266 treecol:last-child {
267   -moz-border-radius-topright: 3px;
268 }
269
270 treecolpicker {
271   -moz-border-radius-topright: 3px;
272   -moz-box-align: center;
273   -moz-box-pack: center;
274   border: 1px solid transparent;
275   background-color: #000000;
276   padding: 1px 0px;
277 }
278
279 .treecol-image {
280   padding: 0 1px;
281 }
282
283 .treecol-text {
284   margin: 0px !important;
285   padding: 0px !important;
286 }
287
288 treecol[hideheader="true"] {
289   border: none;
290   padding: 0;
291 }
292
293 /* ..... internal box ..... */
294
295 treecol:hover:active {
296   border: 1px solid #FFCF00;
297   padding-top: 2px;
298   padding-bottom: 0px;
299   -moz-padding-start: 5px;
300   -moz-padding-end: 3px;
301 }
302
303 treecolpicker:hover {
304   background-color: #FFCF00;
305 }
306
307 treecolpicker:hover:active {
308   border: 1px solid #FFCF00;
309   background-color: #FF9F00;
310 }
311
312 .treecol-image:hover:active {
313   padding-top: 2px;
314   padding-bottom: 0px;
315   -moz-padding-start: 2px;
316   -moz-padding-end: 0px;
317 }
318
319 /* ::::: column drag and drop styles ::::: */
320
321 treecol[dragging="true"] {
322   border: 1px solid transparent;
323   background-color: #008484;
324   color: #000000;
325 }
326
327 treecol[insertafter="true"] {
328   border-right: 1px solid #FFCF00;
329 }
330
331 treecol[insertbefore="true"] {
332   border-left: 1px solid #FFCF00;
333 }
334
335 treechildren::-moz-tree-column(insertbefore) {
336   border-left: 1px solid #FFCF00;
337 }
338
339 treechildren::-moz-tree-column(insertafter) {
340   border-right: 1px solid #FFCF00;
341 }
342
343 /* ::::: sort direction indicator :::::  */
344
345 .treecol-sortdirection {
346   list-style-image: none;
347   width: 8px;  /* The image's width is 7 pixels */
348 }
349
350 treecol:not([hideheader="true"]) > .treecol-sortdirection[sortDirection="ascending"] {
351   list-style-image: url("chrome://global/skin/tree/sort-asc.gif");
352 }
353
354 treecol:not([hideheader="true"]) > .treecol-sortdirection[sortDirection="descending"] {
355   list-style-image: url("chrome://global/skin/tree/sort-desc.gif");
356 }
357
358 /* ::::: column picker :::::  */
359
360 .tree-columnpicker-icon {
361   list-style-image: url("chrome://global/skin/tree/columnpicker.gif");
362 }
363
364 treecolpicker:hover > .tree-columnpicker-icon,
365 treecolpicker:hover:active > .tree-columnpicker-icon {
366   list-style-image: url("chrome://global/skin/tree/columnpicker-hover.gif");
367 }
368
369 /* ::::: twisty :::::  */
370
371 treechildren::-moz-tree-twisty {
372   -moz-padding-end: 1px;
373   padding-top: 0px;
374   width: 11px; /* The image's width is 11 pixels */
375   list-style-image: url("chrome://global/skin/tree/twisty-closed.gif");
376 }
377
378 treechildren::-moz-tree-twisty(open) {
379   width: 11px; /* The image's width is 11 pixels */
380   list-style-image: url("chrome://global/skin/tree/twisty-open.gif");
381 }
382
383 treechildren::-moz-tree-indentation {
384   width: 11px;
385 }
386
387 /* ::::: gridline style ::::: */
388
389 treechildren.gridlines::-moz-tree-cell {
390   border-right: 1px solid #9C9CFF;
391   border-bottom: 1px solid #9C9CFF;
392 }
393
394 treechildren.gridlines::-moz-tree-row {
395   border: none;
396 }
397
398 /* ::::: alternating background ::::: */
399
400 treechildren[alternatingbackground="true"]::-moz-tree-row(odd) {
401   background-color: #404000;
402 }
403
404 treechildren[alternatingbackground="true"]::-moz-tree-row(odd, selected) {
405   background-color: #008484;
406   color: #000000;
407 }
408
409 treechildren[alternatingbackground="true"]::-moz-tree-row(odd, selected, focus) {
410   background-color: #008484;
411   color: #000000;
412 }
413
414 /* ::::: editable tree ::::: */
415
416 treechildren::-moz-tree-row(selected, editing) {
417   background-color: transparent;
418   border: none;
419 }
420
421 treechildren::-moz-tree-cell-text(selected, editing) {
422   color: inherit;
423 }
424
425 .tree-input {
426   border: 1px solid #9C9CFF;
427   margin: 0;
428   -moz-margin-start: -4px;
429   padding: 1px;
430 }