cable-trace.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. // Cable Trace Styles.
  2. :root {
  3. // Light Mode Variables.
  4. --nbx-trace-color: #{$black};
  5. --nbx-trace-node-bg: #{$gray-200};
  6. --nbx-trace-termination-bg: #{$gray-100};
  7. --nbx-trace-cable-shadow: #{$gray-800};
  8. --nbx-trace-attachment: #{$gray-400};
  9. &[data-netbox-color-mode='dark'] {
  10. // Dark Mode Variables.
  11. // Note: only the `theme-light.scss` file is in-scope for simplicity.
  12. --nbx-trace-color: #{$white};
  13. --nbx-trace-node-bg: #{$gray-900};
  14. --nbx-trace-termination-bg: #{$gray-800};
  15. --nbx-trace-cable-shadow: #{$gray-200};
  16. --nbx-trace-attachment: #{$gray-600};
  17. }
  18. }
  19. * {
  20. font-family: $font-family-sans-serif;
  21. font-size: $font-size-sm;
  22. }
  23. text {
  24. text-anchor: middle;
  25. dominant-baseline: middle;
  26. &:not([fill]) {
  27. // Fill text with body color when a fill attribute is not set via element attributes.
  28. fill: var(--nbx-trace-color);
  29. }
  30. &.bold {
  31. font-weight: $font-weight-bold;
  32. }
  33. }
  34. svg {
  35. /* Boxes */
  36. rect {
  37. fill: var(--nbx-trace-node-bg);
  38. stroke: #606060;
  39. stroke-width: 1;
  40. .termination {
  41. fill: var(--nbx-trace-termination-bg);
  42. }
  43. }
  44. /* Connectors */
  45. .connector text {
  46. text-anchor: start;
  47. }
  48. line {
  49. stroke-width: 5px;
  50. }
  51. polyline {
  52. fill: none;
  53. stroke-width: 5px;
  54. }
  55. .cable-shadow {
  56. stroke: var(--nbx-trace-cable-shadow);
  57. stroke-width: 7px;
  58. }
  59. line.wireless-link {
  60. stroke: var(--nbx-trace-attachment);
  61. stroke-dasharray: 4px 12px;
  62. stroke-linecap: round;
  63. }
  64. line.attachment {
  65. stroke: var(--nbx-trace-attachment);
  66. stroke-dasharray: 5px;
  67. }
  68. }