Closes #12128: Refresh the web UI to employ the Tabler CSS framework (#14833)

* Remove dark mode styling

* Condense & rename light mode stylesheet

* Upgrade to Bootstrap 5.3.2

* Swap out Bootstrap for Tabler; remove custom styling

* Update base page layout for Tabler

* Update login page

* Bump node to v18

* Update button styles

* Update object list view

* Tweak navbar size

* Clean up dashboard widgets

* Ditch separate stylesheet for print media

* Remove simplebar

* Remove obsolete sidebar styling

* Clean up object view template

* Clean up object edit template

* Standardize primary button sizing

* Clean up object list styling

* Add buttons for add & import to navigation menu

* Fix global search bar

* Fix slim-select form widget styling

* Fix toast styling

* Set base fonts

* Clean up paginator styling

* Clean up navigation menu group headings

* Clean up footer links

* Clean up card styles

* Move SVG styles to a designated directory

* Restructure SCSS files

* Remove obsolete/redundant dependencies

* Fix icon spacing

* Update background color classes

* Tweak banner & footer styling and spacing

* Fix badge background colors in table content

* Bump @types/bootstrap to 5.2.10

* Clean up form layouts

* Fix object selector button style

* Fix icon padding inside small buttons

* Fix icon & badge spacing inside buttons and tabs

* Hide paginator for empty pages

* Fix hover color for list items (Tabler bug #1694)

* Fix width of checkbox column in empty tables

* Clean up bulk edit template

* Fix border color of reslug button

* Package & serve Google fonts locally

* Fix tab styling

* Reduce vetical space at top of dashboard

* Remove obsolete content-wrapper template block

* Fix icon spacing in dropdown menu items

* Fix color label sizing

* Separate bulk delete form & object list into tabs

* Fix styling of filter group headings

* Fix styling for object changelog & journal views

* Standardize ordering & styling of action buttons

* Fix designation of active menu item

* Automatically expand menu section containing the active link

* Clean up nav menu styling

* Remove button colors; hide buttons except on hover/active

* Highlight menu group containing the active item

* Update & standardize alert styling

* Refactor base templates to ensure consistent display of header content

* Tweak styling for links inside badges

* Clean up top menu

* Fix JSON/YAML toggles for config context data

* Fix object template header

* Constrain tabs to container-xl; tweak header margins

* Fix object identifier styling

* Fix positioning of card header buttons

* Remove padding from HTMX tables inside cards

* Ensure consistent use of row headings in attribute tables

* Remove padding surrounding tables inside cards

* Remove obsolete CSS classes

* Misc cleanup of old styling

* Refactor 'controls' template block; ditch old classes

* Fix login button sizing

* Limit object edit form width

* Append asterisk to required form field labels

* Remove obsolete styling

* Remove obsolete styling

* Fix position of progress bar outside label

* Fix alignment of delete button in report/script lists

* Fix <pre> styling

* Clean up page headers

* Replace SVG icons with Material Design icons

* Restore dark mode togle functionality

* Fix top navbar background color under dark mode

* Rebuild static assets

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

@@ -0,0 +1,115 @@
+@import '../old/theme-light';
+
+// Rack Elevation Styles.
+
+svg {
+  // Light Mode Variables.
+  --nbx-rack-bg: #{$gray-200};
+  --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: #{$text-muted};
+
+  &[data-netbox-color-mode='dark'] {
+    // Dark Mode Variables.
+    // Note: only the `theme-light.scss` file is in-scope for simplicity.
+    --nbx-rack-bg: #{$gray-800};
+    --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: #{$text-muted};
+  }
+}
+
+* {
+  font-family: $font-family-sans-serif;
+  font-size: $font-size-sm;
+}
+rect {
+  box-sizing: border-box;
+}
+text {
+  text-anchor: middle;
+  dominant-baseline: middle;
+}
+
+svg {
+  // Rack unit numbers along left side of rack elevation.
+  .unit {
+    margin: 0;
+    padding: 5px 0px;
+    // 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);
+    background-color: var(--nbx-rack-bg);
+  }
+
+  // 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);
+  }
+}
+