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