.editor { height: 100%; overflow: hidden; background: #333; font: 18px Inconsolata, Monaco, Courier !important; color: white; cursor: default; -webkit-user-select: none; } .editor .flexbox { display: -webkit-flexbox; } .editor .gutter { height: 100%; overflow: hidden; 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 .scroller { overflow: scroll; width: -webkit-flex(1); height: 100%; } .editor.soft-wrap .scroller { overflow-x: hidden; } .editor .lines { position: relative; display: table; width: 100%; } .editor .line { 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 rgba(255, 255, 255, .4); opacity: 0.7; } .editor.focused .cursor { border-color: #9dff9d; } .editor.focused .cursor.idle { -webkit-animation: blink 0.6s; -webkit-animation-iteration-count: infinite; } .editor .hidden-input { position: fixed; z-index: -1; top: 0; left: 0; opacity: 0; } .editor .selection { position: absolute; background: white; opacity: .25; } .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; }