allinssl/frontend/apps/vue-flow/flow.css

.title {
  font-size: 16px;
  font-weight: bold;
  padding: 8px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.node-toolbar {
  display: flex;
  gap: 8px;
  background-color: white;
  padding: 6px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toolbar-btn {
  cursor: pointer;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  color: white;
  display: flex;
  align-items: center;
}

.delete-btn {
  background-color: #f56c6c;
}

.delete-btn:hover {
  background-color: #e64242;
}

.duplicate-btn {
  background-color: #409eff;
}

.duplicate-btn:hover {
  background-color: #2a8ce8;
}

/* Vue Flow 自定义样式 */

/* 自定义节点通用样式 */
.vue-flow__node {
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #ddd;
  background-color: white;
  width: 240px;
  min-height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  z-index: -99 !important;
}

.vue-flow__node:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.vue-flow__node.selected {
  box-shadow: 0 0 0 2px #18a0fb;
}

/* 开始节点样式 */
.vue-flow__node.start {
  background-color: #e6f7ff;
  border-color: #1890ff;
  color: #1890ff;
  font-weight: bold;
}

/* 结束节点样式 */
.vue-flow__node.end {
  background-color: #f6ffed;
  border-color: #52c41a;
  color: #52c41a;
  font-weight: bold;
}

/* 申请证书节点样式 */
.vue-flow__node.apply {
  background-color: #fff7e6;
  border-color: #fa8c16;
  color: #fa8c16;
}

/* 部署证书节点样式 */
.vue-flow__node.deploy {
  background-color: #f9f0ff;
  border-color: #722ed1;
  color: #722ed1;
}

/* 通知节点样式 */
.vue-flow__node.notify {
  background-color: #fcf4f6;
  border-color: #eb2f96;
  color: #eb2f96;
}

/* 边的样式 */
.vue-flow__edge {
  stroke: #b1b1b7;
  stroke-width: 2;
  z-index: -1;
}

.vue-flow__edge.selected {
  stroke: #18a0fb;
  stroke-width: 3;
}

.vue-flow__edge-path {
  stroke: #b1b1b7;
  stroke-width: 2;
  z-index: -1;
}

.vue-flow__edge-path:hover {
  stroke: #18a0fb;
}

.vue-flow__edge.selected .vue-flow__edge-path {
  stroke: #18a0fb;
  stroke-width: 3;
}

/* 连接点样式 */
.vue-flow__handle {
  width: 8px;
  height: 8px;
  background-color: #1890ff;
  border-color: white;
  z-index: 0;
}

/* 工具栏样式 */
.node-toolbar {
  display: flex;
  gap: 5px;
  padding: 3px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.toolbar-btn {
  padding: 3px 8px;
  border: none;
  border-radius: 3px;
  background: #f5f5f5;
  color: #333;
  cursor: pointer;
  font-size: 12px;
}

.toolbar-btn:hover {
  background: #e8e8e8;
}

.delete-btn {
  background: #fff1f0;
  color: #f5222d;
}

.delete-btn:hover {
  background: #ffa39e;
}

.duplicate-btn {
  background: #e6f7ff;
  color: #1890ff;
}

.duplicate-btn:hover {
  background: #bae7ff;
}

/* 迷你地图样式 */
.vue-flow__minimap {
  background-color: #f5f5f5;
  border: 1px solid #eee;
}

/* 背景样式 */
.vue-flow__background {
  background-color: #fafafa;
}

/* 控制面板样式 */
.vue-flow__controls {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.vue-flow__controls-button {
  background: white;
  border: 1px solid #eee;
  color: #666;
}

.vue-flow__controls-button:hover {
  background: #f5f5f5;
}