Files
yaak/src-web/components/Editor/Editor.css
2023-02-26 15:06:14 -08:00

136 lines
2.7 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;
font-family: monospace;
}
.cm-editor .cm-tooltip {
color: gray;
}
.cm-editor .placeholder-widget {
background-color: hsl(var(--color-blue-400));
padding: 0.05em 0.3em;
border-radius: 0.2em;
color: white;
cursor: pointer;
}
.cm-editor .cm-scroller {
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 {
box-shadow: 0 0 0 1px 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-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: transparent;
}
.cm-editor.cm-focused .cm-activeLineGutter,
.cm-editor.cm-focused .cm-activeLine {
background-color: hsl(var(--color-gray-100)/0.3);
}
.cm-editor * {
cursor: text;
}
.cm-editor .cm-cursor {
border-left: 2px solid hsl(var(--color-gray-900));
}
.cm-editor .cm-selectionBackground {
background-color: hsl(var(--color-gray-200));
}
.cm-editor.cm-focused .cm-selectionBackground {
background-color: hsl(var(--color-gray-200));
}
/* --> Add padding to container. For some reason, using padding on both adds an extra
* 1px offset so we need to use a combination of padding and margin.
*/
.cm-editor .cm-gutters {
padding-top: 0.2em;
}
.cm-editor .cm-content {
margin-top: 0.2em;
}
/* <-- */