Customization pt.1

l5r4.css

@@ -99,7 +99,7 @@
 .l5r4.pc .main-sheet {
   width: 100%;
   display: grid;
-  grid-template-columns: 1fr min-content;
+  grid-template-columns: 3fr 1fr;
   column-gap: 5px;
 }
 .l5r4.pc .main-sheet .main-stats {
@@ -107,17 +107,23 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding: 1em;
 }
 .l5r4.pc .main-sheet .sidebar {
   order: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding: 1em;
 }
 .l5r4.pc .main-sheet .actor-img {
   width: 256px;
   border: none;
   border-radius: 8px;
+  margin-bottom: 2em;
+}
+.l5r4.pc .main-sheet .panelBorder:not(:last-of-type) {
+  margin-bottom: 2em;
 }
 .l5r4.pc .main-sheet input {
   flex: 1;
@@ -130,6 +136,13 @@
   display: flex;
   flex-direction: column;
 }
+.l5r4.pc .ring {
+  width: 128px;
+  height: 128px;
+  font-size: 128px;
+  line-height: 128px;
+  display: block;
+}
 .l5r4.pc .misc {
   height: 100%;
 }
@@ -139,9 +152,16 @@
 .l5r4.pc .pc-info {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   justify-content: space-evenly;
   padding: 1em;
 }
+.l5r4.pc .pc-info h3 {
+  margin-bottom: 0;
+}
+.l5r4.pc .pc-info label {
+  margin-bottom: 1em;
+}
 .l5r4.pc .traits-rings {
   display: grid;
   grid-template-columns: 1fr 32px 32px 32px 32px 32px 32px 32px 32px 32px 32px 32px 32px 32px 32px 1fr;
@@ -881,11 +901,191 @@ body {
 body > * {
   scrollbar-width: thin;
 }
+/** Fonts **/
+@font-face {
+  font-family: "LogotypeL5r";
+  src: url("assets/fonts/LogotypeL5r.ttf") format("truetype");
+}
+i.i_strife,
+i.i_success,
+i.i_explosive,
+i.i_opportunity,
+i.i_earth,
+i.i_water,
+i.i_fire,
+i.i_air,
+i.i_void,
+i.i_kiho,
+i.i_maho,
+i.i_ninjitsu,
+i.i_prerequisite_exemption,
+i.i_rituals,
+i.i_shuji,
+i.i_invocations,
+i.i_kata,
+i.i_inversion,
+i.i_mantra,
+i.i_imperial,
+i.i_ronin,
+i.i_crab,
+i.i_crane,
+i.i_dragon,
+i.i_lion,
+i.i_mantis,
+i.i_phoenix,
+i.i_scorpion,
+i.i_tortoise,
+i.i_unicorn,
+i.i_bushi,
+i.i_courtier,
+i.i_shugenja,
+i.i_ring,
+i.i_skill {
+  font-family: "LogotypeL5r", sans-serif;
+  line-height: 1rem;
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: normal;
+  vertical-align: middle;
+  text-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
+}
+i.i_earth:before {
+  content: "\E90E";
+  color: #699678;
+}
+i.i_air:before {
+  content: "\E90D";
+  color: #917896;
+}
+i.i_water:before {
+  content: "\E90C";
+  color: #5f919b;
+}
+i.i_fire:before {
+  content: "\E90A";
+  color: #9b7350;
+}
+i.i_void:before {
+  content: "\E90B";
+  color: #4b4641;
+}
+i.i_invocations:before {
+  content: "\E906";
+  color: #ff6400;
+}
+i.i_kata:before {
+  content: "\E907";
+  color: #ff0000;
+}
+i.i_kiho:before {
+  content: "\E900";
+  color: #009632;
+}
+i.i_maho:before {
+  content: "\E901";
+  color: #c83200;
+}
+i.i_ninjitsu:before {
+  content: "\E902";
+  color: #343434;
+}
+i.i_prerequisite_exemption:before {
+  content: "\E903";
+  color: #343434;
+}
+i.i_rituals:before {
+  content: "\E904";
+  color: #0096ff;
+}
+i.i_shuji:before {
+  content: "\E905";
+  color: #00ff96;
+}
+i.i_inversion:before {
+  content: "\E908";
+  color: #4b4641;
+}
+i.i_mantra:before {
+  content: "\E909";
+  color: #ffaa00;
+}
+i.i_crab:before {
+  content: "\E916";
+  color: #82828c;
+}
+i.i_crane:before {
+  content: "\E917";
+  color: #789191;
+}
+i.i_dragon:before {
+  content: "\E918";
+  color: #55826e;
+}
+i.i_lion:before {
+  content: "\E910";
+  color: #a08c50;
+}
+i.i_mantis:before {
+  content: "\E911";
+  color: #2d551e;
+}
+i.i_phoenix:before {
+  content: "\E912";
+  color: #91784b;
+}
+i.i_scorpion:before {
+  content: "\E913";
+  color: #9b463c;
+}
+i.i_tortoise:before {
+  content: "\E914";
+  color: #b4c82d;
+}
+i.i_unicorn:before {
+  content: "\E915";
+  color: #785a87;
+}
+i.i_imperial:before {
+  content: "\E90F";
+  color: #78ffb4;
+}
+i.i_ronin:before {
+  content: "\E919";
+  color: #612001;
+}
+i.i_bushi:before {
+  content: "\E91A";
+  color: #a55a5a;
+}
+i.i_courtier:before {
+  content: "\E91B";
+  color: #6982a5;
+}
+i.i_shugenja:before {
+  content: "\E91C";
+  color: #5aa582;
+}
+i.i_ring {
+  content: "";
+  background: transparent url("../assets/dices/default/ring_blank.svg") no-repeat 0 center;
+  background-size: 1rem;
+  display: inline-block;
+  height: 1rem;
+  width: 1rem;
+}
+i.i_skill {
+  content: "";
+  background: transparent url("../assets/dices/default/skill_blank.svg") no-repeat 0 0;
+  background-size: 1rem;
+  display: inline-block;
+  height: 1rem;
+  width: 1rem;
+}
 .l5r4.pc {
   font-family: "Rotis Serif";
 }
 .l5r4.pc .window-content {
-  background: #fffae6 url("assets/textures/scroll2.webp") no-repeat;
+  background: #fffae6 url("assets/textures/scroll3.webp") no-repeat;
   background-size: cover;
 }
 .l5r4.pc input,
@@ -913,7 +1113,7 @@ body > * {
   font-family: "Rotis Serif";
 }
 .l5r4.npc .window-content {
-  background: #fffae6 url("assets/textures/scroll2.webp") no-repeat;
+  background: #fffae6 url("assets/textures/scroll3.webp") no-repeat;
   background-size: cover;
 }
 .l5r4.npc input,

less/config.less

@@ -75,7 +75,7 @@
 }
 
 // textures
-@main-background: rgb(255, 250, 230) url("assets/textures/scroll2.webp") no-repeat;
+@main-background: rgb(255, 250, 230) url("assets/textures/scroll3.webp") no-repeat;
 @brush-background: url("assets/textures/brush.webp") no-repeat 0 0;
 @water-background: url("assets/textures/watercolor.webp") no-repeat 0 0;
 
@@ -87,4 +87,112 @@
 @void-ring-img: url("assets/icons/void.png");
 
 // colors
-@accent-color: #d6cd9fa3;
+@accent-color: #d6cd9fa3;
+
+// color title
+@l5r5e-title: rgba(186, 187, 177, 0.5);
+// color bold
+@l5r5e-bold: rgb(118, 79, 64);
+// color label
+@l5r5e-label: rgb(90, 110, 90);
+// color label
+@l5r5e-label-light: rgba(90, 110, 90, 0.25);
+// color red
+@l5r5e-red: rgb(150, 60, 65);
+// color white 0.5
+@l5r5e-white: rgba(255, 255, 255, 0.5);
+// color white 0.2
+@l5r5e-white-light: rgba(255, 255, 255, 0.25);
+// color black 0.5
+@l5r5e-black: rgba(0, 0, 0, 0.5);
+// color black 0.25
+@l5r5e-black-light: rgba(0, 0, 0, 0.25);
+// color border sidebar
+@l5r5e-border-sidebar: rgb(195, 165, 130);
+
+// color list odd
+@l5r5e-odd: rgba(186, 187, 177, 0.2);
+// color list even
+@l5r5e-even: rgba(186, 187, 177, 0.1);
+
+// gradient
+@l5r5e-linear-gradient-first: rgba(65, 20, 15, 0.75);
+@l5r5e-linear-gradient-first-dark: rgba(35, 10, 5, 0.75);
+@l5r5e-linear-gradient-second: rgba(10, 0, 20, 0.75);
+@l5r5e-linear-gradient-second-dark: rgba(0, 0, 10, 0.75);
+@l5r5e-linear-gradient-third: rgba(95, 40, 65, 1);
+@l5r5e-linear-gradient-third-dark: rgba(65, 25, 40, 1);
+
+// Chat color
+@l5r5e-chat-color: rgba(225, 215, 200, 0.25);
+@l5r5e-chat-color-roll: rgba(225, 215, 200, 0.75);
+@l5r5e-chat-color-blind: transparent;
+@l5r5e-chat-color-whisper: rgba(225, 200, 225, 0.75);
+
+// -- Rings
+
+// Earth
+@l5r5e-earth: rgb(105, 150, 120);
+// Air
+@l5r5e-air: rgb(145, 120, 150);
+// Water
+@l5r5e-water: rgb(95, 145, 155);
+// Fire
+@l5r5e-fire: rgb(155, 115, 80);
+// Void
+@l5r5e-void: rgb(75, 70, 65);
+
+// -- Clans
+
+// Crab
+@l5r5e-crab: rgb(130, 130, 140);
+// Crane
+@l5r5e-crane: rgb(120, 145, 145);
+// Dragon
+@l5r5e-dragon: rgb(85, 130, 110);
+// Lion
+@l5r5e-lion: rgb(160, 140, 80);
+// Mantis
+@l5r5e-mantis: rgb(45, 85, 30);
+// Phoenix
+@l5r5e-phoenix: rgb(145, 120, 75);
+// Tortoise
+@l5r5e-tortoise: rgb(180, 200, 45);
+// Scorpion
+@l5r5e-scorpion: rgb(155, 70, 60);
+// Unicorn
+@l5r5e-unicorn: rgb(120, 90, 135);
+// Imperial
+@l5r5e-imperial: rgb(120, 255, 180);
+// Ronin
+@l5r5e-ronin: rgb(97, 32, 1);
+
+// Bushi
+@l5r5e-bushi: rgb(165, 90, 90);
+// Courtier
+@l5r5e-courtier: rgb(105, 130, 165);
+// Shugenja
+@l5r5e-shugenja: rgb(90, 165, 130);
+
+// -- Techs
+// Invocations
+@l5r5e-invocations: rgb(255, 100, 0);
+// Kata
+@l5r5e-kata: rgb(255, 0, 0);
+// Kiho
+@l5r5e-kiho: rgb(0, 150, 50);
+// Maho
+@l5r5e-maho: rgb(200, 50, 0);
+// Ninjitsu
+@l5r5e-ninjitsu: rgb(52, 52, 52);
+// Prerequisite
+@l5r5e-prerequisite: rgb(52, 52, 52);
+// Rituals
+@l5r5e-rituals: rgb(0, 150, 255);
+// Shuji
+@l5r5e-shuji: rgb(0, 255, 150);
+// Inversion
+@l5r5e-inversion: rgb(75, 70, 65);
+//Mantra
+@l5r5e-mantra: rgb(255, 170, 0);
+

less/icons.less

@@ -0,0 +1,225 @@
+/** Fonts **/
+
+// Font Logotype L5R
+@font-face {
+    font-family: "LogotypeL5r";
+    src: url("assets/fonts/LogotypeL5r.ttf") format("truetype");
+}
+
+@font-logoType: "LogotypeL5r", sans-serif;
+
+i.i_strife,
+i.i_success,
+i.i_explosive,
+i.i_opportunity,
+i.i_earth,
+i.i_water,
+i.i_fire,
+i.i_air,
+i.i_void,
+i.i_kiho,
+i.i_maho,
+i.i_ninjitsu,
+i.i_prerequisite_exemption,
+i.i_rituals,
+i.i_shuji,
+i.i_invocations,
+i.i_kata,
+i.i_inversion,
+i.i_mantra,
+i.i_imperial,
+i.i_ronin,
+i.i_crab,
+i.i_crane,
+i.i_dragon,
+i.i_lion,
+i.i_mantis,
+i.i_phoenix,
+i.i_scorpion,
+i.i_tortoise,
+i.i_unicorn,
+i.i_bushi,
+i.i_courtier,
+i.i_shugenja,
+i.i_ring,
+i.i_skill {
+    font-family: @font-logoType;
+    line-height: 1rem;
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: normal;
+    vertical-align: middle;
+    text-shadow: 0 0 0 @l5r5e-black;
+}
+
+// -- Rings
+// Earth
+i.i_earth:before {
+    content: "\E90E";
+    color: @l5r5e-earth;
+}
+// Air
+i.i_air:before {
+    content: "\E90D";
+    color: @l5r5e-air;
+}
+// Water
+i.i_water:before {
+    content: "\E90C";
+    color: @l5r5e-water;
+}
+// Fire
+i.i_fire:before {
+    content: "\E90A";
+    color: @l5r5e-fire;
+}
+// Void
+i.i_void:before {
+    content: "\E90B";
+    color: @l5r5e-void;
+}
+
+// -- Techs
+// Invocations
+i.i_invocations:before {
+    content: "\E906";
+    color: @l5r5e-invocations;
+}
+// Kata
+i.i_kata:before {
+    content: "\E907";
+    color: @l5r5e-kata;
+}
+// Kiho
+i.i_kiho:before {
+    content: "\E900";
+    color: @l5r5e-kiho;
+}
+// Maho
+i.i_maho:before {
+    content: "\E901";
+    color: @l5r5e-maho;
+}
+// Ninjitsu
+i.i_ninjitsu:before {
+    content: "\E902";
+    color: @l5r5e-ninjitsu;
+}
+// Prerequisite
+i.i_prerequisite_exemption:before {
+    content: "\E903";
+    color: @l5r5e-prerequisite;
+}
+// Rituals
+i.i_rituals:before {
+    content: "\E904";
+    color: @l5r5e-rituals;
+}
+// Shuji
+i.i_shuji:before {
+    content: "\E905";
+    color: @l5r5e-shuji;
+}
+// Inversion
+i.i_inversion:before {
+    content: "\E908";
+    color: @l5r5e-inversion;
+}
+// Mantra
+i.i_mantra:before {
+    content: "\E909";
+    color: @l5r5e-mantra;
+}
+
+// -- Clans
+// Crab
+i.i_crab:before {
+    content: "\E916";
+    color: @l5r5e-crab;
+}
+// Crane
+i.i_crane:before {
+    content: "\E917";
+    color: @l5r5e-crane;
+}
+// Dragon
+i.i_dragon:before {
+    content: "\E918";
+    color: @l5r5e-dragon;
+}
+// Lion
+i.i_lion:before {
+    content: "\E910";
+    color: @l5r5e-lion;
+}
+// Mantis
+i.i_mantis:before {
+    content: "\E911";
+    color: @l5r5e-mantis;
+}
+// Phoenix
+i.i_phoenix:before {
+    content: "\E912";
+    color: @l5r5e-phoenix;
+}
+// Scorpion
+i.i_scorpion:before {
+    content: "\E913";
+    color: @l5r5e-scorpion;
+}
+// Tortoise
+i.i_tortoise:before {
+    content: "\E914";
+    color: @l5r5e-tortoise;
+}
+// Unicorn
+i.i_unicorn:before {
+    content: "\E915";
+    color: @l5r5e-unicorn;
+}
+// Imperial
+i.i_imperial:before {
+    content: "\E90F";
+    color: @l5r5e-imperial;
+}
+// Ronin
+i.i_ronin:before {
+    content: "\E919";
+    color: @l5r5e-ronin;
+}
+
+// -- Titles
+// Bushi
+i.i_bushi:before {
+    content: "\E91A";
+    color: @l5r5e-bushi;
+}
+// Courtier
+i.i_courtier:before {
+    content: "\E91B";
+    color: @l5r5e-courtier;
+}
+// Shugenja
+i.i_shugenja:before {
+    content: "\E91C";
+    color: @l5r5e-shugenja;
+}
+
+// Ring
+i.i_ring {
+    content: "";
+    background: transparent url("../assets/dices/default/ring_blank.svg") no-repeat 0 center;
+    background-size: 1rem;
+    display: inline-block;
+    height: 1rem;
+    width: 1rem;
+}
+// Skill
+i.i_skill {
+    content: "";
+    background: transparent url("../assets/dices/default/skill_blank.svg") no-repeat 0 0;
+    background-size: 1rem;
+    display: inline-block;
+    height: 1rem;
+    width: 1rem;
+}

less/l5r4.less

@@ -14,6 +14,7 @@
 @import "./npc-stats.less";
 @import "./limited-pc-sheet.less";
 @import "./global.less";
+@import "./icons.less";
 
 @import "./pc-sheet-style.less";
 @import "./npc-sheet-style.less";

less/pc-sheet.less

@@ -7,7 +7,7 @@
   .main-sheet{
     width: 100%;
     display: grid;
-    grid-template-columns: 1fr min-content;
+    grid-template-columns: 3fr 1fr;
     column-gap: 5px;
 
     .main-stats{
@@ -15,6 +15,7 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+      padding: 1em;
     }
 
     .sidebar {
@@ -22,12 +23,18 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+      padding: 1em;
     }
 
     .actor-img {
       width: 256px;
       border: none;
       border-radius: 8px;
+      margin-bottom: 2em;
+    }
+
+    .panelBorder:not(:last-of-type) {
+      margin-bottom: 2em;
     }
 
     input {

less/pc-stats.less

@@ -2,6 +2,14 @@
   display: flex;
   flex-direction: column;
 
+  .ring {
+    width: 128px;
+    height: 128px;
+    font-size: 128px;
+    line-height: 128px;
+    display: block;
+  }
+
   .misc{
     height: 100%;
   }
@@ -12,8 +20,17 @@
   .pc-info{
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     justify-content: space-evenly;
     padding: 1em;
+
+    h3{
+      margin-bottom: 0;
+    }
+
+    label{
+      margin-bottom: 1em;
+    }
   }
 
   .traits-rings{

templates/partials/pc-honor-and-combat.hbs

@@ -1,69 +1,69 @@
-<section class="ranks">
-  <div class="rank-name">
-    {{localize "l5r4.ranks.honorRank"}}
-    <input name="data.honor.rank" type="number" value="{{data.honor.rank}}" data-type="Number" />
-  </div>
-  <div class="rank-name">
-    {{localize "l5r4.ranks.honorPoints"}}
-    <input name="data.honor.points" type="number" value="{{data.honor.points}}" data-type="Number" />
-  </div>
-  <div class="rank-name">
-    {{localize "l5r4.ranks.gloryRank"}}
-    <input name="data.glory.rank" type="number" value="{{data.glory.rank}}" data-type="Number" />
-  </div>
-  <div class="rank-name">
-    {{localize "l5r4.ranks.gloryPoints"}}
-    <input name="data.glory.points" type="number" value="{{data.glory.points}}" data-type="Number" />
-  </div>
-  <div class="rank-name">
-    {{localize "l5r4.ranks.statusRank"}}
-    <input name="data.status.rank" type="number" value="{{data.status.rank}}" data-type="Number" />
-  </div>
-  <div class="rank-name">
-    {{localize "l5r4.ranks.statusPoints"}}
-    <input name="data.status.points" type="number" value="{{data.status.points}}" data-type="Number" />
-  </div>
-  <div class="rank-name">
-    {{localize "l5r4.ranks.shadowRank"}}
-    <input name="data.shadow_taint.rank" type="number" value="{{data.shadow_taint.rank}}" data-type="Number" />
-  </div>
-  <div class="rank-name">
-    {{localize "l5r4.ranks.shadowPoints"}}
-    <input name="data.shadow_taint.points" type="number" value="{{data.shadow_taint.points}}" data-type="Number" />
-  </div>
-</section>
-<section class="combat-stats">
-  <label>
-    <div>
-      <table class="initiative-table" align="center">
-        <tr>
-          <th colspan="3"> {{localize "l5r4.mech.init"}} </th>
-        </tr>
-        <tr>
-          <td>{{localize "l5r4.ranks.insightRank"}}+{{localize "l5r4.traits.ref"}}</td>
-          <td colspan="2"><input type="text" disabled="true" name="data.initiative.roll"
-              value="{{data.insight.rank}}+{{data.traits.ref}}" data-type="String" />
-            <br />
-          </td>
-        <tr>
-        <tr>
-          <td>{{localize "l5r4.mech.roll"}}/{{localize "l5r4.mech.keep"}} {{localize "l5r4.mech.bonus"}}</td>
-          <td><input type="number" name="data.initiative.roll_mod" value="{{data.initiative.roll_mod}}"
-              data-type="Number" /></td>
-          <td><input type="number" name="data.initiative.keep_mod" value="{{data.initiative.keep_mod}}"
-              data-type="Number" /></td>
-        </tr>
-        <tr>
-          <td>{{localize "l5r4.mech.mod"}}</td>
-          <td colspan="2"><input type="number" name="data.initiative.total_mod" value="{{data.initiative.total_mod}}"
-              data-type="Number" /></td>
-        </tr>
-        <tr>
-          <td colspan="3">{{data.initiative.roll}}k{{data.initiative.keep}}+{{data.initiative.total_mod}}</td>
-          </td>
-        </tr>
-      </table>
-      {{> "systems/l5r4/templates/partials/pc-armor-tn.hbs"}}
+<section class="ranks panelBorder">
+    <div class="rank-name">
+        {{localize "l5r4.ranks.honorRank"}}
+        <input name="data.honor.rank" type="number" value="{{data.honor.rank}}" data-type="Number" />
+    </div>
+    <div class="rank-name">
+        {{localize "l5r4.ranks.honorPoints"}}
+        <input name="data.honor.points" type="number" value="{{data.honor.points}}" data-type="Number" />
+    </div>
+    <div class="rank-name">
+        {{localize "l5r4.ranks.gloryRank"}}
+        <input name="data.glory.rank" type="number" value="{{data.glory.rank}}" data-type="Number" />
+    </div>
+    <div class="rank-name">
+        {{localize "l5r4.ranks.gloryPoints"}}
+        <input name="data.glory.points" type="number" value="{{data.glory.points}}" data-type="Number" />
+    </div>
+    <div class="rank-name">
+        {{localize "l5r4.ranks.statusRank"}}
+        <input name="data.status.rank" type="number" value="{{data.status.rank}}" data-type="Number" />
     </div>
-  </label>
+    <div class="rank-name">
+        {{localize "l5r4.ranks.statusPoints"}}
+        <input name="data.status.points" type="number" value="{{data.status.points}}" data-type="Number" />
+    </div>
+    <div class="rank-name">
+        {{localize "l5r4.ranks.shadowRank"}}
+        <input name="data.shadow_taint.rank" type="number" value="{{data.shadow_taint.rank}}" data-type="Number" />
+    </div>
+    <div class="rank-name">
+        {{localize "l5r4.ranks.shadowPoints"}}
+        <input name="data.shadow_taint.points" type="number" value="{{data.shadow_taint.points}}" data-type="Number" />
+    </div>
+</section>
+<section class="combat-stats panelBorder">
+    <label>
+        <div>
+            <table class="initiative-table" align="center">
+                <tr>
+                    <th colspan="3"> {{localize "l5r4.mech.init"}} </th>
+                </tr>
+                <tr>
+                    <td>{{localize "l5r4.ranks.insightRank"}}+{{localize "l5r4.traits.ref"}}</td>
+                    <td colspan="2"><input type="text" disabled="true" name="data.initiative.roll"
+                            value="{{data.insight.rank}}+{{data.traits.ref}}" data-type="String" />
+                        <br />
+                    </td>
+                <tr>
+                <tr>
+                    <td>{{localize "l5r4.mech.roll"}}/{{localize "l5r4.mech.keep"}} {{localize "l5r4.mech.bonus"}}</td>
+                    <td><input type="number" name="data.initiative.roll_mod" value="{{data.initiative.roll_mod}}"
+                            data-type="Number" /></td>
+                    <td><input type="number" name="data.initiative.keep_mod" value="{{data.initiative.keep_mod}}"
+                            data-type="Number" /></td>
+                </tr>
+                <tr>
+                    <td>{{localize "l5r4.mech.mod"}}</td>
+                    <td colspan="2"><input type="number" name="data.initiative.total_mod"
+                            value="{{data.initiative.total_mod}}" data-type="Number" /></td>
+                </tr>
+                <tr>
+                    <td colspan="3">{{data.initiative.roll}}k{{data.initiative.keep}}+{{data.initiative.total_mod}}</td>
+                    </td>
+                </tr>
+            </table>
+            {{> "systems/l5r4/templates/partials/pc-armor-tn.hbs"}}
+        </div>
+    </label>
 </section>

templates/partials/pc-spells-techniques.hbs

@@ -1,43 +1,52 @@
 <section class="spells techniques panelBorder">
-  <h2>
-      <div>{{localize "l5r4.sheet.techniques"}}/{{localize "l5r4.sheet.spells"}}</div>
-      <a class="item-create" data-type="spell" title="{{localize "l5r4.sheet.addTechSpell"}}">
-        <i class="fas fa-plus"></i>
-      </a>
+    <h2>
+        <div>{{localize "l5r4.sheet.techniques"}}/{{localize "l5r4.sheet.spells"}}</div>
+        <a class="item-create" data-type="spell" title="{{localize " l5r4.sheet.addTechSpell"}}">
+            <i class="fas fa-plus"></i>
+        </a>
     </h2>
-  <section class="special-list advantage-list">
-    {{#each advantages as |advantage id|}}
-    {{> "systems/l5r4/templates/partials/advantage-card.hbs" advantage inSheet=true}}
-    {{/each}}
-  </section>
-  <section class="special-list disadvantage-list">
-    {{#each disadvantages as |disadvantage id|}}
-    {{> "systems/l5r4/templates/partials/disadvantage-card.hbs" disadvantage inSheet=true}}
-    {{/each}}
-  </section>
-  <section class="special-list techniques-list">
-    {{#each techniques as |technique id|}}
-    {{> "systems/l5r4/templates/partials/technique-card.hbs" technique inSheet=true}}
-    {{/each}}
-  </section>
-  <section class="special-list masteries-list">
-    {{#each masteries as |mastery id|}}
-    {{> "systems/l5r4/templates/partials/mastery-card.hbs" mastery inSheet=true}}
-    {{/each}}
-  </section>
-  <section class="special-list spells-list">
-    {{#each spells as |spell id|}}
-    {{> "systems/l5r4/templates/partials/spell-card.hbs" spell inSheet=true}}
-    {{/each}}
-  </section>
-  <section class="special-list kata-list">
-    {{#each katas as |kata id|}}
-    {{> "systems/l5r4/templates/partials/kata-card.hbs" kata inSheet=true}}
-    {{/each}}
-  </section>
-  <section class="special-list kiho-list">
-    {{#each kihos as |kiho id|}}
-    {{> "systems/l5r4/templates/partials/kiho-card.hbs" kiho inSheet=true}}
-    {{/each}}
-  </section>
+    <section class="special-list techniques-list">
+        {{#each techniques as |technique id|}}
+        {{> "systems/l5r4/templates/partials/technique-card.hbs" technique inSheet=true}}
+        {{/each}}
+    </section>
+    <section class="special-list masteries-list">
+        {{#each masteries as |mastery id|}}
+        {{> "systems/l5r4/templates/partials/mastery-card.hbs" mastery inSheet=true}}
+        {{/each}}
+    </section>
+    <section class="special-list spells-list">
+        {{#each spells as |spell id|}}
+        {{> "systems/l5r4/templates/partials/spell-card.hbs" spell inSheet=true}}
+        {{/each}}
+    </section>
+    <section class="special-list kata-list">
+        {{#each katas as |kata id|}}
+        {{> "systems/l5r4/templates/partials/kata-card.hbs" kata inSheet=true}}
+        {{/each}}
+    </section>
+    <section class="special-list kiho-list">
+        {{#each kihos as |kiho id|}}
+        {{> "systems/l5r4/templates/partials/kiho-card.hbs" kiho inSheet=true}}
+        {{/each}}
+    </section>
+</section>
+
+<section class="panelBorder">
+    <h2>
+        <div>{{localize "l5r4.sheet.advantages"}}/{{localize "l5r4.sheet.disadvantages"}}</div>
+        <a class="item-create" data-type="spell" title="{{localize " l5r4.sheet.addTechSpell"}}">
+            <i class="fas fa-plus"></i>
+        </a>
+    </h2>
+    <section class="special-list advantage-list">
+        {{#each advantages as |advantage id|}}
+        {{> "systems/l5r4/templates/partials/advantage-card.hbs" advantage inSheet=true}}
+        {{/each}}
+    </section>
+    <section class="special-list disadvantage-list">
+        {{#each disadvantages as |disadvantage id|}}
+        {{> "systems/l5r4/templates/partials/disadvantage-card.hbs" disadvantage inSheet=true}}
+        {{/each}}
+    </section>
 </section>

templates/partials/pc-stats.hbs

@@ -1,134 +1,160 @@
 <section class="stats">
-  <label class="pc-info">
-    <div>
-      <h3 class="title">{{localize "l5r4.traits.name"}}</h3>
-      <input type="text" name="name" value="{{actor.name}}" placeholder="Name" />
-      <h3 class="title">{{localize "l5r4.ranks.insightRank"}}</h3>
-      <input type="number" name="data.insight.rank" value="{{data.insight.rank}}" data-type="Number" />
-    </div>
-    <div>
-      <h3 class="title">{{localize "l5r4.traits.clan"}}</h3>
-      <input name="data.clan" type="text" value="{{data.clan}}" />
-      <h3 class="title">{{localize "l5r4.traits.xp"}}</h3>
-      <input type="number" name="data.xp" value="{{data.xp}}" data-type="Number" />
-    </div>
-    <div>
-      <h3 class="title">{{localize "l5r4.traits.school"}}</h3>
-      <input type="text" name="data.school" value="{{data.school}}" data-type="String" />
-      <h3 class="title">{{localize "l5r4.traits.insight"}}</h3>
-      <input type="number" name="data.insight.points" value="{{data.insight.points}}" data-type="Number" />
-    </div>
-  </label>
-  <label class="traits-rings">
-    <!-- Earth ring -->
-    <h3 class="ring-name ring-name-earth">{{localize "l5r4.rings.earth"}}</h3>
-    <h3 class="ring-rank ring-rank-earth">{{data.rings.earth}}</h3>
-    <div class="earth-ring">
-      <a class="ring-roll" data-ring-rank="{{data.rings.earth}}" data-ring-name="{{localize "l5r4.rings.earth"}}">
-        <img src="systems/l5r4/assets/icons/earth.png" width="128px" height="128px" title="{{localize "l5r4.mech.ringRoll"}}"
-          class="earth-ring-img" />
-      </a>
-    </div>
-    <div class="trait trait-stamina">
-      <a class="trait-roll" data-trait-rank="{{data.traits.sta}}" data-trait-name="{{localize "l5r4.traits.sta"}}">
-        <p title="{{localize "l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.sta"}}</p>
-      </a>
-      <input class="trait-rank" type="number" value='{{data.traits.sta}}' name="data.traits.sta" data-type="Number" />
-    </div>
-    <div class="trait trait-willpower">
-      <a class="trait-roll" data-trait-rank="{{data.traits.wil}}" data-trait-name="{{localize "l5r4.traits.wil"}}">
-        <p title="{{localize "l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.wil"}}</p>
-      </a>
-      <input class="trait-rank" type="number" value='{{data.traits.wil}}' name="data.traits.wil" data-type="Number" />
-    </div>
+    <div class="pc-info">
+        <label>
+            <h3 class="title">{{localize "l5r4.traits.name"}}</h3>
+            <input type="text" name="name" value="{{actor.name}}" placeholder="Name" />
+        </label>
+        <label>
+            <h3 class="title">{{localize "l5r4.traits.clan"}}</h3>
+            <input name="data.clan" type="text" value="{{data.clan}}" />
+        </label>
+        <label>
+            <h3 class="title">{{localize "l5r4.traits.school"}}</h3>
+            <input type="text" name="data.school" value="{{data.school}}" data-type="String" />
+        </label>
+        <label>
+            <h3 class="title">{{localize "l5r4.ranks.insightRank"}}</h3>
+            <input type="number" name="data.insight.rank" value="{{data.insight.rank}}" data-type="Number" />
+        </label>
+        <label>
+            <h3 class="title">{{localize "l5r4.traits.xp"}}</h3>
+            <input type="number" name="data.xp" value="{{data.xp}}" data-type="Number" />
+        </label>
+        <label>
+            <h3 class="title">{{localize "l5r4.ranks.insightPoints"}}</h3>
+            <input type="number" name="data.insight.points" value="{{data.insight.points}}" data-type="Number" />
+        </label>
+    </div>
+    <label class="traits-rings">
+        <!-- Earth ring -->
+        <h3 class="ring-name ring-name-earth">{{localize "l5r4.rings.earth"}}</h3>
+        <h3 class="ring-rank ring-rank-earth">{{data.rings.earth}}</h3>
+        <div class="earth-ring">
+            <a class="ring-roll" data-ring-rank="{{data.rings.earth}}" data-ring-name="{{localize "
+                l5r4.rings.earth"}}">
+                <i class="i_earth ring"></i>
+            </a>
+        </div>
+        <div class="trait trait-stamina">
+            <a class="trait-roll" data-trait-rank="{{data.traits.sta}}" data-trait-name="{{localize "
+                l5r4.traits.sta"}}">
+                <p title="{{localize " l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.sta"}}</p>
+            </a>
+            <input class="trait-rank" type="number" value='{{data.traits.sta}}' name="data.traits.sta"
+                data-type="Number" />
+        </div>
+        <div class="trait trait-willpower">
+            <a class="trait-roll" data-trait-rank="{{data.traits.wil}}" data-trait-name="{{localize "
+                l5r4.traits.wil"}}">
+                <p title="{{localize " l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.wil"}}</p>
+            </a>
+            <input class="trait-rank" type="number" value='{{data.traits.wil}}' name="data.traits.wil"
+                data-type="Number" />
+        </div>
 
-    <!-- Air ring -->
-    <h3 class="ring-name ring-name-air">{{localize "l5r4.rings.air"}}</h3>
-    <h3 class="ring-rank ring-rank-air">{{data.rings.air}}</h3>
-    <div class="air-ring">
-      <a class="ring-roll" data-ring-rank="{{data.rings.air}}" data-ring-name="{{localize "l5r4.rings.air"}}">
-        <img src="systems/l5r4/assets/icons/air.png" width="128px" height="128px" title="{{localize "l5r4.mech.ringRoll"}}" class="air-ring-img" />
-      </a>
-    </div>
-    <div class="trait trait-reflexe">
-      <a class="trait-roll" data-trait-rank="{{data.traits.ref}}" data-trait-name="{{localize "l5r4.traits.ref"}}">
-        <p title="{{localize "l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.ref"}}</p>
-      </a>
-      <input class="trait-rank" name="data.traits.ref" type="number" value='{{data.traits.ref}}' data-type="Number" />
-    </div>
-    <div class="trait trait-awarness">
-      <a class="trait-roll" data-trait-rank="{{data.traits.awa}}" data-trait-name="{{localize "l5r4.traits.awa"}}">
-        <p title="{{localize "l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.awa"}}</p>
-      </a>
-      <input class="trait-rank" type="number" value='{{data.traits.awa}}' name="data.traits.awa" data-type="Number" />
-    </div>
+        <!-- Air ring -->
+        <h3 class="ring-name ring-name-air">{{localize "l5r4.rings.air"}}</h3>
+        <h3 class="ring-rank ring-rank-air">{{data.rings.air}}</h3>
+        <div class="air-ring">
+            <a class="ring-roll" data-ring-rank="{{data.rings.air}}" data-ring-name="{{localize " l5r4.rings.air"}}">
+                <i class="i_air ring"></i>
+            </a>
+        </div>
+        <div class="trait trait-reflexe">
+            <a class="trait-roll" data-trait-rank="{{data.traits.ref}}" data-trait-name="{{localize "
+                l5r4.traits.ref"}}">
+                <p title="{{localize " l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.ref"}}</p>
+            </a>
+            <input class="trait-rank" name="data.traits.ref" type="number" value='{{data.traits.ref}}'
+                data-type="Number" />
+        </div>
+        <div class="trait trait-awarness">
+            <a class="trait-roll" data-trait-rank="{{data.traits.awa}}" data-trait-name="{{localize "
+                l5r4.traits.awa"}}">
+                <p title="{{localize " l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.awa"}}</p>
+            </a>
+            <input class="trait-rank" type="number" value='{{data.traits.awa}}' name="data.traits.awa"
+                data-type="Number" />
+        </div>
 
-    <!-- Water ring -->
-    <h3 class="ring-name ring-name-water">{{localize "l5r4.rings.water"}}</h3>
-    <h3 class="ring-rank ring-rank-water">{{data.rings.water}}</h3>
-    <div class="water-ring">
-      <a class="ring-roll" data-ring-rank="{{data.rings.water}}" data-ring-name="{{localize "l5r4.rings.water"}}">
-        <img src="systems/l5r4/assets/icons/water.png" width="128px" height="128px" title="{{localize "l5r4.mech.ringRoll"}}"
-          class="water-ring-img" />
-      </a>
-    </div>
-    <div class="trait trait-strength">
-      <a class="trait-roll" data-trait-rank="{{data.traits.str}}" data-trait-name="{{localize "l5r4.traits.str"}}">
-        <p title="{{localize "l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.str"}}</p>
-      </a>
-      <input class="trait-rank" type="number" value='{{data.traits.str}}' name="data.traits.str" data-type="Number" />
-    </div>
-    <div class="trait trait-perception">
-      <a class="trait-roll" data-trait-rank="{{data.traits.per}}" data-trait-name="{{localize "l5r4.traits.per"}}">
-        <p title="{{localize "l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.per"}}</p>
-      </a>
-      <input class="trait-rank" type="number" value='{{data.traits.per}}' name="data.traits.per" data-type="Number" />
-    </div>
+        <!-- Water ring -->
+        <h3 class="ring-name ring-name-water">{{localize "l5r4.rings.water"}}</h3>
+        <h3 class="ring-rank ring-rank-water">{{data.rings.water}}</h3>
+        <div class="water-ring">
+            <a class="ring-roll" data-ring-rank="{{data.rings.water}}" data-ring-name="{{localize "
+                l5r4.rings.water"}}">
+                <i class="i_water ring"></i>
+            </a>
+        </div>
+        <div class="trait trait-strength">
+            <a class="trait-roll" data-trait-rank="{{data.traits.str}}" data-trait-name="{{localize "
+                l5r4.traits.str"}}">
+                <p title="{{localize " l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.str"}}</p>
+            </a>
+            <input class="trait-rank" type="number" value='{{data.traits.str}}' name="data.traits.str"
+                data-type="Number" />
+        </div>
+        <div class="trait trait-perception">
+            <a class="trait-roll" data-trait-rank="{{data.traits.per}}" data-trait-name="{{localize "
+                l5r4.traits.per"}}">
+                <p title="{{localize " l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.per"}}</p>
+            </a>
+            <input class="trait-rank" type="number" value='{{data.traits.per}}' name="data.traits.per"
+                data-type="Number" />
+        </div>
 
-    <!-- Fire ring -->
-    <h3 class="ring-name ring-name-fire">{{localize "l5r4.rings.fire"}}</h3>
-    <h3 class="ring-rank ring-rank-fire">{{data.rings.fire}}</h3>
-    <div class="fire-ring">
-      <div>
-        <a class="ring-roll" data-ring-rank="{{data.rings.fire}}" data-ring-name="{{localize "l5r4.rings.fire"}}">
-          <img src="systems/l5r4/assets/icons/fire.png" width="128px" height="128px" title="{{localize "l5r4.mech.ringRoll"}}"
-            class="fire-ring-img" />
-        </a>
-      </div>
-    </div>
-    <div class="trait trait-agility">
-      <a class="trait-roll" data-trait-rank="{{data.traits.agi}}" data-trait-name="{{localize "l5r4.traits.agi"}}">
-        <p title="{{localize "l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.agi"}}</p>
-      </a>
-      <input class="trait-rank" type="number" value='{{data.traits.agi}}' name="data.traits.agi" data-type="Number" />
-    </div>
-    <div class="trait trait-intelligence">
-      <a class="trait-roll" data-trait-rank="{{data.traits.int}}" data-trait-name="{{localize "l5r4.traits.int"}}">
-        <p title="{{localize "l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.int"}}</p>
-      </a>
-      <input class="trait-rank" type="number" value='{{data.traits.int}}' name="data.traits.int" data-type="Number" />
-    </div>
-    
-    <!-- Void ring -->
-    <h3 class="ring-name ring-name-void">{{localize "l5r4.rings.void"}}</h3>
-    <input class="ring-rank ring-rank-void" type="number" name="data.rings.void.rank" value="{{data.rings.void.rank}}" data-type="Number" />
-    <div class="void-ring">
-      <a class="ring-roll" data-ring-rank="{{data.rings.void.rank}}" data-ring-name="{{localize "l5r4.rings.void"}}">
-        <img src="systems/l5r4/assets/icons/void.png" width="128px" height="128px" title="{{localize "l5r4.mech.ringRoll"}}"
-          class="void-ring-img" />
-      </a>
-    </div>
-    <div class="void-points">
-      <p class="void-points-name">{{localize "l5r4.rings.voidPoints"}}</p>
-      <input class="void-points-amount" type="number" value='{{data.rings.void.value}}' name="data.rings.void.value" data-type="Number" />
-    </div>
-  </label>
+        <!-- Fire ring -->
+        <h3 class="ring-name ring-name-fire">{{localize "l5r4.rings.fire"}}</h3>
+        <h3 class="ring-rank ring-rank-fire">{{data.rings.fire}}</h3>
+        <div class="fire-ring">
+            <div>
+                <a class="ring-roll" data-ring-rank="{{data.rings.fire}}" data-ring-name="{{localize "
+                    l5r4.rings.fire"}}">
+                <i class="i_fire ring"></i>
+                </a>
+            </div>
+        </div>
+        <div class="trait trait-agility">
+            <a class="trait-roll" data-trait-rank="{{data.traits.agi}}" data-trait-name="{{localize "
+                l5r4.traits.agi"}}">
+                <p title="{{localize " l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.agi"}}</p>
+            </a>
+            <input class="trait-rank" type="number" value='{{data.traits.agi}}' name="data.traits.agi"
+                data-type="Number" />
+        </div>
+        <div class="trait trait-intelligence">
+            <a class="trait-roll" data-trait-rank="{{data.traits.int}}" data-trait-name="{{localize "
+                l5r4.traits.int"}}">
+                <p title="{{localize " l5r4.mech.traitRoll"}}">{{localize "l5r4.traits.int"}}</p>
+            </a>
+            <input class="trait-rank" type="number" value='{{data.traits.int}}' name="data.traits.int"
+                data-type="Number" />
+        </div>
+
+        <!-- Void ring -->
+        <h3 class="ring-name ring-name-void">{{localize "l5r4.rings.void"}}</h3>
+        <input class="ring-rank ring-rank-void" type="number" name="data.rings.void.rank"
+            value="{{data.rings.void.rank}}" data-type="Number" />
+        <div class="void-ring">
+            <a class="ring-roll" data-ring-rank="{{data.rings.void.rank}}" data-ring-name="{{localize "
+                l5r4.rings.void"}}">
+                <i class="i_void ring"></i>
+            </a>
+        </div>
+        <div class="void-points">
+            <p class="void-points-name">{{localize "l5r4.rings.voidPoints"}}</p>
+            <input class="void-points-amount" type="number" value='{{data.rings.void.value}}'
+                name="data.rings.void.value" data-type="Number" />
+        </div>
+    </label>
+
+    {{> "systems/l5r4/templates/partials/pc-skills.hbs"}}
+    {{> "systems/l5r4/templates/partials/pc-equipment.hbs"}}
+    {{> "systems/l5r4/templates/partials/pc-spells-techniques.hbs"}}
+
+    <section class="panelBorder">
+        <h2>{{localize "l5r4.sheet.notes"}}</h2>
+        {{editor content=data.notes target="data.notes" button=true owner=owner editable=true}}
+    </section>
 
-  {{> "systems/l5r4/templates/partials/pc-skills.hbs"}}
-  {{> "systems/l5r4/templates/partials/pc-equipment.hbs"}}
-  {{> "systems/l5r4/templates/partials/pc-spells-techniques.hbs"}}
-  <h2>{{localize "l5r4.sheet.notes"}}</h2>
-  
-    {{editor content=data.notes target="data.notes" button=true owner=owner editable=true}}
-  
 </section>