.weilin-comfyui-lora-stack { height: 100%; width: 100%; background: var(--p-dialog-background); transition: width 0.3s ease; overflow: hidden; box-sizing: border-box; border-radius: 6px; border: 1px solid var(--p-dialog-border-color); } .weilin-comfyui-lora-content { width: 100%; height: 100%; display: flex; flex-direction: column; margin-left: 0; } .weilin-comfyui-lora-header { padding: 8px 16px; border-bottom: 1px solid var(--p-dialog-border-color); display: flex; justify-content: flex-end; align-items: center; border-top-right-radius: 8px; border-top-left-radius: 8px; } .weilin-comfyui-header-actions { display: flex; gap: 8px; align-items: center; } .weilin-comfyui-add-btn { border: none; background: none; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .weilin-comfyui-add-btn:hover { background-color: var(--weilin-prompt-ui-hover-bg-color); } .weilin-comfyui-add-btn svg { fill: var(--fg-color); } .weilin-comfyui-lora-body { flex: 1; overflow-y: auto; padding: 16px; } .weilin-comfyui-lora-list { display: flex; flex-direction: column; gap: 8px; } .weilin-comfyui-lora-item { background: var(--comfy-menu-secondary-bg); border: 1px solid var(--p-dialog-border-color); border-radius: 6px; margin-bottom: 8px; overflow: hidden; transition: all 0.3s ease; } .weilin-comfyui-lora-item:hover { border-color: var(--p-dialog-border-color); box-shadow: 0 2px 8px var(--bar-shadow); } .weilin-comfyui-lora-info { display: flex; flex-direction: column; width: 100%; } .weilin-comfyui-hidden-lora { background: rgba(255, 200, 200, 0.2) !important; border-color: rgba(255, 150, 150, 0.5) !important; } .weilin-comfyui-lora-header-item { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 6px 30px; /* 增加左边距为拖拽把手留空间 */ background: var(--p-dialog-background); border-bottom: 1px solid var(--p-dialog-border-color); } .weilin-comfyui-lora-name { font-size: 14px; font-weight: 500; color: var(--fg-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .weilin-comfyui-lora-actions { display: flex; align-items: center; gap: 8px; } .weilin-comfyui-lora-weights { padding: 12px; background: var(--comfy-menu-secondary-bg); display: flex; flex-direction: column; gap: 8px; } /* Compact horizontal layout for weights */ .weilin-comfyui-lora-weights.weilin-comfyui-compact { padding: 8px 12px; flex-direction: row; align-items: center; gap: 12px; } .weilin-comfyui-toggle-item { margin-left: auto; } /* Toggle switch */ .weilin-comfyui-switch { position: relative; display: inline-block; width: 28px; /* 更短 */ height: 20px; /* 略高 */ } .weilin-comfyui-switch input { opacity: 0; width: 0; height: 0; } .weilin-comfyui-slider { position: absolute; cursor: pointer; top: 0; left: 0; bottom: 0; width: 45px; background-color: var(--toggle-track-off, rgba(255,255,255,0.1)); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; border-radius: 9999px; } .weilin-comfyui-slider:before { position: absolute; content: ""; height: 16px; width: 16px; /* 与高度匹配的滑块 */ left: 2px; top: 2px; /* 垂直水平等距居中 */ background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.35); transition: left .18s ease, background-color .18s ease, box-shadow .18s ease; border-radius: 50%; } .weilin-comfyui-switch input:checked + .weilin-comfyui-slider { background-color: var(--weilin-prompt-ui-primary-color, #22c55e); border-color: rgba(0,0,0,0.2); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); } .weilin-comfyui-switch input:checked + .weilin-comfyui-slider:before { left: calc(100% - 18px); /* 100% - knob(16) - margin(2) */ box-shadow: 0 1px 2px rgba(0,0,0,0.25); } /* Hover and focus states */ .weilin-comfyui-toggle-item:hover .weilin-comfyui-slider { background-color: rgba(255,255,255,0.16); } .weilin-comfyui-toggle-item:focus-within .weilin-comfyui-slider { box-shadow: 0 0 0 2px rgba(16,185,129,0.35); } .weilin-comfyui-weight-item { display: flex; align-items: center; gap: 8px; } .weilin-comfyui-weight-item label { font-size: 12px; color: var(--fg-color); min-width: 60px; } .weilin-comfyui-lora-weight { flex: 0 0 80px; width: 80px; padding: 4px 6px; border: 1px solid var(--p-dialog-border-color); border-radius: 4px; background: var(--comfy-input-bg); color: var(--fg-color); font-size: 12px; transition: all 0.3s ease; } .weilin-comfyui-lora-weight:hover { border-color: var(--p-dialog-border-color); } .weilin-comfyui-lora-weight:focus { border-color: var(--p-dialog-border-color); outline: none; box-shadow: 0 0 0 2px var(--p-dialog-border-color-fade); } .weilin-comfyui-remove-btn, .weilin-comfyui-look-on-btn, .weilin-comfyui-toggle-hide-btn { display: flex; align-items: center; justify-content: center; padding: 4px; border: none; background: transparent; cursor: pointer; border-radius: 4px; transition: all 0.3s ease; } .weilin-comfyui-remove-btn:hover, .weilin-comfyui-look-on-btn:hover, .weilin-comfyui-toggle-hide-btn:hover { background-color: var(--weilin-prompt-ui-hover-bg-color); } .weilin-comfyui-remove-btn svg, .weilin-comfyui-look-on-btn svg, .weilin-comfyui-toggle-hide-btn svg { fill: var(--fg-color); } .weilin-comfyui-remove-btn:hover svg { fill: var(--weilin-prompt-ui-danger-color); } .weilin-comfyui-look-on-btn:hover svg { fill: var(--p-dialog-border-color); } .weilin-comfyui-lora-footer { padding: 8px 12px; border-top: 1px solid var(--p-dialog-border-color); display: flex; justify-content: flex-end; } .weilin-comfyui-hide-btn { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border: none; background: transparent; cursor: pointer; border-radius: 4px; font-size: 12px; color: var(--fg-color); transition: all 0.3s ease; } .weilin-comfyui-hide-btn:hover { background-color: var(--weilin-prompt-ui-hover-bg-color); color: var(--fg-color); } .weilin-comfyui-hide-btn svg { fill: var(--fg-color); } .weilin-comfyui-hide-btn:hover svg { fill: var(--p-dialog-border-color); } .weilin-comfyui-lora-item { /* 现有样式 */ transition: transform 0.2s ease, margin 0.2s ease; } .weilin-comfyui-lora-item.weilin-comfyui-dragging { opacity: 0.5; transform: rotate(2deg); z-index: 1000; } .weilin-comfyui-lora-item.weilin-comfyui-shift-down { transform: translateY(100%); } .weilin-comfyui-lora-placeholder { height: 100px; /* 调整为实际lora-item高度 */ border: 2px dashed var(--weilin-prompt-ui-primary-color, #22c55e); border-radius: 6px; background: rgba(34, 197, 94, 0.1); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; color: var(--weilin-prompt-ui-primary-color, #22c55e); font-size: 12px; } /* 移除之前的drag-over样式 */ .weilin-comfyui-lora-item.weilin-comfyui-drag-over-top, .weilin-comfyui-lora-item.weilin-comfyui-drag-over-bottom { border: none; } /* 在现有CSS基础上添加以下样式 */ .weilin-comfyui-lora-header-item { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 6px 30px; /* 增加左边距为拖拽把手留空间 */ background: var(--p-dialog-background); border-bottom: 1px solid var(--p-dialog-border-color); } .weilin-comfyui-drag-handle { position: absolute; top: 50%; left: 6px; transform: translateY(-50%); width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; cursor: grab; color: #666; border-radius: 3px; transition: all 0.2s ease; opacity: 0.6; } .weilin-comfyui-drag-handle:hover { background-color: var(--weilin-prompt-ui-hover-bg-color, rgba(0, 0, 0, 0.1)); color: var(--fg-color); opacity: 1; } .weilin-comfyui-drag-handle:active { cursor: grabbing; background-color: var(--weilin-prompt-ui-primary-color, #22c55e); color: white; opacity: 1; } .weilin-comfyui-lora-item.weilin-comfyui-dragging .weilin-comfyui-drag-handle { cursor: grabbing; background-color: var(--weilin-prompt-ui-primary-color, #16a34a); border-color: var(--weilin-prompt-ui-primary-color, #16a34a); color: white; transform: translateY(-50%) scale(0.95); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* 确保拖拽时的视觉效果 */ .weilin-comfyui-lora-item.weilin-comfyui-dragging { opacity: 0.7; transform: rotate(2deg) scale(1.02); z-index: 1000; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } /* 拖拽占位符样式优化 */ .weilin-comfyui-lora-placeholder { height: 100px; border: 2px dashed var(--weilin-prompt-ui-primary-color, #22c55e); border-radius: 6px; background: rgba(34, 197, 94, 0.1); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; color: var(--weilin-prompt-ui-primary-color, #22c55e); font-size: 12px; animation: weilin-comfyui-placeholderPulse 1.5s ease-in-out infinite; } @keyframes weilin-comfyui-placeholderPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* 修复:确保按钮不会被dom-widget透明层覆盖 */ .weilin-comfyui-add-btn, .weilin-comfyui-remove-btn, .weilin-comfyui-look-on-btn, .weilin-comfyui-toggle-hide-btn { position: relative; z-index: 10; pointer-events: auto; } /* 确保整个lora-stack容器有正确的层级 */ .weilin-comfyui-lora-stack { position: relative; z-index: 1; } /* 确保lora-item有正确的层级 */ .weilin-comfyui-lora-item { position: relative; z-index: 1; } /* 关键修复:仅作用于 WeiLin 节点标记过的 dom-widget,避免影响其他插件 */ .dom-widget.weilin-owned-dom-widget { pointer-events: none !important; position: absolute !important; /* 覆盖fixed定位 */ } .dom-widget.weilin-owned-dom-widget textarea, .dom-widget.weilin-owned-dom-widget input, .dom-widget.weilin-owned-dom-widget select, .dom-widget.weilin-owned-dom-widget button, .dom-widget.weilin-owned-dom-widget canvas, .dom-widget.weilin-owned-dom-widget iframe, .dom-widget.weilin-owned-dom-widget a, .dom-widget.weilin-owned-dom-widget [contenteditable='true'], .dom-widget.weilin-owned-dom-widget .weilin-comfyui-lora-stack, .dom-widget.weilin-owned-dom-widget .weilin-prompt-ui-container, .dom-widget.weilin-owned-dom-widget .weilin-lora-manager-container { pointer-events: auto !important; } /* WeiLin 节点保留 position:fixed 以兼容 Comfy 原生缩放链,仅禁用 pointer-events */ .dom-widget.weilin-owned-dom-widget-fixed { pointer-events: none !important; } .dom-widget.weilin-owned-dom-widget-fixed textarea, .dom-widget.weilin-owned-dom-widget-fixed input, .dom-widget.weilin-owned-dom-widget-fixed select, .dom-widget.weilin-owned-dom-widget-fixed button, .dom-widget.weilin-owned-dom-widget-fixed canvas, .dom-widget.weilin-owned-dom-widget-fixed iframe, .dom-widget.weilin-owned-dom-widget-fixed a, .dom-widget.weilin-owned-dom-widget-fixed [contenteditable='true'], .dom-widget.weilin-owned-dom-widget-fixed .weilin-comfyui-lora-stack, .dom-widget.weilin-owned-dom-widget-fixed .weilin-prompt-ui-container, .dom-widget.weilin-owned-dom-widget-fixed .weilin-lora-manager-container { pointer-events: auto !important; } /* 额外修复:确保weilin相关的容器本身可以响应事件 */ .weilin-comfyui-lora-stack, .weilin-prompt-ui-container, .weilin-lora-manager-container { pointer-events: auto !important; }