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