@discoveryjs/discovery/lib/views/editor/editors.css

Frontend framework for rapid data (JSON) analysis, shareable serverless reports and dashboards

@import url('codemirror/lib/codemirror.css');
@import url('codemirror/theme/neo.css');
@import url('./editors-hint.css');

.discovery-view-editor {
    --editor-border-color: rgba(124, 124, 124, 0.65);
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    border: 1px solid var(--editor-border-color);
    border-radius: 3px;
    background-color: var(--discovery-background-color);
}
.discovery-view-editor:focus-within {
    --editor-border-color: rgba(0, 141, 255, 0.75);
    box-shadow: 0 0 1px 3px rgba(0, 170, 255, .2), inset 0 1px 1px rgba(142, 142, 142, .2) !important;
}
.discovery-view-editor .discovery-view-editor__input-panel {
    order: 0;
}
.discovery-view-editor .discovery-view-editor__output-panel {
    order: 2;
}

.discovery-view-editor .CodeMirror {
    order: 1;
    height: auto;
    overflow-y: hidden !important;
    padding: 2px 8px;
    font-family: var(--discovery-monospace-font-family);
    font-size: 12px;
    background-color: var(--discovery-input-bg-color);
    /* box-shadow: inset 0 1px 1px rgba(142, 142, 142, .2); */
    transition: .25s ease-in;
    transition-property: background-color, color;
}
.discovery-root-darkmode .discovery-view-editor .CodeMirror {
    color: #d1c7c3;
}
.discovery-view-editor .CodeMirror-scroll {
    min-height: 6.5em;
    height: auto;
    overflow-y: hidden !important;
    cursor: text;
}

.discovery-view-editor.empty-value:not(:focus-within) .CodeMirror .CodeMirror-lines > div[role="presentation"]::before {
    content: attr(data-placeholder);
    position: absolute;
    color: #666;
}

.discovery-view-editor .CodeMirror .CodeMirror-line,
.discovery-view-editor .CodeMirror .CodeMirror-line-like {
    padding: 0;
}

.discovery-view-editor .CodeMirror-cursor {
    border-left: 1px solid var(--discovery-color, black);
    background: none;
}
.discovery-view-editor .CodeMirror-focused .CodeMirror-selected {
    background-color: rgba(0, 170, 255, 0.22);
}
.discovery-view-editor .CodeMirror-selected {
    background-color: rgba(126, 126, 126, 0.3);
}

.discovery-view-editor .CodeMirror .cm-comment {
    color: var(--discovery-fmt-comment-color);
}
.discovery-view-editor .CodeMirror .cm-keyword {
    color: var(--discovery-fmt-keyword-color);
}
.discovery-view-editor .CodeMirror .cm-property {
    color: var(--discovery-fmt-property-color);
}
.discovery-view-editor .CodeMirror .cm-atom {
    color: var(--discovery-fmt-atom-color);
}
.discovery-view-editor .CodeMirror .cm-number {
    color: var(--discovery-fmt-number-color);
}
.discovery-view-editor .CodeMirror .cm-type {
    color: var(--discovery-fmt-type-color);
}
.discovery-view-editor .CodeMirror .cm-node,
.discovery-view-editor .CodeMirror .cm-tag {
    color: #9c3328;
}
.discovery-view-editor .CodeMirror .cm-string,
.discovery-view-editor .CodeMirror .cm-string-2 {
    color: var(--discovery-fmt-string-color);
}
.discovery-view-editor .CodeMirror .cm-variable,
.discovery-view-editor .CodeMirror .cm-variable-2,
.discovery-view-editor .CodeMirror .cm-def,
.discovery-view-editor .CodeMirror .cm-qualifier {
    color: var(--discovery-fmt-variable-color);
}
.discovery-view-editor .CodeMirror .cm-discovery-view-name {
    background-color: var(--discovery-fmt-string-highlight-color);
    border-bottom: 1px dashed;
}