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.
 
 
 
 
 

621 lines
19 KiB

  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. *----------------------------------------------------------------------------*/
  59. ul.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. }
  70. ul.fancytree-container ul {
  71. padding: 0 0 0 16px;
  72. margin: 0;
  73. }
  74. ul.fancytree-container ul > li:before {
  75. content: none;
  76. }
  77. ul.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. }
  91. ul.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. }
  98. ul.fancytree-connectors.fancytree-container li {
  99. background-image: url("../skin-bootstrap-n/vline.gif");
  100. background-position: 0 0;
  101. }
  102. ul.fancytree-container li.fancytree-lastsib,
  103. ul.fancytree-no-connector > li {
  104. background-image: none;
  105. }
  106. li.fancytree-animating {
  107. position: relative;
  108. }
  109. /*------------------------------------------------------------------------------
  110. * Common icon definitions
  111. *----------------------------------------------------------------------------*/
  112. span.fancytree-empty,
  113. span.fancytree-vline,
  114. span.fancytree-expander,
  115. span.fancytree-icon,
  116. span.fancytree-checkbox,
  117. span.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. }
  126. span.fancytree-icon,
  127. span.fancytree-checkbox,
  128. span.fancytree-expander,
  129. span.fancytree-custom-icon {
  130. margin-top: 0px;
  131. }
  132. /* Used by icon option: */
  133. span.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: */
  141. img.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. *----------------------------------------------------------------------------*/
  160. span.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. *----------------------------------------------------------------------------*/
  187. span.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. *----------------------------------------------------------------------------*/
  216. span.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,
  225. span.fancytree-icon.fancytree-icon-loading {
  226. background-image: none;
  227. }
  228. /* Status node icons */
  229. /*------------------------------------------------------------------------------
  230. * Node titles and highlighting
  231. *----------------------------------------------------------------------------*/
  232. span.fancytree-node {
  233. /* See #117 */
  234. display: inherit;
  235. width: 100%;
  236. margin-top: 1px;
  237. min-height: 1em;
  238. }
  239. span.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. }
  254. span.fancytree-node.fancytree-error span.fancytree-title {
  255. color: red;
  256. }
  257. /*------------------------------------------------------------------------------
  258. * Drag'n'drop support
  259. *----------------------------------------------------------------------------*/
  260. /* ext-dnd5: */
  261. span.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: */
  270. div.fancytree-drag-helper span.fancytree-childcounter,
  271. div.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. }
  285. div.fancytree-drag-helper span.fancytree-childcounter {
  286. position: absolute;
  287. top: -6px;
  288. right: -6px;
  289. }
  290. div.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 ***********************************************/
  306. span.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. }
  321. ul.fancytree-container.fancytree-rtl ul {
  322. padding: 0 16px 0 0;
  323. }
  324. ul.fancytree-container.fancytree-rtl.fancytree-connectors li {
  325. background-position: right 0;
  326. background-image: url("../skin-bootstrap-n/vline-rtl.gif");
  327. }
  328. ul.fancytree-container.fancytree-rtl li.fancytree-lastsib,
  329. ul.fancytree-container.fancytree-rtl.fancytree-no-connector > li {
  330. background-image: none;
  331. }
  332. /*------------------------------------------------------------------------------
  333. * 'table' extension
  334. *----------------------------------------------------------------------------*/
  335. table.fancytree-ext-table {
  336. font-family: tahoma, arial, helvetica;
  337. font-size: 10pt;
  338. border-collapse: collapse;
  339. /* ext-ariagrid */
  340. }
  341. table.fancytree-ext-table span.fancytree-node {
  342. display: inline-block;
  343. box-sizing: border-box;
  344. }
  345. table.fancytree-ext-table td.fancytree-status-merged {
  346. text-align: center;
  347. font-style: italic;
  348. color: #c0c0c0;
  349. }
  350. table.fancytree-ext-table tr.fancytree-statusnode-error td.fancytree-status-merged {
  351. color: red;
  352. }
  353. table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode > tbody > tr.fancytree-active > td {
  354. background-color: #eee;
  355. }
  356. table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode > tbody > tr > td.fancytree-active-cell {
  357. background-color: #cbe8f6;
  358. }
  359. table.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. *----------------------------------------------------------------------------*/
  365. table.fancytree-ext-columnview tbody tr td {
  366. position: relative;
  367. border: 1px solid gray;
  368. vertical-align: top;
  369. overflow: auto;
  370. }
  371. table.fancytree-ext-columnview tbody tr td > ul {
  372. padding: 0;
  373. }
  374. table.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. }
  389. table.fancytree-ext-columnview span.fancytree-node {
  390. position: relative;
  391. /* allow positioning of embedded spans */
  392. display: inline-block;
  393. }
  394. table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
  395. background-color: #e0e0e0;
  396. }
  397. table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
  398. background-color: #cbe8f6;
  399. }
  400. table.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. *----------------------------------------------------------------------------*/
  470. ul.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. }
  478. ul.fancytree-ext-wide span.fancytree-node > span {
  479. position: relative;
  480. z-index: 2;
  481. }
  482. ul.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. ******************************************************************************/
  534. ul.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. }
  545. span.fancytree-node {
  546. border: 1px solid transparent;
  547. border-radius: 3px;
  548. padding-left: 8px;
  549. }
  550. span.fancytree-title {
  551. border-radius: 3px;
  552. }
  553. span.fancytree-node.fancytree-selected {
  554. background-color: #80c780;
  555. border-color: #80c780;
  556. }
  557. span.fancytree-node.fancytree-selected span.fancytree-title {
  558. background-color: #80c780;
  559. }
  560. span.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. */
  582. table.fancytree-ext-table tbody tr td {
  583. border: 1px solid #eeeeee;
  584. }
  585. table.fancytree-ext-table tbody tr.fancytree-selected {
  586. background-color: #80c780;
  587. }
  588. table.fancytree-ext-table tbody tr.fancytree-selected span.fancytree-node {
  589. background-color: #80c780;
  590. }
  591. table.fancytree-ext-table tbody tr.fancytree-selected span.fancytree-title {
  592. background-color: #80c780;
  593. }
  594. table.fancytree-ext-table tbody tr.fancytree-active {
  595. background-color: #6aa3d5;
  596. }
  597. table.fancytree-ext-table tbody tr.fancytree-active span.fancytree-node {
  598. background-color: #6aa3d5;
  599. }
  600. table.fancytree-ext-table.fancytree-treefocus tbody tr:hover {
  601. background-color: #e9f2f9;
  602. }
  603. table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-focused span.fancytree-title {
  604. outline: 1px dotted #428bca;
  605. }
  606. table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-selected {
  607. background-color: #5cb85c;
  608. }
  609. table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-selected span.fancytree-node {
  610. background-color: #5cb85c;
  611. }
  612. table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-selected span.fancytree-title {
  613. background-color: #5cb85c;
  614. }
  615. table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-active {
  616. background-color: #428bca;
  617. }
  618. table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-active span.fancytree-node {
  619. background-color: #428bca;
  620. }