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