Files
atom/static/editor.css
Corey Johnson & Nathan Sobo d739736997 Add underlayer / overlayer for the selection and cursor
The renderedLines div can now only contain actual lines, nothing else. Thes divs are designed to match the lines div in dimensions and make it easy to put things in front of or behind the text.
2012-11-09 10:43:58 -07:00

149 lines
2.2 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;
color: rgba(255, 255, 255, .3);
text-align: right;
}
.editor .gutter .line-numbers {
position: relative;
}
.editor .gutter .line-number {
padding-left: 0.4em;
padding-right: 0.8em;
}
.editor.focused .line-number.cursor-line {
color: rgba(255, 255, 255, .6);
}
.editor.focused .cursor-line {
background-color: rgba(255, 255, 255, .12);
}
.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: 15px;
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 .underlayer, .editor .overlayer {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
}
.editor .underlayer {
z-index: 0;
}
.editor .lines {
position: relative;
display: table;
height: 100%;
width: 100%;
/*overflow: hidden; i'm worried this is causing rendering problems */
padding-right: 2em;
z-index: 1;
}
.editor .overlayer {
z-index: 2;
}
.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: absolute;
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;
}
.editor .invisible {
opacity: 0.2;
}