466 lines
7.5 KiB
466 lines
7.5 KiB
.bb {
|
|
svg {
|
|
// font-size: 12px;
|
|
// line-height: 1;
|
|
|
|
font: 10px sans-serif;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
path,
|
|
line {
|
|
fill: none;
|
|
// stroke: #000;
|
|
}
|
|
|
|
path.domain {
|
|
.vscode-dark & {
|
|
stroke: var(--color-background--lighten-15);
|
|
}
|
|
|
|
.vscode-light & {
|
|
stroke: var(--color-background--darken-15);
|
|
}
|
|
}
|
|
|
|
text,
|
|
.bb-button {
|
|
user-select: none;
|
|
// fill: var(--color-foreground--75);
|
|
fill: var(--color-view-foreground);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.bb-legend-item-tile,
|
|
.bb-xgrid-focus,
|
|
.bb-ygrid-focus,
|
|
.bb-ygrid,
|
|
.bb-event-rect,
|
|
.bb-bars path {
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.bb-chart-arc {
|
|
.bb-gauge-value {
|
|
fill: #000;
|
|
}
|
|
|
|
path {
|
|
stroke: #fff;
|
|
}
|
|
|
|
rect {
|
|
stroke: #fff;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
text {
|
|
fill: #fff;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
/*-- Axis --*/
|
|
.bb-axis {
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
// .bb-axis-y,
|
|
// .bb-axis-y2 {
|
|
// text {
|
|
// fill: var(--color-foreground--75);
|
|
// }
|
|
// }
|
|
|
|
// .bb-event-rects {
|
|
// fill-opacity: 1 !important;
|
|
|
|
// .bb-event-rect {
|
|
// fill: transparent;
|
|
|
|
// &._active_ {
|
|
// fill: rgba(39, 201, 3, 0.05);
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// .tick._active_ text {
|
|
// fill: #00c83c !important;
|
|
// }
|
|
|
|
/*-- Grid --*/
|
|
.bb-grid {
|
|
pointer-events: none;
|
|
|
|
line {
|
|
.vscode-dark & {
|
|
stroke: var(--color-background--lighten-05);
|
|
|
|
&.bb-ygrid {
|
|
stroke: var(--color-background--lighten-05);
|
|
}
|
|
}
|
|
|
|
.vscode-light & {
|
|
stroke: var(--color-background--darken-05);
|
|
|
|
&.bb-ygrid {
|
|
stroke: var(--color-background--darken-05);
|
|
}
|
|
}
|
|
}
|
|
|
|
text {
|
|
// fill: #aaa;
|
|
fill: var(--color-view-foreground);
|
|
}
|
|
}
|
|
|
|
// .bb-xgrid {
|
|
// stroke-dasharray: 2 2;
|
|
// }
|
|
|
|
// .bb-ygrid {
|
|
// stroke-dasharray: 2 1;
|
|
// }
|
|
|
|
.bb-xgrid-focus {
|
|
line {
|
|
.vscode-dark & {
|
|
stroke: var(--color-background--lighten-30);
|
|
}
|
|
.vscode-light & {
|
|
stroke: var(--color-background--darken-30);
|
|
}
|
|
}
|
|
}
|
|
|
|
/*-- Text on Chart --*/
|
|
.bb-text.bb-empty {
|
|
fill: #808080;
|
|
font-size: 2em;
|
|
}
|
|
|
|
/*-- Line --*/
|
|
.bb-line {
|
|
stroke-width: 1px;
|
|
}
|
|
|
|
/*-- Point --*/
|
|
.bb-circle {
|
|
&._expanded_ {
|
|
opacity: 1 !important;
|
|
fill-opacity: 1 !important;
|
|
stroke-opacity: 1 !important;
|
|
stroke-width: 3px;
|
|
}
|
|
}
|
|
|
|
.bb-selected-circle {
|
|
opacity: 1 !important;
|
|
fill-opacity: 1 !important;
|
|
stroke-opacity: 1 !important;
|
|
stroke-width: 3px;
|
|
}
|
|
|
|
// rect.bb-circle,
|
|
// use.bb-circle {
|
|
// &._expanded_ {
|
|
// stroke-width: 3px;
|
|
// }
|
|
// }
|
|
|
|
// .bb-selected-circle {
|
|
// stroke-width: 2px;
|
|
|
|
// .vscode-dark & {
|
|
// fill: rgba(255, 255, 255, 0.2);
|
|
// }
|
|
|
|
// .vscode-light & {
|
|
// fill: rgba(0, 0, 0, 0.1);
|
|
// }
|
|
// }
|
|
|
|
/*-- Bar --*/
|
|
.bb-bar {
|
|
stroke-width: 0;
|
|
opacity: 0.9 !important;
|
|
fill-opacity: 0.9 !important;
|
|
|
|
&._expanded_ {
|
|
opacity: 1 !important;
|
|
fill-opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
/*-- Candlestick --*/
|
|
.bb-candlestick {
|
|
stroke-width: 1px;
|
|
|
|
&._expanded_ {
|
|
fill-opacity: 0.75;
|
|
}
|
|
}
|
|
|
|
/*-- Focus --*/
|
|
.bb-target.bb-focused,
|
|
.bb-circles.bb-focused {
|
|
opacity: 1;
|
|
}
|
|
|
|
.bb-target.bb-focused path.bb-line,
|
|
.bb-target.bb-focused path.bb-step,
|
|
.bb-circles.bb-focused path.bb-line,
|
|
.bb-circles.bb-focused path.bb-step {
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.bb-target.bb-defocused,
|
|
.bb-circles.bb-defocused {
|
|
opacity: 0.2 !important;
|
|
}
|
|
.bb-target.bb-defocused .text-overlapping,
|
|
.bb-circles.bb-defocused .text-overlapping {
|
|
opacity: 0.05 !important;
|
|
}
|
|
|
|
/*-- Region --*/
|
|
.bb-region {
|
|
fill: steelblue;
|
|
fill-opacity: 0.1;
|
|
}
|
|
|
|
/*-- Zoom region --*/
|
|
.bb-zoom-brush {
|
|
.vscode-dark & {
|
|
fill: white;
|
|
fill-opacity: 0.2;
|
|
}
|
|
|
|
.vscode-light & {
|
|
fill: black;
|
|
fill-opacity: 0.1;
|
|
}
|
|
}
|
|
|
|
/*-- Brush --*/
|
|
.bb-brush {
|
|
.extent {
|
|
fill-opacity: 0.1;
|
|
}
|
|
}
|
|
|
|
/*-- Legend --*/
|
|
.bb-legend-item {
|
|
font-size: 12px;
|
|
user-select: none;
|
|
}
|
|
|
|
.bb-legend-item-hidden {
|
|
opacity: 0.15;
|
|
}
|
|
|
|
.bb-legend-background {
|
|
opacity: 0.75;
|
|
fill: white;
|
|
stroke: lightgray;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
/*-- Title --*/
|
|
.bb-title {
|
|
font: 14px sans-serif;
|
|
}
|
|
|
|
/*-- Tooltip --*/
|
|
.bb-tooltip-container {
|
|
z-index: 10;
|
|
user-select: none;
|
|
}
|
|
|
|
.bb-tooltip {
|
|
display: flex;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
background-color: var(--color-hover-background);
|
|
color: var(--color-hover-foreground);
|
|
empty-cells: show;
|
|
opacity: 1;
|
|
box-shadow: 7px 7px 12px -9px var(--color-hover-border);
|
|
|
|
font-size: var(--font-size);
|
|
font-family: var(--font-family);
|
|
|
|
tbody {
|
|
border: 1px solid var(--color-hover-border);
|
|
}
|
|
|
|
th {
|
|
padding: 0.5rem 1rem;
|
|
text-align: left;
|
|
}
|
|
|
|
tr {
|
|
&:not(.bb-tooltip-name-additions, .bb-tooltip-name-deletions) {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
margin-bottom: -1px;
|
|
|
|
td {
|
|
&.name {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
font-family: var(--editor-font-family);
|
|
background-color: var(--color-hover-statusBarBackground);
|
|
border-top: 1px solid var(--color-hover-border);
|
|
border-bottom: 1px solid var(--color-hover-border);
|
|
padding: 0.5rem;
|
|
line-height: 2rem;
|
|
|
|
&:before {
|
|
font: normal normal normal 16px/1 codicon;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
text-rendering: auto;
|
|
text-align: center;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
user-select: none;
|
|
|
|
vertical-align: middle;
|
|
line-height: 2rem;
|
|
padding-right: 0.25rem;
|
|
|
|
content: '\eafc';
|
|
}
|
|
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.value {
|
|
display: flex;
|
|
padding: 0.25rem 2rem 1rem 2rem;
|
|
white-space: pre-line;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
max-width: 450px;
|
|
max-height: 450px;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.bb-tooltip-name-additions,
|
|
&.bb-tooltip-name-deletions {
|
|
display: inline-flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: center;
|
|
width: calc(50% - 2rem);
|
|
margin: 0px 1rem;
|
|
|
|
td {
|
|
&.name {
|
|
text-transform: lowercase;
|
|
}
|
|
&.value {
|
|
margin-right: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// td > span,
|
|
// td > svg {
|
|
// display: inline-block;
|
|
// width: 10px;
|
|
// height: 10px;
|
|
// margin-right: 6px;
|
|
// }
|
|
}
|
|
|
|
/*-- Area --*/
|
|
.bb-area {
|
|
stroke-width: 0;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
/*-- Arc --*/
|
|
.bb-chart-arcs-title {
|
|
dominant-baseline: middle;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
text.bb-chart-arcs-gauge-title {
|
|
dominant-baseline: middle;
|
|
font-size: 2.7em;
|
|
}
|
|
|
|
.bb-chart-arcs .bb-chart-arcs-background {
|
|
fill: #e0e0e0;
|
|
stroke: #fff;
|
|
}
|
|
|
|
.bb-chart-arcs .bb-chart-arcs-gauge-unit {
|
|
fill: #000;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.bb-chart-arcs .bb-chart-arcs-gauge-max {
|
|
fill: #777;
|
|
}
|
|
|
|
.bb-chart-arcs .bb-chart-arcs-gauge-min {
|
|
fill: #777;
|
|
}
|
|
|
|
/*-- Radar --*/
|
|
.bb-chart-radars .bb-levels polygon {
|
|
fill: none;
|
|
stroke: #848282;
|
|
stroke-width: 0.5px;
|
|
}
|
|
|
|
.bb-chart-radars .bb-levels text {
|
|
fill: #848282;
|
|
}
|
|
|
|
.bb-chart-radars .bb-axis line {
|
|
stroke: #848282;
|
|
stroke-width: 0.5px;
|
|
}
|
|
|
|
.bb-chart-radars .bb-axis text {
|
|
font-size: 1.15em;
|
|
cursor: default;
|
|
}
|
|
|
|
.bb-chart-radars .bb-shapes polygon {
|
|
fill-opacity: 0.2;
|
|
stroke-width: 1px;
|
|
}
|
|
|
|
/*-- Button --*/
|
|
.bb-button {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 2rem;
|
|
|
|
border: 1px solid var(--color-button-background);
|
|
background-color: var(--color-button-background);
|
|
color: var(--color-button-foreground);
|
|
|
|
font-size: var(--font-size);
|
|
font-family: var(--font-family);
|
|
|
|
.bb-zoom-reset {
|
|
display: inline-block;
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|