tpl/default/css/shaarli.css

   1 /**
   2  * General
   3  */
   4 body {
   5     background: url(../img/noise.png) #979797;
   6 }
   7
   8 .strong {
   9     font-weight: bold;
  10 }
  11
  12 .clear {
  13     clear: both;
  14 }
  15
  16 .center {
  17     text-align: center;
  18     margin: auto;
  19 }
  20
  21 .label {
  22     display: inline-block;
  23     padding: .25em .4em;
  24     font-size: 75%;
  25     font-weight: 700;
  26     line-height: 1;
  27     text-align: center;
  28     white-space: nowrap;
  29     vertical-align: baseline;
  30     border-radius: .25rem;
  31 }
  32
  33 pre {
  34     max-width: 100%;
  35 }
  36
  37 @font-face {
  38     font-family: 'Roboto Slab';
  39     font-weight: 400;
  40     font-style: normal;
  41     src:
  42     local('Fira Sans'),
  43     local('Fira-Sans-regular'),
  44     url('../fonts/Fira-Sans-regular.woff2') format('woff2'),
  45     url('../fonts/Fira-Sans-regular.woff') format('woff');
  46 }
  47
  48 /**
  49  * Extends Pure grids responsive to hide items.
  50  * Use xx-0 to hide an item on xx screen.
  51  * Display it at any level with xx-visible.
  52  */
  53 .pure-u-0 { display: none !important; }
  54 @media screen and (min-width: 35.5em) {
  55     .pure-u-sm-0 { display: none !important; }
  56     .pure-u-sm-visible { display: inline-block !important; }
  57 }
  58 @media screen and (min-width: 48em) {
  59     .pure-u-md-0 { display: none !important; }
  60     .pure-u-md-visible { display: inline-block !important; }
  61 }
  62 @media screen and (min-width: 64em) {
  63     .pure-u-lg-0 { display: none !important; }
  64     .pure-u-lg-visible { display: inline-block !important; }
  65 }
  66 @media screen and (min-width: 80em) {
  67     .pure-u-xl-0 { display: none !important; }
  68     .pure-u-xl-visible { display: inline-block !important; }
  69 }
  70
  71 .pure-g [class*="pure-u"]{
  72     font-family: Roboto Slab, Arial, sans-serif;
  73 }
  74
  75 /**
  76  * Make pure-extras alert closable.
  77  */
  78 .pure-alert-closable .fa-times {
  79     float: right;
  80 }
  81 .pure-alert-close {
  82     cursor: pointer;
  83 }
  84
  85 .pure-alert-success {
  86     background-color: #1b926c;
  87 }
  88
  89 /**
  90  * MENU
  91  **/
  92 .shaarli-menu {
  93     position: fixed;
  94     top: 0;
  95     width: 100%;
  96     background: #1b926c;
  97     -webkit-font-smoothing: antialiased;
  98     /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
  99     max-height: 2.1em;
 100     transition: max-height 0.5s;
 101     overflow: hidden;
 102     z-index: 999;
 103 }
 104
 105 /* Chrome bugfix: with 100% height, it only displays the first element. */
 106 .pure-menu-item {
 107     height: inherit;
 108 }
 109
 110 .shaarli-menu.open {
 111     max-height: 500px;
 112     transition: max-height 0.75s;
 113 }
 114
 115 .pure-menu-link,
 116 .pure-menu-link:visited,
 117 .pure-menu-selected .pure-menu-link,
 118 .pure-menu-selected .pure-menu-link:visited {
 119     color: #b0ddce;
 120 }
 121
 122 .pure-menu-link:hover,
 123 .pure-menu-selected .pure-menu-link:hover {
 124     color: #d1fff0;
 125     background: transparent;
 126 }
 127
 128 .menu-toggle {
 129     width: 34px;
 130     height: 34px;
 131     position: absolute;
 132     top: 0;
 133     right: 0;
 134     display: none;
 135 }
 136
 137 .menu-toggle .bar {
 138     background-color: #b0ddce;
 139     display: block;
 140     width: 20px;
 141     height: 2px;
 142     border-radius: 100px;
 143     position: absolute;
 144     top: 18px;
 145     right: 7px;
 146     transition: all 0.5s;
 147 }
 148
 149 .menu-toggle .bar:first-child {
 150     transform: translateY(-6px);
 151 }
 152
 153 .menu-toggle.x .bar {
 154     transform: rotate(45deg);
 155 }
 156
 157 .menu-toggle.x .bar:first-child {
 158     transform: rotate(-45deg);
 159 }
 160
 161 @media screen and (max-width: 64em) {
 162     .menu-toggle {
 163         display: block;
 164     }
 165 }
 166
 167 /**
 168  * Header
 169  */
 170 #header {
 171     width: 100%;
 172     height: 150px;
 173     background: url(../img/noise.png), #1fa67a url(../img/logo.png) no-repeat fixed 10px 2.5em;
 174 }
 175
 176 #header h1 {
 177     position: fixed;
 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: #b0ddce;
 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: #d1fff0;
 203 }
 204
 205 .header-buttons {
 206     text-align: right;
 207 }
 208
 209 #linkcount {
 210     /* position: fixed; */
 211     position: absolute;
 212     top: 40px;
 213     right: 10px;
 214     color: #b0ddce;
 215     font-size: 0.8em;
 216 }
 217
 218 #search {
 219     /**
 220      * Can't make it work with awesomplete list z-index. Any idea?
 221      * position: fixed;
 222      */
 223     position: absolute;
 224     top: 60px;
 225     right: 10px;
 226     width: 30%;
 227     text-align: right;
 228 }
 229
 230 #search input[type="text"] {
 231     margin: 0 0 5px 0;
 232     padding: 5px 5px 3px 15px;
 233     height: 20px;
 234     width: 140px;
 235     transition: width .5s ease;
 236     background: #1b926c;
 237     border: medium none currentColor;
 238     border-radius: 25px;
 239     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 240     color: #b0ddce;
 241 }
 242
 243 /* because chrome */
 244 #search input[type="text"]::-webkit-input-placeholder {
 245     color: #b0ddce;
 246 }
 247
 248 #search button {
 249     background: transparent;
 250     border: none;
 251     color: #b0ddce;
 252 }
 253
 254 #search button:hover {
 255     color: #fff;
 256 }
 257
 258 #header-login-form {
 259     height: 0;
 260     transition: 0.3s;
 261 }
 262
 263 #header-login-form.open {
 264     display: block;
 265     height: 30px;
 266     padding: 5px 0;
 267 }
 268
 269 #header-login-form input[type="text"], #header-login-form input[type="password"] {
 270     width: 200px;
 271 }
 272
 273 #header-login-form input, #header-login-form .remember-me {
 274     transition: visibility 1s, opacity 1s;
 275     visibility: hidden;
 276     opacity: 0;
 277 }
 278
 279 #header-login-form.open input, #header-login-form.open .remember-me {
 280     visibility: visible;
 281     opacity: 1;
 282 }
 283
 284 .subheader-form {
 285     text-align: center;
 286     background: #1b926c;
 287     display: block;
 288 }
 289
 290 .subheader-form.open {
 291     height: 30px;
 292     padding: 5px 0;
 293 }
 294
 295 .subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
 296     margin: 0 0 5px 0;
 297     padding: 5px 5px 3px 15px;
 298     height: 20px;
 299     width: 20%;
 300     background: #1fa67a;
 301     border: medium none currentColor;
 302     border-radius: 25px;
 303     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 304     color: #b0ddce;
 305 }
 306
 307 /* because chrome */
 308 .subheader-form input[type="text"]::-webkit-input-placeholder,
 309 .subheader-form input[type="password"]::-webkit-input-placeholder
 310 {
 311     color: #b0ddce;
 312 }
 313
 314 .subheader-form .remember-me {
 315     display: inline-block;
 316     width: auto;
 317     padding: 5px 20px 3px 20px;
 318     cursor: pointer;
 319 }
 320
 321 .subheader-form .remember-me label, .subheader-form .remember-me input {
 322     cursor: pointer;
 323 }
 324
 325 .subheader-form input[type="submit"] {
 326     display: inline-block;
 327     margin: 0 0 5px 0;
 328     height: 25px;
 329     width: 100px;
 330     background: #0C7653;
 331     border: medium none currentColor;
 332     border-radius: 25px;
 333     box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E;
 334     color: #b0ddce;
 335 }
 336
 337 .new-version-message {
 338     text-align: center;
 339 }
 340
 341 .new-version-message a {
 342     color: rgb(151, 96, 13);
 343     font-weight: bold;
 344 }
 345
 346 /**
 347  * CONTENT - GENERAL
 348  */
 349 #content {
 350     position: relative;
 351     /* Hack-ish way to only shadow the top part. */
 352     box-shadow: 0 -20px 20px -20px #797979;
 353     z-index: 2;
 354     background: url(../img/noise.png) #979797;
 355 }
 356
 357 @media screen and (max-width: 64em) {
 358     #content {
 359         margin: 2.1em 0 0 0;
 360     }
 361 }
 362
 363 @media screen and (min-width: 64em) {
 364     #content {
 365         /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
 366         margin-top: -4px;
 367     }
 368 }
 369
 370 /**
 371  * CONTENT - LINKLIST PAGING
 372  * 64em -> lg
 373  */
 374
 375
 376 .linklist-filters {
 377     margin: 10px 0;
 378     color: #252525;
 379     font-size: 0.9em;
 380 }
 381
 382 .linklist-filters a {
 383     padding: 2px 5px;
 384     text-decoration: none;
 385 }
 386
 387 .linklist-filters .filter-off {
 388     color: #252525;
 389     background: #c8c8c8;
 390 }
 391
 392 .linklist-filters .filter-on {
 393     color: #b0ddce;
 394     background: #1b926c;
 395 }
 396
 397 .linklist-pages {
 398     margin: 10px 0;
 399     color: #252525;
 400     text-align: center;
 401 }
 402
 403 .linklist-pages a {
 404     color: #252525;
 405     text-decoration: none;
 406 }
 407
 408 .linklist-pages a:hover {
 409     color: #fff;
 410 }
 411
 412 .linksperpage {
 413     margin: 10px 0;
 414     text-align: right;
 415     color: #252525;
 416     font-size: 0.9em;
 417 }
 418
 419 .linksperpage a {
 420     padding: 2px 5px;
 421     text-decoration: none;
 422     color: #252525;
 423     background: #c8c8c8;
 424     border: solid 1px #979797;
 425 }
 426
 427 .linksperpage form {
 428     display: inline;
 429     margin: 0 10px 0 0;
 430 }
 431
 432 .linksperpage input[type="text"] {
 433     width: 28px;
 434     height: 16px;
 435     margin: 0;
 436     padding: 3px 5px 3px 8px;
 437     background: #c8c8c8;
 438     border: medium none currentColor;
 439     --border-radius: 25px;
 440     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 441     color: #252525;
 442     font-size: 0.8em;
 443 }
 444
 445 /**
 446  * CONTENT - LINKLIST ITEMS
 447  */
 448 .linklist-item {
 449     margin: 15px 0;
 450     background: #f5f5f5;
 451     box-shadow: 2px 2px 0.5em #797979;
 452 }
 453
 454 .linklist-item-title, .linklist-item-title h2  {
 455     margin: 0;
 456     word-wrap: break-word;
 457 }
 458
 459 .linklist-item-title {
 460     background: #20b988 url(../img/noise.png);
 461     border-bottom: 1px solid #1b926c;
 462     box-shadow: 1px 1px 0.2em #1b926c;
 463 }
 464
 465 .linklist-item-title h2 {
 466     padding: 3px 10px 0 10px;
 467     line-height: 25px;
 468 }
 469
 470 .linklist-item-title a {
 471     font-size: 0.7em;
 472     color: #d0fff0;
 473     text-decoration: none;
 474     vertical-align: middle;
 475     font-family: Roboto Slab, Arial, sans-serif;
 476 }
 477
 478 .linklist-item-title .linklist-link:visited {
 479     color: #ddd;
 480 }
 481
 482 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
 483     color: #fff;
 484 }
 485
 486
 487 .linklist-item-title .label-private {
 488     border: solid 1px #d0fff0;
 489     font-family: Arial, sans-serif;
 490     font-size: 0.65em;
 491 }
 492
 493 .linklist-item-title .fold-button {
 494     display: none;
 495 }
 496
 497 .linklist-item-editbuttons {
 498     float: right;
 499     padding: 5px;
 500 }
 501
 502 .linklist-item-editbuttons a {
 503     font-size: 1em;
 504 }
 505
 506 .linklist-item-description {
 507     padding: 10px;
 508     font-family: Roboto Slab, Arial, sans-serif;
 509     word-wrap: break-word;
 510 }
 511
 512 .linklist-item-description a {
 513     text-decoration: none;
 514     color: #1b926c;
 515 }
 516
 517 .linklist-item-description a:hover {
 518     text-shadow: 1px 1px #ddd;
 519 }
 520
 521 .linklist-item-description a:visited {
 522     color: #20b988;
 523 }
 524
 525 .linklist-item-thumbnail {
 526     margin-top: 10px;
 527     padding: 10px;
 528     float: left;
 529 }
 530
 531 .linklist-item-infos {
 532     padding: 5px 5px 0 5px;
 533     background: #ddd url(../img/noise.png);
 534     border-top: 1px solid #989898;
 535     box-shadow: 1px -1px 0.2em #989898;
 536     color: #252525;
 537 }
 538
 539 .linklist-item-infos a {
 540     color: #505050;
 541     text-decoration: none;
 542 }
 543
 544 .linklist-item-infos a:hover {
 545     color: #000;
 546 }
 547
 548 .linklist-item-infos .linklist-item-tags {
 549     margin: 0 0 5px 0;
 550     font-size: 0.8em;
 551 }
 552
 553 .linklist-item-infos .linklist-item-infos .label-tag {
 554     border: 1px solid #505050;
 555     font-size: 0.9em;
 556 }
 557
 558 .linklist-item-infos .label-tag:hover {
 559     border: 1px solid #000;
 560 }
 561
 562 .linklist-item-infos-dateblock {
 563     font-size: 0.9em;
 564 }
 565
 566 .linklist-plugin-icon {
 567     width: 13px;
 568     height: 13px;
 569 }
 570
 571 .linklist-item-infos-url {
 572     text-align: right;
 573     white-space: nowrap;
 574     overflow: hidden;
 575     text-overflow: ellipsis;
 576     font-size: 0.8em;
 577 }
 578
 579 /** 64em -> lg **/
 580 @media screen and (max-width: 64em) {
 581     .linklist-item-infos-url {
 582         text-align: left;
 583     }
 584 }
 585
 586 /**
 587  * Footer
 588  */
 589 #footer {
 590     margin: 20px 0;
 591     padding: 5px;
 592     text-align: center;
 593     color: #252525;
 594 }
 595
 596 #footer:before {
 597     display: block;
 598     content:"";
 599     background: linear-gradient(to right, #949393, #252525, #949393);
 600     height: 1px;
 601     width: 80%;
 602     margin: 10px auto;
 603 }
 604
 605 #footer a {
 606     color: #252525;
 607 }
 608
 609 /**
 610  * PAGE FORM
 611  */
 612 .page-form {
 613     margin: 20px 0 0 0;
 614     background: url(../img/noise.png) #1fa67a;
 615     border-radius: 5px;
 616     box-shadow: 1px 1px 2px #797979;
 617     color: #b0ddce;
 618 }
 619
 620 .page-form .window-title {
 621     margin: 0 0 10px 0;
 622     padding: 10px 0;
 623     width: 100%;
 624     color: #b0ddce;
 625     background: #1b926c;
 626     text-align: center;
 627     border-radius: 5px 5px 0 0;
 628     border-bottom: 1px solid #797979;
 629 }
 630
 631 .page-form .window-subtitle {
 632     text-align: center;
 633 }
 634
 635 .page-form a {
 636     color: #b0ddce;
 637     font-weight: bold;
 638 }
 639
 640 .page-form input[type="text"],
 641 .page-form input[type="password"],
 642 .page-form textarea {
 643     margin: 10px 0;
 644     padding: 5px 5px 3px 15px;
 645     height: 30px;
 646     width: 80%;
 647     background: #1b926c;
 648     border: medium none currentColor;
 649     border-radius: 25px;
 650     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 651     color: #b0ddce;
 652 }
 653
 654 .page-form textarea {
 655     height: 240px;
 656     padding: 15px 5px 3px 15px;
 657     resize: vertical;
 658     overflow-y: auto;
 659     word-wrap:break-word
 660 }
 661
 662 /* because chrome */
 663 .page-form input[type="text"]::-webkit-input-placeholder,
 664 .page-form input[type="password"]::-webkit-input-placeholder {
 665     color: #b0ddce;
 666 }
 667
 668 .page-form input[type="submit"] {
 669     margin: 15px 5px;
 670     height: 35px;
 671     width: 150px;
 672     background: #1b926c;
 673     border: medium none currentColor;
 674     border-radius: 25px;
 675     box-shadow: 1px 1px 4px #0C7653, -1px -1px 6px #0C7653, -1px 1px 6px #0C7653, 1px -1px 6px #0C7653;
 676     font-size: 1.2em;
 677     font-weight: bold;
 678     color: #b0ddce;
 679 }
 680
 681 .page-form select {
 682     color: black;
 683 }
 684
 685 /**
 686  * PAGE FORM - LIGHT
 687  */
 688 .page-form-light div, .page-form-light p {
 689     text-align: center;
 690 }
 691
 692 /**
 693  * PAGE FORM - COMPLETE
 694  */
 695 .page-form-complete {
 696     #background: #ddd;
 697 }
 698
 699 .page-form-complete div, .page-form-complete p {
 700     color: #b0ddce;
 701 }
 702
 703 .page-form-complete .form-label, .page-form-complete .form-input {
 704     position: relative;
 705     height: 60px;
 706 }
 707
 708 .page-form-complete .form-label label,
 709 .page-form-complete .form-input input,
 710 .page-form-complete .timezone {
 711     position: absolute;
 712     top: 50%;
 713     transform: translateY(-50%);
 714 }
 715
 716 .page-form-complete .form-label label {
 717     text-align: right;
 718     right: 0;
 719     padding: 0 20px;
 720 }
 721
 722 .page-form-complete .label-name {
 723     font-weight: bold;
 724 }
 725
 726 .page-form-complete .label-desc {
 727     font-size: 0.8em;
 728 }
 729
 730 .page-form-complete input[type="text"],
 731 .page-form-complete input[type="password"],
 732 .page-form-complete textarea {
 733     margin: 0;
 734 }
 735
 736 .page-form section {
 737     margin-top: 20px;
 738 }
 739
 740
 741 .page-form table {
 742     margin: auto;
 743     width: 90%;
 744 }
 745
 746 .page-form table .order {
 747     text-decoration: none;
 748 }
 749
 750 .page-form table, .page-form th, .page-form td {
 751     border-width: 1px 0;
 752     border-style: solid;
 753     border-color: #b0ddce;
 754 }
 755
 756 .page-form th, .page-form td {
 757     padding: 5px;
 758
 759 }
 760
 761 /* Awesomeplete fix */
 762 .page-form .awesomplete {
 763     width: 80%;
 764 }
 765
 766 .page-form .awesomplete input {
 767     width: 100%;
 768 }
 769
 770 .page-form div.awesomplete > ul {
 771     color: black;
 772 }
 773
 774 @media screen and (max-width: 64em) {
 775     .page-form-complete .form-label {
 776         height: inherit;
 777     }
 778
 779     .page-form-complete .form-label label,
 780     .page-form-complete .form-input input,
 781     .page-form-complete .timezone {
 782         position: inherit;
 783         top: inherit;
 784         transform: translateY(0);
 785     }
 786
 787     .page-form-complete .form-input input[type="checkbox"] {
 788         position: absolute;
 789         top: 50%;
 790         right: 50%;
 791         transform: translateY(-50%);
 792     }
 793
 794     .page-form-complete .form-input {
 795         text-align: center;
 796     }
 797
 798     .page-form-complete .form-label label {
 799         display: block;
 800         text-align: left;
 801         margin: 10px 0 0 0;
 802     }
 803
 804     .timezone-continent:after {
 805         content:"\a\a";
 806         white-space: pre;
 807     }
 808
 809     .page-form-complete .radio-buttons {
 810         text-align: left;
 811         padding: 5px 15px;
 812     }
 813 }
 814
 815 /**
 816  * Page visitor (page form extended)
 817  */
 818 .page-visitor {
 819     background: url(../img/noise.png) #fff;
 820     color: #000;
 821 }
 822
 823 #page404 {
 824     color: #3f3f3f;
 825 }
 826
 827 /**
 828  * LOGIN
 829  */
 830 #login-form .remember-me {
 831     margin: 5px 0;
 832     color: #b0ddce;
 833     font-weight: bold;
 834 }
 835
 836 /**
 837  * CONTENT - LINKLIST ITEMS
 838  */
 839 .linklist-item {
 840     margin: 15px 0;
 841     background: #f5f5f5;
 842     box-shadow: 2px 2px 0.5em #797979;
 843 }
 844
 845 .linklist-item-title, .linklist-item-title h2  {
 846     margin: 0;
 847 }
 848
 849 .linklist-item-title {
 850     background: #20b988 url(../img/noise.png);
 851     border-bottom: 1px solid #1b926c;
 852     box-shadow: 1px 1px 0.2em #1b926c;
 853 }
 854
 855 .linklist-item-title h2 {
 856     padding: 3px 10px 0 10px;
 857     line-height: 25px;
 858 }
 859
 860 .linklist-item-title a {
 861     font-size: 0.7em;
 862     color: #d0fff0;
 863     text-decoration: none;
 864     vertical-align: middle;
 865     font-family: Roboto Slab, Arial, sans-serif;
 866 }
 867
 868 .linklist-item-title .linklist-link:visited {
 869     color: #ddd;
 870 }
 871
 872 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
 873     color: #fff;
 874 }
 875
 876 .linklist-item-title .label-private {
 877     border: solid 1px #d0fff0;
 878     font-family: Arial, sans-serif;
 879     font-size: 0.65em;
 880 }
 881
 882 .linklist-item-title .fold-button {
 883     display: none;
 884 }
 885
 886 .linklist-item-editbuttons {
 887     float: right;
 888     padding: 5px;
 889 }
 890
 891 .linklist-item-editbuttons a {
 892     font-size: 1em;
 893 }
 894
 895 .linklist-item-description {
 896     padding: 10px;
 897     font-family: Roboto Slab, Arial, sans-serif;
 898 }
 899
 900 .linklist-item-description a {
 901     text-decoration: none;
 902     color: #1b926c;
 903 }
 904
 905 .linklist-item-description a:hover {
 906     text-shadow: 1px 1px #ddd;
 907 }
 908
 909 .linklist-item-description a:visited {
 910     color: #20b988;
 911 }
 912
 913 .linklist-item-infos {
 914     padding: 5px;
 915     background: #ddd url(../img/noise.png);
 916     border-top: 1px solid #989898;
 917     box-shadow: 1px -1px 0.2em #989898;
 918     color: #252525;
 919     font-size: 0.8em;
 920 }
 921
 922 .linklist-item-infos a {
 923     color: #505050;
 924     text-decoration: none;
 925 }
 926
 927 .linklist-item-infos a:hover {
 928     color: #000;
 929 }
 930
 931 .linklist-item-tags {
 932     margin: 0 0 5px 0;
 933 }
 934
 935 .label-tag {
 936     border: 1px solid #505050;
 937     font-size: 1em;
 938 }
 939
 940 .label-tag:hover {
 941     border: 1px solid #000;
 942 }
 943
 944 .linklist-plugin-icon {
 945     width: 13px;
 946     height: 13px;
 947 }
 948
 949 .linklist-item-infos-url {
 950     text-align: right;
 951     white-space: nowrap;
 952     overflow: hidden;
 953     text-overflow: ellipsis;
 954 }
 955
 956 /**
 957  * Search results
 958  */
 959 .search-result a {
 960     color: white;
 961     text-decoration: none;
 962 }
 963
 964 .search-result .label-tag {
 965     border-color: white;
 966 }
 967
 968 .search-result .label-tag .remove {
 969     border-left: white 1px solid;
 970     padding: 0 0 0 5px;
 971     margin: 0 0 0 5px;
 972 }
 973
 974 /**
 975  * TOOLS
 976  */
 977 .tools-item {
 978     margin: 10px 0;
 979 }
 980
 981 /**
 982  * PLUGIN ADMIN
 983  */
 984 #pluginform .mobile-row {
 985     font-size: 0.9em;
 986 }
 987
 988 #pluginform .more {
 989     margin-top: 10px;
 990 }
 991
 992 @media screen and (max-width: 64em) {
 993     #pluginform .main-row, #pluginform .main-row td {
 994         border-bottom-style: none;
 995     }
 996
 997     #pluginform .mobile-row, #pluginform .mobile-row td {
 998         border-top-style: none;
 999     }
1000 }
1001
1002
1003 /**
1004  * IMPORT
1005  */
1006 #import-field {
1007     margin: 15px 0;
1008 }
1009
1010 /**
1011  * TAG CLOUD
1012  */
1013 #cloudtag {
1014     padding: 10px;
1015     text-align: center;
1016 }
1017
1018 #cloudtag, #cloudtag a {
1019     color: #000;
1020     text-decoration: none;
1021 }
1022
1023 #cloudtag .count {
1024     color: #7f7f7f;
1025 }
1026
1027 /**
1028  * Picture wall CSS
1029  */
1030 #picwall_container {
1031     margin: 0 10px 10px 10px;
1032     color: #fff;
1033     background-color: #000;
1034     clear: both;
1035 }
1036
1037 .picwall_pictureframe {
1038     background-color: #000;
1039     z-index: 5;
1040     position: relative;
1041     display: table-cell;
1042     vertical-align: middle;
1043     width: 90px;
1044     height: 90px;
1045     overflow: hidden;
1046     text-align: center;
1047     float: left;
1048 }
1049
1050 .b-lazy {
1051     -webkit-transition: opacity 500ms ease-in-out;
1052     -moz-transition: opacity 500ms ease-in-out;
1053     -o-transition: opacity 500ms ease-in-out;
1054     transition: opacity 500ms ease-in-out;
1055     opacity: 0;
1056 }
1057 .b-lazy.b-loaded {
1058     opacity: 1;
1059 }
1060
1061 .picwall_pictureframe img {
1062     max-width: 100%;
1063     height: auto;
1064     color: transparent;
1065 } /* Adapt the width of the image */
1066
1067 .picwall_pictureframe a {
1068     text-decoration: none;
1069 }
1070
1071 /* CSS to show title when hovering an image - no javascript required. */
1072 .picwall_pictureframe span.info {
1073     display: none;
1074 }
1075
1076 .picwall_pictureframe:hover span.info {
1077     display: block;
1078     position: absolute;
1079     top: 0;
1080     left: 0;
1081     width: 90px;
1082     font-weight: bold;
1083     font-size: 8pt;
1084     color: #fff;
1085     text-align: left;
1086     background-color: transparent;
1087     background-color: rgba(0, 0, 0, 0.4);
1088     /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
1089     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
1090     /* IE6\96IE9 */
1091     text-shadow: 2px 2px 1px #000000;
1092 }
1093
1094 /**
1095  * DAILY
1096  */
1097 .daily-desc {
1098     color: #7f7f7f;
1099     font-size: 0.8em;
1100 }
1101
1102 .daily-about a {
1103     color: #343434;
1104     text-decoration: none;
1105 }
1106
1107 .daily-about a:hover {
1108     color: #7f7f7f;
1109 }
1110
1111 .daily-about h3:before, .daily-about h3:after {
1112     display: block;
1113     content:"";
1114     background: linear-gradient(to right, #d5d4d4, #252525, #d5d4d4);
1115     height: 1px;
1116     width: 90%;
1117     margin: 10px auto;
1118 }
1119
1120 .daily-entry .daily-entry-title:after {
1121     display: block;
1122     content:"";
1123     background: linear-gradient(to right, #fff, #515151, #fff);
1124     height: 1px;
1125     width: 70%;
1126     margin: 5px auto;
1127 }
1128
1129 .daily-entry .daily-entry-title {
1130     margin: 10px 0 0 0;
1131 }
1132
1133 .daily-entry .daily-entry-title a {
1134     color: #000;
1135     text-decoration: none;
1136 }
1137
1138 .daily-entry .daily-entry-description {
1139     padding: 5px 5px 0 5px;
1140     font-size: 0.9em;
1141     text-align: justify;
1142 }
1143
1144 .daily-entry .daily-entry-tags {
1145     padding: 0 5px 5px 5px;
1146     font-size: 0.8em;
1147 }
1148
1149 .daily-entry-thumbnail {
1150     float: left;
1151     margin: 15px 5px 5px 5px;
1152 }
1153
1154 .daily-entry-description a {
1155     text-decoration: none;
1156     color: #1b926c;
1157 }
1158
1159 .daily-entry-description a:hover {
1160     text-shadow: 1px 1px #ddd;
1161 }
1162
1163 .daily-entry-description a:visited {
1164     color: #20b988;
1165 }