Fixed missing icon issue for dev server and prod build. (#45)

kgar · Nov 15, 2023 · 5a7e3d5 · 5a7e3d5
1 parent 90eaa0e
commit 5a7e3d5
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 9 deletions.
diff --git a/src/components/item-list/ItemUseButton.svelte b/src/components/item-list/ItemUseButton.svelte
@@ -16,7 +16,7 @@
 <div
   class="item-image"
   class:item-use-button-has-focus={buttonIsFocused}
-  style="--bg-image: url('{imgUrlOverride ?? item.img}')"
+  style="background-image: url('{imgUrlOverride ?? item.img}')"
   class:show-roll={item.isOwner && $showRoll}
 >
   {#if item.isOwner}
@@ -36,7 +36,6 @@
   .item-image {
     flex: 0 0 1.5rem;
     height: 1.5rem;
-    background-image: var(--bg-image);
     background-size: cover;
     display: flex;
     flex-direction: row;
@@ -60,7 +59,7 @@
 
     &.show-roll,
     &.item-use-button-has-focus {
-      background-image: none;
+      background-image: none !important; // TODO: Figure out a way to avoid !important
 
       .item-use-button {
         opacity: 1;

diff --git a/src/components/spellbook/SpellbookGrid.svelte b/src/components/spellbook/SpellbookGrid.svelte
@@ -80,7 +80,7 @@
           {/if}
 
           <div class="spell-name">
-            <div class="spell-image" style="--bg-image: url('{spellImgUrl}');">
+            <div class="spell-image" style="background-image: url('{spellImgUrl}');">
               <i class="fa fa-dice-d20" />
             </div>
           </div>
@@ -207,7 +207,6 @@
           height: 100%;
           margin: 0;
           border-radius: 0;
-          background-image: var(--bg-image);
           background-repeat: no-repeat;
           background-size: cover;
 
@@ -220,7 +219,7 @@
         }
 
         &:not([disabled]):hover .spell-name .spell-image {
-          background-image: none;
+          background-image: none !important; // TODO: Figure out a way to avoid !important
 
           i {
             display: initial;

diff --git a/src/sheets/character/parts/InventoryGrid.svelte b/src/sheets/character/parts/InventoryGrid.svelte
@@ -100,7 +100,7 @@
         {/if}
 
         <div class="item-name">
-          <div class="item-image" style="--bg-image: url('{item.img}');">
+          <div class="item-image" style="background-image: url('{item.img}');">
             <i class="fa fa-dice-d20" />
           </div>
         </div>
@@ -263,7 +263,6 @@
         height: 100%;
         margin: 0;
         border-radius: 0;
-        background-image: var(--bg-image);
         background-repeat: no-repeat;
         background-size: cover;
 
@@ -276,7 +275,7 @@
       }
 
       &:not([disabled]):hover .item-name .item-image {
-        background-image: none;
+        background-image: none !important; // TODO: Figure out a way to avoid !important
 
         i {
           display: initial;