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