@logicflow/react-node-registry
Version:
LogicFlow React Shape
1 lines • 2.12 kB
CSS
.lf-vue-node-container{border-radius:12px;box-shadow:0 0 10px #cad2e15f;box-sizing:border-box;color:#474747;display:flex;flex-direction:column;padding:6px;position:relative}.lf-vue-node-content-wrap{display:flex;flex:1 1 auto;justify-content:center}.lf-vue-node-title{align-items:flex-start;backdrop-filter:saturate(180%) blur(4px);box-sizing:border-box;display:flex;justify-content:space-between;margin-bottom:4px;padding:0 8px}.lf-vue-node-title-expanded{border-bottom:1px solid #eaeaea;margin-bottom:6px;padding-bottom:8px}@supports not (backdrop-filter:blur(1px)){.lf-vue-node-title{backdrop-filter:none}}.lf-vue-node-title-left{align-items:center;display:flex;gap:6px;min-width:0}.lf-vue-node-title-icon{color:#666;display:inline-block;font-style:normal;height:16px;line-height:16px;text-align:center;width:16px}.lf-vue-node-title-text{color:#333;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lf-vue-node-title-actions{align-items:center;display:flex;gap:6px}.lf-vue-node-title-expand,.lf-vue-node-title-more{align-items:center;appearance:none;background:transparent;border:none;border-radius:4px;cursor:pointer;display:inline-flex;height:20px;justify-content:center;padding:2px;transition:background .15s ease;width:20px}.lf-vue-node-title-expand:hover,.lf-vue-node-title-more:hover{background:rgba(0,0,0,.06)}.lf-vue-node-title-expand-icon{color:#666;font-style:normal;transition:transform .3s ease}.lf-vue-node-title-more-icon{color:#666;font-style:normal}.lf-vue-node-title-tooltip{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.12);max-width:240px;min-width:120px;padding:6px 8px;position:absolute;right:-135px;top:-50px;transform:translateY(calc(100% + 4px));transition:opacity .15s ease,transform .15s ease}.lf-vue-node-title-tooltip-list{display:flex;flex-direction:column;gap:4px}.lf-vue-node-title-tooltip-item{align-items:center;border-radius:4px;color:#333;cursor:pointer;display:flex;font-size:12px;justify-content:flex-start;padding:6px}.lf-vue-node-title-tooltip-item:hover{background:rgba(0,0,0,.05)}