Brought over .common from nutty.gg premium

.common/core/settings-core/script.js

@@ -70,6 +70,12 @@ function LoadJSON(settingsJson) {
 					settingItem.classList.add('setting-item');
 					settingItem.id = `item-${setting.id}`;
 
+					// Indent settings that are dependent on other settings using the showIf property
+					if (setting.showIf) {
+						const depth = GetSettingDepth(setting, data.settings);
+						settingItem.style.marginLeft = `${depth * 20}px`;
+					}
+
 					const labelDescriptionDiv = document.createElement('div');
 
 					if (setting.label) {
@@ -469,6 +475,18 @@ window.addEventListener('message', (event) => {
 	}
 });
 
+function GetSettingDepth(setting, allSettings) {
+    let depth = 0;
+    let current = setting;
+
+    while (current.showIf) {
+        depth++;
+        current = allSettings.find(s => s.id === current.showIf) || {};
+    }
+
+    return depth;
+}
+
 
 
 

.common/core/settings-core/style.css

@@ -53,6 +53,7 @@ body {
     height: 100%;
     padding: 0px 20px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
+    z-index: 2;
 }
 
 #settingsPanel::-webkit-scrollbar {
@@ -82,6 +83,16 @@ body {
     flex-grow: 1;
     overflow: hidden;
     position: relative;
+
+    /* Dark Checkerboard Pattern */
+    background-color: #181818; /* The "base" dark color */
+    background-image: conic-gradient(
+        #252525 90deg, 
+        #181818 90deg 180deg, 
+        #252525 180deg 270deg, 
+        #181818 270deg
+    );
+    background-size: 30px 30px; /* Size of the squares */
 }
 
 #widgetPreview {