1/******************************************************************************* 2 * Common Styles for Fancytree Skins. 3 * 4 * This section is automatically generated from the `skin-common.less` template. 5 * 6 * Copyright (c) 2008-2023, Martin Wendt (https://wwWendt.de) 7 * Released under the MIT license 8 * https://github.com/mar10/fancytree/wiki/LicenseInfo 9 * 10 * @version 2.38.3 11 * @date 2023-02-01T20:52:50Z 12******************************************************************************/ 13 14// Variables (defaults, may be overwritten by the including .less files) 15@fancy-use-sprites: true; // false: suppress all background images (i.e. icons) 16// @fancy-hide-connectors: true; // false: show vertical connector lines 17 18@fancy-level-indent: 16px; 19@fancy-line-height: 16px; // height of a nodes selection bar including borders 20@fancy-node-v-spacing: 1px; // gap between two node borders 21@fancy-icon-width: 16px; 22@fancy-icon-height: 16px; 23@fancy-icon-spacing: 3px; // margin between icon/icon or icon/title 24@fancy-icon-ofs-top: 0px; // extra vertical offset for expander, checkbox and icon 25@fancy-title-ofs-top: 0px; // extra vertical offset for title 26@fancy-node-border-width: 1px; 27@fancy-node-border-radius: 0px; 28@fancy-node-outline-width: 1px; 29 30// @fancy-line-ofs-top: (@fancy-line-height - @fancy-icon-height) / 2; 31 32// webpack uses /dist/skin-common.less as root path 33// grunt-less uses /dist/skin-Xxx/ui.fancyree.less as root path 34// So we define our theme LESS files for webpack compatibility, i.e. 35// define the image path n every main LESS file instead of here. 36// Prefix may be set to "", "/", "./", or any other value 37// Note: this variable must be defined by the main LESS files: 38// @fancy-image-prefix: ""; 39 40// Use 'url(...)' to link to the throbber image, or 41// use data-uri(...)' to inline the data in css instead: 42/* CHANGE use url, as less does not handel data-uri() correct. DokuWiki can eventually inline it */ 43 @fancy-loading-url: url("@{fancy-image-prefix}loading.gif"); 44//@fancy-loading-url: data-uri("@{fancy-image-prefix}loading.gif"); 45 46// Set to `true` to use `data-uri(...)` instead of a `url(...)` link: 47@fancy-inline-sprites: false; // data-uri() is not handle correct by phpless 48 49@fancy-font-size: 10pt; 50@fancy-font-family: tahoma, arial, helvetica; 51@fancy-font-color: black; 52@fancy-font-color-dimm: #c0c0c0; 53@fancy-font-error-color: red; 54 55//------------------------------------------------------------------------------ 56// Mixins 57//------------------------------------------------------------------------------ 58.setBgPos(@x, @y, @cond:true) when (@cond) { 59 background-position: (@x * -@fancy-icon-width) (@y * -@fancy-icon-height); 60} 61.clearBgImage(@cond:true) when (@cond) { 62 background-image: none; 63} 64.setBgImageUrl(@url) when (@fancy-use-sprites) and not (@fancy-inline-sprites) { 65 background-image: url("@{fancy-image-prefix}@{url}"); 66} 67.setBgImageUrl(@url) when (@fancy-use-sprites) and (@fancy-inline-sprites) { 68 background-image: data-uri("@{fancy-image-prefix}@{url}"); 69} 70.useSprite(@x, @y) when (@fancy-use-sprites) { 71 .setBgPos(@x, @y); 72} 73.rounded-corners(@radius) { 74 -webkit-border-radius: @radius; 75 -moz-border-radius: @radius; 76 -ms-border-radius: @radius; 77 -o-border-radius: @radius; 78 border-radius: @radius; 79} 80.spanStyleMixin(@color, @bgcolor, @bordercolor) { 81 border-color: @bordercolor; 82 background: @bgcolor; 83 color: @color; 84} 85.spanStyleMixin(@color, @bgcolor, @bordercolor, @startColor, @stopColor) { 86 .spanStyleMixin(@color, @bgcolor, @bordercolor); 87 // @c-start: argb(@startColor); 88 // @c-end: argb(@stopColor); 89 background: -moz-linear-gradient( 90 top, 91 @startColor 0%, 92 @stopColor 100% 93 ); // FF3.6+ 94 background: -webkit-gradient( 95 linear, 96 left top, 97 left bottom, 98 color-stop(0%, @startColor), 99 color-stop(100%, @stopColor) 100 ); // Chrome,Safari4+ 101 background: -webkit-linear-gradient( 102 top, 103 @startColor 0%, 104 @stopColor 100% 105 ); // Chrome10+,Safari5.1+ 106 background: -o-linear-gradient( 107 top, 108 @startColor 0%, 109 @stopColor 100% 110 ); // Opera 11.10+ 111 background: -ms-linear-gradient( 112 top, 113 @startColor 0%, 114 @stopColor 100% 115 ); // IE10+ 116 background: linear-gradient( 117 to bottom, 118 @startColor 0%, 119 @stopColor 100% 120 ); // W3C 121 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{startColor}', endColorstr='@{stopColor}',GradientType=0 ); // IE6-9 122} 123 124/*------------------------------------------------------------------------------ 125 * Helpers 126 *----------------------------------------------------------------------------*/ 127// Redefine, in case jQuery-UI is not included 128// .ui-helper-hidden, 129.fancytree-helper-hidden { 130 display: none; 131} 132.fancytree-helper-indeterminate-cb { 133 // tri-state checkbox 134 color: #777; 135} 136.fancytree-helper-disabled { 137 color: @fancy-font-color-dimm; 138} 139 140/* Helper to allow spinning loader icon with glyph-, ligature-, and SVG-icons. */ 141/* CHANGE: renamed spin to spin-fancytree */ 142.fancytree-helper-spin { 143 -webkit-animation: spin-fancytree 1000ms infinite linear; 144 animation: spin-fancytree 1000ms infinite linear; 145} 146/* CHANGE: commented because it is wrong prefixed by phpless 147@-webkit-keyframes spin { 148 0% { 149 -webkit-transform: rotate(0deg); 150 transform: rotate(0deg); 151 } 152 100% { 153 -webkit-transform: rotate(359deg); 154 transform: rotate(359deg); 155 } 156} 157@keyframes spin { 158 0% { 159 -webkit-transform: rotate(0deg); 160 transform: rotate(0deg); 161 } 162 100% { 163 -webkit-transform: rotate(359deg); 164 transform: rotate(359deg); 165 } 166} 167*/ 168/*------------------------------------------------------------------------------ 169 * Container and UL / LI 170 *----------------------------------------------------------------------------*/ 171 172ul.fancytree-container { 173 font-family: @fancy-font-family; 174 font-size: @fancy-font-size; 175 white-space: nowrap; 176 padding: 3px; 177 margin: 0; // DT issue 201 178 //background-color: white; CHANGE 179 //border: 1px dotted gray; CHANGE 180 // overflow: auto; // ext-dnd5: otherwise this is always the scroll parent 181 // height: 100%; // DT issue 263, 470 182 min-height: 0%; // #192 183 position: relative; // #235 184 ul { 185 padding: 0 0 0 @fancy-level-indent; 186 margin: 0; 187 } 188 ul > li:before { 189 // #538 190 content: none; 191 } 192 li { 193 list-style-image: none; 194 list-style-position: outside; 195 list-style-type: none; 196 -moz-background-clip: border; 197 -moz-background-inline-policy: continuous; 198 -moz-background-origin: padding; 199 background-attachment: scroll; 200 background-color: transparent; 201 .setBgPos(0, 0); 202 background-repeat: repeat-y; 203 background-image: none; // no v-lines 204 205 margin: 0; 206 // padding: 1px 0 0 0; // issue #246 207 } 208 // Suppress lines for last child node 209 li.fancytree-lastsib { 210 background-image: none; 211 } 212} 213 214// Style, when control is disabled 215.ui-fancytree-disabled ul.fancytree-container { 216 opacity: 0.5; 217 // filter: alpha(opacity=50); // Yields a css warning 218 background-color: silver; 219} 220 221ul.fancytree-connectors.fancytree-container { 222 li { 223 // Use 'data-uri(...)' to embed the image into CSS instead of linking to 'loading.gif': 224 /* CHANGE: phpless does not handle data-uri() correct */ 225 //background-image: data-uri("@{fancy-image-prefix}vline.gif"); 226 background-image: url("@{fancy-image-prefix}vline.gif"); 227 background-position: 0 0; 228 } 229} 230 231// Suppress lines for last child node 232ul.fancytree-container li.fancytree-lastsib, 233// Suppress lines if level is fixed expanded (option minExpandLevel) 234ul.fancytree-no-connector > li { 235 background-image: none; 236} 237 238// Fix jQuery UI 'blind' animation for jQuery UI (#717) 239li.fancytree-animating { 240 position: relative; 241} 242 243/*------------------------------------------------------------------------------ 244 * Common icon definitions 245 *----------------------------------------------------------------------------*/ 246 247span.fancytree-empty, 248span.fancytree-vline, 249span.fancytree-expander, 250span.fancytree-icon, 251span.fancytree-checkbox, 252// span.fancytree-radio, 253span.fancytree-drag-helper-img, 254#fancytree-drop-marker { 255 width: @fancy-icon-width; 256 height: @fancy-icon-height; 257 // display: -moz-inline-box; // @ FF 1+2 removed for issue 221 258 // -moz-box-align: start; /* issue 221 */ 259 display: inline-block; // Required to make a span sizeable 260 vertical-align: top; 261 background-repeat: no-repeat; 262 // background-position: left; 263 .setBgImageUrl("icons.gif"); 264 .setBgPos(0, 0); 265} 266span.fancytree-icon, 267span.fancytree-checkbox, 268span.fancytree-expander, 269// span.fancytree-radio, 270span.fancytree-custom-icon { 271 margin-top: @fancy-icon-ofs-top; 272} 273/* Used by icon option: */ 274span.fancytree-custom-icon { 275 width: @fancy-icon-width; 276 height: @fancy-icon-height; 277 display: inline-block; 278 margin-left: @fancy-icon-spacing; 279 .setBgPos(0, 0); 280} 281/* Used by 'icon' node option: */ 282img.fancytree-icon { 283 width: @fancy-icon-width; 284 height: @fancy-icon-height; 285 margin-left: @fancy-icon-spacing; 286 margin-top: @fancy-icon-ofs-top; 287 vertical-align: top; 288 border-style: none; 289} 290 291/*------------------------------------------------------------------------------ 292 * Expander icon 293 * 294 * Note: IE6 doesn't correctly evaluate multiples class names, 295 * so we create combined class names that can be used in the CSS. 296 * 297 * Prefix: fancytree-exp- 298 * 1st character: 'e': expanded, 'c': collapsed, 'n': no children 299 * 2nd character (optional): 'd': lazy (Delayed) 300 * 3rd character (optional): 'l': Last sibling 301 *----------------------------------------------------------------------------*/ 302 303span.fancytree-expander { 304 // .useSprite(0, 5); 305 cursor: pointer; 306} 307// span.fancytree-expander:hover { 308// // .useSprite(1, 5); 309// } 310 311// --- End nodes (use connectors instead of expanders) 312 313.fancytree-exp-n span.fancytree-expander, 314.fancytree-exp-nl span.fancytree-expander { 315 // .clearBgImage( @fancy-hide-connectors ); 316 background-image: none; 317 cursor: default; 318} 319.fancytree-connectors { 320 .fancytree-exp-n span.fancytree-expander, 321 .fancytree-exp-nl span.fancytree-expander { 322 .setBgImageUrl("icons.gif"); 323 margin-top: 0; 324 } 325 .fancytree-exp-n span.fancytree-expander, // End-node, not last sibling 326 .fancytree-exp-n span.fancytree-expander:hover { 327 .useSprite(0, 4); 328 } 329 .fancytree-exp-nl span.fancytree-expander, // End-node, last sibling 330 .fancytree-exp-nl span.fancytree-expander:hover { 331 .useSprite(1, 4); 332 } 333} 334 335// --- Collapsed 336 337.fancytree-exp-c span.fancytree-expander { 338 // Collapsed, not delayed, not last sibling 339 .useSprite(0, 5); 340} 341.fancytree-exp-c span.fancytree-expander:hover { 342 .useSprite(1, 5); 343} 344.fancytree-exp-cl span.fancytree-expander { 345 // Collapsed, not delayed, last sibling 346 .useSprite(0, 6); 347} 348.fancytree-exp-cl span.fancytree-expander:hover { 349 .useSprite(1, 6); 350} 351.fancytree-exp-cd span.fancytree-expander { 352 // Collapsed, delayed, not last sibling 353 .useSprite(4, 5); 354} 355.fancytree-exp-cd span.fancytree-expander:hover { 356 .useSprite(5, 5); 357} 358.fancytree-exp-cdl span.fancytree-expander { 359 // Collapsed, delayed, last sibling 360 .useSprite(4, 6); 361} 362.fancytree-exp-cdl span.fancytree-expander:hover { 363 .useSprite(5, 6); 364} 365 366// --- Expanded 367 368.fancytree-exp-e span.fancytree-expander, // Expanded, not delayed, not last sibling 369.fancytree-exp-ed span.fancytree-expander { 370 // Expanded, delayed, not last sibling 371 .useSprite(2, 5); 372} 373.fancytree-exp-e span.fancytree-expander:hover, 374.fancytree-exp-ed span.fancytree-expander:hover { 375 .useSprite(3, 5); 376} 377.fancytree-exp-el span.fancytree-expander, // Expanded, not delayed, last sibling 378.fancytree-exp-edl span.fancytree-expander { 379 // Expanded, delayed, last sibling 380 .useSprite(2, 6); 381} 382.fancytree-exp-el span.fancytree-expander:hover, 383.fancytree-exp-edl span.fancytree-expander:hover { 384 .useSprite(3, 6); 385} 386 387/* Fade out expanders, when container is not hovered or active */ 388.fancytree-fade-expander { 389 span.fancytree-expander { 390 transition: opacity 1.5s; 391 opacity: 0; 392 } 393 &:hover span.fancytree-expander, 394 &.fancytree-treefocus span.fancytree-expander, 395 .fancytree-treefocus span.fancytree-expander, 396 [class*="fancytree-statusnode-"] span.fancytree-expander { 397 transition: opacity 0.6s; 398 opacity: 1; 399 } 400} 401 402//// CHANGE: not used. 403///*------------------------------------------------------------------------------ 404// * Checkbox icon 405// *----------------------------------------------------------------------------*/ 406// 407//span.fancytree-checkbox { 408// margin-left: @fancy-icon-spacing; 409// .useSprite(0, 2); 410// &:hover { 411// .useSprite(1, 2); 412// } 413// &.fancytree-radio { 414// .useSprite(0, 3); 415// } 416// &.fancytree-radio:hover { 417// .useSprite(1, 3); 418// } 419//} 420//.fancytree-partsel span.fancytree-checkbox { 421// .useSprite(4, 2); 422// &:hover { 423// .useSprite(5, 2); 424// } 425// &.fancytree-radio { 426// .useSprite(4, 3); 427// } 428// &.fancytree-radio:hover { 429// .useSprite(5, 3); 430// } 431//} 432//// selected after partsel, so it takes precedence: 433//.fancytree-selected span.fancytree-checkbox { 434// .useSprite(2, 2); 435// &:hover { 436// .useSprite(3, 2); 437// } 438// &.fancytree-radio { 439// .useSprite(2, 3); 440// } 441// &.fancytree-radio:hover { 442// .useSprite(3, 3); 443// } 444//} 445//// Unselectable is dimmed, without hover effects 446//.fancytree-unselectable { 447// span.fancytree-checkbox { 448// opacity: 0.4; 449// filter: alpha(opacity=40); 450// } 451// span.fancytree-checkbox:hover { 452// .useSprite(0, 2); 453// } 454// span.fancytree-checkbox.fancytree-radio:hover { 455// .useSprite(0, 3); 456// } 457// &.fancytree-partsel span.fancytree-checkbox:hover { 458// .useSprite(4, 2); 459// } 460// &.fancytree-selected span.fancytree-checkbox:hover { 461// .useSprite(2, 2); 462// } 463// &.fancytree-selected span.fancytree-checkbox.fancytree-radio:hover { 464// .useSprite(2, 3); 465// } 466//} 467// 468//// Auto-hide checkboxes unless selected or hovered 469//.fancytree-container.fancytree-checkbox-auto-hide { 470// span.fancytree-checkbox { 471// visibility: hidden; 472// } 473// .fancytree-node:hover span.fancytree-checkbox, 474// tr:hover td span.fancytree-checkbox, 475// .fancytree-node.fancytree-selected span.fancytree-checkbox, 476// tr.fancytree-selected td span.fancytree-checkbox { 477// visibility: unset; 478// } 479// &.fancytree-treefocus { 480// .fancytree-node.fancytree-active span.fancytree-checkbox, 481// tr.fancytree-active td span.fancytree-checkbox { 482// visibility: unset; 483// } 484// } 485//} 486 487/*------------------------------------------------------------------------------ 488 * Node type icon 489 * Note: IE6 doesn't correctly evaluate multiples class names, 490 * so we create combined class names that can be used in the CSS. 491 * 492 * Prefix: fancytree-ico- 493 * 1st character: 'e': expanded, 'c': collapsed 494 * 2nd character (optional): 'f': folder 495 *----------------------------------------------------------------------------*/ 496 497span.fancytree-icon { 498 // Default icon 499 margin-left: @fancy-icon-spacing; 500 .useSprite(0, 0); 501} 502 503/* Documents */ 504.fancytree-ico-c span.fancytree-icon { 505 // Collapsed folder (empty) 506 // .useSprite(0, 0); 507} 508.fancytree-ico-c span.fancytree-icon:hover { 509 .useSprite(1, 0); 510} 511.fancytree-has-children.fancytree-ico-c span.fancytree-icon { 512 // Collapsed folder (not empty) 513 .useSprite(2, 0); 514} 515.fancytree-has-children.fancytree-ico-c span.fancytree-icon:hover { 516 .useSprite(3, 0); 517} 518.fancytree-ico-e span.fancytree-icon { 519 // Expanded folder 520 .useSprite(4, 0); 521} 522.fancytree-ico-e span.fancytree-icon:hover { 523 .useSprite(5, 0); 524} 525 526/* Folders */ 527.fancytree-ico-cf span.fancytree-icon { 528 // Collapsed folder (empty) 529 .useSprite(0, 1); 530} 531.fancytree-ico-cf span.fancytree-icon:hover { 532 .useSprite(1, 1); 533} 534.fancytree-has-children.fancytree-ico-cf span.fancytree-icon { 535 // Collapsed folder (not empty) 536 .useSprite(2, 1); 537} 538.fancytree-has-children.fancytree-ico-cf span.fancytree-icon:hover { 539 .useSprite(3, 1); 540} 541.fancytree-ico-ef span.fancytree-icon { 542 // Expanded folder 543 .useSprite(4, 1); 544} 545.fancytree-ico-ef span.fancytree-icon:hover { 546 .useSprite(5, 1); 547} 548 549// 'Loading' status overrides all others 550.fancytree-loading span.fancytree-expander, 551.fancytree-loading span.fancytree-expander:hover, 552.fancytree-statusnode-loading span.fancytree-icon, 553.fancytree-statusnode-loading span.fancytree-icon:hover, 554span.fancytree-icon.fancytree-icon-loading { 555 background-image: @fancy-loading-url; 556 .useSprite(0, 0); 557} 558 559/* Status node icons */ 560 561.fancytree-statusnode-error span.fancytree-icon, 562.fancytree-statusnode-error span.fancytree-icon:hover { 563 .useSprite(0, 7); 564} 565 566/*------------------------------------------------------------------------------ 567 * Node titles and highlighting 568 *----------------------------------------------------------------------------*/ 569 570span.fancytree-node { 571 /* See #117 */ 572 display: inherit; // #117, resolves to 'display: list-item;' for standard trees 573 width: 100%; 574 margin-top: @fancy-node-v-spacing; 575 min-height: @fancy-line-height; 576} 577span.fancytree-title { 578 color: @fancy-font-color; // inherit doesn't work on IE 579 cursor: pointer; 580 display: inline-block; // Better alignment, when title contains <br> 581 vertical-align: top; 582 min-height: @fancy-line-height; 583 padding: 0 3px 0 3px; // Otherwise italic font will be outside right bounds 584 margin: @fancy-title-ofs-top 0 0 @fancy-icon-spacing; 585 // margin: 0px; 586 // margin-top: @fancy-line-ofs-top; 587 // margin-left: @fancy-icon-spacing; 588 border: @fancy-node-border-width solid transparent; // avoid jumping, when a border is added on hover 589 .rounded-corners(@fancy-node-border-radius); 590 // outline: 0; // @ Firefox, prevent dotted border after click 591 // Set transparent border to prevent jumping when active node gets a border 592 // (we can do this, because this theme doesn't use vertical lines) 593 // border: 1px solid white; // Note: 'transparent' would not work in IE6 594} 595span.fancytree-node.fancytree-error span.fancytree-title { 596 color: @fancy-font-error-color; 597} 598 599//// CHANGE: not used. 600///*------------------------------------------------------------------------------ 601// * Drag'n'drop support 602// *----------------------------------------------------------------------------*/ 603///* ext-dnd5: */ 604//span.fancytree-childcounter { 605// color: #fff; 606// background: #337ab7; // bootstrap blue 607// border: 1px solid gray; 608// border-radius: 10px; 609// padding: 2px; 610// text-align: center; 611//} 612// 613///* ext-dnd: */ 614//div.fancytree-drag-helper { 615// span.fancytree-childcounter, 616// span.fancytree-dnd-modifier { 617// display: inline-block; 618// color: #fff; 619// background: #337ab7; // bootstrap blue 620// border: 1px solid gray; 621// min-width: 10px; 622// // min-height: 16px; 623// height: 10px; 624// line-height: 1; 625// vertical-align: baseline; 626// border-radius: 10px; 627// padding: 2px; 628// text-align: center; 629// font-size: 9px; 630// } 631// span.fancytree-childcounter { 632// position: absolute; 633// // left: 16px; 634// top: -6px; 635// right: -6px; 636// } 637// span.fancytree-dnd-modifier { 638// background: #5cb85c; // bootstrap green 639// border: none; 640// // min-height: 16px; 641// // font-size: 12px; 642// font-weight: bolder; 643// } 644// &.fancytree-drop-accept { 645// span.fancytree-drag-helper-img { 646// .useSprite(2, 7); 647// } 648// } 649// &.fancytree-drop-reject { 650// span.fancytree-drag-helper-img { 651// .useSprite(1, 7); 652// } 653// } 654//} 655// 656///*** Drop marker icon *********************************************************/ 657//#fancytree-drop-marker { 658// width: 2 * @fancy-icon-width; // was 24px, but 32 should be correct 659// position: absolute; 660// .useSprite(0, 8); 661// margin: 0; 662// &.fancytree-drop-after, 663// &.fancytree-drop-before { 664// width: 4 * @fancy-icon-width; // 64px; 665// .useSprite(0, 9); 666// } 667// &.fancytree-drop-copy { 668// .useSprite(4, 8); 669// } 670// &.fancytree-drop-move { 671// .useSprite(2, 8); 672// } 673//} 674// 675///*** Source node while dragging ***********************************************/ 676// 677//span.fancytree-drag-source { 678// &.fancytree-drag-remove { 679// // text-decoration: line-through; 680// opacity: 0.15; 681// } 682//} 683// 684///*** Target node while dragging cursor is over it *****************************/ 685// 686//span.fancytree-drop-target { 687// &.fancytree-drop-accept { 688// // outline: 1px dotted #5cb85c; // bootstrap sucess 689// } 690//} 691//span.fancytree-drop-reject { 692// // outline: 1px dotted #d9534f; // boostrap warning 693//} 694 695/*------------------------------------------------------------------------------ 696 * 'rtl' option 697 *----------------------------------------------------------------------------*/ 698 699.fancytree-container.fancytree-rtl { 700 .fancytree-title { 701 /*unicode-bidi: bidi-override;*/ /* optional: reverse title letters */ 702 } 703 span.fancytree-connector, 704 span.fancytree-expander, 705 span.fancytree-icon, 706 span.fancytree-drag-helper-img { 707 .setBgImageUrl("icons-rtl.gif"); 708 } 709 .fancytree-exp-n span.fancytree-expander, 710 .fancytree-exp-nl span.fancytree-expander { 711 background-image: none; 712 } 713 &.fancytree-connectors .fancytree-exp-n span.fancytree-expander, 714 &.fancytree-connectors .fancytree-exp-nl span.fancytree-expander { 715 .setBgImageUrl("icons-rtl.gif"); 716 } 717} 718ul.fancytree-container.fancytree-rtl { 719 ul { 720 padding: 0 16px 0 0; 721 } 722 &.fancytree-connectors li { 723 background-position: right 0; 724 background-image: url("@{fancy-image-prefix}vline-rtl.gif"); 725 } 726 // Suppress lines for last child node 727 li.fancytree-lastsib, 728 // Suppress lines if level is fixed expanded (option minExpandLevel) 729 &.fancytree-no-connector > li { 730 background-image: none; 731 } 732} 733#fancytree-drop-marker.fancytree-rtl { 734 .setBgImageUrl("icons-rtl.gif"); 735} 736 737//// CHANGE: not used. 738///*------------------------------------------------------------------------------ 739// * 'table' extension 740// *----------------------------------------------------------------------------*/ 741// 742//table.fancytree-ext-table { 743// font-family: @fancy-font-family; 744// font-size: @fancy-font-size; 745// border-collapse: collapse; 746// span.fancytree-node { 747// display: inline-block; // #117 748// box-sizing: border-box; // #562 749// } 750// td.fancytree-status-merged { 751// text-align: center; 752// // font-weight: bold; 753// font-style: italic; 754// // line-height: 100px; 755// color: @fancy-font-color-dimm; 756// } 757// tr.fancytree-statusnode-error td.fancytree-status-merged { 758// color: @fancy-font-error-color; 759// } 760// /* ext-ariagrid */ 761// &.fancytree-ext-ariagrid.fancytree-cell-mode { 762// > tbody > tr.fancytree-active > td { 763// background-color: #eee; 764// } 765// > tbody > tr > td.fancytree-active-cell { 766// background-color: #cbe8f6; 767// } 768// &.fancytree-cell-nav-mode > tbody > tr > td.fancytree-active-cell { 769// background-color: #3875d7; 770// } 771// } 772//} 773// 774///*------------------------------------------------------------------------------ 775// * 'columnview' extension 776// *----------------------------------------------------------------------------*/ 777// 778//table.fancytree-ext-columnview { 779// // border-collapse: collapse; 780// // width: 100%; 781// tbody tr td { 782// position: relative; 783// border: 1px solid gray; 784// vertical-align: top; 785// overflow: auto; 786// > ul { 787// padding: 0; 788// li { 789// list-style-image: none; 790// list-style-position: outside; 791// list-style-type: none; 792// -moz-background-clip: border; 793// -moz-background-inline-policy: continuous; 794// -moz-background-origin: padding; 795// background-attachment: scroll; 796// background-color: transparent; 797// .setBgPos(0, 0); 798// background-repeat: repeat-y; 799// background-image: none; /* no v-lines */ 800// 801// margin: 0; 802// // padding: 1px 0 0 0; // issue #246 803// } 804// } 805// } 806// span.fancytree-node { 807// position: relative; /* allow positioning of embedded spans */ 808// display: inline-block; // #117 809// } 810// span.fancytree-node.fancytree-expanded { 811// background-color: #e0e0e0; 812// } 813// span.fancytree-node.fancytree-active { 814// background-color: #cbe8f6; 815// // background-color: royalblue; 816// } 817// .fancytree-has-children span.fancytree-cv-right { 818// position: absolute; 819// right: 3px; 820// .useSprite(0, 5); 821// &:hover { 822// .useSprite(1, 5); 823// } 824// } 825//} 826// 827///*------------------------------------------------------------------------------ 828// * 'filter' extension 829// *----------------------------------------------------------------------------*/ 830// 831//.fancytree-ext-filter-dimm { 832// span.fancytree-node span.fancytree-title { 833// color: @fancy-font-color-dimm; 834// font-weight: lighter; 835// } 836// tr.fancytree-submatch span.fancytree-title, 837// span.fancytree-node.fancytree-submatch span.fancytree-title { 838// color: black; 839// font-weight: normal; 840// } 841// tr.fancytree-match span.fancytree-title, 842// span.fancytree-node.fancytree-match span.fancytree-title { 843// color: black; 844// font-weight: bold; 845// } 846//} 847//.fancytree-ext-filter-hide { 848// tr.fancytree-hide, 849// span.fancytree-node.fancytree-hide { 850// display: none; 851// } 852// tr.fancytree-submatch span.fancytree-title, 853// span.fancytree-node.fancytree-submatch span.fancytree-title { 854// color: @fancy-font-color-dimm; 855// font-weight: lighter; 856// } 857// tr.fancytree-match span.fancytree-title, 858// span.fancytree-node.fancytree-match span.fancytree-title { 859// color: black; 860// font-weight: normal; 861// } 862//} 863///* Hide expanders if all child nodes are hidden by filter */ 864//.fancytree-ext-filter-hide-expanders { 865// tr.fancytree-match span.fancytree-expander, 866// span.fancytree-node.fancytree-match span.fancytree-expander { 867// visibility: hidden; 868// } 869// tr.fancytree-submatch span.fancytree-expander, 870// span.fancytree-node.fancytree-submatch span.fancytree-expander { 871// visibility: visible; 872// } 873//} 874// 875//.fancytree-ext-childcounter, 876//.fancytree-ext-filter { 877// // span.fancytree-title mark { 878// // font-style: normal; 879// // background-color: #ead61c; // yellow 880// // border-radius: 3px; 881// // } 882// span.fancytree-icon, 883// span.fancytree-custom-icon { 884// position: relative; 885// } 886// span.fancytree-childcounter { 887// color: #fff; 888// background: #777; // #337ab7; // bootstrap blue 889// border: 1px solid gray; 890// position: absolute; 891// top: -6px; 892// right: -6px; 893// min-width: 10px; 894// height: 10px; 895// line-height: 1; 896// vertical-align: baseline; 897// border-radius: 10px; 898// padding: 2px; 899// text-align: center; 900// font-size: 9px; 901// } 902//} 903///*------------------------------------------------------------------------------ 904// * 'wide' extension 905// *----------------------------------------------------------------------------*/ 906// 907//ul.fancytree-ext-wide { 908// position: relative; 909// min-width: 100%; 910// z-index: 2; 911// 912// -webkit-box-sizing: border-box; 913// -moz-box-sizing: border-box; 914// box-sizing: border-box; 915// 916// span.fancytree-node > span { 917// position: relative; 918// z-index: 2; 919// } 920// span.fancytree-node span.fancytree-title { 921// position: absolute; // Allow left: 0. Note: prevents smooth dropdown animation 922// z-index: 1; // Behind expander and checkbox 923// left: 0px; 924// min-width: 100%; 925// margin-left: 0; 926// margin-right: 0; 927// 928// -webkit-box-sizing: border-box; 929// -moz-box-sizing: border-box; 930// box-sizing: border-box; 931// } 932//} 933// 934///*------------------------------------------------------------------------------ 935// * 'fixed' extension 936// *----------------------------------------------------------------------------*/ 937// 938//.fancytree-ext-fixed-wrapper { 939// .fancytree-ext-fixed-hidden { 940// display: none; 941// } 942// div.fancytree-ext-fixed-scroll-border-bottom { 943// border-bottom: 3px solid rgba(0, 0, 0, 0.75); 944// } 945// div.fancytree-ext-fixed-scroll-border-right { 946// border-right: 3px solid rgba(0, 0, 0, 0.75); 947// } 948// div.fancytree-ext-fixed-wrapper-tl { 949// position: absolute; 950// overflow: hidden; 951// z-index: 3; 952// top: 0px; 953// left: 0px; 954// } 955// div.fancytree-ext-fixed-wrapper-tr { 956// position: absolute; 957// overflow: hidden; 958// z-index: 2; 959// top: 0px; 960// } 961// div.fancytree-ext-fixed-wrapper-bl { 962// position: absolute; 963// overflow: hidden; 964// z-index: 2; 965// left: 0px; 966// } 967// div.fancytree-ext-fixed-wrapper-br { 968// position: absolute; 969// overflow: scroll; 970// z-index: 1; 971// } 972//} 973
