Radarr/src/UI/Series/series.less

@import "../Content/Bootstrap/variables";
@import "../Shared/Styles/card.less";
@import "../Shared/Styles/clickable.less";
@import "../Content/prefixer";

.series-poster {
  min-width: 56px;
  max-width: 100%;
}

.edit-series-modal, .delete-series-modal {
  overflow : visible;

  .series-poster {
    padding-left : 20px;
    width        : 168px;
  }

  .form-horizontal {
    margin-top : 10px;
  }
}

.delete-series-modal {
  .path {
    margin-left : 30px;
  }
}

.series-item {
  padding-bottom : 30px;

  :hover {
    text-decoration : none;
  }

  h2 {
    margin-top : 0px;
  }

  a {
    color : #000000;
  }
}

.series-page-header {
  .card(black);
  background : #000000;
  color      : #ffffff;
  .opacity(0.9);
  padding    : 30px 30px;
  margin     : 50px 10px;
}

.series-season {
  .card;
  margin  : 30px 10px;
  padding : 10px 25px;
  .opacity(0.9);

  .show-hide-episodes {
    .clickable();
    text-align : center;

    i {
      .clickable();
    }
  }
}

.series-posters {
  list-style-type: none;

  @media (max-width: @screen-xs-max) {
    padding        : 0px;
  }

  li {
    display        : inline-block;
    vertical-align : top;
  }

  .series-posters-item {

    .card;
    .clickable;
    margin-bottom : 20px;
    height        : 315px;

    .center {
      display      : block;
      margin-left  : auto;
      margin-right : auto;
      text-align   : center;

      .progress {
        text-align : left;
        margin-top : 5px;
        left       : 0px;
        width      : 170px;

        .progressbar-front-text, .progressbar-back-text {
          width : 170px;
        }
      }
    }

    .labels {
      display : inline-block;
      .opacity(0.75);
      width   : 170px;

      :hover {
        cursor : default;
      }

      .label {
        margin-top : 3px;
        display    : block;
      }

      .tooltip {
        .opacity(1);
      }
    }

    @media (max-width: @screen-xs-max) {
      height  : 235px;
      margin  : 5px;
      padding : 6px 5px;

      .center {
        .progress {
          width : 125px;

          .progressbar-front-text, .progressbar-back-text {
            width : 125px
          }
        }
      }

      .labels {
        width: 125px;
      }
    }
  }

  .series-poster-container {
    position : relative;
    overflow : hidden;
    display  : inline-block;

    .placeholder-image ~ .title {
      opacity: 1.0;
    }

    .title {
      position   : absolute;
      top        : 25px;
      color      : #f5f5f5;
      width      : 100%;
      font-size  : 22px;
      line-height: 24px;
      opacity    : 0.0;
      font-weight: 100;
    }

    .ended-banner {
      color                    : #eeeeee;
      background-color         : #b94a48;
      .box-shadow(2px 2px 20px #888888);
      -moz-transform-origin    : 50% 50%;
      -webkit-transform-origin : 50% 50%;
      position                 : absolute;
      width                    : 320px;
      top                      : 200px;
      left                     : -122px;
      text-align               : center;
      .opacity(0.9);

      .transform(rotate(45deg));
    }

    .series-controls {
      position         : absolute;;
      top              : 0px;
      overflow         : hidden;
      background-color : #eeeeee;
      width            : 100%;
      text-align       : right;
      padding-right    : 10px;
      .opacity(0.8);
      display          : none;

      i {
        .clickable();
      }
    }

    .hidden-title {
      position         : absolute;;
      bottom           : 0px;
      overflow         : hidden;
      background-color : #eeeeee;
      width            : 100%;
      text-align       : center;
      .opacity(0.8);
      display          : none;
    }

    .series-poster {
      width       : 168px;
      height      : 247px;
      display     : block;
      font-size   : 34px;
      line-height : 34px;
    }

    @media (max-width: @screen-xs-max) {
      .series-poster {
        width       : 120px;
        height      : 176px;
      }

      .ended-banner {
        top  : 145px;
        left : -137px;
      }
    }
  }
}

.series-detail-overview {
  margin-bottom : 50px;
}

.series-season {

  .episode-number-cell {
    width : 22px;
  }
  .episode-air-date-cell {
    width : 150px;
  }

  .episode-status-cell {
    width : 100px;
  }

  .episode-title-cell {
    cursor : pointer;
  }
}

.episode-detail-modal {

  .episode-info {
    margin-bottom : 10px;
  }

  .episode-overview {
    font-style : italic;
  }

  .episode-file-info {
    margin-top : 30px;
    font-size  : 12px;
  }
}

.season-grid {
  .toggle-cell {
    width      : 12px;
    text-align : center;
  }

  .toggle-cell {
    i {
      .clickable;
    }
  }
}

.season-actions {
  width: 70px;
}

.season-actions, .series-actions {

  div {
    display : inline-block
  }

  text-transform : none;

  i {
    .clickable();
    font-size    : 24px;
    margin-left : 5px;
  }
}

.series-stats {
  font-size : 11px;
}

.series-legend {
  padding-top : 5px;
}

.seasonpass-series {
  .card;
  margin : 20px 0px;

  .title {
    font-weight : 300;
    font-size   : 24px;
    line-height : 30px;
    margin-left : 5px;
  }

  .season-select {
    margin-bottom : 0px;
  }

  .expander {
    .clickable;
    line-height : 30px;
    margin-left : 8px;
    width       : 16px;
  }

  .season-grid {
    margin-top : 10px;
  }
}

.season-status {
  font-size      : 16px;
  vertical-align : middle !important;
}

.seasonpass-series {
  .season-pass-button {
    display : inline-block;
  }

  .series-monitor-toggle {
    font-size  : 24px;
    margin-top : 3px;
  }
}

//Overview List
.series-overview-list-actions {
  min-width: 56px;
  max-width: 56px;

  i {
    .clickable();
  }
}

//Editor

.series-editor-footer {
  max-width: 1160px;
  color: #f5f5f5;
  margin-left: auto;
  margin-right: auto;

  .form-group {
    padding-top: 0px;
  }
}

.update-files-series-modal {
  .selected-series {
    margin-top: 15px;
  }
}

//Series Details

.series-not-monitored {
  .season-monitored, .episode-monitored {
    color: #888888;
    cursor: not-allowed;

    i {
      cursor: not-allowed;
    }
  }
}

.series-info {
  .row {
    margin-bottom: 5px;
  }

  .series-info-links {
    @media (max-width: @screen-sm-max) {
      display    : inline-block;
      margin-top : 5px;
    }
  }
}

.scene-info {
  .key, .value {
    display : inline-block;
  }

  .key {
    width          : 80px;
    margin-left    : 10px;
    vertical-align : top;
  }

  .value {
    margin-right : 10px;
    max-width    : 170px;
  }

  ul {
    padding-left    : 0px;
    list-style-type : none;
  }
}