Add hotbar settings (reposition, button size/gap)

styles/hotbarButtonGap.css

@@ -0,0 +1,10 @@
+.oft-hotbarButtonGap #hotbar {
+	&.sm #action-bar {
+		width: calc((var(--hotbar-size) * 5) + (var(--hotbar-button-gap) * 4));
+	}
+
+	#action-bar {
+		row-gap: min(var(--hotbar-button-gap, 8px), 8px);
+		column-gap: var(--hotbar-button-gap, 8px);
+	}
+}

styles/hotbarButtonSize.css

@@ -0,0 +1,7 @@
+/*
+Making it so that the hotbar uses the style attribute from
+"document.body" instead of the one the application assigns
+*/
+.oft-hotbarButtonSize #hotbar {
+	--hotbar-size: unset;
+}

styles/main.css

@@ -1,4 +1,7 @@
 @import url("./chatSidebarBackground.css");
+@import url("./hotbarButtonGap.css");
+@import url("./hotbarButtonSize.css");
+@import url("./repositionHotbar.css");
 
 /* Make the chat sidebar the same width as all the other tabs */
 .chat-sidebar:not(.sidebar-popout) { width: unset; }

styles/repositionHotbar.css

@@ -0,0 +1,14 @@
+#oft-repositionHotbar-container {
+	display: flex;
+	flex-direction: row;
+	gap: 12px;
+	align-items: end;
+
+	#hotbar {
+		margin-bottom: 0;
+
+		&.min {
+			transform: none;
+		}
+	}
+}