ui.fancytree.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  1. /*!
  2. * Fancytree "XP" skin.
  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. /*------------------------------------------------------------------------------
  13. * Helpers
  14. *----------------------------------------------------------------------------*/
  15. .ui-helper-hidden {
  16. display: none;
  17. }
  18. /*------------------------------------------------------------------------------
  19. * Container and UL / LI
  20. *----------------------------------------------------------------------------*/
  21. ul.fancytree-container {
  22. font-family: tahoma, arial, helvetica;
  23. font-size: 10pt;
  24. white-space: nowrap;
  25. padding: 3px;
  26. margin: 0;
  27. background-color: white;
  28. border: 1px dotted gray;
  29. overflow: auto;
  30. min-height: 0%;
  31. position: relative;
  32. }
  33. ul.fancytree-container ul {
  34. padding: 0 0 0 16px;
  35. margin: 0;
  36. }
  37. ul.fancytree-container li {
  38. list-style-image: none;
  39. list-style-position: outside;
  40. list-style-type: none;
  41. -moz-background-clip: border;
  42. -moz-background-inline-policy: continuous;
  43. -moz-background-origin: padding;
  44. background-attachment: scroll;
  45. background-color: transparent;
  46. background-position: 0px 0px;
  47. background-repeat: repeat-y;
  48. background-image: none;
  49. margin: 0;
  50. padding: 1px 0 0 0;
  51. }
  52. ul.fancytree-container li.fancytree-lastsib {
  53. background-image: none;
  54. }
  55. ul.fancytree-no-connector > li {
  56. background-image: none;
  57. }
  58. .ui-fancytree-disabled ul.fancytree-container {
  59. opacity: 0.5;
  60. background-color: silver;
  61. }
  62. /*------------------------------------------------------------------------------
  63. * Common icon definitions
  64. *----------------------------------------------------------------------------*/
  65. span.fancytree-empty,
  66. span.fancytree-vline,
  67. span.fancytree-expander,
  68. span.fancytree-icon,
  69. span.fancytree-checkbox,
  70. span.fancytree-radio,
  71. span.fancytree-drag-helper-img,
  72. #fancytree-drop-marker {
  73. width: 16px;
  74. height: 16px;
  75. display: inline-block;
  76. vertical-align: top;
  77. background-repeat: no-repeat;
  78. background-position: left;
  79. background-image: url("icons.gif");
  80. background-position: 0px 0px;
  81. }
  82. span.fancytree-icon,
  83. span.fancytree-checkbox,
  84. span.fancytree-radio,
  85. span.fancytree-custom-icon {
  86. margin-top: 1px;
  87. }
  88. /* Used by iconclass option */
  89. span.fancytree-custom-icon {
  90. display: inline-block;
  91. }
  92. /* Used by 'icon' node option: */
  93. img.fancytree-icon {
  94. width: 16px;
  95. height: 16px;
  96. margin-left: 3px;
  97. margin-top: 1px;
  98. vertical-align: top;
  99. border-style: none;
  100. }
  101. /*------------------------------------------------------------------------------
  102. * Expander icon
  103. *
  104. * Note: IE6 doesn't correctly evaluate multiples class names,
  105. * so we create combined class names that can be used in the CSS.
  106. *
  107. * Prefix: fancytree-exp-
  108. * 1st character: 'e': expanded, 'c': collapsed, 'n': no children
  109. * 2nd character (optional): 'd': lazy (Delayed)
  110. * 3rd character (optional): 'l': Last sibling
  111. *----------------------------------------------------------------------------*/
  112. span.fancytree-expander {
  113. cursor: pointer;
  114. }
  115. .fancytree-exp-n span.fancytree-expander,
  116. .fancytree-exp-nl span.fancytree-expander {
  117. cursor: default;
  118. }
  119. .fancytree-exp-n span.fancytree-expander,
  120. .fancytree-exp-n span.fancytree-expander:hover {
  121. background-position: 0px -64px;
  122. }
  123. .fancytree-exp-nl span.fancytree-expander,
  124. .fancytree-exp-nl span.fancytree-expander:hover {
  125. background-position: -16px -64px;
  126. }
  127. .fancytree-exp-c span.fancytree-expander {
  128. background-position: 0px -80px;
  129. }
  130. .fancytree-exp-c span.fancytree-expander:hover {
  131. background-position: -16px -80px;
  132. }
  133. .fancytree-exp-cl span.fancytree-expander {
  134. background-position: 0px -96px;
  135. }
  136. .fancytree-exp-cl span.fancytree-expander:hover {
  137. background-position: -16px -96px;
  138. }
  139. .fancytree-exp-cd span.fancytree-expander {
  140. background-position: -64px -80px;
  141. }
  142. .fancytree-exp-cd span.fancytree-expander:hover {
  143. background-position: -80px -80px;
  144. }
  145. .fancytree-exp-cdl span.fancytree-expander {
  146. background-position: -64px -96px;
  147. }
  148. .fancytree-exp-cdl span.fancytree-expander:hover {
  149. background-position: -80px -96px;
  150. }
  151. .fancytree-exp-e span.fancytree-expander,
  152. .fancytree-exp-ed span.fancytree-expander {
  153. background-position: -32px -80px;
  154. }
  155. .fancytree-exp-e span.fancytree-expander:hover,
  156. .fancytree-exp-ed span.fancytree-expander:hover {
  157. background-position: -48px -80px;
  158. }
  159. .fancytree-exp-el span.fancytree-expander,
  160. .fancytree-exp-edl span.fancytree-expander {
  161. background-position: -32px -96px;
  162. }
  163. .fancytree-exp-el span.fancytree-expander:hover,
  164. .fancytree-exp-edl span.fancytree-expander:hover {
  165. background-position: -48px -96px;
  166. }
  167. .fancytree-loading span.fancytree-expander,
  168. .fancytree-loading span.fancytree-expander:hover,
  169. .fancytree-statusnode-wait span.fancytree-icon,
  170. .fancytree-statusnode-wait span.fancytree-icon:hover {
  171. background-image: url("loading.gif");
  172. background-position: 0px 0px;
  173. }
  174. /* Status node icons */
  175. .fancytree-statusnode-error span.fancytree-icon {
  176. background-position: 0px -112px;
  177. }
  178. /*------------------------------------------------------------------------------
  179. * Checkbox icon
  180. *----------------------------------------------------------------------------*/
  181. span.fancytree-checkbox {
  182. margin-left: 3px;
  183. background-position: 0px -32px;
  184. }
  185. span.fancytree-checkbox:hover {
  186. background-position: -16px -32px;
  187. }
  188. .fancytree-partsel span.fancytree-checkbox {
  189. background-position: -64px -32px;
  190. }
  191. .fancytree-partsel span.fancytree-checkbox:hover {
  192. background-position: -80px -32px;
  193. }
  194. .fancytree-selected span.fancytree-checkbox {
  195. background-position: -32px -32px;
  196. }
  197. .fancytree-selected span.fancytree-checkbox:hover {
  198. background-position: -48px -32px;
  199. }
  200. /*------------------------------------------------------------------------------
  201. * Radiobutton icon
  202. * This is a customization, that may be activated by overriding the 'checkbox'
  203. * class name as 'fancytree-radio' in the tree options.
  204. *----------------------------------------------------------------------------*/
  205. .fancytree-radio span.fancytree-checkbox {
  206. background-position: 0px -48px;
  207. }
  208. .fancytree-radio span.fancytree-checkbox:hover {
  209. background-position: -16px -48px;
  210. }
  211. .fancytree-radio .fancytree-partsel span.fancytree-checkbox {
  212. background-position: -64px -48px;
  213. }
  214. .fancytree-radio .fancytree-partsel span.fancytree-checkbox:hover {
  215. background-position: -80px -48px;
  216. }
  217. .fancytree-radio .fancytree-selected span.fancytree-checkbox {
  218. background-position: -32px -48px;
  219. }
  220. .fancytree-radio .fancytree-selected span.fancytree-checkbox:hover {
  221. background-position: -48px -48px;
  222. }
  223. /*------------------------------------------------------------------------------
  224. * Node type icon
  225. * Note: IE6 doesn't correctly evaluate multiples class names,
  226. * so we create combined class names that can be used in the CSS.
  227. *
  228. * Prefix: fancytree-ico-
  229. * 1st character: 'e': expanded, 'c': collapsed
  230. * 2nd character (optional): 'f': folder
  231. *----------------------------------------------------------------------------*/
  232. span.fancytree-icon {
  233. margin-left: 3px;
  234. background-position: 0px 0px;
  235. }
  236. /* Documents */
  237. .fancytree-ico-c span.fancytree-icon:hover {
  238. background-position: -16px 0px;
  239. }
  240. .fancytree-has-children.fancytree-ico-c span.fancytree-icon {
  241. background-position: -32px 0px;
  242. }
  243. .fancytree-has-children.fancytree-ico-c span.fancytree-icon:hover {
  244. background-position: -48px 0px;
  245. }
  246. .fancytree-ico-e span.fancytree-icon {
  247. background-position: -64px 0px;
  248. }
  249. .fancytree-ico-e span.fancytree-icon:hover {
  250. background-position: -80px 0px;
  251. }
  252. /* Folders */
  253. .fancytree-ico-cf span.fancytree-icon {
  254. background-position: 0px -16px;
  255. }
  256. .fancytree-ico-cf span.fancytree-icon:hover {
  257. background-position: -16px -16px;
  258. }
  259. .fancytree-has-children.fancytree-ico-cf span.fancytree-icon {
  260. background-position: -32px -16px;
  261. }
  262. .fancytree-has-children.fancytree-ico-cf span.fancytree-icon:hover {
  263. background-position: -48px -16px;
  264. }
  265. .fancytree-ico-ef span.fancytree-icon {
  266. background-position: -64px -16px;
  267. }
  268. .fancytree-ico-ef span.fancytree-icon:hover {
  269. background-position: -80px -16px;
  270. }
  271. /*------------------------------------------------------------------------------
  272. * Node titles and highlighting
  273. *----------------------------------------------------------------------------*/
  274. span.fancytree-node {
  275. /* See #117 */
  276. display: inherit;
  277. width: 100%;
  278. }
  279. span.fancytree-title {
  280. display: inline-block;
  281. padding-left: 3px;
  282. padding-right: 3px;
  283. color: black;
  284. vertical-align: top;
  285. margin: 0px;
  286. margin-left: 3px;
  287. cursor: pointer;
  288. }
  289. span.fancytree-node.fancytree-error span.fancytree-title {
  290. color: red;
  291. }
  292. /*------------------------------------------------------------------------------
  293. * Drag'n'drop support
  294. *----------------------------------------------------------------------------*/
  295. div.fancytree-drag-helper a {
  296. border: 1px solid gray;
  297. background-color: white;
  298. padding-left: 5px;
  299. padding-right: 5px;
  300. opacity: 0.8;
  301. }
  302. div.fancytree-drag-helper.fancytree-drop-reject {
  303. border-color: red;
  304. }
  305. div.fancytree-drop-accept span.fancytree-drag-helper-img {
  306. background-position: -32px -112px;
  307. }
  308. div.fancytree-drop-reject span.fancytree-drag-helper-img {
  309. background-position: -16px -112px;
  310. }
  311. /*** Drop marker icon *********************************************************/
  312. #fancytree-drop-marker {
  313. width: 32px;
  314. position: absolute;
  315. background-position: 0px -128px;
  316. margin: 0;
  317. }
  318. #fancytree-drop-marker.fancytree-drop-after,
  319. #fancytree-drop-marker.fancytree-drop-before {
  320. width: 64px;
  321. background-position: 0px -144px;
  322. }
  323. #fancytree-drop-marker.fancytree-drop-copy {
  324. background-position: -64px -128px;
  325. }
  326. #fancytree-drop-marker.fancytree-drop-move {
  327. background-position: -32px -128px;
  328. }
  329. /*** Source node while dragging ***********************************************/
  330. span.fancytree-drag-source {
  331. background-color: #e0e0e0;
  332. }
  333. span.fancytree-drag-source span.fancytree.title {
  334. color: gray;
  335. }
  336. /*** Target node while dragging cursor is over it *****************************/
  337. span.fancytree-drop-target.fancytree-drop-accept a {
  338. background-color: #3169C6 !important;
  339. color: white !important;
  340. /* @ IE6 */
  341. text-decoration: none;
  342. }
  343. /*------------------------------------------------------------------------------
  344. * 'table' extension
  345. *----------------------------------------------------------------------------*/
  346. table.fancytree-ext-table {
  347. border-collapse: collapse;
  348. }
  349. table.fancytree-ext-table span.fancytree-node {
  350. display: inline-block;
  351. }
  352. /*------------------------------------------------------------------------------
  353. * 'columnview' extension
  354. *----------------------------------------------------------------------------*/
  355. table.fancytree-ext-columnview tbody tr td {
  356. position: relative;
  357. border: 1px solid gray;
  358. vertical-align: top;
  359. overflow: auto;
  360. }
  361. table.fancytree-ext-columnview tbody tr td > ul {
  362. padding: 0;
  363. }
  364. table.fancytree-ext-columnview tbody tr td > ul li {
  365. list-style-image: none;
  366. list-style-position: outside;
  367. list-style-type: none;
  368. -moz-background-clip: border;
  369. -moz-background-inline-policy: continuous;
  370. -moz-background-origin: padding;
  371. background-attachment: scroll;
  372. background-color: transparent;
  373. background-position: 0px 0px;
  374. background-repeat: repeat-y;
  375. background-image: none;
  376. /* no v-lines */
  377. margin: 0;
  378. padding: 1px 0 0 0;
  379. }
  380. table.fancytree-ext-columnview span.fancytree-node {
  381. position: relative;
  382. /* allow positioning of embedded spans */
  383. display: inline-block;
  384. }
  385. table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
  386. background-color: #CBE8F6;
  387. }
  388. table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {
  389. position: absolute;
  390. right: 3px;
  391. background-position: 0px -80px;
  392. }
  393. table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right:hover {
  394. background-position: -16px -80px;
  395. }
  396. /*------------------------------------------------------------------------------
  397. * 'filter' extension
  398. *----------------------------------------------------------------------------*/
  399. .fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
  400. color: silver;
  401. font-weight: lighter;
  402. }
  403. .fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title,
  404. .fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title {
  405. color: black;
  406. font-weight: normal;
  407. }
  408. .fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title,
  409. .fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title {
  410. color: black;
  411. font-weight: bold;
  412. }
  413. .fancytree-ext-filter-hide tr.fancytree-hide,
  414. .fancytree-ext-filter-hide span.fancytree-node.fancytree-hide {
  415. display: none;
  416. }
  417. .fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
  418. .fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
  419. color: silver;
  420. font-weight: lighter;
  421. }
  422. .fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title,
  423. .fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title {
  424. color: black;
  425. font-weight: normal;
  426. }
  427. /*------------------------------------------------------------------------------
  428. * 'wide' extension
  429. *----------------------------------------------------------------------------*/
  430. ul.fancytree-ext-wide span.fancytree-node > span {
  431. position: relative;
  432. z-index: 2;
  433. }
  434. ul.fancytree-ext-wide span.fancytree-node span.fancytree-title {
  435. position: relative;
  436. z-index: 1;
  437. width: 100%;
  438. padding-left: 503px;
  439. margin-left: -500px;
  440. }
  441. /*******************************************************************************
  442. * Styles specific to this skin.
  443. *
  444. * This section is automatically generated from the `ui-fancytree.less` template.
  445. ******************************************************************************/
  446. /*******************************************************************************
  447. * Tree container
  448. */
  449. ul.fancytree-container li {
  450. background-image: url("vline.gif");
  451. background-position: 0 0;
  452. }
  453. ul.fancytree-container li.fancytree-lastsib {
  454. background-image: none;
  455. }
  456. ul.fancytree-no-connector > li {
  457. background-image: none;
  458. }
  459. /*******************************************************************************
  460. * Node titles
  461. */
  462. span.fancytree-title {
  463. border: 0 solid transparent;
  464. }
  465. span.fancytree-title:hover {
  466. background-color: #F2F7FD;
  467. border-color: #B8D6FB;
  468. }
  469. span.fancytree-focused span.fancytree-title {
  470. outline: 1px dotted black;
  471. background-color: #EFEBDE;
  472. }
  473. .fancytree-folder span.fancytree-title {
  474. font-weight: bold;
  475. }
  476. .fancytree-selected span.fancytree-title {
  477. color: green;
  478. font-style: italic;
  479. }
  480. .fancytree-active span.fancytree-title {
  481. background-color: #3169C6 !important;
  482. color: white !important;
  483. }
  484. /*******************************************************************************
  485. * 'table' extension
  486. */
  487. table.fancytree-ext-table {
  488. border-collapse: collapse;
  489. }
  490. table.fancytree-ext-table tbody tr.fancytree-focused {
  491. background-color: #99DEFD;
  492. }
  493. table.fancytree-ext-table tbody tr.fancytree-active {
  494. background-color: royalblue;
  495. }
  496. table.fancytree-ext-table tbody tr.fancytree-selected {
  497. background-color: #99FDDE;
  498. }