tree.css (19697B)
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 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 6 7 /* ::::: tree ::::: */ 8 9 tree { 10 border: 2px solid; 11 -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow; 12 -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow; 13 -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow; 14 -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow; 15 background-color: -moz-Field; 16 color: -moz-FieldText; 17 } 18 19 /* ::::: tree focusring ::::: */ 20 21 .focusring > .tree-stack > .tree-rows > .tree-bodybox { 22 border: 1px solid transparent; 23 } 24 25 .focusring:-moz-focusring > .tree-stack > .tree-rows > .tree-bodybox { 26 border: 1px solid #000000; 27 } 28 29 /* ::::: tree rows ::::: */ 30 31 treechildren::-moz-tree-row { 32 border: 1px solid transparent; 33 min-height: 18px; 34 height: 1.3em; 35 } 36 37 treechildren::-moz-tree-row(selected) { 38 background-color: -moz-cellhighlight; 39 } 40 41 treechildren::-moz-tree-row(selected, focus) { 42 background-color: Highlight; 43 } 44 45 treechildren::-moz-tree-row(current, focus) { 46 border: 1px dotted Highlight; 47 } 48 49 treechildren::-moz-tree-row(selected, current, focus) { 50 border: 1px dotted #F3D982; 51 } 52 53 tree[seltype="cell"] > treechildren::-moz-tree-row, 54 tree[seltype="text"] > treechildren::-moz-tree-row { 55 border: none; 56 background-color: transparent; 57 background-image: none; 58 } 59 60 /* ::::: tree cells ::::: */ 61 62 treechildren::-moz-tree-cell-text(selected) { 63 color: -moz-cellhighlighttext; 64 } 65 66 tree[seltype="cell"] > treechildren::-moz-tree-cell { 67 border: 1px solid transparent; 68 } 69 70 tree[seltype="text"] > treechildren::-moz-tree-cell-text { 71 border: 1px solid transparent; 72 } 73 74 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected) { 75 background-color: -moz-cellhighlight; 76 77 } 78 tree[seltype="cell"] > treechildren::-moz-tree-cell-text(active, selected) { 79 color: -moz-cellhighlighttext; 80 } 81 82 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected) { 83 background-color: -moz-cellhighlight; 84 color: -moz-cellhighlighttext; 85 } 86 87 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected, focus) { 88 background-color: Highlight; 89 } 90 91 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, current, focus) { 92 border: 1px dotted #000000; 93 } 94 95 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, current, focus) { 96 border: 1px dotted #000000; 97 } 98 99 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, current, focus) { 100 border: 1px dotted #C0C0C0; 101 } 102 103 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected, current, focus) { 104 border: 1px dotted #C0C0C0; 105 } 106 107 /* ::::: tree separator ::::: */ 108 109 treechildren::-moz-tree-separator { 110 border-top: 1px solid ThreeDShadow; 111 border-bottom: 1px solid ThreeDHighlight; 112 } 113 114 /* ::::: lines connecting cells ::::: */ 115 116 tree[seltype="cell"] > treechildren::-moz-tree-line, 117 tree[seltype="text"] > treechildren::-moz-tree-line, 118 treechildren::-moz-tree-line { 119 border: 1px dotted ThreeDShadow; 120 } 121 122 tree[seltype="cell"] > treechildren::-moz-tree-line(active, selected, focus), 123 treechildren::-moz-tree-line(selected, focus) { 124 border: 1px dotted HighlightText; 125 } 126 127 /* ::::: drop feedback ::::: */ 128 129 treechildren::-moz-tree-row(dropOn) { 130 background-color: Highlight; 131 } 132 133 tree[seltype="cell"] > treechildren::-moz-tree-cell-text(primary, dropOn), 134 tree[seltype="text"] > treechildren::-moz-tree-cell-text(primary, dropOn), 135 treechildren::-moz-tree-cell-text(primary, dropOn) { 136 color: HighlightText; 137 } 138 139 treechildren::-moz-tree-drop-feedback { 140 background-color: Highlight; 141 } 142 143 /* ::::: tree progress meter ::::: */ 144 145 treechildren::-moz-tree-progressmeter { 146 padding: 1px; 147 border: 1px solid; 148 border-top-color: ThreeDShadow; 149 border-right-color: ThreeDHighlight; 150 border-bottom-color: ThreeDHighlight; 151 border-left-color: ThreeDShadow; 152 background-color: -moz-Dialog; 153 color: ThreeDShadow; 154 } 155 156 treechildren::-moz-tree-progressmeter(progressUndetermined) { 157 list-style-image: url("chrome://global/skin/progressmeter/progressmeter-busy.gif"); 158 } 159 160 /* ::::: tree columns ::::: */ 161 162 treecol:hover:active, 163 treecolpicker:hover:active { 164 -moz-border-top-colors: ThreeDShadow -moz-Dialog; 165 -moz-border-right-colors: ThreeDShadow; 166 -moz-border-bottom-colors: ThreeDShadow; 167 -moz-border-left-colors: ThreeDShadow -moz-Dialog; 168 padding-top: 1px; 169 padding-bottom: 0px; 170 padding-inline-start: 5px; 171 padding-inline-end: 3px; 172 } 173 174 .treecol-image:hover:active { 175 padding-top: 1px; 176 padding-bottom: 0px; 177 padding-inline-start: 2px; 178 padding-inline-end: 0px; 179 } 180 181 /* ::::: column drag and drop styles ::::: */ 182 183 treecol[dragging="true"] { 184 -moz-border-top-colors: ThreeDDarkShadow transparent !important; 185 -moz-border-right-colors: ThreeDDarkShadow transparent!important; 186 -moz-border-bottom-colors: ThreeDDarkShadow transparent !important; 187 -moz-border-left-colors: ThreeDDarkShadow transparent !important; 188 } 189 190 /* ::::: sort direction indicator ::::: */ 191 192 .treecol-sortdirection { 193 list-style-image: none; 194 } 195 196 treecol:not([hideheader="true"]) > .treecol-sortdirection[sortDirection="ascending"] { 197 list-style-image: url("chrome://global/skin/tree/sort.svg#asc"); 198 } 199 200 treecol:not([hideheader="true"]) > .treecol-sortdirection[sortDirection="ascending"]:-moz-system-metric(windows-classic) { 201 list-style-image: url("chrome://global/skin/tree/sort.svg#asc-classic"); 202 } 203 204 treecol:not([hideheader="true"]) > .treecol-sortdirection[sortDirection="descending"] { 205 list-style-image: url("chrome://global/skin/tree/sort.svg#dsc"); 206 } 207 208 treecol:not([hideheader="true"]) > .treecol-sortdirection[sortDirection="descending"]:-moz-system-metric(windows-classic) { 209 list-style-image: url("chrome://global/skin/tree/sort.svg#dsc-classic"); 210 } 211 212 /* ::::: twisty ::::: */ 213 214 treechildren::-moz-tree-twisty { 215 padding-inline-end: 4px; 216 padding-top: 1px; 217 width: 9px; /* The image's width is 9 pixels */ 218 list-style-image: url("chrome://global/skin/tree/twisty.svg#clsd"); 219 } 220 221 treechildren::-moz-tree-twisty(open) { 222 list-style-image: url("chrome://global/skin/tree/twisty.svg#open"); 223 } 224 225 treechildren::-moz-tree-indentation { 226 width: 18px; 227 } 228 229 /* ::::: gridline style ::::: */ 230 231 treechildren.gridlines::-moz-tree-cell { 232 border-right: 1px solid transparent !important; 233 border-bottom: 1px solid transparent !important; 234 } 235 236 /* ::::: editable tree ::::: */ 237 238 treechildren::-moz-tree-row(selected, editing) { 239 background-color: transparent; 240 border: none; 241 } 242 243 treechildren::-moz-tree-cell-text(selected, editing) { 244 color: inherit; 245 } 246 247 .tree-input { 248 border: 1px solid Highlight; 249 -moz-border-top-colors: Highlight; 250 -moz-border-bottom-colors: Highlight; 251 -moz-border-left-colors: Highlight; 252 -moz-border-right-colors: Highlight; 253 margin: 0; 254 margin-inline-start: -4px; 255 padding: 1px; 256 } 257 258 /* ::::: twisty ::::: */ 259 260 treechildren::-moz-tree-indentation { 261 width: 12px; 262 } 263 264 treechildren::-moz-tree-twisty { 265 padding-inline-end: 1px; 266 } 267 268 treechildren::-moz-tree-twisty(hover) { 269 list-style-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover"); 270 } 271 272 treechildren::-moz-tree-twisty(hover, open) { 273 list-style-image: url("chrome://global/skin/tree/twisty.svg#open-hover"); 274 } 275 276 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty { 277 list-style-image: url("chrome://global/skin/tree/twisty.svg#clsd-rtl"); 278 } 279 280 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(open) { 281 list-style-image: url("chrome://global/skin/tree/twisty.svg#open-rtl"); 282 } 283 284 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(hover) { 285 list-style-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover-rtl"); 286 } 287 288 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(hover, open) { 289 list-style-image: url("chrome://global/skin/tree/twisty.svg#open-hover-rtl"); 290 } 291 292 @media (-moz-os-version: windows-win10) { 293 treechildren::-moz-tree-twisty { 294 list-style-image: url("chrome://global/skin/tree/twisty-10.svg#clsd"); 295 } 296 297 treechildren::-moz-tree-twisty(open) { 298 list-style-image: url("chrome://global/skin/tree/twisty-10.svg#open"); 299 } 300 301 treechildren::-moz-tree-twisty(hover) { 302 list-style-image: url("chrome://global/skin/tree/twisty-10.svg#clsd-hover"); 303 } 304 305 treechildren::-moz-tree-twisty(hover, open) { 306 list-style-image: url("chrome://global/skin/tree/twisty-10.svg#open-hover"); 307 } 308 309 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty { 310 list-style-image: url("chrome://global/skin/tree/twisty-10.svg#clsd-rtl"); 311 } 312 313 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(open) { 314 list-style-image: url("chrome://global/skin/tree/twisty-10.svg#open-rtl"); 315 } 316 317 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(hover) { 318 list-style-image: url("chrome://global/skin/tree/twisty-10.svg#clsd-hover-rtl"); 319 } 320 321 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(hover, open) { 322 list-style-image: url("chrome://global/skin/tree/twisty-10.svg#open-hover-rtl"); 323 } 324 } 325 326 @media (-moz-windows-default-theme) { 327 treechildren { 328 --treechildren-outline: none; 329 --treechildren-2ndBorderColor: rgba(255,255,255,.4); 330 --treechildren-selectedColor: rgb(217,217,217); 331 --treechildren-focusColor: rgb(123,195,255); 332 --treechildren-selectedFocusColor: rgb(205,232,255); 333 --treechildren-currentColor: rgb(125,162,206); 334 --treechildren-hoverColor: rgb(229,243,255); 335 --treechildren-selectedBorder: var(--treechildren-selectedColor); 336 --treechildren-selectedBottomBorder: rgb(204,204,204); 337 --treechildren-selectedImage: linear-gradient(rgb(217,217,217), rgb(217,217,217)); 338 --treechildren-selectedBackground: transparent; 339 --treechildren-currentFocusBorder: var(--treechildren-focusColor); 340 --treechildren-currentFocusBottomBorder: var(--treechildren-focusColor); 341 --treechildren-selectedFocusBorder: var(--treechildren-selectedFocusColor); 342 --treechildren-selectedFocusBottomBorder: rgb(165,214,255); 343 --treechildren-selectedFocusImage: none; 344 --treechildren-selectedFocusBackground: var(--treechildren-selectedFocusColor); 345 --treechildren-selectedFocusCurrentBorder: var(--treechildren-focusColor); 346 --treechildren-selectedFocusCurrentBottomBorder: var(--treechildren-focusColor); 347 --treechildren-selectedFocusCurrentImage: linear-gradient(rgb(205,232,255), rgb(205,232,255)); 348 --treechildren-hoverBorder: var(--treechildren-hoverColor); 349 --treechildren-hoverBottomBorder: var(--treechildren-hoverColor); 350 --treechildren-hoverImage: linear-gradient(rgb(229,243,255), rgb(229,243,255)); 351 --treechildren-hoverCurrentBorder: var(--treechildren-currentColor); 352 --treechildren-hoverCurrentBottomBorder: var(--treechildren-currentColor); 353 --treechildren-hoverCurrentImage: linear-gradient(rgba(131,183,249,.16), rgba(131,183,249,.16)); 354 --treechildren-hoverSelectedBorder: var(--treechildren-focusColor); 355 --treechildren-hoverSelectedBottomBorder: var(--treechildren-focusColor); 356 --treechildren-hoverSelectedImage: linear-gradient(rgb(205,232,255), rgb(205,232,255)); 357 } 358 359 treechildren:not(.autocomplete-treebody)::-moz-tree-row { 360 height: 1.8em; 361 color: -moz-FieldText; 362 margin-inline-start: 1px; 363 margin-inline-end: 1px; 364 border-width: 1px; 365 border-color: transparent; 366 background-repeat: no-repeat; 367 background-size: 100% 100%; 368 } 369 370 treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) { 371 -moz-border-top-colors: var(--treechildren-selectedBorder); 372 -moz-border-right-colors: var(--treechildren-selectedBorder); 373 -moz-border-left-colors: var(--treechildren-selectedBorder); 374 -moz-border-bottom-colors: var(--treechildren-selectedBottomBorder); 375 background-image: var(--treechildren-selectedImage); 376 background-color: var(--treechildren-selectedBackground); 377 outline: var(--treechildren-outline); 378 } 379 380 treechildren:not(.autocomplete-treebody)::-moz-tree-row(current, focus) { 381 border-style: solid; 382 -moz-border-top-colors: var(--treechildren-currentFocusBorder); 383 -moz-border-right-colors: var(--treechildren-currentFocusBorder); 384 -moz-border-left-colors: var(--treechildren-currentFocusBorder); 385 -moz-border-bottom-colors: var(--treechildren-currentFocusBottomBorder); 386 outline: var(--treechildren-outline); 387 } 388 389 treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, focus), 390 treechildren::-moz-tree-row(dropOn) { 391 -moz-border-top-colors: var(--treechildren-selectedFocusBorder); 392 -moz-border-right-colors: var(--treechildren-selectedFocusBorder); 393 -moz-border-left-colors: var(--treechildren-selectedFocusBorder); 394 -moz-border-bottom-colors: var(--treechildren-selectedFocusBottomBorder); 395 background-image: var(--treechildren-selectedFocusImage); 396 background-color: var(--treechildren-selectedFocusBackground); 397 } 398 399 treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) { 400 border-style: solid; 401 -moz-border-top-colors: var(--treechildren-selectedFocusCurrentBorder); 402 -moz-border-right-colors: var(--treechildren-selectedFocusCurrentBorder); 403 -moz-border-left-colors: var(--treechildren-selectedFocusCurrentBorder); 404 -moz-border-bottom-colors: var(--treechildren-selectedFocusCurrentBottomBorder); 405 background-image: var(--treechildren-selectedFocusCurrentImage); 406 } 407 408 treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) { 409 -moz-border-top-colors: var(--treechildren-hoverBorder); 410 -moz-border-right-colors: var(--treechildren-hoverBorder); 411 -moz-border-left-colors: var(--treechildren-hoverBorder); 412 -moz-border-bottom-colors: var(--treechildren-hoverBottomBorder); 413 background-image: var(--treechildren-hoverImage); 414 outline: var(--treechildren-outline); 415 } 416 417 treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, current) { 418 -moz-border-top-colors: var(--treechildren-hoverCurrentBorder); 419 -moz-border-right-colors: var(--treechildren-hoverCurrentBorder); 420 -moz-border-left-colors: var(--treechildren-hoverCurrentBorder); 421 -moz-border-bottom-colors: var(--treechildren-hoverCurrentBottomBorder); 422 background-image: var(--treechildren-hoverCurrentImage); 423 } 424 425 treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, selected) { 426 -moz-border-top-colors: var(--treechildren-hoverSelectedBorder); 427 -moz-border-right-colors: var(--treechildren-hoverSelectedBorder); 428 -moz-border-left-colors: var(--treechildren-hoverSelectedBorder); 429 -moz-border-bottom-colors: var(--treechildren-hoverSelectedBottomBorder); 430 background-image: var(--treechildren-hoverSelectedImage); 431 } 432 433 tree[disabled="true"] > treechildren::-moz-tree-row { 434 background: none; 435 -moz-border-top-colors: transparent; 436 -moz-border-right-colors: transparent; 437 -moz-border-left-colors: transparent; 438 -moz-border-bottom-colors: transparent; 439 } 440 441 treechildren::-moz-tree-cell(dropOn) { 442 background-image: none; 443 background-color: transparent; 444 border-radius: 0; 445 } 446 447 treechildren::-moz-tree-cell-text(primary, dropOn) { 448 color: -moz-FieldText; 449 } 450 451 treechildren:not(.autocomplete-treebody)::-moz-tree-cell-text { 452 padding-bottom: initial; 453 border-color: transparent; 454 background-color: transparent; 455 } 456 457 treechildren:not(.autocomplete-treebody)::-moz-tree-cell-text(selected, focus) { 458 color: -moz-DialogText; 459 } 460 461 @media (-moz-os-version: windows-vista), 462 (-moz-os-version: windows-win7) { 463 treechildren { 464 --treechildren-outline: 1px solid var(--treechildren-2ndBorderColor); 465 --treechildren-2ndBottomBorderColor: rgba(255,255,255,.6); 466 --treechildren-selectedBorder: var(--treechildren-selectedColor) var(--treechildren-2ndBorderColor); 467 --treechildren-selectedBottomBorder: var(--treechildren-selectedColor) var(--treechildren-2ndBottomBorderColor); 468 --treechildren-selectedImage: linear-gradient(rgba(190,190,190,.1), rgba(190,190,190,.4)); 469 --treechildren-currentFocusBorder: var(--treechildren-currentColor) var(--treechildren-2ndBorderColor); 470 --treechildren-currentFocusBottomBorder: var(--treechildren-currentColor) var(--treechildren-2ndBottomBorderColor); 471 --treechildren-selectedFocusBorder: rgb(132,172,221) var(--treechildren-2ndBorderColor); 472 --treechildren-selectedFocusBottomBorder: var(--treechildren-currentColor) var(--treechildren-2ndBottomBorderColor); 473 --treechildren-selectedFocusImage: linear-gradient(rgba(131,183,249,.16), rgba(131,183,249,.375)); 474 --treechildren-selectedFocusBackground: transparent; 475 --treechildren-selectedFocusCurrentBorder: var(--treechildren-currentColor) var(--treechildren-2ndBorderColor); 476 --treechildren-selectedFocusCurrentBottomBorder: var(--treechildren-currentColor) var(--treechildren-2ndBottomBorderColor); 477 --treechildren-selectedFocusCurrentImage: linear-gradient(rgba(131,183,249,.28), rgba(131,183,249,.5)); 478 --treechildren-hoverBorder: rgb(184,214,251) var(--treechildren-2ndBorderColor); 479 --treechildren-hoverBottomBorder: rgb(184,214,251) var(--treechildren-2ndBottomBorderColor); 480 --treechildren-hoverImage: linear-gradient(rgba(131,183,249,.05), rgba(131,183,249,.16)); 481 --treechildren-hoverCurrentBorder: var(--treechildren-currentColor) var(--treechildren-2ndBorderColor); 482 --treechildren-hoverCurrentBottomBorder: var(--treechildren-currentColor) var(--treechildren-2ndBottomBorderColor); 483 --treechildren-hoverCurrentImage: linear-gradient(rgba(131,183,249,.05), rgba(131,183,249,.16)); 484 --treechildren-hoverSelectedBorder: var(--treechildren-currentColor) var(--treechildren-2ndBorderColor); 485 --treechildren-hoverSelectedBottomBorder: var(--treechildren-currentColor) var(--treechildren-2ndBottomBorderColor); 486 --treechildren-hoverSelectedImage: linear-gradient(rgba(131,183,249,.28), rgba(131,183,249,.5)); 487 } 488 489 treechildren:not(.autocomplete-treebody)::-moz-tree-row { 490 border-width: 2px; 491 border-radius: 3px; 492 -moz-outline-radius: 3px; 493 } 494 } 495 496 @media (-moz-os-version: windows-win8) { 497 treechildren { 498 --treechildren-outline: 1px solid var(--treechildren-2ndBorderColor); 499 --treechildren-selectedBorder: var(--treechildren-selectedColor); 500 --treechildren-selectedBottomBorder: var(--treechildren-selectedColor); 501 --treechildren-selectedImage: linear-gradient(rgba(190,190,190,.4), rgba(190,190,190,.4)); 502 --treechildren-currentFocusBorder: var(--treechildren-currentColor); 503 --treechildren-currentFocusBottomBorder: var(--treechildren-currentColor); 504 --treechildren-selectedFocusBorder: rgb(132,172,221) var(--treechildren-2ndBorderColor); 505 --treechildren-selectedFocusBottomBorder: var(--treechildren-currentColor); 506 --treechildren-selectedFocusImage: linear-gradient(rgba(131,183,249,.375), rgba(131,183,249,.375)); 507 --treechildren-selectedFocusBackground: transparent; 508 --treechildren-selectedFocusCurrentBorder: var(--treechildren-currentColor); 509 --treechildren-selectedFocusCurrentBottomBorder: var(--treechildren-currentColor); 510 --treechildren-selectedFocusCurrentImage: linear-gradient(rgba(131,183,249,.5), rgba(131,183,249,.5)); 511 --treechildren-hoverBorder: rgb(184,214,251); 512 --treechildren-hoverBottomBorder: rgb(184,214,251); 513 --treechildren-hoverImage: linear-gradient(rgba(131,183,249,.16), rgba(131,183,249,.16)); 514 --treechildren-hoverSelectedBorder: var(--treechildren-currentColor); 515 --treechildren-hoverSelectedBottomBorder: var(--treechildren-currentColor); 516 --treechildren-hoverSelectedImage: linear-gradient(rgba(131,183,249,.5), rgba(131,183,249,.5)); 517 } 518 } 519 }