aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2016-02-16 23:11:36 +0100
committerArthurHoaro <arthur@hoa.ro>2016-08-07 12:17:27 +0200
commit4ed6d1babe673a38351e66da991db1cb8e2cb70c (patch)
tree88cd53480da886fdf550fcb54757427a63b3d558 /tpl/default
parent341dac14f0f5e3ab368e8dba88612e35ffc979a1 (diff)
downloadShaarli-4ed6d1babe673a38351e66da991db1cb8e2cb70c.tar.gz
Shaarli-4ed6d1babe673a38351e66da991db1cb8e2cb70c.tar.zst
Shaarli-4ed6d1babe673a38351e66da991db1cb8e2cb70c.zip
Work on the menu
Diffstat (limited to 'tpl/default')
-rw-r--r--tpl/default/css/grids-responsive.css861
-rw-r--r--tpl/default/css/grids-responsive.min.css7
-rw-r--r--tpl/default/css/pure.css1475
-rw-r--r--tpl/default/css/shaarli.css108
-rw-r--r--tpl/default/img/noise.pngbin0 -> 4275 bytes
-rw-r--r--tpl/default/includes.html3
-rw-r--r--tpl/default/js/shaarli.js42
-rw-r--r--tpl/default/linklist.html128
-rw-r--r--tpl/default/linklist.paging.html25
-rw-r--r--tpl/default/page.footer.html31
-rw-r--r--tpl/default/page.header.html128
11 files changed, 2807 insertions, 1 deletions
diff --git a/tpl/default/css/grids-responsive.css b/tpl/default/css/grids-responsive.css
new file mode 100644
index 00000000..dc9f7718
--- /dev/null
+++ b/tpl/default/css/grids-responsive.css
@@ -0,0 +1,861 @@
1/*!
2Pure v0.6.0
3Copyright 2014 Yahoo! Inc. All rights reserved.
4Licensed under the BSD License.
5https://github.com/yahoo/pure/blob/master/LICENSE.md
6*/
7@media screen and (min-width: 35.5em) {
8 .pure-u-sm-1,
9 .pure-u-sm-1-1,
10 .pure-u-sm-1-2,
11 .pure-u-sm-1-3,
12 .pure-u-sm-2-3,
13 .pure-u-sm-1-4,
14 .pure-u-sm-3-4,
15 .pure-u-sm-1-5,
16 .pure-u-sm-2-5,
17 .pure-u-sm-3-5,
18 .pure-u-sm-4-5,
19 .pure-u-sm-5-5,
20 .pure-u-sm-1-6,
21 .pure-u-sm-5-6,
22 .pure-u-sm-1-8,
23 .pure-u-sm-3-8,
24 .pure-u-sm-5-8,
25 .pure-u-sm-7-8,
26 .pure-u-sm-1-12,
27 .pure-u-sm-5-12,
28 .pure-u-sm-7-12,
29 .pure-u-sm-11-12,
30 .pure-u-sm-1-24,
31 .pure-u-sm-2-24,
32 .pure-u-sm-3-24,
33 .pure-u-sm-4-24,
34 .pure-u-sm-5-24,
35 .pure-u-sm-6-24,
36 .pure-u-sm-7-24,
37 .pure-u-sm-8-24,
38 .pure-u-sm-9-24,
39 .pure-u-sm-10-24,
40 .pure-u-sm-11-24,
41 .pure-u-sm-12-24,
42 .pure-u-sm-13-24,
43 .pure-u-sm-14-24,
44 .pure-u-sm-15-24,
45 .pure-u-sm-16-24,
46 .pure-u-sm-17-24,
47 .pure-u-sm-18-24,
48 .pure-u-sm-19-24,
49 .pure-u-sm-20-24,
50 .pure-u-sm-21-24,
51 .pure-u-sm-22-24,
52 .pure-u-sm-23-24,
53 .pure-u-sm-24-24 {
54 display: inline-block;
55 *display: inline;
56 zoom: 1;
57 letter-spacing: normal;
58 word-spacing: normal;
59 vertical-align: top;
60 text-rendering: auto;
61 }
62
63 .pure-u-sm-1-24 {
64 width: 4.1667%;
65 *width: 4.1357%;
66 }
67
68 .pure-u-sm-1-12,
69 .pure-u-sm-2-24 {
70 width: 8.3333%;
71 *width: 8.3023%;
72 }
73
74 .pure-u-sm-1-8,
75 .pure-u-sm-3-24 {
76 width: 12.5000%;
77 *width: 12.4690%;
78 }
79
80 .pure-u-sm-1-6,
81 .pure-u-sm-4-24 {
82 width: 16.6667%;
83 *width: 16.6357%;
84 }
85
86 .pure-u-sm-1-5 {
87 width: 20%;
88 *width: 19.9690%;
89 }
90
91 .pure-u-sm-5-24 {
92 width: 20.8333%;
93 *width: 20.8023%;
94 }
95
96 .pure-u-sm-1-4,
97 .pure-u-sm-6-24 {
98 width: 25%;
99 *width: 24.9690%;
100 }
101
102 .pure-u-sm-7-24 {
103 width: 29.1667%;
104 *width: 29.1357%;
105 }
106
107 .pure-u-sm-1-3,
108 .pure-u-sm-8-24 {
109 width: 33.3333%;
110 *width: 33.3023%;
111 }
112
113 .pure-u-sm-3-8,
114 .pure-u-sm-9-24 {
115 width: 37.5000%;
116 *width: 37.4690%;
117 }
118
119 .pure-u-sm-2-5 {
120 width: 40%;
121 *width: 39.9690%;
122 }
123
124 .pure-u-sm-5-12,
125 .pure-u-sm-10-24 {
126 width: 41.6667%;
127 *width: 41.6357%;
128 }
129
130 .pure-u-sm-11-24 {
131 width: 45.8333%;
132 *width: 45.8023%;
133 }
134
135 .pure-u-sm-1-2,
136 .pure-u-sm-12-24 {
137 width: 50%;
138 *width: 49.9690%;
139 }
140
141 .pure-u-sm-13-24 {
142 width: 54.1667%;
143 *width: 54.1357%;
144 }
145
146 .pure-u-sm-7-12,
147 .pure-u-sm-14-24 {
148 width: 58.3333%;
149 *width: 58.3023%;
150 }
151
152 .pure-u-sm-3-5 {
153 width: 60%;
154 *width: 59.9690%;
155 }
156
157 .pure-u-sm-5-8,
158 .pure-u-sm-15-24 {
159 width: 62.5000%;
160 *width: 62.4690%;
161 }
162
163 .pure-u-sm-2-3,
164 .pure-u-sm-16-24 {
165 width: 66.6667%;
166 *width: 66.6357%;
167 }
168
169 .pure-u-sm-17-24 {
170 width: 70.8333%;
171 *width: 70.8023%;
172 }
173
174 .pure-u-sm-3-4,
175 .pure-u-sm-18-24 {
176 width: 75%;
177 *width: 74.9690%;
178 }
179
180 .pure-u-sm-19-24 {
181 width: 79.1667%;
182 *width: 79.1357%;
183 }
184
185 .pure-u-sm-4-5 {
186 width: 80%;
187 *width: 79.9690%;
188 }
189
190 .pure-u-sm-5-6,
191 .pure-u-sm-20-24 {
192 width: 83.3333%;
193 *width: 83.3023%;
194 }
195
196 .pure-u-sm-7-8,
197 .pure-u-sm-21-24 {
198 width: 87.5000%;
199 *width: 87.4690%;
200 }
201
202 .pure-u-sm-11-12,
203 .pure-u-sm-22-24 {
204 width: 91.6667%;
205 *width: 91.6357%;
206 }
207
208 .pure-u-sm-23-24 {
209 width: 95.8333%;
210 *width: 95.8023%;
211 }
212
213 .pure-u-sm-1,
214 .pure-u-sm-1-1,
215 .pure-u-sm-5-5,
216 .pure-u-sm-24-24 {
217 width: 100%;
218 }
219}
220
221@media screen and (min-width: 48em) {
222 .pure-u-md-1,
223 .pure-u-md-1-1,
224 .pure-u-md-1-2,
225 .pure-u-md-1-3,
226 .pure-u-md-2-3,
227 .pure-u-md-1-4,
228 .pure-u-md-3-4,
229 .pure-u-md-1-5,
230 .pure-u-md-2-5,
231 .pure-u-md-3-5,
232 .pure-u-md-4-5,
233 .pure-u-md-5-5,
234 .pure-u-md-1-6,
235 .pure-u-md-5-6,
236 .pure-u-md-1-8,
237 .pure-u-md-3-8,
238 .pure-u-md-5-8,
239 .pure-u-md-7-8,
240 .pure-u-md-1-12,
241 .pure-u-md-5-12,
242 .pure-u-md-7-12,
243 .pure-u-md-11-12,
244 .pure-u-md-1-24,
245 .pure-u-md-2-24,
246 .pure-u-md-3-24,
247 .pure-u-md-4-24,
248 .pure-u-md-5-24,
249 .pure-u-md-6-24,
250 .pure-u-md-7-24,
251 .pure-u-md-8-24,
252 .pure-u-md-9-24,
253 .pure-u-md-10-24,
254 .pure-u-md-11-24,
255 .pure-u-md-12-24,
256 .pure-u-md-13-24,
257 .pure-u-md-14-24,
258 .pure-u-md-15-24,
259 .pure-u-md-16-24,
260 .pure-u-md-17-24,
261 .pure-u-md-18-24,
262 .pure-u-md-19-24,
263 .pure-u-md-20-24,
264 .pure-u-md-21-24,
265 .pure-u-md-22-24,
266 .pure-u-md-23-24,
267 .pure-u-md-24-24 {
268 display: inline-block;
269 *display: inline;
270 zoom: 1;
271 letter-spacing: normal;
272 word-spacing: normal;
273 vertical-align: top;
274 text-rendering: auto;
275 }
276
277 .pure-u-md-1-24 {
278 width: 4.1667%;
279 *width: 4.1357%;
280 }
281
282 .pure-u-md-1-12,
283 .pure-u-md-2-24 {
284 width: 8.3333%;
285 *width: 8.3023%;
286 }
287
288 .pure-u-md-1-8,
289 .pure-u-md-3-24 {
290 width: 12.5000%;
291 *width: 12.4690%;
292 }
293
294 .pure-u-md-1-6,
295 .pure-u-md-4-24 {
296 width: 16.6667%;
297 *width: 16.6357%;
298 }
299
300 .pure-u-md-1-5 {
301 width: 20%;
302 *width: 19.9690%;
303 }
304
305 .pure-u-md-5-24 {
306 width: 20.8333%;
307 *width: 20.8023%;
308 }
309
310 .pure-u-md-1-4,
311 .pure-u-md-6-24 {
312 width: 25%;
313 *width: 24.9690%;
314 }
315
316 .pure-u-md-7-24 {
317 width: 29.1667%;
318 *width: 29.1357%;
319 }
320
321 .pure-u-md-1-3,
322 .pure-u-md-8-24 {
323 width: 33.3333%;
324 *width: 33.3023%;
325 }
326
327 .pure-u-md-3-8,
328 .pure-u-md-9-24 {
329 width: 37.5000%;
330 *width: 37.4690%;
331 }
332
333 .pure-u-md-2-5 {
334 width: 40%;
335 *width: 39.9690%;
336 }
337
338 .pure-u-md-5-12,
339 .pure-u-md-10-24 {
340 width: 41.6667%;
341 *width: 41.6357%;
342 }
343
344 .pure-u-md-11-24 {
345 width: 45.8333%;
346 *width: 45.8023%;
347 }
348
349 .pure-u-md-1-2,
350 .pure-u-md-12-24 {
351 width: 50%;
352 *width: 49.9690%;
353 }
354
355 .pure-u-md-13-24 {
356 width: 54.1667%;
357 *width: 54.1357%;
358 }
359
360 .pure-u-md-7-12,
361 .pure-u-md-14-24 {
362 width: 58.3333%;
363 *width: 58.3023%;
364 }
365
366 .pure-u-md-3-5 {
367 width: 60%;
368 *width: 59.9690%;
369 }
370
371 .pure-u-md-5-8,
372 .pure-u-md-15-24 {
373 width: 62.5000%;
374 *width: 62.4690%;
375 }
376
377 .pure-u-md-2-3,
378 .pure-u-md-16-24 {
379 width: 66.6667%;
380 *width: 66.6357%;
381 }
382
383 .pure-u-md-17-24 {
384 width: 70.8333%;
385 *width: 70.8023%;
386 }
387
388 .pure-u-md-3-4,
389 .pure-u-md-18-24 {
390 width: 75%;
391 *width: 74.9690%;
392 }
393
394 .pure-u-md-19-24 {
395 width: 79.1667%;
396 *width: 79.1357%;
397 }
398
399 .pure-u-md-4-5 {
400 width: 80%;
401 *width: 79.9690%;
402 }
403
404 .pure-u-md-5-6,
405 .pure-u-md-20-24 {
406 width: 83.3333%;
407 *width: 83.3023%;
408 }
409
410 .pure-u-md-7-8,
411 .pure-u-md-21-24 {
412 width: 87.5000%;
413 *width: 87.4690%;
414 }
415
416 .pure-u-md-11-12,
417 .pure-u-md-22-24 {
418 width: 91.6667%;
419 *width: 91.6357%;
420 }
421
422 .pure-u-md-23-24 {
423 width: 95.8333%;
424 *width: 95.8023%;
425 }
426
427 .pure-u-md-1,
428 .pure-u-md-1-1,
429 .pure-u-md-5-5,
430 .pure-u-md-24-24 {
431 width: 100%;
432 }
433}
434
435@media screen and (min-width: 64em) {
436 .pure-u-lg-1,
437 .pure-u-lg-1-1,
438 .pure-u-lg-1-2,
439 .pure-u-lg-1-3,
440 .pure-u-lg-2-3,
441 .pure-u-lg-1-4,
442 .pure-u-lg-3-4,
443 .pure-u-lg-1-5,
444 .pure-u-lg-2-5,
445 .pure-u-lg-3-5,
446 .pure-u-lg-4-5,
447 .pure-u-lg-5-5,
448 .pure-u-lg-1-6,
449 .pure-u-lg-5-6,
450 .pure-u-lg-1-8,
451 .pure-u-lg-3-8,
452 .pure-u-lg-5-8,
453 .pure-u-lg-7-8,
454 .pure-u-lg-1-12,
455 .pure-u-lg-5-12,
456 .pure-u-lg-7-12,
457 .pure-u-lg-11-12,
458 .pure-u-lg-1-24,
459 .pure-u-lg-2-24,
460 .pure-u-lg-3-24,
461 .pure-u-lg-4-24,
462 .pure-u-lg-5-24,
463 .pure-u-lg-6-24,
464 .pure-u-lg-7-24,
465 .pure-u-lg-8-24,
466 .pure-u-lg-9-24,
467 .pure-u-lg-10-24,
468 .pure-u-lg-11-24,
469 .pure-u-lg-12-24,
470 .pure-u-lg-13-24,
471 .pure-u-lg-14-24,
472 .pure-u-lg-15-24,
473 .pure-u-lg-16-24,
474 .pure-u-lg-17-24,
475 .pure-u-lg-18-24,
476 .pure-u-lg-19-24,
477 .pure-u-lg-20-24,
478 .pure-u-lg-21-24,
479 .pure-u-lg-22-24,
480 .pure-u-lg-23-24,
481 .pure-u-lg-24-24 {
482 display: inline-block;
483 *display: inline;
484 zoom: 1;
485 letter-spacing: normal;
486 word-spacing: normal;
487 vertical-align: top;
488 text-rendering: auto;
489 }
490
491 .pure-u-lg-1-24 {
492 width: 4.1667%;
493 *width: 4.1357%;
494 }
495
496 .pure-u-lg-1-12,
497 .pure-u-lg-2-24 {
498 width: 8.3333%;
499 *width: 8.3023%;
500 }
501
502 .pure-u-lg-1-8,
503 .pure-u-lg-3-24 {
504 width: 12.5000%;
505 *width: 12.4690%;
506 }
507
508 .pure-u-lg-1-6,
509 .pure-u-lg-4-24 {
510 width: 16.6667%;
511 *width: 16.6357%;
512 }
513
514 .pure-u-lg-1-5 {
515 width: 20%;
516 *width: 19.9690%;
517 }
518
519 .pure-u-lg-5-24 {
520 width: 20.8333%;
521 *width: 20.8023%;
522 }
523
524 .pure-u-lg-1-4,
525 .pure-u-lg-6-24 {
526 width: 25%;
527 *width: 24.9690%;
528 }
529
530 .pure-u-lg-7-24 {
531 width: 29.1667%;
532 *width: 29.1357%;
533 }
534
535 .pure-u-lg-1-3,
536 .pure-u-lg-8-24 {
537 width: 33.3333%;
538 *width: 33.3023%;
539 }
540
541 .pure-u-lg-3-8,
542 .pure-u-lg-9-24 {
543 width: 37.5000%;
544 *width: 37.4690%;
545 }
546
547 .pure-u-lg-2-5 {
548 width: 40%;
549 *width: 39.9690%;
550 }
551
552 .pure-u-lg-5-12,
553 .pure-u-lg-10-24 {
554 width: 41.6667%;
555 *width: 41.6357%;
556 }
557
558 .pure-u-lg-11-24 {
559 width: 45.8333%;
560 *width: 45.8023%;
561 }
562
563 .pure-u-lg-1-2,
564 .pure-u-lg-12-24 {
565 width: 50%;
566 *width: 49.9690%;
567 }
568
569 .pure-u-lg-13-24 {
570 width: 54.1667%;
571 *width: 54.1357%;
572 }
573
574 .pure-u-lg-7-12,
575 .pure-u-lg-14-24 {
576 width: 58.3333%;
577 *width: 58.3023%;
578 }
579
580 .pure-u-lg-3-5 {
581 width: 60%;
582 *width: 59.9690%;
583 }
584
585 .pure-u-lg-5-8,
586 .pure-u-lg-15-24 {
587 width: 62.5000%;
588 *width: 62.4690%;
589 }
590
591 .pure-u-lg-2-3,
592 .pure-u-lg-16-24 {
593 width: 66.6667%;
594 *width: 66.6357%;
595 }
596
597 .pure-u-lg-17-24 {
598 width: 70.8333%;
599 *width: 70.8023%;
600 }
601
602 .pure-u-lg-3-4,
603 .pure-u-lg-18-24 {
604 width: 75%;
605 *width: 74.9690%;
606 }
607
608 .pure-u-lg-19-24 {
609 width: 79.1667%;
610 *width: 79.1357%;
611 }
612
613 .pure-u-lg-4-5 {
614 width: 80%;
615 *width: 79.9690%;
616 }
617
618 .pure-u-lg-5-6,
619 .pure-u-lg-20-24 {
620 width: 83.3333%;
621 *width: 83.3023%;
622 }
623
624 .pure-u-lg-7-8,
625 .pure-u-lg-21-24 {
626 width: 87.5000%;
627 *width: 87.4690%;
628 }
629
630 .pure-u-lg-11-12,
631 .pure-u-lg-22-24 {
632 width: 91.6667%;
633 *width: 91.6357%;
634 }
635
636 .pure-u-lg-23-24 {
637 width: 95.8333%;
638 *width: 95.8023%;
639 }
640
641 .pure-u-lg-1,
642 .pure-u-lg-1-1,
643 .pure-u-lg-5-5,
644 .pure-u-lg-24-24 {
645 width: 100%;
646 }
647}
648
649@media screen and (min-width: 80em) {
650 .pure-u-xl-1,
651 .pure-u-xl-1-1,
652 .pure-u-xl-1-2,
653 .pure-u-xl-1-3,
654 .pure-u-xl-2-3,
655 .pure-u-xl-1-4,
656 .pure-u-xl-3-4,
657 .pure-u-xl-1-5,
658 .pure-u-xl-2-5,
659 .pure-u-xl-3-5,
660 .pure-u-xl-4-5,
661 .pure-u-xl-5-5,
662 .pure-u-xl-1-6,
663 .pure-u-xl-5-6,
664 .pure-u-xl-1-8,
665 .pure-u-xl-3-8,
666 .pure-u-xl-5-8,
667 .pure-u-xl-7-8,
668 .pure-u-xl-1-12,
669 .pure-u-xl-5-12,
670 .pure-u-xl-7-12,
671 .pure-u-xl-11-12,
672 .pure-u-xl-1-24,
673 .pure-u-xl-2-24,
674 .pure-u-xl-3-24,
675 .pure-u-xl-4-24,
676 .pure-u-xl-5-24,
677 .pure-u-xl-6-24,
678 .pure-u-xl-7-24,
679 .pure-u-xl-8-24,
680 .pure-u-xl-9-24,
681 .pure-u-xl-10-24,
682 .pure-u-xl-11-24,
683 .pure-u-xl-12-24,
684 .pure-u-xl-13-24,
685 .pure-u-xl-14-24,
686 .pure-u-xl-15-24,
687 .pure-u-xl-16-24,
688 .pure-u-xl-17-24,
689 .pure-u-xl-18-24,
690 .pure-u-xl-19-24,
691 .pure-u-xl-20-24,
692 .pure-u-xl-21-24,
693 .pure-u-xl-22-24,
694 .pure-u-xl-23-24,
695 .pure-u-xl-24-24 {
696 display: inline-block;
697 *display: inline;
698 zoom: 1;
699 letter-spacing: normal;
700 word-spacing: normal;
701 vertical-align: top;
702 text-rendering: auto;
703 }
704
705 .pure-u-xl-1-24 {
706 width: 4.1667%;
707 *width: 4.1357%;
708 }
709
710 .pure-u-xl-1-12,
711 .pure-u-xl-2-24 {
712 width: 8.3333%;
713 *width: 8.3023%;
714 }
715
716 .pure-u-xl-1-8,
717 .pure-u-xl-3-24 {
718 width: 12.5000%;
719 *width: 12.4690%;
720 }
721
722 .pure-u-xl-1-6,
723 .pure-u-xl-4-24 {
724 width: 16.6667%;
725 *width: 16.6357%;
726 }
727
728 .pure-u-xl-1-5 {
729 width: 20%;
730 *width: 19.9690%;
731 }
732
733 .pure-u-xl-5-24 {
734 width: 20.8333%;
735 *width: 20.8023%;
736 }
737
738 .pure-u-xl-1-4,
739 .pure-u-xl-6-24 {
740 width: 25%;
741 *width: 24.9690%;
742 }
743
744 .pure-u-xl-7-24 {
745 width: 29.1667%;
746 *width: 29.1357%;
747 }
748
749 .pure-u-xl-1-3,
750 .pure-u-xl-8-24 {
751 width: 33.3333%;
752 *width: 33.3023%;
753 }
754
755 .pure-u-xl-3-8,
756 .pure-u-xl-9-24 {
757 width: 37.5000%;
758 *width: 37.4690%;
759 }
760
761 .pure-u-xl-2-5 {
762 width: 40%;
763 *width: 39.9690%;
764 }
765
766 .pure-u-xl-5-12,
767 .pure-u-xl-10-24 {
768 width: 41.6667%;
769 *width: 41.6357%;
770 }
771
772 .pure-u-xl-11-24 {
773 width: 45.8333%;
774 *width: 45.8023%;
775 }
776
777 .pure-u-xl-1-2,
778 .pure-u-xl-12-24 {
779 width: 50%;
780 *width: 49.9690%;
781 }
782
783 .pure-u-xl-13-24 {
784 width: 54.1667%;
785 *width: 54.1357%;
786 }
787
788 .pure-u-xl-7-12,
789 .pure-u-xl-14-24 {
790 width: 58.3333%;
791 *width: 58.3023%;
792 }
793
794 .pure-u-xl-3-5 {
795 width: 60%;
796 *width: 59.9690%;
797 }
798
799 .pure-u-xl-5-8,
800 .pure-u-xl-15-24 {
801 width: 62.5000%;
802 *width: 62.4690%;
803 }
804
805 .pure-u-xl-2-3,
806 .pure-u-xl-16-24 {
807 width: 66.6667%;
808 *width: 66.6357%;
809 }
810
811 .pure-u-xl-17-24 {
812 width: 70.8333%;
813 *width: 70.8023%;
814 }
815
816 .pure-u-xl-3-4,
817 .pure-u-xl-18-24 {
818 width: 75%;
819 *width: 74.9690%;
820 }
821
822 .pure-u-xl-19-24 {
823 width: 79.1667%;
824 *width: 79.1357%;
825 }
826
827 .pure-u-xl-4-5 {
828 width: 80%;
829 *width: 79.9690%;
830 }
831
832 .pure-u-xl-5-6,
833 .pure-u-xl-20-24 {
834 width: 83.3333%;
835 *width: 83.3023%;
836 }
837
838 .pure-u-xl-7-8,
839 .pure-u-xl-21-24 {
840 width: 87.5000%;
841 *width: 87.4690%;
842 }
843
844 .pure-u-xl-11-12,
845 .pure-u-xl-22-24 {
846 width: 91.6667%;
847 *width: 91.6357%;
848 }
849
850 .pure-u-xl-23-24 {
851 width: 95.8333%;
852 *width: 95.8023%;
853 }
854
855 .pure-u-xl-1,
856 .pure-u-xl-1-1,
857 .pure-u-xl-5-5,
858 .pure-u-xl-24-24 {
859 width: 100%;
860 }
861} \ No newline at end of file
diff --git a/tpl/default/css/grids-responsive.min.css b/tpl/default/css/grids-responsive.min.css
new file mode 100644
index 00000000..1df05db8
--- /dev/null
+++ b/tpl/default/css/grids-responsive.min.css
@@ -0,0 +1,7 @@
1/*!
2Pure v0.6.0
3Copyright 2014 Yahoo! Inc. All rights reserved.
4Licensed under the BSD License.
5https://github.com/yahoo/pure/blob/master/LICENSE.md
6*/
7@media screen and (min-width:35.5em){.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-1-2,.pure-u-sm-1-3,.pure-u-sm-2-3,.pure-u-sm-1-4,.pure-u-sm-3-4,.pure-u-sm-1-5,.pure-u-sm-2-5,.pure-u-sm-3-5,.pure-u-sm-4-5,.pure-u-sm-5-5,.pure-u-sm-1-6,.pure-u-sm-5-6,.pure-u-sm-1-8,.pure-u-sm-3-8,.pure-u-sm-5-8,.pure-u-sm-7-8,.pure-u-sm-1-12,.pure-u-sm-5-12,.pure-u-sm-7-12,.pure-u-sm-11-12,.pure-u-sm-1-24,.pure-u-sm-2-24,.pure-u-sm-3-24,.pure-u-sm-4-24,.pure-u-sm-5-24,.pure-u-sm-6-24,.pure-u-sm-7-24,.pure-u-sm-8-24,.pure-u-sm-9-24,.pure-u-sm-10-24,.pure-u-sm-11-24,.pure-u-sm-12-24,.pure-u-sm-13-24,.pure-u-sm-14-24,.pure-u-sm-15-24,.pure-u-sm-16-24,.pure-u-sm-17-24,.pure-u-sm-18-24,.pure-u-sm-19-24,.pure-u-sm-20-24,.pure-u-sm-21-24,.pure-u-sm-22-24,.pure-u-sm-23-24,.pure-u-sm-24-24{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-sm-1-24{width:4.1667%;*width:4.1357%}.pure-u-sm-1-12,.pure-u-sm-2-24{width:8.3333%;*width:8.3023%}.pure-u-sm-1-8,.pure-u-sm-3-24{width:12.5%;*width:12.469%}.pure-u-sm-1-6,.pure-u-sm-4-24{width:16.6667%;*width:16.6357%}.pure-u-sm-1-5{width:20%;*width:19.969%}.pure-u-sm-5-24{width:20.8333%;*width:20.8023%}.pure-u-sm-1-4,.pure-u-sm-6-24{width:25%;*width:24.969%}.pure-u-sm-7-24{width:29.1667%;*width:29.1357%}.pure-u-sm-1-3,.pure-u-sm-8-24{width:33.3333%;*width:33.3023%}.pure-u-sm-3-8,.pure-u-sm-9-24{width:37.5%;*width:37.469%}.pure-u-sm-2-5{width:40%;*width:39.969%}.pure-u-sm-5-12,.pure-u-sm-10-24{width:41.6667%;*width:41.6357%}.pure-u-sm-11-24{width:45.8333%;*width:45.8023%}.pure-u-sm-1-2,.pure-u-sm-12-24{width:50%;*width:49.969%}.pure-u-sm-13-24{width:54.1667%;*width:54.1357%}.pure-u-sm-7-12,.pure-u-sm-14-24{width:58.3333%;*width:58.3023%}.pure-u-sm-3-5{width:60%;*width:59.969%}.pure-u-sm-5-8,.pure-u-sm-15-24{width:62.5%;*width:62.469%}.pure-u-sm-2-3,.pure-u-sm-16-24{width:66.6667%;*width:66.6357%}.pure-u-sm-17-24{width:70.8333%;*width:70.8023%}.pure-u-sm-3-4,.pure-u-sm-18-24{width:75%;*width:74.969%}.pure-u-sm-19-24{width:79.1667%;*width:79.1357%}.pure-u-sm-4-5{width:80%;*width:79.969%}.pure-u-sm-5-6,.pure-u-sm-20-24{width:83.3333%;*width:83.3023%}.pure-u-sm-7-8,.pure-u-sm-21-24{width:87.5%;*width:87.469%}.pure-u-sm-11-12,.pure-u-sm-22-24{width:91.6667%;*width:91.6357%}.pure-u-sm-23-24{width:95.8333%;*width:95.8023%}.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-5-5,.pure-u-sm-24-24{width:100%}}@media screen and (min-width:48em){.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-1-2,.pure-u-md-1-3,.pure-u-md-2-3,.pure-u-md-1-4,.pure-u-md-3-4,.pure-u-md-1-5,.pure-u-md-2-5,.pure-u-md-3-5,.pure-u-md-4-5,.pure-u-md-5-5,.pure-u-md-1-6,.pure-u-md-5-6,.pure-u-md-1-8,.pure-u-md-3-8,.pure-u-md-5-8,.pure-u-md-7-8,.pure-u-md-1-12,.pure-u-md-5-12,.pure-u-md-7-12,.pure-u-md-11-12,.pure-u-md-1-24,.pure-u-md-2-24,.pure-u-md-3-24,.pure-u-md-4-24,.pure-u-md-5-24,.pure-u-md-6-24,.pure-u-md-7-24,.pure-u-md-8-24,.pure-u-md-9-24,.pure-u-md-10-24,.pure-u-md-11-24,.pure-u-md-12-24,.pure-u-md-13-24,.pure-u-md-14-24,.pure-u-md-15-24,.pure-u-md-16-24,.pure-u-md-17-24,.pure-u-md-18-24,.pure-u-md-19-24,.pure-u-md-20-24,.pure-u-md-21-24,.pure-u-md-22-24,.pure-u-md-23-24,.pure-u-md-24-24{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-md-1-24{width:4.1667%;*width:4.1357%}.pure-u-md-1-12,.pure-u-md-2-24{width:8.3333%;*width:8.3023%}.pure-u-md-1-8,.pure-u-md-3-24{width:12.5%;*width:12.469%}.pure-u-md-1-6,.pure-u-md-4-24{width:16.6667%;*width:16.6357%}.pure-u-md-1-5{width:20%;*width:19.969%}.pure-u-md-5-24{width:20.8333%;*width:20.8023%}.pure-u-md-1-4,.pure-u-md-6-24{width:25%;*width:24.969%}.pure-u-md-7-24{width:29.1667%;*width:29.1357%}.pure-u-md-1-3,.pure-u-md-8-24{width:33.3333%;*width:33.3023%}.pure-u-md-3-8,.pure-u-md-9-24{width:37.5%;*width:37.469%}.pure-u-md-2-5{width:40%;*width:39.969%}.pure-u-md-5-12,.pure-u-md-10-24{width:41.6667%;*width:41.6357%}.pure-u-md-11-24{width:45.8333%;*width:45.8023%}.pure-u-md-1-2,.pure-u-md-12-24{width:50%;*width:49.969%}.pure-u-md-13-24{width:54.1667%;*width:54.1357%}.pure-u-md-7-12,.pure-u-md-14-24{width:58.3333%;*width:58.3023%}.pure-u-md-3-5{width:60%;*width:59.969%}.pure-u-md-5-8,.pure-u-md-15-24{width:62.5%;*width:62.469%}.pure-u-md-2-3,.pure-u-md-16-24{width:66.6667%;*width:66.6357%}.pure-u-md-17-24{width:70.8333%;*width:70.8023%}.pure-u-md-3-4,.pure-u-md-18-24{width:75%;*width:74.969%}.pure-u-md-19-24{width:79.1667%;*width:79.1357%}.pure-u-md-4-5{width:80%;*width:79.969%}.pure-u-md-5-6,.pure-u-md-20-24{width:83.3333%;*width:83.3023%}.pure-u-md-7-8,.pure-u-md-21-24{width:87.5%;*width:87.469%}.pure-u-md-11-12,.pure-u-md-22-24{width:91.6667%;*width:91.6357%}.pure-u-md-23-24{width:95.8333%;*width:95.8023%}.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-5-5,.pure-u-md-24-24{width:100%}}@media screen and (min-width:64em){.pure-u-lg-1,.pure-u-lg-1-1,.pure-u-lg-1-2,.pure-u-lg-1-3,.pure-u-lg-2-3,.pure-u-lg-1-4,.pure-u-lg-3-4,.pure-u-lg-1-5,.pure-u-lg-2-5,.pure-u-lg-3-5,.pure-u-lg-4-5,.pure-u-lg-5-5,.pure-u-lg-1-6,.pure-u-lg-5-6,.pure-u-lg-1-8,.pure-u-lg-3-8,.pure-u-lg-5-8,.pure-u-lg-7-8,.pure-u-lg-1-12,.pure-u-lg-5-12,.pure-u-lg-7-12,.pure-u-lg-11-12,.pure-u-lg-1-24,.pure-u-lg-2-24,.pure-u-lg-3-24,.pure-u-lg-4-24,.pure-u-lg-5-24,.pure-u-lg-6-24,.pure-u-lg-7-24,.pure-u-lg-8-24,.pure-u-lg-9-24,.pure-u-lg-10-24,.pure-u-lg-11-24,.pure-u-lg-12-24,.pure-u-lg-13-24,.pure-u-lg-14-24,.pure-u-lg-15-24,.pure-u-lg-16-24,.pure-u-lg-17-24,.pure-u-lg-18-24,.pure-u-lg-19-24,.pure-u-lg-20-24,.pure-u-lg-21-24,.pure-u-lg-22-24,.pure-u-lg-23-24,.pure-u-lg-24-24{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-lg-1-24{width:4.1667%;*width:4.1357%}.pure-u-lg-1-12,.pure-u-lg-2-24{width:8.3333%;*width:8.3023%}.pure-u-lg-1-8,.pure-u-lg-3-24{width:12.5%;*width:12.469%}.pure-u-lg-1-6,.pure-u-lg-4-24{width:16.6667%;*width:16.6357%}.pure-u-lg-1-5{width:20%;*width:19.969%}.pure-u-lg-5-24{width:20.8333%;*width:20.8023%}.pure-u-lg-1-4,.pure-u-lg-6-24{width:25%;*width:24.969%}.pure-u-lg-7-24{width:29.1667%;*width:29.1357%}.pure-u-lg-1-3,.pure-u-lg-8-24{width:33.3333%;*width:33.3023%}.pure-u-lg-3-8,.pure-u-lg-9-24{width:37.5%;*width:37.469%}.pure-u-lg-2-5{width:40%;*width:39.969%}.pure-u-lg-5-12,.pure-u-lg-10-24{width:41.6667%;*width:41.6357%}.pure-u-lg-11-24{width:45.8333%;*width:45.8023%}.pure-u-lg-1-2,.pure-u-lg-12-24{width:50%;*width:49.969%}.pure-u-lg-13-24{width:54.1667%;*width:54.1357%}.pure-u-lg-7-12,.pure-u-lg-14-24{width:58.3333%;*width:58.3023%}.pure-u-lg-3-5{width:60%;*width:59.969%}.pure-u-lg-5-8,.pure-u-lg-15-24{width:62.5%;*width:62.469%}.pure-u-lg-2-3,.pure-u-lg-16-24{width:66.6667%;*width:66.6357%}.pure-u-lg-17-24{width:70.8333%;*width:70.8023%}.pure-u-lg-3-4,.pure-u-lg-18-24{width:75%;*width:74.969%}.pure-u-lg-19-24{width:79.1667%;*width:79.1357%}.pure-u-lg-4-5{width:80%;*width:79.969%}.pure-u-lg-5-6,.pure-u-lg-20-24{width:83.3333%;*width:83.3023%}.pure-u-lg-7-8,.pure-u-lg-21-24{width:87.5%;*width:87.469%}.pure-u-lg-11-12,.pure-u-lg-22-24{width:91.6667%;*width:91.6357%}.pure-u-lg-23-24{width:95.8333%;*width:95.8023%}.pure-u-lg-1,.pure-u-lg-1-1,.pure-u-lg-5-5,.pure-u-lg-24-24{width:100%}}@media screen and (min-width:80em){.pure-u-xl-1,.pure-u-xl-1-1,.pure-u-xl-1-2,.pure-u-xl-1-3,.pure-u-xl-2-3,.pure-u-xl-1-4,.pure-u-xl-3-4,.pure-u-xl-1-5,.pure-u-xl-2-5,.pure-u-xl-3-5,.pure-u-xl-4-5,.pure-u-xl-5-5,.pure-u-xl-1-6,.pure-u-xl-5-6,.pure-u-xl-1-8,.pure-u-xl-3-8,.pure-u-xl-5-8,.pure-u-xl-7-8,.pure-u-xl-1-12,.pure-u-xl-5-12,.pure-u-xl-7-12,.pure-u-xl-11-12,.pure-u-xl-1-24,.pure-u-xl-2-24,.pure-u-xl-3-24,.pure-u-xl-4-24,.pure-u-xl-5-24,.pure-u-xl-6-24,.pure-u-xl-7-24,.pure-u-xl-8-24,.pure-u-xl-9-24,.pure-u-xl-10-24,.pure-u-xl-11-24,.pure-u-xl-12-24,.pure-u-xl-13-24,.pure-u-xl-14-24,.pure-u-xl-15-24,.pure-u-xl-16-24,.pure-u-xl-17-24,.pure-u-xl-18-24,.pure-u-xl-19-24,.pure-u-xl-20-24,.pure-u-xl-21-24,.pure-u-xl-22-24,.pure-u-xl-23-24,.pure-u-xl-24-24{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-xl-1-24{width:4.1667%;*width:4.1357%}.pure-u-xl-1-12,.pure-u-xl-2-24{width:8.3333%;*width:8.3023%}.pure-u-xl-1-8,.pure-u-xl-3-24{width:12.5%;*width:12.469%}.pure-u-xl-1-6,.pure-u-xl-4-24{width:16.6667%;*width:16.6357%}.pure-u-xl-1-5{width:20%;*width:19.969%}.pure-u-xl-5-24{width:20.8333%;*width:20.8023%}.pure-u-xl-1-4,.pure-u-xl-6-24{width:25%;*width:24.969%}.pure-u-xl-7-24{width:29.1667%;*width:29.1357%}.pure-u-xl-1-3,.pure-u-xl-8-24{width:33.3333%;*width:33.3023%}.pure-u-xl-3-8,.pure-u-xl-9-24{width:37.5%;*width:37.469%}.pure-u-xl-2-5{width:40%;*width:39.969%}.pure-u-xl-5-12,.pure-u-xl-10-24{width:41.6667%;*width:41.6357%}.pure-u-xl-11-24{width:45.8333%;*width:45.8023%}.pure-u-xl-1-2,.pure-u-xl-12-24{width:50%;*width:49.969%}.pure-u-xl-13-24{width:54.1667%;*width:54.1357%}.pure-u-xl-7-12,.pure-u-xl-14-24{width:58.3333%;*width:58.3023%}.pure-u-xl-3-5{width:60%;*width:59.969%}.pure-u-xl-5-8,.pure-u-xl-15-24{width:62.5%;*width:62.469%}.pure-u-xl-2-3,.pure-u-xl-16-24{width:66.6667%;*width:66.6357%}.pure-u-xl-17-24{width:70.8333%;*width:70.8023%}.pure-u-xl-3-4,.pure-u-xl-18-24{width:75%;*width:74.969%}.pure-u-xl-19-24{width:79.1667%;*width:79.1357%}.pure-u-xl-4-5{width:80%;*width:79.969%}.pure-u-xl-5-6,.pure-u-xl-20-24{width:83.3333%;*width:83.3023%}.pure-u-xl-7-8,.pure-u-xl-21-24{width:87.5%;*width:87.469%}.pure-u-xl-11-12,.pure-u-xl-22-24{width:91.6667%;*width:91.6357%}.pure-u-xl-23-24{width:95.8333%;*width:95.8023%}.pure-u-xl-1,.pure-u-xl-1-1,.pure-u-xl-5-5,.pure-u-xl-24-24{width:100%}} \ No newline at end of file
diff --git a/tpl/default/css/pure.css b/tpl/default/css/pure.css
new file mode 100644
index 00000000..a07d74cf
--- /dev/null
+++ b/tpl/default/css/pure.css
@@ -0,0 +1,1475 @@
1/*!
2Pure v0.6.0
3Copyright 2014 Yahoo! Inc. All rights reserved.
4Licensed under the BSD License.
5https://github.com/yahoo/pure/blob/master/LICENSE.md
6*/
7/*!
8normalize.css v^3.0 | MIT License | git.io/normalize
9Copyright (c) Nicolas Gallagher and Jonathan Neal
10*/
11/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
12
13/**
14 * 1. Set default font family to sans-serif.
15 * 2. Prevent iOS text size adjust after orientation change, without disabling
16 * user zoom.
17 */
18
19html {
20 font-family: sans-serif; /* 1 */
21 -ms-text-size-adjust: 100%; /* 2 */
22 -webkit-text-size-adjust: 100%; /* 2 */
23}
24
25/**
26 * Remove default margin.
27 */
28
29body {
30 margin: 0;
31}
32
33/* HTML5 display definitions
34 ========================================================================== */
35
36/**
37 * Correct `block` display not defined for any HTML5 element in IE 8/9.
38 * Correct `block` display not defined for `details` or `summary` in IE 10/11
39 * and Firefox.
40 * Correct `block` display not defined for `main` in IE 11.
41 */
42
43article,
44aside,
45details,
46figcaption,
47figure,
48footer,
49header,
50hgroup,
51main,
52menu,
53nav,
54section,
55summary {
56 display: block;
57}
58
59/**
60 * 1. Correct `inline-block` display not defined in IE 8/9.
61 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
62 */
63
64audio,
65canvas,
66progress,
67video {
68 display: inline-block; /* 1 */
69 vertical-align: baseline; /* 2 */
70}
71
72/**
73 * Prevent modern browsers from displaying `audio` without controls.
74 * Remove excess height in iOS 5 devices.
75 */
76
77audio:not([controls]) {
78 display: none;
79 height: 0;
80}
81
82/**
83 * Address `[hidden]` styling not present in IE 8/9/10.
84 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
85 */
86
87[hidden],
88template {
89 display: none;
90}
91
92/* Links
93 ========================================================================== */
94
95/**
96 * Remove the gray background color from active links in IE 10.
97 */
98
99a {
100 background-color: transparent;
101}
102
103/**
104 * Improve readability when focused and also mouse hovered in all browsers.
105 */
106
107a:active,
108a:hover {
109 outline: 0;
110}
111
112/* Text-level semantics
113 ========================================================================== */
114
115/**
116 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
117 */
118
119abbr[title] {
120 border-bottom: 1px dotted;
121}
122
123/**
124 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
125 */
126
127b,
128strong {
129 font-weight: bold;
130}
131
132/**
133 * Address styling not present in Safari and Chrome.
134 */
135
136dfn {
137 font-style: italic;
138}
139
140/**
141 * Address variable `h1` font-size and margin within `section` and `article`
142 * contexts in Firefox 4+, Safari, and Chrome.
143 */
144
145h1 {
146 font-size: 2em;
147 margin: 0.67em 0;
148}
149
150/**
151 * Address styling not present in IE 8/9.
152 */
153
154mark {
155 background: #ff0;
156 color: #000;
157}
158
159/**
160 * Address inconsistent and variable font size in all browsers.
161 */
162
163small {
164 font-size: 80%;
165}
166
167/**
168 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
169 */
170
171sub,
172sup {
173 font-size: 75%;
174 line-height: 0;
175 position: relative;
176 vertical-align: baseline;
177}
178
179sup {
180 top: -0.5em;
181}
182
183sub {
184 bottom: -0.25em;
185}
186
187/* Embedded content
188 ========================================================================== */
189
190/**
191 * Remove border when inside `a` element in IE 8/9/10.
192 */
193
194img {
195 border: 0;
196}
197
198/**
199 * Correct overflow not hidden in IE 9/10/11.
200 */
201
202svg:not(:root) {
203 overflow: hidden;
204}
205
206/* Grouping content
207 ========================================================================== */
208
209/**
210 * Address margin not present in IE 8/9 and Safari.
211 */
212
213figure {
214 margin: 1em 40px;
215}
216
217/**
218 * Address differences between Firefox and other browsers.
219 */
220
221hr {
222 -moz-box-sizing: content-box;
223 box-sizing: content-box;
224 height: 0;
225}
226
227/**
228 * Contain overflow in all browsers.
229 */
230
231pre {
232 overflow: auto;
233}
234
235/**
236 * Address odd `em`-unit font size rendering in all browsers.
237 */
238
239code,
240kbd,
241pre,
242samp {
243 font-family: monospace, monospace;
244 font-size: 1em;
245}
246
247/* Forms
248 ========================================================================== */
249
250/**
251 * Known limitation: by default, Chrome and Safari on OS X allow very limited
252 * styling of `select`, unless a `border` property is set.
253 */
254
255/**
256 * 1. Correct color not being inherited.
257 * Known issue: affects color of disabled elements.
258 * 2. Correct font properties not being inherited.
259 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
260 */
261
262button,
263input,
264optgroup,
265select,
266textarea {
267 color: inherit; /* 1 */
268 font: inherit; /* 2 */
269 margin: 0; /* 3 */
270}
271
272/**
273 * Address `overflow` set to `hidden` in IE 8/9/10/11.
274 */
275
276button {
277 overflow: visible;
278}
279
280/**
281 * Address inconsistent `text-transform` inheritance for `button` and `select`.
282 * All other form control elements do not inherit `text-transform` values.
283 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
284 * Correct `select` style inheritance in Firefox.
285 */
286
287button,
288select {
289 text-transform: none;
290}
291
292/**
293 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
294 * and `video` controls.
295 * 2. Correct inability to style clickable `input` types in iOS.
296 * 3. Improve usability and consistency of cursor style between image-type
297 * `input` and others.
298 */
299
300button,
301html input[type="button"], /* 1 */
302input[type="reset"],
303input[type="submit"] {
304 -webkit-appearance: button; /* 2 */
305 cursor: pointer; /* 3 */
306}
307
308/**
309 * Re-set default cursor for disabled elements.
310 */
311
312button[disabled],
313html input[disabled] {
314 cursor: default;
315}
316
317/**
318 * Remove inner padding and border in Firefox 4+.
319 */
320
321button::-moz-focus-inner,
322input::-moz-focus-inner {
323 border: 0;
324 padding: 0;
325}
326
327/**
328 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
329 * the UA stylesheet.
330 */
331
332input {
333 line-height: normal;
334}
335
336/**
337 * It's recommended that you don't attempt to style these elements.
338 * Firefox's implementation doesn't respect box-sizing, padding, or width.
339 *
340 * 1. Address box sizing set to `content-box` in IE 8/9/10.
341 * 2. Remove excess padding in IE 8/9/10.
342 */
343
344input[type="checkbox"],
345input[type="radio"] {
346 box-sizing: border-box; /* 1 */
347 padding: 0; /* 2 */
348}
349
350/**
351 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
352 * `font-size` values of the `input`, it causes the cursor style of the
353 * decrement button to change from `default` to `text`.
354 */
355
356input[type="number"]::-webkit-inner-spin-button,
357input[type="number"]::-webkit-outer-spin-button {
358 height: auto;
359}
360
361/**
362 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
363 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
364 * (include `-moz` to future-proof).
365 */
366
367input[type="search"] {
368 -webkit-appearance: textfield; /* 1 */
369 -moz-box-sizing: content-box;
370 -webkit-box-sizing: content-box; /* 2 */
371 box-sizing: content-box;
372}
373
374/**
375 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
376 * Safari (but not Chrome) clips the cancel button when the search input has
377 * padding (and `textfield` appearance).
378 */
379
380input[type="search"]::-webkit-search-cancel-button,
381input[type="search"]::-webkit-search-decoration {
382 -webkit-appearance: none;
383}
384
385/**
386 * Define consistent border, margin, and padding.
387 */
388
389fieldset {
390 border: 1px solid #c0c0c0;
391 margin: 0 2px;
392 padding: 0.35em 0.625em 0.75em;
393}
394
395/**
396 * 1. Correct `color` not being inherited in IE 8/9/10/11.
397 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
398 */
399
400legend {
401 border: 0; /* 1 */
402 padding: 0; /* 2 */
403}
404
405/**
406 * Remove default vertical scrollbar in IE 8/9/10/11.
407 */
408
409textarea {
410 overflow: auto;
411}
412
413/**
414 * Don't inherit the `font-weight` (applied by a rule above).
415 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
416 */
417
418optgroup {
419 font-weight: bold;
420}
421
422/* Tables
423 ========================================================================== */
424
425/**
426 * Remove most spacing between table cells.
427 */
428
429table {
430 border-collapse: collapse;
431 border-spacing: 0;
432}
433
434td,
435th {
436 padding: 0;
437}
438
439/*csslint important:false*/
440
441/* ==========================================================================
442 Pure Base Extras
443 ========================================================================== */
444
445/**
446 * Extra rules that Pure adds on top of Normalize.css
447 */
448
449/**
450 * Always hide an element when it has the `hidden` HTML attribute.
451 */
452
453.hidden,
454[hidden] {
455 display: none !important;
456}
457
458/**
459 * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
460 * aspect ratio.
461 */
462.pure-img {
463 max-width: 100%;
464 height: auto;
465 display: block;
466}
467
468/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
469
470.pure-g {
471 letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
472 *letter-spacing: normal; /* reset IE < 8 */
473 *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
474 text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
475
476 /*
477 Sets the font stack to fonts known to work properly with the above letter
478 and word spacings. See: https://github.com/yahoo/pure/issues/41/
479
480 The following font stack makes Pure Grids work on all known environments.
481
482 * FreeSans: Ships with many Linux distros, including Ubuntu
483
484 * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
485 Arial to get picked up by the browser, even though neither is available
486 in Chrome OS.
487
488 * Droid Sans: Ships with all versions of Android.
489
490 * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
491 */
492 font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
493
494 /*
495 Use flexbox when possible to avoid `letter-spacing` side-effects.
496
497 NOTE: Firefox (as of 25) does not currently support flex-wrap, so the
498 `-moz-` prefix version is omitted.
499 */
500
501 display: -webkit-flex;
502 -webkit-flex-flow: row wrap;
503
504 /* IE10 uses display: flexbox */
505 display: -ms-flexbox;
506 -ms-flex-flow: row wrap;
507
508 /* Prevents distributing space between rows */
509 -ms-align-content: flex-start;
510 -webkit-align-content: flex-start;
511 align-content: flex-start;
512}
513
514/* Opera as of 12 on Windows needs word-spacing.
515 The ".opera-only" selector is used to prevent actual prefocus styling
516 and is not required in markup.
517*/
518.opera-only :-o-prefocus,
519.pure-g {
520 word-spacing: -0.43em;
521}
522
523.pure-u {
524 display: inline-block;
525 *display: inline; /* IE < 8: fake inline-block */
526 zoom: 1;
527 letter-spacing: normal;
528 word-spacing: normal;
529 vertical-align: top;
530 text-rendering: auto;
531}
532
533/*
534Resets the font family back to the OS/browser's default sans-serif font,
535this the same font stack that Normalize.css sets for the `body`.
536*/
537.pure-g [class *= "pure-u"] {
538 font-family: sans-serif;
539}
540
541.pure-u-1,
542.pure-u-1-1,
543.pure-u-1-2,
544.pure-u-1-3,
545.pure-u-2-3,
546.pure-u-1-4,
547.pure-u-3-4,
548.pure-u-1-5,
549.pure-u-2-5,
550.pure-u-3-5,
551.pure-u-4-5,
552.pure-u-5-5,
553.pure-u-1-6,
554.pure-u-5-6,
555.pure-u-1-8,
556.pure-u-3-8,
557.pure-u-5-8,
558.pure-u-7-8,
559.pure-u-1-12,
560.pure-u-5-12,
561.pure-u-7-12,
562.pure-u-11-12,
563.pure-u-1-24,
564.pure-u-2-24,
565.pure-u-3-24,
566.pure-u-4-24,
567.pure-u-5-24,
568.pure-u-6-24,
569.pure-u-7-24,
570.pure-u-8-24,
571.pure-u-9-24,
572.pure-u-10-24,
573.pure-u-11-24,
574.pure-u-12-24,
575.pure-u-13-24,
576.pure-u-14-24,
577.pure-u-15-24,
578.pure-u-16-24,
579.pure-u-17-24,
580.pure-u-18-24,
581.pure-u-19-24,
582.pure-u-20-24,
583.pure-u-21-24,
584.pure-u-22-24,
585.pure-u-23-24,
586.pure-u-24-24 {
587 display: inline-block;
588 *display: inline;
589 zoom: 1;
590 letter-spacing: normal;
591 word-spacing: normal;
592 vertical-align: top;
593 text-rendering: auto;
594}
595
596.pure-u-1-24 {
597 width: 4.1667%;
598 *width: 4.1357%;
599}
600
601.pure-u-1-12,
602.pure-u-2-24 {
603 width: 8.3333%;
604 *width: 8.3023%;
605}
606
607.pure-u-1-8,
608.pure-u-3-24 {
609 width: 12.5000%;
610 *width: 12.4690%;
611}
612
613.pure-u-1-6,
614.pure-u-4-24 {
615 width: 16.6667%;
616 *width: 16.6357%;
617}
618
619.pure-u-1-5 {
620 width: 20%;
621 *width: 19.9690%;
622}
623
624.pure-u-5-24 {
625 width: 20.8333%;
626 *width: 20.8023%;
627}
628
629.pure-u-1-4,
630.pure-u-6-24 {
631 width: 25%;
632 *width: 24.9690%;
633}
634
635.pure-u-7-24 {
636 width: 29.1667%;
637 *width: 29.1357%;
638}
639
640.pure-u-1-3,
641.pure-u-8-24 {
642 width: 33.3333%;
643 *width: 33.3023%;
644}
645
646.pure-u-3-8,
647.pure-u-9-24 {
648 width: 37.5000%;
649 *width: 37.4690%;
650}
651
652.pure-u-2-5 {
653 width: 40%;
654 *width: 39.9690%;
655}
656
657.pure-u-5-12,
658.pure-u-10-24 {
659 width: 41.6667%;
660 *width: 41.6357%;
661}
662
663.pure-u-11-24 {
664 width: 45.8333%;
665 *width: 45.8023%;
666}
667
668.pure-u-1-2,
669.pure-u-12-24 {
670 width: 50%;
671 *width: 49.9690%;
672}
673
674.pure-u-13-24 {
675 width: 54.1667%;
676 *width: 54.1357%;
677}
678
679.pure-u-7-12,
680.pure-u-14-24 {
681 width: 58.3333%;
682 *width: 58.3023%;
683}
684
685.pure-u-3-5 {
686 width: 60%;
687 *width: 59.9690%;
688}
689
690.pure-u-5-8,
691.pure-u-15-24 {
692 width: 62.5000%;
693 *width: 62.4690%;
694}
695
696.pure-u-2-3,
697.pure-u-16-24 {
698 width: 66.6667%;
699 *width: 66.6357%;
700}
701
702.pure-u-17-24 {
703 width: 70.8333%;
704 *width: 70.8023%;
705}
706
707.pure-u-3-4,
708.pure-u-18-24 {
709 width: 75%;
710 *width: 74.9690%;
711}
712
713.pure-u-19-24 {
714 width: 79.1667%;
715 *width: 79.1357%;
716}
717
718.pure-u-4-5 {
719 width: 80%;
720 *width: 79.9690%;
721}
722
723.pure-u-5-6,
724.pure-u-20-24 {
725 width: 83.3333%;
726 *width: 83.3023%;
727}
728
729.pure-u-7-8,
730.pure-u-21-24 {
731 width: 87.5000%;
732 *width: 87.4690%;
733}
734
735.pure-u-11-12,
736.pure-u-22-24 {
737 width: 91.6667%;
738 *width: 91.6357%;
739}
740
741.pure-u-23-24 {
742 width: 95.8333%;
743 *width: 95.8023%;
744}
745
746.pure-u-1,
747.pure-u-1-1,
748.pure-u-5-5,
749.pure-u-24-24 {
750 width: 100%;
751}
752.pure-button {
753 /* Structure */
754 display: inline-block;
755 zoom: 1;
756 line-height: normal;
757 white-space: nowrap;
758 vertical-align: middle;
759 text-align: center;
760 cursor: pointer;
761 -webkit-user-drag: none;
762 -webkit-user-select: none;
763 -moz-user-select: none;
764 -ms-user-select: none;
765 user-select: none;
766 -webkit-box-sizing: border-box;
767 -moz-box-sizing: border-box;
768 box-sizing: border-box;
769}
770
771/* Firefox: Get rid of the inner focus border */
772.pure-button::-moz-focus-inner {
773 padding: 0;
774 border: 0;
775}
776
777/*csslint outline-none:false*/
778
779.pure-button {
780 font-family: inherit;
781 font-size: 100%;
782 padding: 0.5em 1em;
783 color: #444; /* rgba not supported (IE 8) */
784 color: rgba(0, 0, 0, 0.80); /* rgba supported */
785 border: 1px solid #999; /*IE 6/7/8*/
786 border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
787 background-color: #E6E6E6;
788 text-decoration: none;
789 border-radius: 2px;
790}
791
792.pure-button-hover,
793.pure-button:hover,
794.pure-button:focus {
795 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
796 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
797 background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
798 background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
799 background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
800 background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
801}
802.pure-button:focus {
803 outline: 0;
804}
805.pure-button-active,
806.pure-button:active {
807 box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
808 border-color: #000\9;
809}
810
811.pure-button[disabled],
812.pure-button-disabled,
813.pure-button-disabled:hover,
814.pure-button-disabled:focus,
815.pure-button-disabled:active {
816 border: none;
817 background-image: none;
818 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
819 filter: alpha(opacity=40);
820 -khtml-opacity: 0.40;
821 -moz-opacity: 0.40;
822 opacity: 0.40;
823 cursor: not-allowed;
824 box-shadow: none;
825}
826
827.pure-button-hidden {
828 display: none;
829}
830
831/* Firefox: Get rid of the inner focus border */
832.pure-button::-moz-focus-inner{
833 padding: 0;
834 border: 0;
835}
836
837.pure-button-primary,
838.pure-button-selected,
839a.pure-button-primary,
840a.pure-button-selected {
841 background-color: rgb(0, 120, 231);
842 color: #fff;
843}
844
845/*csslint box-model:false*/
846/*
847Box-model set to false because we're setting a height on select elements, which
848also have border and padding. This is done because some browsers don't render
849the padding. We explicitly set the box-model for select elements to border-box,
850so we can ignore the csslint warning.
851*/
852
853.pure-form input[type="text"],
854.pure-form input[type="password"],
855.pure-form input[type="email"],
856.pure-form input[type="url"],
857.pure-form input[type="date"],
858.pure-form input[type="month"],
859.pure-form input[type="time"],
860.pure-form input[type="datetime"],
861.pure-form input[type="datetime-local"],
862.pure-form input[type="week"],
863.pure-form input[type="number"],
864.pure-form input[type="search"],
865.pure-form input[type="tel"],
866.pure-form input[type="color"],
867.pure-form select,
868.pure-form textarea {
869 padding: 0.5em 0.6em;
870 display: inline-block;
871 border: 1px solid #ccc;
872 box-shadow: inset 0 1px 3px #ddd;
873 border-radius: 4px;
874 vertical-align: middle;
875 -webkit-box-sizing: border-box;
876 -moz-box-sizing: border-box;
877 box-sizing: border-box;
878}
879
880/*
881Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
882since IE8 won't execute CSS that contains a CSS3 selector.
883*/
884.pure-form input:not([type]) {
885 padding: 0.5em 0.6em;
886 display: inline-block;
887 border: 1px solid #ccc;
888 box-shadow: inset 0 1px 3px #ddd;
889 border-radius: 4px;
890 -webkit-box-sizing: border-box;
891 -moz-box-sizing: border-box;
892 box-sizing: border-box;
893}
894
895
896/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
897/* May be able to remove this tweak as color inputs become more standardized across browsers. */
898.pure-form input[type="color"] {
899 padding: 0.2em 0.5em;
900}
901
902
903.pure-form input[type="text"]:focus,
904.pure-form input[type="password"]:focus,
905.pure-form input[type="email"]:focus,
906.pure-form input[type="url"]:focus,
907.pure-form input[type="date"]:focus,
908.pure-form input[type="month"]:focus,
909.pure-form input[type="time"]:focus,
910.pure-form input[type="datetime"]:focus,
911.pure-form input[type="datetime-local"]:focus,
912.pure-form input[type="week"]:focus,
913.pure-form input[type="number"]:focus,
914.pure-form input[type="search"]:focus,
915.pure-form input[type="tel"]:focus,
916.pure-form input[type="color"]:focus,
917.pure-form select:focus,
918.pure-form textarea:focus {
919 outline: 0;
920 border-color: #129FEA;
921}
922
923/*
924Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
925since IE8 won't execute CSS that contains a CSS3 selector.
926*/
927.pure-form input:not([type]):focus {
928 outline: 0;
929 border-color: #129FEA;
930}
931
932.pure-form input[type="file"]:focus,
933.pure-form input[type="radio"]:focus,
934.pure-form input[type="checkbox"]:focus {
935 outline: thin solid #129FEA;
936 outline: 1px auto #129FEA;
937}
938.pure-form .pure-checkbox,
939.pure-form .pure-radio {
940 margin: 0.5em 0;
941 display: block;
942}
943
944.pure-form input[type="text"][disabled],
945.pure-form input[type="password"][disabled],
946.pure-form input[type="email"][disabled],
947.pure-form input[type="url"][disabled],
948.pure-form input[type="date"][disabled],
949.pure-form input[type="month"][disabled],
950.pure-form input[type="time"][disabled],
951.pure-form input[type="datetime"][disabled],
952.pure-form input[type="datetime-local"][disabled],
953.pure-form input[type="week"][disabled],
954.pure-form input[type="number"][disabled],
955.pure-form input[type="search"][disabled],
956.pure-form input[type="tel"][disabled],
957.pure-form input[type="color"][disabled],
958.pure-form select[disabled],
959.pure-form textarea[disabled] {
960 cursor: not-allowed;
961 background-color: #eaeded;
962 color: #cad2d3;
963}
964
965/*
966Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
967since IE8 won't execute CSS that contains a CSS3 selector.
968*/
969.pure-form input:not([type])[disabled] {
970 cursor: not-allowed;
971 background-color: #eaeded;
972 color: #cad2d3;
973}
974.pure-form input[readonly],
975.pure-form select[readonly],
976.pure-form textarea[readonly] {
977 background-color: #eee; /* menu hover bg color */
978 color: #777; /* menu text color */
979 border-color: #ccc;
980}
981
982.pure-form input:focus:invalid,
983.pure-form textarea:focus:invalid,
984.pure-form select:focus:invalid {
985 color: #b94a48;
986 border-color: #e9322d;
987}
988.pure-form input[type="file"]:focus:invalid:focus,
989.pure-form input[type="radio"]:focus:invalid:focus,
990.pure-form input[type="checkbox"]:focus:invalid:focus {
991 outline-color: #e9322d;
992}
993.pure-form select {
994 /* Normalizes the height; padding is not sufficient. */
995 height: 2.25em;
996 border: 1px solid #ccc;
997 background-color: white;
998}
999.pure-form select[multiple] {
1000 height: auto;
1001}
1002.pure-form label {
1003 margin: 0.5em 0 0.2em;
1004}
1005.pure-form fieldset {
1006 margin: 0;
1007 padding: 0.35em 0 0.75em;
1008 border: 0;
1009}
1010.pure-form legend {
1011 display: block;
1012 width: 100%;
1013 padding: 0.3em 0;
1014 margin-bottom: 0.3em;
1015 color: #333;
1016 border-bottom: 1px solid #e5e5e5;
1017}
1018
1019.pure-form-stacked input[type="text"],
1020.pure-form-stacked input[type="password"],
1021.pure-form-stacked input[type="email"],
1022.pure-form-stacked input[type="url"],
1023.pure-form-stacked input[type="date"],
1024.pure-form-stacked input[type="month"],
1025.pure-form-stacked input[type="time"],
1026.pure-form-stacked input[type="datetime"],
1027.pure-form-stacked input[type="datetime-local"],
1028.pure-form-stacked input[type="week"],
1029.pure-form-stacked input[type="number"],
1030.pure-form-stacked input[type="search"],
1031.pure-form-stacked input[type="tel"],
1032.pure-form-stacked input[type="color"],
1033.pure-form-stacked input[type="file"],
1034.pure-form-stacked select,
1035.pure-form-stacked label,
1036.pure-form-stacked textarea {
1037 display: block;
1038 margin: 0.25em 0;
1039}
1040
1041/*
1042Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
1043since IE8 won't execute CSS that contains a CSS3 selector.
1044*/
1045.pure-form-stacked input:not([type]) {
1046 display: block;
1047 margin: 0.25em 0;
1048}
1049.pure-form-aligned input,
1050.pure-form-aligned textarea,
1051.pure-form-aligned select,
1052/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
1053.pure-form-aligned .pure-help-inline,
1054.pure-form-message-inline {
1055 display: inline-block;
1056 *display: inline;
1057 *zoom: 1;
1058 vertical-align: middle;
1059}
1060.pure-form-aligned textarea {
1061 vertical-align: top;
1062}
1063
1064/* Aligned Forms */
1065.pure-form-aligned .pure-control-group {
1066 margin-bottom: 0.5em;
1067}
1068.pure-form-aligned .pure-control-group label {
1069 text-align: right;
1070 display: inline-block;
1071 vertical-align: middle;
1072 width: 10em;
1073 margin: 0 1em 0 0;
1074}
1075.pure-form-aligned .pure-controls {
1076 margin: 1.5em 0 0 11em;
1077}
1078
1079/* Rounded Inputs */
1080.pure-form input.pure-input-rounded,
1081.pure-form .pure-input-rounded {
1082 border-radius: 2em;
1083 padding: 0.5em 1em;
1084}
1085
1086/* Grouped Inputs */
1087.pure-form .pure-group fieldset {
1088 margin-bottom: 10px;
1089}
1090.pure-form .pure-group input,
1091.pure-form .pure-group textarea {
1092 display: block;
1093 padding: 10px;
1094 margin: 0 0 -1px;
1095 border-radius: 0;
1096 position: relative;
1097 top: -1px;
1098}
1099.pure-form .pure-group input:focus,
1100.pure-form .pure-group textarea:focus {
1101 z-index: 3;
1102}
1103.pure-form .pure-group input:first-child,
1104.pure-form .pure-group textarea:first-child {
1105 top: 1px;
1106 border-radius: 4px 4px 0 0;
1107 margin: 0;
1108}
1109.pure-form .pure-group input:first-child:last-child,
1110.pure-form .pure-group textarea:first-child:last-child {
1111 top: 1px;
1112 border-radius: 4px;
1113 margin: 0;
1114}
1115.pure-form .pure-group input:last-child,
1116.pure-form .pure-group textarea:last-child {
1117 top: -2px;
1118 border-radius: 0 0 4px 4px;
1119 margin: 0;
1120}
1121.pure-form .pure-group button {
1122 margin: 0.35em 0;
1123}
1124
1125.pure-form .pure-input-1 {
1126 width: 100%;
1127}
1128.pure-form .pure-input-2-3 {
1129 width: 66%;
1130}
1131.pure-form .pure-input-1-2 {
1132 width: 50%;
1133}
1134.pure-form .pure-input-1-3 {
1135 width: 33%;
1136}
1137.pure-form .pure-input-1-4 {
1138 width: 25%;
1139}
1140
1141/* Inline help for forms */
1142/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
1143.pure-form .pure-help-inline,
1144.pure-form-message-inline {
1145 display: inline-block;
1146 padding-left: 0.3em;
1147 color: #666;
1148 vertical-align: middle;
1149 font-size: 0.875em;
1150}
1151
1152/* Block help for forms */
1153.pure-form-message {
1154 display: block;
1155 color: #666;
1156 font-size: 0.875em;
1157}
1158
1159@media only screen and (max-width : 480px) {
1160 .pure-form button[type="submit"] {
1161 margin: 0.7em 0 0;
1162 }
1163
1164 .pure-form input:not([type]),
1165 .pure-form input[type="text"],
1166 .pure-form input[type="password"],
1167 .pure-form input[type="email"],
1168 .pure-form input[type="url"],
1169 .pure-form input[type="date"],
1170 .pure-form input[type="month"],
1171 .pure-form input[type="time"],
1172 .pure-form input[type="datetime"],
1173 .pure-form input[type="datetime-local"],
1174 .pure-form input[type="week"],
1175 .pure-form input[type="number"],
1176 .pure-form input[type="search"],
1177 .pure-form input[type="tel"],
1178 .pure-form input[type="color"],
1179 .pure-form label {
1180 margin-bottom: 0.3em;
1181 display: block;
1182 }
1183
1184 .pure-group input:not([type]),
1185 .pure-group input[type="text"],
1186 .pure-group input[type="password"],
1187 .pure-group input[type="email"],
1188 .pure-group input[type="url"],
1189 .pure-group input[type="date"],
1190 .pure-group input[type="month"],
1191 .pure-group input[type="time"],
1192 .pure-group input[type="datetime"],
1193 .pure-group input[type="datetime-local"],
1194 .pure-group input[type="week"],
1195 .pure-group input[type="number"],
1196 .pure-group input[type="search"],
1197 .pure-group input[type="tel"],
1198 .pure-group input[type="color"] {
1199 margin-bottom: 0;
1200 }
1201
1202 .pure-form-aligned .pure-control-group label {
1203 margin-bottom: 0.3em;
1204 text-align: left;
1205 display: block;
1206 width: 100%;
1207 }
1208
1209 .pure-form-aligned .pure-controls {
1210 margin: 1.5em 0 0 0;
1211 }
1212
1213 /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
1214 .pure-form .pure-help-inline,
1215 .pure-form-message-inline,
1216 .pure-form-message {
1217 display: block;
1218 font-size: 0.75em;
1219 /* Increased bottom padding to make it group with its related input element. */
1220 padding: 0.2em 0 0.8em;
1221 }
1222}
1223
1224/*csslint adjoining-classes: false, box-model:false*/
1225.pure-menu {
1226 -webkit-box-sizing: border-box;
1227 -moz-box-sizing: border-box;
1228 box-sizing: border-box;
1229}
1230
1231.pure-menu-fixed {
1232 position: fixed;
1233 left: 0;
1234 top: 0;
1235 z-index: 3;
1236}
1237
1238.pure-menu-list,
1239.pure-menu-item {
1240 position: relative;
1241}
1242
1243.pure-menu-list {
1244 list-style: none;
1245 margin: 0;
1246 padding: 0;
1247}
1248
1249.pure-menu-item {
1250 padding: 0;
1251 margin: 0;
1252 height: 100%;
1253}
1254
1255.pure-menu-link,
1256.pure-menu-heading {
1257 display: block;
1258 text-decoration: none;
1259 white-space: nowrap;
1260}
1261
1262/* HORIZONTAL MENU */
1263.pure-menu-horizontal {
1264 width: 100%;
1265 white-space: nowrap;
1266}
1267
1268.pure-menu-horizontal .pure-menu-list {
1269 display: inline-block;
1270}
1271
1272/* Initial menus should be inline-block so that they are horizontal */
1273.pure-menu-horizontal .pure-menu-item,
1274.pure-menu-horizontal .pure-menu-heading,
1275.pure-menu-horizontal .pure-menu-separator {
1276 display: inline-block;
1277 *display: inline;
1278 zoom: 1;
1279 vertical-align: middle;
1280}
1281
1282/* Submenus should still be display: block; */
1283.pure-menu-item .pure-menu-item {
1284 display: block;
1285}
1286
1287.pure-menu-children {
1288 display: none;
1289 position: absolute;
1290 left: 100%;
1291 top: 0;
1292 margin: 0;
1293 padding: 0;
1294 z-index: 3;
1295}
1296
1297.pure-menu-horizontal .pure-menu-children {
1298 left: 0;
1299 top: auto;
1300 width: inherit;
1301}
1302
1303.pure-menu-allow-hover:hover > .pure-menu-children,
1304.pure-menu-active > .pure-menu-children {
1305 display: block;
1306 position: absolute;
1307}
1308
1309/* Vertical Menus - show the dropdown arrow */
1310.pure-menu-has-children > .pure-menu-link:after {
1311 padding-left: 0.5em;
1312 content: "\25B8";
1313 font-size: small;
1314}
1315
1316/* Horizontal Menus - show the dropdown arrow */
1317.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
1318 content: "\25BE";
1319}
1320
1321/* scrollable menus */
1322.pure-menu-scrollable {
1323 overflow-y: scroll;
1324 overflow-x: hidden;
1325}
1326
1327.pure-menu-scrollable .pure-menu-list {
1328 display: block;
1329}
1330
1331.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
1332 display: inline-block;
1333}
1334
1335.pure-menu-horizontal.pure-menu-scrollable {
1336 white-space: nowrap;
1337 overflow-y: hidden;
1338 overflow-x: auto;
1339 -ms-overflow-style: none;
1340 -webkit-overflow-scrolling: touch;
1341 /* a little extra padding for this style to allow for scrollbars */
1342 padding: .5em 0;
1343}
1344
1345.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {
1346 display: none;
1347}
1348
1349/* misc default styling */
1350
1351.pure-menu-separator {
1352 background-color: #ccc;
1353 height: 1px;
1354 margin: .3em 0;
1355}
1356
1357.pure-menu-horizontal .pure-menu-separator {
1358 width: 1px;
1359 height: 1.3em;
1360 margin: 0 .3em ;
1361}
1362
1363.pure-menu-heading {
1364 text-transform: uppercase;
1365 color: #565d64;
1366}
1367
1368.pure-menu-link {
1369 color: #777;
1370}
1371
1372.pure-menu-children {
1373 background-color: #fff;
1374}
1375
1376.pure-menu-link,
1377.pure-menu-disabled,
1378.pure-menu-heading {
1379 padding: .5em 1em;
1380}
1381
1382.pure-menu-disabled {
1383 opacity: .5;
1384}
1385
1386.pure-menu-disabled .pure-menu-link:hover {
1387 background-color: transparent;
1388}
1389
1390.pure-menu-active > .pure-menu-link,
1391.pure-menu-link:hover,
1392.pure-menu-link:focus {
1393 background-color: #eee;
1394}
1395
1396.pure-menu-selected .pure-menu-link,
1397.pure-menu-selected .pure-menu-link:visited {
1398 color: #000;
1399}
1400
1401.pure-table {
1402 /* Remove spacing between table cells (from Normalize.css) */
1403 border-collapse: collapse;
1404 border-spacing: 0;
1405 empty-cells: show;
1406 border: 1px solid #cbcbcb;
1407}
1408
1409.pure-table caption {
1410 color: #000;
1411 font: italic 85%/1 arial, sans-serif;
1412 padding: 1em 0;
1413 text-align: center;
1414}
1415
1416.pure-table td,
1417.pure-table th {
1418 border-left: 1px solid #cbcbcb;/* inner column border */
1419 border-width: 0 0 0 1px;
1420 font-size: inherit;
1421 margin: 0;
1422 overflow: visible; /*to make ths where the title is really long work*/
1423 padding: 0.5em 1em; /* cell padding */
1424}
1425
1426/* Consider removing this next declaration block, as it causes problems when
1427there's a rowspan on the first cell. Case added to the tests. issue#432 */
1428.pure-table td:first-child,
1429.pure-table th:first-child {
1430 border-left-width: 0;
1431}
1432
1433.pure-table thead {
1434 background-color: #e0e0e0;
1435 color: #000;
1436 text-align: left;
1437 vertical-align: bottom;
1438}
1439
1440/*
1441striping:
1442 even - #fff (white)
1443 odd - #f2f2f2 (light gray)
1444*/
1445.pure-table td {
1446 background-color: transparent;
1447}
1448.pure-table-odd td {
1449 background-color: #f2f2f2;
1450}
1451
1452/* nth-child selector for modern browsers */
1453.pure-table-striped tr:nth-child(2n-1) td {
1454 background-color: #f2f2f2;
1455}
1456
1457/* BORDERED TABLES */
1458.pure-table-bordered td {
1459 border-bottom: 1px solid #cbcbcb;
1460}
1461.pure-table-bordered tbody > tr:last-child > td {
1462 border-bottom-width: 0;
1463}
1464
1465
1466/* HORIZONTAL BORDERED TABLES */
1467
1468.pure-table-horizontal td,
1469.pure-table-horizontal th {
1470 border-width: 0 0 1px 0;
1471 border-bottom: 1px solid #cbcbcb;
1472}
1473.pure-table-horizontal tbody > tr:last-child > td {
1474 border-bottom-width: 0;
1475}
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index e69de29b..7213c4a4 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -0,0 +1,108 @@
1body {
2 background: url(../img/noise.png) #979797;
3}
4
5header {
6
7}
8
9/**
10 * MENU
11 **/
12.pure-menu {
13 /*position: fixed;*/
14 background: #16a085;
15}
16
17.pure-menu-selected {
18 background: #049372;
19}
20
21.pure-menu-link,
22.pure-menu-link:visited,
23.pure-menu-selected .pure-menu-link,
24.pure-menu-selected .pure-menu-link:visited {
25 color: #b0ddce;
26}
27
28.pure-menu-link:hover,
29.pure-menu-selected .pure-menu-link:hover {
30 color: #fff;
31 background: transparent;
32}
33
34.shaarli-menu {
35 margin-bottom: 1em;
36 -webkit-font-smoothing: antialiased;
37 /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
38 max-height: 2.1em;
39 transition: max-height 0.5s;
40 overflow: hidden;
41}
42
43.shaarli-menu.open {
44 max-height: 500px;
45 transition: max-height 0.75s;
46}
47
48.menu-toggle {
49 width: 34px;
50 height: 34px;
51 position: absolute;
52 top: 0;
53 right: 0;
54 display: none;
55}
56
57.menu-toggle .bar {
58 background-color: #b0ddce;
59 display: block;
60 width: 20px;
61 height: 2px;
62 border-radius: 100px;
63 position: absolute;
64 top: 18px;
65 right: 7px;
66 transition: all 0.5s;
67}
68
69.menu-toggle .bar:first-child {
70 transform: translateY(-6px);
71}
72
73.menu-toggle.x .bar {
74 transform: rotate(45deg);
75}
76
77.menu-toggle.x .bar:first-child {
78 transform: rotate(-45deg);
79}
80
81@media screen and (max-width: 64em) {
82 .menu-toggle {
83 display: block;
84 }
85}
86
87/**
88 * Extends Pure grids responsive to hide items.
89 * Use xx-0 to hide an item on xx screen.
90 * Display it at any level with xx-visible.
91 */
92.pure-u-0 { display: none !important; }
93@media screen and (min-width: 35.5em) {
94 .pure-u-sm-0 { display: none !important; }
95 .pure-u-sm-visible { display: inherit !important; }
96}
97@media screen and (min-width: 48em) {
98 .pure-u-md-0 { display: none !important; }
99 .pure-u-md-visible { display: inherit !important; }
100}
101@media screen and (min-width: 64em) {
102 .pure-u-lg-0 { display: none !important; }
103 .pure-u-lg-visible { display: inherit !important; }
104}
105@media screen and (min-width: 80em) {
106 .pure-u-xl-0 { display: none !important; }
107 .pure-u-xl-visible { display: inherit !important; }
108} \ No newline at end of file
diff --git a/tpl/default/img/noise.png b/tpl/default/img/noise.png
new file mode 100644
index 00000000..8f7fa660
--- /dev/null
+++ b/tpl/default/img/noise.png
Binary files differ
diff --git a/tpl/default/includes.html b/tpl/default/includes.html
index 4f340508..c5b7ee13 100644
--- a/tpl/default/includes.html
+++ b/tpl/default/includes.html
@@ -1,11 +1,12 @@
1<title>{$pagetitle}</title> 1<title>{$pagetitle}</title>
2<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 2<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3<meta name="format-detection" content="telephone=no" /> 3<meta name="format-detection" content="telephone=no" />
4<meta name="viewport" content="width=device-width,initial-scale=1.0" /> 4<meta name="viewport" content="width=device-width, initial-scale=1">
5<link rel="alternate" type="application/rss+xml" href="{$feedurl}?do=rss{$searchcrits}#" title="RSS Feed" /> 5<link rel="alternate" type="application/rss+xml" href="{$feedurl}?do=rss{$searchcrits}#" title="RSS Feed" />
6<link rel="alternate" type="application/atom+xml" href="{$feedurl}?do=atom{$searchcrits}#" title="ATOM Feed" /> 6<link rel="alternate" type="application/atom+xml" href="{$feedurl}?do=atom{$searchcrits}#" title="ATOM Feed" />
7<link href="images/favicon.ico#" rel="shortcut icon" type="image/x-icon" /> 7<link href="images/favicon.ico#" rel="shortcut icon" type="image/x-icon" />
8<link type="text/css" rel="stylesheet" href="css/pure.min.css" /> 8<link type="text/css" rel="stylesheet" href="css/pure.min.css" />
9<link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css">
9<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" /> 10<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
10<link type="text/css" rel="stylesheet" href="css/shaarli.css" /> 11<link type="text/css" rel="stylesheet" href="css/shaarli.css" />
11{if="is_file('inc/user.css')"} 12{if="is_file('inc/user.css')"}
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
new file mode 100644
index 00000000..c401af1d
--- /dev/null
+++ b/tpl/default/js/shaarli.js
@@ -0,0 +1,42 @@
1/**
2 * Handle responsive menu.
3 * Source: http://purecss.io/layouts/tucked-menu-vertical/
4 */
5(function (window, document) {
6 var menu = document.getElementById('shaarli-menu'),
7 WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
8
9 function toggleHorizontal() {
10 [].forEach.call(
11 document.getElementById('shaarli-menu').querySelectorAll('.menu-transform'),
12 function(el){
13 el.classList.toggle('pure-menu-horizontal');
14 }
15 );
16 };
17
18 function toggleMenu() {
19 // set timeout so that the panel has a chance to roll up
20 // before the menu switches states
21 if (menu.classList.contains('open')) {
22 setTimeout(toggleHorizontal, 500);
23 }
24 else {
25 toggleHorizontal();
26 }
27 menu.classList.toggle('open');
28 document.getElementById('menu-toggle').classList.toggle('x');
29 };
30
31 function closeMenu() {
32 if (menu.classList.contains('open')) {
33 toggleMenu();
34 }
35 }
36
37 document.getElementById('menu-toggle').addEventListener('click', function (e) {
38 toggleMenu();
39 });
40
41 window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
42})(this, this.document); \ No newline at end of file
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
new file mode 100644
index 00000000..ca91699e
--- /dev/null
+++ b/tpl/default/linklist.html
@@ -0,0 +1,128 @@
1<!DOCTYPE html>
2<html>
3<head>
4 <link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" />
5 {include="includes"}
6</head>
7<body>
8<div id="pageheader">
9 {include="page.header"}
10
11 <div id="headerform" class="search">
12 <form method="GET" class="searchform" name="searchform">
13 <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text"
14 {if="!empty($search_crits) && $search_type=='fulltext'"}
15 value="{$search_crits}"
16 {/if}
17 >
18 <input type="submit" value="Search" class="bigbutton">
19 </form>
20 <form method="GET" class="tagfilter" name="tagfilter">
21 <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag"
22 {if="!empty($search_crits) && $search_type=='tags'"}
23 value="{function="implode(' ', $search_crits)"}"
24 {/if}
25 autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
26 data-list="{loop="$tags"}{$key}, {/loop}"
27 >
28 <input type="submit" value="Search" class="bigbutton">
29 </form>
30 {loop="$plugins_header.fields_toolbar"}
31 {$value}
32 {/loop}
33 </div>
34</div>
35
36<div id="linklist">
37
38 {include="linklist.paging"}
39
40 <div id="plugin_zone_start_linklist" class="plugin_zone">
41 {loop="$plugin_start_zone"}
42 {$value}
43 {/loop}
44 </div>
45
46 {if="count($links)==0"}
47 <div id="searchcriteria">Nothing found.</i></div>
48 {else}
49 {if="$search_type=='fulltext'"}
50 <div id="searchcriteria">{$result_count} results for <i>{$search_crits}</i></div>
51 {/if}
52 {if="$search_type=='tags'"}
53 <div id="searchcriteria">{$result_count} results for tags <i>
54 {loop="search_crits"}
55 <span class="linktag" title="Remove tag">
56 <a href="?removetag={function="urlencode($value)"}">{$value} <span class="remove">x</span></a>
57 </span>
58 {/loop}</i></div>
59 {/if}
60 {/if}
61 <ul>
62 {loop="links"}
63 <li{if="$value.class"} class="{$value.class}"{/if}>
64 <a id="{$value.shorturl}"></a>
65 <div class="thumbnail">{$value.url|thumbnail}</div>
66 <div class="linkcontainer">
67 {if="isLoggedIn()"}
68 <div class="linkeditbuttons">
69 <form method="GET" class="buttoneditform">
70 <input type="hidden" name="edit_link" value="{$value.linkdate}">
71 <input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit">
72 </form><br>
73 <form method="POST" class="buttoneditform">
74 <input type="hidden" name="lf_linkdate" value="{$value.linkdate}">
75 <input type="hidden" name="token" value="{$token}">
76 <input type="hidden" name="delete_link">
77 <input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete"
78 class="button_delete" onClick="return confirmDeleteLink();">
79 </form>
80 </div>
81 {/if}
82 <span class="linktitle">
83 <a href="{$value.real_url}">{$value.title}</a>
84 </span>
85 <br>
86 {if="$value.description"}<div class="linkdescription">{$value.description}</div>{/if}
87 {if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"}
88 <span class="linkdate" title="Permalink"><a href="?{$value.linkdate|smallHash}">{function="strftime('%c', $value.timestamp)"} - permalink</a> - </span>
89 {else}
90 <span class="linkdate" title="Short link here"><a href="?{$value.shorturl}">permalink</a> - </span>
91 {/if}
92
93 {loop="$value.link_plugin"}
94 <span>{$value}</span> -
95 {/loop}
96
97 <a href="{$value.real_url}"><span class="linkurl" title="Short link">{$value.url}</span></a><br>
98 {if="$value.tags"}
99 <div class="linktaglist">
100 {loop="value.taglist"}<span class="linktag" title="Add tag"><a href="?addtag={$value|urlencode}">{$value}</a></span> {/loop}
101 </div>
102 {/if}
103
104
105 </div>
106 </li>
107 {/loop}
108 </ul>
109
110 <div id="plugin_zone_end_linklist" class="plugin_zone">
111 {loop="$plugin_end_zone"}
112 {$value}
113 {/loop}
114 </div>
115
116 {include="linklist.paging"}
117
118</div>
119
120 {include="page.footer"}
121
122<script src="inc/awesomplete.min.js#"></script>
123<script src="inc/awesomplete-multiple-tags.js#"></script>
124<script>
125 awesompleteUniqueTag('#tagfilter_value');
126</script>
127</body>
128</html>
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
new file mode 100644
index 00000000..e91c8f86
--- /dev/null
+++ b/tpl/default/linklist.paging.html
@@ -0,0 +1,25 @@
1<div class="paging">
2{if="isLoggedIn()"}
3 <div class="paging_privatelinks">
4 <a href="?privateonly">
5 {if="$privateonly"}
6 <img src="images/private_16x16_active.png#" width="16" height="16" title="Click to see all links" alt="Click to see all links">
7 {else}
8 <img src="images/private_16x16.png#" width="16" height="16" title="Click to see only private links" alt="Click to see only private links">
9 {/if}
10 </a>
11
12
13 </div>
14{/if}
15 {loop="$action_plugin"}
16 {$value}
17 {/loop}
18 <div class="paging_linksperpage">
19 Links per page: <a href="?linksperpage=20">20</a> <a href="?linksperpage=50">50</a> <a href="?linksperpage=100">100</a>
20 <form method="GET" class="linksperpage"><input type="text" name="linksperpage" size="2"></form>
21 </div>
22 {if="$previous_page_url"} <a href="{$previous_page_url}" class="paging_older">&#x25C4;Older</a> {/if}
23 <div class="paging_current">page {$page_current} / {$page_max} </div>
24 {if="$next_page_url"} <a href="{$next_page_url}" class="paging_newer">Newer&#x25BA;</a> {/if}
25</div>
diff --git a/tpl/default/page.footer.html b/tpl/default/page.footer.html
new file mode 100644
index 00000000..8e380087
--- /dev/null
+++ b/tpl/default/page.footer.html
@@ -0,0 +1,31 @@
1<div id="footer">
2 <b><a href="https://github.com/shaarli/Shaarli">Shaarli</a></b> - The personal, minimalist, super-fast, no-database delicious clone by the <a href="https://github.com/shaarli/Shaarli">Shaarli</a> community - <a href="doc/Home.html">Help/documentation</a>
3 {loop="$plugins_footer.text"}
4 {$value}
5 {/loop}
6</div>
7
8{loop="$plugins_footer.endofpage"}
9 {$value}
10{/loop}
11
12{if="$newVersion"}
13<div id="newversion">
14 <span id="version_id">&#x25CF;</span> Shaarli {$newVersion} is
15 <a href="https://github.com/shaarli/Shaarli/releases">available</a>.
16</div>
17{/if}
18{if="$versionError"}
19<div id="newversion">
20 Error: {$versionError}
21</div>
22{/if}
23{if="isLoggedIn()"}
24<script>function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script>
25{/if}
26
27{loop="$plugins_footer.js_files"}
28 <script src="{$value}#"></script>
29{/loop}
30
31<script src="js/shaarli.js"></script> \ No newline at end of file
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
new file mode 100644
index 00000000..9a4ecd85
--- /dev/null
+++ b/tpl/default/page.header.html
@@ -0,0 +1,128 @@
1<div class="shaarli-menu pure-g" id="shaarli-menu">
2 <div class="pure-u-lg-0 pure-u-1">
3 <div class="pure-menu">
4 <a href="{if="!empty($GLOBALS['titleLink'])"}{$GLOBALS['titleLink']}{else}?{/if}"
5 class="pure-menu-link">
6 <i class="fa fa-home"></i>
7 </a>
8 <a href="#" class="menu-toggle" id="menu-toggle"><s class="bar"></s><s class="bar"></s></a>
9 </div>
10 </div>
11 <div class="pure-u-1">
12 <div class="pure-menu menu-transform pure-menu-horizontal">
13 <ul class="pure-menu-list">
14 <li class="pure-menu-item pure-menu-selected pure-u-0 pure-u-lg-visible">
15 <a href="{if="!empty($GLOBALS['titleLink'])"}{$GLOBALS['titleLink']}{else}?{/if}"
16 class="pure-menu-link">
17 <i class="fa fa-home"></i>
18 </a>
19 </li>
20 {if="isLoggedIn()"}
21 <li class="pure-menu-item">
22 <a href="?do=addlink" class="pure-menu-link">Shaare</a>
23 </li>
24 <li class="pure-menu-item">
25 <a href="?do=tools" class="pure-menu-link">Tools</a>
26 </li>
27
28 {elseif="$GLOBALS['config']['OPEN_SHAARLI']"}
29 <li class="pure-menu-item">
30 <a href="?do=addlink" class="pure-menu-link">Shaare</a>
31 </li>
32 <li class="pure-menu-item">
33 <a href="?do=tools" class="pure-menu-link">Tools</a>
34 </li>
35 {else}
36 <li class="pure-menu-item">
37 <a href="?do=login" class="pure-menu-link">Login</a>
38 </li>
39 {/if}
40 <li class="pure-menu-item">
41 <a href="{$feedurl}?do=rss{$searchcrits}" class="pure-menu-link">RSS Feed</a>
42 </li>
43 {if="$GLOBALS['config']['SHOW_ATOM']"}
44 <li class="pure-menu-item">
45 <a href="{$feedurl}?do=atom{$searchcrits}" class="pure-menu-link">ATOM Feed</a>
46 </li>
47 {/if}
48 <li class="pure-menu-item">
49 <a href="?do=tagcloud" class="pure-menu-link">Tag cloud</a>
50 </li>
51 <li class="pure-menu-item">
52 <a href="?do=picwall{$searchcrits}" class="pure-menu-link">Picture wall</a>
53 </li>
54 <li class="pure-menu-item">
55 <a href="?do=daily" class="pure-menu-link">Daily</a>
56 </li>
57 <!-- FIXME! update plugin system to handle this -->
58 {loop="$plugins_header.buttons_toolbar"}
59 <li class="pure-menu-item">
60 <a href="{$value.url}" class="pure-menu-link">{$value.title}</a>
61 </li>
62 {/loop}
63 {if="isLoggedIn()"}
64 <li class="pure-menu-item">
65 <a href="?do=logout" class="pure-menu-link">Logout</a>
66 </li>
67 {else}
68 <li class="pure-menu-item">
69 <a href="?do=login" class="pure-menu-link">Login</a>
70 </li>
71 {/if}
72 </ul>
73 </div>
74 </div>
75</div>
76
77<div id="logo" title="Share your links !" onclick="document.location='?';"></div>
78
79<div id="linkcount" class="nomobile">
80 {if="!empty($linkcount)"}{$linkcount} links{/if}
81</div>
82
83<div id="menu">
84 <ul>
85 <li><span id="shaarli_title">
86 <a href="{$titleLink}">{$shaarlititle}</a>
87 </span>
88 </li>
89
90{if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}
91 {ignore} When called as a popup from bookmarklet, do not display menu. {/ignore}
92{else}
93<li><a href="?" class="nomobile">Home</a></li>
94 {if="isLoggedIn()"}
95 <li><a href="?do=logout">Logout</a></li>
96 <li><a href="?do=tools">Tools</a></li>
97 <li><a href="?do=addlink">Add link</a></li>
98 {elseif="$GLOBALS['config']['OPEN_SHAARLI']"}
99 <li><a href="?do=tools">Tools</a></li>
100 <li><a href="?do=addlink">Add link</a></li>
101 {else}
102 <li><a href="?do=login">Login</a></li>
103 {/if}
104 <li><a href="{$feedurl}?do=rss{$searchcrits}" class="nomobile">RSS Feed</a></li>
105 {if="$GLOBALS['config']['SHOW_ATOM']"}
106 <li><a href="{$feedurl}?do=atom{$searchcrits}" class="nomobile">ATOM Feed</a></li>
107 {/if}
108 <li><a href="?do=tagcloud">Tag cloud</a></li>
109 <li><a href="?do=picwall{$searchcrits}">Picture wall</a></li>
110 <li><a href="?do=daily">Daily</a></li>
111 {loop="$plugins_header.buttons_toolbar"}
112 {$value}
113 {/loop}
114{/if}
115 </ul>
116</div>
117
118{if="!empty($plugin_errors) && isLoggedIn()"}
119 <ul class="errors">
120 {loop="plugin_errors"}
121 <li>{$value}</li>
122 {/loop}
123 </ul>
124{/if}
125
126<div class="clear"></div>
127
128