Initial work on mod toggle UI.

This still needs a lot of work.

app/assets/css/launcher.css

@@ -1113,8 +1113,8 @@ body, button {
 .toggleSwitch {
     position: relative;
     display: inline-block;
-    width: 50px;
-    height: 25px;
+    width: 40px;
+    height: 20px;
     border-radius: 50px;
     box-sizing: border-box;
 }
@@ -1136,8 +1136,8 @@ body, button {
 .toggleSwitchSlider:before {
     position: absolute;
     content: "";
-    height: 17px;
-    width: 21px;
+    height: 13px;
+    width: 16px;
     left: 3px;
     bottom: 3px;
     background-color: white;
@@ -1147,9 +1147,11 @@ body, button {
 }
 input:checked + .toggleSwitchSlider {
     background-color: rgb(31, 140, 11);
+    /* box-shadow: inset 2px 1px 20px black; */
+    border: 1px solid rgb(31, 140, 11);
 }
 input:checked + .toggleSwitchSlider:before {
-    transform: translateX(21px);
+    transform: translateX(15px);
 }
 
 /* Range Slider styles. */
@@ -1357,6 +1359,99 @@ input:checked + .toggleSwitchSlider:before {
     width: 75px;
 }
 
+/* * *
+* Settings View (Mods Tab)
+* * */
+
+#settingsReqModsContent,
+#settingsOptModsContent {
+    font-size: 12px;
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 3px;
+    color: white;
+}
+
+#settingsModsContainer {
+    width: 75%;
+}
+
+.settingsModsHeader {
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+    margin-bottom: 10px;
+}
+
+#settingsReqModsContainer,
+#settingsOptModsContainer {
+    padding-bottom: 25px;
+}
+
+.settingsMod {
+    padding: 10px;
+}
+
+.settingsSubMod {
+    padding: 10px 0px 10px 15px;
+    margin-left: 20px;
+    border-left: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.settingsModStatus {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background-color: #c32625;
+    margin-right: 15px;
+}
+
+.settingsModContent {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.settingsModMainWrapper {
+    display: flex;
+    align-items: center;
+}
+
+.settingsModVersion {
+    color: grey;
+    font-size: 10px;
+}
+
+.settingsModDetails {
+    display: flex;
+    flex-direction: column;
+}
+
+.toggleSwitch[reqmod] {
+    filter: grayscale(49%) brightness(60%);
+    pointer-events: none;
+}
+
+.settingsMod[enabled] .settingsModStatus,
+.settingsSubMod[enabled] .settingsModStatus{
+    background-color: rgb(165, 195, 37);
+}
+
+.settingsSubModContainer > .settingsSubMod:first-child {
+    border-top-left-radius: 10px;
+}
+
+.settingsSubModContainer > .settingsSubMod:last-child {
+    border-bottom-left-radius: 10px;
+}
+
+settingsSubModContainer > .settingsSubMod:only-child {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+}
+
+.settingsSubModContainer {
+    margin-top: 10px;
+}
+
 /* * *
 * Settings View (Java Tab)
 * * */