.vtk-tree { } .vtk-tree ul { margin: 0 0 0 -1.5em; padding: 0 0 0 1.5em; } .vtk-tree li .node { list-style: none; line-height: 1.5em; position: relative; top: 0px; } .vtk-tree li .node .node-line { cursor: pointer; margin-left: 20px; margin-right: 5px; top: .25em; position: relative; } .vtk-tree li .node .node-line div { display: inline-block; } .vtk-tree li .node .node-line .head { position: absolute; background-image: url("resources/file.png"); height: 1.5em; width: 1.5em; background-repeat: no-repeat; background-position: right center; overflow: hidden; left: -1.6em; } .vtk-tree li .label { font-family: Arial,sans-serif; font-size: 1em; font-weight: bold; position: relative; margin-left: 7px; } .vtk-tree li .node .node-line .label { } .vtk-tree li .node .node-line .tail { height: 1.5em; margin-right: 10px; position: relative; float: right; } .vtk-tree li .node .children { } .vtk-tree .action { cursor: pointer; } /* Tree images */ .vtk-tree ul ul { background: url("resources/list-item-contents.png") repeat-y scroll 5px center transparent; } .vtk-tree li { background: url("resources/list-item-root.png") no-repeat scroll left top transparent; list-style: none; margin: 0; padding: 0; } .vtk-tree li li { background-image: url("resources/list-item.png"); padding-left: 1.5em; } .vtk-tree li.lastChild > ul { background-image: none; } .vtk-tree li.lastChild { background-image: url("resources/list-item-last.png"); } .vtk-tree li.open { background-image: url("resources/list-item-open.png"); } .vtk-tree li.open.lastChild { background-image: url("resources/list-item-last-open.png"); } .vtk-tree li ul { position: relative; } .vtk-tree .label { } /* Root node tree image */ .vtk-tree > ul > li { background-image: none !important; } .vtk-tree > ul > li .head { position: absolute; background-image: url("resources/folder.png"); height: 1.5em; width: 1.5em; background-repeat: no-repeat; background-position: right center; overflow: hidden; left: -6px; top: 0; } .vtk-tree > ul > li > div > .label { margin-left: 20px; } /* Selection management */ .vtk-tree li .node .node-line:hover { background: #eeeeee; border-radius: 5px; } .vtk-tree li .node .node-line .tail div { } .vtk-tree li .node .node-line.selected { background: #cccccc; border-radius: 5px; } /* Type icon management */ .vtk-tree li[type='root'] .head { background-image: url("resources/server.png") !important; } .vtk-tree li[type='source'] .head { background-image: url("resources/source.png") !important; } .vtk-tree li[type='filter'] .head { background-image: url("resources/filter.png") !important; } /* ==================== Custom Pipeline usage ==================================== */ .vtk-tree .tail div { position: relative; width: 25px; height: 25px; } /* =========== REPRESENTATION ========= */ .vtk-tree .tail div[type='representation'] { background: url("resources/pipeline/representations.png") no-repeat center center transparent; } .vtk-tree .tail div[type='representation'][data='hide'] { background-position: 0px; } .vtk-tree .tail div[type='representation'][data='outline'] { background-position: -34px; } .vtk-tree .tail div[type='representation'][data='wireframe'] { background-position: -68px; } .vtk-tree .tail div[type='representation'][data='surface'] { background-position: -102px; } .vtk-tree .tail div[type='representation'][data='surface_edge'] { background-position: -136px; } .vtk-tree .tail div[type='representation'][data='volume'] { background-position: -170px; } /* =========== COLOR BY ========= */ .vtk-tree .tail div[type='colorBy'] { background: url("resources/pipeline/colorBy.png") no-repeat center center transparent; background-position: 2px; } .vtk-tree .tail div[type='colorBy'][field='points'] { background-position: 2px; } .vtk-tree .tail div[type='colorBy'][field='cells'] { background-position: -22px; } .vtk-tree .tail div[type='colorBy'][field='color'] { background: none; } /* =========== SCALAR BAR ========= */ .vtk-tree .tail div[type='bar'] { background: url("resources/pipeline/scalarbar.png") no-repeat center center transparent; background-position: -22px; } .vtk-tree .tail div[type='bar'][data='on'] { background: url("resources/pipeline/scalarbar.png") no-repeat transparent; background-position: 2px; }