netbox-community-netbox/netbox/project-static/styles/svg/rack_elevation.scss

@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';
@import '../../node_modules/bootstrap/scss/variables-dark';

/*
 * Rack elevation SVG styling
 */

svg {
  // Light mode values
  --nbx-rack-bg: var(--tblr-bg-surface-secondary);
  --nbx-rack-border: #{$black};
  --nbx-rack-slot-bg: #{$gray-200};
  --nbx-rack-slot-border: #{$gray-500};
  --nbx-rack-slot-hover-bg: #{$gray-400};
  --nbx-rack-link-color: #{$blue};
  --nbx-rack-unit-color: #{$gray-600};

  &[data-bs-theme='dark'] {
    // Dark mode values
    --nbx-rack-bg: rgb(27, 41, 58);
    --nbx-rack-border: #{$gray-600};
    --nbx-rack-slot-bg: #{$gray-800};
    --nbx-rack-slot-border: #{$gray-700};
    --nbx-rack-slot-hover-bg: #{$gray-900};
    --nbx-rack-link-color: #{$blue-200};
    --nbx-rack-unit-color: #{$gray-500};
  }
}

* {
  font-family: $font-family-sans-serif;
  font-size: $font-size-sm;
}
rect {
  box-sizing: border-box;
}
text {
  text-anchor: middle;
  dominant-baseline: middle;
}

svg {
  background-color: var(--nbx-rack-bg);

  // Rack unit numbers along left side of rack elevation.
  .unit {
    margin: 0;
    padding: 5px 0;
    // Rack unit text color.
    fill: var(--nbx-rack-unit-color);
  }

  .hidden {
    visibility: hidden;
  }

  rect.shaded, image.shaded {
    opacity: 25%;
  }
  text.shaded {
    opacity: 50%;
  }

  // Rack elevation container.
  .rack {
    fill: none;
    stroke-width: 2px;
    stroke: var(--nbx-rack-border);
  }

  // Rack unit slot.
  .slot {
    fill: var(--nbx-rack-slot-bg);
    stroke: var(--nbx-rack-slot-border);

    // Change the background color to indicate hover status.
    &:hover {
      fill: var(--nbx-rack-slot-hover-bg);
    }

    // 'Add Device' text.
    & + .add-device {
      fill: var(--nbx-rack-link-color);
      // Hide the text by default.
      opacity: 0;
      // The text should not have pointer-events so that the hover state of the slot is not
      // overridden by the hover state of the text.
      pointer-events: none;
    }

    &:hover + .add-device {
      // When the slot is hovered, show the 'Add Device' text.
      opacity: 1;
    }

    // Occupied rack unit background color.
    &.occupied[class],
    &.occupied:hover[class] {
      fill: url(#occupied);
    }

    // Blocked rack unit background color.
    &.blocked[class],
    &.blocked:hover[class] {
      fill: url(#blocked);
    }
    // Hide 'Add Device' text when a slot is blocked.
    &.blocked:hover + .add-device {
      opacity: 0;
    }
  }

  // Reservation background color.
  .reservation[class] {
    fill: url(#reserved);
  }
}