aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default
diff options
context:
space:
mode:
Diffstat (limited to 'tpl/default')
-rw-r--r--tpl/default/addlink.html6
-rw-r--r--tpl/default/changepassword.html5
-rw-r--r--tpl/default/changetag.html5
-rw-r--r--tpl/default/css/shaarli.css366
-rw-r--r--tpl/default/daily.html2
-rw-r--r--tpl/default/js/shaarli.js63
-rw-r--r--tpl/default/linklist.html23
-rw-r--r--tpl/default/page.header.html42
-rw-r--r--tpl/default/tools.html12
9 files changed, 193 insertions, 331 deletions
diff --git a/tpl/default/addlink.html b/tpl/default/addlink.html
index e4208008..2d66c381 100644
--- a/tpl/default/addlink.html
+++ b/tpl/default/addlink.html
@@ -7,11 +7,11 @@
7{include="page.header"} 7{include="page.header"}
8<div class="pure-g"> 8<div class="pure-g">
9 <div class="pure-u-lg-1-3 pure-u-1-8"></div> 9 <div class="pure-u-lg-1-3 pure-u-1-8"></div>
10 <div id="addlink-form" class="page-form pure-u-lg-1-3 pure-u-3-4"> 10 <div id="addlink-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-3-4">
11 <h2 class="window-title">{"Shaare a new link"|t}</h2> 11 <h2 class="window-title">{"Shaare a new link"|t}</h2>
12 <form method="GET" action="#" name="addform" class="addform page-form page-form-light autofocus"> 12 <form method="GET" action="#" name="addform" class="addform">
13 <div> 13 <div>
14 <input type="text" name="post" placeholder="{'URL or leave empty to post a note'|t}"> 14 <input type="text" name="post" placeholder="{'URL or leave empty to post a note'|t}" class="autofocus">
15 </div> 15 </div>
16 <div> 16 <div>
17 <input type="submit" value="{'Add link'|t}"> 17 <input type="submit" value="{'Add link'|t}">
diff --git a/tpl/default/changepassword.html b/tpl/default/changepassword.html
index bff33c0c..7196cccd 100644
--- a/tpl/default/changepassword.html
+++ b/tpl/default/changepassword.html
@@ -7,10 +7,9 @@
7{include="page.header"} 7{include="page.header"}
8<div class="pure-g"> 8<div class="pure-g">
9 <div class="pure-u-lg-1-3 pure-u-1-8"></div> 9 <div class="pure-u-lg-1-3 pure-u-1-8"></div>
10 <div id="addlink-form" class="page-form pure-u-lg-1-3 pure-u-3-4"> 10 <div id="addlink-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-3-4">
11 <h2 class="window-title">{"Change password"|t}</h2> 11 <h2 class="window-title">{"Change password"|t}</h2>
12 <form method="POST" action="#" name="changepasswordform" id="changepasswordform" 12 <form method="POST" action="#" name="changepasswordform" id="changepasswordform">
13 class="addform page-form page-form-light">
14 <div> 13 <div>
15 <input type="password" name="oldpassword" placeholder="{'Current password'|t}" class="autofocus"> 14 <input type="password" name="oldpassword" placeholder="{'Current password'|t}" class="autofocus">
16 </div> 15 </div>
diff --git a/tpl/default/changetag.html b/tpl/default/changetag.html
index ea8dc1b4..5d5d8c96 100644
--- a/tpl/default/changetag.html
+++ b/tpl/default/changetag.html
@@ -7,10 +7,9 @@
7{include="page.header"} 7{include="page.header"}
8<div class="pure-g"> 8<div class="pure-g">
9 <div class="pure-u-lg-1-3 pure-u-1-8"></div> 9 <div class="pure-u-lg-1-3 pure-u-1-8"></div>
10 <div id="addlink-form" class="page-form pure-u-lg-1-3 pure-u-3-4"> 10 <div id="addlink-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-3-4">
11 <h2 class="window-title">{"Manage tags"|t}</h2> 11 <h2 class="window-title">{"Manage tags"|t}</h2>
12 <form method="POST" action="#" name="changetag" id="changetag" 12 <form method="POST" action="#" name="changetag" id="changetag">
13 class="addform page-form page-form-light">
14 <div> 13 <div>
15 <input type="text" name="fromtag" placeholder="{'Tag'|t}" 14 <input type="text" name="fromtag" placeholder="{'Tag'|t}"
16 list="tagsList" autocomplete="off" class="awesomplete autofocus" data-minChars="1"> 15 list="tagsList" autocomplete="off" class="awesomplete autofocus" data-minChars="1">
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index f717b99a..ae0d5807 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -2,7 +2,7 @@
2 * General 2 * General
3 */ 3 */
4body { 4body {
5 background: url(../img/noise.png) #979797; 5 background: url(../img/noise.png) #c5c5c5;
6} 6}
7 7
8.strong { 8.strong {
@@ -116,14 +116,15 @@ pre {
116.pure-menu-link:visited, 116.pure-menu-link:visited,
117.pure-menu-selected .pure-menu-link, 117.pure-menu-selected .pure-menu-link,
118.pure-menu-selected .pure-menu-link:visited { 118.pure-menu-selected .pure-menu-link:visited {
119 color: #b0ddce; 119 color: #f5f5f5;
120} 120}
121 121
122.pure-menu-link:hover, .pure-menu-link:focus, 122.pure-menu-link:hover, .pure-menu-link:focus,
123.pure-menu-selected .pure-menu-link:hover, 123.pure-menu-selected .pure-menu-link:hover,
124.pure-menu-selected .pure-menu-link:focus { 124.pure-menu-selected .pure-menu-link:focus {
125 color: #d1fff0; 125 color: #fff;
126 background: transparent; 126 background: transparent;
127
127} 128}
128 129
129.menu-toggle { 130.menu-toggle {
@@ -165,43 +166,6 @@ pre {
165 } 166 }
166} 167}
167 168
168/**
169 * Header
170 */
171#header {
172 width: 100%;
173 height: 150px;
174 background: url(../img/noise.png), #979797 url(../img/logo.png) no-repeat 10px 2.5em;
175}
176
177#header h1 {
178 float: left;
179 margin: 45px 0 0 125px;
180 width: 55%;
181 height: 100px;
182}
183
184#header h1 a, #header h1 a:visited {
185 /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */
186 display: -ms-flexbox;
187 display: flex;
188 flex-direction: column;
189 justify-content: center;
190
191 overflow: hidden;
192 height: 100px;
193 color: #252525;
194 text-decoration: none;
195 z-index: 1;
196
197 font-family: Roboto Slab, Arial, sans-serif;
198 font-size: 1.2em;
199}
200
201#header h1 a:hover {
202 color: #fff;
203}
204
205.header-buttons { 169.header-buttons {
206 text-align: right; 170 text-align: right;
207} 171}
@@ -212,23 +176,24 @@ pre {
212} 176}
213 177
214#search { 178#search {
215 margin-top: 5px; 179 position: fixed;
180 width: 100%;
216} 181}
217 182
218#search input[type="text"] { 183#search input[type="text"] {
219 width: 250px; 184 width: 250px;
220 color: #b0ddce; 185 color: #252525;
221} 186}
222 187
223/* because chrome */ 188/* because chrome */
224#search input[type="text"]::-webkit-input-placeholder { 189#search input[type="text"]::-webkit-input-placeholder {
225 color: #b0ddce; 190 color: #252525;
226} 191}
227 192
228#search button { 193#search button {
229 background: transparent; 194 background: transparent;
230 border: none; 195 border: none;
231 color: #b0ddce; 196 color: #f5f5f5;
232} 197}
233 198
234#search button:hover { 199#search button:hover {
@@ -246,65 +211,37 @@ pre {
246 text-align: left; 211 text-align: left;
247 } 212 }
248} 213}
249 214@media screen and (max-width: 64em) {
250 215 #search {
251 216 position: relative;
252#header-login-form { 217 height: 60px;
253 height: 0; 218 }
254 transition: 0.3s;
255}
256
257#header-login-form.open {
258 display: block;
259 height: 30px;
260 padding: 5px 0;
261} 219}
262 220
263#header-login-form input[type="text"], #header-login-form input[type="password"] { 221#header-login-form input[type="text"], #header-login-form input[type="password"] {
264 width: 200px; 222 width: 200px;
265} 223}
266 224
267#header-login-form input, #header-login-form .remember-me {
268 transition: visibility 1s, opacity 1s;
269 visibility: hidden;
270 opacity: 0;
271}
272
273#header-login-form.open input, #header-login-form.open .remember-me {
274 visibility: visible;
275 opacity: 1;
276}
277
278.subheader-form { 225.subheader-form {
226 visibility: hidden;
227 position: fixed;
228 width: 100%;
279 text-align: center; 229 text-align: center;
280 background: #1b926c; 230 background: #1b926c;
281 display: block; 231 display: block;
282 //transition: 0.3s; 232 z-index: 9999;
233 height: 30px;
234 padding: 5px 0;
283} 235}
284 236
285@media screen and (min-width: 64em) { 237@media screen and (min-width: 64em) {
286 238 .subheader-form.open, .subheader-form.open * {
287 .subheader-form.closed {
288 height: 0;
289 }
290
291 .subheader-form.open {
292 height: 30px;
293 padding: 5px 0;
294 }
295
296 .subheader-form * {
297 --transition: visibility 1s, opacity 1s;
298 }
299
300 .subheader-form.open * {
301 visibility: visible; 239 visibility: visible;
302 opacity: 1;
303 } 240 }
304 241}
305 .subheader-form.closed * { 242@media screen and (max-width: 64em) {
306 visibility: hidden; 243 #search.subheader-form, .subheader-form.open * {
307 opacity: 0; 244 visibility: visible;
308 } 245 }
309} 246}
310 247
@@ -313,18 +250,18 @@ pre {
313 padding: 5px 5px 3px 15px; 250 padding: 5px 5px 3px 15px;
314 height: 20px; 251 height: 20px;
315 width: 20%; 252 width: 20%;
316 background: #1fa67a; 253 background: #f5f5f5;
317 border: medium none currentColor; 254 border: medium none currentColor;
318 border-radius: 25px; 255 border-radius: 5px;
319 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; 256 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
320 color: #b0ddce; 257 color: #252525;
321} 258}
322 259
323/* because chrome */ 260/* because chrome */
324.subheader-form input[type="text"]::-webkit-input-placeholder, 261.subheader-form input[type="text"]::-webkit-input-placeholder,
325.subheader-form input[type="password"]::-webkit-input-placeholder 262.subheader-form input[type="password"]::-webkit-input-placeholder
326{ 263{
327 color: #b0ddce; 264 color: #252525;
328} 265}
329 266
330.subheader-form .remember-me { 267.subheader-form .remember-me {
@@ -345,9 +282,8 @@ pre {
345 width: 100px; 282 width: 100px;
346 background: #0C7653; 283 background: #0C7653;
347 border: medium none currentColor; 284 border: medium none currentColor;
348 border-radius: 25px;
349 box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E; 285 box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E;
350 color: #b0ddce; 286 color: #f5f5f5;
351} 287}
352 288
353.new-version-message { 289.new-version-message {
@@ -365,7 +301,6 @@ pre {
365#content { 301#content {
366 position: relative; 302 position: relative;
367 z-index: 2; 303 z-index: 2;
368 background: url(../img/noise.png) #979797;
369} 304}
370 305
371@media screen and (max-width: 64em) { 306@media screen and (max-width: 64em) {
@@ -397,7 +332,7 @@ pre {
397 332
398.linklist-filters .filter-off { 333.linklist-filters .filter-off {
399 color: #252525; 334 color: #252525;
400 background: #c8c8c8; 335 background: #f5f5f5;
401} 336}
402 337
403.linklist-filters .filter-on { 338.linklist-filters .filter-on {
@@ -431,8 +366,7 @@ pre {
431 padding: 2px 5px; 366 padding: 2px 5px;
432 text-decoration: none; 367 text-decoration: none;
433 color: #252525; 368 color: #252525;
434 background: #c8c8c8; 369 background: #f5f5f5;
435 border: solid 1px #979797;
436} 370}
437 371
438.linksperpage form { 372.linksperpage form {
@@ -442,13 +376,11 @@ pre {
442 376
443.linksperpage input[type="text"] { 377.linksperpage input[type="text"] {
444 width: 28px; 378 width: 28px;
445 height: 16px; 379 height: 12px;
446 margin: 0; 380 margin: 0;
447 padding: 3px 5px 3px 8px; 381 padding: 3px 5px 3px 8px;
448 background: #c8c8c8; 382 background: #f5f5f5;
449 border: medium none currentColor; 383 border: medium none currentColor;
450 --border-radius: 25px;
451 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
452 color: #252525; 384 color: #252525;
453 font-size: 0.8em; 385 font-size: 0.8em;
454} 386}
@@ -457,7 +389,7 @@ pre {
457 * CONTENT - LINKLIST ITEMS 389 * CONTENT - LINKLIST ITEMS
458 */ 390 */
459.linklist-item { 391.linklist-item {
460 margin: 15px 0; 392 margin: 0 0 15px 0;
461 background: #f5f5f5; 393 background: #f5f5f5;
462 box-shadow: 2px 2px 0.5em #797979; 394 box-shadow: 2px 2px 0.5em #797979;
463} 395}
@@ -468,9 +400,7 @@ pre {
468} 400}
469 401
470.linklist-item-title { 402.linklist-item-title {
471 background: #20b988 url(../img/noise.png); 403 background: #f5f5f5;
472 border-bottom: 1px solid #1b926c;
473 box-shadow: 1px 1px 0.2em #1b926c;
474} 404}
475 405
476.linklist-item-title h2 { 406.linklist-item-title h2 {
@@ -480,31 +410,45 @@ pre {
480 410
481.linklist-item-title a { 411.linklist-item-title a {
482 font-size: 0.7em; 412 font-size: 0.7em;
483 color: #d0fff0; 413 color: #252525;
484 text-decoration: none; 414 text-decoration: none;
485 vertical-align: middle; 415 vertical-align: middle;
486 font-family: Roboto Slab, Arial, sans-serif; 416 font-family: Roboto Slab, Arial, sans-serif;
487} 417}
488 418
419.linklist-item-title .linklist-link {
420 color: #1b926c;
421}
422
489.linklist-item-title .linklist-link:visited { 423.linklist-item-title .linklist-link:visited {
490 color: #ddd; 424 color: #1b926c;
491} 425}
492 426
493.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{ 427.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
494 color: #fff; 428 color: #252525;
495} 429}
496 430
497 431
498.linklist-item-title .label-private { 432.linklist-item-title .label-private {
499 border: solid 1px #d0fff0; 433 border: solid 1px #F89406;
500 font-family: Arial, sans-serif; 434 font-family: Arial, sans-serif;
501 font-size: 0.65em; 435 font-size: 0.65em;
436 color: #F89406;
502} 437}
503 438
504.linklist-item-title .fold-button { 439.linklist-item-title .fold-button {
505 display: none; 440 display: none;
506} 441}
507 442
443.linklist-item-title:after {
444 display: block;
445 content:"";
446 background: linear-gradient(to right, #f5f5f5, #8e8e8e, #f5f5f5);
447 height: 1px;
448 width: 90%;
449 margin: 1px auto 0 auto;
450}
451
508.linklist-item-editbuttons { 452.linklist-item-editbuttons {
509 float: right; 453 float: right;
510 padding: 5px; 454 padding: 5px;
@@ -514,10 +458,22 @@ pre {
514 font-size: 1em; 458 font-size: 1em;
515} 459}
516 460
461.edit-link {
462 font-size: 1.2em;
463 color: #0b5ea6;
464}
465
466.delete-link {
467 font-size: 1.1em;
468 color: #ac2925 !important;
469}
470
517.linklist-item-description { 471.linklist-item-description {
518 padding: 10px; 472 padding: 10px;
473 background: #f5f5f5;
519 font-family: Roboto Slab, Arial, sans-serif; 474 font-family: Roboto Slab, Arial, sans-serif;
520 word-wrap: break-word; 475 word-wrap: break-word;
476 color: #252525;
521} 477}
522 478
523.linklist-item-description a { 479.linklist-item-description a {
@@ -526,11 +482,11 @@ pre {
526} 482}
527 483
528.linklist-item-description a:hover { 484.linklist-item-description a:hover {
529 text-shadow: 1px 1px #ddd; 485 color: #252525;
530} 486}
531 487
532.linklist-item-description a:visited { 488.linklist-item-description a:visited {
533 color: #20b988; 489 color: #14553f;
534} 490}
535 491
536.linklist-item-thumbnail { 492.linklist-item-thumbnail {
@@ -541,9 +497,7 @@ pre {
541 497
542.linklist-item-infos { 498.linklist-item-infos {
543 padding: 5px 5px 0 5px; 499 padding: 5px 5px 0 5px;
544 background: #ddd url(../img/noise.png); 500 background: #ddd;
545 border-top: 1px solid #989898;
546 box-shadow: 1px -1px 0.2em #989898;
547 color: #252525; 501 color: #252525;
548} 502}
549 503
@@ -561,7 +515,7 @@ pre {
561 font-size: 0.8em; 515 font-size: 0.8em;
562} 516}
563 517
564.linklist-item-infos .linklist-item-infos .label-tag { 518.linklist-item-infos .label-tag {
565 border: 1px solid #505050; 519 border: 1px solid #505050;
566 font-size: 0.9em; 520 font-size: 0.9em;
567} 521}
@@ -622,21 +576,28 @@ pre {
622 */ 576 */
623.page-form { 577.page-form {
624 margin: 20px 0 0 0; 578 margin: 20px 0 0 0;
625 background: url(../img/noise.png) #1fa67a; 579 padding: 0 10px 0 10px;
626 border-radius: 5px; 580 background: #f5f5f5;
627 box-shadow: 1px 1px 2px #797979; 581 box-shadow: 1px 1px 2px #797979;
628 color: #b0ddce; 582 color: #252525;
629} 583}
630 584
631.page-form .window-title { 585.page-form .window-title {
632 margin: 0 0 10px 0; 586 margin: 0 0 10px 0;
633 padding: 10px 0; 587 padding: 10px 0;
634 width: 100%; 588 width: 100%;
635 color: #b0ddce; 589 color: #1b926c;
636 background: #1b926c; 590 background: #f5f5f5;
637 text-align: center; 591 text-align: center;
638 border-radius: 5px 5px 0 0; 592}
639 border-bottom: 1px solid #797979; 593
594.page-form .window-title:after {
595 display: block;
596 content:"";
597 background: linear-gradient(to right, #f5f5f5, #1b926c, #f5f5f5);
598 height: 1px;
599 width: 80%;
600 margin: auto;
640} 601}
641 602
642.page-form .window-subtitle { 603.page-form .window-subtitle {
@@ -644,7 +605,7 @@ pre {
644} 605}
645 606
646.page-form a { 607.page-form a {
647 color: #b0ddce; 608 color: #1b926c;
648 font-weight: bold; 609 font-weight: bold;
649} 610}
650 611
@@ -655,11 +616,11 @@ pre {
655 padding: 5px 5px 3px 15px; 616 padding: 5px 5px 3px 15px;
656 height: 30px; 617 height: 30px;
657 width: 80%; 618 width: 80%;
658 background: #1b926c; 619 background: #f5f5f5;
659 border: medium none currentColor; 620 border: medium none currentColor;
660 border-radius: 25px; 621 border-radius: 5px;
661 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; 622 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
662 color: #b0ddce; 623 color: #252525;
663} 624}
664 625
665.page-form textarea { 626.page-form textarea {
@@ -673,7 +634,7 @@ pre {
673/* because chrome */ 634/* because chrome */
674.page-form input[type="text"]::-webkit-input-placeholder, 635.page-form input[type="text"]::-webkit-input-placeholder,
675.page-form input[type="password"]::-webkit-input-placeholder { 636.page-form input[type="password"]::-webkit-input-placeholder {
676 color: #b0ddce; 637 color: #252525;
677} 638}
678 639
679.page-form input[type="submit"] { 640.page-form input[type="submit"] {
@@ -681,16 +642,14 @@ pre {
681 height: 35px; 642 height: 35px;
682 width: 150px; 643 width: 150px;
683 background: #1b926c; 644 background: #1b926c;
684 border: medium none currentColor; 645 border: none;
685 border-radius: 25px; 646 box-shadow: 1px 1px 1px #ddd, -1px -1px 6px #ddd, -1px 1px 2px #ddd, 1px -1px 2px #ddd;
686 box-shadow: 1px 1px 4px #0C7653, -1px -1px 6px #0C7653, -1px 1px 6px #0C7653, 1px -1px 6px #0C7653;
687 font-size: 1.2em; 647 font-size: 1.2em;
688 font-weight: bold; 648 color: #f5f5f5;
689 color: #b0ddce;
690} 649}
691 650
692.page-form select { 651.page-form select {
693 color: black; 652 color: #252525;
694} 653}
695 654
696/** 655/**
@@ -704,11 +663,11 @@ pre {
704 * PAGE FORM - COMPLETE 663 * PAGE FORM - COMPLETE
705 */ 664 */
706.page-form-complete { 665.page-form-complete {
707 #background: #ddd; 666 #background: #f5f5f5;
708} 667}
709 668
710.page-form-complete div, .page-form-complete p { 669.page-form-complete div, .page-form-complete p {
711 color: #b0ddce; 670 color: #252525;
712} 671}
713 672
714.page-form-complete .form-label, .page-form-complete .form-input { 673.page-form-complete .form-label, .page-form-complete .form-input {
@@ -827,8 +786,7 @@ pre {
827 * Page visitor (page form extended) 786 * Page visitor (page form extended)
828 */ 787 */
829.page-visitor { 788.page-visitor {
830 background: url(../img/noise.png) #fff; 789 color: #252525;
831 color: #000;
832} 790}
833 791
834#page404 { 792#page404 {
@@ -840,128 +798,6 @@ pre {
840 */ 798 */
841#login-form .remember-me { 799#login-form .remember-me {
842 margin: 5px 0; 800 margin: 5px 0;
843 color: #b0ddce;
844 font-weight: bold;
845}
846
847/**
848 * CONTENT - LINKLIST ITEMS
849 */
850.linklist-item {
851 margin: 15px 0;
852 background: #f5f5f5;
853 box-shadow: 2px 2px 0.5em #797979;
854}
855
856.linklist-item-title, .linklist-item-title h2 {
857 margin: 0;
858}
859
860.linklist-item-title {
861 background: #20b988 url(../img/noise.png);
862 border-bottom: 1px solid #1b926c;
863 box-shadow: 1px 1px 0.2em #1b926c;
864}
865
866.linklist-item-title h2 {
867 padding: 3px 10px 0 10px;
868 line-height: 25px;
869}
870
871.linklist-item-title a {
872 font-size: 0.7em;
873 color: #d0fff0;
874 text-decoration: none;
875 vertical-align: middle;
876 font-family: Roboto Slab, Arial, sans-serif;
877}
878
879.linklist-item-title .linklist-link:visited {
880 color: #ddd;
881}
882
883.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
884 color: #fff;
885}
886
887.linklist-item-title .label-private {
888 border: solid 1px #d0fff0;
889 font-family: Arial, sans-serif;
890 font-size: 0.65em;
891}
892
893.linklist-item-title .fold-button {
894 display: none;
895}
896
897.linklist-item-editbuttons {
898 float: right;
899 padding: 5px;
900}
901
902.linklist-item-editbuttons a {
903 font-size: 1em;
904}
905
906.linklist-item-description {
907 padding: 10px;
908 font-family: Roboto Slab, Arial, sans-serif;
909}
910
911.linklist-item-description a {
912 text-decoration: none;
913 color: #1b926c;
914}
915
916.linklist-item-description a:hover {
917 text-shadow: 1px 1px #ddd;
918}
919
920.linklist-item-description a:visited {
921 color: #20b988;
922}
923
924.linklist-item-infos {
925 padding: 5px;
926 background: #ddd url(../img/noise.png);
927 border-top: 1px solid #989898;
928 box-shadow: 1px -1px 0.2em #989898;
929 color: #252525;
930 font-size: 0.8em;
931}
932
933.linklist-item-infos a {
934 color: #505050;
935 text-decoration: none;
936}
937
938.linklist-item-infos a:hover {
939 color: #000;
940}
941
942.linklist-item-tags {
943 margin: 0 0 5px 0;
944}
945
946.label-tag {
947 border: 1px solid #505050;
948 font-size: 1em;
949}
950
951.label-tag:hover {
952 border: 1px solid #000;
953}
954
955.linklist-plugin-icon {
956 width: 13px;
957 height: 13px;
958}
959
960.linklist-item-infos-url {
961 text-align: right;
962 white-space: nowrap;
963 overflow: hidden;
964 text-overflow: ellipsis;
965} 801}
966 802
967/** 803/**
@@ -989,6 +825,12 @@ pre {
989 margin: 10px 0; 825 margin: 10px 0;
990} 826}
991 827
828.tools-item .pure-button:hover {
829 background-image: none;
830 background-color: #1b926c;
831 color: #f5f5f5;
832}
833
992/** 834/**
993 * PLUGIN ADMIN 835 * PLUGIN ADMIN
994 */ 836 */
@@ -1128,6 +970,10 @@ pre {
1128 margin: 10px auto; 970 margin: 10px auto;
1129} 971}
1130 972
973.daily-entry {
974 padding: 0 10px;
975}
976
1131.daily-entry .daily-entry-title:after { 977.daily-entry .daily-entry-title:after {
1132 display: block; 978 display: block;
1133 content:""; 979 content:"";
diff --git a/tpl/default/daily.html b/tpl/default/daily.html
index 9de2bac3..d4c11f6f 100644
--- a/tpl/default/daily.html
+++ b/tpl/default/daily.html
@@ -64,7 +64,7 @@
64 {$link=$value} 64 {$link=$value}
65 <div class="daily-entry"> 65 <div class="daily-entry">
66 <div class="daily-entry-title center"> 66 <div class="daily-entry-title center">
67 <a href="?{$link.linkdate|smallHash}" title="{'Permalink'|t}"> 67 <a href="?{$link.shorturl}" title="{'Permalink'|t}">
68 <i class="fa fa-link"></i> 68 <i class="fa fa-link"></i>
69 </a> 69 </a>
70 <a href="{$link.real_url}">{$link.title}</a> 70 <a href="{$link.real_url}">{$link.title}</a>
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index 24d11cdb..01e22022 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -138,27 +138,6 @@ if (newVersionDismiss != null) {
138 }); 138 });
139} 139}
140 140
141/**
142 * Login button
143 */
144var loginButton = document.getElementById('login-button');
145var loginBlock = document.getElementById('header-login-form');
146
147if (loginButton != null) {
148 loginButton.addEventListener('click', function(event) {
149 event.preventDefault();
150 loginBlock.classList.toggle('open');
151 document.getElementById('content').style.boxShadow = 'none';
152 });
153}
154
155// Focus on login field.
156if (loginBlock != null) {
157 loginBlock.addEventListener('transitionend', function () {
158 loginBlock.firstElementChild.focus();
159 });
160}
161
162var hiddenReturnurl = document.getElementsByName('returnurl'); 141var hiddenReturnurl = document.getElementsByName('returnurl');
163if (hiddenReturnurl != null) { 142if (hiddenReturnurl != null) {
164 hiddenReturnurl.value = window.location.href; 143 hiddenReturnurl.value = window.location.href;
@@ -173,15 +152,39 @@ if (autofocusElements != null) {
173} 152}
174 153
175/** 154/**
176 * Hide search bar, and display it on search click. 155 * Hide search bar
177 */ 156 */
178var searchBar = document.getElementById('search'); 157var search = document.getElementById('search');
179var searchButton = document.getElementById('search-button'); 158if (search != null) {
180if (searchBar != null && searchButton != null) { 159 removeClass(search, 'open');
181 searchBar.classList.toggle('closed'); 160}
182 searchButton.addEventListener('click', function(event) { 161
183 event.preventDefault(); 162/**
184 searchBar.classList.toggle('closed'); 163 * Handle sub menus/forms
185 searchBar.classList.toggle('open'); 164 */
165var openers = document.getElementsByClassName('subheader-opener');
166if (openers != null) {
167 console.log(openers);
168 [].forEach.call(openers, function(opener) {
169 opener.addEventListener('click', function(event) {
170 event.preventDefault();
171
172 var id = opener.getAttribute('data-open-id');
173 var sub = document.getElementById(id);
174
175 if (sub != null) {
176 [].forEach.call(document.getElementsByClassName('subheader-form'), function (element) {
177 if (element != sub) {
178 removeClass(element, 'open')
179 }
180 });
181
182 sub.classList.toggle('open');
183 }
184 });
186 }); 185 });
187} 186}
187
188function removeClass(element, classname) {
189 element.className = element.className.replace(new RegExp('(?:^|\\s)'+ classname + '(?:\\s|$)'), ' ');
190} \ No newline at end of file
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 051575dc..f1f67eea 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -54,36 +54,32 @@
54 {/if} 54 {/if}
55 55
56 <div class="pure-g"> 56 <div class="pure-g">
57 <div class="pure-u-2-24"></div> 57 <div class="pure-u-lg-2-24 pure-u-1-24"></div>
58 <div class="pure-u-20-24"> 58 <div class="pure-u-lg-20-24 pure-u-22-24">
59 {loop="links"} 59 {loop="links"}
60 <div class="linklist-item{if="$value.class"} {$value.class}{/if}"> 60 <div class="linklist-item{if="$value.class"} {$value.class}{/if}">
61 61
62 <div class="linklist-item-title"> 62 <div class="linklist-item-title">
63 {if="isLoggedIn()"} 63 {if="isLoggedIn()"}
64 <div class="linklist-item-editbuttons"> 64 <div class="linklist-item-editbuttons">
65 {if="$value.private"}
66 <span class="label label-private">{'Private'|t}</span>
67 {/if}
65 <!-- FIXME! JS translation --> 68 <!-- FIXME! JS translation -->
69 <a href="?edit_link={$value.id}" title="{'Edit'|t}"><i class="fa fa-pencil-square-o edit-link"></i></a>
66 <a href="#" title="{'Fold'|t}" class="fold-button"><i class="fa fa-chevron-up"></i></a> 70 <a href="#" title="{'Fold'|t}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
67 <a href="?edit_link={$value.id}" title="{'Edit'|t}"><i class="fa fa-pencil-square-o"></i></a>
68 <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}" title="{'Delete'|t}" class="delete-link">
69 <i class="fa fa-trash"></i>
70 </a>
71 </div> 71 </div>
72 {/if} 72 {/if}
73 73
74 <h2> 74 <h2>
75 <a href="{$value.real_url}" id="{$value.shorturl}" class="linklist-link"> 75 <a href="{$value.real_url}" id="{$value.shorturl}" class="">
76 {if="strpos($value.url, $value.shorturl) === false"} 76 {if="strpos($value.url, $value.shorturl) === false"}
77 <i class="fa fa-external-link"></i> 77 <i class="fa fa-external-link"></i>
78 {else} 78 {else}
79 <i class="fa fa-sticky-note"></i> 79 <i class="fa fa-sticky-note"></i>
80 {/if} 80 {/if}
81 81
82 {if="$value.private"} 82 <span class="linklist-link">{$value.title}</span>
83 <span class="label label-private">{'Private'|t}</span>
84 {/if}
85
86 {$value.title}
87 </a> 83 </a>
88 </h2> 84 </h2>
89 </div> 85 </div>
@@ -139,6 +135,9 @@
139 <a href="{$value.real_url}" title="{$value.title}"> 135 <a href="{$value.real_url}" title="{$value.title}">
140 <i class="fa fa-link"></i> {$value.url} 136 <i class="fa fa-link"></i> {$value.url}
141 </a> 137 </a>
138 <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}" title="{'Delete'|t}" class="delete-link">
139 <i class="fa fa-trash"></i>
140 </a>
142 </div> 141 </div>
143 </div> 142 </div>
144 </div> 143 </div>
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 4a3710ff..fefa9258 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -46,6 +46,9 @@
46 </a> 46 </a>
47 </li> 47 </li>
48 {/loop} 48 {/loop}
49 <li class="pure-menu-item pure-u-lg-0">
50 <a href="?do=atom{$searchcrits}" class="pure-menu-link">{'RSS Feed'|t}</a>
51 </li>
49 {if="isLoggedIn()"} 52 {if="isLoggedIn()"}
50 <li class="pure-menu-item pure-u-lg-0"> 53 <li class="pure-menu-item pure-u-lg-0">
51 <a href="?do=logout" class="pure-menu-link">{'Logout'|t}</a> 54 <a href="?do=logout" class="pure-menu-link">{'Logout'|t}</a>
@@ -55,35 +58,36 @@
55 <a href="?do=login" class="pure-menu-link">{'Login'|t}</a> 58 <a href="?do=login" class="pure-menu-link">{'Login'|t}</a>
56 </li> 59 </li>
57 {/if} 60 {/if}
58 <li class="pure-menu-item pure-u-lg-0">
59 <a href="?do=atom{$searchcrits}" class="pure-menu-link">{'RSS Feed'|t}</a>
60 </li>
61 </ul> 61 </ul>
62 <div class="header-buttons pure-u-lg-1-6 pure-u-0 pure-u-lg-visible"> 62 <div class="header-buttons pure-u-lg-1-6 pure-u-0 pure-u-lg-visible">
63 <ul class="pure-menu-list"> 63 <ul class="pure-menu-list">
64 <li class="pure-menu-item"> 64 <li class="pure-menu-item">
65 <a href="#" class="pure-menu-link" id="search-button" title="{'Search'|t}"> 65 <a href="#" class="pure-menu-link subheader-opener"
66 data-open-id="search"
67 id="search-button" title="{'Search'|t}">
66 <i class="fa fa-search"></i> 68 <i class="fa fa-search"></i>
67 </a> 69 </a>
68 </li> 70 </li>
69 {if="!isLoggedIn()"}
70 <li class="pure-menu-item">
71 <a href="?do=login" class="pure-menu-link" id="login-button" title="{'Login'|t}">
72 <i class="fa fa-user"></i>
73 </a>
74 </li>
75 {else}
76 <li class="pure-menu-item">
77 <a href="?do=logout" class="pure-menu-link" title="{'Logout'|t}">
78 <i class="fa fa-sign-out"></i>
79 </a>
80 </li>
81 {/if}
82 <li class="pure-menu-item"> 71 <li class="pure-menu-item">
83 <a href="?do=atom{$searchcrits}" class="pure-menu-link" title="{'RSS Feed'|t}"> 72 <a href="?do=atom{$searchcrits}" class="pure-menu-link" title="{'RSS Feed'|t}">
84 <i class="fa fa-rss"></i> 73 <i class="fa fa-rss"></i>
85 </a> 74 </a>
86 </li> 75 </li>
76 {if="!isLoggedIn()"}
77 <li class="pure-menu-item">
78 <a href="?do=login" class="pure-menu-link subheader-opener"
79 data-open-id="header-login-form"
80 id="login-button" title="{'Login'|t}">
81 <i class="fa fa-user"></i>
82 </a>
83 </li>
84 {else}
85 <li class="pure-menu-item">
86 <a href="?do=logout" class="pure-menu-link" title="{'Logout'|t}">
87 <i class="fa fa-sign-out"></i>
88 </a>
89 </li>
90 {/if}
87 </ul> 91 </ul>
88 </div> 92 </div>
89 </div> 93 </div>
@@ -91,7 +95,7 @@
91</div> 95</div>
92 96
93<div id="content"> 97<div id="content">
94 <div id="search" class="subheader-form"> 98 <div id="search" class="subheader-form open">
95 <div class="pure-g"> 99 <div class="pure-g">
96 <div class="pure-u-1 pure-u-lg-1-2"> 100 <div class="pure-u-1 pure-u-lg-1-2">
97 <form method="GET" class="searchform" name="searchform"> 101 <form method="GET" class="searchform" name="searchform">
@@ -138,7 +142,7 @@
138 <input type="text" name="login" placeholder="{'Username'|t}" tabindex="3"> 142 <input type="text" name="login" placeholder="{'Username'|t}" tabindex="3">
139 <input type="password" name="password" placeholder="{'Password'|t}" tabindex="5"> 143 <input type="password" name="password" placeholder="{'Password'|t}" tabindex="5">
140 <div class="remember-me"> 144 <div class="remember-me">
141 <input type="checkbox" name="longlastingsession" id="longlastingsession" tabindex="6"> 145 <input type="checkbox" name="longlastingsession" id="longlastingsession" tabindex="6" checked>
142 <label for="longlastingsession">{'Remember me'|t}</label> 146 <label for="longlastingsession">{'Remember me'|t}</label>
143 </div> 147 </div>
144 <input type="hidden" name="token" value="{$token}"> 148 <input type="hidden" name="token" value="{$token}">
diff --git a/tpl/default/tools.html b/tpl/default/tools.html
index 3f2cf0f1..a9b8803b 100644
--- a/tpl/default/tools.html
+++ b/tpl/default/tools.html
@@ -126,6 +126,18 @@
126 <span class="pure-button pure-u-lg-2-3 pure-u-3-4">Chrome {'plugin'|t}</span> 126 <span class="pure-button pure-u-lg-2-3 pure-u-3-4">Chrome {'plugin'|t}</span>
127 </a> 127 </a>
128 </div> 128 </div>
129 <div class="tools-item">
130 <a href="https://play.google.com/store/apps/details?id=com.dimtion.shaarlier&hl=fr"
131 title="Android">
132 <span class="pure-button pure-u-lg-2-3 pure-u-3-4">Android</span>
133 </a>
134 </div>
135 <div class="tools-item">
136 <a href="https://itunes.apple.com/app/ShaarliOS/id1027441388?mt=8"
137 title="iOS">
138 <span class="pure-button pure-u-lg-2-3 pure-u-3-4">iOS</span>
139 </a>
140 </div>
129 </div> 141 </div>
130</div> 142</div>
131 143