workshop.scss

$thumbnail-width: 256px;

.mods-group {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, $thumbnail-width + $gutter-width);

  > .mod-thumbnail {
    margin: $half-gutter !important;
  }
}

.modpicker-body {
  // has to be relative for popovers to scroll along
  position: relative;
  padding: 0 10px;
  .popover {
    max-width: 600px;
  }
  > .panel-body {
    overflow: auto;
  }
}

.mod-thumbnail {
  position: relative;
  height: auto;
  border: 0;
  width: 256px;
  height: 144px !important;
  padding: 0;

  &panel-primary {
    border-color: $border-color;
  }

  &panel-default {
    @extend .panel-default;
    border-color: transparent;
  }
}

.mod-thumbnail-body {
  @extend .panel-body;
  padding: 0;
  // background-color: $gray-lighter;
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  .bottom {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    white-space: nowrap;
    display: flex;
    padding: 60px 10px 10px 10px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.95));
    flex-direction: column;
    justify-content: flex-end;

    &div {
      margin: auto 0px;
    }
  }

  .buttons {
    height: 100%;
    justify-content: center;
    align-items: center;
    >* {
      display: inline-block;
      margin: 4px;
      background-color: $text-color;
      color: $brand-clickable;
      vertical-align: middle;
      width: initial !important;
      padding: 2px 8px;
    }
    svg {
      margin-right: 4px;
    }
  }

  .name { 
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: larger;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .name-part {
      margin-right: 0.2em;
    }
  }

  .panel-body {
    width: 100%;
  }

  .thumbnail-img {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
  }

  .flex-center-both {
    flex-direction: column;
    gap: $gutter-width;
    height: 100%;
  }
}

.mod-thumbnail-img-list {
  max-width: 150px;
  max-height: 70px;
}

.mod-thumbnail-container-list {
  min-width: 50px;
  padding: 0px;
  margin: 0px;
  text-align: center;
}

.mod-thumbnail-info {
  position: absolute;
  top: 8px;
  right: 8px;
  line-height: 0;
  width: 24px;
  height: 24px;
  background: rgba($black, 0.3);
  border: 1px solid rgba($white, 0.3);
  svg {
    stroke: $text-color;
    stroke-width: 2px;
  }
}

.mod-thumbnail-tags {
  position: absolute;
  bottom: 8px;
  right: 8px;
  opacity: 0.75;
  display: flex;
  align-items: flex-end;
  font-size: smaller;
}

.mod-list-item {
  .media-body {
    justify-content: center;
  }
}

.btngroup-mod-list {
  display: inline-flex;
  button {
    @extend .btn-embed;
  }
}

.progress {
  margin: 6px;
}

.mod-page {
  padding-right: $half-gutter;
  .panel, .panel-body {
    border: 0;
  }
}

.popover-mod-info {
  max-width: 800px;
  .popover-content {
    display: flex;
    > * {
      padding: 0 $half-gutter;
    }
    .btn-group-vertical {
      justify-content: space-around;
      border-right: 1px solid $border-color;
      button {
        margin: 4px 0;
      }
      .toolbar-dropdown {
        height: 80%;
      }
    }
  }
}

.mismatch-dialog-container {
  width: 100%;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.mismatch-dialog-content-choices {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: grey;
  border-style: solid;
  border-width: thin;
  overflow-y: auto;
  min-height: 20vh;
  max-height: 50vh;
}

.mismatch-checkbox {
  margin-left: 8px;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.mod-filter-input .form-control {
  z-index: unset;
}

[id='page-Steam Workshop'] {
  .mainpage-header {
    align-items: center;
    gap: $gutter-width;
    .mod-filter-input {
      min-width: 40em;
    }
    .Select {
      min-width: 20em;
    }
  }
}

.workshop-rating {
  position: absolute;
  top: 0;
  right: 0;
  text-shadow: 0 0 2px $black;
  background-color: rgba($black, 50%);
  padding: 0.3em;
  display: flex;
  .icon {
    margin-right: 0.3em;
  }
}