aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default/css/shaarli.css
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2017-01-04 13:18:18 +0100
committerArthurHoaro <arthur@hoa.ro>2017-01-04 13:18:18 +0100
commit2bbf5d03ca47c9ce5bc88aabae6096f90f646cab (patch)
tree5798f75cdd07e2b1d36679f7cc5180fa8e4e5878 /tpl/default/css/shaarli.css
parent60d64256393ec4156ef7873860c14aa1028ffb60 (diff)
downloadShaarli-2bbf5d03ca47c9ce5bc88aabae6096f90f646cab.tar.gz
Shaarli-2bbf5d03ca47c9ce5bc88aabae6096f90f646cab.tar.zst
Shaarli-2bbf5d03ca47c9ce5bc88aabae6096f90f646cab.zip
Takin theme reviews into account
Diffstat (limited to 'tpl/default/css/shaarli.css')
-rw-r--r--tpl/default/css/shaarli.css366
1 files changed, 106 insertions, 260 deletions
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:"";