mirror of
https://github.com/pulsar-edit/pulsar.git
synced 2024-09-22 08:28:41 +03:00
5f253d78e9
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.
115 lines
1.7 KiB
CSS
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;
|
|
}
|