Add sections to Options window

src/client/ui/templates/options/styles.less

@@ -28,6 +28,19 @@
 			display: flex;
 			flex-direction: column;
 
+			.heading {
+				height: 30px;
+				color: @blueA;
+			}
+
+			.heading:before {
+				content: "- ";
+			}
+
+			.heading:after {
+				content: " -";
+			}
+
 			.item {
 				height: 30px;
 				display: flex;

src/client/ui/templates/options/template.html

@@ -4,10 +4,16 @@
 	</div>
 	<div class="bottom">
 		<div class="list">
+			<div class="heading game">Game</div>
 			<div class="item screen">
 				<div class="name">Fullscreen</div>
 				<div class="value">Off</div>
 			</div>
+			<div class="item audio">
+				<div class="name">Audio</div>
+				<div class="value">On</div>
+			</div>
+			<div class="heading hud">HUD</div>
 			<div class="item nameplates">
 				<div class="name">Nameplates</div>
 				<div class="value">On</div>
@@ -20,6 +26,7 @@
 				<div class="name">Events</div>
 				<div class="value">On</div>
 			</div>
+			<div class="heading inventory">Inventory</div>
 			<div class="item quality">
 				<div class="name">Quality Indicators</div>
 				<div class="value">Off</div>
@@ -28,10 +35,6 @@
 				<div class="name">Unusable Indicators</div>
 				<div class="value">Off</div>
 			</div>
-			<div class="item audio">
-				<div class="name">Audio</div>
-				<div class="value">On</div>
-			</div>
 		</div>
 	</div>
 </div>