pybricks-code/src/index.scss

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

@import './variables.scss';
@import '~normalize.css';
@import '~@blueprintjs/core/src/blueprint.scss';
@import '~@blueprintjs/popover2/src/blueprint-popover2.scss';
@import '~react-complex-tree/lib/style.css';

:root {
    --pb-vh: 100vh;
}

body {
    // no scrolling of the page
    overflow: hidden;
    user-select: none;
}

// Utility classes

.h-100 {
    height: 100%;
}

.w-100 {
    width: 100%;
}

.p-absolute {
    position: absolute;
}

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

// global style tweaks

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

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

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

.#{$ns}-button-text > img {
    display: block;
}

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

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

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

::-webkit-scrollbar {
    width: 16px;
}

.#{$ns}-dark ::-webkit-scrollbar-track {
    background: $pt-dark-app-background-color;
}

::-webkit-scrollbar-track {
    background: $pt-app-background-color;
}

.#{$ns}-dark ::-webkit-scrollbar-thumb {
    border-color: $pt-dark-app-background-color;
    background: $pt-dark-icon-color;
}

::-webkit-scrollbar-thumb {
    border-width: 3px;
    border-style: solid;
    border-radius: 8px;
    border-color: $pt-app-background-color;
    background: $pt-icon-color;
}

.#{$ns}-dark ::-webkit-scrollbar-thumb:hover {
    background: $pt-dark-icon-color-hover;
}

::-webkit-scrollbar-thumb:hover {
    background: $pt-icon-color-hover;
}

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

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