pulsar/static/editor.css
Nathan Sobo 5f253d78e9 Optimization: Use absolute positioning instead of flexbox in editor
Flexbox was causing layouts and repaints to cover the entire scroll view instead of just the edited line. This cuts down on DOM manipulation cost significantly.
2012-09-25 14:58:31 -06:00

115 lines
1.7 KiB
CSS

.editor {
height: 100%;
overflow: hidden;
cursor: default;
-webkit-user-select: none;
-webkit-box-flex: 1;
position: relative;
z-index: 0;
}
.editor.mini {
height: auto;
}
.editor .gutter {
position: absolute;
height: 100%;
overflow: hidden;
padding-left: 0.4em;
padding-right: 0.8em;
color: rgba(255, 255, 255, .3);
text-align: right;
}
.editor .gutter .line-numbers {
position: relative;
}
.editor.mini .gutter {
display: none;
}
.editor .gutter.drop-shadow {
-webkit-box-shadow: -2px 0px 10px 2px #222;
}
.editor .vertical-scrollbar {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 10px;
overflow-y: auto;
}
.editor .scroll-view {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-box-flex: 1;
}
.editor.mini .scroll-view {
overflow: hidden;
}
.editor.soft-wrap .scroll-view {
overflow-x: hidden;
}
.editor .lines {
position: relative;
display: table;
height: 100%;
width: 100%;
}
.editor .line > span {
vertical-align: top;
}
@-webkit-keyframes blink {
0% { opacity: 1; }
60% { opacity: 1; }
61% { opacity: 0; }
100% { opacity: 0; }
}
.editor .cursor {
position: absolute;
border-left: 2px solid;
}
.editor.focused .cursor.idle {
-webkit-animation: blink 0.8s;
-webkit-animation-iteration-count: infinite;
}
.editor .hidden-input {
position: fixed;
z-index: -1;
top: 0;
left: 0;
opacity: 0;
}
.editor .selection {
position: absolute;
background: rgba(255, 255, 255, .15);
pointer-events: none;
z-index: -1;
}
.editor .fold {
background-color: #444;
}
.editor .fold.selected {
background-color: #244;
}