tpl/default/css/shaarli.css

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