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-selected {
 116     background: #b0ddce;
 117 }
 118
 119 .pure-menu-link,
 120 .pure-menu-link:visited,
 121 .pure-menu-selected .pure-menu-link,
 122 .pure-menu-selected .pure-menu-link:visited {
 123     color: #b0ddce;
 124 }
 125
 126 .pure-menu-link:hover,
 127 .pure-menu-selected .pure-menu-link:hover {
 128     color: #d1fff0;
 129     background: transparent;
 130 }
 131
 132 .menu-toggle {
 133     width: 34px;
 134     height: 34px;
 135     position: absolute;
 136     top: 0;
 137     right: 0;
 138     display: none;
 139 }
 140
 141 .menu-toggle .bar {
 142     background-color: #b0ddce;
 143     display: block;
 144     width: 20px;
 145     height: 2px;
 146     border-radius: 100px;
 147     position: absolute;
 148     top: 18px;
 149     right: 7px;
 150     transition: all 0.5s;
 151 }
 152
 153 .menu-toggle .bar:first-child {
 154     transform: translateY(-6px);
 155 }
 156
 157 .menu-toggle.x .bar {
 158     transform: rotate(45deg);
 159 }
 160
 161 .menu-toggle.x .bar:first-child {
 162     transform: rotate(-45deg);
 163 }
 164
 165 @media screen and (max-width: 64em) {
 166     .menu-toggle {
 167         display: block;
 168     }
 169 }
 170
 171 /**
 172  * Header
 173  */
 174 #header {
 175     width: 100%;
 176     height: 150px;
 177     background: url(../img/noise.png), #1fa67a url(../img/logo2.png) no-repeat fixed 10px 2.5em;
 178 }
 179
 180 #header h1 {
 181     position: fixed;
 182     float: left;
 183     margin: 45px 0 0 125px;
 184     width: 55%;
 185     height: 100px;
 186 }
 187
 188 #header h1 a, #header h1 a:visited {
 189     /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */
 190     display: -ms-flexbox;
 191     display: flex;
 192     flex-direction: column;
 193     justify-content: center;
 194
 195     overflow: hidden;
 196     height: 100px;
 197     color: #b0ddce;
 198     text-decoration: none;
 199     z-index: 1;
 200
 201     font-family: Roboto Slab, Arial, sans-serif;
 202     font-size: 1.2em;
 203 }
 204
 205 #header h1 a:hover {
 206     color: #d1fff0;
 207 }
 208
 209 .header-buttons {
 210     text-align: right;
 211 }
 212
 213 #linkcount {
 214     /* position: fixed; */
 215     position: absolute;
 216     top: 40px;
 217     right: 10px;
 218     color: #b0ddce;
 219     font-size: 0.8em;
 220 }
 221
 222 #search {
 223     /**
 224      * Can't make it work with awesomplete list z-index. Any idea?
 225      * position: fixed;
 226      */
 227     position: absolute;
 228     top: 60px;
 229     right: 10px;
 230     width: 30%;
 231     text-align: right;
 232 }
 233
 234 #search input[type="text"] {
 235     margin: 0 0 5px 0;
 236     padding: 5px 5px 3px 15px;
 237     height: 20px;
 238     width: 140px;
 239     transition: width .5s ease;
 240     background: #1b926c;
 241     border: medium none currentColor;
 242     border-radius: 25px;
 243     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 244     color: #b0ddce;
 245 }
 246
 247 /* because chrome */
 248 #search input[type="text"]::-webkit-input-placeholder {
 249     color: #b0ddce;
 250 }
 251
 252 #search button {
 253     background: transparent;
 254     border: none;
 255     color: #b0ddce;
 256 }
 257
 258 #search button:hover {
 259     color: #fff;
 260 }
 261
 262 #header-login-form {
 263     height: 0;
 264     text-align: center;
 265     background: #1b926c;
 266     transition: 0.3s;
 267 }
 268
 269 #header-login-form.open {
 270     display: block;
 271     height: 30px;
 272     padding: 5px 0;
 273     box-shadow: 0 1px 1px 1px #797979;
 274 }
 275
 276 #header-login-form input[type="text"], #header-login-form input[type="password"], #header-login-form .remember-me {
 277     margin: 0 0 5px 0;
 278     padding: 5px 5px 3px 15px;
 279     height: 20px;
 280     width: 200px;
 281     background: #1fa67a;
 282     border: medium none currentColor;
 283     border-radius: 25px;
 284     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 285     color: #b0ddce;
 286 }
 287
 288 /* because chrome */
 289 #header-login-form input[type="text"]::-webkit-input-placeholder,
 290 #header-login-form input[type="password"]::-webkit-input-placeholder
 291 {
 292     color: #b0ddce;
 293 }
 294
 295 #header-login-form .remember-me {
 296     display: inline-block;
 297     width: auto;
 298     padding: 5px 20px 3px 20px;
 299     cursor: pointer;
 300 }
 301
 302 #header-login-form .remember-me label, #header-login-form .remember-me input {
 303     cursor: pointer;
 304 }
 305
 306 #header-login-form input[type="submit"] {
 307     display: inline-block;
 308     margin: 0 0 5px 0;
 309     height: 25px;
 310     width: 100px;
 311     background: #0C7653;
 312     border: medium none currentColor;
 313     border-radius: 25px;
 314     box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E;
 315     color: #b0ddce;
 316 }
 317
 318 #header-login-form input, #header-login-form .remember-me {
 319     transition: visibility 1s, opacity 1s;
 320     visibility: hidden;
 321     opacity: 0;
 322 }
 323
 324 #header-login-form.open input, #header-login-form.open .remember-me {
 325     visibility: visible;
 326     opacity: 1;
 327 }
 328
 329 .new-version-message {
 330     text-align: center;
 331 }
 332
 333 .new-version-message a {
 334     color: rgb(151, 96, 13);
 335     font-weight: bold;
 336 }
 337
 338 /**
 339  * CONTENT - GENERAL
 340  */
 341 #content {
 342     position: relative;
 343     /* Hack-ish way to only shadow the top part. */
 344     box-shadow: 0 -20px 20px -20px #797979;
 345     z-index: 2;
 346     background: url(../img/noise.png) #979797;
 347 }
 348
 349 @media screen and (max-width: 64em) {
 350     #content {
 351         margin: 2.1em 0 0 0;
 352     }
 353 }
 354
 355 @media screen and (min-width: 64em) {
 356     #content {
 357         /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
 358         margin-top: -4px;
 359     }
 360 }
 361
 362 /**
 363  * CONTENT - LINKLIST PAGING
 364  * 64em -> lg
 365  */
 366
 367
 368 .linklist-filters {
 369     margin: 10px 0;
 370     color: #252525;
 371     font-size: 0.9em;
 372 }
 373
 374 .linklist-filters a {
 375     padding: 2px 5px;
 376     text-decoration: none;
 377 }
 378
 379 .linklist-filters .filter-off {
 380     color: #252525;
 381     background: #c8c8c8;
 382 }
 383
 384 .linklist-filters .filter-on {
 385     color: #b0ddce;
 386     background: #1b926c;
 387 }
 388
 389 .linklist-pages {
 390     margin: 10px 0;
 391     color: #252525;
 392     text-align: center;
 393 }
 394
 395 .linklist-pages a {
 396     color: #252525;
 397     text-decoration: none;
 398 }
 399
 400 .linklist-pages a:hover {
 401     color: #fff;
 402 }
 403
 404 .linksperpage {
 405     margin: 10px 0;
 406     text-align: right;
 407     color: #252525;
 408     font-size: 0.9em;
 409 }
 410
 411 .linksperpage a {
 412     padding: 2px 5px;
 413     text-decoration: none;
 414     color: #252525;
 415     background: #c8c8c8;
 416     border: solid 1px #979797;
 417 }
 418
 419 .linksperpage form {
 420     display: inline;
 421     margin: 0 10px 0 0;
 422 }
 423
 424 .linksperpage input[type="text"] {
 425     width: 28px;
 426     height: 16px;
 427     margin: 0;
 428     padding: 3px 5px 3px 8px;
 429     background: #c8c8c8;
 430     border: medium none currentColor;
 431     --border-radius: 25px;
 432     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 433     color: #252525;
 434     font-size: 0.8em;
 435 }
 436
 437 /**
 438  * CONTENT - LINKLIST ITEMS
 439  */
 440 .linklist-item {
 441     margin: 15px 0;
 442     background: #f5f5f5;
 443     box-shadow: 2px 2px 0.5em #797979;
 444 }
 445
 446 .linklist-item-title, .linklist-item-title h2  {
 447     margin: 0;
 448     word-wrap: break-word;
 449 }
 450
 451 .linklist-item-title {
 452     background: #20b988 url(../img/noise.png);
 453     border-bottom: 1px solid #1b926c;
 454     box-shadow: 1px 1px 0.2em #1b926c;
 455 }
 456
 457 .linklist-item-title h2 {
 458     padding: 3px 10px 0 10px;
 459     line-height: 25px;
 460 }
 461
 462 .linklist-item-title a {
 463     font-size: 0.7em;
 464     color: #d0fff0;
 465     text-decoration: none;
 466     vertical-align: middle;
 467     font-family: Roboto Slab, Arial, sans-serif;
 468 }
 469
 470 .linklist-item-title .linklist-link:visited {
 471     color: #ddd;
 472 }
 473
 474 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
 475     color: #fff;
 476 }
 477
 478
 479 .linklist-item-title .label-private {
 480     border: solid 1px #d0fff0;
 481     font-family: Arial, sans-serif;
 482     font-size: 0.65em;
 483 }
 484
 485 .linklist-item-title .fold-button {
 486     display: none;
 487 }
 488
 489 .linklist-item-editbuttons {
 490     float: right;
 491     padding: 5px;
 492 }
 493
 494 .linklist-item-editbuttons a {
 495     font-size: 1em;
 496 }
 497
 498 .linklist-item-description {
 499     padding: 10px;
 500     font-family: Roboto Slab, Arial, sans-serif;
 501     word-wrap: break-word;
 502 }
 503
 504 .linklist-item-description a {
 505     text-decoration: none;
 506     color: #1b926c;
 507 }
 508
 509 .linklist-item-description a:hover {
 510     text-shadow: 1px 1px #ddd;
 511 }
 512
 513 .linklist-item-description a:visited {
 514     color: #20b988;
 515 }
 516
 517 .linklist-item-thumbnail {
 518     padding: 10px;
 519     float: left;
 520 }
 521
 522 .linklist-item-infos {
 523     padding: 5px 5px 0 5px;
 524     background: #ddd url(../img/noise.png);
 525     border-top: 1px solid #989898;
 526     box-shadow: 1px -1px 0.2em #989898;
 527     color: #252525;
 528 }
 529
 530 .linklist-item-infos a {
 531     color: #505050;
 532     text-decoration: none;
 533 }
 534
 535 .linklist-item-infos a:hover {
 536     color: #000;
 537 }
 538
 539 .linklist-item-infos .linklist-item-tags {
 540     margin: 0 0 5px 0;
 541     font-size: 0.8em;
 542 }
 543
 544 .linklist-item-infos .linklist-item-infos .label-tag {
 545     border: 1px solid #505050;
 546     font-size: 0.9em;
 547 }
 548
 549 .linklist-item-infos .label-tag:hover {
 550     border: 1px solid #000;
 551 }
 552
 553 .linklist-item-infos-dateblock {
 554     font-size: 0.9em;
 555 }
 556
 557 .linklist-plugin-icon {
 558     width: 13px;
 559     height: 13px;
 560 }
 561
 562 .linklist-item-infos-url {
 563     text-align: right;
 564     white-space: nowrap;
 565     overflow: hidden;
 566     text-overflow: ellipsis;
 567     font-size: 0.8em;
 568 }
 569
 570 /** 64em -> lg **/
 571 @media screen and (max-width: 64em) {
 572     .linklist-item-infos-url {
 573         text-align: left;
 574     }
 575 }
 576
 577 /**
 578  * Footer
 579  */
 580 #footer {
 581     margin: 20px 0;
 582     padding: 5px;
 583     text-align: center;
 584     color: #252525;
 585 }
 586
 587 #footer:before {
 588     display: block;
 589     content:"";
 590     background: linear-gradient(to right, #949393, #252525, #949393);
 591     height: 1px;
 592     width: 80%;
 593     margin: 10px auto;
 594 }
 595
 596 #footer a {
 597     color: #252525;
 598 }
 599
 600 /**
 601  * PAGE FORM
 602  */
 603 .page-form {
 604     margin: 20px 0 0 0;
 605     background: url(../img/noise.png) #1fa67a;
 606     border-radius: 5px;
 607     box-shadow: 1px 1px 2px #797979;
 608     color: #b0ddce;
 609 }
 610
 611 .page-form h2 {
 612     margin: 0 0 10px 0;
 613     padding: 10px 0;
 614     width: 100%;
 615     color: #b0ddce;
 616     background: #1b926c;
 617     text-align: center;
 618     border-radius: 5px 5px 0 0;
 619     border-bottom: 1px solid #797979;
 620 }
 621
 622 .page-form input[type="text"],
 623 .page-form input[type="password"],
 624 .page-form textarea {
 625     margin: 10px 0;
 626     padding: 5px 5px 3px 15px;
 627     height: 30px;
 628     width: 80%;
 629     background: #1b926c;
 630     border: medium none currentColor;
 631     border-radius: 25px;
 632     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 633     color: #b0ddce;
 634 }
 635
 636 .page-form textarea {
 637     height: 240px;
 638     resize: vertical;
 639     overflow-y: auto;
 640     word-wrap:break-word
 641 }
 642
 643 /* because chrome */
 644 .page-form input[type="text"]::-webkit-input-placeholder,
 645 .page-form input[type="password"]::-webkit-input-placeholder {
 646     color: #b0ddce;
 647 }
 648
 649 .page-form input[type="submit"] {
 650     margin: 10px 0;
 651     height: 35px;
 652     width: 150px;
 653     background: #1b926c;
 654     border: medium none currentColor;
 655     border-radius: 25px;
 656     box-shadow: 1px 1px 4px #0C7653, -1px -1px 6px #0C7653, -1px 1px 6px #0C7653, 1px -1px 6px #0C7653;
 657     font-size: 1.2em;
 658     font-weight: bold;
 659     color: #b0ddce;
 660 }
 661
 662 .page-form select {
 663     color: black;
 664 }
 665 /**
 666  * PAGE FORM - LIGHT
 667  */
 668 .page-form-light div, .page-form-light p {
 669     text-align: center;
 670 }
 671
 672 /**
 673  * PAGE FORM - COMPLETE
 674  */
 675 .page-form-complete {
 676     #background: #ddd;
 677 }
 678
 679 .page-form-complete div, .page-form-complete p {
 680     color: #b0ddce;
 681 }
 682
 683 .page-form-complete .form-label, .page-form-complete .form-input {
 684     position: relative;
 685     height: 60px;
 686 }
 687
 688 .page-form-complete .form-label label,
 689 .page-form-complete .form-input input,
 690 .page-form-complete .timezone {
 691     position: absolute;
 692     top: 50%;
 693     transform: translateY(-50%);
 694 }
 695
 696 .page-form-complete .form-label label {
 697     text-align: right;
 698     right: 0;
 699     padding: 0 20px;
 700 }
 701
 702 .page-form-complete .label-name {
 703     font-weight: bold;
 704 }
 705
 706 .page-form-complete .label-desc {
 707     font-size: 0.7em;
 708 }
 709
 710 @media screen and (max-width: 64em) {
 711     .page-form-complete .form-label {
 712         height: inherit;
 713     }
 714
 715     .page-form-complete .form-label label,
 716     .page-form-complete .form-input input,
 717     .page-form-complete .timezone {
 718         position: inherit;
 719         top: inherit;
 720         transform: translateY(0);
 721     }
 722
 723     .page-form-complete .form-input input[type="checkbox"] {
 724         position: absolute;
 725         top: 50%;
 726         right: 50%;
 727         transform: translateY(-50%);
 728     }
 729
 730     .page-form-complete .form-input {
 731         text-align: center;
 732     }
 733
 734     .page-form-complete .form-label label {
 735         display: block;
 736         text-align: left;
 737         margin: 10px 0 0 0;
 738     }
 739
 740     .timezone-continent:after {
 741         content:"\a\a";
 742         white-space: pre;
 743     }
 744 }
 745
 746
 747 #page404 {
 748     color: #3f3f3f;
 749 }
 750
 751 /**
 752  * LOGIN
 753  */
 754 #login-form .remember-me {
 755     margin: 5px 0;
 756     color: #b0ddce;
 757     font-weight: bold;
 758 }
 759
 760 /**
 761  * CONTENT - LINKLIST ITEMS
 762  */
 763 .linklist-item {
 764     margin: 15px 0;
 765     background: #f5f5f5;
 766     box-shadow: 2px 2px 0.5em #797979;
 767 }
 768
 769 .linklist-item-title, .linklist-item-title h2  {
 770     margin: 0;
 771 }
 772
 773 .linklist-item-title {
 774     background: #20b988 url(../img/noise.png);
 775     border-bottom: 1px solid #1b926c;
 776     box-shadow: 1px 1px 0.2em #1b926c;
 777 }
 778
 779 .linklist-item-title h2 {
 780     padding: 3px 10px 0 10px;
 781     line-height: 25px;
 782 }
 783
 784 .linklist-item-title a {
 785     font-size: 0.7em;
 786     color: #d0fff0;
 787     text-decoration: none;
 788     vertical-align: middle;
 789     font-family: Roboto Slab, Arial, sans-serif;
 790 }
 791
 792 .linklist-item-title .linklist-link:visited {
 793     color: #ddd;
 794 }
 795
 796 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
 797     color: #fff;
 798 }
 799
 800 .linklist-item-title .label-private {
 801     border: solid 1px #d0fff0;
 802     font-family: Arial, sans-serif;
 803     font-size: 0.65em;
 804 }
 805
 806 .linklist-item-title .fold-button {
 807     display: none;
 808 }
 809
 810 .linklist-item-editbuttons {
 811     float: right;
 812     padding: 5px;
 813 }
 814
 815 .linklist-item-editbuttons a {
 816     font-size: 1em;
 817 }
 818
 819 .linklist-item-description {
 820     padding: 10px;
 821     font-family: Roboto Slab, Arial, sans-serif;
 822 }
 823
 824 .linklist-item-description a {
 825     text-decoration: none;
 826     color: #1b926c;
 827 }
 828
 829 .linklist-item-description a:hover {
 830     text-shadow: 1px 1px #ddd;
 831 }
 832
 833 .linklist-item-description a:visited {
 834     color: #20b988;
 835 }
 836
 837 .linklist-item-infos {
 838     padding: 5px;
 839     background: #ddd url(../img/noise.png);
 840     border-top: 1px solid #989898;
 841     box-shadow: 1px -1px 0.2em #989898;
 842     color: #252525;
 843     font-size: 0.8em;
 844 }
 845
 846 .linklist-item-infos a {
 847     color: #505050;
 848     text-decoration: none;
 849 }
 850
 851 .linklist-item-infos a:hover {
 852     color: #000;
 853 }
 854
 855 .linklist-item-tags {
 856     margin: 0 0 5px 0;
 857 }
 858
 859 .label-tag {
 860     border: 1px solid #505050;
 861     font-size: 0.9em;
 862 }
 863
 864 .label-tag:hover {
 865     border: 1px solid #000;
 866 }
 867
 868 .linklist-plugin-icon {
 869     width: 13px;
 870     height: 13px;
 871 }
 872
 873 .linklist-item-infos-url {
 874     text-align: right;
 875     white-space: nowrap;
 876     overflow: hidden;
 877     text-overflow: ellipsis;
 878 }
 879
 880 /**
 881  * Search results
 882  */
 883 .search-result a {
 884     color: white;
 885     text-decoration: none;
 886 }
 887
 888 .search-result .label-tag {
 889     border-color: white;
 890 }
 891
 892 .search-result .label-tag .remove {
 893     border-left: white 1px solid;
 894     padding: 0 0 0 5px;
 895     margin: 0 0 0 5px;
 896 }
 897
 898 /**
 899  * TOOLS
 900  */
 901 .tools-item {
 902     margin: 10px 0;
 903 }