VberAdmin_V4/SourceCode/Src/VberAdmin.Web.Mvc/wwwroot/css/workflow.css

.wf-container {
  width: 100%;
  height: 100%;
  --th: 50px;
  --bh: 50px;
  --margin: 10px;
  display: flex;
  flex-direction: column;
  flex: 1 auto;
  flex-wrap: wrap;
}
.wf-container .step-tab {
  width: 100%;
  height: var(--th);
  margin-bottom: var(--margin);
  background: #fff;
  display: flex;
  font-size: 14px;
  --w: 120px;
  position: relative;
}
.wf-container .step-tab .step-tab-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #999;
  width: var(--w);
  transition: 0.5s background-color;
}
.wf-container .step-tab .step-tab-item:not(:first-child) {
  --ml: calc((100% - var(--w)*3)/2);
  margin-left: var(--ml);
}
.wf-container .step-tab .step-tab-item:not(:first-child):before {
  content: "";
  position: absolute;
  width: calc(var(--ml) - 10px);
  height: 3px;
  background-color: #e8eaec;
}
.wf-container .step-tab .step-tab-item:nth-of-type(2):before {
  left: calc(5px + var(--w));
}
.wf-container .step-tab .step-tab-item:nth-child(3):before {
  left: calc(5px + var(--w) * 2 + var(--ml));
}
.wf-container .step-tab .step-tab-item i {
  font-size: 16px;
  padding-right: 8px;
}
.wf-container .step-tab .step-tab-item.finished i, .wf-container .step-tab .step-tab-item.active i {
  font-weight: 600;
  color: #2d8cf0;
}
.wf-container .step-tab .step-tab-item.finished:before, .wf-container .step-tab .step-tab-item.active:before {
  background-color: #2d8cf0;
}
.wf-container .step-tab .step-tab-item.active {
  color: #3c3c3c;
}
.wf-container .step-content {
  width: 100%;
  height: calc(100% - var(--th) - var(--bh) - var(--margin) * 2);
  background: #fff;
}
.wf-container .step-content .step-content-item {
  display: none;
  width: 100%;
  height: 100%;
}
.wf-container .step-content .step-content-item.step-content-item_0 {
  justify-content: center;
  overflow-y: auto;
}
.wf-container .step-content .step-content-item.step-content-item_0 form {
  padding: 20px;
  width: 500px;
}
.wf-container .step-content .step-content-item.step-content-item_0 form > div {
  margin-bottom: 15px;
}
.wf-container .step-content .step-content-item .design-left, .wf-container .step-content .step-content-item .design-mid, .wf-container .step-content .step-content-item .design-right {
  overflow-y: auto;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-component {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-component .title {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  background: #2d8cf0;
  color: #eee;
  margin-bottom: 10px;
  padding-left: 20px;
  border-bottom: 1px solid #dcdee2;
  font-weight: 600;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-component .form-component-item {
  color: #3c3c3c;
  margin: 5px 8px;
  background: transparent;
  border-radius: 0.25rem;
  border: 1px dashed #dcdee2;
  padding: 5px 10px 4px;
  transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear, -webkit-box-shadow 0.2s linear;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-component .form-component-item:hover {
  border-color: #2d8cf0;
  color: #2d8cf0;
  background: #fafafa;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 15px;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box {
  padding: 5px;
  margin: 3px 0;
  position: relative;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .delete {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  background-color: #ff6a00;
  width: auto;
  padding: 5px 8px;
  cursor: pointer;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box.hover {
  border: 1px dashed #ff6a00;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box.hover > .delete {
  display: block;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .item {
  border: 1px dotted #ddd;
  color: #ccc;
  margin-top: 0;
  padding: 10px 8px 8px;
  display: flex;
  align-items: center;
  /*
  &:last-child {
      border-left: none;
  }*/
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .item span {
  width: 100%;
  text-align: center;
  line-height: 1;
  font-size: 16px;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .item .dy-form-input-box {
  width: 100%;
  padding: 10px;
  position: relative;
  color: #333;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .item .dy-form-input-box.active {
  border: 2px solid #2d8cf0;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .item .dy-form-input-box.active .delete {
  display: block;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .item .dy-form-input-box .delete {
  left: auto;
  right: 0;
  color: #fff;
  background-color: #2d8cf0;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design button.add {
  width: 100%;
  margin: 10px auto;
  border: none;
  background: transparent;
  margin: 5px 8px;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design button.add i {
  padding-right: 10px;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design button.add:hover {
  color: #2d8cf0;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design button.add:hover i {
  color: #2d8cf0;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .form-design-btn-group-add {
  width: auto;
  padding: 7px;
  border: 1px solid #ccc;
  margin: 0 auto;
  border-radius: 0.4rem;
  position: relative;
  display: none;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .form-design-btn-group-add .arrow {
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border: 7px solid transparent;
  top: -7px;
  border-width: 0 7px 7px;
  border-bottom-color: #ccc;
  left: 50%;
  margin-left: 7px;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .form-design-btn-group-add .arrow:after {
  position: absolute;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  top: 1px;
  left: 50%;
  margin-left: -7px;
  border-top-width: 0;
  border-bottom-width: 7px;
  border-bottom-color: #fff;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .form-design-btn-group-add button {
  color: #3c3c3c;
  margin: 5px;
  border-radius: 0.25rem;
  background: transparent;
  border: 1px solid #dcdee2;
  padding: 3px 10px;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .form-design-btn-group-add button:hover {
  border-color: #2d8cf0;
  color: #2d8cf0;
  background: #fafafa;
}
.wf-container .step-content .step-content-item.step-content-item_1 .form-design .form-design-btn-group-add.show {
  display: block;
}
.wf-container .step-content .step-content-item.step-content-item_1 .dy-form-input-params {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 15px;
}
.wf-container .step-content .step-content-item.step-content-item_1 .dy-form-input-params > div {
  margin-bottom: 15px;
}
.wf-container .step-content .step-content-item.step-content-item_1 .dy-form-input-params > div.params .label {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: 15px;
}
.wf-container .step-content .step-content-item.step-content-item_1 .dy-form-input-params > div.params .label span {
  padding: 6px;
  border: 1px dashed #dcdee2;
  border-radius: 3px;
  cursor: pointer;
}
.wf-container .step-content .step-content-item.step-content-item_1 .dy-form-input-params > div.params .input-group {
  margin-top: 10px;
}
.wf-container .step-content .step-content-item.step-content-item_1 .dy-form-input-params > div .input-group-text {
  border: none;
  font-weight: 800;
}
.wf-container .step-content .step-content-item.step-content-item_2 .title {
  width: 100%;
  display: flex;
  align-items: center;
  background: #2d8cf0;
  color: #eee;
  margin-bottom: 10px;
  padding: 7px 20px;
  border-bottom: 1px solid #dcdee2;
  font-weight: 600;
}
.wf-container .step-content .step-content-item.step-content-item_2 .node-source {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.wf-container .step-content .step-content-item.step-content-item_2 .node-source .item {
  width: 80%;
  margin: 8px 0;
  padding: 15px !important;
}
.wf-container .step-content .step-content-item.step-content-item_2 .design-mid {
  overflow: hidden;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design {
  min-width: 100%;
  min-height: 100%;
  /*background: #f5f5f5;*/
  position: relative;
  padding: 20px;
  transform: scale(1);
  background-repeat: repeat;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAADpJREFUOE9jZGBgkGIgDjwjRhnjqIH4gmk0DLGHztBINsRkAJAaonIUyMvEglEDcSeb0TDEGQIDk2wAXwsLGTSQqIAAAAAASUVORK5CYII=");
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .flow-design-node {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 15px !important;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .flow-design-node span {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 80px;
  max-width: 120px;
  min-height: 40px;
  white-space: normal;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .flow-design-node.active {
  font-weight: 600;
  border: 3px solid #ff6a00 !important;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .jtk-connector {
  cursor: pointer;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .jtk-connector path {
  stroke: #FFE177;
  stroke-width: 3;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .jtk-connector.active path {
  stroke: #FFDA59;
  stroke-width: 4;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .jtk-overlay {
  color: #009ef7;
  border: 1px solid #2d8cf0;
  padding: 4px 8px;
  border-radius: 3px;
  border-radius: 4px;
  cursor: pointer;
  background-color: rgba(0, 158, 247, 0.1);
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .jtk-overlay.active {
  font-size: 16px;
  font-weight: 600;
  border-width: 2px;
  background-color: rgba(0, 158, 247, 0.2);
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .jtk-overlay.hide {
  display: none;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box {
  width: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box > div {
  margin-bottom: 15px;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box > div.params .label {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: 15px;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box > div.params .label span {
  padding: 6px;
  border: 1px dashed #dcdee2;
  border-radius: 3px;
  cursor: pointer;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box > div.params .input-group {
  margin-top: 10px;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box .stepBody .dy-select {
  position: relative;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box .stepBody .dy-select .dy-select-result {
  display: none;
  width: 100%;
  position: absolute;
  border-radius: 5px;
  background: #f5f8fa;
  margin-top: 2px;
  padding: 5px 0;
  max-height: 200px;
  overflow-y: auto;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box .stepBody .dy-select .dy-select-result span {
  width: 100%;
  display: inline-block;
  text-align: left;
  padding: 5px 20px;
  cursor: pointer;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box .stepBody .dy-select .dy-select-result span:not(:first-child) {
  border-top: 1px solid #ddd;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box .stepBody .dy-select .dy-select-result strong {
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: 5px 20px;
}
.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .item {
  width: 80%;
  margin: 8px 0;
  padding: 15px !important;
}
.wf-container .step-content .step-content-item .design-container {
  width: 100%;
  height: 100%;
  display: flex;
}
.wf-container .step-content .step-content-item .design-container > div {
  height: 100%;
  border: 1px solid #ddd;
}
.wf-container .step-content .step-content-item .design-container .design-left {
  width: 20%;
}
.wf-container .step-content .step-content-item .design-container .design-mid {
  width: 60%;
}
.wf-container .step-content .step-content-item .design-container .design-right {
  width: 20%;
}
.wf-container .step-content .step-content-item .design-container .design-move-col {
  width: 5px;
  border-left: none;
  border-right: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #eee;
  cursor: col-resize;
}
.wf-container .step-content .step-content-item .design-container .design-move-col .bar {
  width: 100%;
  height: 6px;
  border: 1px solid #aaa;
  border-left: none;
  border-right: none;
  margin: 2px 0;
}
.wf-container .step-content .step-content-item.show {
  display: flex;
}
.wf-container .step-tool {
  width: 100%;
  height: var(--bh);
  margin-top: var(--margin);
  display: flex;
  justify-content: center;
  align-items: center;
}
.wf-container .step-tool button {
  display: none;
  width: 85px;
  margin: 0 10px;
}
.wf-container .step-tool button.show {
  display: block;
}