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 {

.common/styles/global.css

@@ -311,6 +311,17 @@ iframe {
 /*** DIALOG ***/
 /**************/
 
+.dialog-wrapper {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    backdrop-filter: blur(var(--blur-intensity));
+}
+
 .dialog {
     font-size: 1em;
     background-color: var(--dialog-background);
@@ -327,7 +338,7 @@ iframe {
     border: 1px solid #40404080;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
     z-index: 1000;
-    /* above overlay */
+    backdrop-filter: blur(var(--blur-intensity));
 }
 
 .dialog-nav-button {
@@ -385,3 +396,97 @@ select {
     cursor: pointer;
     min-width: 8em;
 }
+
+/***************/
+/*** SIDEBAR ***/
+/***************/
+
+#sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 250px;
+    /* expanded width */
+    height: 100vh;
+    color: #fff;
+    overflow: hidden;
+    transition: width 0.3s ease;
+    backdrop-filter: blur(var(--blur-intensity));
+    /* <-- adds the blur */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
+}
+
+#sidebar.collapsed {
+    width: 3em;
+    /* collapsed width */
+}
+
+#sidebar button {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.5em;
+    padding: 0.5em 1em;
+    border-radius: 0;
+}
+
+#sidebar .sidebar-menu {
+    opacity: 1;
+    transition: opacity 0.3s ease;
+}
+
+#sidebar.collapsed .sidebar-menu {
+    opacity: 1;
+}
+
+#collapse-sidebar-btn {
+    width: 100%;
+    background: none;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    justify-content: flex-end !important;
+}
+
+.sidebar-item {
+    padding: 0.75em 1em;
+    text-align: left;
+    background: none;
+    border: none;
+    color: inherit;
+    font-size: 1em;
+    cursor: pointer;
+    white-space: nowrap;
+    /* prevent line breaks */
+    overflow: hidden;
+    /* hide overflow text */
+    text-overflow: ellipsis;
+    /* optional: show "..." if needed */
+}
+
+#sidebar.collapsed .sidebar-item {
+    justify-content: center;
+    padding: 0.75em 0;
+}
+
+.sidebar-label {
+    display: inline-block;
+}
+
+#sidebar.collapsed .sidebar-label {
+    display: none;
+}
+
+.sidebar-item svg {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+
+.sidebar-spacer {
+    flex: 1;
+}
+
+.sidebar-item:hover {
+    background-color: #333;
+}

.common/templates/poll-response-template.css

@@ -0,0 +1,95 @@
+:root {
+    --winning-color: #3be47680;
+    --vote-bar-color: #FFFFFF;
+    --vote-bar-track-color: #FFFFFF33;
+}
+
+.response-container {
+    display: flex;
+    align-items: center;
+    gap: 0.75em;
+    width: 100%;
+    transition: all 0.8s ease;
+}
+
+.response-index {
+    width: 2.5em;
+    height: 2.5em;
+	min-width: 2.5em;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.15);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 900;
+    font-size: 0.8em;
+    transition: all 0.8s ease-out;
+}
+
+.response-except-just-the-shit-on-the-right-side {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+    min-width: 0;
+}
+
+.response-title,
+.response-votes {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    line-height: 1.2em;
+    /* mix-blend-mode: exclusion; */    /* I couldn't make this shit look good so I'm turning it off for now */
+}
+
+.response-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.response-votes {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    margin-left: 8px;
+    font-size: 0.8em;
+}
+
+.response-bar-track {
+    background-color: var(--vote-bar-track-color);
+    position: relative;
+    display: flex;
+    border-radius: 0.5em;
+    overflow: hidden;
+    padding: 0.5em 0.5em;
+}
+
+.response-bar-fill {
+    position: absolute;   /* take it out of flex flow */
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: var(--vote-bar-color);
+    transition: all 0.25s ease;
+    z-index: 0; /* sits behind text */
+    inset: 0;
+    display: flex;   /* 👈 KEY CHANGE */
+    overflow: hidden;
+}
+
+.trophy-icon {
+    width: 1.8em;
+    height: 1.8em;
+    vertical-align: middle;
+}
+
+.response-bar-segment {
+    height: 100%;
+    flex-shrink: 0;
+    transition: all 0.25s ease;
+}

.common/templates/poll-response-template.html

@@ -0,0 +1,16 @@
+<template id="poll-response-template">		
+    <div class="response-container"  data-theme="dark-text">        
+        <!-- Number circle -->
+        <div class="response-index">1</div>
+
+        <!-- Content -->
+        <div class="response-except-just-the-shit-on-the-right-side">				            
+            <!-- Response bar -->
+            <div class="response-bar-track">
+                <div class="response-title"></div>
+                <div class="response-votes"><span class="response-vote-percentage">0</span>% (<span class="response-vote-count"></span>)</div>
+                <div class="response-bar-fill" id="response-bar-total"></div>
+            </div>
+        </div>
+    </div>
+</template>