.indexTree { border-top: 1px solid #999999; border-left: 1px solid #999999; border-bottom: 1px solid #404040; border-right: 1px solid #404040; background-color: white; /* border-box totals: 400 + 3px padding + 1px border per side, and a width that keeps the 2px the original content-box rule overflowed by. */ height: 408px; width: calc(100% + 2px); overflow: auto; margin: 0 auto; padding: 3px; line-height: 100%; } .formButton { margin: 3px 3px 10px; /* sanitize.css forms.css leaves buttons transparent */ background-color: #ffffff; color: #000000; } .indexTree div span { color: #333; font-size: 12px; font-weight: bold; line-height: 19px; vertical-align: bottom; } .indexTree div span:hover { color: #f60; } .indexTree:global(.rc-tree .rc-tree-treenode) { line-height: 20px; white-space: nowrap; } .indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent) { display: inline-block; } .indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit) { display: inline-block; height: 20px; width: 9px; background: url(../assets/images/tree_line.png) no-repeat -18px 0; } /* treeData has a single root, so the first indent unit never carries a line. */ .indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:first-child) { display: none; } .indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:not(.rc-tree-indent-unit-end)) { background-position: -9px 0; } /* The node's own branch (├ or └) is drawn after the indent units. */ .indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent)::after { content: ""; display: inline-block; vertical-align: bottom; height: 20px; width: 9px; background: url(../assets/images/tree_line.png) no-repeat 0 0; } .indexTree:global(.rc-tree .rc-tree-treenode.rc-tree-treenode-leaf-last .rc-tree-indent)::after { background-position: -27px 0; } .indexTree:global(.rc-tree .rc-tree-treenode:first-child .rc-tree-indent)::after { display: none; } .indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-switcher) { display: inline-block; height: 20px; width: 16px; margin-right: 2px; background: url(../assets/images/tree_node.png) no-repeat; cursor: pointer; } .indexTree:global(.rc-tree .rc-tree-treenode:first-child .rc-tree-switcher.rc-tree-switcher-noop) { background-position: 0 0; cursor: auto; } .indexTree:global(.rc-tree .rc-tree-treenode:first-child .rc-tree-switcher.rc-tree-switcher_open) { background-position: -16px 0; } .indexTree:global(.rc-tree .rc-tree-treenode:first-child .rc-tree-switcher.rc-tree-switcher_close) { background-position: -32px 0; } .indexTree:global(.rc-tree .rc-tree-treenode:not(:first-child) .rc-tree-switcher.rc-tree-switcher-noop) { background-position: 0 -20px; cursor: auto; } .indexTree:global(.rc-tree .rc-tree-treenode:not(:first-child) .rc-tree-switcher.rc-tree-switcher_open) { background-position: -16px -20px; } .indexTree:global(.rc-tree .rc-tree-treenode:not(:first-child) .rc-tree-switcher.rc-tree-switcher_close) { background-position: -32px -20px; } .indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper) { display: inline-block; height: 20px; cursor: pointer; } .indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper .rc-tree-title) { vertical-align: middle; line-height: 20px; }