You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

973 lines
27 KiB

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