ui.fancytree.css 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. /*!
  2. * Fancytree "awesome" 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: 0em 0em;
  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: 1em;
  74. height: 1em;
  75. display: inline-block;
  76. vertical-align: top;
  77. background-repeat: no-repeat;
  78. background-position: left;
  79. background-position: 0em 0em;
  80. }
  81. span.fancytree-icon,
  82. span.fancytree-checkbox,
  83. span.fancytree-radio,
  84. span.fancytree-custom-icon {
  85. margin-top: 1px;
  86. }
  87. /* Used by iconclass option */
  88. span.fancytree-custom-icon {
  89. display: inline-block;
  90. }
  91. /* Used by 'icon' node option: */
  92. img.fancytree-icon {
  93. width: 1em;
  94. height: 1em;
  95. margin-left: 0.5em;
  96. margin-top: 1px;
  97. vertical-align: top;
  98. border-style: none;
  99. }
  100. /*------------------------------------------------------------------------------
  101. * Expander icon
  102. *
  103. * Note: IE6 doesn't correctly evaluate multiples class names,
  104. * so we create combined class names that can be used in the CSS.
  105. *
  106. * Prefix: fancytree-exp-
  107. * 1st character: 'e': expanded, 'c': collapsed, 'n': no children
  108. * 2nd character (optional): 'd': lazy (Delayed)
  109. * 3rd character (optional): 'l': Last sibling
  110. *----------------------------------------------------------------------------*/
  111. span.fancytree-expander {
  112. cursor: pointer;
  113. }
  114. .fancytree-exp-n span.fancytree-expander,
  115. .fancytree-exp-nl span.fancytree-expander {
  116. background-image: none;
  117. cursor: default;
  118. }
  119. .fancytree-loading span.fancytree-expander,
  120. .fancytree-loading span.fancytree-expander:hover,
  121. .fancytree-statusnode-wait span.fancytree-icon,
  122. .fancytree-statusnode-wait span.fancytree-icon:hover {
  123. background-image: url("loading.gif");
  124. }
  125. /* Status node icons */
  126. /*------------------------------------------------------------------------------
  127. * Checkbox icon
  128. *----------------------------------------------------------------------------*/
  129. span.fancytree-checkbox {
  130. margin-left: 0.5em;
  131. }
  132. /*------------------------------------------------------------------------------
  133. * Radiobutton icon
  134. * This is a customization, that may be activated by overriding the 'checkbox'
  135. * class name as 'fancytree-radio' in the tree options.
  136. *----------------------------------------------------------------------------*/
  137. /*------------------------------------------------------------------------------
  138. * Node type icon
  139. * Note: IE6 doesn't correctly evaluate multiples class names,
  140. * so we create combined class names that can be used in the CSS.
  141. *
  142. * Prefix: fancytree-ico-
  143. * 1st character: 'e': expanded, 'c': collapsed
  144. * 2nd character (optional): 'f': folder
  145. *----------------------------------------------------------------------------*/
  146. span.fancytree-icon {
  147. margin-left: 0.5em;
  148. }
  149. /* Documents */
  150. /* Folders */
  151. /*------------------------------------------------------------------------------
  152. * Node titles and highlighting
  153. *----------------------------------------------------------------------------*/
  154. span.fancytree-node {
  155. /* See #117 */
  156. display: inherit;
  157. width: 100%;
  158. }
  159. span.fancytree-title {
  160. display: inline-block;
  161. padding-left: 3px;
  162. padding-right: 3px;
  163. color: black;
  164. vertical-align: top;
  165. margin: 0px;
  166. margin-left: 3px;
  167. cursor: pointer;
  168. }
  169. span.fancytree-node.fancytree-error span.fancytree-title {
  170. color: red;
  171. }
  172. /*------------------------------------------------------------------------------
  173. * Drag'n'drop support
  174. *----------------------------------------------------------------------------*/
  175. div.fancytree-drag-helper a {
  176. border: 1px solid gray;
  177. background-color: white;
  178. padding-left: 5px;
  179. padding-right: 5px;
  180. opacity: 0.8;
  181. }
  182. div.fancytree-drag-helper.fancytree-drop-reject {
  183. border-color: red;
  184. }
  185. /*** Drop marker icon *********************************************************/
  186. #fancytree-drop-marker {
  187. width: 2em;
  188. position: absolute;
  189. margin: 0;
  190. }
  191. #fancytree-drop-marker.fancytree-drop-after,
  192. #fancytree-drop-marker.fancytree-drop-before {
  193. width: 4em;
  194. }
  195. /*** Source node while dragging ***********************************************/
  196. span.fancytree-drag-source {
  197. background-color: #e0e0e0;
  198. }
  199. span.fancytree-drag-source span.fancytree.title {
  200. color: gray;
  201. }
  202. /*** Target node while dragging cursor is over it *****************************/
  203. span.fancytree-drop-target.fancytree-drop-accept a {
  204. background-color: #3169C6 !important;
  205. color: white !important;
  206. /* @ IE6 */
  207. text-decoration: none;
  208. }
  209. /*------------------------------------------------------------------------------
  210. * 'table' extension
  211. *----------------------------------------------------------------------------*/
  212. table.fancytree-ext-table {
  213. border-collapse: collapse;
  214. }
  215. table.fancytree-ext-table span.fancytree-node {
  216. display: inline-block;
  217. }
  218. /*------------------------------------------------------------------------------
  219. * 'columnview' extension
  220. *----------------------------------------------------------------------------*/
  221. table.fancytree-ext-columnview tbody tr td {
  222. position: relative;
  223. border: 1px solid gray;
  224. vertical-align: top;
  225. overflow: auto;
  226. }
  227. table.fancytree-ext-columnview tbody tr td > ul {
  228. padding: 0;
  229. }
  230. table.fancytree-ext-columnview tbody tr td > ul li {
  231. list-style-image: none;
  232. list-style-position: outside;
  233. list-style-type: none;
  234. -moz-background-clip: border;
  235. -moz-background-inline-policy: continuous;
  236. -moz-background-origin: padding;
  237. background-attachment: scroll;
  238. background-color: transparent;
  239. background-position: 0em 0em;
  240. background-repeat: repeat-y;
  241. background-image: none;
  242. /* no v-lines */
  243. margin: 0;
  244. padding: 1px 0 0 0;
  245. }
  246. table.fancytree-ext-columnview span.fancytree-node {
  247. position: relative;
  248. /* allow positioning of embedded spans */
  249. display: inline-block;
  250. }
  251. table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
  252. background-color: #CBE8F6;
  253. }
  254. table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {
  255. position: absolute;
  256. right: 3px;
  257. }
  258. /*------------------------------------------------------------------------------
  259. * 'filter' extension
  260. *----------------------------------------------------------------------------*/
  261. .fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
  262. color: silver;
  263. font-weight: lighter;
  264. }
  265. .fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title,
  266. .fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title {
  267. color: black;
  268. font-weight: normal;
  269. }
  270. .fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title,
  271. .fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title {
  272. color: black;
  273. font-weight: bold;
  274. }
  275. .fancytree-ext-filter-hide tr.fancytree-hide,
  276. .fancytree-ext-filter-hide span.fancytree-node.fancytree-hide {
  277. display: none;
  278. }
  279. .fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
  280. .fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
  281. color: silver;
  282. font-weight: lighter;
  283. }
  284. .fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title,
  285. .fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title {
  286. color: black;
  287. font-weight: normal;
  288. }
  289. /*------------------------------------------------------------------------------
  290. * 'wide' extension
  291. *----------------------------------------------------------------------------*/
  292. ul.fancytree-ext-wide span.fancytree-node > span {
  293. position: relative;
  294. z-index: 2;
  295. }
  296. ul.fancytree-ext-wide span.fancytree-node span.fancytree-title {
  297. position: relative;
  298. z-index: 1;
  299. width: 100%;
  300. padding-left: 503px;
  301. margin-left: -500px;
  302. }
  303. /*******************************************************************************
  304. * Styles specific to this skin.
  305. *
  306. * This section is automatically generated from the `ui-fancytree.less` template.
  307. ******************************************************************************/
  308. ul.fancytree-container ul {
  309. padding: 0.3em 0 0 1em;
  310. margin: 0;
  311. }