Create first design of the ring + bg sheet + add icons and update item

system/scripts/items/feat-sheet.js

@@ -1,15 +1,15 @@
-import { L5RItemSheet } from "./item-sheet.js";
+import { ItemSheetL5r5e } from "./item-sheet.js";
 
 /**
 * @extends {ItemSheet}
 */
-export class L5RFeatSheet extends L5RItemSheet {
+export class FeatSheetL5r5e extends ItemSheetL5r5e {
     
     /** @override */
     static get defaultOptions() {
         return mergeObject(super.defaultOptions, {
             classes: ["l5r", "sheet", "feat"],
-            template: "systems/l5r/templates/item/feat-sheet.html",
+            template: "systems/l5r5e/templates/item/feat-sheet.html",
             width: 520,
             height: 480,
             tabs: [{navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "description"}]

system/scripts/items/item-sheet.js

@@ -2,13 +2,13 @@
 * Extend the basic ItemSheet with some very simple modifications
 * @extends {ItemSheet}
 */
-export class L5RItemSheet extends ItemSheet {
+export class ItemSheetL5r5e extends ItemSheet {
     
     /** @override */
     static get defaultOptions() {
         return mergeObject(super.defaultOptions, {
             classes: ["l5r", "sheet", "item"],
-            template: "systems/l5r/templates/item/item-sheet.html",
+            template: "systems/l5r5e/templates/item/item-sheet.html",
             width: 520,
             height: 480,
             tabs: [{navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "description"}]

system/scripts/items/item.js

@@ -1,4 +1,4 @@
 
-export class L5RItem extends Item {
+export class ItemL5r5e extends Item {
 
 }

system/scripts/items/weapon-sheet.js

@@ -1,15 +1,15 @@
-import { L5RItemSheet } from "./item-sheet.js";
+import { ItemSheetL5r5e } from "./item-sheet.js";
 
 /**
 * @extends {ItemSheet}
 */
-export class L5RWeaponSheet extends L5RItemSheet {
+export class WeaponSheetL5r5e extends ItemSheetL5r5e {
     
     /** @override */
     static get defaultOptions() {
         return mergeObject(super.defaultOptions, {
             classes: ["l5r", "sheet", "weapon"],
-            template: "systems/l5r/templates/item/weapon-sheet.html",
+            template: "systems/l5r5e/templates/item/weapon-sheet.html",
             width: 520,
             height: 480,
             tabs: [{navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "description"}]

system/scripts/main-l5r5e.js

@@ -3,6 +3,10 @@ import { RegisterSettings } from './settings.js';
 import { PreloadTemplates } from './preloadTemplates.js';
 import { ActorL5r5e } from "./actor-l5r5e.js";
 import { ActorSheetL5r5e } from './sheets/actor-sheet.js';
+import { ItemL5r5e } from './items/item.js';
+import { ItemSheetL5r5e } from './items/item-sheet.js';
+import { WeaponSheetL5r5e } from './items/weapon-sheet.js';
+import { FeatSheetL5r5e } from './items/feat-sheet.js';
 
 // Import Dice Types
 
@@ -15,6 +19,7 @@ Hooks.once('init', async function() {
     // Assign custom classes and constants here
     CONFIG.Actor.entityClass = ActorL5r5e;
     CONFIG.Actor.sheetClasses = ActorSheetL5r5e;
+    CONFIG.Item.entityClass = ItemL5r5e;
     
     // Register custom system settings
     RegisterSettings();
@@ -27,6 +32,12 @@ Hooks.once('init', async function() {
     Actors.unregisterSheet("core", ActorSheet);
     Actors.registerSheet("l5r5e", ActorSheetL5r5e, { types: ["character"], makeDefault: true });
     
+    // Items sheet
+    Items.unregisterSheet("core", ItemSheet);
+    Items.registerSheet("l5r5e", ItemSheetL5r5e, { types: ["item"], makeDefault: true });
+    Items.registerSheet("l5r5e", WeaponSheetL5r5e, { types: ["weapon"], makeDefault: true });
+    Items.registerSheet("l5r5e", FeatSheetL5r5e, { types: ["feat"], makeDefault: true });
+    
     Handlebars.registerHelper('localizeSkillCategory', function(skillName) {
         const key = 'L5r5e.Skills.' + skillName + '.Title';
         return game.i18n.localize(key);

system/scripts/preloadTemplates.js

@@ -2,10 +2,12 @@ export const PreloadTemplates = async function() {
 	const templatePaths = [
 		// Add paths to "systems/l5r5e/templates"
 		'systems/l5r5e/templates/sheets/actor/rings.html',
+		'systems/l5r5e/templates/sheets/actor/narrative.html',
 		'systems/l5r5e/templates/sheets/actor/identity.html',
 		'systems/l5r5e/templates/sheets/actor/category.html',
 		'systems/l5r5e/templates/sheets/actor/skill.html',
 		'systems/l5r5e/templates/sheets/actor/social.html',
+		'systems/l5r5e/templates/sheets/actor/attributes.html',
 		'systems/l5r5e/templates/sheets/actor/conflict.html',
 		'systems/l5r5e/templates/sheets/actor/stance.html',
 		'systems/l5r5e/templates/sheets/actor/feats.html',

system/styles/conf/l5r5e.scss

@@ -1,11 +1,12 @@
 /* Global */
-@import "../scss/fonts";
 @import "../scss/colors";
+@import "../scss/global";
+@import "../scss/fonts";
 @import "../scss/ui";
 @import "../scss/dices";
 
 .l5r5e {
-  @import "../scss/sheet";
+  @import "../scss/sheets";
   @import "../scss/nav";
   @import "../scss/rings";
   @import "../scss/skills";

system/styles/scss/colors.scss

@@ -1,9 +1,62 @@
-//SCSS
-// l5re5.scss
-.testing {
-  width: percentage(1/7);
-}
-// test
-.testing {
-  width: percentage(2/7);
-}
+/** Colors **/
+
+// -- Global
+$white: rgba(255, 255, 255, 0.75);
+$black: rgba(0, 0, 0, 0.75);
+$red: rgba(255, 0, 0, 0.75);
+$orange: rgba(255, 100, 0, 0.75);
+$blue: rgba(0, 0, 255, 0.75);
+$green: rgba(0, 255, 0, 0.75);
+
+// color title
+$l5r5e-title: rgb(186, 187, 177);
+// color bold
+$l5r5e-bold: rgb(118, 79, 64);
+// color red
+$l5r5e-red: rgb(150, 60, 65);
+// color white 0.5
+$l5r5e-white: rgba(255, 255, 255, 0.5);
+// color black 0.5
+$l5r5e-black: rgba(0, 0, 0, 0.5);
+
+// Earth
+$l5r5e-earth: rgb(110, 141, 107);
+// Air
+$l5r5e-air: rgb(142, 118, 140);
+// Water
+$l5r5e-water: rgb(110, 139, 145);
+// Fire
+$l5r5e-fire: rgb(146, 111, 71);
+// Void
+$l5r5e-void: rgb(77, 72, 68);
+
+// -- Clans
+
+// Crab
+$l5r5e-dragon: rgb(130, 130, 140);
+// Crane
+$l5r5e-dragon: rgb(120, 145, 145);
+// Dragon
+$l5r5e-dragon: rgb(85, 130, 110);
+// Lion
+$l5r5e-dragon: rgb(160, 140, 80);
+// Mantis
+$l5r5e-dragon: rgb(45, 85, 30);
+// Phoenix
+$l5r5e-dragon: rgb(145, 190, 175);
+// Scorpion
+$l5r5e-dragon: rgb(155, 70, 60);
+// Unicorn
+$l5r5e-dragon: rgb(120, 90, 135);
+// Spider
+$l5r5e-dragon: rgb(0, 0, 0);
+
+.Crab {}
+.Crane {}
+.Dragon {}
+.Lion {}
+.Mantis {}
+.Phoenix {}
+.Scorpion {}
+.Unicorn {}
+.Spider {}

system/styles/scss/fonts.scss

@@ -1,9 +1,42 @@
-//SCSS
-// l5re5.scss
-.testing {
-  width: percentage(1/7);
+/** Fonts **/
+
+// Font Logotype L5R
+@font-face {
+    font-family: "LogotypeL5r";
+    src: url('../fonts/LogotypeL5r.ttf') format("truetype");
 }
-// test
-.testing {
-  width: percentage(2/7);
+
+// Font BrushtipTexe
+@font-face {
+    font-family: "BrushtipTexe";
+    src: url('../fonts/BrushtipTexe.otf') format("opentype");
 }
+
+$font-primary: "Roboto", sans-serif;
+$font-secondary: "BrushtipTexe", sans-serif;
+$font-dice: "LogotypeL5r", sans-serif;
+
+h1 {
+    font: 1.5rem "BrushtipTexe";
+}
+
+i.strife, i.success, i.explosive, i.opportunity, i.d6, i.d12, 
+i.i_earth, i.i_water, i.i_fire, i.i_air, i.i_void {
+    font-family: LogotypeL5r;
+    line-height: 1rem;
+    font-style: normal;
+    font-weight: normal;
+    vertical-align:middle;
+}
+
+i.strife:before      { content: "f"; }
+i.success:before     { content: "s"; }
+i.explosive:before   { content: "e"; }
+i.opportunity:before { content: "o"; }
+i.d6:before          { content: "r"; }
+i.d12:before         { content: "k"; }
+i.i_earth:before       { content: "g"; }
+i.i_water:before       { content: "w"; }
+i.i_fire:before        { content: "i"; }
+i.i_air:before         { content: "a"; }
+i.i_void:before        { content: "v"; }

system/styles/scss/global.scss

@@ -0,0 +1,25 @@
+/** Global **/
+
+/* Windows */
+.window-app {
+    .window-content {
+        background: url("../assets/imgs/bgL5R.jpg") no-repeat;
+        background-size: cover;
+    }
+}
+
+/* Focus, Active */
+* {
+    transition-property: background, color, border-color, text-shadow, box-shadow;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
+}
+input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus {box-shadow: 0 0 6px $red;}
+.tabs .item.active {text-shadow: 0 0 10px $red;}
+
+/* lists */ 
+ul, li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}

system/styles/scss/rings.scss

@@ -1,9 +1,143 @@
-//SCSS
-// l5re5.scss
-.testing {
-  width: percentage(1/7);
+/** Rings **/
+
+.rings {
+    display: flex;
+    flex-wrap: wrap;
+    color: $white;
+    // All
+    #earth, #air, #water, #fire, #void {
+        position: relative;
+        flex: 1 1 50%;
+        text-align: center;
+
+        i.i_earth, i.i_water, i.i_fire, i.i_air, i.i_void {
+            font-size: 5rem;
+            line-height: 4.75rem;
+        }
+
+        label {
+            position: relative;
+            width: 5rem;
+            line-height: 0;
+            float: right;
+        }
+
+        input {
+            position: absolute;
+            height: 2rem;
+            width: 2rem;
+            border-radius: 100%;
+            top: 0;
+            left: 0;
+            border: 2px solid $l5r5e-title;
+            color: $white;
+            &:hover {
+                border: 2px solid $red;
+                text-shadow: 0 0 6px $red;
+                box-shadow: 0 0 6px inset $red;
+            }
+        }
+    }
+    // Earth
+    #earth {
+        float: right;
+        color: $l5r5e-earth;
+        input {
+            top: auto;
+            right: 0;
+            bottom: -1rem;
+            left: auto;
+            background: $l5r5e-earth;
+        }
+        label {
+            strong {
+                position: absolute;
+                bottom: 0.75rem;
+                left: -1.5rem;
+            }
+        }
+    }
+
+    // Air
+    #air {
+        color: $l5r5e-air;
+        input {
+            top: auto;
+            right: auto;
+            bottom: -1rem;
+            left: 0;
+            background: $l5r5e-air;
+        }
+        label {
+            float: left;
+            strong {
+                position: absolute;
+                bottom: 0.75rem;
+                right: -1rem;
+            }
+        }
+    }
+
+    // Water
+    #water {
+        float: right;
+        color: $l5r5e-water;
+        padding-right: 2rem;
+        input {
+            top: 17%;
+            right: -1.25rem;
+            bottom: auto;
+            left: auto;
+            background: $l5r5e-water;
+        }
+        label {
+            strong {
+                position: absolute;
+                bottom: -0.75rem;
+                right: 2rem;
+            }
+        }
+    }
+
+    // Fire
+    #fire {
+        color: $l5r5e-fire;
+        padding-left: 2rem;
+        input {
+            top: 17%;
+            right: auto;
+            bottom: auto;
+            left: -1.25rem;
+            background: $l5r5e-fire;
+        }
+        label {
+            float: left;
+            strong {
+                position: absolute;
+                bottom: -0.75rem;
+                right: 2rem;
+            }
+        }
+    }
+
+    // Void
+    #void {
+        top: -2rem;
+        margin: 0 calc(50% - 2.5rem);
+        color: $l5r5e-void;
+        input {
+            top: -1rem;
+            right: auto;
+            bottom: auto;
+            left: 30%;
+            background: $l5r5e-void;
+        }
+        label {
+            strong {
+                position: absolute;
+                bottom: -0.75rem;
+                left: 1.75rem;
+            }
+        }
     }
-// test
-.testing {
-  width: percentage(2/7);
 }

system/styles/scss/sheet.scss

@@ -1,9 +0,0 @@
-//SCSS
-// l5re5.scss
-.testing {
-  width: percentage(1/7);
-}
-// test
-.testing {
-  width: percentage(2/7);
-}

system/styles/scss/sheets.scss

@@ -0,0 +1,57 @@
+/** Sheets **/
+&.sheet {
+    min-width: 600px;
+    .sheet-header {
+        h1 {
+            flex: 0 0 100%;
+            input {
+                height: 3rem;
+                line-height: 1.5rem;
+                margin: 0;
+                padding: 0 0 0.5rem;
+                width: 100%;
+                border: 1px solid $l5r5e-white;
+                color: $l5r5e-red;
+            }
+        }
+        img {
+            flex: 0 0 150px;
+            height: 150px;
+            margin-right: 0.25rem;
+        }
+        .header-fields {
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .identity-wrapper {
+            flex: 0 0 calc(100% - 150px - 0.25rem);
+            .identity-content {
+                flex: 0 0 100%;
+                display: flex;
+                flex-wrap: wrap;
+                li {
+                    flex: 33%;
+                    &:nth-child(1), &:nth-child(2) {
+                        flex: 50%;
+                        margin: 0 0 0.5rem;
+                    }
+                }
+            }
+        }
+        .rings {
+            flex: 0 0 calc(50% - 0.25rem);
+            display: flex;
+            padding: 0.25rem;
+        }
+        .social-content {
+            flex: 0 0 100%;
+            display: flex;
+            padding: 0.25rem;
+        }
+        .attributes-wrapper {
+            flex: 0 0 calc(50% - 0.25rem);
+            display: flex;
+            padding: 0.25rem;
+        }
+    }
+}

system/styles/scss/ui.scss

@@ -1,9 +1,22 @@
 //SCSS
-// l5re5.scss
-.testing {
-  width: percentage(1/7);
+// sdebar
+#sidebar {
+    #sidebar-tabs {
+        flex: 0 0 1rem;
+        box-sizing: border-box;
+        margin: 0 0 0.25rem;
+        border-bottom: 1px solid $l5r5e-white;
+        box-shadow: none;
+        > .item {
+            line-height: 27px;
+            border-radius: 100%;
+            margin: 0;
+            flex: 0 0 27px;
+            height: 27px;
+            .active {
+                border: 1px solid $orange;
+                box-shadow: 0 0 6px $orange;
+            }
+        }
     }
-// test
-.testing {
-  width: percentage(2/7);
 }

system/templates/sheets/actor-sheet.html

@@ -1,10 +1,15 @@
 <form class="{{cssClass}}" autocomplete="off">
     {{!-- Sheet Header --}}
     <header class="sheet-header">
-        <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100"/>
-        <div class="header-fields">
+        <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="150" width="150"/>
+        <div class="header-fields identity-wrapper">
             <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name"/></h1>
+            {{> 'systems/l5r5e/templates/sheets/actor/identity.html' }}
+        </div>
+        <div class="header-fields">
+            {{> 'systems/l5r5e/templates/sheets/actor/social.html' }}
             {{> 'systems/l5r5e/templates/sheets/actor/rings.html' }}
+            {{> 'systems/l5r5e/templates/sheets/actor/attributes.html' }}
         </div>
     </header>
 
@@ -21,10 +26,7 @@
     <section class="sheet-body">
         {{!-- Narrative Tab --}}
         <article class="tab narrative" data-group="primary" data-tab="narrative">
-            {{> 'systems/l5r5e/templates/sheets/actor/identity.html' }}
-            {{> 'systems/l5r5e/templates/sheets/actor/social.html' }}
-            <h4 class="text-block-header">{{ localize 'L5r5e.Notes' }}</h4>
-            {{ editor content=data.notes.value target="data.notes.value" button=true editable=editable }}
+            {{> 'systems/l5r5e/templates/sheets/actor/narrative.html' }}
         </article>
 
         {{!-- Skills Tab --}}
@@ -42,7 +44,7 @@
             {{> 'systems/l5r5e/templates/sheets/actor/conflict.html' }}
         </article>
 
-        <article class="tab narrative" data-group="primary" data-tab="inventory">
+        <article class="tab inventory" data-group="primary" data-tab="inventory">
             {{> 'systems/l5r5e/templates/item/items.html' }}
         </article>
 

system/templates/sheets/actor/attributes.html

@@ -0,0 +1,52 @@
+<ul class="attributes-wrapper">
+    <li class="endurance-content">
+        <label class="attribute-label">
+            {{ localize 'L5r5e.Conflict.Endurance' }}
+            <input class="centered-input" type="text" name="data.endurance" value="{{data.endurance}}" data-dtype="Number" disabled/>
+        </label>
+        <label class="attribute-label">
+            {{ localize 'L5r5e.Conflict.Fatigue' }}
+            <input class="centered-input" type="text" name="data.fatigue" value="{{data.fatigue}}" data-dtype="Number"/>
+        </label>
+        <p class="quick-rules"> {{ localize 'L5r5e.Conflict.EnduranceTip' }}</p>
+    </li>
+    <li class="composure-content">
+        <label class="attribute-label">
+            {{ localize 'L5r5e.Conflict.Composure' }}
+            <input class="centered-input" type="text" name="data.composure" value="{{data.composure}}" data-dtype="Number" disabled/>
+        </label>
+        <label class="attribute-label">
+            {{ localize 'L5r5e.Conflict.Strife' }}
+            <input class="centered-input" type="text" name="data.strife" value="{{data.strife}}" data-dtype="Number"/>
+        </label>
+        <p class="quick-rules"> {{ localize 'L5r5e.Conflict.ComposureTip' }}</p>
+    </li>
+    <li class="focus-content">
+        <label class="attribute-label">
+            {{ localize 'L5r5e.Conflict.Focus' }}
+            <input class="centered-input" type="text" name="data.focus" value="{{data.focus}}" data-dtype="Number" disabled/>
+        </label>
+        <p class="quick-rules"> {{ localize 'L5r5e.Conflict.FocusTip' }}</p>
+    </li>
+    <li class="vigilante-content">
+        <label class="attribute-label">
+            {{ localize 'L5r5e.Conflict.Vigilante' }}
+            <input class="centered-input" type="text" name="data.vigilante" value="{{data.vigilante}}" data-dtype="Number" disabled/>
+        </label>
+        <p class="quick-rules"> {{ localize 'L5r5e.Conflict.VigilanteTip' }}</p>
+    </li>
+    <li class="void-points-content">
+        <div>
+            <label class="attribute-label">
+                {{ localize 'L5r5e.Conflict.VoidPoints' }}
+                <input class="centered-input" type="text" name="data.void_points.current" value="{{data.void_points.current}}" data-dtype="Number"/>
+            </label>
+        </div>
+        <div>
+            <label class="attribute-label">
+                {{ localize 'L5r5e.Max' }}
+                <input class="centered-input" type="text" name="data.void_points.max" value="{{data.void_points.max}}" data-dtype="Number" disabled/>
+            </label>
+        </div>
+    </li>
+</ul>

system/templates/sheets/actor/category.html

@@ -1,15 +1,15 @@
-<li class="category-wrapper category-content">
+<li class="skill-category-wrapper skill-category-content">
     <h4 class="section-header">{{ localizeSkillCategory categoryId }}</h4>
     <ul class="skill-category-skills-list">
         {{#each category as |skill id| }}
             {{> 'systems/l5r/templates/sheets/actor/skill.html' categoryId=../categoryId skill=skill skillId=id }}
         {{/each}}
     </ul>
-    <div class="skill-category-ring-actions">
-        <label name="air" class="air"><i class="i_air"></i> {{ localizeSkill categoryId 'Air' }} </label>
-        <label name="earth" class="earth"><i class="i_earth"></i> {{ localizeSkill categoryId 'Earth' }} </label>
-        <label name="fire" class="fire"><i class="i_fire"></i> {{ localizeSkill categoryId 'Fire' }} </label>
-        <label name="water" class="water"><i class="i_water"></i> {{ localizeSkill categoryId 'Water' }} </label>
-        <label name="void" class="void"><i class="i_void"></i> {{ localizeSkill categoryId 'Void' }} </label>
-    </div>
+    <ul class="skill-category-ring-actions">
+        <li name="air" class="air"><i class="i_air"></i> {{ localizeSkill categoryId 'Air' }} </li>
+        <li name="earth" class="earth"><i class="i_earth"></i> {{ localizeSkill categoryId 'Earth' }} </li>
+        <li name="fire" class="fire"><i class="i_fire"></i> {{ localizeSkill categoryId 'Fire' }} </li>
+        <li name="water" class="water"><i class="i_water"></i> {{ localizeSkill categoryId 'Water' }} </li>
+        <li name="void" class="void"><i class="i_void"></i> {{ localizeSkill categoryId 'Void' }} </li>
+    </ul>
 </li>

system/templates/sheets/actor/conflict.html

@@ -1,63 +1,5 @@
 <div class="conflict-wrapper">
     <div class="conflict-top-content">
-        <div class="conflict-stats-content">
-            <div>
-                <div class="endurance-content">
-                    <div>
-                        <label class="attribute-label">{{ localize 'L5r5e.Conflict.Endurance' }}</label>
-                        <input class="centered-input" type="text" name="data.endurance" value="{{data.endurance}}" data-dtype="Number" disabled/>
-                    </div>
-                    <div>
-                        <label class="attribute-label">{{ localize 'L5r5e.Conflict.Fatigue' }}</label>
-                        <input class="centered-input" type="text" name="data.fatigue" value="{{data.fatigue}}" data-dtype="Number"/>
-                    </div>
-                </div>
-                <p class="quick-rules"> {{ localize 'L5r5e.Conflict.EnduranceTip' }}</p>
-            </div>
-            <div>
-                <div class="composure-content">
-                    <div>
-                        <label class="attribute-label">{{ localize 'L5r5e.Conflict.Composure' }}</label>
-                        <input class="centered-input" type="text" name="data.composure" value="{{data.composure}}" data-dtype="Number" disabled/>
-                    </div>
-                    <div>
-                        <label class="attribute-label">{{ localize 'L5r5e.Conflict.Strife' }}</label>
-                        <input class="centered-input" type="text" name="data.strife" value="{{data.strife}}" data-dtype="Number"/>
-                    </div>
-                </div>
-                <p class="quick-rules"> {{ localize 'L5r5e.Conflict.ComposureTip' }}</p>
-            </div>
-            <div>
-                <div class="focus-content">
-                    <div>
-                        <label class="attribute-label">{{ localize 'L5r5e.Conflict.Focus' }}</label>
-                        <input class="centered-input" type="text" name="data.focus" value="{{data.focus}}" data-dtype="Number" disabled/>
-                    </div>
-                </div>
-                <p class="quick-rules"> {{ localize 'L5r5e.Conflict.FocusTip' }}</p>
-            </div>
-            <div>
-                <div class="vigilante-content">
-                    <div>
-                        <label class="attribute-label">{{ localize 'L5r5e.Conflict.Vigilante' }}</label>
-                        <input class="centered-input" type="text" name="data.vigilante" value="{{data.vigilante}}" data-dtype="Number" disabled/>
-                    </div>
-                </div>
-                <p class="quick-rules"> {{ localize 'L5r5e.Conflict.VigilanteTip' }}</p>
-            </div>
-            <div>
-                <div class="void-points-content">
-                    <div>
-                        <label class="attribute-label"> {{ localize 'L5r5e.Conflict.VoidPoints' }}</label>
-                        <input class="centered-input" type="text" name="data.void_points.current" value="{{data.void_points.current}}" data-dtype="Number"/>
-                    </div>
-                    <div>
-                        <label class="attribute-label"> {{ localize 'L5r5e.Max' }}</label>
-                        <input class="centered-input" type="text" name="data.void_points.max" value="{{data.void_points.max}}" data-dtype="Number" disabled/>
-                    </div>
-                </div>
-            </div>
-        </div>
         <div class="conflict-stances-content">
             <h4 class="section-header">{{ localize 'L5r5e.Conflict.Stance' }}</h4>
             {{#each data.stances as |stance stanceId|}}
@@ -67,4 +9,3 @@
         {{> 'systems/l5r5e/templates/item/weapons.html' }}
     </div>
 </div>
-</div>

system/templates/sheets/actor/identity.html

@@ -1,4 +1,4 @@
-<ul class="identity-wrapper">
+<ul class="identity-content">
     <li>
         <label class="attribute-label">{{ localize 'L5r5e.Clan' }}</label>
         <input type="text" name="data.identity.clan" value="{{data.identity.clan}}"/>

system/templates/sheets/actor/narrative.html

@@ -0,0 +1,16 @@
+<ul class="narrative-content">
+    <li>
+        <label class="attribute-label">{{ localize 'L5r5e.SocialStanding.Ninjo' }}</label>
+        <input type="text" name="data.social_standing.ninjo" value="{{data.social_standing.ninjo}}"/>
+    </li>
+    <li>
+        <label class="attribute-label">{{ localize 'L5r5e.SocialStanding.Giri' }}</label>
+        <input type="text" name="data.social_standing.giri" value="{{data.social_standing.giri}}"/>
+    </li>
+    <li>
+        <label class="attribute-label">{{ localize 'L5r5e.SocialStanding.SocialTitles' }}</label>
+        <input type="text" name="data.social_standing.titles" value="{{data.social_standing.titles}}"/>
+    </li>
+</ul>
+<h4 class="text-block-header">{{ localize 'L5r5e.Notes' }}</h4>
+{{ editor content=data.notes.value target="data.notes.value" button=true editable=editable }}

system/templates/sheets/actor/rings.html

@@ -1,22 +1,37 @@
 <ul class="rings">
     <li id="earth">
-        <label class="attribute-label earth centered-input"><i class="i_earth"></i> {{ localizeRing 'Earth' }}</label>
+        <label class="attribute-label earth centered-input">
+            <i class="i_earth"></i>
+            <strong>{{ localizeRing 'Earth' }}</strong>
             <input class="centered-input" type="text" name="data.rings.earth" value="{{data.rings.earth}}" data-dtype="Number" placeholder="0"/>
+        </label>
     </li>
     <li  id="air">
-        <label class="attribute-label air centered-input"><i class="i_air"></i> {{ localizeRing 'Air' }}</label>
+        <label class="attribute-label air centered-input">
+            <i class="i_air"></i>
+            <strong>{{ localizeRing 'Air' }}</strong>
             <input class="centered-input" type="text" name="data.rings.air" value="{{data.rings.air}}" data-dtype="Number" placeholder="0"/>
+        </label>
     </li>
     <li  id="water">
-        <label class="attribute-label water centered-input"><i class="i_water"></i> {{ localizeRing 'Water' }}</label>
+        <label class="attribute-label water centered-input">
+            <i class="i_water"></i>
+            <strong>{{ localizeRing 'Water' }}</strong>
             <input class="centered-input" type="text" name="data.rings.water" value="{{data.rings.water}}" data-dtype="Number" placeholder="0"/>
+        </label>
     </li>
     <li id="fire">
-        <label class="attribute-label fire centered-input"><i class="i_fire"></i> {{ localizeRing 'Fire' }}</label>
+        <label class="attribute-label fire centered-input">
+            <i class="i_fire"></i>
+            <strong>{{ localizeRing 'Fire' }}</strong>
             <input class="centered-input" type="text" name="data.rings.fire" value="{{data.rings.fire}}" data-dtype="Number" placeholder="0"/>
+        </label>
     </li>
     <li id="void">
-        <label class="attribute-label void centered-input"><i class="i_void"></i> {{ localizeRing 'Void' }}</label>
+        <label class="attribute-label void centered-input">
+            <i class="i_void"></i>
+            <strong>{{ localizeRing 'Void' }}</strong>
             <input class="centered-input" type="text" name="data.rings.void" value="{{data.rings.void}}" data-dtype="Number" placeholder="0"/>
+        </label>
     </li>
 </ul>

system/templates/sheets/actor/skill.html

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

system/templates/sheets/actor/social.html

@@ -1,4 +1,4 @@
-<ul class="social-wrapper">
+<ul class="social-content">
     <li>
         <label class="attribute-label centered-input">{{ localize 'L5r5e.SocialStanding.Honor' }}</label>
         <input class="centered-input" type="text" name="data.social_standing.honor" value="{{data.social_standing.honor}}" placeholder="0"/>
@@ -11,16 +11,4 @@
         <label class="attribute-label centered-input">{{ localize 'L5r5e.SocialStanding.Status' }}</label>
         <input class="centered-input" type="text" name="data.social_standing.status" value="{{data.social_standing.status}}" placeholder="0"/>
     </li>
-    <li>
-        <label class="attribute-label">{{ localize 'L5r5e.SocialStanding.Ninjo' }}</label>
-        <input type="text" name="data.social_standing.ninjo" value="{{data.social_standing.ninjo}}"/>
-    </li>
-    <li>
-        <label class="attribute-label">{{ localize 'L5r5e.SocialStanding.Giri' }}</label>
-        <input type="text" name="data.social_standing.giri" value="{{data.social_standing.giri}}"/>
-    </li>
-    <li>
-        <label class="attribute-label">{{ localize 'L5r5e.SocialStanding.SocialTitles' }}</label>
-        <input type="text" name="data.social_standing.titles" value="{{data.social_standing.titles}}"/>
-    </li>
 </ul>