@import "octicon-mixins";
@import "ui-variables";

.settings-view {
  .package-update-view {
    border-radius: 1px;
    padding-left: @component-padding;
    padding-right: @component-padding;

    &.col-md-6 {
      min-width: 190px;
      padding: @component-padding 0;
      padding-left: 10px;
      padding-right: 10px;
    }

    .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%;
      overflow: hidden;
      margin: 5px 0;
      color: @text-color-highlight;
    }

    .description {
      color: @text-color;
      overflow: hidden;
      line-height: 1.5;
      min-height: 3em;
      max-height: 3em;
      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;
    }

    .upgrade-button {
      &.btn-progress {
        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: settings-package-updating .5s linear infinite;
      }
      &.btn-success {
        opacity: 1; // override disabled style
      }
    }

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

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

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

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

@-webkit-keyframes settings-package-updating {
  100% { background-position: -10px 0px; }
}
