feat: (clickgui) neutral centered NextGen group headers, dropdown section bars, bordered Zywl swatches

NextGen group headers now use a neutral panel-header background with the accent only as a left stripe and the title centered, instead of a solid accent bar. The dropdown style draws a section bar with an accent tab behind each group header so nested settings read as a block. Zywl color previews get an outline and the rainbow swatch a little breathing room.

Author: opZywl

nextgen-theme/src/routes/clickgui/setting/ConfigurableSetting.svelte

@@ -37,7 +37,7 @@
     <div class="head" class:expanded on:contextmenu|preventDefault={toggleExpanded}>
         <div class="title">{$spaceSeperatedNames ? convertToSpacedString(setting.name) : setting.name}</div>
         {#if !hideExpandControl}
-            <ExpandArrow bind:expanded />
+            <div class="arrow"><ExpandArrow bind:expanded /></div>
         {/if}
     </div>
 
@@ -61,22 +61,31 @@
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.2px;
+    text-align: center;
   }
 
   .head {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
+    position: relative;
     padding: 6px 9px;
-    background-color: var(--clickgui-dropdown-trigger-background-color);
-    border-left: solid 2px var(--clickgui-setting-group-border-color);
+    background-color: var(--clickgui-panel-header-background-color);
+    border-left: solid 2px var(--accent-color);
     border-radius: 3px;
     cursor: pointer;
     transition: ease margin-bottom .2s;
 
     &.expanded {
       margin-bottom: 8px;
     }
+
+    .arrow {
+      position: absolute;
+      right: 9px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
 
   .nested-settings {

src/main/java/net/ccbluex/liquidbounce/ui/client/clickgui/style/styles/fdpdropdown/impl/SettingComponents.kt

@@ -1527,8 +1527,19 @@ class SettingComponents(private val module: Module) : Component() {
             if (setting is Configurable) {
                 val groupY = roundToHalf(y + (count * rectHeight)).toFloat()
 
-                val label = (if (setting.groupExpanded) "- " else "+ ") + setting.name
-                Fonts.InterBold_18.drawString(label, x + 6, groupY + 5, textColor.rgb)
+                // Section bar behind the group header so nested settings read as a clear block.
+                drawCustomShapeWithRadius(
+                    x + 4, groupY + 2, width - 8, rectHeight * 0.8f - 2, 2f,
+                    RenderUtils.applyOpacity(darkRectHover, .5f)
+                )
+                drawCustomShapeWithRadius(
+                    x + 4, groupY + 2, 2f, rectHeight * 0.8f - 2, 1f,
+                    if (accent) accentedColor2 else textColor
+                )
+
+                val arrow = if (setting.groupExpanded) "-" else "+"
+                Fonts.InterBold_18.drawString(arrow, x + 9, groupY + 5, textColor.rgb)
+                Fonts.InterBold_18.drawString(setting.name, x + 17, groupY + 5, textColor.rgb)
 
                 // Hit-box must match the 0.8-row advance, otherwise it bleeds over the first
                 // child row; consuming the toggle click keeps the same pass from re-entering

src/main/java/net/ccbluex/liquidbounce/ui/client/clickgui/style/styles/yzygui/panel/element/impl/ColorElement.kt

@@ -89,16 +89,24 @@ class ColorElement(
 
         // Main color preview
         RenderUtils.drawRect(previewX1.toFloat(), previewY1.toFloat(), previewX2.toFloat(), previewY2.toFloat(), currentColor.rgb)
+        RenderUtils.drawBorder(
+            previewX1.toFloat(), previewY1.toFloat(), previewX2.toFloat(), previewY2.toFloat(),
+            1f, Color(0, 0, 0, 140).rgb
+        )
 
         // Rainbow preview
-        val rainbowPreviewX2 = previewX1 - previewSize
+        val rainbowPreviewX2 = previewX1 - previewSize - 2
         val rainbowPreviewX1 = rainbowPreviewX2 - previewSize
         if (rainbowPreviewX1 > x + 4) {
             RenderUtils.drawRect(
                 rainbowPreviewX1.toFloat(), previewY1.toFloat(),
                 rainbowPreviewX2.toFloat(), previewY2.toFloat(),
                 ColorUtils.rainbow(setting.opacitySliderY).rgb
             )
+            RenderUtils.drawBorder(
+                rainbowPreviewX1.toFloat(), previewY1.toFloat(), rainbowPreviewX2.toFloat(), previewY2.toFloat(),
+                1f, Color(0, 0, 0, 140).rgb
+            )
         }
 
         val extraOptionsHeight = if (setting.showOptions && !setting.showPicker) {

…xtgen-clickgui/assets/index-CqIkm1hY.css …xtgen-clickgui/assets/index-D_KldqYT.csssrc/main/resources/assets/minecraft/fdpclient/nextgen-clickgui/assets/index-CqIkm1hY.css renamed to src/main/resources/assets/minecraft/fdpclient/nextgen-clickgui/assets/index-D_KldqYT.css src/main/resources/assets/minecraft/fdpclient/nextgen-clickgui/assets/index-CqIkm1hY.css renamed to src/main/resources/assets/minecraft/fdpclient/nextgen-clickgui/assets/index-D_KldqYT.css

@@ -22,8 +22,8 @@
             color: #fff;
         }
     </style>
-  <script type="module" crossorigin src="./assets/index-CafY7L3m.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-CqIkm1hY.css">
+  <script type="module" crossorigin src="./assets/index-d4s8gryQ.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-D_KldqYT.css">
 </head>
 
 <body>