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