Heavily customized version of smokesignal - https://whtwnd.com/kayrozen.com/3lpwe4ymowg2t
kayrozen.com
1/**
2 * Venue Search Component Styles
3 * Enhanced venue search, location selection, and map integration
4 */
5
6/* Venue Search Container */
7.venue-search-container {
8 position: relative;
9}
10
11/* Venue Suggestions Dropdown */
12.venue-suggestions {
13 position: absolute;
14 top: 100%;
15 left: 0;
16 right: 0;
17 border: 1px solid #dbdbdb;
18 border-top: none;
19 border-radius: 0 0 4px 4px;
20 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
21 max-height: 300px;
22 overflow-y: auto;
23 z-index: 1000;
24 display: none;
25}
26
27.venue-suggestions.is-active {
28 display: block;
29}
30
31/* Individual Suggestion Items */
32.venue-suggestion-item {
33 padding: 12px 16px;
34 cursor: pointer;
35 border-bottom: 1px solid #f5f5f5;
36 transition: background-color 0.2s ease;
37}
38
39.venue-suggestion-item:hover,
40.venue-suggestion-item.is-highlighted {
41 background-color: #f5f5f5;
42}
43
44.venue-suggestion-item:last-child {
45 border-bottom: none;
46}
47
48.venue-suggestion-item .media {
49 align-items: center;
50}
51
52.venue-suggestion-item .media-content {
53 overflow: visible;
54}
55
56/* Venue Information Display */
57.venue-name {
58 font-weight: 600;
59 color: #363636;
60 margin-bottom: 4px;
61 font-size: 0.95rem;
62}
63
64.venue-address {
65 color: #757575;
66 font-size: 0.875rem;
67 margin-bottom: 4px;
68 line-height: 1.3;
69}
70
71.venue-category-icon {
72 color: #3273dc;
73 width: 24px;
74 text-align: center;
75}
76
77.venue-quality {
78 display: flex;
79 align-items: center;
80 gap: 2px;
81 margin-top: 4px;
82}
83
84.venue-quality .icon {
85 color: #ffdd57;
86}
87
88.venue-quality small {
89 margin-left: 4px;
90 color: #757575;
91}
92
93/* No Results State */
94.venue-no-results {
95 padding: 20px;
96 text-align: center;
97 color: #757575;
98}
99
100/* Selected Venue Display */
101.venue-selected {
102 border: 1px solid #dbdbdb;
103 border-radius: 6px;
104 padding: 16px;
105 background: white;
106 color: #363636;
107}
108
109.venue-info {
110 margin-bottom: 12px;
111}
112
113.venue-info-card {
114 border: 1px solid #e8e8e8;
115 border-radius: 6px;
116 padding: 12px;
117 background: #fafafa;
118}
119
120.venue-header {
121 display: flex;
122 align-items: flex-start;
123 gap: 12px;
124 margin-bottom: 8px;
125}
126
127.venue-icon {
128 flex-shrink: 0;
129 width: 40px;
130 height: 40px;
131 background: #3273dc;
132 color: white;
133 border-radius: 50%;
134 display: flex;
135 align-items: center;
136 justify-content: center;
137 font-size: 1rem;
138}
139
140.venue-details {
141 flex: 1;
142}
143
144.venue-details .venue-name {
145 font-weight: 600;
146 margin-bottom: 4px;
147 color: #363636;
148}
149
150.venue-details .venue-address {
151 color: #757575;
152 font-size: 0.875rem;
153 margin-bottom: 6px;
154}
155
156/* Location Details in Selected State */
157.location-details {
158 margin-top: 8px;
159}
160
161.location-details .subtitle {
162 margin-bottom: 4px;
163}
164
165/* Mini Map Styles */
166.venue-map-preview,
167.venue-mini-map {
168 height: 120px;
169 border-radius: 6px;
170 overflow: hidden;
171 border: 1px solid #dbdbdb;
172 margin-top: 8px;
173 position: relative;
174 cursor: pointer;
175}
176
177.venue-mini-map {
178 transition: box-shadow 0.2s ease;
179}
180
181.venue-mini-map:hover {
182 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
183}
184
185/* Map Loading and Error States */
186.map-loading {
187 display: flex;
188 align-items: center;
189 justify-content: center;
190 height: 100%;
191 background: #f5f5f5;
192 color: #757575;
193 flex-direction: column;
194 gap: 8px;
195}
196
197.map-error {
198 display: flex;
199 align-items: center;
200 justify-content: center;
201 height: 100%;
202 background: #f5f5f5;
203 color: #757575;
204 flex-direction: column;
205 gap: 4px;
206}
207
208/* Map Picker Modal */
209.map-picker-modal .modal-content {
210 width: 90vw;
211 height: 70vh;
212 max-width: 800px;
213 max-height: 600px;
214}
215
216.map-picker-container {
217 height: 100%;
218 display: flex;
219 flex-direction: column;
220}
221
222.map-picker-map {
223 flex: 1;
224 min-height: 400px;
225}
226
227.map-picker-controls {
228 padding: 16px;
229 border-top: 1px solid #dbdbdb;
230 background: white;
231}
232
233.map-picker-address {
234 margin-bottom: 12px;
235 padding: 8px 12px;
236 background: #f5f5f5;
237 border-radius: 4px;
238 font-size: 0.875rem;
239 color: #363636;
240}
241
242/* Event Location Enhanced Display */
243.event-location-enhanced {
244 margin: 16px 0;
245}
246
247.event-location-basic {
248 display: flex;
249 align-items: center;
250 gap: 8px;
251 color: #757575;
252 font-size: 0.875rem;
253}
254
255/* Geolocation Button States */
256#geolocation-button {
257 transition: all 0.2s ease;
258}
259
260#geolocation-button:hover {
261 background-color: #3273dc;
262 color: white;
263}
264
265#geolocation-button.is-loading {
266 pointer-events: none;
267}
268
269#geolocation-button.is-loading .fas {
270 animation: spin 1s linear infinite;
271}
272
273@keyframes spin {
274 from { transform: rotate(0deg); }
275 to { transform: rotate(360deg); }
276}
277
278/* Map Picker Button */
279.map-picker-button {
280 transition: all 0.2s ease;
281}
282
283.map-picker-button:hover {
284 background-color: #3273dc;
285 color: white;
286}
287
288/* Venue Reset State */
289.venue-reset .input {
290 background-color: #f5f5f5;
291 border-color: #dbdbdb;
292 color: #757575;
293}
294
295/* Enhanced accessibility */
296.venue-suggestion-item[aria-selected="true"] {
297 background-color: #3273dc;
298 color: white;
299}
300
301.venue-suggestion-item[aria-selected="true"] .venue-name,
302.venue-suggestion-item[aria-selected="true"] .venue-address {
303 color: white;
304}
305
306/* Focus states */
307.venue-suggestions:focus-within {
308 outline: 2px solid #3273dc;
309 outline-offset: -2px;
310}
311
312.venue-suggestion-item:focus {
313 outline: 2px solid #3273dc;
314 outline-offset: -2px;
315 background-color: #e8f4fd;
316}
317
318/* Responsive Design */
319@media screen and (max-width: 768px) {
320 .venue-suggestions {
321 max-height: 250px;
322 left: -8px;
323 right: -8px;
324 }
325
326 .venue-header {
327 flex-direction: column;
328 gap: 8px;
329 }
330
331 .venue-icon {
332 align-self: flex-start;
333 }
334
335 .venue-suggestion-item {
336 padding: 10px 12px;
337 }
338
339 .venue-suggestion-item .media {
340 flex-direction: column;
341 align-items: flex-start;
342 gap: 8px;
343 }
344
345 .venue-suggestion-item .media-left {
346 margin-right: 0;
347 }
348
349 .map-picker-modal .modal-content {
350 width: 95vw;
351 height: 80vh;
352 margin: 10px;
353 }
354
355 .venue-map-preview,
356 .venue-mini-map {
357 height: 100px;
358 }
359}
360
361@media screen and (max-width: 480px) {
362 .venue-suggestions {
363 border-radius: 0;
364 left: -16px;
365 right: -16px;
366 }
367
368 .venue-suggestion-item {
369 padding: 8px 12px;
370 }
371
372 .venue-name {
373 font-size: 0.9rem;
374 }
375
376 .venue-address {
377 font-size: 0.8rem;
378 }
379
380 .map-picker-controls {
381 padding: 12px;
382 }
383}
384
385/* Dark mode support (if implemented) */
386@media (prefers-color-scheme: dark) {
387 .venue-suggestions {
388 background: #2b2b2b;
389 border-color: #4a4a4a;
390 color: #e0e0e0;
391 }
392
393 .venue-suggestion-item {
394 border-bottom-color: #3a3a3a;
395 }
396
397 .venue-suggestion-item:hover,
398 .venue-suggestion-item.is-highlighted {
399 background-color: #3a3a3a;
400 }
401
402 .venue-selected {
403 background: #2b2b2b;
404 border-color: #4a4a4a;
405 color: #e0e0e0;
406 }
407
408 .venue-info-card {
409 background: #3a3a3a;
410 border-color: #4a4a4a;
411 }
412
413 .venue-name {
414 color: #e0e0e0;
415 }
416
417 .map-loading,
418 .map-error {
419 background: #3a3a3a;
420 color: #b0b0b0;
421 }
422}