mirror of
https://github.com/atom/atom.git
synced 2026-01-14 09:27:57 -05:00
b486e3edda
As a consequence of https://github.com/atom/atom/pull/15378, we are now able to render highlight decorations in a separate div, as opposed to having an highlight container for each tile. Code-wise this is much simpler, because highlights spanning multiple tiles can be represented via a single region and don't need to be split across the tiles they span anymore. As a byproduct, performance should improve as well, because the number of nodes that need to be managed should decrease significantly. This also fixes https://github.com/atom/atom/issues/15449, and other similar rendering artifacts, because highlight decoration DOM nodes won't need to move between tiles anymore when their position changes.
148 lines
2.3 KiB
Plaintext
148 lines
2.3 KiB
Plaintext
@import "ui-variables";
|
|
@import "octicon-utf-codes";
|
|
@import "octicon-mixins";
|
|
|
|
atom-text-editor {
|
|
display: flex;
|
|
font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
|
cursor: text;
|
|
|
|
.gutter-container {
|
|
width: min-content;
|
|
background-color: inherit;
|
|
cursor: default;
|
|
}
|
|
|
|
.gutter {
|
|
overflow: hidden;
|
|
z-index: 0;
|
|
text-align: right;
|
|
min-width: 1em;
|
|
box-sizing: border-box;
|
|
background-color: inherit;
|
|
position: relative;
|
|
}
|
|
|
|
.gutter:hover {
|
|
.line-number.foldable .icon-right {
|
|
visibility: visible;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gutter, .gutter:hover {
|
|
.line-number.folded .icon-right {
|
|
.octicon(chevron-right, 0.8em);
|
|
|
|
visibility: visible;
|
|
|
|
&::before {
|
|
position: relative;
|
|
left: -.1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.line-numbers {
|
|
width: max-content;
|
|
background-color: inherit;
|
|
}
|
|
|
|
.line-number {
|
|
padding-left: .5em;
|
|
white-space: nowrap;
|
|
opacity: 0.6;
|
|
position: relative;
|
|
|
|
.icon-right {
|
|
.octicon(chevron-down, 0.8em);
|
|
display: inline-block;
|
|
visibility: hidden;
|
|
opacity: .6;
|
|
padding: 0 .4em;
|
|
|
|
&::before {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.highlight {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.highlight .region {
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.line {
|
|
white-space: pre;
|
|
contain: layout;
|
|
|
|
&.cursor-line .fold-marker::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.fold-marker {
|
|
cursor: default;
|
|
|
|
&::after {
|
|
.icon(0.8em, inline);
|
|
|
|
content: @ellipsis;
|
|
padding-left: 0.2em;
|
|
}
|
|
}
|
|
|
|
.placeholder-text {
|
|
position: absolute;
|
|
color: @text-color-subtle;
|
|
}
|
|
|
|
.invisible-character {
|
|
font-weight: normal !important;
|
|
font-style: normal !important;
|
|
}
|
|
|
|
.indent-guide {
|
|
display: inline-block;
|
|
box-shadow: inset 1px 0;
|
|
}
|
|
|
|
.cursor {
|
|
z-index: 4;
|
|
pointer-events: none;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
border-left: 1px solid;
|
|
opacity: 0;
|
|
}
|
|
|
|
&.is-focused .cursor {
|
|
opacity: 1;
|
|
}
|
|
|
|
.cursors.blink-off .cursor {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
atom-text-editor[mini] {
|
|
font-size: @input-font-size;
|
|
line-height: @component-line-height;
|
|
max-height: @component-line-height + 2; // +2 for borders
|
|
overflow: auto;
|
|
}
|
|
|
|
atom-overlay {
|
|
position: fixed;
|
|
display: block;
|
|
z-index: 4;
|
|
}
|