Files
yaak-mountain-loop/src-web/components/Editor/Editor.css
2023-03-03 17:03:20 -08:00

152 lines
3.0 KiB
CSS

.cm-wrapper {
height: 100%;
width: 100%;
position: relative;
}
.cm-wrapper .cm-editor {
position: absolute !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.cm-editor {
@apply w-full block;
}
.cm-singleline .cm-scroller {
overflow: hidden !important;;
}
.cm-editor .placeholder-widget {
@apply text-xs text-white bg-blue-400 py-[1px] px-1 mx-[1px] rounded cursor-default hover:bg-blue-500;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
}
.cm-multiline .cm-editor .cm-scroller {
@apply rounded-lg bg-gray-50;
}
.cm-editor.cm-focused {
outline: none !important;
}
.cm-multiline .cm-editor.cm-focused .cm-scroller {
box-shadow: 0 0 0 1px hsl(var(--color-blue-400)/0.4);
}
.cm-editor .cm-line {
color: hsl(var(--color-gray-900));
}
.cm-multiline .cm-editor .cm-line {
padding-left: 1em;
padding-right: 1.5em;
}
.cm-singleline .cm-editor .cm-scroller {
@apply flex;
align-items: center !important;
}
.cm-editor .cm-gutters {
@apply bg-gray-50 border-r-0 text-gray-200;
}
.cm-editor .cm-gutterElement {
transition: color var(--transition-duration);
}
.cm-editor .fold-gutter-icon {
@apply pt-[0.3em] pl-[0.4em] px-[0.4em] h-4 cursor-pointer rounded;
}
.cm-editor .fold-gutter-icon::after {
@apply block w-1.5 h-1.5 border-transparent -rotate-45
border-l border-b border-l-[currentColor] border-b-[currentColor] content-[''];
}
.cm-editor .fold-gutter-icon[data-open] {
@apply pt-[0.4em] pl-[0.3em];
}
.cm-editor .fold-gutter-icon[data-open]::after {
@apply rotate-[-135deg];
}
.cm-editor .fold-gutter-icon:hover {
@apply text-gray-400 bg-gray-100/20;
}
.cm-editor.cm-focused .cm-gutters {
@apply text-gray-300;
}
.cm-editor .cm-foldPlaceholder {
@apply px-2 border border-gray-200 bg-gray-100;
}
.cm-editor .cm-activeLineGutter,
.cm-editor .cm-activeLine {
@apply bg-transparent;
}
.cm-editor.cm-focused .cm-activeLineGutter {
@apply text-gray-800;
}
.cm-editor * {
@apply cursor-text;
}
.cm-editor .cm-cursor {
@apply border-l-2 border-gray-800;
}
.cm-editor .cm-selectionBackground {
@apply bg-gray-200;
}
.cm-editor.cm-focused .cm-selectionBackground {
@apply bg-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 {
@apply pt-1;
}
.cm-editor .cm-content {
@apply mt-1;
}
/* <-- */
.cm-tooltip.cm-tooltip {
@apply shadow-lg bg-background rounded overflow-hidden text-gray-900 border border-gray-100/70 z-50;
}
.cm-tooltip.cm-tooltip * {
@apply transition-none;
}
.cm-tooltip.cm-tooltip.cm-tooltip-autocomplete > ul {
@apply p-1 max-h-[40vh];
}
.cm-tooltip.cm-tooltip.cm-tooltip-autocomplete > ul > li {
@apply cursor-default py-1 px-2 rounded-sm text-gray-500;
}
.cm-tooltip.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
@apply bg-gray-50 text-gray-800;
}
.cm-tooltip.cm-tooltip.cm-tooltip-autocomplete .cm-completionIcon {
@apply text-sm;
}