This repository has no description
1/* src/app.css */
2@import './styles/variables.css';
3
4.App {
5 font-family: "articulat-cf", sans-serif;
6 font-weight: 500;
7 font-style: normal;
8 margin: 0;
9 padding: 20px;
10 text-align: center;
11 color: var(--text);
12 background-color: var(--background);
13 transition: color 0.3s ease, background-color 0.3s ease;
14}
15
16h1 {
17 font-family: "articulat-cf", sans-serif;
18 font-weight: 800;
19 color: var(--button-bg);
20 font-size: 2.1em;
21 margin-top: 0px;
22 margin-bottom: 8.5px;
23 transition: color 0.3s ease;
24 line-height: 1em;
25}
26
27h2 {
28 color: var(--text);
29 font-size: 1.5em;
30 margin-top: 28px;
31 margin-bottom: 10px;
32 font-weight: 800;
33 transition: color 0.3s ease;
34 line-height: 1em;
35}
36
37h3 {
38 font-size: 1.3em;
39 font-family: "articulat-cf", sans-serif;
40 font-weight: 800;
41 font-style: normal;
42 color: var(--text);
43 transition: color 0.3s ease;
44 line-height: 1em;
45}
46
47p {
48 margin-top: 1.2em;
49 margin-bottom: 1.2em;
50 font-size: 1em;
51 font-family: "articulat-cf", sans-serif;
52 font-weight: 500;
53 font-style: normal;
54 color: var(--text);
55 transition: color 0.3s ease;
56 line-height: 1.3em;
57}
58
59a {
60 color: #3b9af8;
61 font-family: "articulat-cf", sans-serif;
62}
63
64a:visited {
65 color: #004f84;
66}
67
68body {
69 margin: 0;
70 font-family: "articulat-cf", sans-serif;
71 font-weight: 500;
72 font-style: normal;
73 background-color: var(--background);
74 color: var(--text);
75 transition: background-color 0.3s ease, color 0.3s ease;
76}
77
78form {
79 background: var(--navbar-bg);
80 border: 5px solid var(--card-border);
81 border-radius: 12px;
82 box-shadow: none;
83 gap: 15px;
84 justify-content: center;
85 margin: 10px auto;
86 padding: 20px 30px;
87 display: flex;
88 flex-direction: column;
89 transition: background-color 0.3s ease, border-color 0.3s ease;
90}
91
92input {
93 border: 2px solid var(--card-border);
94 border-radius: 6px;
95 max-width: 200px;
96 padding: 9px;
97 text-align: center;
98 margin: auto;
99 align-content: center;
100 justify-content: center;
101 font-size: 1.1em;
102 background-color: var(--navbar-bg);
103 color: var(--text);
104 transition: all 0.3s ease;
105 font-family: articulat-cf;
106}
107
108@media (max-width: 450px) {
109 input {
110 max-width: 85%;
111 margin: auto;
112 }
113}
114
115input:hover {
116 border: 2px solid var(--button-bg);
117 background: var(--background);
118}
119
120input:focus {
121 border: 2px solid var(--button-bg);
122 background: var(--background);
123}
124
125button {
126 background: var(--button-bg);
127 border: none;
128 border-radius: 6px;
129 color: var(--button-text);
130 cursor: pointer;
131 margin: auto;
132 max-width: 175px;
133 padding: 10px 15px;
134 font-weight: 700;
135 font-size: 1em;
136 transition: background-color 0.3s ease;
137}
138
139button:hover {
140 background: #004F84;
141}
142
143.error {
144 color: #ff4444;
145 transition: color 0.3s ease;
146}
147
148ul {
149 display: inline-block;
150 margin: 10px 0px;
151 text-align: left;
152 color: var(--text);
153 font-family: articulat-cf;
154}
155
156ol {
157 font-family: articulat-cf;
158 margin: 10px 0;
159 opacity: 1;
160 padding-left: 40px;
161}
162
163.main-container {
164 align-content: center;
165 margin: 0 auto;
166 max-width: 1000px;
167 width: 100%;
168}
169
170.app-container {
171 background-color: var(--background);
172 transition: background-color 0.3s ease;
173}
174
175.form-input:focus {
176 background-color: var(--background);
177 outline: none;
178}
179
180.autocomplete-items {
181 background-color: var(--navbar-bg);
182 left: 0;
183 overflow: clip;
184 position: absolute;
185 right: 0;
186 top: 116%;
187 z-index: 99;
188 border: 2px solid var(--card-border);
189 border-radius: 6px;
190 gap: 3px;
191 display: flex;
192 flex-direction: column;
193 padding: 10px;
194 text-align: left;
195 transition: all 0.3s ease;
196 max-width: 200px;
197 margin: auto;
198}
199
200.autocomplete-item {
201 display: flex;
202 overflow: clip;
203 padding: 6px;
204 color: var(--text);
205 transition: all 0.3s ease;
206}
207
208.autocomplete-item:hover {
209 background-color: var(--background);
210 border-radius: 6px;
211 border: 2px solid var(--card-border);
212}
213
214.autocomplete-item img {
215 width: 20px;
216 height: 20px;
217 border-radius: 50%;
218 margin-right: 7px;
219 object-fit: cover;
220}
221
222.autocomplete-items:empty {
223 display: none;
224}
225
226.last-updated {
227 font-style: italic;
228 margin-bottom: 20px;
229 opacity: 26.5%;
230 font-size: 0.8em;
231 text-align: center;
232 color: var(--text);
233 transition: color 0.3s ease;
234}
235
236.alt-card {
237 padding: 40px 30px;
238 background: var(--navbar-bg);
239 transition: background-color 0.3s ease;
240}
241
242.alt-card h1 {
243 text-align: center;
244}
245
246.disclaimer {
247 opacity: 0.6;
248 font-size: 0.8em;
249 margin-top: 13.5px;
250}
251
252/* Dark mode overrides */
253.dark-mode .App,
254.dark-mode body,
255.dark-mode .app-container {
256 background-color: var(--background);
257 color: var(--text);
258}
259
260.dark-mode input:hover,
261.dark-mode input:focus {
262 background-color: #2d2d2d;
263 border-color: var(--button-bg);
264}
265
266.dark-mode .error {
267 color: #ff6b6b;
268}
269
270.dark-mode .autocomplete-item:hover {
271 background-color: #2d2d2d;
272}
273
274.dark-mode .last-updated {
275 opacity: 0.4;
276}