pybricks-code/src/index.scss

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

// css files
@use 'normalize.css/normalize';
@use '@blueprintjs/core/lib/css/blueprint';
@use '@blueprintjs/popover2/lib/css/blueprint-popover2';

// sass files
@use 'sass:color';
@use 'sass:math';
@use 'variables' as pb;
@use '@blueprintjs/core/lib/scss/variables' as bp;

// use :focus-visible instead of :focus (so we don't need blueprint.js focus style manager)

:focus {
    outline: none;
}

.#{bp.$ns}-control input:focus ~ .#{bp.$ns}-control-indicator {
    outline: none;

    .#{bp.$ns}-dark & {
        outline: none;
    }
}

// show focus for tree nodes even if mouse click it
.#{bp.$ns}-tree-node:focus:not(.pb-focus-managed),
// react-aria managed focus visibility
.pb-focus-ring,
// broswer managed focus visibility
:focus-visible:not(.pb-focus-managed) {
    @include pb.focus-outline(0);
}

// these controls need extra separation for better visibility
.#{bp.$ns}-control input:focus-visible ~ .#{bp.$ns}-control-indicator {
    @include pb.focus-outline(2px);
}

body {
    // no scrolling of the page
    overflow: hidden;
    user-select: none;
    width: 100%;
    height: 100%;
    position: absolute;
}

#root {
    width: 100%;
    height: 100%;

    & [data-overlay-container] {
        width: 100%;
        height: 100%;
    }
}

// Utility classes - do not use these in new code!

.h-100 {
    height: 100%;
}

.no-wrap {
    white-space: nowrap;
}

// shared styles

.pb-dropzone-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: bp.$pt-grid-size * 2;
    border-width: 2;
    border-radius: 2;
    border-style: dashed;
    border-color: bp.$pt-divider-black;
    background-color: bp.$pt-app-background-color;
    color: bp.$pt-text-color-muted;
    outline: none;
    transition: border 0.24s ease-in-out;

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

.pb-spacer {
    height: bp.$pt-grid-size * 2;
}

// global style tweaks

.#{bp.$ns}-toast {
    user-select: text;
    max-width: 700px;

    &.#{bp.$ns}-intent-primary {
        background-color: color.adjust(pb.$pybricks-blue, $lightness: -10%);

        & .#{bp.$ns}-button {
            background-color: color.adjust(
                pb.$pybricks-blue,
                $lightness: -10%
            ) !important;

            &:hover {
                background: pb.$pybricks-blue !important;
            }
        }
    }
}

.#{bp.$ns}-button {
    user-select: none;

    &.#{bp.$ns}-intent-primary {
        background: pb.$pybricks-blue;

        &.#{bp.$ns}-minimal {
            background: none;
        }

        &:hover {
            background: color.adjust(pb.$pybricks-blue, $lightness: -5%);
        }

        &:disabled,
        &.#{bp.$ns}-disabled {
            background: rgba(pb.$pybricks-blue, 0.5);
        }
    }

    &-text > img {
        display: block;
    }

    &-group:not(.#{bp.$ns}-minimal) {
        & > .#{bp.$ns}-popover-wrapper:not(:last-child) .#{bp.$ns}-button,
        & > .#{bp.$ns}-button:not(:last-child) {
            margin-right: 0px;
        }
    }
}

a.#{bp.$ns}-button {
    text-align: left;
}

.#{bp.$ns}-dialog-footer-actions {
    flex-wrap: wrap;
    row-gap: 10px;
}

.#{bp.$ns}-control {
    & input:checked ~ .#{bp.$ns}-control-indicator,
    &.#{bp.$ns}-switch input:checked ~ .#{bp.$ns}-control-indicator {
        background-color: pb.$pybricks-blue;

        .#{bp.$ns}-dark & {
            background-color: pb.$pybricks-blue;
        }
    }

    // make disabled:checked radio buttons appear as not checked
    &.#{bp.$ns}-radio input:disabled:checked ~ .bp4-control-indicator {
        // color definition is same as $minimal-button-background-color-hover,
        // which is used to define $control-background-color-disabled and
        // $dark-control-background-color-disabled variables
        background: rgba(bp.$gray3, 0.15);

        &:before {
            background-image: unset;
        }
    }
}

.#{bp.$ns}-control-group {
    gap: bp.$pt-grid-size * 0.5;
}

.#{bp.$ns}-form-group > .#{bp.$ns}-label {
    font-weight: bolder;
}

.#{bp.$ns}-input-group {
    & .#{bp.$ns}-icon {
        margin: 7px;

        &.#{bp.$ns}-intent-danger {
            color: bp.$red4;
        }
    }

    & .#{bp.$ns}-input-action {
        bottom: 0;
        display: flex;
        align-items: center;
    }
}

// don't take up so much space when there is no caret
.#{bp.$ns}-tree-node-caret-none {
    // $pt-grid-size / 2 matches padding on .#{bp.$ns}-tree-node-conent
    min-width: math.div(bp.$pt-grid-size, 2);
}

.#{bp.$ns}-running-text {
    *:first-child {
        margin-top: 0;
    }

    *:last-child {
        margin-bottom: 0;
    }
}

// make scrollbars fit our style
::-webkit-scrollbar {
    width: 16px;

    &-track {
        background: bp.$pt-app-background-color;

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

    &-thumb {
        border-width: 3px;
        border-style: solid;
        border-radius: 8px;
        border-color: bp.$pt-app-background-color;
        background: bp.$pt-icon-color;

        &:hover {
            background: bp.$pt-icon-color-hover;
        }

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

            &:hover {
                background: bp.$pt-dark-icon-color-hover;
            }
        }
    }
}