codecombat/app/styles/play/level/playback.sass

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

#playback-view
  width: 55%
  height: 30px
  position: relative
  background: #383434

  button
    height: 26px
    background: transparent
    @include opacity(0.50)
    i
      position: relative

  button:hover
    @include opacity(0.75)
    
  #play-button, #volume-button, #music-button
    float: left
    margin-left: 2px
    margin-top: 2px
    width: 25px
    position: relative
    
  #music-button
    @include opacity(0.25)
    font-size: 20px
    span
      position: relative
      left: -3px
      top: -2px
    &:hover
      @include opacity(0.50)
    &.music-on
      @include opacity(0.50)
      &:hover
        @include opacity(0.75)
    
  #play-button, #volume-button
    i
      display: none
      position: absolute
      left: 2px
      top: 2px
 
  #settings-button
    padding-left: 4px
    padding-right: 4px

  #playback-settings
    float: right
    position: relative
    top: 2px
    margin-right: 2px
    ul i
      margin: 0 10px
    li:hover
      background: #add8e6

  #play-button.disabled i
    @include opacity(0.5)
  #play-button.playing i.icon-pause
    display: inline-block
  #play-button.paused i.icon-play
    display: inline-block
  #play-button.ended i.icon-repeat
    display: inline-block

  #volume-button.vol-up i.icon-volume-up
    display: inline-block
  #volume-button.vol-off i.icon-volume-off
    display: inline-block
    @include opacity(0.50)
    &:hover
      @include opacity(0.75)
  #volume-button.vol-down i.icon-volume-down
    display: inline-block

  .scrubber
    position: absolute
    left: 100px
    top: 0px
    bottom: 0px
    right: 125px

    .progress
      float: left
      width: 100%
      height: 14px
      margin-top: 8px
      cursor: pointer
      overflow: visible
      border: 1px solid #444
      // Remove gradient background in favor of solid fill
      background-color: #888
      background-image: none
      border-radius: 0
      border: 0
      // Can't do this transition because handle then jitters, but would be good for streaming.
      //@include transition(width .2s linear)

      &.disabled, &.ui-slider-disabled
        cursor: default

        .progress-bar .scrubber-handle
          cursor: default

      .progress-bar
        @include transition(width .0s linear)
        position: relative
        // Remove gradient background in favor of solid fill
        background-color: #67A4C8
        //background-image: none  // gradient looks kind of cool though; keep it in

        .scrubber-handle
          cursor: pointer
          position: absolute
          right: -16px
          top: -9px
          background: transparent url(/images/level/playback_thumb.png)
          width: 32px
          height: 32px
          // z: above the gradient line bordering the playback bar
          z-index: 6

      .ui-slider-handle
        height: 100%
        visibility: hidden
        border: 0
        top: 0
        margin-left: -11px
        margin-right: -11px
        // Don't load jQuery UI background image here
        background: transparent none