Add css trick border + Style for equiped and review for npc input.

system/lang/fr-fr.json

@@ -163,7 +163,7 @@
         "notes": "Notes",
         "inventory": "Inventaire",
         "money": {
-            "title": "Fortune personnelle",
+            "title": "Fortune",
             "koku": "Koku",
             "bu": "Bu",
             "zeni": "Zeni"

system/styles/scss/cursors.scss

@@ -47,11 +47,13 @@ form .form-group .form-fields button,
 .dialog .dialog-buttons button,
 .item-edit,
 .item-delete,
+.item-equip,
 .technique-edit,
 .technique-delete,
 .peculiarity-edit,
 .peculiarity-delete,
 .attribute-dtype,
+.equip-readied-control,
 form button,
 label {
     cursor: url("../assets/cursors/pointer.webp"), pointer !important;

system/styles/scss/global.scss

@@ -188,7 +188,7 @@ fieldset {
     flex: 1;
     display: flex;
     margin: 0 0.25rem;
-    padding: 0.25rem 0.5rem;
+    padding: 0.5rem;
     border: 1px solid $l5r5e-title;
     legend {
         color: $l5r5e-label;
@@ -203,16 +203,21 @@ input[type="text"],
 input[type="number"],
 input[type="password"],
 input[type="date"],
-input[type="time"] {
+input[type="time"],
-    text-align: center;
+textarea {
     padding: 0.25rem;
     background: $l5r5e-white;
     border: 1px solid $l5r5e-title;
     color: $l5r5e-bold;
+    resize: vertical;
+    border-radius: 0;
     &[disabled] {
         background: $l5r5e-white-light;
     }
 }
+input[type="number"] {
+    text-align: center;
+}
 
 // Editors
 .editor,

system/styles/scss/items.scss

@@ -19,6 +19,7 @@
             }
             .item-edit,
             .item-delete,
+            .item-equip,
             .technique-edit,
             .technique-delete,
             .peculiarity-edit,
@@ -29,6 +30,7 @@
                 font-size: 0.75rem;
                 flex: 0 0 1rem;
                 padding: 0 0.1rem;
+                color: $black-light;
             }
             .icon-stat-container {
                 line-height: 1rem;
@@ -38,6 +40,7 @@
             }
             .item-edit,
             .item-delete,
+            .item-equip,
             .technique-edit,
             .technique-delete,
             .peculiarity-edit,
@@ -46,6 +49,7 @@
             .property-delete {
                 &:hover {
                     text-shadow: 0 0 3px $red;
+                    color: $black;
                 }
             }
         }
@@ -68,6 +72,12 @@
                     margin-right: 0;
                 }
             }
+            .equip-readied-control {
+                &:hover {
+                    color: $l5r5e-red;
+                    background: $white;
+                }
+            }
         }
         p {
             font-size: 0.85rem;

system/styles/scss/npc.scss

@@ -96,6 +96,7 @@
         width: 100%;
         line-height: 2rem;
         font-size: 0.75rem;
+        margin: 0.25rem 0.25rem 0.5rem;
         text-align: center;
         li {
             flex: 1;
@@ -144,6 +145,12 @@
             flex: 0 0 calc(100% - 0.5rem);
             margin: 1rem 0.25rem 0;
         }
+        .initiative-wrapper {
+            margin-bottom: 0.5rem;
+        }
+        &:last-child {
+            padding-bottom: 1rem;
+        }
     }
     .npc-note {
         .editor {

system/styles/scss/sheets.scss

@@ -34,12 +34,6 @@
             line-height: 2rem;
             font-size: 1rem;
         }
-        .compromised {
-            input {
-                border: 1px solid $l5r5e-red;
-                box-shadow: 0 1px 5px $l5r5e-red;
-            }
-        }
     }
     form {
         display: flex;
@@ -107,6 +101,12 @@
                 0% calc(100% - var(--notchSize))
             );
         }
+        .compromised {
+            input {
+                border: 1px solid $l5r5e-red;
+                box-shadow: 0 1px 5px $l5r5e-red;
+            }
+        }
         .header-fields {
             position: relative;
             flex: 0 0 100%;
@@ -293,23 +293,20 @@
             }
             label {
                 flex-direction: row;
+                width: 100%;
                 strong {
                     text-align: right;
                 }
                 &:nth-child(2) {
-                    position: relative;
-                    flex: 50%;
-                    right: 1.5rem;
                     strong {
                         position: absolute;
                         top: 0;
                         left: 0;
                         font-size: 0.65rem;
                         width: 3rem;
-                        color: $l5r5e-black;
+                        color: $l5r5e-black-light;
                     }
                     input {
-                        border-top: 0 none;
                         font-size: 1.25rem;
                         padding-top: 0.75rem;
                     }
@@ -317,12 +314,20 @@
             }
             .endurance-content,
             .composure-content {
-                input {
+                label:nth-child(1) {
-                    &[disabled] {
+                    strong {
-                        flex: 0 0 5rem;
+                        flex: 0 0 calc(100% - 6rem);
+                    }
+                    input {
+                        flex: 0 0 5.5rem;
                         padding-right: 3rem;
                     }
                 }
+                label:nth-child(2) {
+                    position: absolute;
+                    right: 0;
+                    width: 3.5rem;
+                }
             }
             .void-content {
                 display: flex;
@@ -396,6 +401,66 @@
                 }
             }
         }
+        .attribute-label {
+            position: relative;
+            &:before {
+                z-index: -1;
+                content: "";
+                position: absolute;
+                height: calc(100% - 0.85rem);
+                width: 3.1rem;
+                border: 1px solid $l5r5e-title;
+                border-radius: 0;
+                top: 0.15rem;
+                left: 0.15rem;
+            }
+        }
+        .identity-content {
+            .attribute-label {
+                &:before {
+                    height: calc(100% - 0.6rem);
+                    width: calc(100% - 0.65rem);
+                    left: auto;
+                    top: 0.15rem;
+                    right: 0.85rem;
+                }
+            }
+            li:nth-child(3),
+            li:nth-child(5) {
+                .attribute-label {
+                    &:before {
+                        height: calc(100% - 0.6rem);
+                        width: calc(100% + 0.25rem);
+                        left: auto;
+                        top: 0.15rem;
+                        right: -0.15rem;
+                    }
+                }
+            }
+        }
+        .attributes-wrapper {
+            .attribute-label {
+                &:nth-child(2) {
+                    &:before {
+                        left: auto;
+                        right: 2.65rem;
+                    }
+                }
+                &:before {
+                    left: auto;
+                    right: 0.15rem;
+                }
+            }
+        }
+        .void-content {
+            .attribute-label {
+                &:before {
+                    left: auto;
+                    right: 1.85rem;
+                    width: 2.9rem;
+                }
+            }
+        }
     }
     article {
         background: $l5r5e-white;
@@ -457,7 +522,9 @@
             }
         }
         .stances-content {
-            flex: 0 0 100%;
+            flex: 100%;
+            height: 100%;
+            align-self: flex-start;
             .item-list {
                 position: relative;
                 padding-top: 2rem;
@@ -510,7 +577,7 @@
     }
     .xp,
     .money-wrapper {
-        flex: 0 0 5rem;
+        flex: 0 0 6rem;
         flex-direction: column;
         color: $black-light;
         label {
@@ -575,9 +642,11 @@
     &.npc {
         .initiative {
             &-wrapper {
-                display: block;
                 flex: 100%;
+                height: 100%;
+                align-self: flex-start;
                 text-align: center;
+                display: block;
             }
             button {
                 width: 22%;

system/styles/scss/twentyquestions.scss

@@ -60,8 +60,6 @@
     article {
         padding: 2% 2% 2% 18%;
         label {
-            font-size: 0.85rem;
-            line-height: 2rem;
             &.full {
                 display: block;
                 width: 100%;
@@ -79,6 +77,10 @@
         > label {
             font-size: 1rem;
             padding: 0 0 0 1rem;
+            line-height: 2rem;
+            > * {
+                line-height: 1rem;
+            }
         }
         table {
             width: 100%;

system/templates/actors/character/narrative.html

@@ -2,13 +2,13 @@
     <fieldset>
         <legend class="text-block-header">{{ localize 'l5r5e.social.title' }}</legend>
         <label class="attribute-label">{{ localize 'l5r5e.social.ninjo' }}
-            <input type="text" name="data.social.ninjo" value="{{data.social.ninjo}}"/>
+            <textarea type="text" name="data.social.ninjo" value="{{data.social.ninjo}}"></textarea>
         </label>
         <label class="attribute-label">{{ localize 'l5r5e.social.giri' }}
-            <input type="text" name="data.social.giri" value="{{data.social.giri}}"/>
+            <textarea type="text" name="data.social.giri" value="{{data.social.giri}}"></textarea>
         </label>
         <label class="attribute-label">{{ localize 'l5r5e.social.titles' }}
-            <input type="text" name="data.social.titles" value="{{data.social.titles}}"/>
+            <input type="text" name="data.social.titles" value="{{data.social.titles}}" />
         </label>
     </fieldset>
     <fieldset>

system/templates/actors/character/rings.html

@@ -1,34 +1,34 @@
 <ul class="rings">
     <li id="earth">
-        <label class="attribute-label earth centered-input">
+        <label class="earth">
             <i class="i_earth"></i>
             <strong>{{ localizeRing 'earth' }}</strong>
             <input class="centered-input select-on-focus" type="number" name="data.rings.earth" value="{{data.rings.earth}}" data-dtype="Number" min="1" max="9" placeholder="0"/>
         </label>
     </li>
     <li id="air">
-        <label class="attribute-label air centered-input">
+        <label class="air">
             <i class="i_air"></i>
             <strong>{{ localizeRing 'air' }}</strong>
             <input class="centered-input select-on-focus" type="number" name="data.rings.air" value="{{data.rings.air}}" data-dtype="Number" min="1" max="9" placeholder="0"/>
         </label>
     </li>
     <li  id="water">
-        <label class="attribute-label water centered-input">
+        <label class="water">
             <i class="i_water"></i>
             <strong>{{ localizeRing 'water' }}</strong>
             <input class="centered-input select-on-focus" type="number" name="data.rings.water" value="{{data.rings.water}}" data-dtype="Number" min="1" max="9" placeholder="0"/>
         </label>
     </li>
     <li id="fire">
-        <label class="attribute-label fire centered-input">
+        <label class="fire">
             <i class="i_fire"></i>
             <strong>{{ localizeRing 'fire' }}</strong>
             <input class="centered-input select-on-focus" type="number" name="data.rings.fire" value="{{data.rings.fire}}" data-dtype="Number" min="1" max="9" placeholder="0"/>
         </label>
     </li>
     <li id="void">
-        <label class="attribute-label void centered-input">
+        <label class="void">
             <i class="i_void"></i>
             <strong>{{ localizeRing 'void' }}</strong>
             <input class="centered-input select-on-focus" type="number" name="data.rings.void" value="{{data.rings.void}}" data-dtype="Number" min="1" max="9" placeholder="0"/>

system/templates/items/item/item-entry.html

@@ -3,7 +3,7 @@
         <li class="item-img"><img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/></li>
         <li class="item-name">{{ item.name }} <sub>x{{ item.data.quantity }}</sub></li>
         {{#if editable}}
-            <li data-item-id="{{item._id}}" data-type="equipped" class="item-equip equip-readied-control" title="{{localize 'l5r5e.armors.equipped'}}"><i class="fas {{#if item.data.equipped}}fa-tshirt{{else}}fa-suitcase{{/if}}"></i></li>
+            <li data-item-id="{{item._id}}" data-type="equipped" class="item-equip equip-readied-control" title="{{localize 'l5r5e.armors.equipped'}}"><i class="fas {{#if item.data.equipped}}fa-hiking{{else}}fa-weight-hanging{{/if}}"></i></li>
             <li data-item-id="{{item._id}}" class="item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
             <li data-item-id="{{item._id}}" class="item-delete" title="{{localize 'l5r5e.global.delete'}}"><i class="fas fa-trash"></i></li>
         {{/if}}

system/templates/items/weapon/weapon-entry.html

@@ -14,7 +14,7 @@
     </ul>
     <ul class="item-properties">
         <li class="equip-readied-control" data-item-id="{{item._id}}" data-type="readied">
-            <i class="i_readied fa{{^if item.data.readied}}r{{/if}} fa-hand-rock" title="{{#if item.data.readied}}{{localize 'l5r5e.weapons.readied'}}{{else}}{{localize 'l5r5e.weapons.sheathed'}}{{/if}}"></i>
+            <i class="i_readied fa{{^if item.data.readied}}r{{/if}} fa-check-circle" title="{{#if item.data.readied}}{{localize 'l5r5e.weapons.readied'}}{{else}}{{localize 'l5r5e.weapons.sheathed'}}{{/if}}"></i>
         </li>
         {{#each item.data.properties as |property id|}}
             <li>{{{ property.name }}}</li>