.editor { font: 18px Inconsolata, Monaco, Courier !important; position: relative; width: 100%; height: 100%; background: #333; color: white; cursor: default; overflow-y: scroll; -webkit-user-select: none; } .editor .content { display: -webkit-flexbox; } .editor .gutter { padding-left: 0.4em; padding-right: 0.8em; color: rgba(255, 255, 255, .3); text-align: right; } .editor .gutter.drop-shadow { -webkit-box-shadow: -2px 0px 10px 2px #222; } .editor .lines { overflow-x: auto; width: -webkit-flex(1); position: relative; } .editor .line { position: relative; white-space: pre; margin: 0; padding: 0; z-index: 1; } @-webkit-keyframes blink { 0% { opacity: .7; } 49% { opacity: .7; } 51% { opacity: 0; } 100% { opacity: 0; } } .editor .cursor { position: absolute; border-left: 3px solid #9dff9d; opacity: 0.7; } .editor .cursor.idle { -webkit-animation: blink 0.6s; -webkit-animation-iteration-count: infinite; } .editor .hidden-input { position: absolute; z-index: -1; top: 0; left: 0; opacity: 0; } .editor .selection { position: absolute; background: white; opacity: .1; } .fold-placeholder { -webkit-box-sizing: border-box; position: relative; display: inline-block; vertical-align: text-bottom; -webkit-border-radius: 3px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .95); } .fold-placeholder:hover { background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .3); color: white; } .fold-placeholder .ellipsis { position: relative; width: 100%; bottom: 40%; text-align: center; }