pybricks-code/src/app/app.scss

// SPDX-License-Identifier: MIT
// Copyright (c) 2020-2022 The Pybricks Authors

// Custom styling for the App control.

@use '@blueprintjs/core/lib/scss/variables' as bp;
@use '../variables' as pb;

.pb-app {
    width: 100%;
    height: 100%;
    background-color: bp.$pt-app-background-color;

    .#{bp.$ns}-dark & {
        background-color: bp.$pt-dark-app-background-color;
    }

    &-activities {
        display: flex;
        @include pb.focus-within();
    }

    &-terminal {
        height: 100%;
        padding-top: 8px;
        padding-left: 8px;
        background-color: white;
        @include pb.focus-within();

        .#{bp.$ns}-dark & {
            background-color: black;
        }
    }

    &-docs {
        height: 100%;

        &-drag-helper {
            height: 100%;
            width: 100%;
            position: absolute;
        }
    }
}

.pb-app-body {
    // height makes everything fit without scrolling
    height: calc(var(--pb-vh, 100vh) - #{pb.$status-bar-height}) !important;
    position: relative;
    display: flex;
    flex-direction: row;

    .pb-app-main {
        min-width: 0;
        flex: 1 1 auto;
        @include pb.background-contrast(4%);
    }
}

.pb-app-editor {
    height: 100%;
    display: flex;
    flex-direction: column;

    & .pb-editor {
        min-height: 0;
        flex: 1 1 auto;
    }
}

// make layout splitter match app color scheme
.splitter-layout > .layout-splitter {
    background-color: bp.$pt-divider-black;

    .#{bp.$ns}-dark & {
        background-color: bp.$pt-dark-divider-white;
    }
}

.splitter-layout .layout-pane {
    overflow: hidden;
}

// hide the docs and resize separator

div.pb-hide-docs > :not(.layout-pane-primary) {
    display: none;
}