src/containers/App/App.scss - main - githubmirror/ydb-embedded-ui

src/containers/App/App.scss
154 строки4 KB
Konstantin Kozlov
feat: implement new Infra styles for yandex-team (#4197)
10 авг 2026, 10:44
10 авг 2026, 10:44d2f3ac1
@use '../../styles/mixins.scss';

@forward '../../styles/drawer.scss';
@forward '../../styles/versions.scss';
@forward '../../styles/unipika.scss';

@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

* {
    // FIXME: this is an overkill, potentially could break external components, needs refactoring
    box-sizing: border-box;

    // Make all digits in the app monospace
    font-variant-numeric: tabular-nums;
}

.g-select-popup__tick-icon {
    // this is a local fix, remove after the refactoring
    box-sizing: content-box;
}

html,
body,
#root {
    --g-scrollbar-width: 8px;
    overflow: auto;

    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0;
}

:root {
    --g-color-base-yellow-light: rgba(255, 199, 0, 0.15);
    --g-color-base-yellow-medium: rgba(255, 219, 77, 0.4);

    --tenant-object-info-max-value-width: 300px;
    --diagnostics-section-title-margin: 20px;
    --diagnostics-section-margin: 30px;
    --diagnostics-section-table-width: 100%;
}

.g-root {
    --g-scrollbar-width: 8px;
    --header-height: 40px;

    --ydb-data-table-color-hover: var(--g-color-base-simple-hover-solid);

    // Colors for tablets, status icons and progress bars
    --ydb-color-status-grey: var(--g-color-base-neutral-heavy);
    --ydb-color-status-green: var(--g-color-base-positive-heavy);
    --ydb-color-status-yellow: var(--g-color-base-warning-heavy);
    --ydb-color-status-orange: var(--g-color-private-orange-500-solid);
    --ydb-color-status-red: var(--g-color-base-danger-heavy);
    --ydb-color-status-blue: var(--g-color-base-info-heavy);
    --ydb-color-status-black: var(--g-color-base-misc-heavy);

    --g-popover-max-width: 500px;

    -webkit-overflow-scrolling: touch;
    ::-webkit-scrollbar-corner,
    ::-webkit-scrollbar-thumb {
        border-radius: 8px;
    }

    &_theme_light,
    &_theme_light-hc {
        --code-background-color: var(--g-color-base-simple-hover-solid);

        // Multi-tab query editor
        --multitab-tab-inactive-background-color: var(--g-color-base-background);
        --multitab-tab-inactive-border-color: var(--g-color-line-generic);
        --multitab-tab-inactive-hover-background-color: var(--g-color-base-simple-hover);
        --multitab-tab-active-background-color: var(--g-color-base-generic);
        --multitab-tab-active-border-color: transparent;
        --multitab-tab-action-hover-color: var(--g-color-base-simple-hover);
        --multitab-code-background-color: var(--g-color-base-generic);
    }
    &_theme_dark,
    &_theme_dark-hc {
        // monaco background - vscDarkPlus theme
        --code-background-color: #1e1e1e;

        // Multi-tab query editor
        --multitab-tab-inactive-background-color: #424147;
        --multitab-tab-inactive-border-color: transparent;
        --multitab-tab-inactive-hover-background-color: var(--g-color-base-generic-hover);
        --multitab-tab-active-background-color: #222126;
        --multitab-tab-active-border-color: transparent;
        --multitab-tab-action-hover-color: var(--g-color-base-simple-hover);
        // Cannot use var(--code-background-color) here — it would create a circular
        // dependency with QueryEditor.scss which overrides --code-background-color
        // with var(--multitab-code-background-color) in multi-tab mode.
        --multitab-code-background-color: #222126;
    }
}

:is(#tab, .g-tabs-item_active .g-tabs-item__title) {
    color: var(--g-color-text-primary) !important;
}

:is(#tab, .g-tabs-item__title) {
    color: var(--g-color-text-secondary);
}

.loader {
    @include mixins.loader();
}

.app {
    height: 100%;
    @include mixins.flex-container();
    @include mixins.data-table-styles();

    &__main {
        overflow: auto;
        overscroll-behavior-y: contain;

        min-height: 0;

        @include mixins.flex-container();
    }
}

.error {
    color: var(--g-color-text-danger);
}

.g-root .data-table_highlight-rows .data-table__row:hover {
    background: var(--ydb-data-table-color-hover);
}

.g-table-column-setup__item {
    /* stylelint-disable-next-line declaration-no-important*/
    padding: 0 8px 0 32px !important;
    /* stylelint-disable-next-line declaration-no-important*/
    cursor: pointer !important;
}

.app_embedded {
    font-family: 'Rubik', sans-serif;
}

.g-tab__title {
    display: inline-flex;
    align-items: center;

    height: 100%;
}

.ydb-popover {
    padding: var(--g-spacing-4);
}