src/containers/Tenant/Query/QueryEditor/QueryEditor.scss - main - githubmirror/ydb-embedded-ui

src/containers/Tenant/Query/QueryEditor/QueryEditor.scss

111 строк2 KB

Konstantin Kozlov

feat: implement new Infra styles for yandex-team (#4197)

10 авг 2026, 10:44

10 авг 2026, 10:44d2f3ac1

@use '../../../../styles/mixins.scss';

.query-editor {
    position: relative;

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    height: 100%;

    @include mixins.query-data-table;

    &_multiTab {
        --code-background-color: var(--multitab-code-background-color);

        /* stylelint-disable declaration-no-important */
        .monaco-editor {
            background-color: var(--code-background-color) !important;
        }

        .monaco-editor .margin,
        .monaco-editor-background {
            background-color: transparent !important;
        }

        .monaco-editor,
        .monaco-editor .overflow-guard {
            border: none !important;
            outline: none !important;
        }

        .query-editor__monaco {
            border: none !important;
        }

        /* stylelint-enable declaration-no-important */
    }

    & .data-table__box .data-table__table-wrapper {
        padding-bottom: 0;
    }

    &__monaco {
        position: relative;

        display: flex;
        flex: 1 1 auto;

        width: 100%;
        height: 100%;

        border: 1px solid var(--g-color-line-generic);
    }

    &__monaco-wrapper {
        display: flex;
        flex: 1 1 auto;

        width: 100%;
        min-height: 0;
    }

    &__pane-wrapper {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;

        background-color: var(--g-color-base-background);

        &_top {
            // Monaco mounts context views inside the editor, so the top pane must stay above
            // the results pane for menus and other widgets to overflow the split boundary.
            z-index: 3;

            padding: 0 16px;

            border-bottom: 1px solid var(--g-color-line-generic);
        }

        &_loading > *:not(.query-editor__editor-loader) {
            visibility: hidden;
        }
    }

    &__editor-loader {
        position: absolute;
        z-index: 1;
        inset: 0;

        display: flex;
        visibility: visible;
        justify-content: center;
        align-items: center;
    }
}

.g-root_theme_dark .query-editor_multiTab,
.g-root_theme_dark-hc .query-editor_multiTab,
.g-root_theme_light .query-editor_multiTab,
.g-root_theme_light-hc .query-editor_multiTab {
    .monaco-editor .view-overlays .current-line {
        background-color: var(--g-color-base-generic-ultralight) !important;
    }
}

.ydb-current-query-highlight {
    background-color: var(--g-color-private-blue-50);
}