Files
atom/static/editor.css
Nathan Sobo 3ee7c0dc0f "Scroll" gutter by relatively positioning its line numbers
This matches how we scroll lines, and eliminates opportunities for the gutter to get out of sync with the lines. If that happened, it would probably be a bug, but this at least eliminates one source of confusion when debugging.
2012-07-03 11:09:34 -06:00

116 lines
1.7 KiB
CSS

.editor {
height: 100%;
overflow: hidden;
background: #333;
color: white;
cursor: default;
-webkit-user-select: none;
-webkit-box-flex: 1;
position: relative;
}
.editor.mini {
height: auto;
}
.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 .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 {
overflow-x: auto;
overflow-y: hidden;
width: -webkit-flex(1);
height: 100%;
}
.editor.mini .scroll-view {
overflow: hidden;
}
.editor.soft-wrap .scroll-view {
overflow-x: hidden;
}
.editor .lines {
position: relative;
display: table;
width: 100%;
height: 100%;
}
.editor .line {
white-space: pre;
margin: 0;
padding: 0;
z-index: 1;
}
@-webkit-keyframes blink {
0% { opacity: .7; }
60% { opacity: .7; }
61% { 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.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: white;
opacity: .25;
pointer-events: none;
}