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