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