ui.dynatree.css 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
  1. /*******************************************************************************
  2. * Tree container
  3. */
  4. ul.dt-container
  5. {
  6. font-family: arial, helvetica, tahoma;
  7. font-size: 10pt; /* font size should not be too big */
  8. white-space: nowrap;
  9. padding: 3px 3px 3px 13px;
  10. margin: 0; /* issue 201 */
  11. background-color: white;
  12. }
  13. ul.dt-container ul
  14. {
  15. padding: 0 0 0 16px;
  16. margin: 0;
  17. }
  18. ul.dt-container li
  19. {
  20. list-style-image: none;
  21. list-style-position: outside;
  22. list-style-type: none;
  23. -moz-background-clip:border;
  24. -moz-background-inline-policy: continuous;
  25. -moz-background-origin: padding;
  26. background-attachment: scroll;
  27. background-color: transparent;
  28. background-repeat: repeat-y;
  29. background-position: 0 0;
  30. /*
  31. background-image: url("../img/icons_96x256.gif");
  32. background-position: -80px -64px;
  33. */
  34. margin: 0;
  35. padding: 1px 0 0 0;
  36. }
  37. /* Suppress lines for last child node */
  38. ul.dt-container li.dt-lastsib
  39. {
  40. background-image: none;
  41. }
  42. /* Suppress lines if level is fixed expanded (option minExpandLevel) */
  43. ul.dt-no-connector > li
  44. {
  45. background-image: none;
  46. }
  47. /* Style, when control is disabled */
  48. .ui-dt-disabled ul.dt-container
  49. {
  50. opacity: 0.5;
  51. /* filter: alpha(opacity=50); /* Yields a css warning */
  52. background-color: silver;
  53. }
  54. /*******************************************************************************
  55. * Common icon definitions
  56. */
  57. span.dt-empty,
  58. span.dt-vline,
  59. span.dt-connector,
  60. span.dt-expander,
  61. span.dt-icon,
  62. span.dt-checkbox,
  63. span.dt-radio,
  64. span.dt-drag-helper-img,
  65. #dt-drop-marker
  66. {
  67. width: 16px;
  68. height: 16px;
  69. display: -moz-inline-box; /* @ FF 1+2 */
  70. display: inline-block; /* Required to make a span sizeable */
  71. vertical-align: top;
  72. background-repeat: no-repeat;
  73. background-position: left;
  74. background-image: url("../img/icons.png");
  75. background-position: 0 0;
  76. }
  77. /** Used by 'icon' node option: */
  78. ul.dt-container img
  79. {
  80. width: 16px;
  81. height: 16px;
  82. margin-left: 3px;
  83. vertical-align: top;
  84. border-style: none;
  85. }
  86. /*******************************************************************************
  87. * Lines and connectors
  88. */
  89. span.dt-connector
  90. {
  91. background-position: -16px -64px;
  92. }
  93. /*******************************************************************************
  94. * Expander icon
  95. * Note: IE6 doesn't correctly evaluate multiples class names,
  96. * so we create combined class names that can be used in the CSS.
  97. *
  98. * Prefix: dt-exp-
  99. * 1st character: 'e': expanded, 'c': collapsed
  100. * 2nd character (optional): 'd': lazy (Delayed)
  101. * 3rd character (optional): 'l': Last sibling
  102. *
  103. *
  104. */
  105. /*.dt-ico-cf span.dt-icon /\* Collapsed Folder *\/
  106. {
  107. background-position: 0px -16px;
  108. }
  109. .dt-ico-ef span.dt-icon /\* Expanded Folder *\/
  110. {
  111. background-position: -64px -16px;
  112. }
  113. */
  114. span.dt-expander
  115. {
  116. /*background-position: 0px -80px;*/
  117. background-position: 0px -16px;
  118. cursor: pointer;
  119. }
  120. .dt-exp-cl span.dt-expander /* Collapsed, not delayed, last sibling */
  121. {
  122. /*background-position: 0px -96px;*/
  123. background-position: 0px -16px;
  124. }
  125. .dt-exp-cd span.dt-expander /* Collapsed, delayed, not last sibling */
  126. {
  127. /*background-position: -64px -80px;*/
  128. background-position: 0px -16px;
  129. }
  130. .dt-exp-cdl span.dt-expander /* Collapsed, delayed, last sibling */
  131. {
  132. /*background-position: -64px -96px;*/
  133. background-position: 0px -16px;
  134. }
  135. .dt-exp-e span.dt-expander, /* Expanded, not delayed, not last sibling */
  136. .dt-exp-ed span.dt-expander /* Expanded, delayed, not last sibling */
  137. {
  138. /*background-position: -32px -80px;*/
  139. background-position: -64px -16px;
  140. }
  141. .dt-exp-el span.dt-expander, /* Expanded, not delayed, last sibling */
  142. .dt-exp-edl span.dt-expander /* Expanded, delayed, last sibling */
  143. {
  144. /*background-position: -32px -96px;*/
  145. background-position: -64px -16px;
  146. }
  147. .dt-loading span.dt-expander /* 'Loading' status overrides all others */
  148. {
  149. background-position: 0 0;
  150. background-image: url("../img/loading.gif");
  151. }
  152. /*******************************************************************************
  153. * Checkbox icon
  154. */
  155. span.dt-checkbox
  156. {
  157. margin-left: 3px;
  158. background-position: 0px -32px;
  159. }
  160. span.dt-checkbox:hover
  161. {
  162. background-position: -16px -32px;
  163. }
  164. .dt-partsel span.dt-checkbox
  165. {
  166. background-position: -64px -32px;
  167. }
  168. .dt-partsel span.dt-checkbox:hover
  169. {
  170. background-position: -80px -32px;
  171. }
  172. .dt-selected span.dt-checkbox
  173. {
  174. background-position: -32px -32px;
  175. }
  176. .dt-selected span.dt-checkbox:hover
  177. {
  178. background-position: -48px -32px;
  179. }
  180. /*******************************************************************************
  181. * Radiobutton icon
  182. * This is a customization, that may be activated by overriding the 'checkbox'
  183. * class name as 'dt-radio' in the tree options.
  184. */
  185. span.dt-radio
  186. {
  187. margin-left: 3px;
  188. background-position: 0px -48px;
  189. }
  190. span.dt-radio:hover
  191. {
  192. background-position: -16px -48px;
  193. }
  194. .dt-partsel span.dt-radio
  195. {
  196. background-position: -64px -48px;
  197. }
  198. .dt-partsel span.dt-radio:hover
  199. {
  200. background-position: -80px -48px;
  201. }
  202. .dt-selected span.dt-radio
  203. {
  204. background-position: -32px -48px;
  205. }
  206. .dt-selected span.dt-radio:hover
  207. {
  208. background-position: -48px -48px;
  209. }
  210. /*******************************************************************************
  211. * Node type icon
  212. * Note: IE6 doesn't correctly evaluate multiples class names,
  213. * so we create combined class names that can be used in the CSS.
  214. *
  215. * Prefix: dt-ico-
  216. * 1st character: 'e': expanded, 'c': collapsed
  217. * 2nd character (optional): 'f': folder
  218. */
  219. span.dt-icon /* Default icon */
  220. {
  221. background-position: -17px 0px;
  222. }
  223. .dt-ico-cf span.dt-icon /* Collapsed Folder */
  224. {
  225. background-position: 0px -16px;
  226. }
  227. .dt-ico-ef span.dt-icon /* Expanded Folder */
  228. {
  229. background-position: -64px -16px;
  230. }
  231. /* Status node icons */
  232. .dt-statusnode-wait span.dt-icon
  233. {
  234. background-image: url("../img/loading.gif");
  235. }
  236. .dt-statusnode-error span.dt-icon
  237. {
  238. background-position: 0px -112px;
  239. /* background-image: url("../img/ltError.gif");*/
  240. }
  241. /*******************************************************************************
  242. * Node titles
  243. */
  244. /* @Chrome: otherwise hit area of node titles is broken (issue 133)
  245. Removed again for issue 165; (133 couldn't be reproduced) */
  246. span.dt-node
  247. {
  248. display: -moz-inline-box; /* issue 133, 165, 172, 192, */
  249. /* display: inline-block; /* Required to make a span sizeable */
  250. }
  251. /* Remove blue color and underline from title links */
  252. ul.dt-container a
  253. /*, ul.dt-container a:visited*/
  254. {
  255. color: navy; /* inherit doesn't work on IE */
  256. text-decoration: none;
  257. vertical-align: top;
  258. margin: 0px;
  259. margin-left: 3px;
  260. /* outline: 0; /* @ Firefox, prevent dotted border after click */
  261. margin-bottom:5px;
  262. }
  263. ul.dt-container a:hover
  264. {
  265. /* text-decoration: underline; */
  266. color:red;
  267. background: #F2F7FD; /* light blue */
  268. /*border-color: #B8D6FB;*/ /* darker light blue */
  269. }
  270. span.dt-node a
  271. {
  272. font-size: 10pt; /* required for IE, quirks mode */
  273. display: inline-block; /* Better alignment, when title contains <br> */
  274. /* vertical-align: top;*/
  275. padding-left: 3px;
  276. padding-right: 3px; /* Otherwise italic font will be outside bounds */
  277. /* line-height: 16px; /* should be the same as img height, in case 16 px */
  278. }
  279. span.dt-folder a
  280. {
  281. font-weight: bold;
  282. }
  283. ul.dt-container a:focus,
  284. span.dt-focused a:link /* @IE */
  285. {
  286. background-color: #EFEBDE; /* gray */
  287. }
  288. span.dt-has-children a
  289. {
  290. }
  291. span.dt-expanded a
  292. {
  293. }
  294. span.dt-selected a
  295. {
  296. color: green;
  297. font-style: italic;
  298. }
  299. span.dt-active a
  300. {
  301. background-color: #3169C6 !important;
  302. color: white !important; /* @ IE6 */
  303. }
  304. /*******************************************************************************
  305. * Drag'n'drop support
  306. */
  307. /*** Helper object ************************************************************/
  308. div.dt-drag-helper
  309. {
  310. }
  311. div.dt-drag-helper a
  312. {
  313. border: 1px solid gray;
  314. background-color: white;
  315. padding-left: 5px;
  316. padding-right: 5px;
  317. opacity: 0.8;
  318. }
  319. span.dt-drag-helper-img
  320. {
  321. /*
  322. position: relative;
  323. left: -16px;
  324. */
  325. }
  326. div.dt-drag-helper /*.dt-drop-accept*/
  327. {
  328. /* border-color: green;
  329. background-color: red;*/
  330. }
  331. div.dt-drop-accept span.dt-drag-helper-img
  332. {
  333. background-position: -32px -112px;
  334. }
  335. div.dt-drag-helper.dt-drop-reject
  336. {
  337. border-color: red;
  338. }
  339. div.dt-drop-reject span.dt-drag-helper-img
  340. {
  341. background-position: -16px -112px;
  342. }
  343. /*** Drop marker icon *********************************************************/
  344. #dt-drop-marker
  345. {
  346. width: 24px;
  347. position: absolute;
  348. background-position: 0 -128px;
  349. }
  350. #dt-drop-marker.dt-drop-after,
  351. #dt-drop-marker.dt-drop-before
  352. {
  353. width:64px;
  354. background-position: 0 -144px;
  355. }
  356. #dt-drop-marker.dt-drop-copy
  357. {
  358. background-position: -64px -128px;
  359. }
  360. #dt-drop-marker.dt-drop-move
  361. {
  362. background-position: -64px -128px;
  363. }
  364. /*** Source node while dragging ***********************************************/
  365. span.dt-drag-source
  366. {
  367. /* border: 1px dotted gray; */
  368. background-color: #e0e0e0;
  369. }
  370. span.dt-drag-source a
  371. {
  372. color: gray;
  373. }
  374. /*** Target node while dragging cursor is over it *****************************/
  375. span.dt-drop-target
  376. {
  377. /*border: 1px solid gray;*/
  378. }
  379. span.dt-drop-target a
  380. {
  381. /*background-repeat: no-repeat;
  382. background-position: right;
  383. background-image: url("../img/drop_child.gif");*/
  384. }
  385. span.dt-drop-target.dt-drop-accept a
  386. {
  387. /*border: 1px solid green;*/
  388. background-color: #3169C6 !important;
  389. color: white !important; /* @ IE6 */
  390. text-decoration: none;
  391. }
  392. span.dt-drop-target.dt-drop-reject
  393. {
  394. /*border: 1px solid red;*/
  395. }
  396. span.dt-drop-target.dt-drop-after a
  397. {
  398. /*background-repeat: repeat-x;
  399. background-position: bottom;
  400. background-image: url("../img/drop_append.gif");*/
  401. }
  402. /*******************************************************************************
  403. * Custom node classes (sample)
  404. */
  405. span.custom1 a
  406. {
  407. background-color: maroon;
  408. color: yellow;
  409. }