hmn/src/rawdata/scss/_projects.scss

.project {
  .notice {
    @include usevar(color, project-notice-text-color);

    a {
      @include usevar(color, project-notice-text-color);
      @include usevar(border-bottom-color, project-notice-text-color);
    }
  }

  .pair {
    display: flex;
    align-items: flex-start;

    .key {
      font-weight: bold;
      flex-shrink: 0;
    }

    .value {
      text-align: right;
      flex-grow: 1;
    }
  }

  .settings-icon {
    z-index: 10;
    position: absolute;
    width: 25px;
    height: 25px;
    right: 5px;
    top: 5px;
    margin: 0px;
    text-align: center;
    padding: 3px;
    border-radius: 5px;
    line-height: 100%;
    box-sizing: border-box;
  }

  .screenshots .slideshow {
    background-color:black;
  }

  .tags {
    text-align:center;

    h2 {
      margin-bottom:5px;
    }

    li {
      display:inline-block;
    }
  }

  .button-bar {
    border: none;
  }

  .forum {
    h3 {
      margin: 0;
    }

    .thread-entry-right {
      display: none;
    }
  }
}

.notice-unapproved {
  @include usevar(background-color, notice-unapproved-color);
}

.notice-hidden {
  @include usevar(background-color, notice-hidden-color);
}

.notice-hiatus {
  @include usevar(background-color, notice-hiatus-color);
}

.notice-dead {
  @include usevar(background-color, notice-dead-color);
}

.notice-lts {
  @include usevar(background-color, notice-lts-color);
}

.notice-lts-reqd {
  @include usevar(background-color, notice-lts-reqd-color);
}

.project-carousel-container {
  width: 50rem;

  .project-carousel {
    box-sizing: content-box;
    position: relative;
    height: 12rem;

    @media #{$breakpoint-large} {
      height: $height-5;
    }
  }

  .project-carousel-item {
    position: absolute;
    top: 0;
    left: 0;

    &:not(.active) {
      display: none;
    }

    br {
      line-height: 0.6em;
    }
  }

  .project-carousel-description {
    max-height: 14rem;
    overflow: hidden;
  }

  .project-carousel-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;

    @include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")")
  }

  .project-carousel-item-small {
    &:not(.active) {
      display: none;
    }
  }

  .project-carousel-button {
    border: 1px solid;
    @include usevar(border-color, dimmer-color);
    cursor: pointer;

    transition: all 100ms ease-in-out;

    &:hover {
      @include usevar(background-color, dimmest-color);
    }

    &.active {
      @include usevar(border-color, theme-color);
      @extend .w2;

      &:hover {
        @include usevar(background-color, theme-color-dimmest);
      }
    }
  }
}

.project-card {
  @include usevar(color, 'fg-font-color');
  @include usevar(background-color, 'card-background');
  @include usevar(border-color, 'project-card-border-color');

  transition: box-shadow 0.2s, background-color 0.2s;

  .slideshow & {
    margin-top:8px;
  }

  &:hover {
    @include usevar(background-color, 'card-background-hover');

    & > .title {
      text-decoration:underline;
    }
  }

  .image-container {
    $image-size: 8rem;

    width: $image-size;
    min-height: $image-size;

    .image {
      position: absolute;
      width: $image-size;
      top: 0;
      bottom: 0;
    }
  }

  .details {
    /* Background color given by theme */
    transition: background-color 0.2s;
  }

  .badges:empty {
    display: none;
  }

  .badge {
    color: white;
    border-radius: 5px;
  }
}

.projectlist {
  .sidebar & {
    padding:0px;
    width:340px;

    // background-image:none;
    // background-color:transparent;
    // box-shadow:none;

    .project-card.more {
      height:40px;
      width:326px;
      padding-top:5px;
    }
  }
}

.screenshots .slide {
  max-width:100%;
}

.slideshow {
  /* Background color and color given by theme */
  position:relative;
  background-image:none;
  overflow:hidden;

  .optionbar {
    height:30px;
    text-align:center;
  }

  .buttons {
    display:inline-block;
    height:100%;
  }

  .button {
    line-height:100%;
    padding:5px 8px;
    font-weight:400;

    &.current {
      font-weight:600;
    }
  }

  #slide-deck {
    width:100%;
    position:relative;
    transition:left 0.3s;
    left:0px;
    text-align:center;
    display:flex;
    flex-direction:horizontal;
    justify-content: space-around;
    align-items: center;
  }

  .slide {
    flex: 1 1 100%;
    position:relative;

    img {
      margin:auto;
      max-height:60vh;
      max-width:100%;
    }
  }

  &.cards {
    #slide-deck {
      justify-content: flex-start;
    }

    .slide {
      flex: 0 1 auto;
    }
  }
}

#project_owner_suggestions {
  max-height:300px;
  overflow:auto;
  position:absolute;
  border:1px solid transparent;

  #user_template {
    display:none;
  }
}

.user_suggestions {
  @include usevar(background-color, 'project-user-suggestions-background');

  padding-top: 5px;
  padding-bottom: 5px;

  &#project_owner_suggestions .user {
    @include usevar(border-color, 'project-user-suggestions-border-color');

    border-bottom-width: 1px;
    width: 200px;
    box-sizing:border-box;
    cursor:pointer;
  }

  .user {
    position:relative;
    margin-left:50px;
    display: inline-block;
    margin-right:10px;

    .avatar-icon {
      left:-50px;
      bottom:0px;
      border-radius:50%;
      border:2px solid transparent;
    }
  }
}

#project_owners {
  min-width:50%;
}