Update Style for sheet, item list and tab + update ui + add svg dice

Update Style for sheet, item list and tab
Update ui
Add svg dice

system/templates/dice/dice-picker-dialog.html

@@ -46,7 +46,7 @@
                     <label id="stance_label">unknown</label>
                 </div>
                 <div id="skill_default_value" class="dice-container pointer-choice">
-                    <img src="systems/l5r5e/assets/dices/default/skill_blank.png" alt="1">
+                    <img src="systems/l5r5e/assets/dices/default/skill_blank.svg" alt="1">
                     <div class="dice-value">
                         <span class="dice-skill" type="text" name="skill_{{skillData.name}}">{{skillData.value}}</span>
                     </div>
@@ -107,7 +107,7 @@
 
                 <div class="third">
                     <div class="dice-container">
-                        <img src="systems/l5r5e/assets/dices/default/ring_blank.png" alt="1">
+                        <img src="systems/l5r5e/assets/dices/default/ring_blank.svg" alt="1">
                         <div class="dice-value">
                             <input id="ring_value" class="input-dice input-dice-ring" type="text" name="ring" value="0" readonly="readonly">
                         </div>
@@ -126,7 +126,7 @@
 
                 <div class="third">
                     <div class="dice-container">
-                        <img src="systems/l5r5e/assets/dices/default/skill_blank.png" alt="1">
+                        <img src="systems/l5r5e/assets/dices/default/skill_blank.svg" alt="1">
                         <div class="dice-value">
                             <input id="skill_value" class="input-dice input-dice-skill" type="text" name="skill" value="{{skillData.value}}" readonly="readonly">
                         </div>

system/templates/item/feat-entry.html

@@ -1,13 +1,9 @@
-<li class="feat flexcolumn" data-feat-id="{{feat._id}}">
-    <div class="feat-header">
-        <img src="{{feat.img}}" title="{{feat.name}}" width="32px" height="32px"/>
-        <h4 class="feat-name">{{ feat.name }}</h4>
-        <div class="feat-controls" style="margin-left: auto;">
-            <a class="feat-control feat-edit" title="Edit Feat"><i class="fas fa-edit"></i></a>
-            <a class="faet-control feat-delete" title="Delete Feat"><i class="fas fa-trash"></i></a>
-        </div>
-    </div>
-    <div class="feat-description">
-        {{{ feat.data.description }}}
-    </div>
+<li class="item feat flexcol" data-feat-id="{{feat._id}}">
+    <ul class="item-header feat-controls">
+        <li class="item-img"><img src="{{feat.img}}" title="{{feat.name}}" width="32px" height="32px"/></li>
+        <li class="item-name">{{ feat.name }}</li>
+        <li class="item-control feat-edit" title="Edit Feat"><i class="fas fa-edit"></i></li>
+        <li class="item-control feat-delete" title="Delete Feat"><i class="fas fa-trash"></i></li>
+    </ul>
+    <div class="item-description">{{{ feat.data.description }}}</div>
 </li>

system/templates/item/feat-sheet.html

@@ -5,33 +5,27 @@
             <h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name"/></h1>
         </div>
     </header>
-
     {{!-- Sheet Body --}}
     <section class="sheet-body">
-
         {{!-- Sheet Tab Navigation --}}
         <nav class="sheet-tabs tabs" data-group="primary">
             <a class="item" data-tab="description">Description</a>
             <a class="item" data-tab="attributes">Attributes</a>
         </nav>
-
         {{!-- Description Tab --}}
-        <article class="tab" data-group="primary" data-tab="description">
+        <article class="tab flexcol" data-group="primary" data-tab="description">
             {{editor content=data.description target="data.description" button=true owner=owner editable=editable}}
         </article>
-
         {{!-- Attributes Tab --}}
         <article class="tab attributes" data-group="primary" data-tab="attributes">
-            <div class="flexrow">
-                <div class="attribute-container">
-                    <label class="attribute-label">{{ localize 'l5r5e.xp.spent' }}</label>
-                    <input type="text" name="data.xp_used" value="{{data.xp_used}}" data-dtype="Number" placeholder="0"/>
-                </div>
-                <div class="attribute-container">
-                    <label class="attribute-label">{{ localize 'l5r5e.rank' }}</label>
-                    <input type="text" name="data.rank" value="{{data.rank}}" data-dtype="Number" placeholder="0"/>
-                </div>
-            </div>
+            <label class="attribute">
+                {{ localize 'l5r5e.xp.spent' }}
+                <input type="text" name="data.xp_used" value="{{data.xp_used}}" data-dtype="Number" placeholder="0"/>
+            </label>
+            <label class="attribute">
+                {{ localize 'l5r5e.rank' }}
+                <input type="text" name="data.rank" value="{{data.rank}}" data-dtype="Number" placeholder="0"/>
+            </label>
         </article>
     </section>
 </form>

system/templates/item/item-entry.html

@@ -1,8 +1,9 @@
-<li class="item flexrow" data-item-id="{{item._id}}" style="height: auto !important; align-items: center;">
-    <img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/>
-    <h4 class="item-name">{{ item.name }} x{{ item.data.quantity }}</h4>
-    <div class="item-controls">
-        <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
-        <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
-    </div>
+<li class="item flexcol" data-item-id="{{item._id}}">
+    <ul class="item-header item-control">
+        <li class="item-img"><img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/></li>
+        <li class="item-name">{{ item.name }} x{{ item.data.quantity }}</li>
+        <li class="item-edit" title="Edit Feat"><i class="fas fa-edit"></i></li>
+        <li class="item-delete" title="Delete Feat"><i class="fas fa-trash"></i></li>
+    </ul>
+    <div class="item-description">{{{ feat.data.description }}}</div>
 </li>

system/templates/item/item-sheet.html

@@ -13,31 +13,26 @@
             </div>
         </div>
     </header>
-
     {{!-- Sheet Body --}}
     <section class="sheet-body">
-
         {{!-- Sheet Tab Navigation --}}
         <nav class="sheet-tabs tabs" data-group="primary">
             <a class="item" data-tab="description">Description</a>
             <a class="item" data-tab="attributes">Attributes</a>
         </nav>
-
         {{!-- Description Tab --}}
-        <article class="tab" data-group="primary" data-tab="description">
+        <article class="tab flexcol" data-group="primary" data-tab="description">
             {{editor content=data.description target="data.description" button=true owner=owner editable=editable}}
         </article>
-
         {{!-- Attributes Tab --}}
         <article class="tab attributes" data-group="primary" data-tab="attributes">
-            <header class="attributes-header flexrow">
-                <span class="attribute-key">Attribute Key</span>
-                <span class="attribute-value">Value</span>
-                <span class="attribute-label">Label</span>
-                <span class="attribute-dtype">Data Type</span>
-                <a class="attribute-control" data-action="create"><i class="fas fa-plus"></i></a>
-            </header>
-
+            <ul class="attributes-header flexrow">
+                <li class="attribute-key">Attribute Key</li>
+                <li class="attribute-value">Value</li>
+                <li class="attribute-label">Label</li>
+                <li class="attribute-dtype">Data Type</li>
+                <li class="attribute-control" data-action="create"><i class="fas fa-plus"></i></li>
+            </ul>
             <ol class="attributes-list">
             {{#each data.attributes as |attr key|}}
                 <li class="attribute flexrow" data-attribute="{{key}}">

system/templates/item/items.html

@@ -1,4 +1,5 @@
-<div class="items-content">
+<fieldset class="items-content">
+    <legend>{{ localize 'l5r5e.equipment' }}</legend>
     <ul class="item-list">
         {{#each actor.items as |item id|}}
         {{#if item.isEquipment }}
@@ -6,4 +7,4 @@
         {{/if}}
         {{/each}}
     </ul>
-</div>
+</fieldset>

system/templates/item/weapon-entry.html

@@ -1,16 +1,11 @@
-<li class="item flexrow" data-item-id="{{item._id}}" style="height: auto !important; align-items: center;">
-    <img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/>
-    <h4 class="item-name">{{ item.name }}</h4>
-    <div class="icon-stat-container">
-        <i class="fas fa-certificate"></i>
-        <span class="centered-input" style="width: 32px;">{{item.data.damage}}</span>
-    </div>
-    <div class="icon-stat-container">
-        <i class="fas fa-arrows-alt-h"></i>
-        <span class="centered-input" style="width: 32px;">{{item.data.range}}</span>
-    </div>
-    <div class="item-controls">
-        <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
-        <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
-    </div>
+<li class="item flexcol" data-item-id="{{item._id}}">
+    <ul class="item-header item-control">
+        <li class="item-img"><img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/></li>
+        <li class="item-name">{{ item.name }}</li>
+        <li class="icon-stat-container">{{item.data.damage}} <i class="fas fa-certificate"></i></li>
+        <li class="icon-stat-container">{{item.data.range}} <i class="fas fa-arrows-alt-h"></i></li>
+        <li class="item-edit" title="Edit Feat"><i class="fas fa-edit"></i></li>
+        <li class="item-delete" title="Delete Feat"><i class="fas fa-trash"></i></li>
+    </ul>
+    <div class="item-description">{{{ item.data.properties }}}</div>
 </li>

system/templates/item/weapon-sheet.html

@@ -13,29 +13,28 @@
             </div>
         </div>
     </header>
-
     {{!-- Sheet Body --}}
     <section class="sheet-body">
-
         {{!-- Sheet Tab Navigation --}}
         <nav class="sheet-tabs tabs" data-group="primary">
             <a class="item" data-tab="description">Description</a>
         </nav>
-
         {{!-- Description Tab --}}
         <article class="tab" data-group="primary" data-tab="description">
-            <div class="weapon-stats-content">
-                <div>
-                    <label class="attribute-label">{{ localize 'l5r5e.damage' }}</label>
+            <fieldset class="weapon-stats-content">
+                <label class="attribute-label">
+                    {{ localize 'l5r5e.damage' }}
                     <input type="text" name="data.damage" value="{{data.damage}}" data-dtype="Number" placeholder="0"/>
-                </div>
-                <div>
-                    <label class="attribute-label">{{ localize 'l5r5e.range' }}</label>
+                </label>
+                <label class="attribute-label">
+                    {{ localize 'l5r5e.range' }}
                     <input type="text" name="data.range" value="{{data.range}}" data-dtype="Number" placeholder="0"/>
-                </div>
-            </div>
-            <h4 class="text-block-header">{{ localize  'l5r5e.properties' }}</h4>
-            {{editor content=data.properties target="data.properties" button=true owner=owner editable=editable}}
+                </label>
+            </fieldset>
+            <fieldset>
+                <legend class="text-block-header">{{ localize  'l5r5e.properties' }}</legend>
+                {{editor content=data.properties target="data.properties" button=true owner=owner editable=editable}}
+            </fieldset>
         </article>
     </section>
 </form>

system/templates/item/weapons.html

@@ -1,5 +1,5 @@
-<div class="weapons-content">
-    <h4 class="section-header">{{ localize 'l5r5e.weapons' }}</h4>
+<fieldset class="weapons-content">
+    <legend class="section-header">{{ localize 'l5r5e.weapons' }}</legend>
     <ul class="item-list">
         {{#each actor.items as |item id|}}
             {{#if item.isWeapon }}
@@ -7,4 +7,4 @@
             {{/if}}
         {{/each}}
     </ul>
-</div>
+</fieldset>

system/templates/sheets/actor-sheet.html

@@ -42,6 +42,7 @@
         {{!-- Conflict Tab --}}
         <article class="tab conflict" data-group="primary" data-tab="conflict">
             {{> 'systems/l5r5e/templates/sheets/actor/conflict.html' }}
+            {{> 'systems/l5r5e/templates/item/weapons.html' }}
         </article>
 
         <article class="tab inventory" data-group="primary" data-tab="inventory">

system/templates/sheets/actor/acquisition.html

@@ -1,5 +1,5 @@
-<div class="flexrow row">
-    <span class="name" name="acquisition.name">{{ acquisition.name }}</span>
-    <span class="xp" name="acquisition.xp">{{ acquisition.data.xp_used }}</span>
-    <span class="rank" name="acquisition.rank">{{ acquisition.data.rank }}</span>
-</div>
+<tr class="flexrow row">
+    <th class="name" name="acquisition.name">{{ acquisition.name }}</li>
+    <td class="xp" name="acquisition.xp">{{ acquisition.data.xp_used }}</li>
+    <td class="rank" name="acquisition.rank">{{ acquisition.data.rank }}</li>
+</tr>

system/templates/sheets/actor/attributes.html

@@ -1,47 +1,47 @@
 <ul class="attributes-wrapper">
     <li class="endurance-content">
         <label class="attribute-label">
-            {{ localize 'l5r5e.attributes.endurance' }}
+            <strong>{{ localize 'l5r5e.attributes.endurance' }}</strong>
             <input class="centered-input" type="text" name="data.endurance" value="{{data.endurance}}" data-dtype="Number" disabled/>
         </label>
         <label class="attribute-label">
-            {{ localize 'l5r5e.attributes.fatigue' }}
+            <strong>{{ localize 'l5r5e.attributes.fatigue' }}</strong>
             <input class="centered-input" type="text" name="data.fatigue" value="{{data.fatigue}}" data-dtype="Number"/>
         </label>
         <p class="quick-rules"> {{ localize 'l5r5e.attributes.endurancetip' }}</p>
     </li>
     <li class="composure-content">
         <label class="attribute-label">
-            {{ localize 'l5r5e.attributes.composure' }}
+            <strong>{{ localize 'l5r5e.attributes.composure' }}</strong>
             <input class="centered-input" type="text" name="data.composure" value="{{data.composure}}" data-dtype="Number" disabled/>
         </label>
         <label class="attribute-label">
-            {{ localize 'l5r5e.attributes.strife' }}
+            <strong>{{ localize 'l5r5e.attributes.strife' }}</strong>
             <input class="centered-input" type="text" name="data.strife" value="{{data.strife}}" data-dtype="Number"/>
         </label>
         <p class="quick-rules"> {{ localize 'l5r5e.attributes.composuretip' }}</p>
     </li>
     <li class="focus-content">
         <label class="attribute-label">
-            {{ localize 'l5r5e.attributes.focus' }}
+            <strong>{{ localize 'l5r5e.attributes.focus' }}</strong>
             <input class="centered-input" type="text" name="data.focus" value="{{data.focus}}" data-dtype="Number" disabled/>
         </label>
         <p class="quick-rules"> {{ localize 'l5r5e.attributes.focustip' }}</p>
     </li>
     <li class="vigilante-content">
         <label class="attribute-label">
-            {{ localize 'l5r5e.attributes.vigilante' }}
+            <strong>{{ localize 'l5r5e.attributes.vigilante' }}</strong>
             <input class="centered-input" type="text" name="data.vigilante" value="{{data.vigilante}}" data-dtype="Number" disabled/>
         </label>
         <p class="quick-rules"> {{ localize 'l5r5e.attributes.vigilantetip' }}</p>
     </li>
     <li class="void-content">
         <label class="attribute-label">
-            {{ localize 'l5r5e.attributes.voidpoints' }}
+            <strong>{{ localize 'l5r5e.attributes.voidpoints' }}</strong>
             <input class="centered-input" type="text" name="data.void_points.current" value="{{data.void_points.current}}" data-dtype="Number"/>
         </label>
         <label class="attribute-label">
-            {{ localize 'l5r5e.max' }}
+            <strong>{{ localize 'l5r5e.max' }}</strong>
             <input class="centered-input" type="text" name="data.void_points.max" value="{{data.void_points.max}}" data-dtype="Number" disabled/>
         </label>
     </li>

system/templates/sheets/actor/conflict.html

@@ -1,11 +1,8 @@
-<div class="conflict-wrapper">
-    <div class="conflict-top-content">
-        <div class="conflict-stances-content">
-            <h4 class="section-header">{{ localize 'l5r5e.conflict.stance' }}</h4>
-            {{#each data.rings as |ringValue ringId|}}
-                {{> 'systems/l5r5e/templates/sheets/actor/stance.html' stance=../data.stance ringId=ringId }}
-            {{/each}}
-        </div>
-        {{> 'systems/l5r5e/templates/item/weapons.html' }}
-    </div>
-</div>
+<fieldset class="stances-content flexrow">
+    <legend class="section-header">{{ localize 'l5r5e.conflict.stance' }}</legend>
+    <ul>
+        {{#each data.rings as |ringValue ringId|}}
+            {{> 'systems/l5r5e/templates/sheets/actor/stance.html' stance=../data.stance ringId=ringId }}
+        {{/each}}
+    </ul>
+</fieldset>

system/templates/sheets/actor/experience.html

@@ -1,31 +1,32 @@
-<div class="tab-container">
-    <div class="flexrow" style="flex: 0 0 100px; justify-content: center;">
-        <div class="short-attribute-container">
-            <h4 class="attribute-label center">{{ localize 'l5r5e.xp.total' }}</h4>
-            <input type="text" name="data.xp_total" value="{{ data.xp_total }}" data-dtype="Number" placeholder="0"/>
-        </div>
-        <div class="short-attribute-container">
-            <h4 class="attribute-label">{{ localize 'l5r5e.xp.spent' }}</h4>
-            <input type="text" name="data.xp_spent" value="{{ data.xp_spent }}" data-dtype="Number" placeholder="0"/>
-        </div>
-        <div class="short-attribute-container">
-            <h4 class="attribute-label">{{ localize 'l5r5e.xp.saved' }}</h4>
-            <input type="text" name="data.xp_saved" value="{{ data.xp_saved }}" data-dtype="Number" placeholder="0"/>
-        </div>
-    </div>
-    <div class="acquisitions">
-        <h4 class="section-header flexrow">{{ localize 'l5r5e.xp.acquisitions'}}</h4>
-        <header class="flexrow row">
-            <h4 class="name">{{ localize 'l5r5e.name' }}</h4>
-            <h4 class="xp">{{ localize 'l5r5e.xp.spent' }}</h4>
-            <h4 class="rank">{{ localize 'l5r5e.rank' }}</h4>
-        </header>
-
-        {{#each data.feats as |feat featId| }}
-            {{> 'systems/l5r5e/templates/sheets/actor/acquisition.html' acquisition=feat }}
-        {{/each}}
-        <div class="tools">
-            <a class="acquisition-control acquisition-add" title="{{ localize 'l5r5e.add'}}"><i class="fas fa-plus"></i></a>
-        </div>
-    </div>
-</div>
+<fieldset class="xp">
+    <legend>{{ localize 'l5r5e.experience'}}</legend>
+    <label class="attribute-label">
+        {{ localize 'l5r5e.xp.total' }}
+        <input type="text" name="data.xp_total" value="{{ data.xp_total }}" data-dtype="Number" placeholder="0"/>
+    </label>
+    <label class="attribute-label">
+        {{ localize 'l5r5e.xp.spent' }}
+        <input type="text" name="data.xp_spent" value="{{ data.xp_spent }}" data-dtype="Number" placeholder="0"/>
+    </label>
+    <label class="attribute-label">
+        {{ localize 'l5r5e.xp.saved' }}
+        <input type="text" name="data.xp_saved" value="{{ data.xp_saved }}" data-dtype="Number" placeholder="0"/>
+    </label>
+</fieldset>
+<fieldset class="acquisitions">
+    <legend class="tools">{{ localize 'l5r5e.xp.acquisitions'}} <a class="acquisition-control acquisition-add" title="{{ localize 'l5r5e.add'}}"><i class="fas fa-plus"></i></a></legend>
+    <table>
+        <thead class="flex">
+            <tr class="flexrow row">
+                <th class="name">{{ localize 'l5r5e.name' }}</th>
+                <th class="xp">{{ localize 'l5r5e.xp.spent' }}</th>
+                <th class="rank">{{ localize 'l5r5e.rank' }}</th>
+            </tr>
+        </thead>
+        <tbody class="flex">
+            {{#each data.feats as |feat featId| }}
+                {{> 'systems/l5r5e/templates/sheets/actor/acquisition.html' acquisition=feat }}
+            {{/each}}
+        </tbody>
+    </table>
+</fieldset>

system/templates/sheets/actor/feats.html

@@ -1,15 +1,15 @@
 <div class="feats-wrapper">
-    <div class="section-header flexrow">
-        <h4 style="margin: 0; font-weight: bold;">{{ localize 'l5r5e.feats' }}</h4>
-        <div class="feat-controls">
+    <fieldset class="section-header flexrow">
+        <legend class="feat-controls">
+            {{ localize 'l5r5e.feats' }}
             <a class="feat-control feat-add" title="Add Item"><i class="fas fa-plus"></i></a>
-        </div>
-    </div>
-    <ul class="item-list">
-        {{#each actor.items as |item id|}}
-            {{#if item.isFeat }}
-                {{> 'systems/l5r5e/templates/item/feat-entry.html' feat=item }}
-            {{/if}}
-        {{/each}}
-    </ul>
+        </legend>
+        <ul class="item-list">
+            {{#each actor.items as |item id|}}
+                {{#if item.isFeat }}
+                    {{> 'systems/l5r5e/templates/item/feat-entry.html' feat=item }}
+                {{/if}}
+            {{/each}}
+        </ul>
+    </fieldset>
 </div>

system/templates/sheets/actor/skill.html

@@ -1,6 +1,6 @@
 <li class="skill skill-wrapper" data-skill="{{skillId}}">
     <label class="skill-content">
-        <strong class="skill-name attribute-label rollable">{{ localizeSkill categoryId skillId }}</strong>
+        <span class="skill-name attribute-label rollable">{{ localizeSkill categoryId skillId }}</span>
         <input type="text" name="data.skills.{{categoryId}}.{{skillId}}.value" value="{{skill.value}}" data-dtype="Number" placeholder="0"/>
     </label>
     <!-- Roll button -->

system/templates/sheets/actor/stance.html

@@ -1,5 +1,7 @@
-<div class="stance-content">
-    <input id="stance_{{ringId}}" type="radio" name="data.stance" value="{{ringId}}" {{radioChecked ringId stance}}/>
-    <label for="stance_{{ringId}}" class="stance-title {{ringId}}">{{ localizeRing ringId }}</label>
-    <p class="quick-rules" style="display: inline;"> {{ localizeStanceTip ringId }}</p>
-</div>
+<li class="stance-content">
+    <label for="stance_{{ringId}}" class="stance-title {{ringId}}">
+        {{ localizeRing ringId }}
+        <input id="stance_{{ringId}}" type="radio" name="data.stance" value="{{ringId}}" {{radioChecked ringId stance}}/>
+    </label>
+    <p class="quick-rules">{{ localizeStanceTip ringId }}</p>
+</li>