use img tags instead of divs with background-image set

src/ds4.scss

@@ -21,4 +21,5 @@
     @include meta.load-css("scss/components/tabs");
     @include meta.load-css("scss/components/talent_rank_equation");
     @include meta.load-css("scss/components/currency");
+    @include meta.load-css("scss/components/rollable_image");
 }

src/lang/de.json

@@ -5,6 +5,9 @@
     "DS4.UserInteractionAddEffect": "Neuer Effekt",
     "DS4.UserInteractionEditEffect": "Effekt bearbeiten",
     "DS4.UserInteractionDeleteEffect": "Effekt löschen",
+    "DS4.EntityImageAltText": "Bild von {name}",
+    "DS4.RollableImageRollableTitle": "Für {name} würfeln",
+    "DS4.DiceOverlayImageAltText": "Bild eines W20",
     "DS4.NotOwned": "Nicht besessen",
     "DS4.HeadingBiography": "Biografie",
     "DS4.HeadingDetails": "Details",

src/lang/en.json

@@ -5,6 +5,9 @@
     "DS4.UserInteractionAddEffect": "Add Effect",
     "DS4.UserInteractionEditEffect": "Edit Effect",
     "DS4.UserInteractionDeleteEffect": "Delete Effect",
+    "DS4.EntityImageAltText": "Image of {name}",
+    "DS4.RollableImageRollableTitle": "Roll for {name}",
+    "DS4.DiceOverlayImageAltText": "Image of a d20",
     "DS4.NotOwned": "No owner",
     "DS4.HeadingBiography": "Biography",
     "DS4.HeadingDetails": "Details",

src/module/handlebars/handlebars-partials.ts

@@ -21,6 +21,7 @@ export default async function registerHandlebarsPartials(): Promise<void> {
         "systems/ds4/templates/actor/partials/item-list-header.hbs",
         "systems/ds4/templates/actor/partials/item-list-entry.hbs",
         "systems/ds4/templates/actor/partials/currency.hbs",
+        "systems/ds4/templates/common/partials/rollable-image.hbs",
     ];
     await loadTemplates(templatePaths);
 }

src/scss/components/_item_list.scss

@@ -15,31 +15,31 @@
     padding: 0;
 
     &--weapon {
-        grid-template-columns: $row-height $row-height 3ch 3fr $row-height 1fr 3ch 5fr 4ch;
+        grid-template-columns: $row-height $row-height 3ch 3fr $row-height 1fr 3ch 5fr 5ch;
     }
     &--armor {
-        grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 4ch;
+        grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 5ch;
     }
     &--shield {
-        grid-template-columns: $row-height $row-height 3ch 1fr 3ch 3fr 4ch;
+        grid-template-columns: $row-height $row-height 3ch 1fr 3ch 3fr 5ch;
     }
     &--equipment {
-        grid-template-columns: $row-height $row-height 3ch 1fr 10ch 3fr 4ch;
+        grid-template-columns: $row-height $row-height 3ch 1fr 10ch 3fr 5ch;
     }
     &--loot {
-        grid-template-columns: $row-height 3ch 1fr 10ch 3fr 4ch;
+        grid-template-columns: $row-height 3ch 1fr 10ch 3fr 5ch;
     }
     &--spell {
-        grid-template-columns: $row-height $row-height 2fr $row-height 1fr 1fr 1fr 1fr 4ch;
+        grid-template-columns: $row-height $row-height 2fr $row-height 1fr 1fr 1fr 1fr 5ch;
     }
     &--talent {
-        grid-template-columns: $row-height 1fr 1fr 3fr 4ch;
+        grid-template-columns: $row-height 1fr 1fr 3fr 5ch;
     }
     &--racial-ability,
     &--language,
     &--alphabet,
     &--special-creature-ability {
-        grid-template-columns: $row-height 1fr 3fr 4ch;
+        grid-template-columns: $row-height 1fr 3fr 5ch;
     }
 
     &__row {
@@ -53,18 +53,12 @@
             height: $row-height;
             line-height: $row-height;
             white-space: nowrap;
+            overflow-y: hidden;
         }
     }
 
     &__image {
-        background-position: center;
+        border: none;
-        background-repeat: no-repeat;
-        background-size: 100%;
-
-        &--rollable:hover {
-            background-image: url("../../../icons/svg/d20-black.svg") !important;
-            cursor: pointer;
-        }
     }
 
     &__editable {
@@ -94,6 +88,14 @@
             text-overflow: ellipsis;
         }
     }
+
+    &__control-buttons {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        text-align: center;
+        width: 100%;
+        padding: 0 calc(1em / 3);
+    }
 }
 
 .ds4-item-list-title {

src/scss/components/_rollable_image.scss

@@ -0,0 +1,37 @@
+@use "../utils/colors";
+
+.ds4-rollable-image {
+    position: relative;
+
+    &--rollable {
+        cursor: pointer;
+
+        &:hover {
+            .ds4-rollable-image__image {
+                opacity: 0.25;
+            }
+
+            .ds4-rollable-image__overlay {
+                opacity: 1;
+            }
+        }
+    }
+
+    &__image {
+        border: none;
+        transition: 0.1s ease;
+    }
+
+    &__overlay {
+        border: none;
+        bottom: 0;
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: 0.1s ease;
+        width: 100%;
+    }
+}

src/templates/actor/partials/item-list-entry.hbs

@@ -17,8 +17,9 @@
     {{/if}}
 
     {{!-- image --}}
-    <div class="ds4-item-list__image{{#if itemData.data.rollable}} ds4-item-list__image--rollable rollable-item{{/if}}"
+    {{> systems/ds4/templates/common/partials/rollable-image.hbs rollable=itemData.data.rollable src=itemData.img
-        style="background-image: url('{{itemData.img}}')" title="{{itemData.name}}"></div>
+    alt=(localize "DS4.EntityImageAltText" name=itemData.name) title=itemData.name rollableTitle=(localize
+    "DS4.RollableImageRollableTitle" name=itemData.name) rollableClass="rollable-item"}}
 
     {{!-- amount --}}
     {{#if hasQuantity}}
@@ -42,5 +43,5 @@
     {{/unless}}
 
     {{!-- control buttons --}}
-    {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
+    {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs class="ds4-item-list__control-buttons" }}
 </li>

src/templates/actor/partials/items-overview.hbs

@@ -20,10 +20,8 @@
     {{#each itemsByType.weapon as |itemData id|}}
     {{#> systems/ds4/templates/actor/partials/item-list-entry.hbs itemData=itemData isEquipable=true hasQuantity=true}}
     {{!-- attack type --}}
-    <div class="ds4-item-list__image"
+    <img class="ds4-item-list__image" src="{{lookup ../../config.icons.attackTypes itemData.data.attackType}}"
-        style="background-image: url('{{lookup ../../config.icons.attackTypes  itemData.data.attackType}}')"
+        title="{{lookup ../../config.i18n.attackTypes itemData.data.attackType}}" />
-        title="{{lookup ../../config.i18n.attackTypes  itemData.data.attackType}}">
-    </div>
 
     {{!-- weapon bonus --}}
     <div>{{ itemData.data.weaponBonus}}</div>

src/templates/actor/partials/overview-control-buttons.hbs

@@ -1,8 +1,10 @@
 {{!--
 !-- Render a group of an "edit" and a "delete" button for the current item.
 !-- The current item is defined by the data-item-id HTML property of the parent li element.
+!-- @param class: Additional CSS class(es) for the controls
 --}}
-<div class="item-controls">
+<div class="item-controls {{class}}">
     <a class="item-control item-edit" title="{{localize 'DS4.UserInteractionEditItem'}}"><i class="fas fa-edit"></i></a>
-    <a class="item-control item-delete" title="{{localize 'DS4.UserInteractionDeleteItem'}}"><i class="fas fa-trash"></i></a>
+    <a class="item-control item-delete" title="{{localize 'DS4.UserInteractionDeleteItem'}}"><i
+            class="fas fa-trash"></i></a>
 </div>

src/templates/actor/partials/spells-overview.hbs

@@ -60,10 +60,8 @@ titleKey=titleKey}}
         {{#> systems/ds4/templates/actor/partials/item-list-entry.hbs itemData=itemData isEquipable=true
         hideDescription=true}}
         {{!-- spell type --}}
-        <div class="ds4-item-list__image"
+        <img class="ds4-item-list__image" src="{{lookup ../../config.icons.spellTypes itemData.data.spellType}}"
-            style="background-image: url('{{lookup ../../config.icons.spellTypes itemData.data.spellType}}')"
+            title="{{lookup ../../config.i18n.spellTypes itemData.data.spellType}}" />
-            title="{{lookup ../../config.i18n.spellTypes itemData.data.spellType}}">
-        </div>
 
         {{!-- spell bonus --}}
         <input class="ds4-item-list__editable item-change" type="text" data-dtype="String" data-property="data.bonus"

src/templates/common/partials/rollable-image.hbs

@@ -0,0 +1,17 @@
+{{!--
+!-- Render an an image that has a dice overlay image.
+!-- @param rollable: A flag indicating whether or not the image is actually rollable.
+!-- @param rollableClass: The CSS class(es) to add if the image is rollable.
+!-- @param title: The title for the rollable image if it is not actually rollable.
+!-- @param rollableTitle: The title for the rollable image if it is rollable.
+!-- @param src: The path to the image.
+!-- @param alt: An alternate text for the image.
+--}}
+<div class="ds4-rollable-image{{#if rollable}} ds4-rollable-image--rollable {{rollableClass}}{{/if}}"
+    title="{{#if rollable}}{{rollableTitle}}{{else}}{{title}}{{/if}}">
+    <img class="ds4-rollable-image__image" alt="{{alt}}" src="{{src}}" />
+    {{#if rollable}}
+    <img class="ds4-rollable-image__overlay" alt="{{localize 'DS4.DiceOverlayImageAltText'}}"
+        src="icons/svg/d20-black.svg" />
+    {{/if}}
+</div>