This repository has no description
1.searchContainer {
2 position: relative;
3 width: 300px;
4}
5
6.searchForm {
7 display: flex;
8 align-items: center;
9 background-color: var(--input-background);
10 border: 1px solid var(--input-border);
11 border-radius: 24px;
12 overflow: hidden;
13 width: 100%;
14 transition: all 0.2s ease;
15}
16
17.searchForm:focus-within {
18 border-color: var(--primary-color);
19 box-shadow: 0 0 0 2px rgba(91, 173, 240, 0.25);
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}
31
32.searchInput::placeholder {
33 color: var(--timestamp-color);
34}
35
36.searchButton {
37 display: flex;
38 align-items: center;
39 justify-content: center;
40 background-color: transparent;
41 border: none;
42 padding: 0.5rem;
43 color: var(--primary-color);
44 cursor: pointer;
45 transition: all 0.2s ease;
46}
47
48.searchButton:hover {
49 background-color: rgba(91, 173, 240, 0.1);
50}
51
52/* Suggestions dropdown */
53.suggestionsContainer {
54 position: absolute;
55 top: 100%;
56 left: 0;
57 right: 0;
58 margin-top: 5px;
59 background-color: var(--card-background);
60 border: 1px solid var(--tile-border);
61 border-radius: 8px;
62 box-shadow: 0 4px 12px var(--shadow-color);
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}
96
97.suggestionButton:hover {
98 background-color: var(--button-hover);
99}
100
101.suggestionInfo {
102 display: flex;
103 flex-direction: column;
104}
105
106.displayName {
107 font-weight: 600;
108 font-size: 0.9rem;
109 margin-bottom: 0.2rem;
110}
111
112.handle {
113 font-size: 0.8rem;
114 color: var(--timestamp-color);
115}
116
117.noResults {
118 padding: 1rem;
119 text-align: center;
120 color: var(--timestamp-color);
121 font-style: italic;
122}
123
124.loadingContainer {
125 display: flex;
126 justify-content: center;
127 padding: 1rem;
128 gap: 0.3rem;
129}
130
131.loadingDot {
132 width: 8px;
133 height: 8px;
134 border-radius: 50%;
135 background-color: var(--primary-color);
136 animation: dotPulse 1.4s infinite ease-in-out;
137}
138
139.loadingDot:nth-child(2) {
140 animation-delay: 0.2s;
141}
142
143.loadingDot:nth-child(3) {
144 animation-delay: 0.4s;
145}
146
147@keyframes dotPulse {
148 0%, 80%, 100% {
149 transform: scale(0.8);
150 opacity: 0.5;
151 }
152 40% {
153 transform: scale(1.2);
154 opacity: 1;
155 }
156}
157
158@media (max-width: 600px) {
159 .searchContainer {
160 width: 180px;
161 }
162
163 .searchInput {
164 font-size: 0.8rem;
165 padding: 0.4rem 0.5rem;
166 }
167}
168
169@media (max-width: 450px) {
170 .searchContainer {
171 width: 140px;
172 }
173
174 .searchInput::placeholder {
175 font-size: 0.75rem;
176 }
177}