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