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