This repository has no description
1.searchContainer {
2 position: relative;
3 width: 100%;
4 max-width: 300px;
5}
6
7.searchForm {
8 display: flex;
9 align-items: center;
10 background-color: var(--input-background);
11 border: 1px solid var(--input-border);
12 overflow: hidden;
13 width: 100%;
14 transition: all 0.2s ease;
15 border-radius: 8px;
16}
17
18.searchForm:focus-within {
19 border-color: var(--primary-color);
20 box-shadow: 0 0 0 2px rgba(91, 173, 240, 0.25);
21}
22
23.searchInput {
24 flex: 1;
25 padding: 0.5rem 0.75rem;
26 font-size: 0.875rem;
27 border: none;
28 outline: none;
29 background-color: transparent;
30 color: var(--text-color);
31 margin-top: 2px;
32}
33
34.searchInput::placeholder {
35 color: var(--timestamp-color);
36}
37
38.searchButton {
39 display: flex;
40 align-items: center;
41 justify-content: center;
42 background-color: transparent;
43 border: none;
44 padding: 0.5rem;
45 color: var(--primary-color);
46 cursor: pointer;
47 transition: all 0.2s ease;
48}
49
50.searchButton:hover {
51 background-color: rgba(91, 173, 240, 0.1);
52}
53
54/* Suggestions dropdown */
55.suggestionsContainer {
56 position: absolute;
57 top: 100%;
58 left: 0;
59 right: 0;
60 margin-top: 5px;
61 background-color: var(--card-background);
62 border: 1px solid var(--tile-border);
63 border-radius: 8px;
64 box-shadow: 0 4px 12px var(--shadow-color);
65 max-height: 300px;
66 overflow-y: auto;
67 z-index: 10;
68}
69
70.suggestionsList {
71 list-style: none;
72 padding: 0;
73 margin: 0;
74}
75
76.suggestionItem {
77 padding: 0;
78 margin: 0;
79 border-bottom: 1px solid var(--tile-border);
80}
81
82.suggestionItem:last-child {
83 border-bottom: none;
84}
85
86.suggestionButton {
87 display: flex;
88 align-items: center;
89 width: 100%;
90 text-align: left;
91 padding: 0.75rem 1rem;
92 background: none;
93 border: none;
94 cursor: pointer;
95 transition: background-color 0.2s;
96 color: var(--text-color);
97 gap: 10px;
98}
99
100.suggestionButton:hover {
101 background-color: var(--button-hover);
102 /* No transform on hover */
103}
104
105.avatar {
106 width: 28px;
107 height: 28px;
108 border-radius: 50%;
109 object-fit: cover;
110 flex-shrink: 0;
111}
112
113.avatarPlaceholder {
114 width: 28px;
115 height: 28px;
116 border-radius: 50%;
117 background-color: var(--primary-color);
118 opacity: 0.3;
119 flex-shrink: 0;
120}
121
122.suggestionInfo {
123 display: flex;
124 flex-direction: column;
125 overflow: hidden;
126}
127
128.displayName {
129 font-weight: 600;
130 font-size: 0.9rem;
131 margin-bottom: 0.2rem;
132 white-space: nowrap;
133 overflow: hidden;
134 text-overflow: ellipsis;
135}
136
137.handle {
138 font-size: 0.9rem;
139 color: var(--link-color);
140 white-space: nowrap;
141 overflow: hidden;
142 text-overflow: ellipsis;
143}
144
145.noResults {
146 padding: 1rem;
147 text-align: center;
148 color: var(--timestamp-color);
149 font-style: italic;
150}
151
152.loadingContainer {
153 display: flex;
154 justify-content: center;
155 padding: 1rem;
156 gap: 0.3rem;
157}
158
159.loadingDot {
160 width: 8px;
161 height: 8px;
162 border-radius: 50%;
163 background-color: var(--primary-color);
164 animation: dotPulse 1.4s infinite ease-in-out;
165}
166
167.loadingDot:nth-child(2) {
168 animation-delay: 0.2s;
169}
170
171.loadingDot:nth-child(3) {
172 animation-delay: 0.4s;
173}
174
175@keyframes dotPulse {
176 0%, 80%, 100% {
177 transform: scale(0.8);
178 opacity: 0.5;
179 }
180 40% {
181 transform: scale(1.2);
182 opacity: 1;
183 }
184}
185
186@media (max-width: 800px) {
187 .searchContainer {
188 max-width: 250px;
189 }
190
191 .searchInput {
192 font-size: 0.85rem;
193 padding: 0.4rem 0.5rem;
194 }
195
196 .searchButton {
197 padding: 0.4rem;
198 }
199}
200
201@media (max-width: 600px) {
202 .searchContainer {
203 max-width: 200px;
204 }
205
206 .searchInput {
207 font-size: 0.8rem;
208 padding: 0.4rem 0.5rem;
209 }
210}
211
212@media (max-width: 480px) {
213 .searchContainer {
214 min-width: 140px;
215 flex: 1;
216 max-width: 100%;
217 }
218
219 .searchInput::placeholder {
220 font-size: 0.75rem;
221 }
222
223 .searchForm {
224 height: 36px;
225 }
226
227 .searchInput {
228 font-size: 0.75rem;
229 }
230}