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 }
 609
 610 .page-form h2 {
 611     margin: 0 0 10px 0;
 612     padding: 10px 0;
 613     width: 100%;
 614     color: #b0ddce;
 615     background: #1b926c;
 616     text-align: center;
 617     border-radius: 5px 5px 0 0;
 618     border-bottom: 1px solid #797979;
 619 }
 620
 621 .page-form input[type="text"], .page-form input[type="password"] {
 622     margin: 10px 0;
 623     padding: 5px 5px 3px 15px;
 624     height: 30px;
 625     width: 80%;
 626     background: #1b926c;
 627     border: medium none currentColor;
 628     border-radius: 25px;
 629     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 630     color: #b0ddce;
 631 }
 632
 633 /* because chrome */
 634 .page-form input[type="text"]::-webkit-input-placeholder,
 635 .page-form input[type="password"]::-webkit-input-placeholder {
 636     color: #b0ddce;
 637 }
 638
 639 .page-form input[type="submit"] {
 640     margin: 10px 0;
 641     height: 35px;
 642     width: 150px;
 643     background: #1b926c;
 644     border: medium none currentColor;
 645     border-radius: 25px;
 646     box-shadow: 1px 1px 4px #0C7653, -1px -1px 6px #0C7653, -1px 1px 6px #0C7653, 1px -1px 6px #0C7653;
 647     font-size: 1.2em;
 648     font-weight: bold;
 649     color: #b0ddce;
 650 }
 651
 652 .page-form select {
 653     color: black;
 654 }
 655 /**
 656  * PAGE FORM - LIGHT
 657  */
 658 .page-form-light div, .page-form-light p {
 659     text-align: center;
 660 }
 661
 662 .page-form-light p {
 663     color: #b0ddce;
 664 }
 665
 666 /**
 667  * PAGE FORM - COMPLETE
 668  */
 669 .page-form-complete {
 670     #background: #ddd;
 671 }
 672
 673 .page-form-complete div, .page-form-complete p {
 674     color: #b0ddce;
 675 }
 676
 677 .page-form-complete .form-label, .page-form-complete .form-input {
 678     position: relative;
 679     height: 60px;
 680 }
 681
 682 .page-form-complete .form-label label,
 683 .page-form-complete .form-input input,
 684 .page-form-complete .timezone {
 685     position: absolute;
 686     top: 50%;
 687     transform: translateY(-50%);
 688 }
 689
 690 .page-form-complete .form-label label {
 691     text-align: right;
 692     right: 0;
 693     padding: 0 20px;
 694 }
 695
 696 .page-form-complete .label-name {
 697     font-weight: bold;
 698 }
 699
 700 .page-form-complete .label-desc {
 701     font-size: 0.7em;
 702 }
 703
 704 @media screen and (max-width: 64em) {
 705     .page-form-complete .form-label {
 706         height: inherit;
 707     }
 708
 709     .page-form-complete .form-label label,
 710     .page-form-complete .form-input input,
 711     .page-form-complete .timezone {
 712         position: inherit;
 713         top: inherit;
 714         transform: translateY(0);
 715     }
 716
 717     .page-form-complete .form-input input[type="checkbox"] {
 718         position: absolute;
 719         top: 50%;
 720         right: 50%;
 721         transform: translateY(-50%);
 722     }
 723
 724     .page-form-complete .form-input {
 725         text-align: center;
 726     }
 727
 728     .page-form-complete .form-label label {
 729         display: block;
 730         text-align: left;
 731         margin: 10px 0 0 0;
 732     }
 733
 734     .timezone-continent:after {
 735         content:"\a\a";
 736         white-space: pre;
 737     }
 738 }
 739
 740
 741 #page404 {
 742     color: #3f3f3f;
 743 }
 744
 745 /**
 746  * LOGIN
 747  */
 748 #login-form .remember-me {
 749     margin: 5px 0;
 750     color: #b0ddce;
 751     font-weight: bold;
 752 }
 753
 754 /**
 755  * CONTENT - LINKLIST ITEMS
 756  */
 757 .linklist-item {
 758     margin: 15px 0;
 759     background: #f5f5f5;
 760     box-shadow: 2px 2px 0.5em #797979;
 761 }
 762
 763 .linklist-item-title, .linklist-item-title h2  {
 764     margin: 0;
 765 }
 766
 767 .linklist-item-title {
 768     background: #20b988 url(../img/noise.png);
 769     border-bottom: 1px solid #1b926c;
 770     box-shadow: 1px 1px 0.2em #1b926c;
 771 }
 772
 773 .linklist-item-title h2 {
 774     padding: 3px 10px 0 10px;
 775     line-height: 25px;
 776 }
 777
 778 .linklist-item-title a {
 779     font-size: 0.7em;
 780     color: #d0fff0;
 781     text-decoration: none;
 782     vertical-align: middle;
 783     font-family: Roboto Slab, Arial, sans-serif;
 784 }
 785
 786 .linklist-item-title .linklist-link:visited {
 787     color: #ddd;
 788 }
 789
 790 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
 791     color: #fff;
 792 }
 793
 794
 795 .linklist-item-title .label-private {
 796     border: solid 1px #d0fff0;
 797     font-family: Arial, sans-serif;
 798     font-size: 0.65em;
 799 }
 800
 801 .linklist-item-title .fold-button {
 802     display: none;
 803 }
 804
 805 .linklist-item-editbuttons {
 806     float: right;
 807     padding: 5px;
 808 }
 809
 810 .linklist-item-editbuttons a {
 811     font-size: 1em;
 812 }
 813
 814 .linklist-item-description {
 815     padding: 10px;
 816     font-family: Roboto Slab, Arial, sans-serif;
 817 }
 818
 819 .linklist-item-description a {
 820     text-decoration: none;
 821     color: #1b926c;
 822 }
 823
 824 .linklist-item-description a:hover {
 825     text-shadow: 1px 1px #ddd;
 826 }
 827
 828 .linklist-item-description a:visited {
 829     color: #20b988;
 830 }
 831
 832 .linklist-item-infos {
 833     padding: 5px;
 834     background: #ddd url(../img/noise.png);
 835     border-top: 1px solid #989898;
 836     box-shadow: 1px -1px 0.2em #989898;
 837     color: #252525;
 838     font-size: 0.8em;
 839 }
 840
 841 .linklist-item-infos a {
 842     color: #505050;
 843     text-decoration: none;
 844 }
 845
 846 .linklist-item-infos a:hover {
 847     color: #000;
 848 }
 849
 850 .linklist-item-tags {
 851     margin: 0 0 5px 0;
 852 }
 853
 854 .label-tag {
 855     border: 1px solid #505050;
 856     font-size: 0.9em;
 857 }
 858
 859 .label-tag:hover {
 860     border: 1px solid #000;
 861 }
 862
 863 .linklist-plugin-icon {
 864     width: 13px;
 865     height: 13px;
 866 }
 867
 868 .linklist-item-infos-url {
 869     text-align: right;
 870     white-space: nowrap;
 871     overflow: hidden;
 872     text-overflow: ellipsis;
 873 }
 874
 875 /**
 876  * Search results
 877  */
 878 .search-result a {
 879     color: white;
 880     text-decoration: none;
 881 }
 882
 883 .search-result .label-tag {
 884     border-color: white;
 885 }
 886
 887 .search-result .label-tag .remove {
 888     border-left: white 1px solid;
 889     padding: 0 0 0 5px;
 890     margin: 0 0 0 5px;
 891 }
 892
 893 /**
 894  * TOOLS
 895  */
 896 .tools-item {
 897     margin: 10px 0;
 898 }