From 2174e1ccae356f116fe2fafc0e202e8d5ba431bb Mon Sep 17 00:00:00 2001
From: Kayla Glick <12898988+kayla-glick@users.noreply.github.com>
Date: Fri, 25 Nov 2022 06:04:22 +0000
Subject: [PATCH] reorganizing and streamlining stylesheets

---
 makefile                                      |  4 +--
 package-lock.json                             |  8 +++++
 package.json                                  |  3 +-
 ui/balance_druid/index.scss                   |  2 --
 ui/deathknight/index.scss                     |  2 --
 ui/elemental_shaman/index.scss                |  2 --
 ui/enhancement_shaman/index.scss              |  2 --
 ui/feral_druid/index.scss                     |  2 --
 ui/feral_tank_druid/index.scss                |  2 --
 ui/healing_priest/index.scss                  |  2 --
 ui/hunter/index.scss                          |  2 --
 ui/index.html                                 |  2 +-
 ui/index.scss                                 |  2 --
 ui/index.ts                                   |  3 ++
 ui/index_template.html                        | 14 ++++----
 ui/mage/index.scss                            |  2 --
 ui/protection_paladin/index.scss              |  2 --
 ui/protection_warrior/index.scss              |  2 --
 ui/retribution_paladin/index.scss             |  2 --
 ui/rogue/index.scss                           |  2 --
 .../core/components/bonus_stats_picker.scss}  |  0
 .../core/components/boolean_picker.scss}      |  0
 .../core/components/character_stats.scss}     |  0
 .../core/components/close_button.scss}        |  0
 .../core/components/cooldowns_picker.scss}    |  0
 .../components/custom_rotation_picker.scss}   |  0
 .../core/components/detailed_results.scss}    |  0
 .../core/components/encounter_picker.scss}    |  0
 .../core/components/enum_picker.scss}         |  0
 .../core/components/exporters.scss}           |  0
 .../core/components/filters_menu.scss}        |  0
 .../core/components/gear_picker.scss}         |  0
 .../core/components/icon_enum_picker.scss}    |  0
 .../core/components/icon_picker.scss}         |  0
 .../core/components/importers.scss}           |  0
 .../core/components/input.scss}               |  0
 .../core/components/list_picker.scss}         |  0
 .../core/components/log_runner.scss}          |  0
 .../core/components/multi_icon_picker.scss}   |  0
 .../core/components/number_list_picker.scss}  |  0
 .../core/components/number_picker.scss}       |  0
 .../core/components/popup.scss}               |  0
 .../core/components/raid_sim_action.scss}     |  0
 .../core/components/raid_target_picker.scss}  |  0
 .../core/components/saved_data_manager.scss}  |  0
 .../core/components/settings_menu.scss}       |  0
 .../core/components/stat_weights_action.scss} |  0
 .../core/components/string_picker.scss}       |  0
 .../core/components/title.scss}               |  0
 .../core/components/totem_inputs.scss}        |  0
 ui/scss/core/individual_sim_ui/index.scss     | 32 +++++++++++++++++++
 .../core/individual_sim_ui/shared.scss}       | 28 ----------------
 ui/scss/core/sim_ui/index.scss                | 10 ++++++
 .../core/sim_ui/shared.scss}                  |  8 ++---
 .../core/talents/glyphs_picker.scss}          |  0
 .../core/talents/hunter_pet.scss}             |  1 -
 .../core/talents/talents_picker.scss}         |  0
 ui/scss/global.scss                           |  4 +++
 .../_shared.scss => scss/global_old.scss}     |  0
 ui/scss/{ => homepage}/homepage.scss          |  0
 ui/scss/homepage/index.scss                   |  2 ++
 ui/scss/index.scss                            | 13 +++++---
 ui/scss/sims/balance_druid/index.scss         |  2 ++
 .../sims/balance_druid/sim.scss}              |  0
 ui/scss/sims/deathknight/index.scss           |  2 ++
 .../sims/deathknight/sim.scss}                |  0
 .../sims/detailed_results/dps_histogram.scss} |  0
 .../sims}/detailed_results/index.scss         | 20 ++++++------
 .../sims/detailed_results/player_damage.scss} |  0
 .../detailed_results/resource_metrics.scss}   |  0
 .../detailed_results/results_filter.scss}     |  0
 .../sims/detailed_results/source_chart.scss}  |  0
 .../sims/detailed_results/timeline.scss}      |  0
 .../detailed_results/topline_results.scss}    |  2 +-
 ui/scss/sims/elemental_shaman/index.scss      |  3 ++
 .../sims/elemental_shaman/sim.scss}           |  2 --
 ui/scss/sims/enhancement_shaman/index.scss    |  3 ++
 .../sims/enhancement_shaman/sim.scss}         |  2 --
 ui/scss/sims/feral_druid/index.scss           |  2 ++
 .../sims/feral_druid/sim.scss}                |  0
 ui/scss/sims/feral_tank_druid/index.scss      |  2 ++
 .../sims/feral_tank_druid/sim.scss}           |  0
 ui/scss/sims/healing_priest/index.scss        |  2 ++
 .../sims/healing_priest/sim.scss}             |  0
 ui/scss/sims/hunter/index.scss                |  3 ++
 .../_sim.scss => scss/sims/hunter/sim.scss}   |  2 --
 ui/scss/sims/mage/index.scss                  |  2 ++
 .../_sim.scss => scss/sims/mage/sim.scss}     |  0
 ui/scss/sims/protection_paladin/index.scss    |  2 ++
 .../sims/protection_paladin/sim.scss}         |  0
 ui/scss/sims/protection_warrior/index.scss    |  2 ++
 .../sims/protection_warrior/sim.scss}         |  0
 .../sims/raid/assignments_picker.scss}        |  0
 .../sims/raid/blessings_picker.scss}          |  1 -
 ui/{ => scss/sims}/raid/index.scss            | 24 ++++++--------
 .../sims/raid/raid_picker.scss}               |  0
 .../sims/raid/raid_sim_ui.scss}               |  0
 ui/scss/sims/raid/sim.scss                    |  8 +++++
 .../sims/raid/tanks_picker.scss}              |  0
 ui/scss/sims/retribution_paladin/index.scss   |  2 ++
 .../sims/retribution_paladin/sim.scss}        |  0
 ui/scss/sims/rogue/index.scss                 |  3 ++
 .../_sim.scss => scss/sims/rogue/sim.scss}    |  2 --
 ui/scss/sims/shadow_priest/index.scss         |  2 ++
 .../sims/shadow_priest/sim.scss}              |  0
 ui/scss/sims/smite_priest/index.scss          |  2 ++
 .../sims/smite_priest/sim.scss}               |  0
 ui/scss/sims/tank_deathknight/index.scss      |  2 ++
 .../sims/tank_deathknight/sim.scss}           |  0
 ui/scss/sims/warlock/index.scss               |  2 ++
 .../_sim.scss => scss/sims/warlock/sim.scss}  |  0
 ui/scss/sims/warrior/index.scss               |  2 ++
 .../_sim.scss => scss/sims/warrior/sim.scss}  |  0
 ui/shadow_priest/index.scss                   |  2 --
 ui/smite_priest/index.scss                    |  2 --
 ui/tank_deathknight/index.scss                |  2 --
 ui/warlock/index.scss                         |  2 --
 ui/warrior/index.scss                         |  2 --
 118 files changed, 150 insertions(+), 123 deletions(-)
 delete mode 100644 ui/balance_druid/index.scss
 delete mode 100644 ui/deathknight/index.scss
 delete mode 100644 ui/elemental_shaman/index.scss
 delete mode 100644 ui/enhancement_shaman/index.scss
 delete mode 100644 ui/feral_druid/index.scss
 delete mode 100644 ui/feral_tank_druid/index.scss
 delete mode 100644 ui/healing_priest/index.scss
 delete mode 100644 ui/hunter/index.scss
 delete mode 100644 ui/index.scss
 delete mode 100644 ui/mage/index.scss
 delete mode 100644 ui/protection_paladin/index.scss
 delete mode 100644 ui/protection_warrior/index.scss
 delete mode 100644 ui/retribution_paladin/index.scss
 delete mode 100644 ui/rogue/index.scss
 rename ui/{core/components/_bonus_stats_picker.scss => scss/core/components/bonus_stats_picker.scss} (100%)
 rename ui/{core/components/_boolean_picker.scss => scss/core/components/boolean_picker.scss} (100%)
 rename ui/{core/components/_character_stats.scss => scss/core/components/character_stats.scss} (100%)
 rename ui/{core/components/_close_button.scss => scss/core/components/close_button.scss} (100%)
 rename ui/{core/components/_cooldowns_picker.scss => scss/core/components/cooldowns_picker.scss} (100%)
 rename ui/{core/components/_custom_rotation_picker.scss => scss/core/components/custom_rotation_picker.scss} (100%)
 rename ui/{core/components/_detailed_results.scss => scss/core/components/detailed_results.scss} (100%)
 rename ui/{core/components/_encounter_picker.scss => scss/core/components/encounter_picker.scss} (100%)
 rename ui/{core/components/_enum_picker.scss => scss/core/components/enum_picker.scss} (100%)
 rename ui/{core/components/_exporters.scss => scss/core/components/exporters.scss} (100%)
 rename ui/{core/components/_filters_menu.scss => scss/core/components/filters_menu.scss} (100%)
 rename ui/{core/components/_gear_picker.scss => scss/core/components/gear_picker.scss} (100%)
 rename ui/{core/components/_icon_enum_picker.scss => scss/core/components/icon_enum_picker.scss} (100%)
 rename ui/{core/components/_icon_picker.scss => scss/core/components/icon_picker.scss} (100%)
 rename ui/{core/components/_importers.scss => scss/core/components/importers.scss} (100%)
 rename ui/{core/components/_input.scss => scss/core/components/input.scss} (100%)
 rename ui/{core/components/_list_picker.scss => scss/core/components/list_picker.scss} (100%)
 rename ui/{core/components/_log_runner.scss => scss/core/components/log_runner.scss} (100%)
 rename ui/{core/components/_multi_icon_picker.scss => scss/core/components/multi_icon_picker.scss} (100%)
 rename ui/{core/components/_number_list_picker.scss => scss/core/components/number_list_picker.scss} (100%)
 rename ui/{core/components/_number_picker.scss => scss/core/components/number_picker.scss} (100%)
 rename ui/{core/components/_popup.scss => scss/core/components/popup.scss} (100%)
 rename ui/{core/components/_raid_sim_action.scss => scss/core/components/raid_sim_action.scss} (100%)
 rename ui/{core/components/_raid_target_picker.scss => scss/core/components/raid_target_picker.scss} (100%)
 rename ui/{core/components/_saved_data_manager.scss => scss/core/components/saved_data_manager.scss} (100%)
 rename ui/{core/components/_settings_menu.scss => scss/core/components/settings_menu.scss} (100%)
 rename ui/{core/components/_stat_weights_action.scss => scss/core/components/stat_weights_action.scss} (100%)
 rename ui/{core/components/_string_picker.scss => scss/core/components/string_picker.scss} (100%)
 rename ui/{core/components/_title.scss => scss/core/components/title.scss} (100%)
 rename ui/{core/components/_totem_inputs.scss => scss/core/components/totem_inputs.scss} (100%)
 create mode 100644 ui/scss/core/individual_sim_ui/index.scss
 rename ui/{core/_individual_sim_ui.scss => scss/core/individual_sim_ui/shared.scss} (80%)
 create mode 100644 ui/scss/core/sim_ui/index.scss
 rename ui/{core/_sim_ui.scss => scss/core/sim_ui/shared.scss} (97%)
 rename ui/{core/talents/_glyphs_picker.scss => scss/core/talents/glyphs_picker.scss} (100%)
 rename ui/{core/talents/_hunter_pet.scss => scss/core/talents/hunter_pet.scss} (99%)
 rename ui/{core/talents/_talents_picker.scss => scss/core/talents/talents_picker.scss} (100%)
 rename ui/{core/_shared.scss => scss/global_old.scss} (100%)
 rename ui/scss/{ => homepage}/homepage.scss (100%)
 create mode 100644 ui/scss/homepage/index.scss
 create mode 100644 ui/scss/sims/balance_druid/index.scss
 rename ui/{balance_druid/_sim.scss => scss/sims/balance_druid/sim.scss} (100%)
 create mode 100644 ui/scss/sims/deathknight/index.scss
 rename ui/{deathknight/_sim.scss => scss/sims/deathknight/sim.scss} (100%)
 rename ui/{detailed_results/_dps_histogram.scss => scss/sims/detailed_results/dps_histogram.scss} (100%)
 rename ui/{ => scss/sims}/detailed_results/index.scss (90%)
 rename ui/{detailed_results/_player_damage.scss => scss/sims/detailed_results/player_damage.scss} (100%)
 rename ui/{detailed_results/_resource_metrics.scss => scss/sims/detailed_results/resource_metrics.scss} (100%)
 rename ui/{detailed_results/_results_filter.scss => scss/sims/detailed_results/results_filter.scss} (100%)
 rename ui/{detailed_results/_source_chart.scss => scss/sims/detailed_results/source_chart.scss} (100%)
 rename ui/{detailed_results/_timeline.scss => scss/sims/detailed_results/timeline.scss} (100%)
 rename ui/{detailed_results/_topline_results.scss => scss/sims/detailed_results/topline_results.scss} (60%)
 create mode 100644 ui/scss/sims/elemental_shaman/index.scss
 rename ui/{elemental_shaman/_sim.scss => scss/sims/elemental_shaman/sim.scss} (92%)
 create mode 100644 ui/scss/sims/enhancement_shaman/index.scss
 rename ui/{enhancement_shaman/_sim.scss => scss/sims/enhancement_shaman/sim.scss} (93%)
 create mode 100644 ui/scss/sims/feral_druid/index.scss
 rename ui/{feral_druid/_sim.scss => scss/sims/feral_druid/sim.scss} (100%)
 create mode 100644 ui/scss/sims/feral_tank_druid/index.scss
 rename ui/{feral_tank_druid/_sim.scss => scss/sims/feral_tank_druid/sim.scss} (100%)
 create mode 100644 ui/scss/sims/healing_priest/index.scss
 rename ui/{healing_priest/_sim.scss => scss/sims/healing_priest/sim.scss} (100%)
 create mode 100644 ui/scss/sims/hunter/index.scss
 rename ui/{hunter/_sim.scss => scss/sims/hunter/sim.scss} (94%)
 create mode 100644 ui/scss/sims/mage/index.scss
 rename ui/{mage/_sim.scss => scss/sims/mage/sim.scss} (100%)
 create mode 100644 ui/scss/sims/protection_paladin/index.scss
 rename ui/{protection_paladin/_sim.scss => scss/sims/protection_paladin/sim.scss} (100%)
 create mode 100644 ui/scss/sims/protection_warrior/index.scss
 rename ui/{protection_warrior/_sim.scss => scss/sims/protection_warrior/sim.scss} (100%)
 rename ui/{raid/_assignments_picker.scss => scss/sims/raid/assignments_picker.scss} (100%)
 rename ui/{raid/_blessings_picker.scss => scss/sims/raid/blessings_picker.scss} (99%)
 rename ui/{ => scss/sims}/raid/index.scss (63%)
 rename ui/{raid/_raid_picker.scss => scss/sims/raid/raid_picker.scss} (100%)
 rename ui/{raid/_raid_sim_ui.scss => scss/sims/raid/raid_sim_ui.scss} (100%)
 create mode 100644 ui/scss/sims/raid/sim.scss
 rename ui/{raid/_tanks_picker.scss => scss/sims/raid/tanks_picker.scss} (100%)
 create mode 100644 ui/scss/sims/retribution_paladin/index.scss
 rename ui/{retribution_paladin/_sim.scss => scss/sims/retribution_paladin/sim.scss} (100%)
 create mode 100644 ui/scss/sims/rogue/index.scss
 rename ui/{rogue/_sim.scss => scss/sims/rogue/sim.scss} (93%)
 create mode 100644 ui/scss/sims/shadow_priest/index.scss
 rename ui/{shadow_priest/_sim.scss => scss/sims/shadow_priest/sim.scss} (100%)
 create mode 100644 ui/scss/sims/smite_priest/index.scss
 rename ui/{smite_priest/_sim.scss => scss/sims/smite_priest/sim.scss} (100%)
 create mode 100644 ui/scss/sims/tank_deathknight/index.scss
 rename ui/{tank_deathknight/_sim.scss => scss/sims/tank_deathknight/sim.scss} (100%)
 create mode 100644 ui/scss/sims/warlock/index.scss
 rename ui/{warlock/_sim.scss => scss/sims/warlock/sim.scss} (100%)
 create mode 100644 ui/scss/sims/warrior/index.scss
 rename ui/{warrior/_sim.scss => scss/sims/warrior/sim.scss} (100%)
 delete mode 100644 ui/shadow_priest/index.scss
 delete mode 100644 ui/smite_priest/index.scss
 delete mode 100644 ui/tank_deathknight/index.scss
 delete mode 100644 ui/warlock/index.scss
 delete mode 100644 ui/warrior/index.scss

diff --git a/makefile b/makefile
index 5ad737285a..927640452b 100644
--- a/makefile
+++ b/makefile
@@ -85,7 +85,7 @@ ui/core/proto/api.ts: proto/*.proto node_modules
 
 ui/%/index.html: ui/index_template.html
 	$(eval title := $(shell echo $(shell basename $(@D)) | sed -r 's/(^|_)([a-z])/\U \2/g' | cut -c 2-))
-	cat ui/index_template.html | sed 's/@@TITLE@@/WOTLK $(title) Simulator/g' > $@
+	cat ui/index_template.html | sed -e 's/@@TITLE@@/WOTLK $(title) Simulator/g' -e 's/@@SPEC@@/$(shell basename $(@D))/g' > $@
 
 package-lock.json:
 	npm install
@@ -103,7 +103,7 @@ $(OUT_DIR)/%/index.html: ui/index_template.html $(OUT_DIR)/assets
 	$(eval title := $(shell echo $(shell basename $(@D)) | sed -r 's/(^|_)([a-z])/\U \2/g' | cut -c 2-))
 	echo $(title)
 	mkdir -p $(@D)
-	cat ui/index_template.html | sed 's/@@TITLE@@/WOTLK $(title) Simulator/g' > $@
+	cat ui/index_template.html | sed -e 's/@@TITLE@@/WOTLK $(title) Simulator/g' -e 's/@@SPEC@@/$(shell basename $(@D))/g' > $@
 
 .PHONY: wasm
 wasm: $(OUT_DIR)/lib.wasm
diff --git a/package-lock.json b/package-lock.json
index cc5aa15e5f..077b8217f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2013,6 +2013,14 @@
             "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
             "dev": true
         },
+        "tippy.js": {
+            "version": "6.3.7",
+            "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+            "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+            "requires": {
+                "@popperjs/core": "^2.9.0"
+            }
+        },
         "to-regex-range": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/package.json b/package.json
index ae054465f7..5feaacb821 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     },
     "dependencies": {
         "@popperjs/core": "^2.11.6",
-        "bootstrap": "5.2.3"
+        "bootstrap": "5.2.3",
+        "tippy.js": "^6.3.7"
     }
 }
diff --git a/ui/balance_druid/index.scss b/ui/balance_druid/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/balance_druid/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/deathknight/index.scss b/ui/deathknight/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/deathknight/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/elemental_shaman/index.scss b/ui/elemental_shaman/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/elemental_shaman/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/enhancement_shaman/index.scss b/ui/enhancement_shaman/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/enhancement_shaman/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/feral_druid/index.scss b/ui/feral_druid/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/feral_druid/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/feral_tank_druid/index.scss b/ui/feral_tank_druid/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/feral_tank_druid/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/healing_priest/index.scss b/ui/healing_priest/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/healing_priest/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/hunter/index.scss b/ui/hunter/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/hunter/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/index.html b/ui/index.html
index 9ee21ed70c..ff1e0fe907 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -5,7 +5,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
 		<link rel="icon" href="/wotlk/assets/favicon_io/favicon.ico" type="image/x-icon">
-		<link rel="stylesheet" href="./index.scss">
+		<link rel="stylesheet" href="./homepage/index.scss">
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 	</head>
 	<body>
diff --git a/ui/index.scss b/ui/index.scss
deleted file mode 100644
index 474cc4fac2..0000000000
--- a/ui/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "scss/index";
-@import "scss/homepage";
diff --git a/ui/index.ts b/ui/index.ts
index 6aeeddb0df..24f55625ad 100644
--- a/ui/index.ts
+++ b/ui/index.ts
@@ -1,15 +1,18 @@
 import * as Popper from '@popperjs/core';
 import * as bootstrap from 'bootstrap';
+import tippy from 'tippy.js';
 
 declare global {
   interface Window {
     Popper: any;
     bootstrap: any;
+    tippy: any;
   }
 }
 
 window.Popper = Popper;
 window.bootstrap = bootstrap;
+window.tippy = tippy;
 
 import './shared/bootstrap_overrides';
 
diff --git a/ui/index_template.html b/ui/index_template.html
index b1f1aa1fdd..fa985ff24e 100644
--- a/ui/index_template.html
+++ b/ui/index_template.html
@@ -1,13 +1,13 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>@@TITLE@@</title>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link rel="preload" href="/wotlk/assets/database/db.bin" as="fetch" crossOrigin="anonymous">
     <link rel="icon" type="image/x-icon" href="/wotlk/assets/favicon_io/favicon.ico">
-    <link rel="stylesheet" href="./index.scss">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+    <link rel="stylesheet" href="../scss/sims/@@SPEC@@/index.scss">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@@ -15,12 +15,10 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bPopup/0.11.0/jquery.bpopup.min.js" integrity="sha512-kmrY+BFhi6ywgfK8hW1ySM/KYU3xPd4elbMhORq3DhacwqmitFrf3GB2HpLj3srV1zFsqxvAcZ4qU+y+ym1Eeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdn.jsdelivr.net/npm/muuri@0.9.5/dist/muuri.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script src="https://unpkg.com/@popperjs/core@2"></script>
-    <script src="https://unpkg.com/tippy.js@6"></script>
+    <script src="../index.ts" type="module"></script>
+    <script src="./index.ts" type="module"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
-    <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.4/pako.min.js"></script>
-    <script type="module" src="./index.ts"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.4/pako.min.js" type="module"></script>
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-T3HBB0LXNX"></script>
     <script>
diff --git a/ui/mage/index.scss b/ui/mage/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/mage/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/protection_paladin/index.scss b/ui/protection_paladin/index.scss
deleted file mode 100644
index 6cbe468fa0..0000000000
--- a/ui/protection_paladin/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
\ No newline at end of file
diff --git a/ui/protection_warrior/index.scss b/ui/protection_warrior/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/protection_warrior/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/retribution_paladin/index.scss b/ui/retribution_paladin/index.scss
deleted file mode 100644
index 6cbe468fa0..0000000000
--- a/ui/retribution_paladin/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
\ No newline at end of file
diff --git a/ui/rogue/index.scss b/ui/rogue/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/rogue/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/core/components/_bonus_stats_picker.scss b/ui/scss/core/components/bonus_stats_picker.scss
similarity index 100%
rename from ui/core/components/_bonus_stats_picker.scss
rename to ui/scss/core/components/bonus_stats_picker.scss
diff --git a/ui/core/components/_boolean_picker.scss b/ui/scss/core/components/boolean_picker.scss
similarity index 100%
rename from ui/core/components/_boolean_picker.scss
rename to ui/scss/core/components/boolean_picker.scss
diff --git a/ui/core/components/_character_stats.scss b/ui/scss/core/components/character_stats.scss
similarity index 100%
rename from ui/core/components/_character_stats.scss
rename to ui/scss/core/components/character_stats.scss
diff --git a/ui/core/components/_close_button.scss b/ui/scss/core/components/close_button.scss
similarity index 100%
rename from ui/core/components/_close_button.scss
rename to ui/scss/core/components/close_button.scss
diff --git a/ui/core/components/_cooldowns_picker.scss b/ui/scss/core/components/cooldowns_picker.scss
similarity index 100%
rename from ui/core/components/_cooldowns_picker.scss
rename to ui/scss/core/components/cooldowns_picker.scss
diff --git a/ui/core/components/_custom_rotation_picker.scss b/ui/scss/core/components/custom_rotation_picker.scss
similarity index 100%
rename from ui/core/components/_custom_rotation_picker.scss
rename to ui/scss/core/components/custom_rotation_picker.scss
diff --git a/ui/core/components/_detailed_results.scss b/ui/scss/core/components/detailed_results.scss
similarity index 100%
rename from ui/core/components/_detailed_results.scss
rename to ui/scss/core/components/detailed_results.scss
diff --git a/ui/core/components/_encounter_picker.scss b/ui/scss/core/components/encounter_picker.scss
similarity index 100%
rename from ui/core/components/_encounter_picker.scss
rename to ui/scss/core/components/encounter_picker.scss
diff --git a/ui/core/components/_enum_picker.scss b/ui/scss/core/components/enum_picker.scss
similarity index 100%
rename from ui/core/components/_enum_picker.scss
rename to ui/scss/core/components/enum_picker.scss
diff --git a/ui/core/components/_exporters.scss b/ui/scss/core/components/exporters.scss
similarity index 100%
rename from ui/core/components/_exporters.scss
rename to ui/scss/core/components/exporters.scss
diff --git a/ui/core/components/_filters_menu.scss b/ui/scss/core/components/filters_menu.scss
similarity index 100%
rename from ui/core/components/_filters_menu.scss
rename to ui/scss/core/components/filters_menu.scss
diff --git a/ui/core/components/_gear_picker.scss b/ui/scss/core/components/gear_picker.scss
similarity index 100%
rename from ui/core/components/_gear_picker.scss
rename to ui/scss/core/components/gear_picker.scss
diff --git a/ui/core/components/_icon_enum_picker.scss b/ui/scss/core/components/icon_enum_picker.scss
similarity index 100%
rename from ui/core/components/_icon_enum_picker.scss
rename to ui/scss/core/components/icon_enum_picker.scss
diff --git a/ui/core/components/_icon_picker.scss b/ui/scss/core/components/icon_picker.scss
similarity index 100%
rename from ui/core/components/_icon_picker.scss
rename to ui/scss/core/components/icon_picker.scss
diff --git a/ui/core/components/_importers.scss b/ui/scss/core/components/importers.scss
similarity index 100%
rename from ui/core/components/_importers.scss
rename to ui/scss/core/components/importers.scss
diff --git a/ui/core/components/_input.scss b/ui/scss/core/components/input.scss
similarity index 100%
rename from ui/core/components/_input.scss
rename to ui/scss/core/components/input.scss
diff --git a/ui/core/components/_list_picker.scss b/ui/scss/core/components/list_picker.scss
similarity index 100%
rename from ui/core/components/_list_picker.scss
rename to ui/scss/core/components/list_picker.scss
diff --git a/ui/core/components/_log_runner.scss b/ui/scss/core/components/log_runner.scss
similarity index 100%
rename from ui/core/components/_log_runner.scss
rename to ui/scss/core/components/log_runner.scss
diff --git a/ui/core/components/_multi_icon_picker.scss b/ui/scss/core/components/multi_icon_picker.scss
similarity index 100%
rename from ui/core/components/_multi_icon_picker.scss
rename to ui/scss/core/components/multi_icon_picker.scss
diff --git a/ui/core/components/_number_list_picker.scss b/ui/scss/core/components/number_list_picker.scss
similarity index 100%
rename from ui/core/components/_number_list_picker.scss
rename to ui/scss/core/components/number_list_picker.scss
diff --git a/ui/core/components/_number_picker.scss b/ui/scss/core/components/number_picker.scss
similarity index 100%
rename from ui/core/components/_number_picker.scss
rename to ui/scss/core/components/number_picker.scss
diff --git a/ui/core/components/_popup.scss b/ui/scss/core/components/popup.scss
similarity index 100%
rename from ui/core/components/_popup.scss
rename to ui/scss/core/components/popup.scss
diff --git a/ui/core/components/_raid_sim_action.scss b/ui/scss/core/components/raid_sim_action.scss
similarity index 100%
rename from ui/core/components/_raid_sim_action.scss
rename to ui/scss/core/components/raid_sim_action.scss
diff --git a/ui/core/components/_raid_target_picker.scss b/ui/scss/core/components/raid_target_picker.scss
similarity index 100%
rename from ui/core/components/_raid_target_picker.scss
rename to ui/scss/core/components/raid_target_picker.scss
diff --git a/ui/core/components/_saved_data_manager.scss b/ui/scss/core/components/saved_data_manager.scss
similarity index 100%
rename from ui/core/components/_saved_data_manager.scss
rename to ui/scss/core/components/saved_data_manager.scss
diff --git a/ui/core/components/_settings_menu.scss b/ui/scss/core/components/settings_menu.scss
similarity index 100%
rename from ui/core/components/_settings_menu.scss
rename to ui/scss/core/components/settings_menu.scss
diff --git a/ui/core/components/_stat_weights_action.scss b/ui/scss/core/components/stat_weights_action.scss
similarity index 100%
rename from ui/core/components/_stat_weights_action.scss
rename to ui/scss/core/components/stat_weights_action.scss
diff --git a/ui/core/components/_string_picker.scss b/ui/scss/core/components/string_picker.scss
similarity index 100%
rename from ui/core/components/_string_picker.scss
rename to ui/scss/core/components/string_picker.scss
diff --git a/ui/core/components/_title.scss b/ui/scss/core/components/title.scss
similarity index 100%
rename from ui/core/components/_title.scss
rename to ui/scss/core/components/title.scss
diff --git a/ui/core/components/_totem_inputs.scss b/ui/scss/core/components/totem_inputs.scss
similarity index 100%
rename from ui/core/components/_totem_inputs.scss
rename to ui/scss/core/components/totem_inputs.scss
diff --git a/ui/scss/core/individual_sim_ui/index.scss b/ui/scss/core/individual_sim_ui/index.scss
new file mode 100644
index 0000000000..2206c6e52d
--- /dev/null
+++ b/ui/scss/core/individual_sim_ui/index.scss
@@ -0,0 +1,32 @@
+// Import Sim UI and system-wide styles
+@import "../sim_ui/index";
+
+// Import Individual Sim UI Styles
+@import "./shared";
+
+// Import component styles
+@import "../components/bonus_stats_picker";
+@import "../components/boolean_picker";
+@import "../components/character_stats";
+@import "../components/cooldowns_picker";
+@import "../components/custom_rotation_picker";
+@import "../components/detailed_results";
+@import "../components/encounter_picker";
+@import "../components/exporters";
+@import "../components/enum_picker";
+@import "../components/gear_picker";
+@import "../components/icon_enum_picker";
+@import "../components/icon_picker";
+@import "../components/importers";
+@import "../components/log_runner";
+@import "../components/multi_icon_picker";
+@import "../components/number_list_picker";
+@import "../components/number_picker";
+@import "../components/raid_sim_action";
+@import "../components/raid_target_picker";
+@import "../components/saved_data_manager";
+@import "../components/settings_menu";
+@import "../components/stat_weights_action";
+@import "../talents/hunter_pet";
+@import "../talents/glyphs_picker";
+@import "../talents/talents_picker";
diff --git a/ui/core/_individual_sim_ui.scss b/ui/scss/core/individual_sim_ui/shared.scss
similarity index 80%
rename from ui/core/_individual_sim_ui.scss
rename to ui/scss/core/individual_sim_ui/shared.scss
index d8c5a8fc12..18bc5fa269 100644
--- a/ui/core/_individual_sim_ui.scss
+++ b/ui/scss/core/individual_sim_ui/shared.scss
@@ -1,31 +1,3 @@
-@import "./shared";
-@import "./sim_ui";
-@import "./components/bonus_stats_picker";
-@import "./components/boolean_picker";
-@import "./components/character_stats";
-@import "./components/cooldowns_picker";
-@import "./components/custom_rotation_picker";
-@import "./components/detailed_results";
-@import "./components/encounter_picker";
-@import "./components/exporters";
-@import "./components/enum_picker";
-@import "./components/gear_picker";
-@import "./components/icon_enum_picker";
-@import "./components/icon_picker";
-@import "./components/importers";
-@import "./components/log_runner";
-@import "./components/multi_icon_picker";
-@import "./components/number_list_picker";
-@import "./components/number_picker";
-@import "./components/raid_sim_action";
-@import "./components/raid_target_picker";
-@import "./components/saved_data_manager";
-@import "./components/settings_menu";
-@import "./components/stat_weights_action";
-@import "./talents/hunter_pet";
-@import "./talents/glyphs_picker";
-@import "./talents/talents_picker";
-
 .within-raid-sim .within-raid-sim-hide {
 	display: none;
 }
diff --git a/ui/scss/core/sim_ui/index.scss b/ui/scss/core/sim_ui/index.scss
new file mode 100644
index 0000000000..a8e838b7c6
--- /dev/null
+++ b/ui/scss/core/sim_ui/index.scss
@@ -0,0 +1,10 @@
+// Import system-wide styles
+@import "../../index";
+
+// Import Sim UI Styles
+@import "./shared";
+
+// Import Components
+@import "../components/close_button";
+@import "../components/number_picker";
+@import "../components/title";
diff --git a/ui/core/_sim_ui.scss b/ui/scss/core/sim_ui/shared.scss
similarity index 97%
rename from ui/core/_sim_ui.scss
rename to ui/scss/core/sim_ui/shared.scss
index 51c383947e..44c7bf6081 100644
--- a/ui/core/_sim_ui.scss
+++ b/ui/scss/core/sim_ui/shared.scss
@@ -1,7 +1,3 @@
-@import "./components/close_button";
-@import "./components/number_picker";
-@import "./components/title";
-
 html {
 	overflow: hidden;
 }
@@ -14,6 +10,10 @@ td, th {
   padding: auto;
 }
 
+.sim-ui {
+	height: 100%;
+}
+
 .sim-root {
   height: 100%;
   display: flex;
diff --git a/ui/core/talents/_glyphs_picker.scss b/ui/scss/core/talents/glyphs_picker.scss
similarity index 100%
rename from ui/core/talents/_glyphs_picker.scss
rename to ui/scss/core/talents/glyphs_picker.scss
diff --git a/ui/core/talents/_hunter_pet.scss b/ui/scss/core/talents/hunter_pet.scss
similarity index 99%
rename from ui/core/talents/_hunter_pet.scss
rename to ui/scss/core/talents/hunter_pet.scss
index 3ae805ad3f..7b668a6ea6 100644
--- a/ui/core/talents/_hunter_pet.scss
+++ b/ui/scss/core/talents/hunter_pet.scss
@@ -1,4 +1,3 @@
-
 .hunter-pet-talents-cunning, .hunter-pet-talents-ferocity, .hunter-pet-talents-tenacity {
 	display: none !important;
 }
diff --git a/ui/core/talents/_talents_picker.scss b/ui/scss/core/talents/talents_picker.scss
similarity index 100%
rename from ui/core/talents/_talents_picker.scss
rename to ui/scss/core/talents/talents_picker.scss
diff --git a/ui/scss/global.scss b/ui/scss/global.scss
index b70eec6ae2..d956755839 100644
--- a/ui/scss/global.scss
+++ b/ui/scss/global.scss
@@ -6,6 +6,10 @@
   letter-spacing: 1px;
 }
 
+html {
+  height: 100%;
+}
+
 body {
   height: 100%;
   opacity: 0;
diff --git a/ui/core/_shared.scss b/ui/scss/global_old.scss
similarity index 100%
rename from ui/core/_shared.scss
rename to ui/scss/global_old.scss
diff --git a/ui/scss/homepage.scss b/ui/scss/homepage/homepage.scss
similarity index 100%
rename from ui/scss/homepage.scss
rename to ui/scss/homepage/homepage.scss
diff --git a/ui/scss/homepage/index.scss b/ui/scss/homepage/index.scss
new file mode 100644
index 0000000000..b6ad6599d0
--- /dev/null
+++ b/ui/scss/homepage/index.scss
@@ -0,0 +1,2 @@
+@import "../index";
+@import "./homepage";
diff --git a/ui/scss/index.scss b/ui/scss/index.scss
index a38174019b..d06166e5b2 100644
--- a/ui/scss/index.scss
+++ b/ui/scss/index.scss
@@ -19,13 +19,18 @@
 @import "bootstrap/scss/helpers";
 @import "bootstrap/scss/transitions";
 @import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/nav";
 @import "bootstrap/scss/navbar";
 
 // Bootstrap Utilities API
-@import "bootstrap/scss/utilities/api";
+@import "./bootstrap/scss/utilities/api";
 
-// custom Bootstrap style overrides
-@import "bootstrap_style_overrides";
+// Custom Bootstrap style overrides
+@import "./bootstrap_style_overrides";
+
+// Import other plugin styles
+@import "tippy.js/dist/tippy";
 
 // Custom styles
-@import "global";
+@import "./global";
+@import "./global_old";
diff --git a/ui/scss/sims/balance_druid/index.scss b/ui/scss/sims/balance_druid/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/balance_druid/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/balance_druid/_sim.scss b/ui/scss/sims/balance_druid/sim.scss
similarity index 100%
rename from ui/balance_druid/_sim.scss
rename to ui/scss/sims/balance_druid/sim.scss
diff --git a/ui/scss/sims/deathknight/index.scss b/ui/scss/sims/deathknight/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/deathknight/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/deathknight/_sim.scss b/ui/scss/sims/deathknight/sim.scss
similarity index 100%
rename from ui/deathknight/_sim.scss
rename to ui/scss/sims/deathknight/sim.scss
diff --git a/ui/detailed_results/_dps_histogram.scss b/ui/scss/sims/detailed_results/dps_histogram.scss
similarity index 100%
rename from ui/detailed_results/_dps_histogram.scss
rename to ui/scss/sims/detailed_results/dps_histogram.scss
diff --git a/ui/detailed_results/index.scss b/ui/scss/sims/detailed_results/index.scss
similarity index 90%
rename from ui/detailed_results/index.scss
rename to ui/scss/sims/detailed_results/index.scss
index 2bfc9fa497..6d1c14a2ab 100644
--- a/ui/detailed_results/index.scss
+++ b/ui/scss/sims/detailed_results/index.scss
@@ -1,12 +1,11 @@
-@import "../core/shared";
-@import "../core/sim_ui";
-@import "dps_histogram";
-@import "player_damage";
-@import "resource_metrics";
-@import "results_filter";
-@import "source_chart";
-@import "timeline";
-@import "topline_results";
+@import "../../core/sim_ui";
+@import "./dps_histogram";
+@import "./player_damage";
+@import "./resource_metrics";
+@import "./results_filter";
+@import "./source_chart";
+@import "./timeline";
+@import "./topline_results";
 
 body {
 	background-color: transparent;
@@ -142,8 +141,7 @@ body.new-tab {
 .child-metric>*:first-child {
 	padding-left: 20px;
 }
-.expand-toggle {
-}
+
 tr:not(.parent-metric) .expand-toggle {
 	display: none;
 }
diff --git a/ui/detailed_results/_player_damage.scss b/ui/scss/sims/detailed_results/player_damage.scss
similarity index 100%
rename from ui/detailed_results/_player_damage.scss
rename to ui/scss/sims/detailed_results/player_damage.scss
diff --git a/ui/detailed_results/_resource_metrics.scss b/ui/scss/sims/detailed_results/resource_metrics.scss
similarity index 100%
rename from ui/detailed_results/_resource_metrics.scss
rename to ui/scss/sims/detailed_results/resource_metrics.scss
diff --git a/ui/detailed_results/_results_filter.scss b/ui/scss/sims/detailed_results/results_filter.scss
similarity index 100%
rename from ui/detailed_results/_results_filter.scss
rename to ui/scss/sims/detailed_results/results_filter.scss
diff --git a/ui/detailed_results/_source_chart.scss b/ui/scss/sims/detailed_results/source_chart.scss
similarity index 100%
rename from ui/detailed_results/_source_chart.scss
rename to ui/scss/sims/detailed_results/source_chart.scss
diff --git a/ui/detailed_results/_timeline.scss b/ui/scss/sims/detailed_results/timeline.scss
similarity index 100%
rename from ui/detailed_results/_timeline.scss
rename to ui/scss/sims/detailed_results/timeline.scss
diff --git a/ui/detailed_results/_topline_results.scss b/ui/scss/sims/detailed_results/topline_results.scss
similarity index 60%
rename from ui/detailed_results/_topline_results.scss
rename to ui/scss/sims/detailed_results/topline_results.scss
index 07c0dfe1e6..c83bbbe7b1 100644
--- a/ui/detailed_results/_topline_results.scss
+++ b/ui/scss/sims/detailed_results/topline_results.scss
@@ -1,4 +1,4 @@
-@import "../core/components/raid_sim_action";
+@import "../../core/components/raid_sim_action";
 
 .topline-results-root {
 	display: flex;
diff --git a/ui/scss/sims/elemental_shaman/index.scss b/ui/scss/sims/elemental_shaman/index.scss
new file mode 100644
index 0000000000..ef880c6169
--- /dev/null
+++ b/ui/scss/sims/elemental_shaman/index.scss
@@ -0,0 +1,3 @@
+@import "../../core/individual_sim_ui/index";
+@import "../../core/components/totem_inputs";
+@import "./sim";
diff --git a/ui/elemental_shaman/_sim.scss b/ui/scss/sims/elemental_shaman/sim.scss
similarity index 92%
rename from ui/elemental_shaman/_sim.scss
rename to ui/scss/sims/elemental_shaman/sim.scss
index 0e752d54f3..c1b22f5d05 100644
--- a/ui/elemental_shaman/_sim.scss
+++ b/ui/scss/sims/elemental_shaman/sim.scss
@@ -1,5 +1,3 @@
-@import "../core/components/totem_inputs";
-
 // Set color variables which control the site theme.
 .elemental-shaman-sim-ui {
 	--theme-color-primary: #228db0;
diff --git a/ui/scss/sims/enhancement_shaman/index.scss b/ui/scss/sims/enhancement_shaman/index.scss
new file mode 100644
index 0000000000..ef880c6169
--- /dev/null
+++ b/ui/scss/sims/enhancement_shaman/index.scss
@@ -0,0 +1,3 @@
+@import "../../core/individual_sim_ui/index";
+@import "../../core/components/totem_inputs";
+@import "./sim";
diff --git a/ui/enhancement_shaman/_sim.scss b/ui/scss/sims/enhancement_shaman/sim.scss
similarity index 93%
rename from ui/enhancement_shaman/_sim.scss
rename to ui/scss/sims/enhancement_shaman/sim.scss
index d98e154820..a641985626 100644
--- a/ui/enhancement_shaman/_sim.scss
+++ b/ui/scss/sims/enhancement_shaman/sim.scss
@@ -1,5 +1,3 @@
-@import "../core/components/totem_inputs";
-
 // Set color variables which control the site theme.
 .enhancement-shaman-sim-ui {
 	--theme-color-primary: #228db0;
diff --git a/ui/scss/sims/feral_druid/index.scss b/ui/scss/sims/feral_druid/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/feral_druid/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/feral_druid/_sim.scss b/ui/scss/sims/feral_druid/sim.scss
similarity index 100%
rename from ui/feral_druid/_sim.scss
rename to ui/scss/sims/feral_druid/sim.scss
diff --git a/ui/scss/sims/feral_tank_druid/index.scss b/ui/scss/sims/feral_tank_druid/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/feral_tank_druid/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/feral_tank_druid/_sim.scss b/ui/scss/sims/feral_tank_druid/sim.scss
similarity index 100%
rename from ui/feral_tank_druid/_sim.scss
rename to ui/scss/sims/feral_tank_druid/sim.scss
diff --git a/ui/scss/sims/healing_priest/index.scss b/ui/scss/sims/healing_priest/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/healing_priest/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/healing_priest/_sim.scss b/ui/scss/sims/healing_priest/sim.scss
similarity index 100%
rename from ui/healing_priest/_sim.scss
rename to ui/scss/sims/healing_priest/sim.scss
diff --git a/ui/scss/sims/hunter/index.scss b/ui/scss/sims/hunter/index.scss
new file mode 100644
index 0000000000..ef880c6169
--- /dev/null
+++ b/ui/scss/sims/hunter/index.scss
@@ -0,0 +1,3 @@
+@import "../../core/individual_sim_ui/index";
+@import "../../core/components/totem_inputs";
+@import "./sim";
diff --git a/ui/hunter/_sim.scss b/ui/scss/sims/hunter/sim.scss
similarity index 94%
rename from ui/hunter/_sim.scss
rename to ui/scss/sims/hunter/sim.scss
index 9911547119..62b1279b3e 100644
--- a/ui/hunter/_sim.scss
+++ b/ui/scss/sims/hunter/sim.scss
@@ -1,5 +1,3 @@
-@import "../core/components/totem_inputs";
-
 // Set color variables which control the site theme.
 .hunter-sim-ui {
 	--theme-color-primary: #2ead50;
diff --git a/ui/scss/sims/mage/index.scss b/ui/scss/sims/mage/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/mage/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/mage/_sim.scss b/ui/scss/sims/mage/sim.scss
similarity index 100%
rename from ui/mage/_sim.scss
rename to ui/scss/sims/mage/sim.scss
diff --git a/ui/scss/sims/protection_paladin/index.scss b/ui/scss/sims/protection_paladin/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/protection_paladin/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/protection_paladin/_sim.scss b/ui/scss/sims/protection_paladin/sim.scss
similarity index 100%
rename from ui/protection_paladin/_sim.scss
rename to ui/scss/sims/protection_paladin/sim.scss
diff --git a/ui/scss/sims/protection_warrior/index.scss b/ui/scss/sims/protection_warrior/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/protection_warrior/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/protection_warrior/_sim.scss b/ui/scss/sims/protection_warrior/sim.scss
similarity index 100%
rename from ui/protection_warrior/_sim.scss
rename to ui/scss/sims/protection_warrior/sim.scss
diff --git a/ui/raid/_assignments_picker.scss b/ui/scss/sims/raid/assignments_picker.scss
similarity index 100%
rename from ui/raid/_assignments_picker.scss
rename to ui/scss/sims/raid/assignments_picker.scss
diff --git a/ui/raid/_blessings_picker.scss b/ui/scss/sims/raid/blessings_picker.scss
similarity index 99%
rename from ui/raid/_blessings_picker.scss
rename to ui/scss/sims/raid/blessings_picker.scss
index b357028cab..c8a038cd0c 100644
--- a/ui/raid/_blessings_picker.scss
+++ b/ui/scss/sims/raid/blessings_picker.scss
@@ -1,4 +1,3 @@
-
 .blessings-table-header-cell {
 	padding: 2px 10px;
 }
diff --git a/ui/raid/index.scss b/ui/scss/sims/raid/index.scss
similarity index 63%
rename from ui/raid/index.scss
rename to ui/scss/sims/raid/index.scss
index c2ea385d13..c8d5185327 100644
--- a/ui/raid/index.scss
+++ b/ui/scss/sims/raid/index.scss
@@ -1,26 +1,20 @@
-@import "../core/individual_sim_ui";
+@import "../../core/individual_sim_ui/index";
+
 @import "../balance_druid/sim";
+@import "../elemental_shaman/sim";
+@import "../enhancement_shaman/sim";
 @import "../feral_druid/sim";
 @import "../feral_tank_druid/sim";
 @import "../hunter/sim";
 @import "../mage/sim";
-@import "../elemental_shaman/sim";
-@import "../enhancement_shaman/sim";
-@import "../rogue/sim";
-@import "../retribution_paladin/sim";
 @import "../protection_paladin/sim";
+@import "../protection_warrior/sim";
+@import "../retribution_paladin/sim";
+@import "../rogue/sim";
 @import "../shadow_priest/sim";
 @import "../smite_priest/sim";
+@import "../warlock/sim";
 @import "../warrior/sim";
-@import "../protection_warrior/sim";
 
 @import "./raid_sim_ui";
-
-// Set color variables which control the site theme.
-.raid-sim-ui {
-	--theme-color-primary: #a80b00;
-	--theme-color-background: #000000;
-	--theme-color-background-raw: 0, 0, 0;
-	--main-text-color: White;
-	--sidebar-bg-color: #222;
-}
+@import "./sim";
\ No newline at end of file
diff --git a/ui/raid/_raid_picker.scss b/ui/scss/sims/raid/raid_picker.scss
similarity index 100%
rename from ui/raid/_raid_picker.scss
rename to ui/scss/sims/raid/raid_picker.scss
diff --git a/ui/raid/_raid_sim_ui.scss b/ui/scss/sims/raid/raid_sim_ui.scss
similarity index 100%
rename from ui/raid/_raid_sim_ui.scss
rename to ui/scss/sims/raid/raid_sim_ui.scss
diff --git a/ui/scss/sims/raid/sim.scss b/ui/scss/sims/raid/sim.scss
new file mode 100644
index 0000000000..00a674ae4d
--- /dev/null
+++ b/ui/scss/sims/raid/sim.scss
@@ -0,0 +1,8 @@
+// Set color variables which control the site theme.
+.raid-sim-ui {
+	--theme-color-primary: #a80b00;
+	--theme-color-background: #000000;
+	--theme-color-background-raw: 0, 0, 0;
+	--main-text-color: White;
+	--sidebar-bg-color: #222;
+}
diff --git a/ui/raid/_tanks_picker.scss b/ui/scss/sims/raid/tanks_picker.scss
similarity index 100%
rename from ui/raid/_tanks_picker.scss
rename to ui/scss/sims/raid/tanks_picker.scss
diff --git a/ui/scss/sims/retribution_paladin/index.scss b/ui/scss/sims/retribution_paladin/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/retribution_paladin/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/retribution_paladin/_sim.scss b/ui/scss/sims/retribution_paladin/sim.scss
similarity index 100%
rename from ui/retribution_paladin/_sim.scss
rename to ui/scss/sims/retribution_paladin/sim.scss
diff --git a/ui/scss/sims/rogue/index.scss b/ui/scss/sims/rogue/index.scss
new file mode 100644
index 0000000000..ef880c6169
--- /dev/null
+++ b/ui/scss/sims/rogue/index.scss
@@ -0,0 +1,3 @@
+@import "../../core/individual_sim_ui/index";
+@import "../../core/components/totem_inputs";
+@import "./sim";
diff --git a/ui/rogue/_sim.scss b/ui/scss/sims/rogue/sim.scss
similarity index 93%
rename from ui/rogue/_sim.scss
rename to ui/scss/sims/rogue/sim.scss
index 6f2f5d2ee5..19deccc576 100644
--- a/ui/rogue/_sim.scss
+++ b/ui/scss/sims/rogue/sim.scss
@@ -1,5 +1,3 @@
-@import "../core/components/totem_inputs";
-
 // Set color variables which control the site theme.
 .rogue-sim-ui {
 	--theme-color-primary: #a7ba27;
diff --git a/ui/scss/sims/shadow_priest/index.scss b/ui/scss/sims/shadow_priest/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/shadow_priest/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/shadow_priest/_sim.scss b/ui/scss/sims/shadow_priest/sim.scss
similarity index 100%
rename from ui/shadow_priest/_sim.scss
rename to ui/scss/sims/shadow_priest/sim.scss
diff --git a/ui/scss/sims/smite_priest/index.scss b/ui/scss/sims/smite_priest/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/smite_priest/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/smite_priest/_sim.scss b/ui/scss/sims/smite_priest/sim.scss
similarity index 100%
rename from ui/smite_priest/_sim.scss
rename to ui/scss/sims/smite_priest/sim.scss
diff --git a/ui/scss/sims/tank_deathknight/index.scss b/ui/scss/sims/tank_deathknight/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/tank_deathknight/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/tank_deathknight/_sim.scss b/ui/scss/sims/tank_deathknight/sim.scss
similarity index 100%
rename from ui/tank_deathknight/_sim.scss
rename to ui/scss/sims/tank_deathknight/sim.scss
diff --git a/ui/scss/sims/warlock/index.scss b/ui/scss/sims/warlock/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/warlock/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/warlock/_sim.scss b/ui/scss/sims/warlock/sim.scss
similarity index 100%
rename from ui/warlock/_sim.scss
rename to ui/scss/sims/warlock/sim.scss
diff --git a/ui/scss/sims/warrior/index.scss b/ui/scss/sims/warrior/index.scss
new file mode 100644
index 0000000000..5532e835dc
--- /dev/null
+++ b/ui/scss/sims/warrior/index.scss
@@ -0,0 +1,2 @@
+@import "../../core/individual_sim_ui/index";
+@import "./sim";
diff --git a/ui/warrior/_sim.scss b/ui/scss/sims/warrior/sim.scss
similarity index 100%
rename from ui/warrior/_sim.scss
rename to ui/scss/sims/warrior/sim.scss
diff --git a/ui/shadow_priest/index.scss b/ui/shadow_priest/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/shadow_priest/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/smite_priest/index.scss b/ui/smite_priest/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/smite_priest/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/tank_deathknight/index.scss b/ui/tank_deathknight/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/tank_deathknight/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/warlock/index.scss b/ui/warlock/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/warlock/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";
diff --git a/ui/warrior/index.scss b/ui/warrior/index.scss
deleted file mode 100644
index 8c6b3f596d..0000000000
--- a/ui/warrior/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../core/individual_sim_ui";
-@import "./sim";