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