@fabiomdf/vue-hierarchy-tree/dist/vue-hierarchy-tree.css

A Vue 3 component for creating interactive hierarchy trees with drag-and-drop functionality

.action-button[data-v-cb73231d]{position:absolute;left:50%;transform:translate(-50%);width:30px;height:30px;color:#fff;border:2px solid white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 2px 4px #0003;transition:all .2s ease;z-index:20}.action-button--circle[data-v-cb73231d]{border-radius:50%}.action-button--square[data-v-cb73231d]{border-radius:0}.action-button--rounded[data-v-cb73231d]{border-radius:8px}.action-button--top[data-v-cb73231d]{top:-15px}.action-button--bottom[data-v-cb73231d]{bottom:-15px}.action-button[data-v-cb73231d]:hover{transform:translate(-50%) scale(1.1);filter:brightness(1.1)}.action-button[data-v-cb73231d]:active{transform:translate(-50%) scale(.95)}.draggable-box[data-v-c6c90518]{position:absolute;width:150px;height:100px;display:flex;align-items:center;justify-content:center;cursor:grab;border-radius:8px;-webkit-user-select:none;user-select:none;z-index:10}.draggable-box.with-shadow[data-v-c6c90518]{box-shadow:0 4px 8px #0003,0 6px 20px #00000026}.draggable-box.selected[data-v-c6c90518]{box-shadow:0 0 0 3px #ffd7004d;transform:scale(1.02);transition:all .2s ease}.draggable-box.selected.with-shadow[data-v-c6c90518]{box-shadow:0 4px 8px #0003,0 6px 20px #00000026,0 0 0 3px #ffd7004d}.box-content[data-v-c6c90518]{text-align:center;word-wrap:break-word;max-width:130px}.box-content.non-editable[data-v-c6c90518]{cursor:default;opacity:.9}.label-input[data-v-c6c90518]{border:2px solid;border-radius:4px;padding:4px 8px;font-size:14px;text-align:center;width:120px;outline:none}.label-input[data-v-c6c90518]:focus{opacity:.9;box-shadow:0 0 5px #0000004d}.connection-line[data-v-d6f9434c]{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}