jam-cloud/web/app/assets/stylesheets/client/react-components/SessionScreen.css.scss

@import 'client/common';


#session-screen2 {

  h2 {
    color: #fff;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 15px;
  }

  .tracks {
    position: absolute;
    @include border_box_sizing;
    top: 71px;
    bottom: 0;
    width: 100%;
  }

  .session-my-tracks, .session-other-tracks, .session-media-tracks, .session-notifications {
    @include border_box_sizing;
    float: left;
    width: 25%;
    border-right: 1px solid #4c4c4c;
    padding: 15px;
    height: 100%;
    margin-bottom: 15px;
  }

  .session-notifications {
    border-right-width: 0;

  }

  .in-session-controls {

    width: 100%;
    padding: 11px 0px 11px 0px;
    background-color: #4c4c4c;
    min-height: 20px;
    position: relative;
    min-width: 690px;

    .label {
      float: left;
      font-size: 12px;
      color: #ccc;
      margin: 0px 0px 0px 4px;
    }

    .block {
      float: left;
      margin: 6px 8px 0px 8px;
    }

    a {
      img {
        margin-right: 3px;
      }
    }
  }

  .session-tracks-scroller {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
  }

  p {
    line-height: 125%;
    margin: 0;
  }

  .session-my-tracks {
    .session-track {
      float:left;
      margin: 10px 0;
      padding: 6px 6px 6px 10px;
      color: $ColorTextTypical;
      background-color: #242323;
      border-radius: 6px;
      min-height: 76px;
      max-width: 210px;
      @include border_box_sizing;
    }
  }


  .react-holder {
    &.SessionTrackVolumeHover {
      height:331px;
      width:235px;

      .session-track {
        float:left;
        background-color: #242323;
        border-radius: 4px;
        display: inline-block;
        height: 300px;
        margin-right: 14px;
        position: relative;
        width: 70px;
        margin-top:19px;
        margin-left:24px;
      }

      .track-icon-mute {
        float:none;
        position: absolute;
        top: 246px;
        left: 29px;
      }

      .track-gain {
        position:absolute;
        width:28px;
        height:209px;
        top:32px;
        left:23px;
      }

      .fader {
        height:209px;
      }

      .handle {
        bottom:0%;
        display:none;
      }

      .textual-help {
        float:left;
        width:100px;
      }

      p {
        font-size:12px;
        padding:0;
        margin:16px 0 0;
        line-height:125%;

        &:nth-child(1) {
          margin-top:19px;
        }
      }

      .icheckbox_minimal {
        position:absolute;
        top: 271px;
        left: 12px;
      }

      input {
        position:absolute;
        top: 271px;
        left: 12px;
      }

      label {
        @include labelFont;
        position:absolute;
        top:273px;
        left:34px
      }
    }
    &.SessionTrackPanHover {
      width:331px;
      height:197px;
      padding:15px;
      @include border_box_sizing;

      .session-pan {
        .textual-help {
          float:left;
          width:100px;
        }
      }

      p {
        font-size:12px;
        padding:0;
        line-height:125%;
      }
      .track-pan {
        background-color: #242323;
        border-radius: 4px;
        display: inline-block;
        height: 70px;
        position: relative;
        width: 300px;
        margin-top:15px;
      }
      .fader {
        position:absolute;
        width:205px;
        height:24px;
        top:34px;
        left:44px;
        background-image: url('/assets/content/bkg_slider_gain_horiz_24.png');
      }
      .handle {
        display:none;

        img {
          position:absolute;
          left:-5px;
        }
      }
      .left-label {
        @include labelFont;
        position:absolute;
        left:13px;
        top:40px;
      }
      .right-label {
        @include labelFont;
        position:absolute;
        right:12px;
        top:40px;
      }
      .floater {
        width:20px;
        text-align:center;
        top:-22px;
        left:-8px;
        @include labelFont;
        position:absolute;
      }
    }
  }


  .session-track {

    .name {
      width: 100%;
      margin-bottom: 6px;
      @include labelFont;
    }

    .track-avatar {
      float: left;
      padding: 1px;
      width: 44px;
      height: 44px;
      background-color: #ed3618;
      -webkit-border-radius: 22px;
      -moz-border-radius: 22px;
      border-radius: 22px;

      img {
        width: 44px;
        height: 44px;
        -webkit-border-radius: 22px;
        -moz-border-radius: 22px;
        border-radius: 22px;
      }
    }

    .track-instrument {
      float: left;
      padding: 1px;
      margin-left: 5px;
    }
  }

  table.vu {
    float: left;

    td {
      border: 3px solid #242323;
    }
  }

  .track-controls {
    margin-top: 2px;
    margin-left: 10px;
    float:left
  }

  .track-buttons {
    margin-top:22px;
    padding:0 0 0 3px;
  }

  .track-icon-mute {
    float:left;
    position:relative;
    top:0;
    left:0;
  }

  .track-icon-pan {
    float:left;
    cursor: pointer;
    width: 20px;
    height: 20px;
    background-image:url('/assets/content/icon_pan.png');
    background-repeat:no-repeat;
    text-align: center;
    margin-left:10px;
  }

  .track-icon-equalizer {
    float:left;
    cursor: pointer;
    width: 20px;
    height: 20px;
    background-image:url('/assets/content/icon_equalizer.png');
    background-repeat:no-repeat;
    text-align: center;
    margin-left:7px;
  }

  .session-track-list-enter {
    opacity: 0.01;
    transition: opacity .5s ease-in;

    &.session-track-list-enter-active {
      opacity: 1;
    }
  }

  .session-track-list-leave {
    opacity:1;
    transition: opacity .5s ease-in;

    &.session-track-list-leave-active {
      opacity: 0.01;
    }
  }

  .session-track-settings {
    height:18px;
    cursor:pointer;

    span {
      top: -4px;
      position: relative;
      left:3px;
    }
  }
}