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 }
  19
  20 .label {
  21     display: inline-block;
  22     padding: .25em .4em;
  23     font-size: 75%;
  24     font-weight: 700;
  25     line-height: 1;
  26     text-align: center;
  27     white-space: nowrap;
  28     vertical-align: baseline;
  29     border-radius: .25rem;
  30 }
  31
  32 pre {
  33     max-width: 100%;
  34 }
  35
  36 @font-face {
  37     font-family: 'Roboto Slab';
  38     font-weight: 400;
  39     font-style: normal;
  40     src:
  41     local('Fira Sans'),
  42     local('Fira-Sans-regular'),
  43     url('../fonts/Fira-Sans-regular.woff2') format('woff2'),
  44     url('../fonts/Fira-Sans-regular.woff') format('woff');
  45 }
  46
  47 /**
  48  * Extends Pure grids responsive to hide items.
  49  * Use xx-0 to hide an item on xx screen.
  50  * Display it at any level with xx-visible.
  51  */
  52 .pure-u-0 { display: none !important; }
  53 @media screen and (min-width: 35.5em) {
  54     .pure-u-sm-0 { display: none !important; }
  55     .pure-u-sm-visible { display: inline-block !important; }
  56 }
  57 @media screen and (min-width: 48em) {
  58     .pure-u-md-0 { display: none !important; }
  59     .pure-u-md-visible { display: inline-block !important; }
  60 }
  61 @media screen and (min-width: 64em) {
  62     .pure-u-lg-0 { display: none !important; }
  63     .pure-u-lg-visible { display: inline-block !important; }
  64 }
  65 @media screen and (min-width: 80em) {
  66     .pure-u-xl-0 { display: none !important; }
  67     .pure-u-xl-visible { display: inline-block !important; }
  68 }
  69
  70 .pure-g [class*="pure-u"]{
  71     font-family: Roboto Slab, Arial, sans-serif;
  72 }
  73
  74 /**
  75  * Make pure-extras alert closable.
  76  */
  77 .pure-alert-closable .fa-times {
  78     float: right;
  79 }
  80 .pure-alert-close {
  81     cursor: pointer;
  82 }
  83
  84 .pure-alert-success {
  85     background-color: #1b926c;
  86 }
  87
  88 /**
  89  * MENU
  90  **/
  91 .shaarli-menu {
  92     position: fixed;
  93     top: 0;
  94     width: 100%;
  95     background: #1b926c;
  96     -webkit-font-smoothing: antialiased;
  97     /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
  98     max-height: 2.1em;
  99     transition: max-height 0.5s;
 100     overflow: hidden;
 101     z-index: 999;
 102 }
 103
 104 /* Chrome bugfix: with 100% height, it only displays the first element. */
 105 .pure-menu-item {
 106     height: inherit;
 107 }
 108
 109 .shaarli-menu.open {
 110     max-height: 500px;
 111     transition: max-height 0.75s;
 112 }
 113
 114 .pure-menu-selected {
 115     background: #1A694C;
 116 }
 117
 118 .pure-menu-link,
 119 .pure-menu-link:visited,
 120 .pure-menu-selected .pure-menu-link,
 121 .pure-menu-selected .pure-menu-link:visited {
 122     color: #b0ddce;
 123 }
 124
 125 .pure-menu-link:hover,
 126 .pure-menu-selected .pure-menu-link:hover {
 127     color: #d1fff0;
 128     background: transparent;
 129 }
 130
 131 .menu-toggle {
 132     width: 34px;
 133     height: 34px;
 134     position: absolute;
 135     top: 0;
 136     right: 0;
 137     display: none;
 138 }
 139
 140 .menu-toggle .bar {
 141     background-color: #b0ddce;
 142     display: block;
 143     width: 20px;
 144     height: 2px;
 145     border-radius: 100px;
 146     position: absolute;
 147     top: 18px;
 148     right: 7px;
 149     transition: all 0.5s;
 150 }
 151
 152 .menu-toggle .bar:first-child {
 153     transform: translateY(-6px);
 154 }
 155
 156 .menu-toggle.x .bar {
 157     transform: rotate(45deg);
 158 }
 159
 160 .menu-toggle.x .bar:first-child {
 161     transform: rotate(-45deg);
 162 }
 163
 164 @media screen and (max-width: 64em) {
 165     .menu-toggle {
 166         display: block;
 167     }
 168 }
 169
 170 /**
 171  * Header
 172  */
 173 #header {
 174     width: 100%;
 175     height: 150px;
 176     background: url(../img/noise.png), #1fa67a url(../img/logo2.png) no-repeat fixed 10px 2.5em;
 177 }
 178
 179 #header h1 {
 180     position: fixed;
 181     float: left;
 182     margin: 45px 0 0 125px;
 183     width: 55%;
 184     height: 100px;
 185 }
 186
 187 #header h1 a, #header h1 a:visited {
 188     /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */
 189     display: -ms-flexbox;
 190     display: flex;
 191     flex-direction: column;
 192     justify-content: center;
 193
 194     overflow: hidden;
 195     height: 100px;
 196     color: #b0ddce;
 197     text-decoration: none;
 198     z-index: 1;
 199
 200     font-family: Roboto Slab, Arial, sans-serif;
 201     font-size: 1.2em;
 202 }
 203
 204 #header h1 a:hover {
 205     color: #d1fff0;
 206 }
 207
 208 .header-buttons {
 209     text-align: right;
 210 }
 211
 212 #linkcount {
 213     /* position: fixed; */
 214     position: absolute;
 215     top: 40px;
 216     right: 10px;
 217     color: #b0ddce;
 218     font-size: 0.8em;
 219 }
 220
 221 #search {
 222     /**
 223      * Can't make it work with awesomplete list z-index. Any idea?
 224      * position: fixed;
 225      */
 226     position: absolute;
 227     top: 60px;
 228     right: 10px;
 229     width: 30%;
 230     text-align: right;
 231 }
 232
 233 #search input[type="text"] {
 234     margin: 0 0 5px 0;
 235     padding: 5px 5px 3px 15px;
 236     height: 20px;
 237     width: 140px;
 238     transition: width .5s ease;
 239     background: #1b926c;
 240     border: medium none currentColor;
 241     border-radius: 25px;
 242     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 243     color: #b0ddce;
 244 }
 245
 246 /* because chrome */
 247 #search input[type="text"]::-webkit-input-placeholder {
 248     color: #b0ddce;
 249 }
 250
 251 #search button {
 252     background: transparent;
 253     border: none;
 254     color: #b0ddce;
 255 }
 256
 257 #search button:hover {
 258     color: #fff;
 259 }
 260
 261 #header-login-form {
 262     height: 0;
 263     text-align: center;
 264     background: #1b926c;
 265     transition: 0.3s;
 266 }
 267
 268 #header-login-form.open {
 269     display: block;
 270     height: 30px;
 271     padding: 5px 0;
 272     box-shadow: 0 1px 1px 1px #797979;
 273 }
 274
 275 #header-login-form input[type="text"], #header-login-form input[type="password"], #header-login-form .remember-me {
 276     margin: 0 0 5px 0;
 277     padding: 5px 5px 3px 15px;
 278     height: 20px;
 279     width: 200px;
 280     background: #1fa67a;
 281     border: medium none currentColor;
 282     border-radius: 25px;
 283     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 284     color: #b0ddce;
 285 }
 286
 287 /* because chrome */
 288 #header-login-form input[type="text"]::-webkit-input-placeholder,
 289 #header-login-form input[type="password"]::-webkit-input-placeholder
 290 {
 291     color: #b0ddce;
 292 }
 293
 294 #header-login-form .remember-me {
 295     display: inline-block;
 296     width: auto;
 297     padding: 5px 20px 3px 20px;
 298     cursor: pointer;
 299 }
 300
 301 #header-login-form .remember-me label, #header-login-form .remember-me input {
 302     cursor: pointer;
 303 }
 304
 305 #header-login-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     border-radius: 25px;
 313     box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E;
 314     color: #b0ddce;
 315 }
 316
 317 #header-login-form input, #header-login-form .remember-me {
 318     transition: visibility 1s, opacity 1s;
 319     visibility: hidden;
 320     opacity: 0;
 321 }
 322
 323 #header-login-form.open input, #header-login-form.open .remember-me {
 324     visibility: visible;
 325     opacity: 1;
 326 }
 327
 328 .new-version-message {
 329     text-align: center;
 330 }
 331
 332 .new-version-message a {
 333     color: rgb(151, 96, 13);
 334     font-weight: bold;
 335 }
 336
 337 /**
 338  * CONTENT - GENERAL
 339  */
 340 #content {
 341     position: relative;
 342     /* Hack-ish way to only shadow the top part. */
 343     box-shadow: 0 -20px 20px -20px #797979;
 344     z-index: 2;
 345     background: url(../img/noise.png) #979797;
 346 }
 347
 348 @media screen and (max-width: 64em) {
 349     #content {
 350         margin: 2.1em 0 0 0;
 351     }
 352 }
 353
 354 @media screen and (min-width: 64em) {
 355     #content {
 356         /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
 357         margin-top: -4px;
 358     }
 359 }
 360
 361 /**
 362  * CONTENT - LINKLIST PAGING
 363  * 64em -> lg
 364  */
 365
 366
 367 .linklist-filters {
 368     margin: 10px 0;
 369     color: #252525;
 370     font-size: 0.9em;
 371 }
 372
 373 .linklist-filters a {
 374     padding: 2px 5px;
 375     text-decoration: none;
 376 }
 377
 378 .linklist-filters .filter-off {
 379     color: #252525;
 380     background: #c8c8c8;
 381 }
 382
 383 .linklist-filters .filter-on {
 384     color: #b0ddce;
 385     background: #1b926c;
 386 }
 387
 388 .linklist-pages {
 389     margin: 10px 0;
 390     color: #252525;
 391     text-align: center;
 392 }
 393
 394 .linklist-pages a {
 395     color: #252525;
 396     text-decoration: none;
 397 }
 398
 399 .linklist-pages a:hover {
 400     color: #fff;
 401 }
 402
 403 .linksperpage {
 404     margin: 10px 0;
 405     text-align: right;
 406     color: #252525;
 407     font-size: 0.9em;
 408 }
 409
 410 .linksperpage a {
 411     padding: 2px 5px;
 412     text-decoration: none;
 413     color: #252525;
 414     background: #c8c8c8;
 415     border: solid 1px #979797;
 416 }
 417
 418 .linksperpage form {
 419     display: inline;
 420     margin: 0 10px 0 0;
 421 }
 422
 423 .linksperpage input[type="text"] {
 424     width: 28px;
 425     height: 16px;
 426     margin: 0;
 427     padding: 3px 5px 3px 8px;
 428     background: #c8c8c8;
 429     border: medium none currentColor;
 430     --border-radius: 25px;
 431     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 432     color: #252525;
 433     font-size: 0.8em;
 434 }
 435
 436 /**
 437  * CONTENT - LINKLIST ITEMS
 438  */
 439 .linklist-item {
 440     margin: 15px 0;
 441     background: #f5f5f5;
 442     box-shadow: 2px 2px 0.5em #797979;
 443 }
 444
 445 .linklist-item-title, .linklist-item-title h2  {
 446     margin: 0;
 447     word-wrap: break-word;
 448 }
 449
 450 .linklist-item-title {
 451     background: #20b988 url(../img/noise.png);
 452     border-bottom: 1px solid #1b926c;
 453     box-shadow: 1px 1px 0.2em #1b926c;
 454 }
 455
 456 .linklist-item-title h2 {
 457     padding: 3px 10px 0 10px;
 458     line-height: 25px;
 459 }
 460
 461 .linklist-item-title a {
 462     font-size: 0.7em;
 463     color: #d0fff0;
 464     text-decoration: none;
 465     vertical-align: middle;
 466     font-family: Roboto Slab, Arial, sans-serif;
 467 }
 468
 469 .linklist-item-title .linklist-link:visited {
 470     color: #ddd;
 471 }
 472
 473 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
 474     color: #fff;
 475 }
 476
 477
 478 .linklist-item-title .label-private {
 479     border: solid 1px #d0fff0;
 480     font-family: Arial, sans-serif;
 481     font-size: 0.65em;
 482 }
 483
 484 .linklist-item-title .fold-button {
 485     display: none;
 486 }
 487
 488 .linklist-item-editbuttons {
 489     float: right;
 490     padding: 5px;
 491 }
 492
 493 .linklist-item-editbuttons a {
 494     font-size: 1em;
 495 }
 496
 497 .linklist-item-description {
 498     padding: 10px;
 499     font-family: Roboto Slab, Arial, sans-serif;
 500     word-wrap: break-word;
 501 }
 502
 503 .linklist-item-description a {
 504     text-decoration: none;
 505     color: #1b926c;
 506 }
 507
 508 .linklist-item-description a:hover {
 509     text-shadow: 1px 1px #ddd;
 510 }
 511
 512 .linklist-item-description a:visited {
 513     color: #20b988;
 514 }
 515
 516 .linklist-item-thumbnail {
 517     padding: 10px;
 518     float: left;
 519 }
 520
 521 .linklist-item-infos {
 522     padding: 5px 5px 0 5px;
 523     background: #ddd url(../img/noise.png);
 524     border-top: 1px solid #989898;
 525     box-shadow: 1px -1px 0.2em #989898;
 526     color: #252525;
 527 }
 528
 529 .linklist-item-infos a {
 530     color: #505050;
 531     text-decoration: none;
 532 }
 533
 534 .linklist-item-infos a:hover {
 535     color: #000;
 536 }
 537
 538 .linklist-item-tags {
 539     margin: 0 0 5px 0;
 540     font-size: 0.8em;
 541 }
 542
 543 .linklist-item-infos .label-tag {
 544     border: 1px solid #505050;
 545     font-size: 0.9em;
 546 }
 547
 548 .linklist-item-infos .label-tag:hover {
 549     border: 1px solid #000;
 550 }
 551
 552 .linklist-item-infos-dateblock {
 553     font-size: 0.9em;
 554 }
 555
 556 .linklist-plugin-icon {
 557     width: 13px;
 558     height: 13px;
 559 }
 560
 561 .linklist-item-infos-url {
 562     text-align: right;
 563     white-space: nowrap;
 564     overflow: hidden;
 565     text-overflow: ellipsis;
 566     font-size: 0.8em;
 567 }
 568
 569 /** 64em -> lg **/
 570 @media screen and (max-width: 64em) {
 571     .linklist-item-infos-url {
 572         text-align: left;
 573     }
 574 }
 575
 576 /**
 577  * Footer
 578  */
 579 #footer {
 580     margin: 20px 0;
 581     padding: 5px;
 582     text-align: center;
 583     color: #252525;
 584 }
 585
 586 #footer:before {
 587     display: block;
 588     content:"";
 589     background: linear-gradient(to right, #949393, #252525, #949393);
 590     height: 1px;
 591     width: 80%;
 592     margin: 10px auto;
 593 }
 594
 595 #footer a {
 596     color: #252525;
 597 }
 598
 599 /**
 600  * Login page
 601  */
 602 .page-form {
 603     margin: 20px 0 0 0;
 604     background: url(../img/noise.png) #1fa67a;
 605     border-radius: 5px;
 606     box-shadow: 1px 1px 2px #797979;
 607 }
 608
 609 .page-form h2 {
 610     margin: 0 0 10px 0;
 611     padding: 10px 0;
 612     width: 100%;
 613     color: #b0ddce;
 614     background: #1b926c;
 615     text-align: center;
 616     border-radius: 5px 5px 0 0;
 617     border-bottom: 1px solid #797979;
 618 }
 619
 620 .page-form div, .page-form p {
 621     text-align: center;
 622 }
 623
 624 .page-form p {
 625     color: #b0ddce;
 626 }
 627
 628 .page-form input[type="text"], .page-form input[type="password"] {
 629     margin: 10px 0;
 630     padding: 5px 5px 3px 15px;
 631     height: 30px;
 632     width: 80%;
 633     background: #1b926c;
 634     border: medium none currentColor;
 635     border-radius: 25px;
 636     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 637     color: #b0ddce;
 638 }
 639
 640 /* because chrome */
 641 .page-form input[type="text"]::-webkit-input-placeholder,
 642 .page-form input[type="password"]::-webkit-input-placeholder {
 643     color: #b0ddce;
 644 }
 645
 646 #login-form .remember-me {
 647     margin: 5px 0;
 648     color: #b0ddce;
 649     font-weight: bold;
 650 }
 651
 652 .page-form input[type="submit"] {
 653     margin: 10px 0;
 654     height: 35px;
 655     width: 150px;
 656     background: #1b926c;
 657     border: medium none currentColor;
 658     border-radius: 25px;
 659     box-shadow: 1px 1px 4px #0C7653, -1px -1px 6px #0C7653, -1px 1px 6px #0C7653, 1px -1px 6px #0C7653;
 660     font-size: 1.2em;
 661     font-weight: bold;
 662     color: #b0ddce;
 663 }
 664
 665 #page404 {
 666     color: #3f3f3f;
 667 }
 668
 669 /**
 670  * CONTENT - LINKLIST ITEMS
 671  */
 672 .linklist-item {
 673     margin: 15px 0;
 674     background: #f5f5f5;
 675     box-shadow: 2px 2px 0.5em #797979;
 676 }
 677
 678 .linklist-item-title, .linklist-item-title h2  {
 679     margin: 0;
 680 }
 681
 682 .linklist-item-title {
 683     background: #20b988 url(../img/noise.png);
 684     border-bottom: 1px solid #1b926c;
 685     box-shadow: 1px 1px 0.2em #1b926c;
 686 }
 687
 688 .linklist-item-title h2 {
 689     padding: 3px 10px 0 10px;
 690     line-height: 25px;
 691 }
 692
 693 .linklist-item-title a {
 694     font-size: 0.7em;
 695     color: #d0fff0;
 696     text-decoration: none;
 697     vertical-align: middle;
 698     font-family: Roboto Slab, Arial, sans-serif;
 699 }
 700
 701 .linklist-item-title .linklist-link:visited {
 702     color: #ddd;
 703 }
 704
 705 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
 706     color: #fff;
 707 }
 708
 709
 710 .linklist-item-title .label-private {
 711     border: solid 1px #d0fff0;
 712     font-family: Arial, sans-serif;
 713     font-size: 0.65em;
 714 }
 715
 716 .linklist-item-title .fold-button {
 717     display: none;
 718 }
 719
 720 .linklist-item-editbuttons {
 721     float: right;
 722     padding: 5px;
 723 }
 724
 725 .linklist-item-editbuttons a {
 726     font-size: 1em;
 727 }
 728
 729 .linklist-item-description {
 730     padding: 10px;
 731     font-family: Roboto Slab, Arial, sans-serif;
 732 }
 733
 734 .linklist-item-description a {
 735     text-decoration: none;
 736     color: #1b926c;
 737 }
 738
 739 .linklist-item-description a:hover {
 740     text-shadow: 1px 1px #ddd;
 741 }
 742
 743 .linklist-item-description a:visited {
 744     color: #20b988;
 745 }
 746
 747 .linklist-item-infos {
 748     padding: 5px;
 749     background: #ddd url(../img/noise.png);
 750     border-top: 1px solid #989898;
 751     box-shadow: 1px -1px 0.2em #989898;
 752     color: #252525;
 753     font-size: 0.8em;
 754 }
 755
 756 .linklist-item-infos a {
 757     color: #505050;
 758     text-decoration: none;
 759 }
 760
 761 .linklist-item-infos a:hover {
 762     color: #000;
 763 }
 764
 765 .linklist-item-tags {
 766     margin: 0 0 5px 0;
 767 }
 768
 769 .linklist-item-infos .label-tag {
 770     border: 1px solid #505050;
 771     font-size: 0.9em;
 772 }
 773
 774 .linklist-item-infos .label-tag:hover {
 775     border: 1px solid #000;
 776 }
 777
 778 .linklist-plugin-icon {
 779     width: 13px;
 780     height: 13px;
 781 }
 782
 783 .linklist-item-infos-url {
 784     text-align: right;
 785     white-space: nowrap;
 786     overflow: hidden;
 787     text-overflow: ellipsis;
 788 }
 789
 790 /**
 791  * TOOLS
 792  */
 793 .tools-item {
 794     margin: 10px 0;
 795 }