From 05b3bb394ae556bc79867a1e5f7eff656a435dce Mon Sep 17 00:00:00 2001 From: Shni Date: Tue, 4 Nov 2025 11:06:57 -0600 Subject: [PATCH] feat: Agregar soporte para comandos slash con opciones, subcomandos y grupos en CommandCreator --- AEditor/src/components/CommandCreator.vue | 1063 ++++++++++++++++++++- 1 file changed, 1062 insertions(+), 1 deletion(-) diff --git a/AEditor/src/components/CommandCreator.vue b/AEditor/src/components/CommandCreator.vue index c10da0c..ef241cf 100644 --- a/AEditor/src/components/CommandCreator.vue +++ b/AEditor/src/components/CommandCreator.vue @@ -72,6 +72,292 @@ /> + +
+
+ +
+ + + +
+
+ + +
+
+ Comando Simple: El comando tiene opciones directas (ej: /ban usuario:@user razon:texto) +
+
+ Subcomandos: El comando tiene mĆŗltiples subcomandos (ej: /config set, /config view) +
+
+ Grupos de Subcomandos: Subcomandos organizados en grupos (ej: /config roles add, /config channels remove) +
+
+ + +
+
+ +
+ +
+ Sin opciones. Los usuarios no podrƔn pasar parƔmetros al comando. +
+ +
+
+ OpciĆ³n {{ index + 1 }} + +
+ +
+
+ + +
+ +
+ + +
+ +
+
+ + +
+ +
+ +
+
+ + +
+ + + +
+ + + +
+
+
+
+
+ + +
+
+ +
+ +
+ Sin subcomandos. Agrega al menos uno (ej: add, remove, list). +
+ +
+
+ šŸ“Œ Subcomando {{ subIndex + 1 }} + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ Sin opciones para este subcomando +
+ +
+
+ OpciĆ³n {{ optIndex + 1 }} + +
+ +
+
+ + +
+
+ + +
+
+ +
+
+ +
+ + +
+
+
+
+
+ + +
+
+ +
+ +
+ Sin grupos. Agrega grupos para organizar subcomandos. +
+ +
+
+ šŸ“‚ Grupo {{ groupIndex + 1 }} + +
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+ +
+ Sin subcomandos +
+ +
+
+ šŸ“Œ {{ subcommand.name || `Subcomando ${subIndex + 1}` }} + +
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ + + + + +
+
+
+
+
+
+
+
(null); let editor: monaco.editor.IStandaloneCodeEditor | null = null; +// Opciones para comandos slash +interface SlashOption { + name: string; + description: string; + type: 'STRING' | 'INTEGER' | 'BOOLEAN' | 'USER' | 'CHANNEL' | 'ROLE' | 'NUMBER' | 'MENTIONABLE' | 'ATTACHMENT'; + required: boolean; + choices?: { name: string; value: string | number }[]; +} + +const slashOptions = ref([]); + +// Estructura del comando slash +const slashStructure = ref<'simple' | 'subcommands' | 'groups'>('simple'); + +// Subcomandos (para estructura 'subcommands') +interface Subcommand { + name: string; + description: string; + options: SlashOption[]; +} +const subcommands = ref([]); + +// Grupos (para estructura 'groups') +interface CommandGroup { + name: string; + description: string; + subcommands: Subcommand[]; +} +const commandGroups = ref([]); + +function addOption() { + slashOptions.value.push({ + name: '', + description: '', + type: 'STRING', + required: false, + choices: [] + }); +} + +function removeOption(index: number) { + slashOptions.value.splice(index, 1); +} + +function addChoice(optionIndex: number) { + if (!slashOptions.value[optionIndex].choices) { + slashOptions.value[optionIndex].choices = []; + } + slashOptions.value[optionIndex].choices!.push({ + name: '', + value: '' + }); +} + +function removeChoice(optionIndex: number, choiceIndex: number) { + slashOptions.value[optionIndex].choices?.splice(choiceIndex, 1); +} + +// Funciones para subcomandos +function addSubcommand() { + subcommands.value.push({ + name: '', + description: '', + options: [] + }); +} + +function removeSubcommand(index: number) { + subcommands.value.splice(index, 1); +} + +function addSubcommandOption(subIndex: number) { + subcommands.value[subIndex].options.push({ + name: '', + description: '', + type: 'STRING', + required: false + }); +} + +function removeSubcommandOption(subIndex: number, optIndex: number) { + subcommands.value[subIndex].options.splice(optIndex, 1); +} + +// Funciones para grupos +function addGroup() { + commandGroups.value.push({ + name: '', + description: '', + subcommands: [] + }); +} + +function removeGroup(index: number) { + commandGroups.value.splice(index, 1); +} + +function addGroupSubcommand(groupIndex: number) { + commandGroups.value[groupIndex].subcommands.push({ + name: '', + description: '', + options: [] + }); +} + +function removeGroupSubcommand(groupIndex: number, subIndex: number) { + commandGroups.value[groupIndex].subcommands.splice(subIndex, 1); +} + +function addGroupSubcommandOption(groupIndex: number, subIndex: number) { + commandGroups.value[groupIndex].subcommands[subIndex].options.push({ + name: '', + description: '', + type: 'STRING', + required: false + }); +} + +function removeGroupSubcommandOption(groupIndex: number, subIndex: number, optIndex: number) { + commandGroups.value[groupIndex].subcommands[subIndex].options.splice(optIndex, 1); +} + const isValid = computed(() => { return commandData.value.name.trim() !== '' && commandData.value.description.trim() !== '' && @@ -169,16 +577,66 @@ watch(() => aliasesInput.value, () => { } }); +// Watch para opciones de slash +watch(() => slashOptions.value, () => { + if (editor && commandData.value.type === 'slash') { + const currentPosition = editor.getPosition(); + const newCode = getDefaultCode(); + editor.setValue(newCode); + if (currentPosition) { + editor.setPosition(currentPosition); + } + } +}, { deep: true }); + function getDefaultCode(): string { if (commandData.value.type === 'slash') { + // Generar cĆ³digo de opciones para slash commands + let optionsCode = ''; + if (slashOptions.value.length > 0) { + const optionsArray = slashOptions.value.map(opt => { + let optCode = ` {\n name: "${opt.name}",\n description: "${opt.description}",\n type: ApplicationCommandOptionType.${opt.type},\n required: ${opt.required}`; + + // Agregar choices si existen + if (opt.choices && opt.choices.length > 0) { + const choicesStr = opt.choices + .filter(c => c.name && c.value) + .map(c => ` { name: "${c.name}", value: ${typeof c.value === 'string' ? `"${c.value}"` : c.value} }`) + .join(',\n'); + if (choicesStr) { + optCode += `,\n choices: [\n${choicesStr}\n ]`; + } + } + + optCode += '\n }'; + return optCode; + }).join(',\n'); + + optionsCode = ` options: [\n${optionsArray}\n ],\n `; + } + return `import type { ChatInputCommandInteraction } from "discord.js"; +import { ApplicationCommandOptionType } from "discord.js"; import type Amayo from "../../core/client"; export default { name: "${commandData.value.name}", description: "${commandData.value.description}", type: 'slash' as const, - ${commandData.value.cooldown > 0 ? `cooldown: ${commandData.value.cooldown},\n ` : ''}async run(interaction: ChatInputCommandInteraction, client: Amayo) { + ${optionsCode}${commandData.value.cooldown > 0 ? `cooldown: ${commandData.value.cooldown},\n ` : ''}async run(interaction: ChatInputCommandInteraction, client: Amayo) { + // Obtener opciones${slashOptions.value.length > 0 ? '\n ' + slashOptions.value.map(opt => { + const varName = opt.name.replace(/-/g, '_'); + if (opt.type === 'STRING') return `const ${varName} = interaction.options.getString("${opt.name}")${opt.required ? '!' : ''};`; + if (opt.type === 'INTEGER' || opt.type === 'NUMBER') return `const ${varName} = interaction.options.getNumber("${opt.name}")${opt.required ? '!' : ''};`; + if (opt.type === 'BOOLEAN') return `const ${varName} = interaction.options.getBoolean("${opt.name}")${opt.required ? '!' : ''};`; + if (opt.type === 'USER') return `const ${varName} = interaction.options.getUser("${opt.name}")${opt.required ? '!' : ''};`; + if (opt.type === 'CHANNEL') return `const ${varName} = interaction.options.getChannel("${opt.name}")${opt.required ? '!' : ''};`; + if (opt.type === 'ROLE') return `const ${varName} = interaction.options.getRole("${opt.name}")${opt.required ? '!' : ''};`; + if (opt.type === 'MENTIONABLE') return `const ${varName} = interaction.options.getMentionable("${opt.name}")${opt.required ? '!' : ''};`; + if (opt.type === 'ATTACHMENT') return `const ${varName} = interaction.options.getAttachment("${opt.name}")${opt.required ? '!' : ''};`; + return ''; + }).join('\n ') : ''} + // Tu cĆ³digo aquĆ­ await interaction.reply({ content: "Ā”Comando ${commandData.value.name} ejecutado!", @@ -626,6 +1084,229 @@ onUnmounted(() => { color: #858585; } +.checkbox-label-inline { + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + padding: 8px 12px; + background-color: #2d2d30; + border-radius: 4px; + border: 1px solid #3e3e42; + transition: all 0.2s; + margin-top: 8px; +} + +.checkbox-label-inline:hover { + border-color: #4ec9b0; + background-color: #353538; +} + +.checkbox-label-inline input[type="checkbox"] { + width: 18px; + height: 18px; + cursor: pointer; + accent-color: #4ec9b0; +} + +.checkbox-label-inline span { + font-size: 13px; + color: #ffffff; + font-weight: 500; +} + +/* SecciĆ³n de Opciones para Slash Commands */ +.options-section { + margin: 24px 0; + padding: 20px; + background: linear-gradient(135deg, rgba(78, 201, 176, 0.05) 0%, rgba(14, 99, 156, 0.05) 100%); + border: 2px solid rgba(78, 201, 176, 0.2); + border-radius: 8px; +} + +.options-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} + +.options-header label { + font-size: 14px; + font-weight: 600; + color: #4ec9b0; + margin: 0; +} + +.add-option-btn { + padding: 8px 16px; + background: linear-gradient(135deg, #4ec9b0 0%, #5fd4bf 100%); + color: #1e1e1e; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 12px; + font-weight: 600; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 4px rgba(78, 201, 176, 0.3); +} + +.add-option-btn:hover { + background: linear-gradient(135deg, #5fd4bf 0%, #70dfc9 100%); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(78, 201, 176, 0.4); +} + +.no-options { + padding: 20px; + text-align: center; + color: #858585; + font-style: italic; + font-size: 13px; + background-color: #2d2d30; + border-radius: 6px; + border: 1px dashed #3e3e42; +} + +.option-item { + margin-bottom: 16px; + padding: 16px; + background: linear-gradient(135deg, #2d2d30 0%, #252526 100%); + border: 1px solid #3e3e42; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.option-item:hover { + border-color: #4ec9b0; + box-shadow: 0 4px 12px rgba(78, 201, 176, 0.2); +} + +.option-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; + padding-bottom: 8px; + border-bottom: 1px solid #3e3e42; +} + +.option-number { + font-size: 12px; + font-weight: 700; + color: #4ec9b0; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.remove-option-btn { + background: #ea4335; + color: #ffffff; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 14px; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s; +} + +.remove-option-btn:hover { + background: #f55a4e; + transform: scale(1.1); +} + +.option-fields { + display: flex; + flex-direction: column; + gap: 12px; +} + +/* Choices Section */ +.choices-section { + margin-top: 12px; + padding: 12px; + background: rgba(14, 99, 156, 0.1); + border: 1px solid rgba(14, 99, 156, 0.3); + border-radius: 6px; +} + +.choices-section label { + display: block; + margin-bottom: 8px; + font-size: 12px; + font-weight: 600; + color: #1177bb; +} + +.add-choice-btn { + padding: 6px 12px; + background: linear-gradient(135deg, #0e639c 0%, #1177bb 100%); + color: #ffffff; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 11px; + font-weight: 600; + margin-bottom: 8px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 4px rgba(14, 99, 156, 0.3); +} + +.add-choice-btn:hover { + background: linear-gradient(135deg, #1177bb 0%, #1a8dd4 100%); + transform: translateY(-1px); + box-shadow: 0 3px 6px rgba(14, 99, 156, 0.4); +} + +.choice-item { + display: flex; + gap: 8px; + margin-bottom: 8px; + align-items: center; +} + +.choice-input { + flex: 1; + padding: 6px 10px; + background-color: #2d2d30; + border: 1px solid #3e3e42; + color: #cccccc; + border-radius: 4px; + font-size: 12px; +} + +.choice-input:focus { + outline: none; + border-color: #1177bb; + background-color: #252526; +} + +.remove-choice-btn { + background: #858585; + color: #ffffff; + border: none; + border-radius: 3px; + cursor: pointer; + font-size: 12px; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s; + flex-shrink: 0; +} + +.remove-choice-btn:hover { + background: #ea4335; + transform: scale(1.1); +} + .editor-section { flex: 1; display: flex; @@ -710,4 +1391,384 @@ onUnmounted(() => { background: #424242; border-radius: 5px; } + +/* === ESTILOS PARA ESTRUCTURA DE COMANDOS SLASH === */ +.structure-selector { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +.structure-btn { + padding: 10px 18px; + background: linear-gradient(135deg, #2d2d30 0%, #252526 100%); + color: #cccccc; + border: 2px solid #3e3e42; + border-radius: 8px; + cursor: pointer; + font-size: 13px; + font-weight: 600; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + display: flex; + align-items: center; + gap: 6px; +} + +.structure-btn:hover { + border-color: #4ec9b0; + background: linear-gradient(135deg, #353538 0%, #2d2d30 100%); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); +} + +.structure-btn.active { + background: linear-gradient(135deg, #4ec9b0 0%, #5fd4bf 100%); + color: #1e1e1e; + border-color: #4ec9b0; + box-shadow: 0 4px 12px rgba(78, 201, 176, 0.4); + transform: translateY(-1px); +} + +.structure-info { + margin: 16px 0; + padding: 16px 20px; + background: linear-gradient(135deg, rgba(14, 99, 156, 0.15) 0%, rgba(78, 201, 176, 0.08) 100%); + border-left: 4px solid #4ec9b0; + border-radius: 8px; + font-size: 13px; + color: #e0e0e0; + line-height: 1.7; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +.structure-info strong { + color: #4ec9b0; + font-weight: 700; + font-size: 14px; +} + +.structure-info code { + background: linear-gradient(135deg, #2d2d30 0%, #252526 100%); + padding: 3px 8px; + border-radius: 4px; + font-family: 'Consolas', monospace; + font-size: 12px; + color: #1177bb; + border: 1px solid #3e3e42; + white-space: nowrap; +} + +.section-actions { + margin-bottom: 20px; + display: flex; + justify-content: flex-start; +} + +/* === SUBCOMANDOS === */ +.subcommand-item { + margin-bottom: 24px; + padding: 24px; + background: linear-gradient(135deg, #2d2d30 0%, #252526 100%); + border: 2px solid rgba(17, 119, 187, 0.4); + border-radius: 12px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.subcommand-item:hover { + border-color: rgba(17, 119, 187, 0.6); + box-shadow: 0 6px 20px rgba(17, 119, 187, 0.3); + transform: translateY(-2px); +} + +.subcommand-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + padding-bottom: 16px; + border-bottom: 2px solid rgba(17, 119, 187, 0.3); +} + +.subcommand-badge { + font-size: 14px; + font-weight: 700; + color: #1177bb; + text-transform: uppercase; + letter-spacing: 0.8px; + background: linear-gradient(135deg, rgba(17, 119, 187, 0.25) 0%, rgba(14, 99, 156, 0.15) 100%); + padding: 8px 16px; + border-radius: 8px; + box-shadow: 0 2px 6px rgba(17, 119, 187, 0.2); +} + +.subcommand-options { + margin-top: 20px; + padding: 20px; + background: rgba(30, 30, 30, 0.6); + border-radius: 10px; + border: 1px solid #3e3e42; + box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.options-header-small { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} + +.options-header-small label { + font-size: 13px; + font-weight: 600; + color: #4ec9b0; + margin: 0; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.add-sub-option-btn { + padding: 8px 16px; + background: linear-gradient(135deg, #0e639c 0%, #1177bb 100%); + color: #ffffff; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 12px; + font-weight: 600; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 6px rgba(17, 119, 187, 0.3); +} + +.add-sub-option-btn:hover { + background: linear-gradient(135deg, #1177bb 0%, #1a8dd4 100%); + transform: translateY(-2px); + box-shadow: 0 4px 10px rgba(17, 119, 187, 0.4); +} + +.no-sub-options { + padding: 20px; + text-align: center; + color: #858585; + font-style: italic; + font-size: 13px; + background: linear-gradient(135deg, #252526 0%, #1e1e1e 100%); + border-radius: 8px; + border: 2px dashed #3e3e42; +} + +.sub-option-item { + margin-bottom: 16px; + padding: 16px; + background: linear-gradient(135deg, #2d2d30 0%, #252526 100%); + border: 1px solid #3e3e42; + border-radius: 8px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.sub-option-item:hover { + border-color: #1177bb; + box-shadow: 0 4px 10px rgba(17, 119, 187, 0.2); +} + +.sub-option-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; + font-size: 12px; + font-weight: 600; + color: #1177bb; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.remove-sub-btn { + background: linear-gradient(135deg, #858585 0%, #6a6a6a 100%); + color: #ffffff; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 14px; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.remove-sub-btn:hover { + background: linear-gradient(135deg, #ea4335 0%, #f55a4e 100%); + transform: scale(1.15); + box-shadow: 0 3px 8px rgba(234, 67, 53, 0.4); +} + +.checkbox-label-inline.small { + padding: 8px 12px; + margin-top: 0; + font-size: 12px; +} + +.checkbox-label-inline.tiny { + padding: 6px 8px; + margin: 0; + min-width: auto; +} + +/* === GRUPOS === */ +.group-item { + margin-bottom: 28px; + padding: 28px; + background: linear-gradient(135deg, #2d2d30 0%, #252526 100%); + border: 2px solid rgba(255, 152, 0, 0.4); + border-radius: 12px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.group-item:hover { + border-color: rgba(255, 152, 0, 0.6); + box-shadow: 0 6px 20px rgba(255, 152, 0, 0.3); + transform: translateY(-2px); +} + +.group-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + padding-bottom: 16px; + border-bottom: 2px solid rgba(255, 152, 0, 0.3); +} + +.group-badge { + font-size: 14px; + font-weight: 700; + color: #ff9800; + text-transform: uppercase; + letter-spacing: 0.8px; + background: linear-gradient(135deg, rgba(255, 152, 0, 0.25) 0%, rgba(255, 152, 0, 0.15) 100%); + padding: 8px 16px; + border-radius: 8px; + box-shadow: 0 2px 6px rgba(255, 152, 0, 0.2); +} + +.group-subcommands { + margin-top: 20px; + padding: 20px; + background: rgba(30, 30, 30, 0.6); + border-radius: 10px; + border: 1px solid rgba(255, 152, 0, 0.2); + box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.group-subcommand-item { + margin-bottom: 16px; + padding: 16px; + background: linear-gradient(135deg, #2d2d30 0%, #252526 100%); + border: 1px solid #3e3e42; + border-radius: 8px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.group-subcommand-item:hover { + border-color: #ff9800; + box-shadow: 0 4px 10px rgba(255, 152, 0, 0.2); +} + +/* === OPCIONES ANIDADAS === */ +.nested-options { + margin-top: 16px; + padding: 16px; + background: rgba(14, 99, 156, 0.08); + border-radius: 8px; + border: 1px solid rgba(14, 99, 156, 0.3); +} + +.add-nested-btn { + padding: 6px 14px; + background: linear-gradient(135deg, #0e639c 0%, #1177bb 100%); + color: #ffffff; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 11px; + font-weight: 600; + margin-bottom: 12px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 4px rgba(14, 99, 156, 0.3); +} + +.add-nested-btn:hover { + background: linear-gradient(135deg, #1177bb 0%, #1a8dd4 100%); + transform: translateY(-1px); + box-shadow: 0 3px 6px rgba(14, 99, 156, 0.4); +} + +.nested-option-item { + display: flex; + gap: 8px; + margin-bottom: 10px; + align-items: center; + padding: 8px; + background: rgba(45, 45, 48, 0.5); + border-radius: 6px; + border: 1px solid #3e3e42; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.nested-option-item:hover { + border-color: #1177bb; + background: rgba(45, 45, 48, 0.8); +} + +.small-input { + padding: 8px 10px; + background: linear-gradient(135deg, #252526 0%, #1e1e1e 100%); + border: 1px solid #3e3e42; + color: #cccccc; + border-radius: 6px; + font-size: 12px; + min-width: 90px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.small-input:focus { + outline: none; + border-color: #1177bb; + background: #252526; + box-shadow: 0 0 0 2px rgba(17, 119, 187, 0.2); +} + +.small-input.flex-grow { + flex: 1; +} + +.remove-nested-btn { + background: linear-gradient(135deg, #858585 0%, #6a6a6a 100%); + color: #ffffff; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 12px; + width: 22px; + height: 22px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.remove-nested-btn:hover { + background: linear-gradient(135deg, #ea4335 0%, #f55a4e 100%); + transform: scale(1.1); + box-shadow: 0 3px 6px rgba(234, 67, 53, 0.4); +}