jam-cloud/web/app/assets/stylesheets/client/jamtrackSearch.scss

@import 'common';

#jamtrackFilter {
  .jamtrack-filter.filter-head {

    padding-left:6px;
    @include border_box_sizing;

    .easydropdown.dropdown {
      width:150px;
    }

    .filter-element.wrapper:nth-child(2) {
      .easydropdown-wrapper {
        margin-left:20px;
      }
    }

    .filter-element.wrapper:nth-child(3) {
      margin-left:10px;
    }
    .filter-element.wrapper:nth-child(4) {
      float:right;

      .download-all {
        font-size:11px;
        margin-top: 0px;
        margin-right: 34px;
      }
    }
  }
}
#jamtrackSearch, #jamtrackFilter {

  div[data-react-class="JamTrackSearchScreen"], .JamTrackSearchScreen, div[data-react-class="JamTrackFilterScreen"], .JamTrackFilterScreen  {
    height:100%;
  }

  .download-all {
    float:right;
    font-size:12px;
    color:#cccccc;
    margin-top:6px;
    margin-right:46px;
    text-align:right;
    line-height:120%;

    div {
      display:inline;
    }
  }

  .filter-element.desc {
    margin-left:15px;
  }

  h2 {
    font-size: 20px;
    color: white;
    font-weight: bold;
    margin-bottom:10px;
  }

  .jamtrack-header {    
    background-color: #4c4c4c;
    font-weight: bold;
    text-transform: uppercase;
    height: 2em;
    padding: 4px;
  }

  a.jamtrack_help {
    color: #fff;
    text-decoration: none;
    margin: 4px 0px 0px 60px;

    &:hover {
      text-decoration: underline;
    }
  }

  table.jamtrack-table {
    table-layout:fixed;
  }
  .jamtrack-content {
    text-align: center;
    border: 1px solid #222222;
    padding: 2px
  }

  .no-jamtracks-msg {
    margin: 10px 0;
    text-align:center;
  }

  .jamtrack-record {
    //border-bottom: 1px solid black;
    text-align: left;
  }

  th.jamtrack-detail {
    padding:6px;
  }

  th.jamtrack-tracks {
    padding:6px;
  }

  th.jamtrack-action {
    padding:6px;
    text-align:center;
  }

  td.jamtrack-action {
    padding:0;
    position:relative;
  }

  .jamtrack-detail {
    @include border_box_sizing;
    width: 25%;
    padding: 10px 0 0 10px;
    .detail-label {
      width: 80px;
      float: left;
      margin-top: 5px;
      font-weight: 400;
      font-size: 11px;
      clear:both;
    }

    .detail-value {
      float: left;
      margin-top: 5px;
      margin-bottom:15px;
      font-size:11px;
    }

    .copyright-value {
      width: 40%;
      float: left;
      margin-top: 5px;
    }

    .jamtrack-description {
      display: none;
    }
    
  }

  .jamtrack-detail-btn {
    cursor: pointer;
    margin-top: 29px;
    margin-right: 5px;
    padding-top: 5px;
    vertical-align: bottom;
    color:#fc0;

    .arrow-down {
      float:none;
      margin-left:5px;
      margin-top:0;
      margin-right:0;
      border-top: 4px solid #fc0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      display:inline-block;
    }
    .arrow-up {
      float:none;
      margin-right:0;
      margin-left:5px;
      margin-bottom:2px;
      border-bottom: 4px solid #fc0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      display:inline-block;
    }
  }

  .jamtrack-tracks {
    padding-bottom:30px;
    position:relative;
    @include border_box_sizing;    
     width:55%;
    //padding: 10px 0px;

    .tracks-caption {
      margin-top: 5px;
      margin-bottom: 10px;
    }

    .track-instrument {
      margin-top: 5px;
    }

    .instrument-image {
      float: left;
      margin-right: 2px;
    }

    .instrument-desc {
      margin-top: 6px;
      float: left;
      margin-left: 10px;
    }

    .instrument-name {
      color:white;
    }
  }


  .detail-arrow {
    position:absolute;
    float: right;
    margin-right: 10px;
    bottom:14px;
    left:12px;
  }

  .jamtrack-name {
    font-size:16px;
    white-space: normal;
  }

  .jamtrack-original-artist {
    font-size:16px;
    margin-top:10px;
    margin-bottom:5px;
    white-space: normal;
  }


  .jamtrack-track {
    float:left;
    padding:0 0 8px 7px;
    width: 250px;
    @include border_box_sizing;

    &.hidden {
      display:none;
    }
  }

  .jam-track-preview {
    font-size:11px;
    white-space:nowrap;

    .loading-text {
      background-color:#262626;
    }
  }

  .jamtrack-action {
    @include border_box_sizing;    
    width: 20%;
    text-align: center;
    vertical-align: middle;

    .jamtrack-action-container {
      display:inline-block;

    }
    .play-button {
      margin-top: 5px;
    }

    .jamtrack-variant-help {
      margin-bottom:20px;
    }
    .jamtrack-add-zone {
      margin: 8px 0px;
      position:relative;
    }
    .jamtrack-price {
      width:100%;
      margin: 0 auto 10px;
      font-size: 20px;
      color:white;
      display:block;

      &.free {
        margin-top:0;
        display:none;
        .free-state {
          font-size: 11px;
          margin-top: 5px;
          display:block;
        }
      }
    }

    .jamtrack-add-cart, .jamtrack-add-cart-disabled {
      position:relative;
    }

    .jamtrack-license {
      margin-left: 20%;
      margin-right: 20%;
      font-size: 13px;
      width: 60%;
    }
  }

  .end-of-jamtrack-list {
    margin-top:20px;
  }
}

#jamtrack-license-dialog {
  .dialog-inner {
    height: auto;
    .content-body {
      max-height: auto;
      .content-body-scroller {
        height: 350px;
        .paragraph {
          margin-bottom: 1em;          
        }
        overflow: hidden;
      }
      border: 1px solid #222;
      margin: 4px 4px 8px 4px;
    }    
  }
}

.jamtrack_buttons {
  margin: 8px 4px 12px 4px; 
}