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}
106
107@media (max-width: 450px) {
108 input {
109 max-width: 85%;
110 margin: auto;
111 }
112}
113
114input:hover {
115 border: 2px solid var(--button-bg);
116 background: var(--background);
117}
118
119input:focus {
120 border: 2px solid var(--button-bg);
121 background: var(--background);
122}
123
124button {
125 background: var(--button-bg);
126 border: none;
127 border-radius: 6px;
128 color: var(--button-text);
129 cursor: pointer;
130 margin: auto;
131 max-width: 175px;
132 padding: 10px 15px;
133 font-weight: 700;
134 font-size: 1em;
135 transition: background-color 0.3s ease;
136}
137
138button:hover {
139 background: #004F84;
140}
141
142.error {
143 color: #ff4444;
144 transition: color 0.3s ease;
145}
146
147ul {
148 display: inline-block;
149 margin: 10px 0px;
150 text-align: left;
151 color: var(--text);
152 font-family: articulat-cf;
153}
154
155ol {
156 font-family: articulat-cf;
157 margin: 10px 0;
158 opacity: 1;
159 padding-left: 40px;
160}
161
162.main-container {
163 align-content: center;
164 margin: 0 auto;
165 max-width: 1000px;
166 width: 100%;
167}
168
169.app-container {
170 background-color: var(--background);
171 transition: background-color 0.3s ease;
172}
173
174.form-input:focus {
175 background-color: var(--background);
176 outline: none;
177}
178
179.autocomplete-items {
180 background-color: var(--navbar-bg);
181 left: 0;
182 overflow: clip;
183 position: absolute;
184 right: 0;
185 top: 116%;
186 z-index: 99;
187 border: 2px solid var(--card-border);
188 border-radius: 6px;
189 gap: 3px;
190 display: flex;
191 flex-direction: column;
192 padding: 10px;
193 text-align: left;
194 transition: all 0.3s ease;
195 max-width: 200px;
196 margin: auto;
197}
198
199.autocomplete-item {
200 display: flex;
201 overflow: clip;
202 padding: 6px;
203 color: var(--text);
204 transition: all 0.3s ease;
205}
206
207.autocomplete-item:hover {
208 background-color: var(--background);
209 border-radius: 6px;
210 border: 2px solid var(--card-border);
211}
212
213.autocomplete-item img {
214 width: 20px;
215 height: 20px;
216 border-radius: 50%;
217 margin-right: 7px;
218 object-fit: cover;
219}
220
221.autocomplete-items:empty {
222 display: none;
223}
224
225.last-updated {
226 font-style: italic;
227 margin-bottom: 20px;
228 opacity: 26.5%;
229 font-size: 0.8em;
230 text-align: center;
231 color: var(--text);
232 transition: color 0.3s ease;
233}
234
235.alt-card {
236 padding: 40px 30px;
237 background: var(--navbar-bg);
238 transition: background-color 0.3s ease;
239}
240
241.alt-card h1 {
242 text-align: center;
243}
244
245.disclaimer {
246 opacity: 0.6;
247 font-size: 0.8em;
248 margin-top: 13.5px;
249}
250
251/* Dark mode overrides */
252.dark-mode .App,
253.dark-mode body,
254.dark-mode .app-container {
255 background-color: var(--background);
256 color: var(--text);
257}
258
259.dark-mode input:hover,
260.dark-mode input:focus {
261 background-color: #2d2d2d;
262 border-color: var(--button-bg);
263}
264
265.dark-mode .error {
266 color: #ff6b6b;
267}
268
269.dark-mode .autocomplete-item:hover {
270 background-color: #2d2d2d;
271}
272
273.dark-mode .last-updated {
274 opacity: 0.4;
275}