Files
yaak/src-web/components/Editor/Editor.css
Gregory Schier 76e398b8a1 Vendor basicSetup
2023-02-24 14:51:56 -08:00

110 lines
2.2 KiB
CSS

.cm-wrapper {
height: 100%;
width: 100%;
position: relative;
}
.cm-editor {
position: absolute !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-size: 0.9rem;
}
.cm-editor .cm-scroller {
border: 1px solid hsl(var(--color-gray-50));
border-radius: var(--border-radius-lg);
background-color: hsl(var(--color-gray-50));
}
.cm-editor.cm-focused {
outline: none !important;
}
.cm-editor.cm-focused .cm-scroller {
border-color: hsl(var(--color-blue-400)/0.4);
}
.cm-editor .cm-line {
padding-left: 1em;
padding-right: 1.5em;
color: hsl(var(--color-gray-900));
}
.cm-editor .cm-gutters {
background-color: hsl(var(--color-gray-50));
border-right: 0;
color: hsl(var(--color-gray-200));
}
.cm-editor .fold-gutter-icon {
height: 1.5em;
padding-top: 0.2em;
padding-left: 0.4em;
padding-right: 0.4em;
cursor: pointer;
border-radius: 0.2em;
}
.cm-editor .fold-gutter-icon::after {
display: block;
width: 0.5em;
height: 0.5em;
border: 1px solid transparent;
border-left-color: currentColor;
border-bottom-color: currentColor;
transform: rotate(-45deg);
content: "";
}
.cm-editor .fold-gutter-icon[data-open] {
padding-top: 0.4em;
padding-left: 0.2em;
}
.cm-editor .fold-gutter-icon[data-open]::after {
transform: rotate(-135deg);
}
.cm-editor .fold-gutter-icon:hover {
background-color: hsl(var(--color-gray-100)/0.2);
color: hsl(var(--color-gray-400));
}
.cm-editor.cm-focused .cm-gutters {
color: hsl(var(--color-gray-300));
}
.cm-editor .cm-content {
padding-top: 0.4rem;
}
.cm-editor .cm-foldPlaceholder {
background-color: hsl(var(--color-gray-100));
border: 1px solid hsl(var(--color-gray-200));
padding: 0 0.3em;
}
.cm-editor .cm-activeLineGutter,
.cm-editor .cm-activeLine {
background-color: hsl(var(--color-gray-50));
}
.cm-editor * {
cursor: text;
}
.cm-editor .cm-cursor {
border-left: 2px solid red;
}
.cm-editor .cm-selectionBackground {
background-color: hsl(var(--color-gray-100));
}
.cm-editor.cm-focused .cm-selectionBackground {
background-color: hsl(var(--color-gray-100));
}