InputField.css
1 .input-field-container { 2 position: relative; 3 width: 100%; 4 background: #1a1a1a; 5 border-top: 2px solid #333; 6 } 7 8 .input-field { 9 display: flex; 10 align-items: center; 11 gap: 0.75rem; 12 padding: 1rem; 13 background: #1a1a1a; 14 } 15 16 .input-flame { 17 font-size: 1.5rem; 18 animation: flameFlicker 0.5s ease-in-out infinite; 19 } 20 21 @keyframes flameFlicker { 22 0%, 100% { 23 opacity: 1; 24 transform: scale(1); 25 } 26 50% { 27 opacity: 0.8; 28 transform: scale(1.1); 29 } 30 } 31 32 .input-textarea { 33 flex: 1; 34 background: #0f0f0f; 35 border: 1px solid #ff6b35; 36 border-radius: 8px; 37 padding: 0.75rem; 38 color: #f1f5f9; 39 font-size: 1rem; 40 font-family: inherit; 41 resize: none; 42 outline: none; 43 transition: border-color 0.2s; 44 min-height: 40px; 45 max-height: 120px; 46 } 47 48 .input-textarea:focus { 49 border-color: #ff4500; 50 box-shadow: 0 0 10px rgba(255, 107, 53, 0.3); 51 } 52 53 .input-textarea:disabled { 54 opacity: 0.6; 55 cursor: not-allowed; 56 } 57 58 .input-textarea::placeholder { 59 color: #64748b; 60 } 61 62 .flame-row { 63 text-align: center; 64 padding: 0.5rem; 65 font-size: 1.2rem; 66 background: linear-gradient( 67 to bottom, 68 #1a1a1a 0%, 69 transparent 100% 70 ); 71 } 72 73 .autocomplete-dropdown { 74 position: absolute; 75 bottom: 100%; 76 left: 1rem; 77 right: 1rem; 78 margin-bottom: 0.5rem; 79 background: #0f0f0f; 80 border: 2px solid #4A90E2; 81 border-radius: 8px; 82 overflow: hidden; 83 box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5); 84 z-index: 1000; 85 } 86 87 .autocomplete-item { 88 display: flex; 89 align-items: center; 90 gap: 0.75rem; 91 padding: 0.75rem 1rem; 92 cursor: pointer; 93 transition: background 0.2s; 94 border-bottom: 1px solid #2a2a2a; 95 } 96 97 .autocomplete-item:last-child { 98 border-bottom: none; 99 } 100 101 .autocomplete-item:hover { 102 background: #1a1a1a; 103 } 104 105 .autocomplete-icon { 106 font-size: 1.2rem; 107 } 108 109 .autocomplete-name { 110 flex: 1; 111 color: #f1f5f9; 112 font-weight: 500; 113 } 114 115 .autocomplete-level { 116 font-size: 0.75rem; 117 font-weight: bold; 118 }