mirror of
https://github.com/pybricks/pybricks-code.git
synced 2026-09-12 01:23:52 +00:00
Andreas Litt
de237b13f9
clicking on a link with a URI fragment (e.g. https://docs.pybricks.com/en/latest/parameters.html#pybricks.parameters.Port) inside the documentation iframe breaks the layout. The browser seems to force the parent frame to scroll to the position as well. As the toolbar is fixed, the rest of the content is scrolled under it. Rerendering after the link click fixes the layout (at least if done manually). But a more elegant solutions is to remove the absolute positioning of the toolbar. It is not really necessary to pin it, as the rest of the layout always spans over the complete width and height of the browser window.
110 lines
2.1 KiB
SCSS
110 lines
2.1 KiB
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;
|
|
}
|
|
|
|
// 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("./beta.svg");
|
|
opacity: 1;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
position: absolute;
|
|
pointer-events: none
|
|
}
|