A fast, local-first "redirection engine" for !bang users with a few extra features ^-^
dunkirk.sh
1:root {
2 font-family:
3 system-ui,
4 -apple-system,
5 BlinkMacSystemFont,
6 "Segoe UI",
7 Roboto,
8 Oxygen,
9 Ubuntu,
10 Cantarell,
11 "Helvetica Neue",
12 sans-serif;
13 font-synthesis: none;
14 text-rendering: optimizeLegibility;
15 -webkit-font-smoothing: antialiased;
16 -moz-osx-font-smoothing: grayscale;
17
18 /* Light mode colors */
19 --text-color: #1a1a1a;
20 --text-color-secondary: #666;
21 --text-color-hover: #333;
22 --bg-color: #fff;
23 --bg-color-secondary: #f5f5f5;
24 --bg-color-hover: #f0f0f0;
25 --bg-color-active: #e5e5e5;
26 --bg-color-danger: #e9808a;
27 --border-color: #ddd;
28}
29
30@media (prefers-color-scheme: dark) {
31 :root {
32 --text-color: #e0e0e0;
33 --text-color-secondary: #999;
34 --text-color-hover: #fff;
35 --bg-color: #121212;
36 --bg-color-secondary: #1e1e1e;
37 --bg-color-hover: #2a2a2a;
38 --bg-color-active: #333;
39 --bg-color-danger: #f15f6d;
40 --border-color: #444;
41 }
42}
43
44* {
45 margin: 0;
46 padding: 0;
47 box-sizing: border-box;
48 outline: none;
49}
50*:focus {
51 outline: 2px solid var(--text-color-secondary);
52}
53
54html,
55body {
56 height: 100%;
57 width: 100%;
58}
59
60body {
61 line-height: 1.5;
62 font-weight: 400;
63 font-size: 16px;
64 color: var(--text-color);
65 background-color: var(--bg-color);
66}
67
68h1,
69h2,
70h3,
71h4,
72h5,
73h6 {
74 font-weight: 600;
75 line-height: 1.2;
76 padding-bottom: 0.75rem;
77}
78
79a {
80 color: var(--text-color-secondary);
81}
82a:hover {
83 color: var(--text-color-hover);
84}
85footer a {
86 color: var(--text-color) !important;
87}
88footer a:hover {
89 color: var(--text-color-hover) !important;
90}
91
92button {
93 font: inherit;
94 border: none;
95 background: none;
96 cursor: pointer;
97}
98
99input,
100textarea {
101 font: inherit;
102}
103
104/* Add these new styles */
105.url-container {
106 display: flex;
107 align-items: center;
108 gap: 8px;
109 margin-top: 16px;
110}
111
112.content-container {
113 max-width: 37rem;
114 text-align: center;
115 padding: 0 8px;
116 text-wrap: pretty;
117}
118
119input {
120 margin: 2px 0px !important;
121 padding: 8px 12px;
122 border: 1px solid var(--border-color);
123 border-radius: 4px;
124 width: 100%;
125 background: var(--bg-color-secondary);
126 color: var(--text-color);
127}
128
129.flash-white {
130 outline: 2px solid var(--text-color-secondary);
131 background: color-mix(in srgb, var(--text-color) 75%, var(--bg-color));
132 opacity: 0.2;
133 animation: flash 0.275s forwards;
134}
135
136@keyframes flash {
137 0% {
138 opacity: 0.2;
139 outline: 2px solid var(--text-color-secondary);
140 background: color-mix(in srgb, var(--text-color) 55%, var(--bg-color));
141 }
142 50% {
143 opacity: 1;
144 outline: 2px solid var(--text-color-hover);
145 background: color-mix(in srgb, var(--text-color) 75%, var(--bg-color));
146 }
147 100% {
148 opacity: 0.2;
149 outline: 2px solid var(--text-color-secondary);
150 background: color-mix(in srgb, var(--text-color) 55%, var(--bg-color));
151 }
152}
153
154.copy-button {
155 padding: 8px;
156 color: var(--text-color-secondary);
157 border-radius: 4px;
158 transition: all 0.2s;
159 display: flex;
160 align-items: center;
161 justify-content: center;
162}
163
164.copy-button:hover {
165 background: var(--bg-color-hover);
166}
167
168.copy-button:active {
169 background: var(--bg-color-active);
170}
171
172.copy-button img {
173 width: 20px;
174 height: 20px;
175}
176
177.copy-button.copied {
178 background: #28a745;
179}
180
181/* Add footer styles */
182.footer {
183 position: fixed;
184 bottom: 16px;
185 left: 0;
186 right: 0;
187 text-align: center;
188 font-size: 14px;
189 color: var(--text-color-secondary);
190}
191
192.footer a {
193 color: var(--text-color-secondary);
194 text-decoration: none;
195 font-weight: 500;
196}
197
198.footer a:hover {
199 color: var(--text-color-hover);
200}
201
202.settings-button {
203 padding: 8px;
204 color: var(--text-color-secondary);
205 border-radius: 4px;
206 transition: all 0.2s;
207 display: flex;
208 align-items: center;
209 justify-content: center;
210}
211
212.settings-button:hover {
213 background: var(--bg-color-hover);
214}
215
216.settings-button:hover {
217 background: var(--bg-color-active);
218}
219
220.settings-button:hover img,
221.settings-button.rotate img {
222 transform: rotate(180deg);
223 transition: transform 0.6s ease;
224}
225
226.settings-button:active {
227 transform: scale(0.95);
228}
229
230.settings {
231 transition: transform 0.6s ease;
232}
233
234.settings-button:not(:hover):not(.rotate) .settings {
235 transform: rotate(0deg);
236}
237
238.modal {
239 display: none;
240 position: fixed;
241 top: 0;
242 left: 0;
243 width: 100%;
244 height: 100%;
245 background-color: rgba(0, 0, 0, 0.5);
246 z-index: 1000;
247}
248
249.modal-content {
250 position: relative;
251 background-color: var(--bg-color);
252 border: 1px solid var(--border-color);
253 margin: 5% auto; /* Reduced from 15% to 5% to give more space */
254 padding: 20px;
255 border-radius: 8px;
256 width: 80%;
257 max-width: 500px;
258 max-height: 80vh; /* 80% of viewport height */
259 overflow-y: auto; /* Makes content scrollable */
260}
261
262.close-modal {
263 position: absolute;
264 right: 10px;
265 top: 10px;
266 cursor: pointer;
267 font-size: 24px;
268 color: var(--text-color-secondary);
269 padding-left: 8px;
270 padding-right: 8px;
271}
272
273.bang-select {
274 width: 100%;
275 padding: 8px;
276 margin-top: 10px;
277 border-radius: 4px;
278 padding-right: 30px;
279}
280
281.bang-select-container {
282 position: relative;
283 display: inline-block;
284 width: 100%;
285}
286
287.bang-select-container::after {
288 content: "↵";
289 position: absolute;
290 right: 10px;
291 top: 18%;
292 color: var(--text-color-secondary);
293 pointer-events: none;
294 font-size: 1.2em;
295}
296
297@keyframes shake {
298 0%,
299 100% {
300 transform: translateX(0);
301 }
302 25% {
303 transform: translateX(-5px);
304 }
305 75% {
306 transform: translateX(5px);
307 }
308}
309
310@keyframes flash-red {
311 0%,
312 100% {
313 background-color: transparent;
314 }
315 50% {
316 background-color: rgba(255, 0, 0, 0.2);
317 }
318}
319
320.shake {
321 animation: shake 0.2s ease-in-out;
322}
323
324.flash-red {
325 animation: flash-red 0.3s ease-in-out;
326}
327
328.settings-section {
329 margin-bottom: 1rem;
330}
331
332.switch {
333 display: flex;
334 align-items: center;
335 gap: 8px;
336 margin: 8px 0;
337}
338
339.switch input {
340 width: 40px;
341 height: 20px;
342 appearance: none;
343 background-color: var(--bg-color-secondary);
344 border-radius: 20px;
345 position: relative;
346 cursor: pointer;
347 transition: background-color 0.3s;
348}
349
350.switch input:checked {
351 background-color: var(--text-color);
352}
353
354.switch input:before {
355 content: "";
356 width: 16px;
357 height: 16px;
358 background-color: var(--text-color);
359 position: absolute;
360 border-radius: 50%;
361 top: 2px;
362 left: 2px;
363 transition:
364 left 0.3s,
365 background-color 0.3s;
366}
367
368.switch input:checked:before {
369 background-color: var(--bg-color-secondary);
370 left: 22px;
371}
372
373.clear-history,
374.remove-bang {
375 margin-top: 8px;
376 padding: 8px 16px;
377 background-color: var(--bg-color-danger);
378 color: var(--text-color);
379 border-radius: 4px;
380 transition: all 0.2s;
381}
382
383.remove-bang {
384 padding: 4px 6px;
385}
386
387.clear-history:hover,
388.remove-bang:hover {
389 background-color: var(--bg-color-hover);
390}
391
392.clear-history:active,
393.remove-bang:active {
394 background-color: var(--bg-color-active);
395 transform: scale(0.98);
396}
397
398.add-bang {
399 margin-top: 8px;
400 padding: 8px 16px;
401 background-color: var(--text-color);
402 color: var(--bg-color);
403 border-radius: 4px;
404 transition: all 0.2s;
405}
406
407.add-bang:hover {
408 background-color: var(--bg-color-hover);
409 color: var(--text-color-hover);
410}
411
412.add-bang:active {
413 background-color: var(--bg-color-active);
414 transform: scale(0.98);
415}
416
417.custom-bang-item {
418 display: flex;
419 flex-direction: column;
420 gap: 8px;
421 padding: 12px;
422 border: 1px solid var(--border-color);
423 border-radius: 4px;
424 margin-top: 8px;
425}
426
427.custom-bang-info {
428 width: 100%;
429 border-collapse: collapse;
430 border: 1px solid var(--border-color);
431}
432
433.custom-bang-info td {
434 color: var(--text-color-secondary);
435 padding: 8px 16px;
436 border: 1px solid var(--border-color);
437}
438
439.custom-bang-info td:nth-child(2) code {
440 padding: 0.3rem;
441 border-radius: 4px;
442 word-break: break-all;
443 background-color: var(--bg-color-secondary);
444}
445
446.custom-bang-info td:last-child {
447 border-right: 1px solid var(--border-color);
448}
449
450.custom-bang-name {
451 font-weight: 500;
452}
453
454.custom-bang-url {
455 word-break: break-all;
456 color: var(--text-color-secondary);
457}