|
25 | 25 | align-items: center; |
26 | 26 | justify-content: center; |
27 | 27 | text-align: center; |
| 28 | + gap: 20px; |
28 | 29 | } |
29 | 30 |
|
30 | 31 | .python-logo { |
@@ -61,6 +62,37 @@ body { |
61 | 62 | font-weight: 300; |
62 | 63 | } |
63 | 64 |
|
| 65 | +.header-search { |
| 66 | + width: 100%; |
| 67 | + max-width: 500px; |
| 68 | +} |
| 69 | + |
| 70 | +.header-search #search-input { |
| 71 | + width: 100%; |
| 72 | + padding: 12px 20px; |
| 73 | + border: 2px solid rgba(255, 255, 255, 0.2); |
| 74 | + border-radius: 25px; |
| 75 | + font-size: 16px; |
| 76 | + font-family: inherit; |
| 77 | + background: rgba(255, 255, 255, 0.95); |
| 78 | + color: #2e3338; |
| 79 | + transition: all 0.3s ease; |
| 80 | + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
| 81 | + backdrop-filter: blur(10px); |
| 82 | +} |
| 83 | + |
| 84 | +.header-search #search-input:focus { |
| 85 | + outline: none; |
| 86 | + border-color: rgba(255, 255, 255, 0.8); |
| 87 | + background: rgba(255, 255, 255, 1); |
| 88 | + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); |
| 89 | + transform: translateY(-2px); |
| 90 | +} |
| 91 | + |
| 92 | +.header-search #search-input::placeholder { |
| 93 | + color: #6c757d; |
| 94 | +} |
| 95 | + |
64 | 96 | .stats-section { |
65 | 97 | background: #ffffff; |
66 | 98 | padding: 24px 0; |
@@ -164,32 +196,6 @@ body { |
164 | 196 | text-align: center; |
165 | 197 | } |
166 | 198 |
|
167 | | -.search-container { |
168 | | - max-width: 1200px; |
169 | | - margin: 16px auto 0 auto; |
170 | | - padding: 0 24px; |
171 | | - text-align: center; |
172 | | -} |
173 | | - |
174 | | -#search-input { |
175 | | - padding: 12px 20px; |
176 | | - border: 2px solid #e9ecef; |
177 | | - border-radius: 6px; |
178 | | - font-size: 14px; |
179 | | - font-family: inherit; |
180 | | - background: white; |
181 | | - transition: all 0.2s ease; |
182 | | - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); |
183 | | - display: inline-block; |
184 | | - width: auto; |
185 | | - min-width: 300px; |
186 | | -} |
187 | | - |
188 | | -#search-input:focus { |
189 | | - outline: none; |
190 | | - border-color: #3776ab; |
191 | | - box-shadow: 0 4px 12px rgba(55, 118, 171, 0.2); |
192 | | -} |
193 | 199 |
|
194 | 200 | .controls button { |
195 | 201 | background: #3776ab; |
|
0 commit comments