|
21 | 21 | } |
22 | 22 | .container { |
23 | 23 | text-align: center; |
24 | | - max-width: 240px; |
| 24 | + max-width: 560px; |
25 | 25 | width: 90%; |
26 | 26 | z-index: 10; |
27 | 27 | } |
|
34 | 34 | } |
35 | 35 | .search-pill { |
36 | 36 | width: 100%; |
37 | | - height: 38px; |
| 37 | + height: 48px; |
38 | 38 | background: #0a0a0a; |
39 | | - border: 1px solid rgba(255, 255, 255, 0.05); |
40 | | - border-radius: 40px; |
| 39 | + border: 1px solid rgba(255, 255, 255, 0.1); |
| 40 | + border-radius: 24px; |
41 | 41 | color: #fff; |
42 | | - font-size: 13px; |
| 42 | + font-size: 15px; |
43 | 43 | outline: none; |
44 | | - transition: all 0.3s; |
45 | | - text-align: center; |
46 | | - box-shadow: 0 4px 20px rgba(0,0,0,0.8); |
| 44 | + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
| 45 | + padding: 0 24px; |
| 46 | + text-align: left; |
| 47 | + box-shadow: 0 4px 30px rgba(0,0,0,0.5); |
47 | 48 | } |
48 | 49 | .search-pill::placeholder { |
49 | | - color: #444; |
| 50 | + color: #555; |
50 | 51 | } |
51 | | - .search-pill:focus { |
52 | | - background: #000; |
53 | | - border-color: rgba(255, 255, 255, 0.1); |
54 | | - transform: scale(1.02); |
| 52 | + .search-pill:focus, .search-pill:hover { |
| 53 | + background: #111; |
| 54 | + border-color: rgba(255, 255, 255, 0.15); |
| 55 | + box-shadow: 0 8px 40px rgba(0,0,0,0.8); |
55 | 56 | } |
56 | 57 | .appearance-btn { |
57 | 58 | position: fixed; |
|
70 | 71 | <body> |
71 | 72 | <div class="container"> |
72 | 73 | <div class="clock" id="clock">00:00</div> |
73 | | - <input type="text" class="search-pill" id="search" placeholder="Search Vision" autocomplete="off" spellcheck="false"> |
| 74 | + <input type="text" class="search-pill" id="search" placeholder="Search with Vision or type a URL" autocomplete="off" spellcheck="false"> |
74 | 75 | </div> |
75 | 76 |
|
76 | 77 | <input type="file" id="bg-upload" style="display:none" accept="image/*"> |
|
0 commit comments