├── LICENSE ├── README.md ├── index.html ├── package.json ├── spinner.gif ├── spinners.css ├── spinners.gif ├── spinners.scss └── tawian-frontend.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 tawian 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [text-spinners](https://maxbeier.github.io/text-spinners/) [![npm package][npm-badge]][npm] 2 | 3 | Pure text, CSS only, font independent, inline loading indicators. Part of [tawian-frontend](https://github.com/maxbeier/tawian-frontend). Thanks to [cli-spinners](https://github.com/sindresorhus/cli-spinners) and [hack](https://github.com/egoist/hack)! 4 | 5 | 6 | ## Usage 7 | 8 | ```html 9 | 10 | 11 | 12 | ``` 13 | 14 | or 15 | 16 | ```sh 17 | npm install --save text-spinners 18 | ``` 19 | 20 | 21 | ## Preview 22 | 23 | [![Preview](https://maxbeier.github.io/text-spinners/spinners.gif)](https://maxbeier.github.io/text-spinners/) 24 | 25 | 26 | ## Tested on 27 | 28 | * Chrome 53 29 | * Firefox 49 30 | * Internet Explorer 11 31 | * Edge 25 32 | * Safari 10 33 | * iOS 9 Safari 34 | * Android Chrome 53 35 | 36 | If you have access to other browsers or earlier versions, please open an issue. 37 | 38 | 39 | [npm-badge]: https://img.shields.io/npm/v/text-spinners.svg?style=flat-square 40 | [npm]: https://www.npmjs.org/package/text-spinners 41 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | text-spinners – tawian 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | 25 |

text-spinners Pure text, CSS only, font independent1, inline loading indicators

26 | 27 |

28 | This project tries to mimic command line spinners like those from cli-spinners (where most of them are taken from) and bring them to the web. This is part of the tawian-frontend which is based on hack. Thanks to cli-spinners and hack! 29 |

30 | 31 |

Usage

32 | 33 | 
<link rel="stylesheet" href="http://tawian.io/text-spinners/spinners.css">
34 | 35 |

or

36 | 37 | 
npm install --save text-spinners
38 | 39 |

For better accessibility with screen readers add aria-hidden="true" or role="progressbar" aria-label="Loading…" to the loading element.

40 | 41 |

Types

42 | 43 |
44 | Change Font: 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 |

Ellip (default)

54 | 55 |
56 |
57 | 58 |
59 |
60 | 61 |
62 |
63 | 
<span class="loading"></span>
64 |
65 |
66 | 67 |

Dots

68 | 69 |
70 |
71 | 72 |
73 |
74 | 75 |
76 |
77 | 
<span class="loading dots"></span>
78 |
79 |
80 | 81 |

Dots2

82 | 83 |
84 |
85 | 86 |
87 |
88 | 89 |
90 |
91 | 
<span class="loading dots2"></span>
92 |
93 |
94 | 95 |

Dots3

96 | 97 |
98 |
99 | 100 |
101 |
102 | 103 |
104 |
105 | 
<span class="loading dots3"></span>
106 |
107 |
108 | 109 |

Line

110 | 111 |
112 |
113 | 114 |
115 |
116 | 117 |
118 |
119 | 
<span class="loading line"></span>
120 |
121 |
122 | 123 |

Line2

124 | 125 |
126 |
127 | 128 |
129 |
130 | 131 |
132 |
133 | 
<span class="loading line2"></span>
134 |
135 |
136 | 137 |

Plus

138 | 139 |
140 |
141 | 142 |
143 |
144 | 145 |
146 |
147 | 
<span class="loading plus"></span>
148 |
149 |
150 | 151 |

Lifting

152 | 153 |
154 |
155 | 156 |
157 |
158 | 159 |
160 |
161 | 
<span class="loading lifting"></span>
162 |
163 |
164 | 165 |

Hamburger

166 | 167 |
168 |
169 | 170 |
171 |
172 | 173 |
174 |
175 | 
<span class="loading hamburger"></span>
176 |
177 |
178 | 179 |

Bar

180 | 181 |
182 |
183 | 184 |
185 |
186 | 187 |
188 |
189 | 
<span class="loading bar"></span>
190 |
191 |
192 | 193 |

Bar2

194 | 195 |
196 |
197 | 198 |
199 |
200 | 201 |
202 |
203 | 
<span class="loading bar2"></span>
204 |
205 |
206 | 207 |

Circle

208 | 209 |
210 |
211 | 212 |
213 |
214 | 215 |
216 |
217 | 
<span class="loading circle"></span>
218 |
219 |
220 | 221 |

Open-circle

222 | 223 |
224 |
225 | 226 |
227 |
228 | 229 |
230 |
231 | 
<span class="loading open-circle"></span>
232 |
233 |
234 | 235 |

Arrow

236 | 237 |
238 |
239 | 240 |
241 |
242 | 243 |
244 |
245 | 
<span class="loading arrow"></span>
246 |
247 |
248 | 249 |

Triangle

250 | 251 |
252 |
253 | 254 |
255 |
256 | 257 |
258 |
259 | 
<span class="loading triangle"></span>
260 |
261 |
262 | 263 |

Triangles

264 | 265 |
266 |
267 | 268 |
269 |
270 | 271 |
272 |
273 | 
<span class="loading triangles"></span>
274 |
275 |
276 | 277 |

Beam

278 | 279 |
280 |
281 | 282 |
283 |
284 | 285 |
286 |
287 | 
<span class="loading beam"></span>
288 |
289 |
290 | 291 |

Bullet

292 | 293 |
294 |
295 | 296 |
297 |
298 | 299 |
300 |
301 | 
<span class="loading bullet"></span>
302 |
303 |
304 | 305 |

Bullseye

306 | 307 |
308 |
309 | 310 |
311 |
312 | 313 |
314 |
315 | 
<span class="loading bullseye"></span>
316 |
317 |
318 | 319 |

Rhomb

320 | 321 |
322 |
323 | 324 |
325 |
326 | 327 |
328 |
329 | 
<span class="loading rhomb"></span>
330 |
331 |
332 | 333 |

Fish

334 | 335 |
336 |
337 | 338 |
339 |
340 | 341 |
342 |
343 | 
<span class="loading fish"></span>
344 |
345 |
346 | 347 |

Toggle

348 | 349 |
350 |
351 | 352 |
353 |
354 | 355 |
356 |
357 | 
<span class="loading toggle"></span>
358 |
359 |
360 | 361 |

Countdown

362 | 363 |
364 |
365 | 366 |
367 |
368 | 369 |
370 |
371 | 
<span class="loading countdown"></span>
372 |
373 |
374 | 375 |

Time

376 | 377 |
378 |
379 | 380 |
381 |
382 | 383 |
384 |
385 | 
<span class="loading time"></span>
386 |
387 |
388 | 389 |

Hearts

390 | 391 |
392 |
393 | 394 |
395 |
396 | 397 |
398 |
399 | 
<span class="loading hearts"></span>
400 |
401 |
402 | 403 |

Earth

404 | 405 |
406 |
407 | 408 |
409 |
410 | 411 |
412 |
413 | 
<span class="loading earth"></span>
414 |
415 |
416 | 417 |

Moon

418 | 419 |
420 |
421 | 422 |
423 |
424 | 425 |
426 |
427 | 
<span class="loading moon"></span>
428 |
429 |
430 | 431 |

Monkey

432 | 433 |
434 |
435 | 436 |
437 |
438 | 439 |
440 |
441 | 
<span class="loading monkey"></span>
442 |
443 |
444 | 445 |

Runner

446 | 447 |
448 |
449 | 450 |
451 |
452 | 453 |
454 |
455 | 
<span class="loading runner"></span>
456 |
457 |
458 | 459 |

Box Bounce

460 | 461 |
462 |
463 | 464 |
465 |
466 | 467 |
468 |
469 | 
<span class="loading box-bounce"></span>
470 |
471 |
472 | 473 |

Star

474 | 475 |
476 |
477 | 478 |
479 |
480 | 481 |
482 |
483 | 
<span class="loading star"></span>
484 |
485 |
486 | 487 |

Matrix

488 | 489 |
490 |
491 | 492 |
493 |
494 | 495 |
496 |
497 | 
<span class="loading matrix"></span>
498 |
499 |
500 | 501 |

Square

502 | 503 |
504 |
505 | 506 |
507 |
508 | 509 |
510 |
511 | 
<span class="loading square"></span>
512 |
513 |
514 | 515 |

Words

516 | 517 |
518 |
519 | 520 |
521 |
522 | 523 |
524 |
525 | 
<span class="loading words"></span>
526 |
527 |
528 | 529 |

How it works

530 | 531 |
532 |
533 | Spinner 534 |
535 |
536 |

Every Spinner is a fixed sized element with a pseudo element whose content is set to the parts of the spinner divided by \A to create line breaks. Then a stepped keyframe animation shifts the pseudo element up one line-height per step.

537 |
538 |
539 | 540 |
541 |
    542 |
  1. 543 |

    Mostly. Sometimes not. It's complicated. ↩

    544 |
    2. 545 |
546 |
547 | 548 |
549 | 550 |
551 | 552 | 553 | 558 | 559 | 560 | 567 | 568 | 569 | 570 | 571 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "text-spinners", 3 | "version": "1.0.5", 4 | "description": "Pure text, CSS only, font independent, inline loading indicators", 5 | "main": "spinners.css", 6 | "style": "spinners.css", 7 | "files": [ 8 | "LICENSE", 9 | "spinners.css", 10 | "spinners.scss" 11 | ], 12 | "repository": "maxbeier/text-spinners", 13 | "author": "Maximilian Beier", 14 | "license": "MIT", 15 | "keywords": [ 16 | "loading indicators", 17 | "spinners" 18 | ], 19 | "bugs": "https://github.com/maxbeier/text-spinners/issues", 20 | "homepage": "https://maxbeier.github.io/text-spinners/", 21 | "scripts": { 22 | "version": "cp spinners.css spinners.scss; git add spinners.scss" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxbeier/text-spinners/349ae70f333bfc44e7a41e1b4aa673ae610f5ff2/spinner.gif -------------------------------------------------------------------------------- /spinners.css: -------------------------------------------------------------------------------- 1 | /* --- Basics --- */ 2 | 3 | .loading { 4 | display: inline-block; 5 | overflow: hidden; 6 | height: 1.3em; 7 | margin-top: -0.3em; 8 | line-height: 1.5em; 9 | vertical-align: text-bottom; 10 | } 11 | 12 | .loading::after { 13 | display: inline-table; 14 | white-space: pre; 15 | text-align: left; 16 | } 17 | 18 | /* --- Types --- */ 19 | 20 | /* default loading is ellip */ 21 | .loading::after { 22 | content: "\A.\A..\A..."; 23 | animation: spin4 2s steps(4) infinite; 24 | } 25 | 26 | .loading.line::after { 27 | content: "/\A–\A\\\A|"; 28 | text-align: center; 29 | animation: spin4 1s steps(4) infinite; 30 | } 31 | 32 | .loading.line2::after { 33 | content: "╲\A│\A╱\A─"; 34 | text-align: center; 35 | animation: spin4 1s steps(4) infinite; 36 | } 37 | 38 | .loading.plus::after { 39 | content: "┽\A╀\A┾\A╁"; 40 | animation: spin4 1s steps(4) infinite; 41 | } 42 | 43 | .loading.dots::after { 44 | content: "⠋\A⠙\A⠹\A⠸\A⠼\A⠴\A⠦\A⠧\A⠇\A⠏"; 45 | animation: spin10 1s steps(10) infinite; 46 | } 47 | 48 | .loading.dots2::after { 49 | content: "⠋\A⠙\A⠚\A⠞\A⠖\A⠦\A⠴\A⠲\A⠳"; 50 | animation: spin9 1s steps(9) infinite; 51 | } 52 | 53 | .loading.dots3::after { 54 | content: "⋮\A⋰\A⋯\A⋱"; 55 | text-align: center; 56 | animation: spin4 1s steps(4) infinite; 57 | } 58 | 59 | .loading.lifting::after { 60 | content: "꜈꜍\A꜉꜎\A꜊꜏\A꜋꜐\A꜌꜑"; 61 | animation: spin5 .5s steps(5) infinite alternate; 62 | } 63 | 64 | .loading.hamburger::after { 65 | content: "☱\A☲\A☴"; 66 | animation: spin3 .3s steps(3) infinite alternate; 67 | } 68 | 69 | .loading.bar::after { 70 | content: "▏\A▎\A▍\A▌\A▋\A▊\A▉"; 71 | animation: spin7 1s steps(7) infinite alternate; 72 | } 73 | 74 | .loading.bar2::after { 75 | content: "▁\A▂\A▃\A▄\A▅\A▆\A▇\A█"; 76 | animation: spin8 2s steps(8) infinite alternate; 77 | } 78 | 79 | .loading.circle::after { 80 | content: "◴\A◷\A◶\A◵"; 81 | animation: spin4 1s steps(4) infinite; 82 | } 83 | 84 | .loading.open-circle::after { 85 | content: "◜\A◠\A◝\A◞\A◡\A◟"; 86 | animation: spin6 .6s steps(6) infinite; 87 | } 88 | 89 | .loading.arrow::after { 90 | content: "←\A↖\A↑\A↗\A→\A↘\A↓\A↙"; 91 | animation: spin8 1s steps(8) infinite; 92 | } 93 | 94 | .loading.triangle::after { 95 | content: "◢\A◣\A◤\A◥"; 96 | animation: spin4 1s steps(4) infinite; 97 | } 98 | 99 | .loading.triangles::after { 100 | content: "▹▹▹▹▹\A ▸▹▹▹▹\A ▹▸▹▹▹\A ▹▹▸▹▹\A ▹▹▹▸▹\A ▹▹▹▹▸"; 101 | animation: spin6 1s steps(6) infinite; 102 | } 103 | 104 | .loading.beam::after { 105 | content: "\A= \A == \A === \A ====\A ===\A ==\A =\A"; 106 | animation: spin9 1.2s steps(9) infinite; 107 | font-family: monospace; 108 | } 109 | 110 | .loading.bullet::after { 111 | content: " ● \A ● \A ● \A ● \A ●\A ● \A ● \A ● \A ● \A ● "; 112 | animation: spin10 1s steps(10) infinite; 113 | } 114 | 115 | .loading.bullseye::after { 116 | content: "◎◎◎\A◉◎◎\A◎◉◎\A◎◎◉"; 117 | animation: spin4 1s steps(4) infinite; 118 | } 119 | 120 | .loading.rhomb::after { 121 | content: "◇◇◇\A◈◇◇\A◇◈◇\A◇◇◈"; 122 | animation: spin4 1s steps(4) infinite; 123 | } 124 | 125 | .loading.fish::after { 126 | content: ">))'>\A  >))'>\A   >))'>\A    >))'>\A     >))'>\A     <'((<\A    <'((<\A   <'((<\A  <'((<\A <'((<\A"; 127 | animation: spin10 5s steps(10) infinite; 128 | } 129 | 130 | .loading.toggle::after { 131 | content: "⊶\A⊷"; 132 | animation: spin2 1s steps(2) infinite; 133 | } 134 | 135 | .loading.countdown::after { 136 | content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; 137 | animation: spin10 10s steps(10) reverse; 138 | } 139 | 140 | .loading.time::after { 141 | content: "🕐\A🕑\A🕒\A🕓\A🕔\A🕕\A🕖\A🕗\A🕘\A🕙\A🕚\A🕛"; 142 | animation: spin12 3s steps(12) infinite; 143 | width: 1.3em; 144 | } 145 | 146 | .loading.hearts::after { 147 | content: "💛\A💙\A💜\A💚"; 148 | animation: spin4 2s steps(4) infinite; 149 | width: 1.3em; 150 | } 151 | 152 | .loading.earth::after { 153 | content: "🌍\A🌎\A🌏"; 154 | animation: spin3 1s steps(3) infinite; 155 | width: 1.3em; 156 | } 157 | 158 | .loading.moon::after { 159 | content: "🌑\A🌒\A🌓\A🌔\A🌕\A🌖\A🌗\A🌘"; 160 | animation: spin8 2s steps(8) infinite; 161 | width: 1.3em; 162 | } 163 | 164 | .loading.monkey::after { 165 | content: "🙈\A🙉\A🙊"; 166 | animation: spin3 1.5s steps(3) infinite; 167 | width: 1.3em; 168 | } 169 | 170 | .loading.runner::after { 171 | content: "🚶\A🏃"; 172 | animation: spin2 1s steps(2) infinite; 173 | width: 1.3em; 174 | } 175 | 176 | .loading.box-bounce::after { 177 | content:"▖\A▘\A▝\A▗"; 178 | animation: spin4 1s steps(4) infinite; 179 | } 180 | 181 | .loading.star::after { 182 | content:"✶\A✸\A✹\A✺\A✹\A✷"; 183 | animation: spin6 1s steps(6) infinite; 184 | } 185 | 186 | .loading.matrix::after { 187 | content:"░ ░░░░\A░░ ░░░\A░░░ ░░\A░░░░ ░"; 188 | animation: spin4 .5s steps(4) infinite alternate; 189 | } 190 | 191 | .loading.square::after { 192 | content: "◰\A◳\A◲\A◱"; 193 | animation: spin4 1s steps(4) infinite; 194 | } 195 | 196 | .loading.words::after { 197 | content: "Loading\A Still loading\A Mostly done\A A bit more \A Almost done\A Ready-ish"; 198 | animation: spin6 12s steps(6) infinite; 199 | } 200 | 201 | /* --- Animations --- */ 202 | 203 | @keyframes spin1 { to { transform: translateY( -1.5em); } } 204 | @keyframes spin2 { to { transform: translateY( -3.0em); } } 205 | @keyframes spin3 { to { transform: translateY( -4.5em); } } 206 | @keyframes spin4 { to { transform: translateY( -6.0em); } } 207 | @keyframes spin5 { to { transform: translateY( -7.5em); } } 208 | @keyframes spin6 { to { transform: translateY( -9.0em); } } 209 | @keyframes spin7 { to { transform: translateY(-10.5em); } } 210 | @keyframes spin8 { to { transform: translateY(-12.0em); } } 211 | @keyframes spin9 { to { transform: translateY(-13.5em); } } 212 | @keyframes spin10 { to { transform: translateY(-15.0em); } } 213 | @keyframes spin11 { to { transform: translateY(-16.5em); } } 214 | @keyframes spin12 { to { transform: translateY(-18.0em); } } 215 | -------------------------------------------------------------------------------- /spinners.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxbeier/text-spinners/349ae70f333bfc44e7a41e1b4aa673ae610f5ff2/spinners.gif -------------------------------------------------------------------------------- /spinners.scss: -------------------------------------------------------------------------------- 1 | /* --- Basics --- */ 2 | 3 | .loading { 4 | display: inline-block; 5 | overflow: hidden; 6 | height: 1.3em; 7 | margin-top: -0.3em; 8 | line-height: 1.5em; 9 | vertical-align: text-bottom; 10 | } 11 | 12 | .loading::after { 13 | display: inline-table; 14 | white-space: pre; 15 | text-align: left; 16 | } 17 | 18 | /* --- Types --- */ 19 | 20 | /* default loading is ellip */ 21 | .loading::after { 22 | content: "\A.\A..\A..."; 23 | animation: spin4 2s steps(4) infinite; 24 | } 25 | 26 | .loading.line::after { 27 | content: "/\A–\A\\\A|"; 28 | text-align: center; 29 | animation: spin4 1s steps(4) infinite; 30 | } 31 | 32 | .loading.line2::after { 33 | content: "╲\A│\A╱\A─"; 34 | text-align: center; 35 | animation: spin4 1s steps(4) infinite; 36 | } 37 | 38 | .loading.plus::after { 39 | content: "┽\A╀\A┾\A╁"; 40 | animation: spin4 1s steps(4) infinite; 41 | } 42 | 43 | .loading.dots::after { 44 | content: "⠋\A⠙\A⠹\A⠸\A⠼\A⠴\A⠦\A⠧\A⠇\A⠏"; 45 | animation: spin10 1s steps(10) infinite; 46 | } 47 | 48 | .loading.dots2::after { 49 | content: "⠋\A⠙\A⠚\A⠞\A⠖\A⠦\A⠴\A⠲\A⠳"; 50 | animation: spin9 1s steps(9) infinite; 51 | } 52 | 53 | .loading.dots3::after { 54 | content: "⋮\A⋰\A⋯\A⋱"; 55 | text-align: center; 56 | animation: spin4 1s steps(4) infinite; 57 | } 58 | 59 | .loading.lifting::after { 60 | content: "꜈꜍\A꜉꜎\A꜊꜏\A꜋꜐\A꜌꜑"; 61 | animation: spin5 .5s steps(5) infinite alternate; 62 | } 63 | 64 | .loading.hamburger::after { 65 | content: "☱\A☲\A☴"; 66 | animation: spin3 .3s steps(3) infinite alternate; 67 | } 68 | 69 | .loading.bar::after { 70 | content: "▏\A▎\A▍\A▌\A▋\A▊\A▉"; 71 | animation: spin7 1s steps(7) infinite alternate; 72 | } 73 | 74 | .loading.bar2::after { 75 | content: "▁\A▂\A▃\A▄\A▅\A▆\A▇\A█"; 76 | animation: spin8 2s steps(8) infinite alternate; 77 | } 78 | 79 | .loading.circle::after { 80 | content: "◴\A◷\A◶\A◵"; 81 | animation: spin4 1s steps(4) infinite; 82 | } 83 | 84 | .loading.open-circle::after { 85 | content: "◜\A◠\A◝\A◞\A◡\A◟"; 86 | animation: spin6 .6s steps(6) infinite; 87 | } 88 | 89 | .loading.arrow::after { 90 | content: "←\A↖\A↑\A↗\A→\A↘\A↓\A↙"; 91 | animation: spin8 1s steps(8) infinite; 92 | } 93 | 94 | .loading.triangle::after { 95 | content: "◢\A◣\A◤\A◥"; 96 | animation: spin4 1s steps(4) infinite; 97 | } 98 | 99 | .loading.triangles::after { 100 | content: "▹▹▹▹▹\A ▸▹▹▹▹\A ▹▸▹▹▹\A ▹▹▸▹▹\A ▹▹▹▸▹\A ▹▹▹▹▸"; 101 | animation: spin6 1s steps(6) infinite; 102 | } 103 | 104 | .loading.beam::after { 105 | content: "\A= \A == \A === \A ====\A ===\A ==\A =\A"; 106 | animation: spin9 1.2s steps(9) infinite; 107 | font-family: monospace; 108 | } 109 | 110 | .loading.bullet::after { 111 | content: " ● \A ● \A ● \A ● \A ●\A ● \A ● \A ● \A ● \A ● "; 112 | animation: spin10 1s steps(10) infinite; 113 | } 114 | 115 | .loading.bullseye::after { 116 | content: "◎◎◎\A◉◎◎\A◎◉◎\A◎◎◉"; 117 | animation: spin4 1s steps(4) infinite; 118 | } 119 | 120 | .loading.rhomb::after { 121 | content: "◇◇◇\A◈◇◇\A◇◈◇\A◇◇◈"; 122 | animation: spin4 1s steps(4) infinite; 123 | } 124 | 125 | .loading.fish::after { 126 | content: ">))'>\A  >))'>\A   >))'>\A    >))'>\A     >))'>\A     <'((<\A    <'((<\A   <'((<\A  <'((<\A <'((<\A"; 127 | animation: spin10 5s steps(10) infinite; 128 | } 129 | 130 | .loading.toggle::after { 131 | content: "⊶\A⊷"; 132 | animation: spin2 1s steps(2) infinite; 133 | } 134 | 135 | .loading.countdown::after { 136 | content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; 137 | animation: spin10 10s steps(10) reverse; 138 | } 139 | 140 | .loading.time::after { 141 | content: "🕐\A🕑\A🕒\A🕓\A🕔\A🕕\A🕖\A🕗\A🕘\A🕙\A🕚\A🕛"; 142 | animation: spin12 3s steps(12) infinite; 143 | width: 1.3em; 144 | } 145 | 146 | .loading.hearts::after { 147 | content: "💛\A💙\A💜\A💚"; 148 | animation: spin4 2s steps(4) infinite; 149 | width: 1.3em; 150 | } 151 | 152 | .loading.earth::after { 153 | content: "🌍\A🌎\A🌏"; 154 | animation: spin3 1s steps(3) infinite; 155 | width: 1.3em; 156 | } 157 | 158 | .loading.moon::after { 159 | content: "🌑\A🌒\A🌓\A🌔\A🌕\A🌖\A🌗\A🌘"; 160 | animation: spin8 2s steps(8) infinite; 161 | width: 1.3em; 162 | } 163 | 164 | .loading.monkey::after { 165 | content: "🙈\A🙉\A🙊"; 166 | animation: spin3 1.5s steps(3) infinite; 167 | width: 1.3em; 168 | } 169 | 170 | .loading.runner::after { 171 | content: "🚶\A🏃"; 172 | animation: spin2 1s steps(2) infinite; 173 | width: 1.3em; 174 | } 175 | 176 | .loading.box-bounce::after { 177 | content:"▖\A▘\A▝\A▗"; 178 | animation: spin4 1s steps(4) infinite; 179 | } 180 | 181 | .loading.star::after { 182 | content:"✶\A✸\A✹\A✺\A✹\A✷"; 183 | animation: spin6 1s steps(6) infinite; 184 | } 185 | 186 | .loading.matrix::after { 187 | content:"░ ░░░░\A░░ ░░░\A░░░ ░░\A░░░░ ░"; 188 | animation: spin4 .5s steps(4) infinite alternate; 189 | } 190 | 191 | .loading.square::after { 192 | content: "◰\A◳\A◲\A◱"; 193 | animation: spin4 1s steps(4) infinite; 194 | } 195 | 196 | .loading.words::after { 197 | content: "Loading\A Still loading\A Mostly done\A A bit more \A Almost done\A Ready-ish"; 198 | animation: spin6 12s steps(6) infinite; 199 | } 200 | 201 | /* --- Animations --- */ 202 | 203 | @keyframes spin1 { to { transform: translateY( -1.5em); } } 204 | @keyframes spin2 { to { transform: translateY( -3.0em); } } 205 | @keyframes spin3 { to { transform: translateY( -4.5em); } } 206 | @keyframes spin4 { to { transform: translateY( -6.0em); } } 207 | @keyframes spin5 { to { transform: translateY( -7.5em); } } 208 | @keyframes spin6 { to { transform: translateY( -9.0em); } } 209 | @keyframes spin7 { to { transform: translateY(-10.5em); } } 210 | @keyframes spin8 { to { transform: translateY(-12.0em); } } 211 | @keyframes spin9 { to { transform: translateY(-13.5em); } } 212 | @keyframes spin10 { to { transform: translateY(-15.0em); } } 213 | @keyframes spin11 { to { transform: translateY(-16.5em); } } 214 | @keyframes spin12 { to { transform: translateY(-18.0em); } } 215 | -------------------------------------------------------------------------------- /tawian-frontend.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}h1,h2,h3,h4,h5,h6,ol,ul,li,code,blockquote{margin:0;padding:0;font-size:1rem}h1,h2,h3,h4,h5,h6{position:relative}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{position:absolute;left:-4.675rem;width:4rem;text-align:right;color:#bdbdbd}@media screen and (max-width: 68rem){h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{position:static;padding-right:1ch}}h1:before{content:"#"}h2:before{content:"##"}h3:before{content:"###"}h4:before{content:"####"}h5:before{content:"#####"}h6:before{content:"######"}ol{counter-reset:ol}ul>li{padding-left:2ch}ol>li{padding-left:3ch}li{position:relative;display:block}li:before{position:absolute;top:0;left:0;color:#bdbdbd}ul>li:before{content:"–"}ol>li:before{content:counter(ol) ".";counter-increment:ol}hr{height:1rem;margin:1.5rem 0;border:0;line-height:1rem}hr:after{display:block;height:1rem;overflow:hidden;content:"＊ ＊ ＊";text-align:center;overflow:hidden;color:#bdbdbd;font-size:.8rem}.dashed-top:before,hr.dashed:before,.dashed-bottom:after,abbr[title]:after{content:"– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –";position:absolute;left:0;overflow:hidden;width:100%;height:1rem;line-height:1;word-wrap:break-word;text-align:justify;letter-spacing:-.25rem;font-size:1rem;color:#bdbdbd}.dashed-top,hr.dashed{position:relative}.dashed-top:before,hr.dashed:before{top:-.5rem}.dashed-bottom,abbr[title]{position:relative}.dashed-bottom:after,abbr[title]:after{bottom:-.5rem}hr.dashed{margin:2rem 0 1rem}.grid{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.grid-top{-webkit-box-align:start;-ms-flex-align:start;-ms-grid-row-align:flex-start;align-items:flex-start}.grid-middle{-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.grid-bottom{-webkit-box-align:end;-ms-flex-align:end;-ms-grid-row-align:flex-end;align-items:flex-end}.grid-stretch{-webkit-box-align:stretch;-ms-flex-align:stretch;-ms-grid-row-align:stretch;align-items:stretch}.grid-baseline{-webkit-box-align:baseline;-ms-flex-align:baseline;-ms-grid-row-align:baseline;align-items:baseline}.grid-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.grid-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.grid-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.grid-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.grid-around{-ms-flex-pack:distribute;justify-content:space-around}.cell{-webkit-box-flex:1;-ms-flex:1;flex:1}.cell>*:last-child{margin-bottom:0}.cell-top{margin-bottom:auto}.cell-middle{margin:auto 0}.cell-bottom{margin-top:auto}.cell-1{-webkit-box-flex:0;-ms-flex:0 0 calc(100% * 1 / 12);flex:0 0 calc(100% * 1 / 12);min-width:calc(100% * 1 / 12)}.cell-2{-webkit-box-flex:0;-ms-flex:0 0 calc(100% * 2 / 12);flex:0 0 calc(100% * 2 / 12);min-width:calc(100% * 2 / 12)}.cell-3{-webkit-box-flex:0;-ms-flex:0 0 calc(100% * 3 / 12);flex:0 0 calc(100% * 3 / 12);min-width:calc(100% * 3 / 12)}.cell-4{-webkit-box-flex:0;-ms-flex:0 0 calc(100% * 4 / 12);flex:0 0 calc(100% * 4 / 12);min-width:calc(100% * 4 / 12)}.cell-5{-webkit-box-flex:0;-ms-flex:0 0 calc(100% * 5 / 12);flex:0 0 calc(100% * 5 / 12);min-width:calc(100% * 5 / 12)}.cell-6{-webkit-box-flex:0;-ms-flex:0 0 calc(100% * 6 / 12);flex:0 0 calc(100% * 6 / 12);min-width:calc(100% * 6 / 12)}.cell-7{-webkit-box-flex:0;-ms-flex:0 0 calc(100% * 7 / 12);flex:0 0 calc(100% * 7 / 12);min-width:calc(100% * 7 / 12)}.cell-8{-webkit-box-flex:0;-ms-flex:0 0 calc(100% * 8 / 12);flex:0 0 calc(100% * 8 / 12);min-width:calc(100% * 8 / 12)}.cell-9{-webkit-box-flex:0;-ms-flex:0 0 calc(100% * 9 / 12);flex:0 0 calc(100% * 9 / 12);min-width:calc(100% * 9 / 12)}.cell-10{-webkit-box-flex:0;-ms-flex:0 0 calc(100% * 10 / 12);flex:0 0 calc(100% * 10 / 12);min-width:calc(100% * 10 / 12)}.cell-11{-webkit-box-flex:0;-ms-flex:0 0 calc(100% * 11 / 12);flex:0 0 calc(100% * 11 / 12);min-width:calc(100% * 11 / 12)}.grid{margin-left:-1rem;margin-top:-1rem}.grid .cell{padding-left:1rem;padding-top:1rem}.grid-narrow{margin-left:0;margin-top:0}.grid-narrow .cell{padding-left:0;padding-top:0}.grid-wide{margin-left:-2rem;margin-top:-2rem}.grid-wide .cell{padding-left:2rem;padding-top:2rem}@media screen and (max-width: 48rem){.grid{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.cell{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;min-width:auto}}*{box-sizing:border-box;text-rendering:geometricPrecision}::-moz-selection{background:#bbdefb}::selection{background:#bbdefb}html{color:#212121;font-size:16px;line-height:1.6;font-family:"Cousine", Menlo, Lucida Console, Courier New, monospace}h1,h2,h3,h4,h5,h6{line-height:1.3em;margin-top:2rem;margin-bottom:1.5rem}.grid h1,.grid h2,.grid h3,.grid h4,.grid h5,.grid h6{margin-top:0rem;margin-bottom:1rem}.grid h1:before,.grid h2:before,.grid h3:before,.grid h4:before,.grid h5:before,.grid h6:before{display:none}h1>small,h2>small,h3>small,h4>small,h5>small,h6>small{color:#9e9e9e}h1{font-size:1.25rem}h2{font-size:1.125rem}p,ul,ol,pre,form,table,blockquote{margin-top:0;margin-bottom:1rem}ul ul,ol ol,ul ol,ol ul{margin-bottom:0}.container{max-width:64rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}.site-header{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:1.25rem 0 1rem}.site-title{font-size:2rem;line-height:1;color:#546e7a}.site-search{margin:0}.site-search input{width:16rem;padding:.4rem 0 0;border:0;border-bottom:2px solid #f5f5f5;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.site-nav{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-left:auto}.site-nav ul{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin:0}.site-nav li:before{display:none}@media screen and (max-width: 48rem){.site-nav{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:right}.site-nav li{padding-top:1rem}}.responsive-nav{display:none;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right}.responsive-nav label{margin-right:-.5rem;padding:0 .5rem;cursor:pointer;font-size:2rem;line-height:1;color:#546e7a}.responsive-nav+input[type=checkbox]{display:none}@media screen and (max-width: 48rem){.responsive-nav{display:block}.responsive-nav ~ .site-nav{max-height:0;min-width:100%;-ms-flex-preferred-size:100%;flex-basis:100%;overflow:hidden;-webkit-transition:max-height .5s ease-out;transition:max-height .5s ease-out}.responsive-nav+input[type=checkbox]:checked ~ .site-nav{max-height:10rem;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}}.site-main{margin-top:2rem;margin-bottom:2rem}.site-footer{margin-top:1rem;padding:1.5rem 0 1.25rem;color:#bdbdbd;text-align:center}.site-footer a{color:#64b5f6}.btn{position:relative;padding:.8rem 1.5rem .7rem;border-width:1px;border-style:solid;border-radius:2px;outline:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:1}.btn:active{box-shadow:inset 0 1px 3px rgba(0,0,0,0.12)}.btn:hover{text-decoration:none}.btn.btn-ghost{background-color:transparent}.btn.btn-ghost:hover{background-color:transparent}.btn-block{width:100%}.btn-link{border-color:transparent;background-color:transparent;color:#2196f3}.btn-link:hover,.btn-link:focus{color:#1976d2}.btn-default{color:#fff;background-color:#eee;border-color:#eee;color:#424242}.btn-default:hover,.btn-default:focus:not(.btn-ghost){background-color:#e0e0e0;border-color:#e0e0e0;color:#fff}.btn-default.btn-ghost{border-color:#eee;color:#eee}.btn-default.btn-ghost:hover,.btn-default.btn-ghost:focus{border-color:#e0e0e0;color:#e0e0e0}.btn-default:hover{color:#424242}.btn-default.btn-ghost{border-color:#757575;color:#757575}.btn-default.btn-ghost:hover,.btn-default.btn-ghost:focus{border-color:#424242;color:#424242}.btn[disabled]{color:#fff;background-color:#f5f5f5;border-color:#f5f5f5;cursor:not-allowed}.btn[disabled]:hover,.btn[disabled]:focus:not(.btn-ghost){background-color:#f5f5f5;border-color:#f5f5f5;color:#fff}.btn[disabled].btn-ghost{border-color:#f5f5f5;color:#f5f5f5}.btn[disabled].btn-ghost:hover,.btn[disabled].btn-ghost:focus{border-color:#f5f5f5;color:#f5f5f5}.btn[disabled],.btn[disabled]:hover{color:#bdbdbd}.btn[disabled].btn-ghost,.btn[disabled].btn-ghost:hover{background-color:transparent;border-color:#bdbdbd;color:#bdbdbd}.btn-primary{color:#fff;background-color:#2196f3;border-color:#2196f3}.btn-primary:hover,.btn-primary:focus:not(.btn-ghost){background-color:#1976d2;border-color:#1976d2;color:#fff}.btn-primary.btn-ghost{border-color:#2196f3;color:#2196f3}.btn-primary.btn-ghost:hover,.btn-primary.btn-ghost:focus{border-color:#1976d2;color:#1976d2}.btn-success{color:#fff;background-color:#4caf50;border-color:#4caf50}.btn-success:hover,.btn-success:focus:not(.btn-ghost){background-color:#388e3c;border-color:#388e3c;color:#fff}.btn-success.btn-ghost{border-color:#4caf50;color:#4caf50}.btn-success.btn-ghost:hover,.btn-success.btn-ghost:focus{border-color:#388e3c;color:#388e3c}.btn-info{color:#fff;background-color:#00bcd4;border-color:#00bcd4}.btn-info:hover,.btn-info:focus:not(.btn-ghost){background-color:#0097a7;border-color:#0097a7;color:#fff}.btn-info.btn-ghost{border-color:#00bcd4;color:#00bcd4}.btn-info.btn-ghost:hover,.btn-info.btn-ghost:focus{border-color:#0097a7;color:#0097a7}.btn-warning{color:#fff;background-color:#ff9800;border-color:#ff9800}.btn-warning:hover,.btn-warning:focus:not(.btn-ghost){background-color:#f57c00;border-color:#f57c00;color:#fff}.btn-warning.btn-ghost{border-color:#ff9800;color:#ff9800}.btn-warning.btn-ghost:hover,.btn-warning.btn-ghost:focus{border-color:#f57c00;color:#f57c00}.btn-error{color:#fff;background-color:#f44336;border-color:#f44336}.btn-error:hover,.btn-error:focus:not(.btn-ghost){background-color:#d32f2f;border-color:#d32f2f;color:#fff}.btn-error.btn-ghost{border-color:#f44336;color:#f44336}.btn-error.btn-ghost:hover,.btn-error.btn-ghost:focus{border-color:#d32f2f;color:#d32f2f}.btn-addon{padding:.8rem 1rem .7rem;border:1px solid transparent;line-height:1}.btn-addon:first-child{padding-left:0}.btn-group{overflow:auto;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:top}.btn-group .btn{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-radius:0;word-break:break-all;word-break:break-word}.btn-group .btn:first-of-type{border-radius:2px 0 0 2px}.btn-group .btn:last-of-type{border-radius:0 2px 2px 0}.btn-group .btn-ghost:not(:first-of-type){margin-left:-1px}code{background-color:#f5f5f5;padding:.25em .5em;border-radius:2px;color:#000}samp,pre{padding:1rem 1.5rem .9rem;border:1px solid #e0e0e0;border-radius:2px;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;page-break-inside:avoid}pre code{padding:0;color:inherit;background-color:transparent}samp{display:inline-block;margin-top:-2px;padding:0 .5em;background-color:#fafafa}a{cursor:pointer;color:#2196f3;text-decoration:none}a:hover{color:#1976d2;text-decoration:underline}img{max-width:100%}img.full-width{display:block}figure{margin:0}figure img{width:100%}figcaption{text-align:center;color:#9e9e9e}blockquote{border-left:0.5rem solid #e0e0e0;padding-left:1rem}cite{float:right;color:#9e9e9e}cite:before{content:"– "}mark{background-color:#fff176;box-shadow:0 -1px 0 3px #fff176}abbr[title]{text-decoration:none}kbd{display:inline-block;padding:.25em .4em;vertical-align:middle;color:#424242;border:solid 1px #eee;border-bottom-color:#e0e0e0;border-radius:3px;background-color:#fafafa;box-shadow:inset 0 -1px 0 #e0e0e0;font-size:.9em;line-height:1}.footnotes{padding-top:2rem;margin-top:2rem}.narrow{padding:0 !important}.inner{padding:.8rem 1rem .7rem !important}.inner-wide{padding:1.6rem 2rem 1.4rem !important}.m-t-0{margin-top:0 !important}.m-t-1{margin-top:1rem !important}.m-t-2{margin-top:2rem !important}.m-t-3{margin-top:3rem !important}.m-b-0{margin-bottom:0 !important}.m-b-1{margin-bottom:1rem !important}.m-b-2{margin-bottom:2rem !important}.m-b-3{margin-bottom:3rem !important}.pull-left{float:left !important}.pull-right{float:right !important}.full-width{width:100% !important}.invisible{visibility:hidden !important}.hidden{display:none !important}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}@media screen and (min-width: 48rem){.hidden-if-large{display:none !important}}@media screen and (max-width: 48rem){.hidden-if-medium{display:none !important}}@media screen and (max-width: 30rem){.hidden-if-small{display:none !important}}@media print{.hidden-if-print{display:none !important}}.lead{margin-bottom:1.25em;font-size:1.25em}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:#9e9e9e}.text-primary{color:#2196f3}.text-success{color:#4caf50}.text-info{color:#00bcd4}.text-warning{color:#ff9800}.text-error{color:#f44336}.highlight .hll{background-color:#ffc}.highlight .c{color:#999}.highlight .err{color:#a00;background-color:#faa}.highlight .k{color:#069}.highlight .o{color:#555}.highlight .cm{color:#09f;font-style:italic}.highlight .cp{color:#099}.highlight .c1{color:#999}.highlight .cs{color:#999}.highlight .gd{background-color:#fcc;border:1px solid #c00}.highlight .ge{font-style:italic}.highlight .gr{color:red}.highlight .gh{color:#030}.highlight .gi{background-color:#cfc;border:1px solid #0c0}.highlight .go{color:#aaa}.highlight .gp{color:#009}.highlight .gu{color:#030}.highlight .gt{color:#9c6}.highlight .kc{color:#069}.highlight .kd{color:#069}.highlight .kn{color:#069}.highlight .kp{color:#069}.highlight .kr{color:#069}.highlight .kt{color:#078}.highlight .m{color:#f60}.highlight .s{color:#d44950}.highlight .na{color:#4f9fcf}.highlight .nb{color:#366}.highlight .nc{color:#0a8}.highlight .no{color:#360}.highlight .nd{color:#99f}.highlight .ni{color:#999}.highlight .ne{color:#c00}.highlight .nf{color:#c0f}.highlight .nl{color:#99f}.highlight .nn{color:#0cf}.highlight .nt{color:#2f6f9f}.highlight .nv{color:#033}.highlight .ow{color:#000}.highlight .w{color:#bbb}.highlight .mf{color:#f60}.highlight .mh{color:#f60}.highlight .mi{color:#f60}.highlight .mo{color:#f60}.highlight .sb{color:#c30}.highlight .sc{color:#c30}.highlight .sd{color:#c30;font-style:italic}.highlight .s2{color:#c30}.highlight .se{color:#c30}.highlight .sh{color:#c30}.highlight .si{color:#a00}.highlight .sx{color:#c30}.highlight .sr{color:#3aa}.highlight .s1{color:#c30}.highlight .ss{color:#fc3}.highlight .bp{color:#366}.highlight .vc{color:#033}.highlight .vg{color:#033}.highlight .vi{color:#033}.highlight .il{color:#f60} 2 | --------------------------------------------------------------------------------