pybricks-code/src/index.scss

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

@import '@blueprintjs/core/lib/scss/variables.scss';

// override variables here
// See https://blueprintjs.com/docs/#core/variables

$pt-navbar-height: 72px;

$pybricks-blue: #0088ce;
$pt-app-background-color: #e8e8e8;
$pt-intent-primary: $pybricks-blue;
$pt-outline-color: rgba($pybricks-blue, 0.6);

$navbar-background-color: $pt-app-background-color;
$dark-navbar-background-color: $pt-dark-app-background-color;

@import '~normalize.css';
@import '@blueprintjs/core/src/blueprint.scss';

$status-bar-height: 3vh;

:root {
    --mobile-pad: 0px;
}

body {
    // no scrolling of the page
    overflow: hidden;
    // See https://blueprintjs.com/docs/#core/components/navbar
    padding-top: $pt-navbar-height;
}

// Utility classes

.h-body {
    // height makes everything fit without scrolling
    height: calc(100vh - #{$pt-navbar-height} - #{$status-bar-height} - var(--mobile-pad)) !important;
}

.h-100 {
    height: 100%;
}

.w-100 {
    width: 100%;
}

.p-absolute {
    position: absolute;
}

.no-box-shadow {
    box-shadow: unset !important;
}

// Status bar. TODO: move this to separate file

.status-bar {
    position: fixed;
    top: calc(100vh - #{$status-bar-height} - var(--mobile-pad));
    background-color: $pybricks-blue;
    height: $status-bar-height;
    width: 100vw;
    display: flex;
    align-items: center;
}

.status-bar-item {
    width: 25%;
    margin-left: 10px;
}

.bp3-progress-bar.status-bar-item {
    // override progress bar default gray1 backgound
    background-color: $pt-app-background-color;
}

// Hacks

.bp3-navbar-divider {
    // don't draw vertical line since we are just using button groups
    border-left: unset;
}

.ace_gutter {
    // make ace editor match app backgound color
    background-color: $pt-app-background-color !important;
}

.layout-splitter {
    // make layout splitter match app color scheme
    background-color: $pt-app-background-color !important;
}

.terminal-padding {
    padding-left: 10px;
}

.watermark::after {
    content: "";
    background: url("/static/beta.svg");
    opacity: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    pointer-events: none
}