mirror of
https://github.com/atom/atom.git
synced 2026-01-24 14:28:14 -05:00
d521dab2cf
The editor is divided into gutter and scroller. The gutter is scrolled to the correct vertical position whenever the lines are scrolled inside of scroller.
110 lines
1.8 KiB
CSS
110 lines
1.8 KiB
CSS
.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: .1;
|
|
}
|
|
|
|
.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;
|
|
}
|