mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-25 08:38:09 -05:00
149 lines
6.1 KiB
Sass
149 lines
6.1 KiB
Sass
@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(50, 255, 80, 0.65)
|
|
@include gradient-striped()
|
|
.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)
|
|
|
|
.executing:not(.ace_gutter-cell)
|
|
background-size: 40px 40px
|
|
text-shadow: 1px 1px 1px #000
|
|
@include animation(progress-bar-stripes 2s linear infinite)
|
|
|
|
.ace_gutter-cell.executing:not(.ace_error):not(.ace_warning):not(.ace_info)
|
|
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)
|
|
|
|
.ace_text-layer .ace_comment
|
|
color: rgb(78, 38, 226)
|
|
|
|
.ace_text-layer .ace_variable
|
|
// https://github.com/codecombat/codecombat/issues/6
|
|
color: rgb(145, 48, 50)
|
|
|
|
.ace_search
|
|
background-color: rgba(216, 187, 165, 1)
|
|
border: 0
|
|
@include box-shadow(1px 2px 1px #444)
|
|
|
|
.ace_search_field
|
|
width: 190px
|
|
|
|
.ace_searchbtn, .ace_replacebtn
|
|
padding: 0px 4px
|
|
|
|
html.no-borderimage
|
|
#spell-view
|
|
span.code-background
|
|
display: none
|
|
img.code-background
|
|
display: block
|
|
|