<commit_before>@import "octicon-mixins";
@import "ui-variables";

.settings-view {

  // TODO: Somehow unify the "card".

  .package-card {
    padding: @component-padding*1.5;
    margin-bottom: @component-padding;
    list-style-type: none;
    font-size: 1.2em;
    border-radius: @component-border-radius*2;
    border: 1px solid @base-border-color;
    background-color: lighten(@tool-panel-background-color, 8%);
    overflow: hidden;

    &.disabled {
      background-color: lighten(@tool-panel-background-color, 5%);
      .body,
      .avatar,
      .author,
      .stats {
        opacity: .5;
      }
    }

    &:hover {
      background-color: lighten(@tool-panel-background-color, 5%);
    }

    &.col-lg-4 {
      min-width: 190px;
      padding: @component-padding 0;
      padding-left: @component-padding;
      padding-right: @component-padding;
    }

    .thumbnail {
      border-radius: 3px;
      margin: 0;
      min-height: 140px;
      color: @text-color;
      border-radius: @component-border-radius*2;
      border: 1px solid @base-border-color;
      background-color: lighten(@tool-panel-background-color, 8%);

      .caption {
        width: 100%;
        position: relative;
      }
    }
    .package-name {
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      color: @text-color-highlight;
      overflow: hidden;
      line-height: 20px;
      margin: 5px 0;
    }

    .description {
      color: @text-color;
      overflow: hidden;
      min-height: 38px;
      max-height: 38px;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* number of lines to show */
      -webkit-box-orient: vertical;
    }

    .downloads {
      color: @text-color-highlight;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1; /* number of lines to show */
      -webkit-box-orient: vertical;
    }

    .package-status {
      right: 0px;
      top: 5px;
      text-align: center;

      &.icon-cloud-download {
        color: #428bca;
      }

      &.icon-check {
        color: #6CC644;
      }

      &.icon-alert {
        color: #BD2C00;
      }
    }

    .card-name {
      font-weight: 300;
      margin: 0 0 .2em 0;
      font-size: 1.2em;
      line-height: 1.4;

      .css-truncate-target {
        color: $greenDark;
      }
    }

    .stats {

      .stats-item {
        margin-left: @component-padding*1.5;
        height: 26px;
        display: inline-block;
        line-height: 24px;
        vertical-align: top;

        .icon {
          color: @text-color-subtle;
        }
      }

      .star-box {
        display: inline-block;
        vertical-align: top;

        .star-button {
          padding: 0 6px;

          .octicon {
            margin-right: 0px;
          }
        }
      }
    }

    .body {
      .css-truncate-target {
        max-width: 100%;
      }
    }

    .package-description {
      white-space: normal;
      line-height: 1.4;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      width: 100%;

      a.linked-octicon {
        text-decoration: none;

        &:hover {
          .octicon {
            color: $greenDark;
          }

          .value {
            color: $greenDark;
          }
        }
      }

      .action {
        border-radius: 3px;
        padding: 3px 6px;

        &:hover {
          background-color: #eaeaea;
        }
      }

      .value {
        color: #999;
      }
    }

    .meta-user {
      flex: 1 0 auto;
      margin-top: @component-padding;
      margin-right: @component-padding;

      .avatar {
        border-radius: @component-border-radius;
        height: 24px;
        width: 24px;
        display: inline-block;
        vertical-align: middle;
        background-color: hsla(0,0%,0%,.1);
      }

      .author {
        color: @text-color-subtle;
        margin-left: @component-padding;
        &:focus {
          outline: none;
        }
      }
    }

    .meta-controls {
      margin-top: @component-padding;
      .install-button.is-installing {
        opacity: 1; // override disabled style
        background-image: linear-gradient(to right, transparent 50%, hsla(0,0%,0%,.15) 50%);
        background-size: 10px 100%;
        -webkit-animation: available-package-is-installing .5s linear infinite;
      }

      .status-indicator {
        padding: 0;
        width: @component-padding/2;
        min-width: 4px;
        pointer-events: none;
        transition: background .4s;
        background: @background-color-success;
        &.is-disabled {
          background: @background-color-warning;
        }
      }
    }

    .meta-lower {
      padding: 13px;
      background-color: @input-background-color;
      line-height: 1;
    }

    &.blank-slate {
      text-align: center;
      color: $beigeDark;
      height: 132px;
      line-height: 132px;
    }

    // End copy-paste from atom.io

  }
}

@-webkit-keyframes available-package-is-installing {
  100% { background-position: -10px 0px; }
}
<commit_msg>Add hover state for disabled package cards<commit_after>@import "octicon-mixins";
@import "ui-variables";

.settings-view {

  // TODO: Somehow unify the "card".

  .package-card {
    padding: @component-padding*1.5;
    margin-bottom: @component-padding;
    list-style-type: none;
    font-size: 1.2em;
    border-radius: @component-border-radius*2;
    border: 1px solid @base-border-color;
    background-color: lighten(@tool-panel-background-color, 8%);
    overflow: hidden;

    &.disabled {
      background-color: lighten(@tool-panel-background-color, 5%);
      .body,
      .avatar,
      .author,
      .stats {
        opacity: .5;
      }

      &:hover {
        background-color: lighten(@tool-panel-background-color, 4%);
      }
    }

    &:hover {
      background-color: lighten(@tool-panel-background-color, 5%);
    }

    &.col-lg-4 {
      min-width: 190px;
      padding: @component-padding 0;
      padding-left: @component-padding;
      padding-right: @component-padding;
    }

    .thumbnail {
      border-radius: 3px;
      margin: 0;
      min-height: 140px;
      color: @text-color;
      border-radius: @component-border-radius*2;
      border: 1px solid @base-border-color;
      background-color: lighten(@tool-panel-background-color, 8%);

      .caption {
        width: 100%;
        position: relative;
      }
    }
    .package-name {
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      color: @text-color-highlight;
      overflow: hidden;
      line-height: 20px;
      margin: 5px 0;
    }

    .description {
      color: @text-color;
      overflow: hidden;
      min-height: 38px;
      max-height: 38px;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* number of lines to show */
      -webkit-box-orient: vertical;
    }

    .downloads {
      color: @text-color-highlight;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1; /* number of lines to show */
      -webkit-box-orient: vertical;
    }

    .package-status {
      right: 0px;
      top: 5px;
      text-align: center;

      &.icon-cloud-download {
        color: #428bca;
      }

      &.icon-check {
        color: #6CC644;
      }

      &.icon-alert {
        color: #BD2C00;
      }
    }

    .card-name {
      font-weight: 300;
      margin: 0 0 .2em 0;
      font-size: 1.2em;
      line-height: 1.4;

      .css-truncate-target {
        color: $greenDark;
      }
    }

    .stats {

      .stats-item {
        margin-left: @component-padding*1.5;
        height: 26px;
        display: inline-block;
        line-height: 24px;
        vertical-align: top;

        .icon {
          color: @text-color-subtle;
        }
      }

      .star-box {
        display: inline-block;
        vertical-align: top;

        .star-button {
          padding: 0 6px;

          .octicon {
            margin-right: 0px;
          }
        }
      }
    }

    .body {
      .css-truncate-target {
        max-width: 100%;
      }
    }

    .package-description {
      white-space: normal;
      line-height: 1.4;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      width: 100%;

      a.linked-octicon {
        text-decoration: none;

        &:hover {
          .octicon {
            color: $greenDark;
          }

          .value {
            color: $greenDark;
          }
        }
      }

      .action {
        border-radius: 3px;
        padding: 3px 6px;

        &:hover {
          background-color: #eaeaea;
        }
      }

      .value {
        color: #999;
      }
    }

    .meta-user {
      flex: 1 0 auto;
      margin-top: @component-padding;
      margin-right: @component-padding;

      .avatar {
        border-radius: @component-border-radius;
        height: 24px;
        width: 24px;
        display: inline-block;
        vertical-align: middle;
        background-color: hsla(0,0%,0%,.1);
      }

      .author {
        color: @text-color-subtle;
        margin-left: @component-padding;
        &:focus {
          outline: none;
        }
      }
    }

    .meta-controls {
      margin-top: @component-padding;
      .install-button.is-installing {
        opacity: 1; // override disabled style
        background-image: linear-gradient(to right, transparent 50%, hsla(0,0%,0%,.15) 50%);
        background-size: 10px 100%;
        -webkit-animation: available-package-is-installing .5s linear infinite;
      }

      .status-indicator {
        padding: 0;
        width: @component-padding/2;
        min-width: 4px;
        pointer-events: none;
        transition: background .4s;
        background: @background-color-success;
        &.is-disabled {
          background: @background-color-warning;
        }
      }
    }

    .meta-lower {
      padding: 13px;
      background-color: @input-background-color;
      line-height: 1;
    }

    &.blank-slate {
      text-align: center;
      color: $beigeDark;
      height: 132px;
      line-height: 132px;
    }

    // End copy-paste from atom.io

  }
}

@-webkit-keyframes available-package-is-installing {
  100% { background-position: -10px 0px; }
}

{'fraction_non_alphanumeric': 0.13065181914178747, 'fraction_numerical': 0.025055198233656522, 'mean_word_length': 1.6058029014507254, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '751161', 'n_tokens_mistral': 3660, 'n_tokens_neox': 3344, 'n_words': 666}