hummingbird-me/hummingbird

.quick-update {
  @extend .clearfix;
  background: #4b5360;
  padding: 12px;
  width: 100%;
  overflow: hidden;

  .series-title {
    color: #fff;
    margin-bottom: 60px;
    border: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .series-slider {
    position: relative;

    .update-loading {
      background: darken(#4b5360, 5);
      color: #999;
      border-radius: 3px;
      text-align: center;
      .fa-spinner {
        font-size: 32px;
      }
      height: 100%;
    }

    .arrow-nav {
      color: #5f6673;
      &:hover {
        color: lighten(#5f6673, 15);
      }
      &.inactive {
        color: darken(#5f6673, 3);
        cursor: default;
      }
    }

    .fa-angle-left, .fa-angle-right {
      float: left;
      position: relative;
      font-size: 100px;
      top: 75px;
    }
  }

  .mark-multiple {
    display: block;
    margin-top: 15px;
    color: #fff;
    &:hover {
      color: $darkOrange;
    }
  }

  .watched-series {
    width: 15.5%;
    min-width: 145px;
    padding: 10px;
    float: left;
    .overlay-wrapper {
      position: relative;
    }

    .overlay-panel {
      background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .80) 50%, rgba(0, 0, 0, .80) 100%);
      background-size: auto 200%;
      background-repeat: repeat-x;
      border-radius: 3px;
      text-align: center;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 5px 10px;
      transition: background-position .3s ease-in-out;
    }

    .series-title {
      opacity: 0;
      transition: opacity .3s ease-in-out;
    }

    .actionable {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -20px;
      opacity: 0;
      transition: opacity .3s ease-in-out;
    }

    .stats {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      color: #bdc5d1;
      h4 {
        margin-bottom: 0;
      }
      p {
        font-size: 14px;
      }
    }

    &:hover {
      .overlay-panel {
        background-position: 0 100%;
      }
      .actionable, .series-title {
        opacity: 1;
      }
    }
  }

  @media (max-width: 1051px) {
    .fa-angle-left, .fa-angle-right {
      font-size: 90px !important;
    }
  }

  @media (max-width: 959px) {
    overflow: auto;

    .series-slider {
      width: 870px;
    }
    .watched-series {
      max-width: 134px;
      min-width: 134px;
    }
    .seen-text {
      display: none;
    }
  }
}