mirror of
https://github.com/Kong/insomnia
synced 2024-11-08 14:49:53 +00:00
118 lines
3.5 KiB
SCSS
118 lines
3.5 KiB
SCSS
@import '../constants/colors';
|
|
@import '../constants/dimensions';
|
|
|
|
.editor {
|
|
box-sizing: border-box;
|
|
height: 100% !important;
|
|
width: 100%;
|
|
|
|
.CodeMirror {
|
|
height: 100% !important;
|
|
width: 100%;
|
|
font-family: monospace;
|
|
box-sizing: border-box;
|
|
padding-top: $padding-sm;
|
|
}
|
|
|
|
.CodeMirror,
|
|
.cm-s-seti.CodeMirror, // Hack because seti theme is dumb
|
|
.CodeMirror-gutters,
|
|
.CodeMirror-scrollbar-filler,
|
|
.CodeMirror-gutter-filler {
|
|
// Let the background behind show through
|
|
background-color: $bg-super-dark !important;
|
|
border: 0;
|
|
}
|
|
|
|
.CodeMirror-linenumber, .CodeMirror-guttermarker-subtle {
|
|
color: $hl-xl !important;
|
|
}
|
|
|
|
.CodeMirror-scroll {
|
|
cursor: text; // Show text cursor everywhere (not just in .Codemirror-lines)
|
|
}
|
|
|
|
.CodeMirror-lines {
|
|
// Scroll past the end
|
|
//padding-bottom: 50px;
|
|
}
|
|
|
|
.CodeMirror-placeholder {
|
|
color: $hl-xxl;
|
|
}
|
|
|
|
.CodeMirror-lint-marker-error {
|
|
width: 100%;
|
|
height: 1em;
|
|
display: flex;
|
|
background: none;
|
|
text-align: center;
|
|
|
|
&::after {
|
|
color: darken($danger, 10);
|
|
text-align: center;
|
|
width: 100%;
|
|
font-size: 0.7em; // because the circle is so large
|
|
content: '⬤';
|
|
}
|
|
}
|
|
|
|
&.editor--readonly .CodeMirror-cursors {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
// This has to be outside because it's moved to the body element
|
|
.CodeMirror-lint-tooltip {
|
|
background-color: $bg-light;
|
|
color: $font-light-bg;
|
|
border-radius: 0;
|
|
font-size: $font-size-md;
|
|
padding: $padding-xs $padding-sm;
|
|
|
|
.CodeMirror-lint-message-error {
|
|
background-image: none;
|
|
padding-left: 0;
|
|
}
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Based on Sublime Text's Monokai theme */
|
|
|
|
.cm-s-default.CodeMirror { color: #f8f8f2; }
|
|
.cm-s-default div.CodeMirror-selected { background: #49483E; }
|
|
.cm-s-default .CodeMirror-line::selection, .cm-s-default .CodeMirror-line > span::selection, .cm-s-default .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }
|
|
.cm-s-default .CodeMirror-line::-moz-selection, .cm-s-default .CodeMirror-line > span::-moz-selection, .cm-s-default .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }
|
|
.cm-s-default .CodeMirror-gutters { background: #272822; border-right: 0px; }
|
|
.cm-s-default .CodeMirror-guttermarker { color: white; }
|
|
.cm-s-default .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
|
|
.cm-s-default .CodeMirror-linenumber { color: #d0d0d0; }
|
|
.cm-s-default .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
|
|
|
|
.cm-s-default span.cm-comment { color: #75715e; }
|
|
.cm-s-default span.cm-atom { color: lighten($surprise, 5); }
|
|
.cm-s-default span.cm-number { color: lighten($surprise, 5); }
|
|
|
|
.cm-s-default span.cm-property, .cm-s-default span.cm-attribute { color: lighten($success, 5); }
|
|
.cm-s-default span.cm-keyword { color: #f92672; }
|
|
.cm-s-default span.cm-builtin { color: #66d9ef; }
|
|
.cm-s-default span.cm-string { color: lighten($notice, 5); }
|
|
|
|
.cm-s-default span.cm-variable { color: #f8f8f2; }
|
|
.cm-s-default span.cm-variable-2 { color: #9effff; }
|
|
.cm-s-default span.cm-variable-3 { color: #66d9ef; }
|
|
.cm-s-default span.cm-def { color: #fd971f; }
|
|
.cm-s-default span.cm-bracket { color: #f8f8f2; }
|
|
.cm-s-default span.cm-tag { color: #f92672; }
|
|
.cm-s-default span.cm-header { color: lighten($surprise, 5); }
|
|
.cm-s-default span.cm-link { color: lighten($surprise, 5); }
|
|
.cm-s-default span.cm-error { background: #f92672; color: #f8f8f0; }
|
|
|
|
.cm-s-default .CodeMirror-activeline-background { background: #373831; }
|
|
.cm-s-default .CodeMirror-matchingbracket {
|
|
text-decoration: underline;
|
|
color: white !important;
|
|
}
|