fix small style details in action config application

module/applications/sheets-configs/action-config.mjs

@@ -40,6 +40,10 @@ export default class DHActionConfig extends DaggerheartSheet(ApplicationV2) {
     };
 
     static PARTS = {
+        header: {
+            id: 'header',
+            template: 'systems/daggerheart/templates/sheets-settings/action-settings/header.hbs'
+        },
         tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
         base: {
             id: 'base',
@@ -84,7 +88,7 @@ export default class DHActionConfig extends DaggerheartSheet(ApplicationV2) {
             icon: null,
             label: 'Effect'
         }
-    }
+    };
 
     static CLEAN_ARRAYS = ['damage.parts', 'cost', 'effects'];
 

styles/less/global/elements.less

@@ -89,11 +89,18 @@
             box-shadow: none;
         }
 
-        & option {
+        & option,
+        & optgroup {
             color: @beige;
             background-color: @dark-blue;
             border-radius: 6px;
         }
+
+        &:disabled {
+            opacity: 0.6;
+            outline: 2px solid transparent;
+            cursor: not-allowed;
+        }
     }
 
     p {
@@ -161,17 +168,6 @@
             }
         }
 
-        .checkbox {
-            display: flex;
-            align-items: center;
-            gap: 20px;
-            align-self: end;
-        }
-
-        .fas.fa-trash {
-            align-self: end;
-        }
-
         &.one-column {
             display: flex;
             flex-direction: column;
@@ -182,12 +178,6 @@
             > .one-column {
                 width: 100%;
             }
-            .nest-inputs {
-                fieldset {
-                    flex: 1;
-                    width: 100%;
-                }
-            }
         }
 
         &.two-columns {
@@ -223,8 +213,10 @@
             }
         }
 
-        &[disabled], select[disabled], input[disabled] {
+        &[disabled],
-            opacity: .5;
+        select[disabled],
+        input[disabled] {
+            opacity: 0.5;
         }
 
         .nest-inputs {
@@ -232,6 +224,18 @@
             align-items: center;
             width: 100%;
             gap: 5px;
+
+            .btn {
+                padding-top: 15px;
+            }
+
+            .image {
+                height: 40px;
+                width: 40px;
+                object-fit: cover;
+                border-radius: 6px;
+                border: none;
+            }
         }
 
         .form-group {
@@ -241,26 +245,20 @@
                 font-weight: bold;
                 font-size: smaller;
             }
+
+            &.checkbox {
+                width: fit-content;
+
+                .form-fields {
+                    height: 32px;
+                    align-content: center;
+                }
+            }
         }
 
         &:has(.list-w-img) {
             gap: 0;
         }
-
-        &:has(+ .fas.fa-trash) {
-            border-bottom-right-radius: 0;
-        }
-
-        .fas.fa-trash {
-            color: darkred;
-            border-radius: 0 6px 6px 0;
-            border-color: light-dark(#18162e, #f3c267);
-            border-width: 2px;
-            border-style: groove;
-            border-left-width: 0;
-            padding: 5px;
-            margin-left: -7px;
-        }
     }
 
     .two-columns {

styles/less/global/inventory-fieldset-items.less

@@ -7,6 +7,7 @@
         flex-direction: column;
         gap: 10px;
         align-items: center;
+        width: 100%;
     }
     .card-list {
         display: flex;

styles/less/global/tab-form-footer.less

@@ -2,8 +2,6 @@
     .tab-form-footer {
         display: flex;
         padding: 0 10px;
-        position: relative;
-        bottom: -32px;
 
         button {
             flex: 1;

templates/actionTypes/cost.hbs

@@ -5,13 +5,11 @@
     </legend>
     {{#each source as |cost index|}}
         <div class="nest-inputs">
-            <fieldset class="flex">
+            {{formField ../fields.scalable label="Scalable" value=cost.scalable name=(concat "cost." index ".scalable") classes="checkbox"}}
             {{formField ../fields.type choices=(@root.disableOption index ../fields.type.choices ../source) label="Resource" value=cost.type name=(concat "cost." index ".type") localize=true}}
             {{formField ../fields.value label="Amount" value=cost.value name=(concat "cost." index ".value")}}
-                {{formField ../fields.scalable label="Scalable" value=cost.scalable name=(concat "cost." index ".scalable") classes="checkbox"}}
             {{formField ../fields.step label="Step" value=cost.step name=(concat "cost." index ".step") disabled=(not cost.scalable)}}
-            </fieldset>
+            <a class="btn" data-tooltip="{{localize "DAGGERHEART.Tooltip.delete"}}" data-action="removeElement" data-index="{{index}}"><i class="fas fa-trash"></i></a>
-            <div class="fas fa-trash" data-action="removeElement" data-index="{{index}}"></div>
         </div>
     {{/each}}
 </fieldset>

templates/actionTypes/effect.hbs

@@ -3,17 +3,21 @@
         Effects
         <a><i class="fa-solid fa-plus icon-button" data-action="addEffect"></i></a>
     </legend>
+    <ul class="items-list">
         {{#each source as | effect index |}}
-        <div class="nest-inputs">
+            <div class="inventory-item" data-effect-id="{{effect._id}}" data-action="editEffect">
-            <fieldset class="flex list-w-img" data-effect-id="{{effect._id}}" data-action="editEffect">
                 {{#with (@root.getEffectDetails effect._id) as | details |}}
-                    <img src="{{img}}">
+                        <img class="item-img" src="{{img}}">
-                    <label>{{name}}</label>
+                    <div class="item-label">
+                        <span class="item-name">{{name}}</span>
+                    </div>
                 {{/with}}
                 <input type="hidden" name="effects.{{index}}._id" value="{{effect._id}}">
                 {{#if @root.source.save.trait}}{{formInput ../fields.onSave value=effect.onSave name=(concat "effects." index ".onSave") dataset=(object tooltip="Applied even if save succeeded" tooltipDirection="UP")}}{{/if}}
-            </fieldset>
+                <div class="controls">
-            <div class="fas fa-trash" data-action="removeEffect" data-index="{{index}}"></div>
+                    <a data-tooltip="{{localize "DAGGERHEART.Tooltip.delete"}}" data-action="removeEffect" data-index="{{index}}"><i class="fas fa-trash"></i></a>
+                </div>
             </div>
         {{/each}}
+    </ul>
 </fieldset>

templates/sheets-settings/action-settings/header.hbs

@@ -0,0 +1,3 @@
+<header class="dialog-header">
+    <h1>{{source.name}}</h1>
+</header>