Implemented new playback scrubber textures.

app/styles/base.sass

@@ -153,40 +153,6 @@ a
     cursor: pointer
       
 
-// Bigger versions of some Bootstrap icons
-// TODO: make the non-white versions of these if we ever need them
-.icon.big
-  background-image: url(/images/pages/base/glyphicons-simplified.png)
-
-.icon-white.big
-  background-image: url(/images/pages/base/glyphicons-simplified.png)
-
-.icon.big, .icon-white.big
-  width: 19px
-  height: 19px
-  line-height: 19px
-
-.icon-pause.big
-  background-position: -114px 0px
-
-.icon-play.big
-  background-position: -95px 0px
-
-.icon-repeat.big
-  background-position: -76px 0px
-
-.icon-volume-off.big
-  background-position: -57px 0px
-
-.icon-volume-down.big
-  background-position: -38px 0px
-
-.icon-volume-up.big
-  background-position: -19px 0px
-
-.icon-cog.big
-  background-position: 0px 0px
-
 // loading screens for everything but the play view
 .loading-screen
   .progress
@@ -339,3 +305,7 @@ kbd
   &.gem-60
     width: 60px
     height: 60px
+
+.popover
+  border-image: url(/images/level/popover_background.png) 29 39 fill stretch
+  border-width: 15px 20px

app/styles/play/level.sass

@@ -144,14 +144,6 @@ $level-resize-transition-time: 0.5s
     left: -3px
     bottom: 0
     
-  #hud-top-gradient
-    top: -32px
-    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8*$GI) 100%)
-    left: 0
-    right: 0
-    bottom: 0
-    height: 3px
-
   #canvas-left-gradient
     left: 0px
     width: 5px

app/styles/play/level/goals.sass

@@ -9,7 +9,7 @@
   background: transparent url(/images/level/goals_background.png)
   background-size: 100% 100%
 
-  padding: 19px 17px 6px 25px
+  padding: 19px 17px 2px 25px
   z-index: 3
   font-size: 14px
 

app/styles/play/level/multiplayer-status.sass

@@ -4,6 +4,8 @@
 // TODO: Replace this devart with nice shinies
 
 #multiplayer-status-view
+  position: absolute
+
   .player-count
     color: white
   .players-available

app/styles/play/level/playback.sass

@@ -2,50 +2,52 @@
 @import "app/styles/bootstrap/variables"
 
 #playback-view
+  $playback-button-color: rgb(248, 197, 146)
+  // When 75% alpha, it will look like the rgb(194, 154, 114) from Heald's design
   width: 55%
-  height: 30px
+  height: 60px
+  padding-top: 17px
   position: relative
-  background: #383434
+  background: transparent url(/images/level/scrubber_background.png)
-  // Counteract 50px height of absolutely positioned control bar.
+  background-size: 100% 100%
-  margin-top: 50px
+  // Counteract 50px height of absolutely positioned control bar, but overlap by 10px of jagged transparent top.
+  margin-top: 50px - 10px
+  z-index: 2
 
   button
-    height: 26px
+    font-size: 26px
+    margin-left: 10px
     background: transparent
-    @include opacity(0.50)
+    @include opacity(0.75)
-    i
+    color: $playback-button-color
+    text-shadow: 1px 1px 0px black
+
+    .glyphicon
       position: relative
 
   button:hover
-    @include opacity(0.75)
+    @include opacity(1)
-    
+
   #play-button, #volume-button, #music-button
     float: left
-    margin-left: 2px
-    margin-top: 2px
-    width: 25px
     position: relative
     
   #music-button
-    @include opacity(0.25)
+    @include opacity(0.5)
-    font-size: 20px
     span
       position: relative
       left: -3px
       top: -2px
     &:hover
-      @include opacity(0.50)
+      @include opacity(0.75)
     &.music-on
-      @include opacity(0.50)
+      @include opacity(0.75)
       &:hover
-        @include opacity(0.75)
+        @include opacity(1)
     
   #play-button, #volume-button
-    i
+    .glyphicon
       display: none
-      position: absolute
-      left: 2px
-      top: 2px
  
   #settings-button
     padding-left: 4px
@@ -54,51 +56,58 @@
   #playback-settings
     float: right
     position: relative
-    top: 2px
+    margin-right: 10px
-    margin-right: 2px
+    ul button
-    ul i
       margin: 0 10px
     li:hover
       background: #add8e6
 
-  #play-button.disabled i
+  #play-button.disabled .glyphicon
-    @include opacity(0.5)
+    @include opacity(0.75)
-  #play-button.playing i.icon-pause
+  #play-button.playing .glyphicon-pause
     display: inline-block
-  #play-button.paused i.icon-play
+  #play-button.paused .glyphicon-play
     display: inline-block
-  #play-button.ended i.icon-repeat
+  #play-button.ended .glyphicon-repeat
     display: inline-block
 
-  #volume-button.vol-up i.icon-volume-up
+  #volume-button.vol-up .glyphicon.glyphicon-volume-up
     display: inline-block
-  #volume-button.vol-off i.icon-volume-off
+  #volume-button.vol-off .glyphicon.glyphicon-volume-off
     display: inline-block
-    @include opacity(0.50)
+    @include opacity(0.75)
     &:hover
-      @include opacity(0.75)
+      @include opacity(1)
-  #volume-button.vol-down i.icon-volume-down
+  #volume-button.vol-down .glyphicon.glyphicon-volume-down
     display: inline-block
 
   .scrubber
     position: absolute
-    left: 100px
+    left: 170px
-    top: 0px
+    top: 21px
     bottom: 0px
-    right: 125px
+    right: 175px
+    background: rgb(3, 3, 3)
+    height: 28px
+    border: 1px solid rgb(67, 67, 44)
+    border-radius: 14px
+
+    .scrubber-inner
+      border: 1px solid rgb(44, 38, 29)
+      width: 100%
+      height: 100%
+      border-radius: 14px
+      padding: 6px 8px
 
     .progress
       float: left
       width: 100%
-      height: 14px
+      height: 12px
-      margin-top: 8px
       cursor: pointer
       overflow: visible
       border: 1px solid #444
-      // Remove gradient background in favor of solid fill
+      background: rgb(80, 67, 53)
-      background-color: #888
+      border-radius: 6px
-      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)
@@ -113,19 +122,19 @@
         @include transition(width .0s linear)
         position: relative
         // Remove gradient background in favor of solid fill
-        background-color: #67A4C8
+        background: rgb(245, 170, 49)
-        //background-image: none  // gradient looks kind of cool though; keep it in
+        border: 1px solid rgb(62, 45, 16)
+        border-radius: 6px
 
         .scrubber-handle
           cursor: pointer
           position: absolute
-          right: -16px
+          right: -18px
-          top: -9px
+          top: -11px
-          background: transparent url(/images/level/playback_thumb.png)
+          background: transparent url(/images/level/scrubber_knob.png)
-          width: 32px
+          background-size: contain
-          height: 32px
+          width: 36px
-          // z: above the gradient line bordering the playback bar
+          height: 36px
-          z-index: 6
 
       .ui-slider-handle
         height: 100%
@@ -140,3 +149,5 @@
 body.ipad #playback-view
   #playback-settings
     display: none
+  .scrubber
+    right: 25px

app/styles/play/spectate.sass

@@ -124,14 +124,6 @@
     left: -3px
     bottom: 0
 
-  #hud-top-gradient
-    top: -32px
-    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8*$GI) 100%)
-    left: 0
-    right: 0
-    bottom: 0
-    height: 3px
-
   #canvas-left-gradient
     left: 0px
     width: 5px

app/templates/play/level/goals.jade

@@ -1,6 +1,6 @@
 ul#primary-goals-list
 div.goals-status
-  strong(data-i18n="play_level.goals") Goals
+  span(data-i18n="play_level.goals") Goals
   span.spr :
   span(data-i18n="play_level.success").secret.goal-status.success Success!
   span(data-i18n="play_level.incomplete").secret.goal-status.incomplete Incomplete

app/templates/play/level/hud.jade

@@ -1,5 +1,3 @@
-#hud-top-gradient.gradient
-
 .center
 
   .thang-canvas-wrapper.thang-elem

app/templates/play/level/playback.jade

@@ -1,45 +1,29 @@
 button.btn.btn-xs.btn-inverse#play-button.paused(title="Ctrl/Cmd + P: Toggle level play/pause")
-  i.icon-play.icon-white.big
+  .glyphicon.glyphicon-play
-  i.icon-pause.icon-white.big
+  .glyphicon.glyphicon-pause
-  i.icon-repeat.icon-white.big
+  .glyphicon.glyphicon-repeat
 
 button.btn.btn-xs.btn-inverse#volume-button(title="Adjust volume")
-  i.icon-volume-off.icon-white.big
+  .glyphicon.glyphicon-volume-off
-  i.icon-volume-down.icon-white.big
+  .glyphicon.glyphicon-volume-down
-  i.icon-volume-up.icon-white.big
+  .glyphicon.glyphicon-volume-up
 button.btn.btn-xs.btn-inverse#music-button(title="Toggle Music")
   span ♫
 
 .scrubber
-  .progress.secret#timeProgress
+  .scrubber-inner
-    .progress-bar
+    .progress.secret#timeProgress
-      .scrubber-handle
+      .progress-bar
-      .popover.fade.top.in#timePopover
+        .scrubber-handle
-        .arrow
+        .popover.fade.top.in#timePopover
-        h3.popover-title
+          .arrow
-        .popover-content
+          h3.popover-title
+          .popover-content
 
 .btn-group.dropup#playback-settings
   button.btn.btn-xs.btn-inverse.toggle-fullscreen(title="Toggle fullscreen")
-    i.icon-fullscreen.icon-white
+    .glyphicon.glyphicon-fullscreen
   button.btn.btn-xs.btn-inverse#zoom-in-button(title="Zoom In (or scroll down)")
-    i.icon-zoom-in.icon-white
+    .glyphicon.glyphicon-zoom-in
   button.btn.btn-xs.btn-inverse#zoom-out-button(title="Zoom Out (or scroll up)")
-    i.icon-zoom-out.icon-white
+    .glyphicon.glyphicon-zoom-out
-  button.btn.btn-xs.btn-inverse.dropdown-toggle(data-toggle="dropdown")#settings-button
-    i.icon-cog.icon-white.big
-  ul.dropdown-menu
-    if me.get('name') == "Nick"
-      li(title="Ctrl/Cmd + \\: Toggle debug display").selectable#debug-toggle
-        i.icon-globe
-        | Debug Mode
-        i.icon-ok.secret
-    li.selectable#view-keyboard-shortcuts
-      i.icon-info-sign
-      span(data-i18n="play_level.keyboard_shortcuts") Key Shortcuts
-    li.selectable#edit-wizard-settings
-      i.icon-user
-      span(data-i18n="play_level.customize_wizard") Customize Wizard
-    li.selectable#edit-editor-config
-      i.icon-edit
-      span(data-i18n="play_level.editor_config") Editor Config

app/views/play/level/LevelPlaybackView.coffee

@@ -17,7 +17,6 @@ module.exports = class LevelPlaybackView extends CocoView
     'level:scrub-forward': 'onScrubForward'
     'level:scrub-back': 'onScrubBack'
     'level:set-volume': 'onSetVolume'
-    'level:set-debug': 'onSetDebug'
     'surface:frame-changed': 'onFrameChanged'
     'god:new-world-created': 'onNewWorld'
     'god:streaming-world-updated': 'onNewWorld'
@@ -28,10 +27,6 @@ module.exports = class LevelPlaybackView extends CocoView
     'real-time-multiplayer:manual-cast': 'onRealTimeMultiplayerCast'
 
   events:
-    'click #debug-toggle': 'onToggleDebug'
-    'click #edit-wizard-settings': 'onEditWizardSettings'
-    'click #edit-editor-config': 'onEditEditorConfig'
-    'click #view-keyboard-shortcuts': 'onViewKeyboardShortcuts'
     'click #music-button': 'onToggleMusic'
     'click #zoom-in-button': -> Backbone.Mediator.publish 'camera:zoom-in', {} unless @shouldIgnore()
     'click #zoom-out-button': -> Backbone.Mediator.publish 'camera:zoom-out', {} unless @shouldIgnore()
@@ -52,59 +47,6 @@ module.exports = class LevelPlaybackView extends CocoView
     '⌘+], ctrl+]': 'onScrubForward'
     '⌘+⇧+], ctrl+⇧+]': 'onSingleScrubForward'
 
-  # popover that shows at the current mouse position on the progressbar, using the bootstrap popover.
-  # Could make this into a jQuery plugins itself theoretically.
-  class HoverPopup extends $.fn.popover.Constructor
-    constructor: () ->
-      @enabled = true
-      @shown = false
-      @type = 'HoverPopup'
-      @options =
-        placement: 'top'
-        container: 'body'
-        animation: true
-        html: true
-        delay:
-          show: 400
-      @$element = $('#timeProgress')
-      @$tip = $('#timePopover')
-
-      @content = ''
-
-    getContent: -> @content
-
-    show: ->
-      unless @shown
-        super()
-        @shown = true
-
-    updateContent: (@content) ->
-      @setContent()
-      @$tip.addClass('fade top in')
-
-    onHover: (@e) ->
-      pos = @getPosition()
-      actualWidth  = @$tip[0].offsetWidth
-      actualHeight = @$tip[0].offsetHeight
-      calculatedOffset =
-        top: pos.top - actualHeight
-        left: pos.left + pos.width / 2 - actualWidth / 2
-      this.applyPlacement(calculatedOffset, 'top')
-
-    getPosition: ->
-      top: @$element.offset().top
-      left: if @e? then @e.pageX else @$element.offset().left
-      height: 0
-      width: 0
-
-    hide: ->
-      super()
-      @shown = false
-
-    disable: ->
-      super()
-      @hide()
-
   constructor: ->
     super(arguments...)
     me.on('change:music', @updateMusicButton, @)
@@ -192,20 +134,6 @@ module.exports = class LevelPlaybackView extends CocoView
     @currentTime = 0
     @lastLoadedFrameCount = loadedFrameCount
 
-  onToggleDebug: ->
-    return if @shouldIgnore()
-    flag = $('#debug-toggle i.icon-ok')
-    Backbone.Mediator.publish('level:set-debug', {debug: flag.hasClass('invisible')})
-
-  onEditWizardSettings: ->
-    Backbone.Mediator.publish 'level:edit-wizard-settings', {}
-
-  onEditEditorConfig: ->
-    @openModalView new EditorConfigModal session: @options.session
-
-  onViewKeyboardShortcuts: ->
-    @openModalView new KeyboardShortcutsModal()
-
   onDisableControls: (e) ->
     if not e.controls or 'playback' in e.controls
       @disabled = true
@@ -340,10 +268,6 @@ module.exports = class LevelPlaybackView extends CocoView
     Backbone.Mediator.publish 'level:set-letterbox', on: false
     Backbone.Mediator.publish 'playback:real-time-playback-ended', {}
 
-  onSetDebug: (e) ->
-    flag = $('#debug-toggle i.icon-ok')
-    flag.toggleClass 'invisible', not e.debug
-
   # to refactor
 
   hookUpScrubber: ->
@@ -423,3 +347,56 @@ module.exports = class LevelPlaybackView extends CocoView
     $(window).off('resize', @onWindowResize)
     @onWindowResize = null
     super()
+
+# popover that shows at the current mouse position on the progressbar, using the bootstrap popover.
+# Could make this into a jQuery plugins itself theoretically.
+class HoverPopup extends $.fn.popover.Constructor
+  constructor: () ->
+    @enabled = true
+    @shown = false
+    @type = 'HoverPopup'
+    @options =
+      placement: 'top'
+      container: 'body'
+      animation: true
+      html: true
+      delay:
+        show: 400
+    @$element = $('#timeProgress')
+    @$tip = $('#timePopover')
+
+    @content = ''
+
+  getContent: -> @content
+
+  show: ->
+    unless @shown
+      super()
+      @shown = true
+
+  updateContent: (@content) ->
+    @setContent()
+    @$tip.addClass('fade top in')
+
+  onHover: (@e) ->
+    pos = @getPosition()
+    actualWidth  = @$tip[0].offsetWidth
+    actualHeight = @$tip[0].offsetHeight
+    calculatedOffset =
+      top: pos.top - actualHeight
+      left: pos.left + pos.width / 2 - actualWidth / 2
+    this.applyPlacement(calculatedOffset, 'top')
+
+  getPosition: ->
+    top: @$element.offset().top
+    left: if @e? then @e.pageX else @$element.offset().left
+    height: 0
+    width: 0
+
+  hide: ->
+    super()
+    @shown = false
+
+  disable: ->
+    super()
+    @hide()