1/*! 2 * Fancytree "bootstrap" skin (highlighting the node span instead of title-only). 3 * 4 * DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from 5 * the LESS templates. 6 */ 7/******************************************************************************* 8 * Common Styles for Fancytree Skins. 9 * 10 * This section is automatically generated from the `skin-common.less` template. 11 * 12 * Copyright (c) 2008-2023, Martin Wendt (https://wwWendt.de) 13 * Released under the MIT license 14 * https://github.com/mar10/fancytree/wiki/LicenseInfo 15 * 16 * @version 2.38.3 17 * @date 2023-02-01T20:52:50Z 18******************************************************************************/ 19/*------------------------------------------------------------------------------ 20 * Helpers 21 *----------------------------------------------------------------------------*/ 22.fancytree-helper-hidden { 23 display: none; 24} 25.fancytree-helper-indeterminate-cb { 26 color: #777; 27} 28.fancytree-helper-disabled { 29 color: #c0c0c0; 30} 31/* Helper to allow spinning loader icon with glyph-, ligature-, and SVG-icons. */ 32.fancytree-helper-spin { 33 -webkit-animation: spin 1000ms infinite linear; 34 animation: spin 1000ms infinite linear; 35} 36@-webkit-keyframes spin { 37 0% { 38 -webkit-transform: rotate(0deg); 39 transform: rotate(0deg); 40 } 41 100% { 42 -webkit-transform: rotate(359deg); 43 transform: rotate(359deg); 44 } 45} 46@keyframes spin { 47 0% { 48 -webkit-transform: rotate(0deg); 49 transform: rotate(0deg); 50 } 51 100% { 52 -webkit-transform: rotate(359deg); 53 transform: rotate(359deg); 54 } 55} 56/*------------------------------------------------------------------------------ 57 * Container and UL / LI 58 *----------------------------------------------------------------------------*/ 59ul.fancytree-container { 60 font-family: tahoma, arial, helvetica; 61 font-size: 10pt; 62 white-space: nowrap; 63 padding: 3px; 64 margin: 0; 65 background-color: white; 66 border: 1px dotted gray; 67 min-height: 0%; 68 position: relative; 69} 70ul.fancytree-container ul { 71 padding: 0 0 0 16px; 72 margin: 0; 73} 74ul.fancytree-container ul > li:before { 75 content: none; 76} 77ul.fancytree-container li { 78 list-style-image: none; 79 list-style-position: outside; 80 list-style-type: none; 81 -moz-background-clip: border; 82 -moz-background-inline-policy: continuous; 83 -moz-background-origin: padding; 84 background-attachment: scroll; 85 background-color: transparent; 86 background-position: 0em 0em; 87 background-repeat: repeat-y; 88 background-image: none; 89 margin: 0; 90} 91ul.fancytree-container li.fancytree-lastsib { 92 background-image: none; 93} 94.ui-fancytree-disabled ul.fancytree-container { 95 opacity: 0.5; 96 background-color: silver; 97} 98ul.fancytree-connectors.fancytree-container li { 99 background-image: url("../skin-bootstrap-n/vline.gif"); 100 background-position: 0 0; 101} 102ul.fancytree-container li.fancytree-lastsib, 103ul.fancytree-no-connector > li { 104 background-image: none; 105} 106li.fancytree-animating { 107 position: relative; 108} 109/*------------------------------------------------------------------------------ 110 * Common icon definitions 111 *----------------------------------------------------------------------------*/ 112span.fancytree-empty, 113span.fancytree-vline, 114span.fancytree-expander, 115span.fancytree-icon, 116span.fancytree-checkbox, 117span.fancytree-drag-helper-img, 118#fancytree-drop-marker { 119 width: 1em; 120 height: 1em; 121 display: inline-block; 122 vertical-align: top; 123 background-repeat: no-repeat; 124 background-position: 0em 0em; 125} 126span.fancytree-icon, 127span.fancytree-checkbox, 128span.fancytree-expander, 129span.fancytree-custom-icon { 130 margin-top: 0px; 131} 132/* Used by icon option: */ 133span.fancytree-custom-icon { 134 width: 1em; 135 height: 1em; 136 display: inline-block; 137 margin-left: 0.5em; 138 background-position: 0em 0em; 139} 140/* Used by 'icon' node option: */ 141img.fancytree-icon { 142 width: 1em; 143 height: 1em; 144 margin-left: 0.5em; 145 margin-top: 0px; 146 vertical-align: top; 147 border-style: none; 148} 149/*------------------------------------------------------------------------------ 150 * Expander icon 151 * 152 * Note: IE6 doesn't correctly evaluate multiples class names, 153 * so we create combined class names that can be used in the CSS. 154 * 155 * Prefix: fancytree-exp- 156 * 1st character: 'e': expanded, 'c': collapsed, 'n': no children 157 * 2nd character (optional): 'd': lazy (Delayed) 158 * 3rd character (optional): 'l': Last sibling 159 *----------------------------------------------------------------------------*/ 160span.fancytree-expander { 161 cursor: pointer; 162} 163.fancytree-exp-n span.fancytree-expander, 164.fancytree-exp-nl span.fancytree-expander { 165 background-image: none; 166 cursor: default; 167} 168.fancytree-connectors .fancytree-exp-n span.fancytree-expander, 169.fancytree-connectors .fancytree-exp-nl span.fancytree-expander { 170 margin-top: 0; 171} 172/* Fade out expanders, when container is not hovered or active */ 173.fancytree-fade-expander span.fancytree-expander { 174 transition: opacity 1.5s; 175 opacity: 0; 176} 177.fancytree-fade-expander:hover span.fancytree-expander, 178.fancytree-fade-expander.fancytree-treefocus span.fancytree-expander, 179.fancytree-fade-expander .fancytree-treefocus span.fancytree-expander, 180.fancytree-fade-expander [class*="fancytree-statusnode-"] span.fancytree-expander { 181 transition: opacity 0.6s; 182 opacity: 1; 183} 184/*------------------------------------------------------------------------------ 185 * Checkbox icon 186 *----------------------------------------------------------------------------*/ 187span.fancytree-checkbox { 188 margin-left: 0.5em; 189} 190.fancytree-unselectable span.fancytree-checkbox { 191 opacity: 0.4; 192 filter: alpha(opacity=40); 193} 194.fancytree-container.fancytree-checkbox-auto-hide span.fancytree-checkbox { 195 visibility: hidden; 196} 197.fancytree-container.fancytree-checkbox-auto-hide .fancytree-node:hover span.fancytree-checkbox, 198.fancytree-container.fancytree-checkbox-auto-hide tr:hover td span.fancytree-checkbox, 199.fancytree-container.fancytree-checkbox-auto-hide .fancytree-node.fancytree-selected span.fancytree-checkbox, 200.fancytree-container.fancytree-checkbox-auto-hide tr.fancytree-selected td span.fancytree-checkbox { 201 visibility: unset; 202} 203.fancytree-container.fancytree-checkbox-auto-hide.fancytree-treefocus .fancytree-node.fancytree-active span.fancytree-checkbox, 204.fancytree-container.fancytree-checkbox-auto-hide.fancytree-treefocus tr.fancytree-active td span.fancytree-checkbox { 205 visibility: unset; 206} 207/*------------------------------------------------------------------------------ 208 * Node type icon 209 * Note: IE6 doesn't correctly evaluate multiples class names, 210 * so we create combined class names that can be used in the CSS. 211 * 212 * Prefix: fancytree-ico- 213 * 1st character: 'e': expanded, 'c': collapsed 214 * 2nd character (optional): 'f': folder 215 *----------------------------------------------------------------------------*/ 216span.fancytree-icon { 217 margin-left: 0.5em; 218} 219/* Documents */ 220/* Folders */ 221.fancytree-loading span.fancytree-expander, 222.fancytree-loading span.fancytree-expander:hover, 223.fancytree-statusnode-loading span.fancytree-icon, 224.fancytree-statusnode-loading span.fancytree-icon:hover, 225span.fancytree-icon.fancytree-icon-loading { 226 background-image: none; 227} 228/* Status node icons */ 229/*------------------------------------------------------------------------------ 230 * Node titles and highlighting 231 *----------------------------------------------------------------------------*/ 232span.fancytree-node { 233 /* See #117 */ 234 display: inherit; 235 width: 100%; 236 margin-top: 1px; 237 min-height: 1em; 238} 239span.fancytree-title { 240 color: black; 241 cursor: pointer; 242 display: inline-block; 243 vertical-align: top; 244 min-height: 1em; 245 padding: 0 3px 0 3px; 246 margin: 0px 0 0 0.5em; 247 border: 1px solid transparent; 248 -webkit-border-radius: 0px; 249 -moz-border-radius: 0px; 250 -ms-border-radius: 0px; 251 -o-border-radius: 0px; 252 border-radius: 0px; 253} 254span.fancytree-node.fancytree-error span.fancytree-title { 255 color: red; 256} 257/*------------------------------------------------------------------------------ 258 * Drag'n'drop support 259 *----------------------------------------------------------------------------*/ 260/* ext-dnd5: */ 261span.fancytree-childcounter { 262 color: #fff; 263 background: #337ab7; 264 border: 1px solid gray; 265 border-radius: 10px; 266 padding: 2px; 267 text-align: center; 268} 269/* ext-dnd: */ 270div.fancytree-drag-helper span.fancytree-childcounter, 271div.fancytree-drag-helper span.fancytree-dnd-modifier { 272 display: inline-block; 273 color: #fff; 274 background: #337ab7; 275 border: 1px solid gray; 276 min-width: 10px; 277 height: 10px; 278 line-height: 1; 279 vertical-align: baseline; 280 border-radius: 10px; 281 padding: 2px; 282 text-align: center; 283 font-size: 9px; 284} 285div.fancytree-drag-helper span.fancytree-childcounter { 286 position: absolute; 287 top: -6px; 288 right: -6px; 289} 290div.fancytree-drag-helper span.fancytree-dnd-modifier { 291 background: #5cb85c; 292 border: none; 293 font-weight: bolder; 294} 295/*** Drop marker icon *********************************************************/ 296#fancytree-drop-marker { 297 width: 2em; 298 position: absolute; 299 margin: 0; 300} 301#fancytree-drop-marker.fancytree-drop-after, 302#fancytree-drop-marker.fancytree-drop-before { 303 width: 4em; 304} 305/*** Source node while dragging ***********************************************/ 306span.fancytree-drag-source.fancytree-drag-remove { 307 opacity: 0.15; 308} 309/*** Target node while dragging cursor is over it *****************************/ 310/*------------------------------------------------------------------------------ 311 * 'rtl' option 312 *----------------------------------------------------------------------------*/ 313.fancytree-container.fancytree-rtl .fancytree-title { 314 /*unicode-bidi: bidi-override;*/ 315 /* optional: reverse title letters */ 316} 317.fancytree-container.fancytree-rtl .fancytree-exp-n span.fancytree-expander, 318.fancytree-container.fancytree-rtl .fancytree-exp-nl span.fancytree-expander { 319 background-image: none; 320} 321ul.fancytree-container.fancytree-rtl ul { 322 padding: 0 16px 0 0; 323} 324ul.fancytree-container.fancytree-rtl.fancytree-connectors li { 325 background-position: right 0; 326 background-image: url("../skin-bootstrap-n/vline-rtl.gif"); 327} 328ul.fancytree-container.fancytree-rtl li.fancytree-lastsib, 329ul.fancytree-container.fancytree-rtl.fancytree-no-connector > li { 330 background-image: none; 331} 332/*------------------------------------------------------------------------------ 333 * 'table' extension 334 *----------------------------------------------------------------------------*/ 335table.fancytree-ext-table { 336 font-family: tahoma, arial, helvetica; 337 font-size: 10pt; 338 border-collapse: collapse; 339 /* ext-ariagrid */ 340} 341table.fancytree-ext-table span.fancytree-node { 342 display: inline-block; 343 box-sizing: border-box; 344} 345table.fancytree-ext-table td.fancytree-status-merged { 346 text-align: center; 347 font-style: italic; 348 color: #c0c0c0; 349} 350table.fancytree-ext-table tr.fancytree-statusnode-error td.fancytree-status-merged { 351 color: red; 352} 353table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode > tbody > tr.fancytree-active > td { 354 background-color: #eee; 355} 356table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode > tbody > tr > td.fancytree-active-cell { 357 background-color: #cbe8f6; 358} 359table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode.fancytree-cell-nav-mode > tbody > tr > td.fancytree-active-cell { 360 background-color: #3875d7; 361} 362/*------------------------------------------------------------------------------ 363 * 'columnview' extension 364 *----------------------------------------------------------------------------*/ 365table.fancytree-ext-columnview tbody tr td { 366 position: relative; 367 border: 1px solid gray; 368 vertical-align: top; 369 overflow: auto; 370} 371table.fancytree-ext-columnview tbody tr td > ul { 372 padding: 0; 373} 374table.fancytree-ext-columnview tbody tr td > ul li { 375 list-style-image: none; 376 list-style-position: outside; 377 list-style-type: none; 378 -moz-background-clip: border; 379 -moz-background-inline-policy: continuous; 380 -moz-background-origin: padding; 381 background-attachment: scroll; 382 background-color: transparent; 383 background-position: 0em 0em; 384 background-repeat: repeat-y; 385 background-image: none; 386 /* no v-lines */ 387 margin: 0; 388} 389table.fancytree-ext-columnview span.fancytree-node { 390 position: relative; 391 /* allow positioning of embedded spans */ 392 display: inline-block; 393} 394table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded { 395 background-color: #e0e0e0; 396} 397table.fancytree-ext-columnview span.fancytree-node.fancytree-active { 398 background-color: #cbe8f6; 399} 400table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right { 401 position: absolute; 402 right: 3px; 403} 404/*------------------------------------------------------------------------------ 405 * 'filter' extension 406 *----------------------------------------------------------------------------*/ 407.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title { 408 color: #c0c0c0; 409 font-weight: lighter; 410} 411.fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title, 412.fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title { 413 color: black; 414 font-weight: normal; 415} 416.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title, 417.fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title { 418 color: black; 419 font-weight: bold; 420} 421.fancytree-ext-filter-hide tr.fancytree-hide, 422.fancytree-ext-filter-hide span.fancytree-node.fancytree-hide { 423 display: none; 424} 425.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title, 426.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title { 427 color: #c0c0c0; 428 font-weight: lighter; 429} 430.fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title, 431.fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title { 432 color: black; 433 font-weight: normal; 434} 435/* Hide expanders if all child nodes are hidden by filter */ 436.fancytree-ext-filter-hide-expanders tr.fancytree-match span.fancytree-expander, 437.fancytree-ext-filter-hide-expanders span.fancytree-node.fancytree-match span.fancytree-expander { 438 visibility: hidden; 439} 440.fancytree-ext-filter-hide-expanders tr.fancytree-submatch span.fancytree-expander, 441.fancytree-ext-filter-hide-expanders span.fancytree-node.fancytree-submatch span.fancytree-expander { 442 visibility: visible; 443} 444.fancytree-ext-childcounter span.fancytree-icon, 445.fancytree-ext-filter span.fancytree-icon, 446.fancytree-ext-childcounter span.fancytree-custom-icon, 447.fancytree-ext-filter span.fancytree-custom-icon { 448 position: relative; 449} 450.fancytree-ext-childcounter span.fancytree-childcounter, 451.fancytree-ext-filter span.fancytree-childcounter { 452 color: #fff; 453 background: #777; 454 border: 1px solid gray; 455 position: absolute; 456 top: -6px; 457 right: -6px; 458 min-width: 10px; 459 height: 10px; 460 line-height: 1; 461 vertical-align: baseline; 462 border-radius: 10px; 463 padding: 2px; 464 text-align: center; 465 font-size: 9px; 466} 467/*------------------------------------------------------------------------------ 468 * 'wide' extension 469 *----------------------------------------------------------------------------*/ 470ul.fancytree-ext-wide { 471 position: relative; 472 min-width: 100%; 473 z-index: 2; 474 -webkit-box-sizing: border-box; 475 -moz-box-sizing: border-box; 476 box-sizing: border-box; 477} 478ul.fancytree-ext-wide span.fancytree-node > span { 479 position: relative; 480 z-index: 2; 481} 482ul.fancytree-ext-wide span.fancytree-node span.fancytree-title { 483 position: absolute; 484 z-index: 1; 485 left: 0px; 486 min-width: 100%; 487 margin-left: 0; 488 margin-right: 0; 489 -webkit-box-sizing: border-box; 490 -moz-box-sizing: border-box; 491 box-sizing: border-box; 492} 493/*------------------------------------------------------------------------------ 494 * 'fixed' extension 495 *----------------------------------------------------------------------------*/ 496.fancytree-ext-fixed-wrapper .fancytree-ext-fixed-hidden { 497 display: none; 498} 499.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-scroll-border-bottom { 500 border-bottom: 3px solid rgba(0, 0, 0, 0.75); 501} 502.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-scroll-border-right { 503 border-right: 3px solid rgba(0, 0, 0, 0.75); 504} 505.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-tl { 506 position: absolute; 507 overflow: hidden; 508 z-index: 3; 509 top: 0px; 510 left: 0px; 511} 512.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-tr { 513 position: absolute; 514 overflow: hidden; 515 z-index: 2; 516 top: 0px; 517} 518.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-bl { 519 position: absolute; 520 overflow: hidden; 521 z-index: 2; 522 left: 0px; 523} 524.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-br { 525 position: absolute; 526 overflow: scroll; 527 z-index: 1; 528} 529/******************************************************************************* 530 * Styles specific to this skin. 531 * 532 * This section is automatically generated from the `ui-fancytree.less` template. 533 ******************************************************************************/ 534ul.fancytree-container ul { 535 padding: 0 0 0 1.5em; 536 margin: 0; 537} 538/* Prevent focus frame */ 539.fancytree-container:focus { 540 outline: none; 541} 542.fancytree-container span.fancytree-statusnode-error span.fancytree-expander { 543 color: red; 544} 545span.fancytree-node { 546 border: 1px solid transparent; 547 border-radius: 3px; 548 padding-left: 8px; 549} 550span.fancytree-title { 551 border-radius: 3px; 552} 553span.fancytree-node.fancytree-selected { 554 background-color: #80c780; 555 border-color: #80c780; 556} 557span.fancytree-node.fancytree-selected span.fancytree-title { 558 background-color: #80c780; 559} 560span.fancytree-node.fancytree-active { 561 background-color: #6aa3d5; 562} 563.fancytree-container.fancytree-treefocus span.fancytree-node:hover { 564 background-color: #e9f2f9; 565} 566.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-focused { 567 border-color: #428bca; 568} 569.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-selected { 570 background-color: #5cb85c; 571} 572.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-selected span.fancytree-title { 573 background-color: #5cb85c; 574} 575.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-active { 576 background-color: #428bca; 577 border-color: #428bca; 578} 579/******************************************************************************* 580 * 'table' extension 581 */ 582table.fancytree-ext-table tbody tr td { 583 border: 1px solid #eeeeee; 584} 585table.fancytree-ext-table tbody tr.fancytree-selected { 586 background-color: #80c780; 587} 588table.fancytree-ext-table tbody tr.fancytree-selected span.fancytree-node { 589 background-color: #80c780; 590} 591table.fancytree-ext-table tbody tr.fancytree-selected span.fancytree-title { 592 background-color: #80c780; 593} 594table.fancytree-ext-table tbody tr.fancytree-active { 595 background-color: #6aa3d5; 596} 597table.fancytree-ext-table tbody tr.fancytree-active span.fancytree-node { 598 background-color: #6aa3d5; 599} 600table.fancytree-ext-table.fancytree-treefocus tbody tr:hover { 601 background-color: #e9f2f9; 602} 603table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-focused span.fancytree-title { 604 outline: 1px dotted #428bca; 605} 606table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-selected { 607 background-color: #5cb85c; 608} 609table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-selected span.fancytree-node { 610 background-color: #5cb85c; 611} 612table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-selected span.fancytree-title { 613 background-color: #5cb85c; 614} 615table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-active { 616 background-color: #428bca; 617} 618table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-active span.fancytree-node { 619 background-color: #428bca; 620} 621