Enhanced the settings UI structure.

The left side of the settings UI now has a more comprehensive layout.
Settings tabs now scroll all the way to the frame bar. When the content is scrolled out of view, a drop shadow is displayed. This removes the awkward feel of content scrolling into nothing.

app/assets/css/launcher.css

@@ -886,22 +886,38 @@ body, button {
     background: rgba(0, 0, 0, 0.50);
 }
 
+/* Drop shadow displayed when content is scrolled out of view. */
+#settingsContainer:before {
+    content: '';
+    background: linear-gradient(rgba(0, 0, 0, 0.25), transparent);
+    width: 100%;
+    height: 5px;
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.25s ease;
+}
+#settingsContainer[scrolled]:before {
+    opacity: 1;
+}
+
 /* Left hand side of the settings UI, for navigation. */
 #settingsContainerLeft {
+    padding-top: 4%;
     height: 100%;
     width: 25%;
-    padding: 5% 0px;
     box-sizing: border-box;
 }
 
 /* Settings navigation container. */
 #settingsNavContainer {
+    height: 100%;
     display: flex;
     flex-direction: column;
 }
 
 /* Navigation header styles. */
 #settingsNavHeader {
+    height: 15%;
     display: flex;
     justify-content: center;
 }
@@ -911,15 +927,15 @@ body, button {
 
 /* Navigation items outer container. */
 #settingsNavItemsContainer {
-    height: 100%;
+    height: 85%;
     display: flex;
     justify-content: center;
-    padding-top: 25%;
     box-sizing: border-box;
 }
 
 /* Navigation items content container. */
 #settingsNavItemsContent {
+    height: 100%;
     display: flex;
     flex-direction: column;
     position: relative;
@@ -956,14 +972,14 @@ body, button {
 /* Content container for the done button. */
 #settingsNavContentBottom {
     position: absolute;
-    bottom: 20%;
+    top: 65%;
 }
 
 /* Settings navigational divider. */
 .settingsNavDivider {
     width: 75%;
-    height: 0.5px;
-    background: rgba(255, 255, 255, 0.75);
+    height: 1px;
+    background: rgba(126, 126, 126, 0.57);
     margin-left: auto;
     margin-bottom: 25px;
 }
@@ -997,7 +1013,6 @@ body, button {
 #settingsContainerRight {
     height: 100%;
     width: 75%;
-    padding-top: 5%;
     box-sizing: border-box;
 }
 
@@ -1018,6 +1033,11 @@ body, button {
     box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
 }
 
+/* Add spacing to the top of each settings tab. */
+.settingsTab > *:first-child {
+    margin-top: 5%;
+}
+
 /* Tab header shared styles. */
 .settingsTabHeader {
     display: flex;

app/assets/js/scripts/settings.js

@@ -142,27 +142,54 @@ function saveSettingsValues(){
 
 let selectedTab = 'settingsTabAccount'
 
+/**
+ * Modify the settings container UI when the scroll threshold reaches
+ * a certain poin.
+ * 
+ * @param {UIEvent} e The scroll event.
+ */
+function settingsTabScrollListener(e){
+    if(e.target.scrollTop > Number.parseFloat(getComputedStyle(e.target.firstElementChild).marginTop)){
+        document.getElementById('settingsContainer').setAttribute('scrolled', '')
+    } else {
+        document.getElementById('settingsContainer').removeAttribute('scrolled')
+    }
+}
+
 /**
  * Bind functionality for the settings navigation items.
  */
 function setupSettingsTabs(){
     Array.from(document.getElementsByClassName('settingsNavItem')).map((val) => {
-        val.onclick = (e) => {
-            if(val.hasAttribute('selected')){
-                return
-            }
-            const navItems = document.getElementsByClassName('settingsNavItem')
-            for(let i=0; i<navItems.length; i++){
-                if(navItems[i].hasAttribute('selected')){
-                    navItems[i].removeAttribute('selected')
+        if(val.hasAttribute('rSc')){
+            val.onclick = (e) => {
+                if(val.hasAttribute('selected')){
+                    return
+                }
+                const navItems = document.getElementsByClassName('settingsNavItem')
+                for(let i=0; i<navItems.length; i++){
+                    if(navItems[i].hasAttribute('selected')){
+                        navItems[i].removeAttribute('selected')
+                    }
                 }
+                val.setAttribute('selected', '')
+                let prevTab = selectedTab
+                selectedTab = val.getAttribute('rSc')
+
+                document.getElementById(prevTab).onscroll = null
+                document.getElementById(selectedTab).onscroll = settingsTabScrollListener
+
+                $(`#${prevTab}`).fadeOut(250, () => {
+                    $(`#${selectedTab}`).fadeIn({
+                        duration: 250,
+                        start: () => {
+                            settingsTabScrollListener({
+                                target: document.getElementById(selectedTab)
+                            })
+                        }
+                    })
+                })
             }
-            val.setAttribute('selected', '')
-            let prevTab = selectedTab
-            selectedTab = val.getAttribute('rSc')
-            $(`#${prevTab}`).fadeOut(250, () => {
-                $(`#${selectedTab}`).fadeIn(250)
-            })
         }
     })
 }

app/settings.ejs

@@ -13,6 +13,7 @@
                     <button class="settingsNavItem" rSc="settingsTabLauncher">Launcher</button>
                     <div class="settingsNavSpacer"></div>
                     <button class="settingsNavItem" rSc="settingsTabAbout">About</button>
+                    <button class="settingsNavItem">Updates</button>
                     <div id="settingsNavContentBottom">
                         <div class="settingsNavDivider"></div>
                         <button id="settingsNavDone">Done</button>