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     color: #b0ddce;
 609 }
 610
 611 .page-form h2 {
 612     margin: 0 0 10px 0;
 613     padding: 10px 0;
 614     width: 100%;
 615     color: #b0ddce;
 616     background: #1b926c;
 617     text-align: center;
 618     border-radius: 5px 5px 0 0;
 619     border-bottom: 1px solid #797979;
 620 }
 621
 622 .page-form h3 {
 623     text-align: center;
 624 }
 625
 626 .page-form a {
 627     color: #b0ddce;
 628     font-weight: bold;
 629 }
 630
 631 .page-form input[type="text"],
 632 .page-form input[type="password"],
 633 .page-form textarea {
 634     margin: 10px 0;
 635     padding: 5px 5px 3px 15px;
 636     height: 30px;
 637     width: 80%;
 638     background: #1b926c;
 639     border: medium none currentColor;
 640     border-radius: 25px;
 641     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 642     color: #b0ddce;
 643 }
 644
 645 .page-form textarea {
 646     height: 240px;
 647     padding: 15px 5px 3px 15px;
 648     resize: vertical;
 649     overflow-y: auto;
 650     word-wrap:break-word
 651 }
 652
 653 /* because chrome */
 654 .page-form input[type="text"]::-webkit-input-placeholder,
 655 .page-form input[type="password"]::-webkit-input-placeholder {
 656     color: #b0ddce;
 657 }
 658
 659 .page-form input[type="submit"] {
 660     margin: 15px 5px;
 661     height: 35px;
 662     width: 150px;
 663     background: #1b926c;
 664     border: medium none currentColor;
 665     border-radius: 25px;
 666     box-shadow: 1px 1px 4px #0C7653, -1px -1px 6px #0C7653, -1px 1px 6px #0C7653, 1px -1px 6px #0C7653;
 667     font-size: 1.2em;
 668     font-weight: bold;
 669     color: #b0ddce;
 670 }
 671
 672 .page-form select {
 673     color: black;
 674 }
 675 /**
 676  * PAGE FORM - LIGHT
 677  */
 678 .page-form-light div, .page-form-light p {
 679     text-align: center;
 680 }
 681
 682 /**
 683  * PAGE FORM - COMPLETE
 684  */
 685 .page-form-complete {
 686     #background: #ddd;
 687 }
 688
 689 .page-form-complete div, .page-form-complete p {
 690     color: #b0ddce;
 691 }
 692
 693 .page-form-complete .form-label, .page-form-complete .form-input {
 694     position: relative;
 695     height: 60px;
 696 }
 697
 698 .page-form-complete .form-label label,
 699 .page-form-complete .form-input input,
 700 .page-form-complete .timezone {
 701     position: absolute;
 702     top: 50%;
 703     transform: translateY(-50%);
 704 }
 705
 706 .page-form-complete .form-label label {
 707     text-align: right;
 708     right: 0;
 709     padding: 0 20px;
 710 }
 711
 712 .page-form-complete .label-name {
 713     font-weight: bold;
 714 }
 715
 716 .page-form-complete .label-desc {
 717     font-size: 0.7em;
 718 }
 719
 720 .page-form section {
 721     margin-top: 20px;
 722 }
 723
 724
 725 .page-form table {
 726     margin: auto;
 727     width: 90%;
 728 }
 729
 730 .page-form table .order {
 731     text-decoration: none;
 732 }
 733
 734 .page-form table, .page-form th, .page-form td {
 735     border-width: 1px 0;
 736     border-style: solid;
 737     border-color: #b0ddce;
 738 }
 739
 740 .page-form th, .page-form td {
 741     padding: 5px;
 742
 743 }
 744
 745 /* Awesomeplete fix */
 746 .page-form .awesomplete {
 747     width: 80%;
 748 }
 749
 750 .page-form .awesomplete input {
 751     width: 100%;
 752 }
 753
 754 .page-form div.awesomplete > ul {
 755     color: black;
 756 }
 757
 758 @media screen and (max-width: 64em) {
 759     .page-form-complete .form-label {
 760         height: inherit;
 761     }
 762
 763     .page-form-complete .form-label label,
 764     .page-form-complete .form-input input,
 765     .page-form-complete .timezone {
 766         position: inherit;
 767         top: inherit;
 768         transform: translateY(0);
 769     }
 770
 771     .page-form-complete .form-input input[type="checkbox"] {
 772         position: absolute;
 773         top: 50%;
 774         right: 50%;
 775         transform: translateY(-50%);
 776     }
 777
 778     .page-form-complete .form-input {
 779         text-align: center;
 780     }
 781
 782     .page-form-complete .form-label label {
 783         display: block;
 784         text-align: left;
 785         margin: 10px 0 0 0;
 786     }
 787
 788     .timezone-continent:after {
 789         content:"\a\a";
 790         white-space: pre;
 791     }
 792
 793     .page-form-complete .radio-buttons {
 794         text-align: left;
 795         padding: 5px 15px;
 796     }
 797 }
 798
 799
 800 #page404 {
 801     color: #3f3f3f;
 802 }
 803
 804 /**
 805  * LOGIN
 806  */
 807 #login-form .remember-me {
 808     margin: 5px 0;
 809     color: #b0ddce;
 810     font-weight: bold;
 811 }
 812
 813 /**
 814  * CONTENT - LINKLIST ITEMS
 815  */
 816 .linklist-item {
 817     margin: 15px 0;
 818     background: #f5f5f5;
 819     box-shadow: 2px 2px 0.5em #797979;
 820 }
 821
 822 .linklist-item-title, .linklist-item-title h2  {
 823     margin: 0;
 824 }
 825
 826 .linklist-item-title {
 827     background: #20b988 url(../img/noise.png);
 828     border-bottom: 1px solid #1b926c;
 829     box-shadow: 1px 1px 0.2em #1b926c;
 830 }
 831
 832 .linklist-item-title h2 {
 833     padding: 3px 10px 0 10px;
 834     line-height: 25px;
 835 }
 836
 837 .linklist-item-title a {
 838     font-size: 0.7em;
 839     color: #d0fff0;
 840     text-decoration: none;
 841     vertical-align: middle;
 842     font-family: Roboto Slab, Arial, sans-serif;
 843 }
 844
 845 .linklist-item-title .linklist-link:visited {
 846     color: #ddd;
 847 }
 848
 849 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
 850     color: #fff;
 851 }
 852
 853 .linklist-item-title .label-private {
 854     border: solid 1px #d0fff0;
 855     font-family: Arial, sans-serif;
 856     font-size: 0.65em;
 857 }
 858
 859 .linklist-item-title .fold-button {
 860     display: none;
 861 }
 862
 863 .linklist-item-editbuttons {
 864     float: right;
 865     padding: 5px;
 866 }
 867
 868 .linklist-item-editbuttons a {
 869     font-size: 1em;
 870 }
 871
 872 .linklist-item-description {
 873     padding: 10px;
 874     font-family: Roboto Slab, Arial, sans-serif;
 875 }
 876
 877 .linklist-item-description a {
 878     text-decoration: none;
 879     color: #1b926c;
 880 }
 881
 882 .linklist-item-description a:hover {
 883     text-shadow: 1px 1px #ddd;
 884 }
 885
 886 .linklist-item-description a:visited {
 887     color: #20b988;
 888 }
 889
 890 .linklist-item-infos {
 891     padding: 5px;
 892     background: #ddd url(../img/noise.png);
 893     border-top: 1px solid #989898;
 894     box-shadow: 1px -1px 0.2em #989898;
 895     color: #252525;
 896     font-size: 0.8em;
 897 }
 898
 899 .linklist-item-infos a {
 900     color: #505050;
 901     text-decoration: none;
 902 }
 903
 904 .linklist-item-infos a:hover {
 905     color: #000;
 906 }
 907
 908 .linklist-item-tags {
 909     margin: 0 0 5px 0;
 910 }
 911
 912 .label-tag {
 913     border: 1px solid #505050;
 914     font-size: 1em;
 915 }
 916
 917 .label-tag:hover {
 918     border: 1px solid #000;
 919 }
 920
 921 .linklist-plugin-icon {
 922     width: 13px;
 923     height: 13px;
 924 }
 925
 926 .linklist-item-infos-url {
 927     text-align: right;
 928     white-space: nowrap;
 929     overflow: hidden;
 930     text-overflow: ellipsis;
 931 }
 932
 933 /**
 934  * Search results
 935  */
 936 .search-result a {
 937     color: white;
 938     text-decoration: none;
 939 }
 940
 941 .search-result .label-tag {
 942     border-color: white;
 943 }
 944
 945 .search-result .label-tag .remove {
 946     border-left: white 1px solid;
 947     padding: 0 0 0 5px;
 948     margin: 0 0 0 5px;
 949 }
 950
 951 /**
 952  * TOOLS
 953  */
 954 .tools-item {
 955     margin: 10px 0;
 956 }
 957
 958 /**
 959  * PLUGIN ADMIN
 960  */
 961 #pluginform .mobile-row {
 962     font-size: 0.9em;
 963 }
 964
 965 #pluginform .more {
 966     margin-top: 10px;
 967 }
 968
 969 @media screen and (max-width: 64em) {
 970     #pluginform .main-row, #pluginform .main-row td {
 971         border-bottom-style: none;
 972     }
 973
 974     #pluginform .mobile-row, #pluginform .mobile-row td {
 975         border-top-style: none;
 976     }
 977 }
 978
 979
 980 /**
 981  * IMPORT
 982  */
 983 #import-field {
 984     margin: 15px 0;
 985 }
 986
 987 @media screen and (max-width: 64em) {
 988
 989 }