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

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

#goals-view
  position: absolute
  left: -15px
  top: -100px
  @include transition(0.5s ease-in-out)
  border-image: url(/images/level/goals_background.png) 15 20 51 15 fill stretch
  border-width: 8px 10px 25px 8px
  margin: -8px -10px -25px -8px
  padding: 19px 0px 2px 25px
  z-index: 3
  font-size: 14px

  &.brighter
    font-size: 18px
    font-size: 1.4vw
    border-width: 0.91vw 1.22vw 3.10vw 0.91vw

  .goals-status
    margin: 5px 0 0 0
    position: absolute
    color: white
    text-transform: uppercase

    .success
      color: lightgreen
      text-shadow: 1px 1px 0px black
    .timed-out
      color: rgb(230, 230, 230)
    .failure
      color: rgb(239, 61, 71)
      text-shadow: 1px 1px 0px black
    .incomplete
      color: rgb(245, 170, 49)
    .running
      color: rgb(200, 200, 200)
    
  ul
    padding-left: 0
    margin-bottom: 0
    color: black
    
  li
    list-style: none
    margin-right: 5px
    i
      margin-right: 5px
      
  li.status-incomplete
    color: #333
    
  li.status-failure
    color: darkred
    
  li.status-success
    color: darkgreen
    
#goals-view.collapsed i.collapsed, #goals-view.expanded i.expanded
  display: none

#goals-view.collapsed ul
  display: none
    
html.no-borderimage
  #goals-view
    background: transparent url(/images/level/goals_background.png)
    background-size: 100% 100%
    border: 0

    &.brighter
      border: 0

    .goals-status
      position: static
      margin-top: 10px
Trying to standardize sass imports in an effort to test #1615, to no avail. 2014-09-30 19:17:54 -04:00			`@import "app/styles/mixins"`
			`@import "app/styles/bootstrap/variables"`
Set up the goals view to be more hidden by default, and shows up on mouse hover. 2014-05-19 14:31:18 -04:00
Ready for action, sir! 2014-01-03 13:32:13 -05:00			`#goals-view`
			`position: absolute`
New GoalsView background. Be my guest with any text color improvements. 2014-11-04 20:20:58 -05:00			`left: -15px`
Set up the goals view to be more hidden by default, and shows up on mouse hover. 2014-05-19 14:31:18 -04:00			`top: -100px`
Increased prominence of GoalsView when at level playback end. Increased legibility of Surface text when PlaybackOverScreen is in effect, and changed colors of PlaybackOverScreen to be less intense and to indicate goal failure / non-failure. 2014-10-08 12:46:56 -04:00			`@include transition(0.5s ease-in-out)`
Made goals styling more robust to different sizing scenarios. 2014-11-05 18:06:26 -05:00			`border-image: url(/images/level/goals_background.png) 15 20 51 15 fill stretch`
			`border-width: 8px 10px 25px 8px`
			`margin: -8px -10px -25px -8px`
			`padding: 19px 0px 2px 25px`
Increased prominence of GoalsView when at level playback end. Increased legibility of Surface text when PlaybackOverScreen is in effect, and changed colors of PlaybackOverScreen to be less intense and to indicate goal failure / non-failure. 2014-10-08 12:46:56 -04:00			`z-index: 3`
			`font-size: 14px`

			`&.brighter`
GoalsView should now roughly scale with the size of the screen. 2014-10-27 19:34:20 -04:00			`font-size: 18px`
			`font-size: 1.4vw`
Made goals styling more robust to different sizing scenarios. 2014-11-05 18:06:26 -05:00			`border-width: 0.91vw 1.22vw 3.10vw 0.91vw`
Increased prominence of GoalsView when at level playback end. Increased legibility of Surface text when PlaybackOverScreen is in effect, and changed colors of PlaybackOverScreen to be less intense and to indicate goal failure / non-failure. 2014-10-08 12:46:56 -04:00
Added a status message to the goals view. 2014-05-19 19:34:39 -04:00			`.goals-status`
Made goals styling more robust to different sizing scenarios. 2014-11-05 18:06:26 -05:00			`margin: 5px 0 0 0`
			`position: absolute`
New GoalsView background. Be my guest with any text color improvements. 2014-11-04 20:20:58 -05:00			`color: white`
			`text-transform: uppercase`
Increased prominence of GoalsView when at level playback end. Increased legibility of Surface text when PlaybackOverScreen is in effect, and changed colors of PlaybackOverScreen to be less intense and to indicate goal failure / non-failure. 2014-10-08 12:46:56 -04:00
Added a status message to the goals view. 2014-05-19 19:34:39 -04:00			`.success`
New GoalsView background. Be my guest with any text color improvements. 2014-11-04 20:20:58 -05:00			`color: lightgreen`
			`text-shadow: 1px 1px 0px black`
Added a status message to the goals view. 2014-05-19 19:34:39 -04:00			`.timed-out`
New GoalsView background. Be my guest with any text color improvements. 2014-11-04 20:20:58 -05:00			`color: rgb(230, 230, 230)`
Added a status message to the goals view. 2014-05-19 19:34:39 -04:00			`.failure`
New GoalsView background. Be my guest with any text color improvements. 2014-11-04 20:20:58 -05:00			`color: rgb(239, 61, 71)`
			`text-shadow: 1px 1px 0px black`
Added a status message to the goals view. 2014-05-19 19:34:39 -04:00			`.incomplete`
New GoalsView background. Be my guest with any text color improvements. 2014-11-04 20:20:58 -05:00			`color: rgb(245, 170, 49)`
Goals now show status: 'Running...' while the world is simulating. 2014-11-05 17:42:55 -05:00			`.running`
			`color: rgb(200, 200, 200)`
Ready for action, sir! 2014-01-03 13:32:13 -05:00
			`ul`
Fixed #278 2014-01-27 19:59:34 -05:00			`padding-left: 0`
Ready for action, sir! 2014-01-03 13:32:13 -05:00			`margin-bottom: 0`
			`color: black`

			`li`
			`list-style: none`
			`margin-right: 5px`
			`i`
			`margin-right: 5px`

			`li.status-incomplete`
			`color: #333`

			`li.status-failure`
			`color: darkred`

			`li.status-success`
			`color: darkgreen`

			`#goals-view.collapsed i.collapsed, #goals-view.expanded i.expanded`
			`display: none`

			`#goals-view.collapsed ul`
Trying to standardize sass imports in an effort to test #1615, to no avail. 2014-09-30 19:17:54 -04:00			`display: none`
New GoalsView background. Be my guest with any text color improvements. 2014-11-04 20:20:58 -05:00
Made goals styling more robust to different sizing scenarios. 2014-11-05 18:06:26 -05:00			`html.no-borderimage`
			`#goals-view`
			`background: transparent url(/images/level/goals_background.png)`
			`background-size: 100% 100%`
			`border: 0`

			`&.brighter`
			`border: 0`

			`.goals-status`
			`position: static`
			`margin-top: 10px`