From dd376705a94747140e4fd23d0edfef877a2be648 Mon Sep 17 00:00:00 2001
From: Carlos Fernandez <cfern1990@gmail.com>
Date: Thu, 12 Mar 2026 18:07:03 -0400
Subject: [PATCH] Remove fieldset

---
 styles/less/global/elements.less              |  63 +-------
 .../appearance-settings/diceSoNice.less       |  53 ++++++
 .../appearance-settings/diceSoNice.hbs        | 153 +++++++++---------
 3 files changed, 133 insertions(+), 136 deletions(-)

diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less
index 380700fe..beffefbb 100755
--- a/styles/less/global/elements.less
+++ b/styles/less/global/elements.less
@@ -565,64 +565,11 @@
 }
 
 .application.setting.dh-style {
-    fieldset {
-        h2,
-        h3,
-        h4 {
-            margin: 8px 0 4px;
-            text-align: center;
-        }
-        .title-hint {
-            font-size: var(--font-size-12);
-            font-variant: small-caps;
-            text-align: center;
-        }
-
-        .field-section {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-
-            .split-section {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 10px;
-
-                > label {
-                    grid-column: span 2;
-                    text-align: center;
-                    font-size: var(--font-size-18);
-                    font-weight: bold;
-                }
-            }
-        }
-
-        .label-container {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-
-            &.full-width {
-                grid-template-columns: 1fr 1fr 1fr 1fr;
-
-                select {
-                    grid-column: span 3;
-                }
-            }
-
-            label {
-                align-self: center;
-                text-align: center;
-                white-space: nowrap;
-            }
-        }
-
-        .button-container {
-            display: grid;
-            align-items: center;
-            justify-content: space-between;
-            width: 100%;
-        }
+    h2,
+    h3,
+    h4 {
+        margin: 8px 0 4px;
+        text-align: center;
     }
 
     footer {
diff --git a/styles/less/ui/settings/appearance-settings/diceSoNice.less b/styles/less/ui/settings/appearance-settings/diceSoNice.less
index 39c8c851..d44d7f67 100644
--- a/styles/less/ui/settings/appearance-settings/diceSoNice.less
+++ b/styles/less/ui/settings/appearance-settings/diceSoNice.less
@@ -1,6 +1,14 @@
 .daggerheart.dh-style.setting.appearance-settings {
+    .tab.active[data-tab="diceSoNice"] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
     .diceSoNice-footer {
         display: grid;
+        align-items: center;
         grid-template-columns: 1fr 1fr 1fr 1fr;
         gap: 8px;
         margin-top: 32px;
@@ -13,4 +21,49 @@
             grid-column: span 2;
         }
     }
+
+    .title-hint {
+        font-size: var(--font-size-12);
+        font-variant: small-caps;
+        text-align: center;
+    }
+
+    .split-section {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+
+        > label {
+            grid-column: span 2;
+            text-align: center;
+            font-size: var(--font-size-18);
+            font-weight: bold;
+        }
+    }
+
+    .field-section {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .label-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+
+        &.full-width {
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+
+            select {
+                grid-column: span 3;
+            }
+        }
+
+        label {
+            align-self: center;
+            text-align: center;
+            white-space: nowrap;
+        }
+    }
 }
diff --git a/templates/settings/appearance-settings/diceSoNice.hbs b/templates/settings/appearance-settings/diceSoNice.hbs
index b66274ec..fa6f4ff7 100644
--- a/templates/settings/appearance-settings/diceSoNice.hbs
+++ b/templates/settings/appearance-settings/diceSoNice.hbs
@@ -1,94 +1,91 @@
 <section class="tab {{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
-  <fieldset>
     <div class="title-hint">{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.hint"}}</div>
 
     <h3>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.globalAnimations"}}</h3>  
-    <div class="split-section"> 
-      <div class="label-container full-width">
+
+    <div class="label-container full-width">
         <label>{{localize "DAGGERHEART.CONFIG.DaggerheartDiceAnimationEvents.critical.name"}}</label>
         {{formInput fields.diceSoNice.fields.sfx.fields.critical.fields.class value=setting.diceSoNice.sfx.critical.class blank="" localize=true}}
-      </div>
-    </div>  
+    </div>
 
     <section class='tab-navigation'>
-      <div class='navigation-container'>
-        <div class="navigation-inner-container">
-          <line-div></line-div>
-          <nav class='feature-tab sheet-tabs tabs' data-group='diceSoNice'>
-            {{#each dsnTabs as |tab|}}
-            <a class='{{tab.id}} {{tab.cssClass}}' data-action='tab' data-group='{{tab.group}}' data-tab='{{tab.id}}'>
-              {{localize tab.label}}
-            </a>
-            {{/each}}
-          </nav>
-          <line-div></line-div>
+        <div class='navigation-container'>
+            <div class="navigation-inner-container">
+                <line-div></line-div>
+                <nav class='feature-tab sheet-tabs tabs' data-group='diceSoNice'>
+                    {{#each dsnTabs as |tab|}}
+                        <a class='{{tab.id}} {{tab.cssClass}}' data-action='tab' data-group='{{tab.group}}' data-tab='{{tab.id}}'>
+                        {{localize tab.label}}
+                    </a>
+                    {{/each}}
+                </nav>
+                <line-div></line-div>
+            </div>
         </div>
-      </div>
     </section>
     {{#each dsnTabs as |dsnTab|}}
-      <section class="tab {{#if dsnTab.active}} active{{/if}}" data-group="{{dsnTab.group}}" data-tab="{{dsnTab.id}}">
-        <div class="field-section">
-          <h3>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceAppearance"}}</h3>
+        <section class="tab {{#if dsnTab.active}} active{{/if}}" data-group="{{dsnTab.group}}" data-tab="{{dsnTab.id}}">
+            <div class="field-section">
+                <h3>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceAppearance"}}</h3>
 
-          <div class="label-container full-width">
-            <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.system"}}</label>
-            {{formInput fields.system value=values.system localize=true choices=@root.diceSoNiceSystems}}
-          </div>
-          <div class="split-section">
-            <div class="label-container">
-              <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.foreground"}}</label>
-              {{formInput fields.foreground value=values.foreground localize=true}}
-            </div>
-            <div class="label-container">
-              <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.background"}}</label>
-              {{formInput fields.background value=values.background localize=true}}
-            </div>
-            <div class="label-container">
-              <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.outline"}}</label>
-              {{formInput fields.outline value=values.outline localize=true}}
-            </div>
-            <div class="label-container">
-              <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.edge"}}</label>
-              {{formInput fields.edge value=values.edge localize=true}}
-            </div>
-            <div class="label-container">
-              <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.colorset"}}</label>
-              {{formInput fields.colorset value=values.colorset choices=@root.diceSoNiceColorsets localize=true}}
-            </div>
-            <div class="label-container">
-              <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.texture"}}</label>
-              {{formInput fields.texture value=values.texture choices=@root.diceSoNiceTextures localize=true}}
-            </div>
-            <div class="label-container">
-              <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.material"}}</label>
-              {{formInput fields.material value=values.material choices=@root.diceSoNiceMaterials localize=true}}
-            </div>
-            <div class="label-container">
-              <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.font"}}</label>
-              {{formInput fields.font value=values.font choices=@root.diceSoNiceFonts localize=true}}
-            </div>
-          </div>
+                <div class="label-container full-width">
+                    <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.system"}}</label>
+                    {{formInput fields.system value=values.system localize=true choices=@root.diceSoNiceSystems}}
+                </div>
+                <div class="split-section">
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.foreground"}}</label>
+                        {{formInput fields.foreground value=values.foreground localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.background"}}</label>
+                        {{formInput fields.background value=values.background localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.outline"}}</label>
+                        {{formInput fields.outline value=values.outline localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.edge"}}</label>
+                        {{formInput fields.edge value=values.edge localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.colorset"}}</label>
+                        {{formInput fields.colorset value=values.colorset choices=@root.diceSoNiceColorsets localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.texture"}}</label>
+                        {{formInput fields.texture value=values.texture choices=@root.diceSoNiceTextures localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.material"}}</label>
+                        {{formInput fields.material value=values.material choices=@root.diceSoNiceMaterials localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.font"}}</label>
+                        {{formInput fields.font value=values.font choices=@root.diceSoNiceFonts localize=true}}
+                    </div>
+                </div>
 
-          {{#if dsnTab.animations}}
-            <h3>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.animations"}}</h3>      
-            <div class="label-container full-width">
-              <label>{{localize "DAGGERHEART.CONFIG.DaggerheartDiceAnimationEvents.higher.name"}}</label>
-              {{formInput fields.sfx.fields.higher.fields.class value=values.sfx.higher.class blank="" localize=true}}
-            </div>
-          {{/if}}
+                {{#if dsnTab.animations}}
+                    <h3>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.animations"}}</h3>      
+                    <div class="label-container full-width">
+                        <label>{{localize "DAGGERHEART.CONFIG.DaggerheartDiceAnimationEvents.higher.name"}}</label>
+                        {{formInput fields.sfx.fields.higher.fields.class value=values.sfx.higher.class blank="" localize=true}}
+                    </div>
+                {{/if}}
 
-          <div class="diceSoNice-footer">
-            <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.previewAnimation"}}</label>
-            <select name="{{concat dsnTab.id "PreviewAnimation"}}">
-              {{selectOptions @root.animationEvents selected=@root.previewAnimation blank="" localize=true }}
-            </select>
-            <button type="button" data-action="preview" data-key="{{dsnTab.id}}">
-              <i class="fa-solid fa-dice"></i>
-              <span>{{localize "DAGGERHEART.GENERAL.preview"}}</span>
-            </button>
-          </div>
-        </div>
-      </section>
+                <div class="diceSoNice-footer">
+                    <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.previewAnimation"}}</label>
+                    <select name="{{concat dsnTab.id "PreviewAnimation"}}">
+                        {{selectOptions @root.animationEvents selected=@root.previewAnimation blank="" localize=true }}
+                    </select>
+                    <button type="button" data-action="preview" data-key="{{dsnTab.id}}">
+                        <i class="fa-solid fa-dice"></i>
+                        <span>{{localize "DAGGERHEART.GENERAL.preview"}}</span>
+                    </button>
+                </div>
+            </div>
+        </section>
     {{/each}}
-  </fieldset>
 </section>
\ No newline at end of file