| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- // Cable Trace Styles.
- :root {
- // Light Mode Variables.
- --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-netbox-color-mode='dark'] {
- // Dark Mode Variables.
- // Note: only the `theme-light.scss` file is in-scope for simplicity.
- --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;
- }
- }
|