mirror of
https://github.com/atom/atom.git
synced 2026-01-24 06:18:03 -05:00
6d303aad18
The lines element is now display: table and contained inside of the scroller. This means the lines element always expands to contain all lines, which allows absolute positioning inside of it to be relative to the entire scroll contents, not just to the currently visible area.
107 lines
1.8 KiB
CSS
107 lines
1.8 KiB
CSS
.editor {
|
|
font: 18px Inconsolata, Monaco, Courier !important;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #333;
|
|
color: white;
|
|
cursor: default;
|
|
overflow-y: scroll;
|
|
overflow-x: auto;
|
|
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.editor.soft-wrap {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.editor .content {
|
|
display: -webkit-flexbox;
|
|
}
|
|
|
|
.editor .gutter {
|
|
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 .horizontal-scroller {
|
|
overflow-x: auto;
|
|
width: -webkit-flex(1);
|
|
}
|
|
|
|
.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 #9dff9d;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.editor .cursor.idle {
|
|
-webkit-animation: blink 0.6s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
}
|
|
|
|
.editor .hidden-input {
|
|
position: absolute;
|
|
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;
|
|
}
|