tpl/default/css/shaarli.css

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