Reduce Action Selection click number & Style Action Type Dialog (#408)

* Reduce Action Selection click number & Style Action Type Dialog

* fixes

* Action Select buttons color

lang/en.json

@@ -49,25 +49,32 @@
             },
             "TYPES": {
                 "attack": {
-                    "name": "Attack"
+                    "name": "Attack",
+                    "tooltip": "Offensive Action like weapon attack, spellcast, etc."
                 },
                 "beastform": {
-                    "name": "Beastform"
+                    "name": "Beastform",
+                    "tooltip": "Shapeshift the user into another form."
                 },
                 "damage": {
-                    "name": "Damage"
+                    "name": "Damage",
+                    "tooltip": "Direct damage without a roll."
                 },
                 "effect": {
-                    "name": "Effect"
+                    "name": "Generic",
+                    "tooltip": "Generic action that only display a chat message if nothing is configured."
                 },
                 "healing": {
-                    "name": "Healing"
+                    "name": "Healing",
+                    "tooltip": "Restore resources to the target. May have a roll configured."
                 },
                 "macro": {
-                    "name": "Macro"
+                    "name": "Macro",
+                    "tooltip": "Execute a macro by UUID."
                 },
                 "summon": {
-                    "name": "Summon"
+                    "name": "Summon",
+                    "tooltip": "Create tokens in the scene."
                 }
             }
         },

module/applications/dialogs/_module.mjs

@@ -7,3 +7,4 @@ export { default as DeathMove } from './deathMove.mjs';
 export { default as Downtime } from './downtime.mjs';
 export { default as OwnershipSelection } from './ownershipSelection.mjs';
 export { default as ResourceDiceDialog } from './resourceDiceDialog.mjs';
+export { default as ActionSelectionDialog } from './actionSelectionDialog.mjs';

module/applications/dialogs/actionSelectionDialog.mjs

@@ -0,0 +1,87 @@
+const { ApplicationV2, HandlebarsApplicationMixin } = foundry.applications.api;
+
+export default class ActionSelectionDialog extends HandlebarsApplicationMixin(ApplicationV2) {
+    constructor(item, event, options={}) {
+        super(options);
+        this.#item = item;
+        this.#event = event;
+    }
+
+    /* -------------------------------------------- */
+
+    /** @override */
+    static DEFAULT_OPTIONS = {
+        classes: ['daggerheart', 'dh-style', 'dialog'],
+        actions: {
+            choose: ActionSelectionDialog.#onChooseAction
+        },
+        position: {
+            width: 400
+        }
+    };
+
+    /* -------------------------------------------- */
+
+    static PARTS = {
+        actions: {
+            template: "systems/daggerheart/templates/dialogs/actionSelect.hbs"
+        }
+    };
+
+    #item;
+
+    get item() {
+        return this.#item;
+    }
+
+    #event;
+
+    get event() {
+        return this.#event;
+    }
+
+    #action;
+
+    get action() {
+        return this.#action ?? null;
+    }
+
+    /* -------------------------------------------- */
+
+    /** @override */
+    get title() {
+        return game.i18n.localize('DAGGERHEART.CONFIG.SelectAction.selectAction');
+    }
+
+    /* -------------------------------------------- */
+
+    /** @inheritDoc */
+    async _prepareContext(options) {
+        const actions = this.#item.system.actionsList,
+            itemName = this.#item.name;
+        return {
+            ...await super._prepareContext(options),
+            actions,
+            itemName
+        }
+    }
+
+    static async #onChooseAction(event, button) {
+        const { actionId } = button.dataset;
+        this.#action = this.#item.system.actionsList.find(a => a._id === actionId);
+        Object.defineProperty(this.#event, 'shiftKey', {
+            get() {
+                return event.shiftKey;
+            }
+        });
+        this.close();
+    }
+
+    static create(item, event, options) {
+        return new Promise(resolve => {
+            const dialog = new this(item, event, options);
+            dialog.addEventListener("close", () => resolve(dialog.action), { once: true });
+            dialog.render({ force: true });
+        });
+    }
+}

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

@@ -236,7 +236,7 @@ export default class DHActionConfig extends DaggerheartSheet(ApplicationV2) {
         if (!this.action.effects) return;
         const index = button.dataset.index,
             effectId = this.action.effects[index]._id;
-        this.constructor.removeElement.bind(this)(event);
+        this.constructor.removeElement.bind(this)(event, button);
         this.action.item.deleteEmbeddedDocuments('ActiveEffect', [effectId]);
     }
 

module/config/actionConfig.mjs

@@ -2,37 +2,44 @@ export const actionTypes = {
     attack: {
         id: 'attack',
         name: 'DAGGERHEART.ACTIONS.TYPES.attack.name',
-        icon: 'fa-swords'
+        icon: 'fa-khanda',
+        tooltip: 'DAGGERHEART.ACTIONS.TYPES.attack.tooltip'
     },
     healing: {
         id: 'healing',
         name: 'DAGGERHEART.ACTIONS.TYPES.healing.name',
-        icon: 'fa-kit-medical'
+        icon: 'fa-kit-medical',
+        tooltip: 'DAGGERHEART.ACTIONS.TYPES.healing.tooltip'
     },
     damage: {
         id: 'damage',
         name: 'DAGGERHEART.ACTIONS.TYPES.damage.name',
-        icon: 'fa-bone-break'
+        icon: 'fa-heart-crack',
-    },
+        tooltip: 'DAGGERHEART.ACTIONS.TYPES.damage.tooltip'
-    summon: {
-        id: 'summon',
-        name: 'DAGGERHEART.ACTIONS.TYPES.summon.name',
-        icon: 'fa-ghost'
-    },
-    effect: {
-        id: 'effect',
-        name: 'DAGGERHEART.ACTIONS.TYPES.effect.name',
-        icon: 'fa-person-rays'
-    },
-    macro: {
-        id: 'macro',
-        name: 'DAGGERHEART.ACTIONS.TYPES.macro.name',
-        icon: 'fa-scroll'
     },
     beastform: {
         id: 'beastform',
         name: 'DAGGERHEART.ACTIONS.TYPES.beastform.name',
-        icon: 'fa-paw'
+        icon: 'fa-paw',
+        tooltip: 'DAGGERHEART.ACTIONS.TYPES.beastform.tooltip'
+    },
+    summon: {
+        id: 'summon',
+        name: 'DAGGERHEART.ACTIONS.TYPES.summon.name',
+        icon: 'fa-ghost',
+        tooltip: 'DAGGERHEART.ACTIONS.TYPES.summon.tooltip'
+    },
+    effect: {
+        id: 'effect',
+        name: 'DAGGERHEART.ACTIONS.TYPES.effect.name',
+        icon: 'fa-person-rays',
+        tooltip: 'DAGGERHEART.ACTIONS.TYPES.effect.tooltip'
+    },
+    macro: {
+        id: 'macro',
+        name: 'DAGGERHEART.ACTIONS.TYPES.macro.name',
+        icon: 'fa-scroll',
+        tooltip: 'DAGGERHEART.ACTIONS.TYPES.macro.tooltip'
     }
 };
 

module/data/fields/actionField.mjs

@@ -168,9 +168,14 @@ export function ActionMixin(Base) {
             ({ type } =
                 (await foundry.applications.api.DialogV2.input({
                     window: { title: 'Select Action Type' },
+                    position: { width: 300 },
+                    classes: ['daggerheart', 'dh-style'],
                     content: await foundry.applications.handlebars.renderTemplate(
                         'systems/daggerheart/templates/actionTypes/actionType.hbs',
-                        { types: CONFIG.DH.ACTIONS.actionTypes }
+                        {
+                          types: CONFIG.DH.ACTIONS.actionTypes,
+                          itemName: parent.parent?.name
+                        }
                     ),
                     ok: {
                         label: game.i18n.format('DOCUMENT.Create', {

module/documents/item.mjs

@@ -1,3 +1,5 @@
+import ActionSelectionDialog from "../applications/dialogs/actionSelectionDialog.mjs";
+
 /**
  * Override and extend the basic Item implementation.
  * @extends {foundry.documents.Item}
@@ -94,41 +96,13 @@ export default class DHItem extends foundry.documents.Item {
         });
     }
 
-    async selectActionDialog(prevEvent) {
-        const content = await foundry.applications.handlebars.renderTemplate(
-                'systems/daggerheart/templates/dialogs/actionSelect.hbs',
-                {
-                    actions: this.system.actionsList,
-                    itemName: this.name
-                }
-            ),
-            title = game.i18n.localize('DAGGERHEART.CONFIG.SelectAction.selectAction');
-
-        return foundry.applications.api.DialogV2.prompt({
-            window: { title },
-            classes: ['daggerheart', 'dh-style'],
-            content,
-            ok: {
-                label: title,
-                callback: (event, button, dialog) => {
-                    Object.defineProperty(prevEvent, 'shiftKey', {
-                        get() {
-                            return event.shiftKey;
-                        }
-                    });
-                    return this.system.actionsList.find(a => a._id === button.form.elements.actionId.value);
-                }
-            }
-        });
-    }
-
     async use(event) {
         const actions = new Set(this.system.actionsList);
         if (actions?.size) {
             let action = actions.first();
             if (actions.size > 1 && !event?.shiftKey) {
                 // Actions Choice Dialog
-                action = await this.selectActionDialog(event);
+                action = await ActionSelectionDialog.create(this, event);
             }
             if (action) return action.use(event);
         }

styles/less/dialog/actions/action-list.less

@@ -1,18 +1,62 @@
 @import '../../utils/fonts.less';
 
 .application.daggerheart.dh-style {
-    .actions-list {
+
+    .actions-list, .action-buttons-list {
         display: flex;
         flex-direction: column;
-        gap: 10px;
 
         .action-item {
             display: flex;
             align-items: center;
             gap: 5px;
+        }
+    }
+
+    .action-buttons-list {
+        gap: 10px;
+        button {
+            flex: 1;
+            display: flex;
+            padding: 6px 40px 6px 6px;
+            height: fit-content;
+            img {
+                width: 30px;
+            }
+            span {
+                font-family: @font-body;
+                flex: 1;
+                font-weight: bold;
+            }
+        }
+    }
+
+    .actions-list {
+        gap: 5px;
+
+        .action-item {
+            &:hover {
+                background-color: rgba(255,255,255,.05);
+            }
+            padding: 5px;
+            border-radius: 5px;
+            transition: background-color .3s ease-in-out;
 
             .label {
+                display: flex;
+                align-items: center;
+                gap: 10px;
                 font-family: @font-body;
+                cursor: pointer;
+                flex: 1;
+                i {
+                    text-align: center;
+                    width: 30px;
+                }
+            }
+
+            input[type="radio"] {
+                margin-left: auto;
             }
         }
     }

styles/less/global/elements.css

@@ -1,618 +0,0 @@
-@keyframes glow {
-    0% {
-        box-shadow: 0 0 1px 1px #f3c267;
-    }
-    100% {
-        box-shadow: 0 0 2px 2px #f3c267;
-    }
-}
-@keyframes glow-dark {
-    0% {
-        box-shadow: 0 0 1px 1px #18162e;
-    }
-    100% {
-        box-shadow: 0 0 2px 2px #18162e;
-    }
-}
-@font-face {
-    font-family: 'Cinzel';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url(https://fonts.gstatic.com/s/cinzel/v25/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnTYo.ttf) format('truetype');
-}
-@font-face {
-    font-family: 'Cinzel';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url(https://fonts.gstatic.com/s/cinzel/v25/8vIU7ww63mVu7gtR-kwKxNvkNOjw-jHgTYo.ttf) format('truetype');
-}
-@font-face {
-    font-family: 'Cinzel Decorative';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url(https://fonts.gstatic.com/s/cinzeldecorative/v18/daaHSScvJGqLYhG8nNt8KPPswUAPniZoaelD.ttf)
-        format('truetype');
-}
-@font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url(https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-.ttf) format('truetype');
-}
-@font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url(https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu170w-.ttf) format('truetype');
-}
-.application.sheet.daggerheart.dh-style h1 {
-    font-family: 'Cinzel Decorative', serif;
-    margin: 0;
-    border: none;
-    font-weight: normal;
-}
-.application.sheet.daggerheart.dh-style h2,
-.application.sheet.daggerheart.dh-style h3 {
-    font-family: 'Cinzel', serif;
-    margin: 0;
-    border: none;
-    font-weight: normal;
-}
-.application.sheet.daggerheart.dh-style h4 {
-    font-family: 'Montserrat', sans-serif;
-    font-size: 14px;
-    border: none;
-    font-weight: 700;
-    margin: 0;
-    text-shadow: none;
-    color: #f3c267;
-    font-weight: normal;
-}
-.application.sheet.daggerheart.dh-style h5 {
-    font-size: 14px;
-    color: #f3c267;
-    margin: 0;
-    font-weight: normal;
-}
-.application.sheet.daggerheart.dh-style p,
-.application.sheet.daggerheart.dh-style span {
-    font-family: 'Montserrat', sans-serif;
-}
-.application.sheet.daggerheart.dh-style small {
-    font-family: 'Montserrat', sans-serif;
-    opacity: 0.8;
-}
-.application.dh-style {
-    border: 1px solid light-dark(#18162e, #f3c267);
-}
-.application.dh-style input[type='text'],
-.application.dh-style input[type='number'] {
-    background: light-dark(transparent, transparent);
-    border-radius: 6px;
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
-    backdrop-filter: blur(9.5px);
-    -webkit-backdrop-filter: blur(9.5px);
-    outline: none;
-    color: light-dark(#18162e, #f3c267);
-    border: 1px solid light-dark(#222, #efe6d8);
-}
-.application.dh-style input[type='text']:hover[type='text'],
-.application.dh-style input[type='number']:hover[type='text'],
-.application.dh-style input[type='text']:hover[type='number'],
-.application.dh-style input[type='number']:hover[type='number'],
-.application.dh-style input[type='text']:focus[type='text'],
-.application.dh-style input[type='number']:focus[type='text'],
-.application.dh-style input[type='text']:focus[type='number'],
-.application.dh-style input[type='number']:focus[type='number'] {
-    background: light-dark(rgba(0, 0, 0, 0.05), rgba(24, 22, 46, 0.33));
-    box-shadow: none;
-    outline: 2px solid light-dark(#222, #efe6d8);
-}
-.application.dh-style input[type='text']:disabled[type='text'],
-.application.dh-style input[type='number']:disabled[type='text'],
-.application.dh-style input[type='text']:disabled[type='number'],
-.application.dh-style input[type='number']:disabled[type='number'] {
-    outline: 2px solid transparent;
-    cursor: not-allowed;
-}
-.application.dh-style input[type='text']:disabled[type='text']:hover,
-.application.dh-style input[type='number']:disabled[type='text']:hover,
-.application.dh-style input[type='text']:disabled[type='number']:hover,
-.application.dh-style input[type='number']:disabled[type='number']:hover {
-    background: transparent;
-}
-.application.dh-style input[type='checkbox']:checked::after,
-.application.dh-style input[type='radio']:checked::after {
-    color: light-dark(#222, #f3c267);
-}
-.application.dh-style input[type='checkbox']:checked::before,
-.application.dh-style input[type='radio']:checked::before {
-    color: light-dark(#22222240, #f3c26740);
-}
-.application.dh-style input[type='checkbox']::before,
-.application.dh-style input[type='radio']::before {
-    color: light-dark(#22222240, #f3c26740);
-}
-.application.dh-style button {
-    background: light-dark(transparent, #f3c267);
-    border: 1px solid light-dark(#18162e, #18162e);
-    color: light-dark(#18162e, #18162e);
-    outline: none;
-    box-shadow: none;
-}
-.application.dh-style button:hover {
-    background: light-dark(rgba(0, 0, 0, 0.3), #18162e);
-    color: light-dark(#18162e, #f3c267);
-}
-.application.dh-style button.glow {
-    animation: glow 0.75s infinite alternate;
-}
-.application.dh-style button:disabled {
-    background: light-dark(transparent, #f3c267);
-    color: light-dark(#18162e, #18162e);
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-.application.dh-style button:disabled:hover {
-    background: light-dark(transparent, #f3c267);
-    color: light-dark(#18162e, #18162e);
-}
-.application.dh-style select {
-    background: light-dark(transparent, transparent);
-    color: light-dark(#222, #efe6d8);
-    font-family: 'Montserrat', sans-serif;
-    outline: 2px solid transparent;
-    border: 1px solid light-dark(#222, #efe6d8);
-}
-.application.dh-style select:focus,
-.application.dh-style select:hover {
-    outline: 2px solid light-dark(#222, #efe6d8);
-    box-shadow: none;
-}
-.application.dh-style select option,
-.application.dh-style select optgroup {
-    color: #efe6d8;
-    background-color: #18162e;
-    border-radius: 6px;
-}
-.application.dh-style select:disabled {
-    opacity: 0.6;
-    outline: 2px solid transparent;
-    cursor: not-allowed;
-}
-.application.dh-style multi-select {
-    position: relative;
-    height: 34px;
-}
-.application.dh-style multi-select .tags {
-    justify-content: flex-start;
-    margin: 4px;
-    height: inherit;
-}
-.application.dh-style multi-select .tags .tag {
-    padding: 0.3rem 0.5rem;
-    color: light-dark(#18162e, #f3c267);
-    background-color: light-dark(#18162e10, #f3c26740);
-    font-family: 'Montserrat', sans-serif;
-    border-radius: 3px;
-    transition: 0.13s ease-out;
-    gap: 0.5rem;
-    z-index: 1;
-}
-.application.dh-style multi-select .tags .tag .remove {
-    font-size: 10px;
-}
-.application.dh-style multi-select select {
-    position: absolute;
-    height: inherit;
-    outline: initial;
-}
-.application.dh-style p {
-    margin: 0;
-}
-.application.dh-style ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-.application.dh-style li {
-    margin: 0;
-}
-.application.dh-style a:hover,
-.application.dh-style a.active {
-    font-weight: bold;
-    text-shadow: 0 0 8px light-dark(#18162e, #f3c267);
-}
-.application.dh-style fieldset {
-    align-items: center;
-    margin-top: 5px;
-    border-radius: 6px;
-    border-color: light-dark(#18162e, #f3c267);
-}
-.application.dh-style fieldset.glassy {
-    background-color: light-dark(#18162e10, #f3c26710);
-    border-color: transparent;
-}
-.application.dh-style fieldset.glassy legend {
-    padding: 2px 12px;
-    border-radius: 3px;
-    background-color: light-dark(#18162e, #f3c267);
-    color: light-dark(#efe6d8, #18162e);
-}
-.application.dh-style fieldset.fit-height {
-    height: 95%;
-}
-.application.dh-style fieldset.flex {
-    display: flex;
-    gap: 20px;
-}
-.application.dh-style fieldset.flex.wrap {
-    flex-wrap: wrap;
-    gap: 10px 20px;
-}
-.application.dh-style fieldset.flex .inline-child {
-    flex: 1;
-}
-.application.dh-style fieldset .list-w-img {
-    padding: 5px;
-}
-.application.dh-style fieldset .list-w-img label {
-    flex: 1;
-}
-.application.dh-style fieldset .list-w-img img {
-    width: 2rem;
-    height: 2rem;
-}
-.application.dh-style fieldset.one-column {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    gap: 10px;
-    min-height: 64px;
-    flex: 1;
-}
-.application.dh-style fieldset.one-column > .one-column {
-    width: 100%;
-}
-.application.dh-style fieldset.two-columns {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    gap: 10px;
-}
-.application.dh-style fieldset.two-columns.even {
-    grid-template-columns: 1fr 1fr;
-}
-.application.dh-style fieldset.two-columns .full-width {
-    grid-column: span 2;
-}
-.application.dh-style fieldset legend {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: bold;
-    color: light-dark(#18162e, #f3c267);
-}
-.application.dh-style fieldset input[type='text'],
-.application.dh-style fieldset input[type='number'] {
-    color: light-dark(#222, #efe6d8);
-    font-family: 'Montserrat', sans-serif;
-    transition: all 0.3s ease;
-    outline: 2px solid transparent;
-}
-.application.dh-style fieldset input[type='text']:focus,
-.application.dh-style fieldset input[type='number']:focus,
-.application.dh-style fieldset input[type='text']:hover,
-.application.dh-style fieldset input[type='number']:hover {
-    outline: 2px solid light-dark(#222, #efe6d8);
-}
-.application.dh-style fieldset[disabled],
-.application.dh-style fieldset.child-disabled .form-group,
-.application.dh-style fieldset select[disabled],
-.application.dh-style fieldset input[disabled] {
-    opacity: 0.5;
-}
-.application.dh-style fieldset.child-disabled .form-group {
-    pointer-events: none;
-}
-.application.dh-style fieldset .nest-inputs {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    gap: 5px;
-}
-.application.dh-style fieldset .nest-inputs .btn {
-    padding-top: 15px;
-}
-.application.dh-style fieldset .nest-inputs .image {
-    height: 40px;
-    width: 40px;
-    object-fit: cover;
-    border-radius: 6px;
-    border: none;
-}
-.application.dh-style fieldset .nest-inputs > .checkbox {
-    align-self: end;
-}
-.application.dh-style fieldset .form-group {
-    width: 100%;
-}
-.application.dh-style fieldset .form-group label {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: bold;
-    font-size: smaller;
-}
-.application.dh-style fieldset .form-group.checkbox {
-    width: fit-content;
-    display: flex;
-    align-items: center;
-}
-.application.dh-style fieldset .form-group.checkbox .form-fields {
-    height: 32px;
-    align-content: center;
-}
-.application.dh-style fieldset:has(.list-w-img) {
-    gap: 0;
-}
-.application.dh-style .two-columns {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    gap: 10px;
-}
-.application.dh-style .two-columns.even {
-    grid-template-columns: 1fr 1fr;
-}
-.application.dh-style line-div {
-    display: block;
-    height: 1px;
-    width: 100%;
-    border-bottom: 1px solid light-dark(#18162e, #f3c267);
-    mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
-}
-.application.dh-style side-line-div {
-    display: block;
-    height: 1px;
-    width: 100%;
-    border-bottom: 1px solid light-dark(#18162e, #f3c267);
-    mask-image: linear-gradient(270deg, transparent 0%, black 100%);
-}
-.application.dh-style side-line-div.invert {
-    mask-image: linear-gradient(270deg, black 0%, transparent 100%);
-}
-.application.dh-style .item-description {
-    opacity: 1;
-    transform: translateY(0);
-    grid-column: 1/-1;
-    transition:
-        opacity 0.3s ease-out,
-        transform 0.3s ease-out;
-}
-.application.dh-style .item-description.invisible {
-    height: 0;
-    opacity: 0;
-    overflow: hidden;
-    transform: translateY(-20px);
-    transform-origin: top;
-}
-.application.dh-style .item-buttons {
-    grid-column: span 3;
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-}
-.application.dh-style .item-buttons button {
-    white-space: nowrap;
-}
-.application.setting.dh-style fieldset h2,
-.application.setting.dh-style fieldset h3,
-.application.setting.dh-style fieldset h4 {
-    margin: 8px 0 4px;
-    text-align: center;
-}
-.application.setting.dh-style fieldset .title-hint {
-    font-size: 12px;
-    font-variant: small-caps;
-    text-align: center;
-}
-.application.setting.dh-style fieldset .field-section .split-section {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px;
-}
-.application.setting.dh-style fieldset .label-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px;
-}
-.application.setting.dh-style fieldset .label-container label {
-    align-self: center;
-    text-align: center;
-}
-.application.setting.dh-style footer {
-    margin-top: 8px;
-    display: flex;
-    gap: 8px;
-}
-.application.setting.dh-style footer button {
-    flex: 1;
-}
-.application.setting.dh-style .form-group {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.application.setting.dh-style .form-group label {
-    font-size: 16px;
-    font-family: 'Montserrat', sans-serif;
-}
-.application.setting.dh-style .form-group .form-fields {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-}
-.system-daggerheart .tagify {
-    background: light-dark(transparent, transparent);
-    border: 1px solid light-dark(#222, #efe6d8);
-    height: 34px;
-    --tags-disabled-bg: none;
-    --tags-border-color: none;
-    --tags-hover-border-color: none;
-    --tags-focus-border-color: none;
-    --tag-border-radius: 3px;
-    --tag-bg: light-dark(#18162e, #f3c267);
-    --tag-remove-btn-color: light-dark(#18162e, #f3c267);
-    --tag-hover: light-dark(#18162e, #f3c267);
-    --tag-text-color: light-dark(#efe6d8, #222);
-    --tag-text-color--edit: light-dark(#efe6d8, #222);
-    --tag-pad: 0.3em 0.5em;
-    --tag-inset-shadow-size: 1.2em;
-    --tag-invalid-color: #d39494;
-    --tag-invalid-bg: rgba(211, 148, 148, 0.5);
-    --tag--min-width: 1ch;
-    --tag--max-width: 100%;
-    --tag-hide-transition: 0.3s;
-    --tag-remove-bg: light-dark(#18162e40, #f3c26740);
-    --tag-remove-btn-color: light-dark(#efe6d8, #222);
-    --tag-remove-btn-bg: none;
-    --tag-remove-btn-bg--hover: light-dark(#efe6d8, #222);
-    --input-color: inherit;
-    --placeholder-color: light-dark(#efe6d815, #22222215);
-    --placeholder-color-focus: light-dark(#efe6d815, #22222215);
-    --loader-size: 0.8em;
-    --readonly-striped: 1;
-    border-radius: 3px;
-    margin-right: 1px;
-}
-.system-daggerheart .tagify tag div {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 22px;
-}
-.system-daggerheart .tagify tag div span {
-    font-weight: 400;
-}
-.system-daggerheart .tagify tag div img {
-    margin-left: 8px;
-    height: 20px;
-    width: 20px;
-}
-.system-daggerheart .tagify__dropdown {
-    border: 1px solid light-dark(#222, #efe6d8) !important;
-    font-family: 'Montserrat', sans-serif;
-    color: light-dark(#222, #efe6d8);
-}
-.system-daggerheart .tagify__dropdown .tagify__dropdown__wrapper {
-    background-image: url(../assets/parchments/dh-parchment-dark.png);
-    background-color: transparent;
-    border: 0;
-    color: light-dark(#222, #efe6d8);
-}
-.system-daggerheart .tagify__dropdown .tagify__dropdown__wrapper .tagify__dropdown__item--active {
-    background-color: light-dark(#222, #efe6d8);
-    color: light-dark(#efe6d8, #222);
-}
-.system-daggerheart.theme-light .tagify__dropdown .tagify__dropdown__wrapper {
-    background-image: url(../assets/parchments/dh-parchment-light.png);
-}
-.theme-light .application.sheet.dh-style button.glow {
-    animation: glow-dark 0.75s infinite alternate;
-}
-.theme-light .application .component.dh-style.card-preview-container {
-    background-image: url('../assets/parchments/dh-parchment-light.png');
-}
-.theme-light .application .component.dh-style.card-preview-container .preview-text-container {
-    background-image: url(../assets/parchments/dh-parchment-dark.png);
-}
-.theme-light .application .component.dh-style.card-preview-container .preview-selected-icon-container {
-    background-image: url(../assets/parchments/dh-parchment-dark.png);
-    color: var(--color-light-5);
-}
-.application .component.dh-style.card-preview-container {
-    position: relative;
-    border-radius: 6px;
-    border: 2px solid var(--color-tabs-border);
-    display: flex;
-    flex-direction: column;
-    aspect-ratio: 0.75;
-    background-image: url('../assets/parchments/dh-parchment-dark.png');
-}
-.application .component.dh-style.card-preview-container.selectable {
-    cursor: pointer;
-}
-.application .component.dh-style.card-preview-container.disabled {
-    pointer-events: none;
-    opacity: 0.4;
-}
-.application .component.dh-style.card-preview-container .preview-image-outer-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.application .component.dh-style.card-preview-container .preview-image-container {
-    flex: 1;
-    border-radius: 4px 4px 0 0;
-}
-.application .component.dh-style.card-preview-container .preview-text-container {
-    flex: 1;
-    border-radius: 0 0 4px 4px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    text-align: center;
-    color: var(--color-text-selection-bg);
-    background-image: url(../assets/parchments/dh-parchment-light.png);
-}
-.application .component.dh-style.card-preview-container .preview-empty-container {
-    pointer-events: none;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 1;
-}
-.application .component.dh-style.card-preview-container .preview-empty-container .preview-empty-inner-container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-}
-.application
-    .component.dh-style.card-preview-container
-    .preview-empty-container
-    .preview-empty-inner-container
-    .preview-add-icon {
-    font-size: 48px;
-}
-.application
-    .component.dh-style.card-preview-container
-    .preview-empty-container
-    .preview-empty-inner-container
-    .preview-empty-subtext {
-    position: absolute;
-    top: 10%;
-    font-size: 18px;
-    font-variant: small-caps;
-    text-align: center;
-}
-.application .component.dh-style.card-preview-container .preview-selected-icon-container {
-    position: absolute;
-    height: 54px;
-    width: 54px;
-    border-radius: 50%;
-    border: 2px solid;
-    font-size: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-image: url(../assets/parchments/dh-parchment-light.png);
-    color: var(--color-dark-5);
-}
-.application .component.dh-style.card-preview-container .preview-selected-icon-container i {
-    position: relative;
-    right: 2px;
-}

styles/less/global/elements.less

@@ -97,6 +97,19 @@
                 color: light-dark(@dark-blue, @dark-blue);
             }
         }
+
+        &.reverted {
+            background: light-dark(@dark-blue-10, @golden-10);
+            color: light-dark(@dark-blue, @golden);
+            border: 1px solid light-dark(@dark, transparent);
+            &:hover {
+                background: light-dark(transparent, @golden);
+                color: light-dark(@dark-blue, @dark-blue);
+            }
+            img {
+                border-radius: 3px;
+            }
+        }
     }
 
     select {

styles/less/global/inventory-item.less

@@ -23,7 +23,7 @@
         width: 100%;
         list-style-type: none;
 
-        &:hover {
+        &:not(.single-img):hover {
             .inventory-item-header .img-portait {
                 .roll-img {
                     opacity: 1;

templates/actionTypes/actionType.hbs

@@ -5,8 +5,11 @@
     <ul class="actions-list">
     {{#each types}}
         <li class="action-item">
-            <input type="radio" name="type" value="{{id}}" {{#if (eq @index 0)}}checked{{/if}}>
+            <label class="label" for="{{id}}" data-tooltip="{{localize tooltip}}" data-tooltip-direction="LEFT">
-            <span class="label">{{localize name}}</span>
+                <i class="fa-solid {{icon}} fa-xl"></i>
+                <span class="label">{{localize name}}</span>
+            </label>
+            <input type="radio" name="type" id="{{id}}" value="{{id}}" {{#if (eq @index 0)}}checked{{/if}}>
         </li>
     {{/each}}
     </ul>

templates/actionTypes/effect.hbs

@@ -4,7 +4,7 @@
         <a><i class="fa-solid fa-plus icon-button" data-action="addEffect"></i></a>
     </legend>
     <ul class="items-list">
-        {{#each source as | effect index |}}
+        {{!-- {{#each source as | effect index |}}
             <div class="inventory-item" data-effect-id="{{effect._id}}" data-action="editEffect">
                 {{#with (@root.getEffectDetails effect._id) as | details |}}
                         <img class="item-img" src="{{img}}">
@@ -18,6 +18,25 @@
                     <a data-tooltip="{{localize "CONTROLS.CommonDelete"}}" data-action="removeEffect" data-index="{{index}}"><i class="fas fa-trash"></i></a>
                 </div>
             </div>
+        {{/each}} --}}
+        {{#each source as | effect index |}}
+            <div class="inventory-item single-img" data-effect-id="{{effect._id}}" data-action="editEffect">
+                <div class="inventory-item-header">
+                    {{#with (@root.getEffectDetails effect._id) as | details |}}
+                        <div class="img-portait">
+                            <img class="item-img" src="{{img}}">
+                        </div>
+                        <div class="item-label">
+                            <div class="item-name">{{name}}</div>
+                        </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=(localize "DAGGERHEART.UI.Tooltip.appliedEvenIfSuccessful") tooltipDirection="UP")}}{{/if}}
+                    <div class="controls">
+                        <a data-tooltip="{{localize "CONTROLS.CommonDelete"}}" data-action="removeEffect" data-index="{{index}}"><i class="fas fa-trash"></i></a>
+                    </div>
+                </div>
+            </div>
         {{/each}}
     </ul>
 </fieldset>

templates/dialogs/actionSelect.hbs

@@ -2,11 +2,13 @@
     <header class="dialog-header">
         <h1>{{itemName}}</h1>
     </header>
-    <ul class="actions-list">
+    <ul class="action-buttons-list">
     {{#each actions}}
         <li class="action-item">
-            <input type="radio" id="action-{{_id}}" name="actionId" value="{{_id}}" {{#if (eq @index 0)}}checked{{/if}}>
+            <button type="button" class="list-button reverted" data-action-id="{{id}}" data-action="choose">
-            <label class="label" for="action-{{_id}}">{{ name }}</label>
+                <img src="{{ img }}">
+                <span>{{ name }}</span>
+            </button>
         </li>
     {{/each}}
     </ul>