up

dist/main.css

@@ -0,0 +1,292 @@
+:root {
+  --border-color: #cacaca;
+  --background-color: #ffffff;
+  --background-box-title: #f7f7f7;
+}
+
+html,
+body {
+  margin: 0px;
+  padding: 0px;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  font-family: "Roboto", sans-serif;
+}
+
+.wrapper {
+  margin-top: 50px;
+  width: 100%;
+  height: calc(100vh - 67px);
+  display: flex;
+}
+
+.col {
+  overflow: auto;
+  width: 350px;
+  height: 100%;
+  border-right: 1px solid var(--border-color);
+}
+
+#drawflow {
+  position: relative;
+  width: calc(100vw - 301px);
+  height: calc(100% - 50px);
+  top: 0;
+  background: var(--background-color);
+  background-size: 25px 25px;
+  background-image: linear-gradient(to right, #f1f1f1 1px, transparent 1px),
+    linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
+}
+
+.parent-drawflow {
+  display: flex;
+  overflow: hidden;
+  touch-action: none;
+  outline: 0;
+}
+
+.drawflow-node {
+  padding: 10px;
+  border: 1px solid #c3c3c3;
+  background: #fff !important;
+  text-align: center;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.drawflow-node p {
+  margin: 0;
+}
+
+.drawflow-node .title {
+  font-weight: bold;
+}
+
+.drag-drawflow {
+  line-height: 50px;
+  border-bottom: 1px solid var(--border-color);
+  padding-left: 20px;
+  cursor: move;
+  user-select: none;
+}
+
+.drawflow .drawflow-connection {
+  stroke: #000;
+  stroke-width: 2;
+}
+
+.drawflow .drawflow-connection .main-path {
+  fill: none;
+  stroke: #000;
+  stroke-width: 2;
+}
+
+.drawflow .drawflow-connection .main-path.replied-yes {
+  stroke: #4caf50;
+}
+
+.drawflow .drawflow-connection .main-path.replied-no {
+  stroke: #f44336;
+}
+
+.drawflow .drawflow-node:hover {
+  box-shadow: 0 0 11px 0px #393939b3;
+}
+
+.drawflow .drawflow-node .inputs,
+.drawflow .drawflow-node .outputs {
+  display: flex;
+  width: auto;
+  justify-content: center;
+  align-items: center;
+}
+
+.drawflow .drawflow-node .output {
+  width: 10px;
+  height: 10px;
+  background: rgb(255, 255, 255);
+  border-radius: 50%;
+  color: #8e8e91;
+  border: 2px solid #8e8e91;
+  cursor: crosshair;
+  z-index: 1;
+  top: 24px;
+  right: 0px;
+}
+
+.drawflow .drawflow-node .input {
+  width: 10px;
+  height: 10px;
+  background: #8e8e91;
+  border-radius: 50%;
+  color: #8e8e91;
+  border: 2px solid #8e8e91;
+  cursor: crosshair;
+  z-index: 1;
+  top: -24px;
+  left: 0px;
+}
+
+.drawflow .drawflow-node {
+  background-color: rgb(255, 255, 255);
+  border-color: #8e8e91;
+  border-radius: 10px;
+  border-style: solid;
+  border-width: 2px;
+  height: 54px;
+  width: 280px;
+  display: block;
+}
+.connection-label {
+  padding: 5px;
+  border-radius: 5px;
+  background: #dceccf;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.connection-label.no {
+  background: #f8d0b5;
+}
+
+/* Popup Styling */
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.popup.hidden {
+  display: none;
+}
+
+.popup-content {
+  background: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  width: 100%;
+  max-width: 600px;
+  position: relative;
+}
+
+.popup-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.conent-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.conent-form label {
+  font-weight: bold;
+  margin-bottom: 5px;
+  color: #333;
+  display: block;
+}
+
+.conent-form input,
+.conent-form textarea,
+.conent-form select {
+  padding: 10px;
+  margin-bottom: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+  width: 97%;
+}
+
+.conent-form textarea {
+  resize: vertical;
+}
+
+.conent-form button {
+  padding: 10px 15px;
+  background-color: #007bff;
+  border: none;
+  border-radius: 4px;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.conent-form button:hover {
+  background-color: #0056b3;
+}
+
+.conent-form .form-group {
+  margin-bottom: 15px;
+}
+
+.conent-form .form-group:last-child {
+  margin-bottom: 0;
+}
+
+#popup-form-fields {
+  width: 99%;
+  padding: 10px 0;
+}
+
+.btn-clear {
+  float: right;
+  position: absolute;
+  top: 10px;
+  right: 85px;
+  color: white;
+  font-weight: bold;
+  border: 1px solid #96015b;
+  background: #e3195a;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  z-index: 5;
+}
+
+.connection-label.hide {
+  display: none;
+}
+
+.drawflow-node .add-note {
+  color: #000;
+  text-decoration: none;
+}
+
+#popup-drawflow {
+  position: absolute;
+  display: block;
+  z-index: 9999;
+}
+
+#popup-drawflow .popup-content {
+  box-shadow: 0 0 7px 0px #000;
+}
+
+#popup-drawflow.hidden {
+  display: none;
+}
+
+#popup-drawflow .drag-drawflow {
+  padding-left: 0;
+}
+
+#popup-drawflow .drag-drawflow p {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+#popup-drawflow .drag-drawflow i {
+  margin-right: 10px;
+}