fps-flow/styles.css

An easy and simple flow ui created by First Penny

.fp-flow-host-container{overflow:auto !important}.fp-flow-host-container .fp-flow-container{color:#212121 !important;overflow:hidden !important;background:#f7f7f7 !important;position:relative !important;transform-origin:top left}.fp-flow-host-container .fp-flow-container-canvas{background:rgba(0,0,0,0);position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.fp-flow-host-container::-webkit-scrollbar{width:8px;height:6px}.fp-flow-host-container::-webkit-scrollbar-track{background:#f0f0f0}.fp-flow-host-container::-webkit-scrollbar-thumb{background:#aeaeae;border-radius:4px}.fp-flow-host-container::-webkit-scrollbar-thumb:hover{background:#aeaeae}.fp-flow-host-container .fp-flow-node{border-radius:8px;padding:1rem;position:absolute;z-index:5;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;box-shadow:2px 2px 5px rgba(0,0,0,.5);transform-origin:0 0}.fp-flow-host-container .fp-flow-node.dragging{background:#14877b;cursor:move}.fp-flow-host-container .fp-flow-node .header{display:flex;align-items:center;justify-content:space-between;cursor:move}.fp-flow-host-container .fp-flow-node .header .name{font-size:1rem;font-weight:bold;white-space:nowrap;cursor:text}.fp-flow-host-container .fp-flow-node .header .name[contentEditable=true]{outline:none;border:none;border-bottom:2px solid #e40af4;background:rgba(0,0,0,0);padding:0;margin-bottom:-2px}.fp-flow-host-container .fp-flow-node .header .name[contentEditable=true]:focus{outline:none}.fp-flow-host-container .fp-flow-node .header .controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:32px}.fp-flow-host-container .fp-flow-node .header .controls .control{cursor:pointer}.fp-flow-host-container .fp-flow-node .header .controls .control.edit:hover{color:#e40af4}.fp-flow-host-container .fp-flow-node .header .controls .control.delete:hover{color:#f40a0a}.fp-flow-host-container .fp-flow-node .header .controls .control.connection:hover,.fp-flow-host-container .fp-flow-node .header .controls .control.connection.active{color:#e0a308}.fp-flow-host-container .fp-flow-node-body{margin-top:1rem}