jnz.ski
1/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); */
2
3.search-engine-selector-box {
4 margin: 1rem auto;
5 max-width: 600px;
6 width: 100%;
7 box-shadow: 0 4px 6px var(--theme-toggle-box-shadow);
8 border-radius: 8px;
9 padding: 1rem;
10 color: var(--text-color);
11 background-color: var(--input-bg);
12}
13/* Font fallback that closely matches Inter metrics */
14@font-face {
15 font-family: "Inter Fallback";
16 size-adjust: 107%;
17 ascent-override: 90%;
18 src: local("Arial");
19}
20
21:root {
22 font-family:
23 Inter,
24 "Inter Fallback",
25 system-ui,
26 -apple-system,
27 BlinkMacSystemFont,
28 "Segoe UI",
29 Roboto,
30 Oxygen,
31 Ubuntu,
32 Cantarell,
33 "Open Sans",
34 "Helvetica Neue",
35 sans-serif;
36 font-synthesis: none;
37 text-rendering: optimizeLegibility;
38 -webkit-font-smoothing: antialiased;
39 -moz-osx-font-smoothing: grayscale;
40
41 /* Theme independent colors */
42 --copy-success-bg: #28a745;
43
44 /* Light mode colors */
45 --bg-color: #ffffff;
46 --text-color: #1a1a1a;
47 --link-color: #444444;
48 --link-hover-color: #888888;
49 --input-bg: #f5f5f5;
50 --input-border: #ddd;
51 --button-hover-bg: #f0f0f0;
52 --button-active-bg: #e5e5e5;
53 --footer-text-color: #666;
54 --footer-link-hover: #333;
55 --success-bg: #d4edda;
56 --success-text: #28a745;
57 --engine-list-bg: #f0f0f0;
58 --engine-list-bang-text: #888;
59 --engine-list-scrollbar: #888;
60 --engine-list-scrollbar-hover: #555;
61 --theme-toggle-box-shadow: #0000001c;
62}
63
64[data-theme="dark"] {
65 /* Dark mode colors */
66 --bg-color: #121212;
67 --text-color: #ffffff;
68 --link-color: #90caf9;
69 --link-hover-color: #bbdefb;
70 --input-bg: #1e1e1e;
71 --input-border: #333333;
72 --button-hover-bg: #333333;
73 --button-active-bg: #424242;
74 --footer-text-color: #bbbbbb;
75 --footer-link-hover: #ffffff;
76 --success-bg: #1e4620;
77 --success-text: #a5d6a7;
78 --engine-list-bg: #333333; /* Darker hover color for dark mode */
79 --engine-list-bang-text: #bbb;
80 --engine-list-scrollbar: #555;
81 --engine-list-scrollbar-hover: #777;
82 --theme-toggle-box-shadow: #00000044;
83}
84
85* {
86 margin: 0;
87 padding: 0;
88 box-sizing: border-box;
89}
90
91html,
92body {
93 height: 100%;
94 width: 100%;
95}
96
97html {
98 background-color: var(--bg-color);
99 color: var(--text-color);
100 transition: background-color 0.3s ease, color 0.3s ease;
101}
102
103body {
104 line-height: 1.5;
105 font-weight: 400;
106 font-size: 16px;
107 color: var(--text-color);
108 background-color: var(--bg-color);
109 min-height: 100vh;
110 transition: background-color 0.3s ease, color 0.3s ease;
111}
112
113h1,
114h2,
115h3,
116h4,
117h5,
118h6 {
119 font-weight: 600;
120 line-height: 1.2;
121}
122
123a {
124 color: var(--link-color);
125 transition: color 0.3s ease;
126}
127a:hover {
128 color: var(--link-hover-color);
129}
130
131button {
132 font: inherit;
133 border: none;
134 background: none;
135 cursor: pointer;
136}
137
138input,
139textarea {
140 font: inherit;
141}
142
143.url-container {
144 display: flex;
145 align-items: center;
146 gap: 8px;
147 margin-top: 16px;
148 width: 100%;
149 max-width: 600px;
150 margin-bottom: 1rem;
151}
152
153.search-bar-container {
154 width: 100%;
155 max-width: 600px; /* Match the URL input width */
156 margin: 1rem auto; /* Add spacing above and below */
157 padding: 0.5rem;
158 background-color: var(--input-bg); /* Add background color */
159 border: 1px solid var(--input-border); /* Add border */
160 border-radius: 0.5rem; /* Match input border radius */
161 display: flex; /* Use flexbox */
162 align-items: center; /* Vertically align items */
163}
164
165.search-input {
166 width: 100%;
167 padding: 0.5rem 0.5rem;
168 font-size: 1rem;
169 border: 1px solid var(--color-border);
170 border-radius: 0.5rem;
171 background-color: var(--color-background-input);
172 color: var(--color-text);
173 transition: border-color 0.2s ease-in-out;
174}
175
176.search-input:focus {
177 border-color: var(--color-accent);
178 outline: none;
179}
180
181.content-container {
182 max-width: 36rem;
183 text-align: center;
184 padding: 0 8px;
185}
186
187.url-input {
188 padding: 8px 12px;
189 border: 1px solid var(--input-border);
190 border-radius: 4px;
191 width: 100%;
192 background: var(--input-bg);
193 color: var(--text-color);
194 transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
195}
196
197.copy-button {
198 padding: 8px;
199 color: var(--text-color);
200 border-radius: 4px;
201 transition: all 0.2s;
202 display: flex;
203 align-items: center;
204 justify-content: center;
205}
206
207.copy-button:hover {
208 background-color: var(--button-hover-bg);
209}
210
211.copy-button:active {
212 background-color: var(--button-active-bg);
213}
214
215.copy-button img {
216 width: 20px;
217 height: 20px;
218 -webkit-filter: invert(0%);
219 filter: invert(0%);
220}
221
222[data-theme="dark"] .copy-button img {
223 -webkit-filter: invert(90%);
224 filter: invert(90%);
225}
226
227.copy-button.copied {
228 background: var(--copy-success-bg);
229}
230
231.copy-button.copied img {
232 -webkit-filter: invert(100%);
233 filter: invert(100%);
234}
235
236/* Add Engine Selector Styles */
237.dropdown-container {
238 display: flex;
239 flex-direction: row;
240 gap: 10px;
241 margin-bottom: 10px;
242}
243
244.engine-text{
245 align-content: center;
246}
247
248.toggle-button{
249 color: var(--text-color);
250 padding: 1rem;
251 color: var(--text-color);
252 border-radius: 4px;
253 background: var(--input-bg)
254}
255
256.toggle-button:active{
257 background-color: var(--button-active-bg);
258}
259
260.toggle-button:hover{
261 background-color: var(--button-hover-bg);
262}
263
264.engine-selector {
265 padding: 8px 12px;
266 border: 1px solid var(--input-border);
267 border-radius: 4px;
268 background: var(--input-bg);
269 color: var(--text-color);
270 font-size: 16px;
271 min-width: 250px;
272 height: 40px; /* Match the height of the theme toggle */
273 transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
274}
275
276.submit-button {
277 padding: 8px 16px;
278 color: var(--text-color); /* Use theme-aware text color */
279 border: none;
280 border-radius: 4px;
281 cursor: pointer;
282 font-size: 16px;
283 transition: background-color 0.3s ease, color 0.3s ease;
284}
285
286.submit-button:hover {
287 background-color: var(--button-hover-bg); /* Use theme-aware hover background */
288 color: var(--text-color); /* Ensure text color remains theme-aware */
289}
290
291.saved-message {
292 margin-top: 8px; /* Adjust spacing to place it below the engine selector */
293 padding: 8px 8px;
294 background-color: var(--success-bg); /* Use theme-aware background color */
295 color: var(--success-text); /* Use theme-aware text color */
296 border-radius: 4px;
297 position: static;
298 transform: none; /* Remove centering transform */
299 animation: fadeOut 2s forwards;
300 animation-delay: 1s;
301}
302
303@keyframes fadeOut {
304 from { opacity: 1; }
305 to { opacity: 0; }
306}
307
308/* Center positioning for the engine selector */
309.center-container {
310 position: static; /* Remove absolute positioning */
311 display: flex;
312 flex-direction: column; /* Stack elements vertically */
313 align-items: center; /* Center align horizontally */
314 margin-top: 16px; /* Add spacing below the "search bar" */
315 gap: 8px; /* Add spacing between elements */
316}
317
318/* Add footer styles */
319.footer {
320 position: fixed;
321 bottom: 16px;
322 left: 0;
323 right: 0;
324 text-align: center;
325 font-size: 14px;
326 color: var(--footer-text-color);
327}
328
329.footer a {
330 color: var(--footer-text-color);
331 text-decoration: none;
332 font-weight: 500;
333 transition: color 0.3s ease;
334}
335
336.footer a:hover {
337 color: var(--footer-link-hover);
338}
339
340/* Dark mode toggle styles */
341.theme-toggle {
342 position: fixed;
343 top: 16px;
344 right: 16px;
345 display: flex;
346 align-items: center;
347 justify-content: center;
348 width: 40px;
349 height: 40px;
350 border-radius: 50%;
351 background-color: var(--bg-color);
352 box-shadow: 0 2px 5px var(--theme-toggle-box-shadow);
353 cursor: pointer;
354 transition: background-color 0.3s ease, box-shadow 0.3s ease;
355 z-index: 100;
356}
357
358.theme-toggle:hover {
359 background-color: var(--button-hover-bg);
360}
361
362.theme-toggle img {
363 width: 24px;
364 height: 24px;
365}
366
367/* Add search container styles */
368.search-container {
369 display: flex;
370 flex-direction: column;
371 align-items: center;
372}
373
374#engine-search {
375 padding: 8px 12px;
376 border: 1px solid var(--input-border);
377 border-radius: 4px;
378 width: 300px;
379 background: var(--input-bg);
380 color: var(--text-color);
381 transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
382}
383
384#current-engine {
385 margin-top: 5px;
386 font-size: 0.9em;
387 color: var(--footer-text-color);
388}
389
390#engine-list {
391 list-style: none;
392 padding: 0;
393 margin-top: 5px;
394 width: 300px; /* Increased width */
395 max-height: 150px;
396 overflow-y: auto;
397 border: 1px solid var(--input-border); /* Use theme-aware border color */
398 word-break: break-word; /* Break long words */
399 overflow-x: hidden; /* Hide horizontal overflow */
400 transition: max-height 0.3s ease;
401}
402
403#engine-list.collapsed {
404 max-height: 0;
405 overflow-y: hidden;
406 padding: 0;
407 border: none;
408}
409
410/* Style the scrollbar */
411#engine-list::-webkit-scrollbar {
412 width: 8px;
413}
414
415/* Track */
416#engine-list::-webkit-scrollbar-track {
417 background: var(--bg-color); /* Use theme-aware background color */
418}
419
420/* Handle */
421#engine-list::-webkit-scrollbar-thumb {
422 background: var(--engine-list-scrollbar);
423 border-radius: 4px;
424}
425
426/* Handle on hover */
427#engine-list::-webkit-scrollbar-thumb:hover {
428 background: var(--engine-list-scrollbar-hover);
429}
430
431#engine-list li {
432 padding: 5px 10px;
433 cursor: pointer;
434}
435
436#engine-list li:hover {
437 background-color: var(--engine-list-bg);
438}
439
440#collapse-button {
441 background: none;
442 border: none;
443 cursor: pointer;
444 color: var(--text-color);
445 font-size: 0.8em;
446 margin-top: 5px;
447}
448
449.bang-text {
450 color: var(--engine-list-bang-text);
451 font-size: 0.8em;
452}
453
454.search-button {
455 background: none;
456 border: none;
457 cursor: pointer;
458 padding: 0.5rem; /* Adjust padding as needed */
459 margin-left: auto; /* Push button to the right edge */
460}
461
462.search-button img {
463 width: 16px; /* Adjust as needed */
464 height: 16px; /* Adjust as needed */
465 -webkit-filter: invert(0%); /* Default: no inversion */
466 filter: invert(0%);
467}
468
469[data-theme="dark"] .search-button img {
470 -webkit-filter: invert(90%); /* Invert in dark mode */
471 filter: invert(90%);
472}