.tree margin-top: 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 .lefthanded ul margin-right : 19px li .leaf justify-content : flex-end .righthanded li .leaf justify-content : flex-start // 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