body > .tree ul > li:first-child::before top: 12px li .leaf display: flex flex-direction: row .folder-icon padding: 0 2 0 2 a.settings cursor: pointer display: block padding: 0 2 0 2 text-decoration: none visibility: hidden z-index: 1 &:hover a.settings visibility: visible .tree margin-top: 20px ul li position: relative &::after content: " " height: 1px position: absolute top: 12px &::before bottom: -12px content: " " height: 7px position: absolute top: 5px &:not(:first-child):last-child::before display: none &:only-child::before bottom: 7px content: " " display: list-item //height: 7px position: absolute width: 1px top: 5px &.with-children &::after background-color: #000 &::before background-color: #000 .lefthanded .leaf justify-content : flex-end ul margin-right : 5px li margin-right: 10px padding-right: 5px &.with-children &::after right: -10px width: 5px &::before right: -10px width: 1px &:only-child::before //right: 1px .righthanded .leaf justify-content : flex-start ul margin-left : 5px li margin-left: 10px padding-left: 5px &.with-children &::after left: -10px width: 5px &::before left: -10px width: 1px &:only::before background-color: #000 right: 10px .file-dropped background-color: #d8dfe5 .node-actions padding-left: 5px .update-button &.enabled cursor: pointer &.disabled cursor: wait .node margin-top: 1px &.node-type-valid .text color: blue text-decoration: underline // based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e .progress-pie background: rgba(51, 122, 183, 0.1) border-radius: 100% height: calc(var(--size, 14) * 1px) overflow: hidden position: relative width: calc(var(--size, 14) * 1px) .progress-pie-segment --a: calc(var(--over50, 0) * -100%) --b: calc((1 + var(--over50, 0)) * 100%) --degrees: calc((var(--offset, 0) / 100) * 360) -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b)) clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b)) height: 100% position: absolute transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg)) transform-origin: 50% 100% width: 100% z-index: calc(1 + var(--over50)) &:after, &:before background: var(--bg, rgb(51, 122, 183)) content: '' height: 100% position: absolute width: 100% &:before --degrees: calc((var(--value, 45) / 100) * 360) transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg)) transform-origin: 50% 0% &:after opacity: var(--over50, 0) #node-popup-tooltip .tree .node margin-top: 5px .children .node padding-left: 15px