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