83 lines
1.6 KiB
SCSS
83 lines
1.6 KiB
SCSS
@import '../../node_modules/bootstrap/scss/functions';
|
|
@import '../../node_modules/bootstrap/scss/variables';
|
|
@import '../../node_modules/bootstrap/scss/variables-dark';
|
|
|
|
/*
|
|
* Cable trace SVG styling
|
|
*/
|
|
|
|
:root {
|
|
// Light mode values
|
|
--nbx-trace-color: #{$black};
|
|
--nbx-trace-node-bg: #{$gray-200};
|
|
--nbx-trace-termination-bg: #{$gray-100};
|
|
--nbx-trace-cable-shadow: #{$gray-800};
|
|
--nbx-trace-attachment: #{$gray-400};
|
|
|
|
&[data-bs-theme='dark'] {
|
|
// Dark mode values
|
|
--nbx-trace-color: #{$white};
|
|
--nbx-trace-node-bg: #{$gray-900};
|
|
--nbx-trace-termination-bg: #{$gray-800};
|
|
--nbx-trace-cable-shadow: #{$gray-200};
|
|
--nbx-trace-attachment: #{$gray-600};
|
|
}
|
|
}
|
|
|
|
* {
|
|
font-family: $font-family-sans-serif;
|
|
font-size: $font-size-sm;
|
|
}
|
|
|
|
text {
|
|
text-anchor: middle;
|
|
dominant-baseline: middle;
|
|
|
|
&:not([fill]) {
|
|
// Fill text with body color when a fill attribute is not set via element attributes.
|
|
fill: var(--nbx-trace-color);
|
|
}
|
|
|
|
&.bold {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
/* Boxes */
|
|
rect {
|
|
fill: var(--nbx-trace-node-bg);
|
|
stroke: #606060;
|
|
stroke-width: 1;
|
|
.termination {
|
|
fill: var(--nbx-trace-termination-bg);
|
|
}
|
|
}
|
|
|
|
/* Connectors */
|
|
.connector text {
|
|
text-anchor: start;
|
|
}
|
|
line {
|
|
stroke-width: 5px;
|
|
}
|
|
polyline {
|
|
fill: none;
|
|
stroke-width: 5px;
|
|
}
|
|
.cable-shadow {
|
|
stroke: var(--nbx-trace-cable-shadow);
|
|
stroke-width: 7px;
|
|
}
|
|
line.wireless-link {
|
|
stroke: var(--nbx-trace-attachment);
|
|
stroke-dasharray: 4px 12px;
|
|
stroke-linecap: round;
|
|
}
|
|
line.attachment {
|
|
stroke: var(--nbx-trace-attachment);
|
|
stroke-dasharray: 5px;
|
|
}
|
|
}
|
|
|