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