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