.context-menu { position: fixed; background: var(--lora-surface); border: 1px solid var(--border-color); border-radius: var(--border-radius-xs); padding: 4px 0; min-width: 180px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); z-index: 1000; display: none; backdrop-filter: blur(10px); } .context-menu-item { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--text-color); background: var(--lora-surface); } .context-menu-item:hover { background-color: var(--lora-accent); color: var(--lora-text); } .context-menu-separator { height: 1px; background-color: var(--border-color); margin: 4px 0; } .context-menu-item.delete-item { color: var(--danger-color); } .context-menu-item i { width: 16px; text-align: center; } /* NSFW Level Selector */ .nsfw-level-selector { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius-base); padding: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); z-index: var(--z-modal); width: 300px; display: none; } .nsfw-level-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .nsfw-level-header h3 { margin: 0; font-size: 16px; font-weight: 500; } .close-nsfw-selector { background: transparent; border: none; color: var(--text-color); cursor: pointer; padding: 4px; border-radius: var(--border-radius-xs); } .close-nsfw-selector:hover { background: var(--border-color); } .current-level { margin-bottom: 12px; padding: 8px; background: var(--bg-color); border-radius: var(--border-radius-xs); border: 1px solid var(--border-color); } .nsfw-level-options { display: flex; flex-wrap: wrap; gap: 8px; } .nsfw-level-btn { flex: 1 0 calc(33% - 8px); padding: 8px; border-radius: var(--border-radius-xs); background: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-color); cursor: pointer; transition: all 0.2s ease; } .nsfw-level-btn:hover { background: var(--lora-border); } .nsfw-level-btn.active { background: var(--lora-accent); color: white; border-color: var(--lora-accent); } /* Node Selector */ .node-selector { position: fixed; background: var(--lora-surface); border: 1px solid var(--border-color); border-radius: var(--border-radius-xs); padding: 4px 0; min-width: 200px; max-width: 350px; max-height: 400px; overflow-y: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); z-index: 1000; display: none; backdrop-filter: blur(10px); } .node-item { padding: 10px 15px; cursor: pointer; display: flex; align-items: center; gap: 10px; color: var(--text-color); background: var(--lora-surface); transition: background-color 0.2s; border-bottom: 1px solid var(--border-color); } .node-item:last-child { border-bottom: none; } .node-item:hover { background-color: var(--lora-accent); color: var(--lora-text); } .node-icon-indicator { width: 24px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .node-icon-indicator i { color: white; font-size: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .node-icon-indicator.all-nodes { background: linear-gradient(45deg, #4a90e2, #357abd); } .send-all-item { border-top: 1px solid var(--border-color); font-weight: 500; background: var(--card-bg); } .send-all-item:hover { background-color: var(--lora-accent); color: var(--lora-text); } .send-all-item i { width: 16px; text-align: center; } /* Node Selector Header */ .node-selector-header { padding: 10px 15px; border-bottom: 1px solid var(--border-color); background: var(--card-bg); display: flex; flex-direction: column; gap: 4px; } .selector-action-type { font-weight: 600; font-size: 14px; color: var(--lora-accent); } .selector-instruction { font-size: 12px; color: var(--text-muted); font-style: italic; } /* Bulk Context Menu Header */ .bulk-context-header { padding: 10px 12px; background: var(--card-bg); /* Use card background for subtlety */ color: var(--text-color); /* Use standard text color */ display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; border-radius: var(--border-radius-xs) var(--border-radius-xs) 0 0; border-bottom: 1px solid var(--border-color); /* Add subtle separator */ } .bulk-context-header i { width: 16px; text-align: center; color: var(--lora-accent); /* Accent only the icon for a hint of color */ }