<commit_before>@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

@mixin editor-height($extraHeight)
  @include box-sizing(border-box)
  width: 98%
  height: 83%
  height: unquote("-webkit-calc(100% - 60px -")$extraHeight unquote(")")
  height: unquote("calc(100% - 60px -")$extraHeight unquote(")")

#spell-view
  position: absolute
  left: 10px
  top: 48px
  right: 10px
  padding-bottom: 10px
  z-index: 1
  // Set z-index above palette
  display: none

  &.shown
    display: block

  .code-background
    position: absolute
    top: 0
    height: 100%
    width: 100%
    
  span.code-background
    border-width: 40px
    border-image: url(/images/level/code_editor_background.png) 40 fill round

  img.code-background
    display: none

  .save-status
    display: none
    position: absolute
    top: 1%
    right: 4%

  .firepad
    // When Firepad is active, it wraps .ace_editor in .firepad.
    @include editor-height(0px)
    width: 98%

    .ace_editor
      width: 100%
      height: 100%

    .powered-by-firepad
      display: none

  .ace_editor
    // When Firepad isn't active, .ace_editor needs the width/height set itself.
    @include editor-height(0px)
    width: 98%
    position: relative
    background-color: transparent
    line-height: 20px
    overflow: visible
    // https://github.com/codecombat/codecombat/issues/1411#issuecomment-60492750 -- trying to make sure system defaults don't mess up our monospace font.
    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, "source-code-pro", monospace !important

    &.disabled
      @include opacity(80)
      .ace_cursor
        @include opacity(20)

    .ace_gutter
      background-color: rgba(255, 255, 255, 0.25)
      width: 47px
      margin-left: 4px
      border-bottom: 1px dotted #2f261d

    .ace_scroller
      background-color: transparent
      border-bottom: 1px dotted #2f261d

    .ace_content
      .executing, .executed, .problem-marker-info, .problem-marker-warning, .problem-marker-error
        position: absolute
    .executing
      // https://github.com/codecombat/codecombat/issues/6
      background-color: rgba(255, 255, 255, 0.75)
      @include gradient-striped()
      outline: 2px outset #0099ff
      @include box-shadow(1px 1px 4px black)
    &.playback-ended .executing
      background-color: rgba(50, 255, 80, 0.65)
      outline: 0
      @include box-shadow(0 0 0px black)
    .executed
      background-color: rgba(110, 110, 110, 0.12)
    .problem-marker-info
      background-color: rgba(196, 163, 184, 0.25)
    .problem-marker-warning
      background-color: rgba(100, 65, 20, 0.25)
    .problem-marker-error
      background-color: rgba(110, 45, 27, 0.25)

    &:not(.playback-ended)
      .executing:not(.ace_gutter-cell)
        background-size: 40px 40px
        @include animation(progress-bar-stripes 0.5s linear infinite)

    .ace_gutter-cell.executing:not(.ace_error):not(.ace_warning):not(.ace_info)
      margin-left: 1px
      background-image: url(data:image/png;<KEY>)
      background-position: 0px center

    .ace_gutter-cell.executed:not(.ace_error):not(.ace_warning):not(.ace_info)
      margin-left: 1px
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANhJREFUeNpi/P//PwM1ARMDlcHgMrA428MAiANQBEFhSA4uynIXAOJ+dHFKXDgfiDdSxctAbzYAqQ+9U3ccQJdjIcMwByCVD8SGFEcK0DAFILUeiCcCXfeAIgOBhglADfsAxBNwqSPFy/1AbADEiUDXfSApHQJdcx+I9yPxE4AUCB8AGrYAn62M6HkZ6rX3UG4jEG8A4vNQviO2mMXrQqh3GqHcemi4gcACQobhixRQoMNiUQEaEY1k52WoKwuRhHAmE6KTDdCADdDwu4AvmRCMlOFfwAIEGAD4On+N4aXlhgAAAABJRU5ErkJggg==)
      background-position: 0px center

    .ace_gutter-cell.comment-line
      background-position: 0px center
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIJJREFUeNpiTF9y4j0DA4MAA5mAiRLNIMACY8yMsWAkRSPQ5Q1Aqp6JgUIwagAVDGAERsd/LOKGwGi9AJRLALL78aUVRhwp0RGIHUDxTNAFaIljP1TjBSA2gAofAOJAoIs+4E2JaACmeQFQYyK5gdhISDM2F3yA4kKg5gXExAJAgAEACuQiMh7vH10AAAAASUVORK5CYII=)

    .ace_marker-layer
      .ace_bracket
        // Override faint gray
        border-color: #BFF

    // Decided it wasn't useful to show what can be hovered, since almost anything can, so we have to make it too faint to be useful if we don't want it to be really distracting.
    //.ace_identifier
    //  border-bottom: 1px dotted rgba(0, 51, 255, 0.25)<commit_msg>Experimenting with a larger currently-executing-line pointer.<commit_after>@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

@mixin editor-height($extraHeight)
  @include box-sizing(border-box)
  width: 98%
  height: 83%
  height: unquote("-webkit-calc(100% - 60px -")$extraHeight unquote(")")
  height: unquote("calc(100% - 60px -")$extraHeight unquote(")")

#spell-view
  position: absolute
  left: 10px
  top: 48px
  right: 10px
  padding-bottom: 10px
  z-index: 1
  // Set z-index above palette
  display: none

  &.shown
    display: block

  .code-background
    position: absolute
    top: 0
    height: 100%
    width: 100%
    
  span.code-background
    border-width: 40px
    border-image: url(/images/level/code_editor_background.png) 40 fill round

  img.code-background
    display: none

  .save-status
    display: none
    position: absolute
    top: 1%
    right: 4%

  .firepad
    // When Firepad is active, it wraps .ace_editor in .firepad.
    @include editor-height(0px)
    width: 98%

    .ace_editor
      width: 100%
      height: 100%

    .powered-by-firepad
      display: none

  .ace_editor
    // When Firepad isn't active, .ace_editor needs the width/height set itself.
    @include editor-height(0px)
    width: 98%
    position: relative
    background-color: transparent
    line-height: 20px
    overflow: visible
    // https://github.com/codecombat/codecombat/issues/1411#issuecomment-60492750 -- trying to make sure system defaults don't mess up our monospace font.
    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, "source-code-pro", monospace !important

    &.disabled
      @include opacity(80)
      .ace_cursor
        @include opacity(20)

    .ace_gutter
      background-color: rgba(255, 255, 255, 0.25)
      width: 47px
      margin-left: 4px
      border-bottom: 1px dotted #2f261d
      
    // override ace visible to get the experimental large current line executing arrow visible
    .ace_gutter
      overflow: visible
      
    .ace_layer
      overflow: visible
    // End experiment....

    .ace_scroller
      background-color: transparent
      border-bottom: 1px dotted #2f261d

    .ace_content
      .executing, .executed, .problem-marker-info, .problem-marker-warning, .problem-marker-error
        position: absolute
    .executing
      // https://github.com/codecombat/codecombat/issues/6
      background-color: rgba(255, 255, 255, 0.75)
      @include gradient-striped()
      outline: 2px outset #0099ff
      @include box-shadow(1px 1px 4px black)
    &.playback-ended .executing
      background-color: rgba(50, 255, 80, 0.65)
      outline: 0
      @include box-shadow(0 0 0px black)
    .executed
      background-color: rgba(110, 110, 110, 0.12)
    .problem-marker-info
      background-color: rgba(196, 163, 184, 0.25)
    .problem-marker-warning
      background-color: rgba(100, 65, 20, 0.25)
    .problem-marker-error
      background-color: rgba(110, 45, 27, 0.25)

    &:not(.playback-ended)
      .executing:not(.ace_gutter-cell)
        background-size: 40px 40px
        @include animation(progress-bar-stripes 0.5s linear infinite)

    .ace_gutter-cell.executing:not(.ace_error):not(.ace_warning):not(.ace_info):after
      
      // Experimenting with a larger executing-line-pointer
      content: "\e072"
      position: relative
      top: -31px
      left: -39px
      display: inline-block
      font-family: 'Glyphicons Halflings'
      font-style: normal
      font-weight: normal
      line-height: 1
      color: white
      text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black
      font-size: 39px
      -webkit-font-smoothing: antialiased
      -moz-osx-font-smoothing: grayscale
      
      
      //display: block
      //margin-left: 1px
      //background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMjgwMTE3NDA3MjA2ODExOEE2REU4Q0M1MTM1MkIxRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBQjVEQUNDMzQ4RUIxMUUxOEVGRUUyNzFENDM3RDVFMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBQjVEQUNDMjQ4RUIxMUUxOEVGRUUyNzFENDM3RDVFMCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTU1MjE3RDIzMTIwNjgxMThEQkI4NTlBMjQ1QTEwOTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4MDExNzQwNzIwNjgxMThBNkRFOENDNTEzNTJCMUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7SazaGAAAAiElEQVR42mL8//8/AzUBEwOVweA3kAWboI2jCyhgDwBx4ZH9ey5Qy4UOQHweaHg/EAtQ08sFUIMDqBmGCkC8HmgoCCtQM1ICoK5toGYsg8KzHmjo+UGbDj8AcSMwORkSnQ7xgA3QtPmApISNBTyAGrSBGl6eAMSGxBhGyIVkZT3G0fKQYgAQYACL+C2ZM6PC7AAAAABJRU5ErkJggg==)
      //background-position: 0px center

    .ace_gutter-cell.executed:not(.ace_error):not(.ace_warning):not(.ace_info)
      margin-left: 1px
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANhJREFUeNpi/P//PwM1ARMDlcHgMrA428MAiANQBEFhSA4uynIXAOJ+dHFKXDgfiDdSxctAbzYAqQ+9U3ccQJdjIcMwByCVD8SGFEcK0DAFILUeiCcCXfeAIgOBhglADfsAxBNwqSPFy/1AbADEiUDXfSApHQJdcx+I9yPxE4AUCB8AGrYAn62M6HkZ6rX3UG4jEG8A4vNQviO2mMXrQqh3GqHcemi4gcACQobhixRQoMNiUQEaEY1k52WoKwuRhHAmE6KTDdCADdDwu4AvmRCMlOFfwAIEGAD4On+N4aXlhgAAAABJRU5ErkJggg==)
      background-position: 0px center

    .ace_gutter-cell.comment-line
      background-position: 0px center
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIJJREFUeNpiTF9y4j0DA4MAA5mAiRLNIMACY8yMsWAkRSPQ5Q1Aqp6JgUIwagAVDGAERsd/LOKGwGi9AJRLALL78aUVRhwp0RGIHUDxTNAFaIljP1TjBSA2gAofAOJAoIs+4E2JaACmeQFQYyK5gdhISDM2F3yA4kKg5gXExAJAgAEACuQiMh7vH10AAAAASUVORK5CYII=)

    .ace_marker-layer
      .ace_bracket
        // Override faint gray
        border-color: #BFF

    // Decided it wasn't useful to show what can be hovered, since almost anything can, so we have to make it too faint to be useful if we don't want it to be really distracting.
    //.ace_identifier
    //  border-bottom: 1px dotted rgba(0, 51, 255, 0.25)
{'fraction_non_alphanumeric': 0.08600713012477719, 'fraction_numerical': 0.0680926916221034, 'mean_word_length': 3.8935891844744877, 'pattern_counts': {'":': 0, '<': 4, '<?xml version=': 0, '>': 4, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 1, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '805564', 'n_tokens_mistral': 5398, 'n_tokens_neox': 4763, 'n_words': 696}