Fix #9 : Visual rollable field

css/fvtt-cthulhu-eternal.css

@@ -117,6 +117,13 @@
   --color-critical-failure: lightcoral;
   --img-icon-color-filter: brightness(0) saturate(100%) invert(52%) sepia(9%) saturate(2368%) hue-rotate(360deg) brightness(86%) contrast(84%);
 }
+.d100 {
+  width: 18px;
+  height: 18px;
+  color: black;
+  border-width: 0px;
+  filter: var(--img-icon-color-filter);
+}
 .item .thumbnail,
 .item-img {
   /*filter: invert(90%) sepia(10%) saturate(1215%) hue-rotate(55deg) brightness(93%) contrast(89%);*/

styles/global.less

@@ -15,6 +15,14 @@
   --img-icon-color-filter: brightness(0) saturate(100%) invert(52%) sepia(9%) saturate(2368%) hue-rotate(360deg) brightness(86%) contrast(84%);
 }
 
+.d100 {
+  width: 18px;
+  height: 18px;
+  color: black;
+  border-width: 0px;
+  filter: var(--img-icon-color-filter);
+}
+
 .item .thumbnail,
 .item-img {
   /*filter: invert(90%) sepia(10%) saturate(1215%) hue-rotate(55deg) brightness(93%) contrast(89%);*/

templates/protagonist-main.hbs

@@ -77,6 +77,7 @@
   <fieldset class="protagonist-characteristics protagonist-characteristics-{{ifThen isPlayMode 'play' 'edit'}}">
     <legend>{{localize "CTHULHUETERNAL.Label.characteristics"}}</legend>
     <div class="protagonist-characteristic" >
+      <img src="systems/fvtt-cthulhu-eternal/assets/ui/d100.svg" class="d100" />
       <label class="rollable" data-roll-type="char" data-char-id="str">{{localize
         "CTHULHUETERNAL.Label.strShort"}}</label>
       {{formField systemFields.characteristics.fields.str.fields.value value=system.characteristics.str.value
@@ -84,6 +85,7 @@
       <label class="char-text">{{mul system.characteristics.str.value 5}}</label>
     </div>
     <div class="protagonist-characteristic">
+      <img src="systems/fvtt-cthulhu-eternal/assets/ui/d100.svg" class="d100" />
       <label class="rollable" data-roll-type="char" data-char-id="dex">{{localize
         "CTHULHUETERNAL.Label.dexShort"}}</label>
       {{formField systemFields.characteristics.fields.dex.fields.value value=system.characteristics.dex.value
@@ -91,6 +93,7 @@
       <label class="char-text">{{mul system.characteristics.dex.value 5}}</label>
     </div>
     <div class="protagonist-characteristic" >
+      <img src="systems/fvtt-cthulhu-eternal/assets/ui/d100.svg" class="d100" />
       <label class="rollable" data-roll-type="char" data-char-id="con">{{localize
         "CTHULHUETERNAL.Label.conShort"}}</label>
       {{formField systemFields.characteristics.fields.con.fields.value value=system.characteristics.con.value
@@ -98,6 +101,7 @@
        <label class="char-text">{{mul system.characteristics.con.value 5}}</label>
     </div>
     <div class="protagonist-characteristic" >
+      <img src="systems/fvtt-cthulhu-eternal/assets/ui/d100.svg" class="d100" />
       <label class="rollable" data-roll-type="char" data-char-id="int">{{localize
         "CTHULHUETERNAL.Label.intShort"}}</label>
       {{formField systemFields.characteristics.fields.int.fields.value value=system.characteristics.int.value
@@ -105,6 +109,7 @@
        <label class="char-text">{{mul system.characteristics.int.value 5}}</label>
     </div>
     <div class="protagonist-characteristic" >
+      <img src="systems/fvtt-cthulhu-eternal/assets/ui/d100.svg" class="d100" />
       <label class="rollable" data-roll-type="char" data-char-id="pow">{{localize
         "CTHULHUETERNAL.Label.powShort"}}</label>
       {{formField systemFields.characteristics.fields.pow.fields.value value=system.characteristics.pow.value
@@ -112,6 +117,7 @@
        <label class="char-text">{{mul system.characteristics.pow.value 5}}</label>
     </div>
     <div class="protagonist-characteristic" >
+      <img src="systems/fvtt-cthulhu-eternal/assets/ui/d100.svg" class="d100" />
       <label class="rollable" data-roll-type="char" data-char-id="cha">{{localize
         "CTHULHUETERNAL.Label.chaShort"}}</label>
       {{formField systemFields.characteristics.fields.cha.fields.value value=system.characteristics.cha.value

templates/protagonist-skills.hbs

@@ -6,6 +6,7 @@
         {{#each skills as |item|}}
           <div class="skill item" data-item-id="{{item.id}}" data-item-uuid="{{item.uuid}}">
             <img class="item-img" src="{{item.img}}" data-tooltip="{{item.name}}" />
+            <img src="systems/fvtt-cthulhu-eternal/assets/ui/d100.svg" class="d100" />
             <div class="name rollable" data-roll-type="skill" data-tooltip="{{{item.description}}}" data-tooltip-direction="UP">{{item.name}}
             </div>
             <div class="score" >