codecombat/app/styles/play/level/tome/spell.sass

85 lines
3.4 KiB
Sass

@import "../../../bootstrap/mixins"
#spell-view
position: absolute
left: 10px
top: 48px
bottom: 121px
// Bottom relates to .palette height and padding-top
right: 10px
z-index: 1
// Set z-index above palette
display: none
&.shown
display: block
.code-background
position: absolute
top: 0
height: 100%
.save-status
display: none
position: relative
padding-top: 2px
padding-left: 10px
.firepad
width: 100%
height: 100%
@include box-sizing(border-box)
.ace_editor
@include box-sizing(border-box)
margin-top: 40px
width: 100%
height: 83%
height: -webkit-calc(100% - 60px - 40px)
height: calc(100% - 60px - 40px)
position: relative
background-color: transparent
line-height: 20px
overflow: visible
&.disabled
@include opacity(80)
.ace_cursor
@include opacity(20)
.ace_gutter
background-color: rgba(255, 255, 255, 0.25)
width: 40px
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
background-color: rgba(216, 255, 255, 0.55)
.executed
background-color: rgba(216, 255, 255, 0.25)
.problem-marker-info
background-color: rgba(96, 63, 84, 0.25)
.problem-marker-warning
background-color: rgba(100, 65, 20, 0.25)
.problem-marker-error
background-color: rgba(110, 45, 27, 0.25)
.ace_gutter-cell.executing
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_marker-layer
.ace_bracket
// Override faint gray
border-color: #8FF
.ace_identifier
background-color: rgba(255, 128, 128, 0.15)