ui.fancytree.css 11 KB

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