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