123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459 |
- /*******************************************************************************
- * Tree container
- */
- ul.dt-container
- {
- font-family: arial, helvetica, tahoma;
- font-size: 10pt; /* font size should not be too big */
- white-space: nowrap;
- padding: 3px 3px 3px 13px;
- margin: 0; /* issue 201 */
- background-color: white;
- }
- ul.dt-container ul
- {
- padding: 0 0 0 16px;
- margin: 0;
- }
- ul.dt-container li
- {
- list-style-image: none;
- list-style-position: outside;
- list-style-type: none;
- -moz-background-clip:border;
- -moz-background-inline-policy: continuous;
- -moz-background-origin: padding;
- background-attachment: scroll;
- background-color: transparent;
- background-repeat: repeat-y;
- background-position: 0 0;
- /*
- background-image: url("../img/icons_96x256.gif");
- background-position: -80px -64px;
- */
- margin: 0;
- padding: 1px 0 0 0;
- }
- /* Suppress lines for last child node */
- ul.dt-container li.dt-lastsib
- {
- background-image: none;
- }
- /* Suppress lines if level is fixed expanded (option minExpandLevel) */
- ul.dt-no-connector > li
- {
- background-image: none;
- }
- /* Style, when control is disabled */
- .ui-dt-disabled ul.dt-container
- {
- opacity: 0.5;
- /* filter: alpha(opacity=50); /* Yields a css warning */
- background-color: silver;
- }
- /*******************************************************************************
- * Common icon definitions
- */
- span.dt-empty,
- span.dt-vline,
- span.dt-connector,
- span.dt-expander,
- span.dt-icon,
- span.dt-checkbox,
- span.dt-radio,
- span.dt-drag-helper-img,
- #dt-drop-marker
- {
- width: 16px;
- height: 16px;
- display: -moz-inline-box; /* @ FF 1+2 */
- display: inline-block; /* Required to make a span sizeable */
- vertical-align: top;
- background-repeat: no-repeat;
- background-position: left;
- background-image: url("../img/icons.png");
- background-position: 0 0;
- }
- /** Used by 'icon' node option: */
- ul.dt-container img
- {
- width: 16px;
- height: 16px;
- margin-left: 3px;
- vertical-align: top;
- border-style: none;
- }
- /*******************************************************************************
- * Lines and connectors
- */
- span.dt-connector
- {
- background-position: -16px -64px;
- }
- /*******************************************************************************
- * Expander icon
- * Note: IE6 doesn't correctly evaluate multiples class names,
- * so we create combined class names that can be used in the CSS.
- *
- * Prefix: dt-exp-
- * 1st character: 'e': expanded, 'c': collapsed
- * 2nd character (optional): 'd': lazy (Delayed)
- * 3rd character (optional): 'l': Last sibling
- *
- *
- */
- /*.dt-ico-cf span.dt-icon /\* Collapsed Folder *\/
- {
- background-position: 0px -16px;
- }
- .dt-ico-ef span.dt-icon /\* Expanded Folder *\/
- {
- background-position: -64px -16px;
- }
- */
- span.dt-expander
- {
- /*background-position: 0px -80px;*/
- background-position: 0px -16px;
- cursor: pointer;
- }
- .dt-exp-cl span.dt-expander /* Collapsed, not delayed, last sibling */
- {
- /*background-position: 0px -96px;*/
- background-position: 0px -16px;
- }
- .dt-exp-cd span.dt-expander /* Collapsed, delayed, not last sibling */
- {
- /*background-position: -64px -80px;*/
- background-position: 0px -16px;
- }
- .dt-exp-cdl span.dt-expander /* Collapsed, delayed, last sibling */
- {
- /*background-position: -64px -96px;*/
- background-position: 0px -16px;
- }
- .dt-exp-e span.dt-expander, /* Expanded, not delayed, not last sibling */
- .dt-exp-ed span.dt-expander /* Expanded, delayed, not last sibling */
- {
- /*background-position: -32px -80px;*/
- background-position: -64px -16px;
- }
- .dt-exp-el span.dt-expander, /* Expanded, not delayed, last sibling */
- .dt-exp-edl span.dt-expander /* Expanded, delayed, last sibling */
- {
- /*background-position: -32px -96px;*/
- background-position: -64px -16px;
- }
- .dt-loading span.dt-expander /* 'Loading' status overrides all others */
- {
- background-position: 0 0;
- background-image: url("../img/loading.gif");
- }
- /*******************************************************************************
- * Checkbox icon
- */
- span.dt-checkbox
- {
- margin-left: 3px;
- background-position: 0px -32px;
- }
- span.dt-checkbox:hover
- {
- background-position: -16px -32px;
- }
- .dt-partsel span.dt-checkbox
- {
- background-position: -64px -32px;
- }
- .dt-partsel span.dt-checkbox:hover
- {
- background-position: -80px -32px;
- }
- .dt-selected span.dt-checkbox
- {
- background-position: -32px -32px;
- }
- .dt-selected span.dt-checkbox:hover
- {
- background-position: -48px -32px;
- }
- /*******************************************************************************
- * Radiobutton icon
- * This is a customization, that may be activated by overriding the 'checkbox'
- * class name as 'dt-radio' in the tree options.
- */
- span.dt-radio
- {
- margin-left: 3px;
- background-position: 0px -48px;
- }
- span.dt-radio:hover
- {
- background-position: -16px -48px;
- }
- .dt-partsel span.dt-radio
- {
- background-position: -64px -48px;
- }
- .dt-partsel span.dt-radio:hover
- {
- background-position: -80px -48px;
- }
- .dt-selected span.dt-radio
- {
- background-position: -32px -48px;
- }
- .dt-selected span.dt-radio:hover
- {
- background-position: -48px -48px;
- }
- /*******************************************************************************
- * Node type icon
- * Note: IE6 doesn't correctly evaluate multiples class names,
- * so we create combined class names that can be used in the CSS.
- *
- * Prefix: dt-ico-
- * 1st character: 'e': expanded, 'c': collapsed
- * 2nd character (optional): 'f': folder
- */
- span.dt-icon /* Default icon */
- {
- background-position: -17px 0px;
- }
- .dt-ico-cf span.dt-icon /* Collapsed Folder */
- {
- background-position: 0px -16px;
- }
- .dt-ico-ef span.dt-icon /* Expanded Folder */
- {
- background-position: -64px -16px;
- }
- /* Status node icons */
- .dt-statusnode-wait span.dt-icon
- {
- background-image: url("../img/loading.gif");
- }
- .dt-statusnode-error span.dt-icon
- {
- background-position: 0px -112px;
- /* background-image: url("../img/ltError.gif");*/
- }
- /*******************************************************************************
- * Node titles
- */
- /* @Chrome: otherwise hit area of node titles is broken (issue 133)
- Removed again for issue 165; (133 couldn't be reproduced) */
- span.dt-node
- {
- display: -moz-inline-box; /* issue 133, 165, 172, 192, */
- /* display: inline-block; /* Required to make a span sizeable */
- }
- /* Remove blue color and underline from title links */
- ul.dt-container a
- /*, ul.dt-container a:visited*/
- {
- color: navy; /* inherit doesn't work on IE */
- text-decoration: none;
- vertical-align: top;
- margin: 0px;
- margin-left: 3px;
- /* outline: 0; /* @ Firefox, prevent dotted border after click */
-
- margin-bottom:5px;
- }
- ul.dt-container a:hover
- {
- /* text-decoration: underline; */
- color:red;
- background: #F2F7FD; /* light blue */
- /*border-color: #B8D6FB;*/ /* darker light blue */
- }
- span.dt-node a
- {
- font-size: 10pt; /* required for IE, quirks mode */
- display: inline-block; /* Better alignment, when title contains <br> */
- /* vertical-align: top;*/
- padding-left: 3px;
- padding-right: 3px; /* Otherwise italic font will be outside bounds */
- /* line-height: 16px; /* should be the same as img height, in case 16 px */
- }
- span.dt-folder a
- {
- font-weight: bold;
- }
- ul.dt-container a:focus,
- span.dt-focused a:link /* @IE */
- {
- background-color: #EFEBDE; /* gray */
- }
- span.dt-has-children a
- {
- }
- span.dt-expanded a
- {
- }
- span.dt-selected a
- {
- color: green;
- font-style: italic;
- }
- span.dt-active a
- {
- background-color: #3169C6 !important;
- color: white !important; /* @ IE6 */
- }
- /*******************************************************************************
- * Drag'n'drop support
- */
- /*** Helper object ************************************************************/
- div.dt-drag-helper
- {
- }
- div.dt-drag-helper a
- {
- border: 1px solid gray;
- background-color: white;
- padding-left: 5px;
- padding-right: 5px;
- opacity: 0.8;
- }
- span.dt-drag-helper-img
- {
- /*
- position: relative;
- left: -16px;
- */
- }
- div.dt-drag-helper /*.dt-drop-accept*/
- {
- /* border-color: green;
- background-color: red;*/
- }
- div.dt-drop-accept span.dt-drag-helper-img
- {
- background-position: -32px -112px;
- }
- div.dt-drag-helper.dt-drop-reject
- {
- border-color: red;
- }
- div.dt-drop-reject span.dt-drag-helper-img
- {
- background-position: -16px -112px;
- }
- /*** Drop marker icon *********************************************************/
- #dt-drop-marker
- {
- width: 24px;
- position: absolute;
- background-position: 0 -128px;
- }
- #dt-drop-marker.dt-drop-after,
- #dt-drop-marker.dt-drop-before
- {
- width:64px;
- background-position: 0 -144px;
- }
- #dt-drop-marker.dt-drop-copy
- {
- background-position: -64px -128px;
- }
- #dt-drop-marker.dt-drop-move
- {
- background-position: -64px -128px;
- }
- /*** Source node while dragging ***********************************************/
- span.dt-drag-source
- {
- /* border: 1px dotted gray; */
- background-color: #e0e0e0;
- }
- span.dt-drag-source a
- {
- color: gray;
- }
- /*** Target node while dragging cursor is over it *****************************/
- span.dt-drop-target
- {
- /*border: 1px solid gray;*/
- }
- span.dt-drop-target a
- {
- /*background-repeat: no-repeat;
- background-position: right;
- background-image: url("../img/drop_child.gif");*/
- }
- span.dt-drop-target.dt-drop-accept a
- {
- /*border: 1px solid green;*/
- background-color: #3169C6 !important;
- color: white !important; /* @ IE6 */
- text-decoration: none;
- }
- span.dt-drop-target.dt-drop-reject
- {
- /*border: 1px solid red;*/
- }
- span.dt-drop-target.dt-drop-after a
- {
- /*background-repeat: repeat-x;
- background-position: bottom;
- background-image: url("../img/drop_append.gif");*/
- }
- /*******************************************************************************
- * Custom node classes (sample)
- */
- span.custom1 a
- {
- background-color: maroon;
- color: yellow;
- }
|