added invalidity hints to item side-properties

- added :invalid definition to side-properties CSS
-  defined common color for invalidity
- now using disabled input for automatically calculated properties

src/scss/components/_description.scss

@@ -22,7 +22,12 @@
             text-align: left;
             width: calc(100% - 2px);
         }
-
+        input:invalid {
+            background-color: $c-invalid-input;
+        }
+        input:disabled {
+            background-color: transparent;
+        }
         input[type="checkbox"] {
             width: auto;
             height: 100%;

src/scss/components/_items.scss

@@ -31,6 +31,7 @@
         input {
             border: 0;
             padding: 0;
+            background-color: transparent;
         }
 
         input[type="checkbox"] {
@@ -38,6 +39,9 @@
             height: 100%;
             margin: 0px;
         }
+        input:invalid {
+            background-color: $c-invalid-input;
+        }
     }
 
     .item-name {
@@ -54,9 +58,6 @@
         width: 2.5em;
         padding: 0;
     }
-    .item-num-val:invalid {
-        background-color: color.mix(lightcoral, $c-light-grey, 25%);
-    }
 
     .item-description {
         font-size: 75%;

src/scss/utils/_colors.scss

@@ -2,3 +2,4 @@ $c-white: #fff;
 $c-black: #000;
 $c-light-grey: #777;
 $c-border-groove: #eeede0;
+$c-invalid-input: rgba(lightcoral, 50%);

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

@@ -29,6 +29,7 @@
 {{#*inline "talentRankValue"}}
     <input class="item-num-val item-change" data-dtype="Number" type="number" min="0" step="1"
         {{#if (eq property 'base') }}max="{{item.data.data.talentRank.max}}"{{/if}}
+        {{disabled}}
         data-property="data.talentRank.{{property}}" value="{{lookup item.data.data.talentRank property}}"
         title="{{localize localizeString}}" />
 {{/inline}}
@@ -61,7 +62,7 @@
             {{> talentRankValue item=item property='mod' localizeString='DS4.TalentRankMod'}}
             <span> = </span>
             {{!-- derived total rank --}}
-            <span>{{item.data.data.talentRank.total}}</span>
+            {{> talentRankValue item=item property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
         </div>
         {{!-- description --}}
         <div class="flex4 item-description">{{{item.data.data.description}}}</div>

src/templates/item/partials/description.hbs

@@ -20,10 +20,10 @@
             <input type="text" data-dtype="String" name="data.storageLocation" value="{{data.storageLocation}}" />
         </div>
         {{else}}
-        {{localize "DS4.NotOwned"}}
+        <span>{{localize "DS4.NotOwned"}}</span>
         {{/if}}
     </div>
-    <div class="description">
+    <div class="description" title="{{localize 'DS4.Description'}}">
         {{editor content=data.description target="data.description" button=true owner=owner editable=editable}}
     </div>
 </div>

src/templates/item/talent-sheet.hbs

@@ -1,3 +1,7 @@
+{{!-- ======================================================================== --}}
+{{!-- INLINE PARTIAL DEFINITIONS --}}
+{{!-- ======================================================================== --}}
+
 
 {{#*inline "talentRankSideProperty" }}
 <div class="side-property">
@@ -9,6 +13,9 @@
 {{/inline}}
 
 
+{{!-- ======================================================================== --}}
+
+
 <form class="{{cssClass}}" autocomplete="off">
     <header class="sheet-header">
         <img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />