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