Style for new dice Rnk + technique fix

system/scripts/dice/dice-picker-dialog.js

@@ -51,8 +51,6 @@ export class DicePickerDialog extends FormApplication {
             classes: ["l5r5e", "dice-picker-dialog"],
             template: CONFIG.l5r5e.paths.templates + "dice/dice-picker-dialog.html",
             title: "L5R Dice Roller",
-            width: 660,
-            height: 460,
             actor: null,
             ringId: null,
             skillId: "",

system/scripts/dice/gm-tools-dialog.js

@@ -20,8 +20,8 @@ export class GmToolsDialog extends FormApplication {
             classes: ["l5r5e", "gm-tools-dialog"],
             template: CONFIG.l5r5e.paths.templates + "dice/gm-tools-dialog.html",
             title: game.i18n.localize("l5r5e.gm_toolbox.title"),
-            left: x - 540,
+            left: x - 523,
-            top: y - 94,
+            top: y - 114,
             closeOnSubmit: false,
             submitOnClose: false,
             submitOnChange: true,

system/styles/conf/l5r5e.scss

@@ -7,7 +7,7 @@
 @import "../scss/ui";
 
 .l5r5e {
-    @import "../scss/dices";
+    @import "../scss/dices-chat";
     @import "../scss/sheets";
     @import "../scss/npc";
     @import "../scss/nav";

system/styles/scss/dices-chat.scss

@@ -0,0 +1,37 @@
+// Dice in chat
+.chat-dice {
+    &.rerolled > img {
+        border-bottom: 3px solid orangered;
+    }
+
+    &.swapped > img {
+        border-bottom: 3px solid fuchsia;
+    }
+
+    > img {
+        border: 1px solid transparent;
+        height: auto;
+        width: calc(100% / 6 - 0.255rem);
+        margin: auto;
+    }
+}
+
+.chat-profil {
+    text-align: center;
+    vertical-align: middle;
+
+    &-stance {
+        font-size: 40px;
+        position: relative;
+        top: 8px;
+        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+    }
+    &-element {
+        flex-wrap: wrap;
+        flex-grow: 1;
+
+        &-skill {
+            flex-grow: 3;
+        }
+    }
+}

system/styles/scss/dices.scss

@@ -62,44 +62,6 @@
     }
 }
 
-// Dice in chat
-.chat-dice {
-    &.rerolled > img {
-        border-bottom: 3px solid orangered;
-    }
-
-    &.swapped > img {
-        border-bottom: 3px solid fuchsia;
-    }
-
-    > img {
-        border: 1px solid transparent;
-        height: auto;
-        width: calc(100% / 6 - 0.255rem);
-        margin: auto;
-    }
-}
-
-.chat-profil {
-    text-align: center;
-    vertical-align: middle;
-
-    &-stance {
-        font-size: 40px;
-        position: relative;
-        top: 8px;
-        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-    }
-    &-element {
-        flex-wrap: wrap;
-        flex-grow: 1;
-
-        &-skill {
-            flex-grow: 3;
-        }
-    }
-}
-
 // If DicePicker add a pointer
 .dice-picker {
     cursor: url("../assets/cursors/pointer.webp"), pointer;
@@ -107,6 +69,8 @@
 
 // Dice Picker
 .dice-picker-dialog {
+    min-width: 600px;
+    min-height: auto;
     // Utility
     * {
         transition: none;
@@ -127,18 +91,24 @@
         text-align: center;
         background: none;
         border: none;
-        height: calc(100% - 3rem);
+        margin: 0;
-
+        tbody {
-        td:first-child {
+            tr {
-            width: 200px;
-        }
-
                 td {
-            width: 240px;
+                    width: 250px;
+                    padding: 0 0.5rem;
+                    &:first-child,
+                    &:last-child {
+                        width: 150px;
+                    }
+                }
+                &:last-child {
+                    td {
+                        width: 100%;
+                        padding: 0.5rem;
+                    }
+                }
             }
-
-        td:last-child {
-            width: 200px;
         }
     }
 
@@ -206,10 +176,27 @@
 }
 
 .roll-n-keep-dialog {
+    min-width: 600px;
+    &.finalized {
+        min-width: 400px;
+    }
     img {
         border: 0;
     }
 
+    table {
+        margin: 0.75rem 0 0;
+        table {
+            border: 0 none;
+            tr {
+                background: transparent;
+            }
+        }
+        .button {
+            columns: 3;
+        }
+    }
+
     .profil {
         border-bottom: 1px solid #782e22;
     }
@@ -251,6 +238,11 @@
     .swap {
         border: 3px solid fuchsia;
     }
+
+    #finalize {
+        width: calc(100% - 1rem);
+        margin: 0.5rem;
+    }
 }
 
 #l5r5e-gm-tools-dialog {
@@ -270,6 +262,8 @@
     border-image: url("../assets/ui/macro-button.webp") 10 repeat;
     border-image-width: 0.5rem;
     border-image-outset: 0px;
+    padding: 0;
+    margin: 0.5rem;
     .window-header {
         text-align: center;
         border-bottom: 1px solid rgb(195, 165, 130);
@@ -285,21 +279,27 @@
         background: transparent;
         color: $white-light;
         .gm-tools-container {
+            display: flex;
+            font-size: 2rem;
+            line-height: 2rem;
+            min-height: 2rem;
+            margin: 0.5rem 0;
+            li {
                 flex: 1;
                 display: flex;
-            flex-flow: wrap;
+                margin: 0 0.5rem;
-            a {
-                flex: 1;
                 cursor: url("../assets/cursors/pointer.webp"), pointer;
-                i {
+                strong {
-                    font-size: 3rem;
+                    font-size: 1.5rem;
-                    line-height: 4rem;
+                    margin: 0 0.25rem;
-                    vertical-align: middle;
+                }
+                :hover {
+                    text-shadow: 0 0 $red;
                 }
             }
             .difficulty {
                 flex: 1;
-                font-size: 3rem;
+                font-size: 2rem;
             }
         }
     }

system/styles/scss/npc.scss

@@ -138,7 +138,8 @@
         }
         min-height: auto;
         display: flex;
-        fieldset {
+        fieldset,
+        .checklist {
             flex: 0 0 calc(100% - 0.5rem);
         }
         .items-content {
@@ -151,6 +152,14 @@
         &:last-child {
             padding-bottom: 1rem;
         }
+        .techniques-wrapper {
+            padding-left: 0.5rem;
+            fieldset,
+            .checklist {
+                flex: 100%;
+                margin: 0;
+            }
+        }
     }
     .npc-note {
         .editor {

system/styles/scss/sheets.scss

@@ -17,13 +17,6 @@
         .sheet-body {
             height: calc(100% - 27rem);
         }
-        .techniques-wrapper {
-            fieldset {
-                &:last-child {
-                    margin: 0 0 0 0.5rem;
-                }
-            }
-        }
         fieldset {
             &.advancement {
                 display: block;
@@ -517,11 +510,15 @@
             }
         }
         .techniques-wrapper {
+            padding-left: 0.25rem;
+            fieldset {
+                margin: 0 0 0 0.25rem;
+            }
             .checklist {
                 display: flex;
                 flex-wrap: wrap;
                 font-size: 0.85rem;
-                margin: 0 0 0.25rem 0.5rem;
+                margin: 0 0 0.25rem 0.25rem;
                 padding: 0.5rem;
                 background: $l5r5e-title;
                 --notchSize: 0.25rem;

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

@@ -3,28 +3,16 @@
         {{!-- First line--}}
         <tr>
             <td class="profil center">
-                <img class="profile-img"
+                <img class="profile-img" src="{{#if actor.img}}{{actor.img}}{{else}}icons/svg/mystery-man.svg{{/if}}" data-edit="img" alt="{{#if actor.name}}{{actor.name}}{{else}}mystery-man{{/if}}" />
-                     src="{{#if actor.img}}{{actor.img}}{{else}}icons/svg/mystery-man.svg{{/if}}"
-                     data-edit="img"
-                     height="200"
-                     width="200"
-                     alt="{{#if actor.name}}{{actor.name}}{{else}}mystery-man{{/if}}"
-                >
             </td>
-            <td class="rings center">
+            <td class="center">
                 <ul class="rings">
                     {{#each ringsList}}
                     <li id="{{this.id}}">
                         <label class="attribute-label {{this.id}} centered-input ring-selection pointer-choice {{#ifCond ../data.ring.id '==' this.id}}ring-selected{{/ifCond}}">
                             <i class="i_{{this.id}}"></i>
                             <strong>{{this.label}}</strong>
-                            <input class="centered-input approach_{{this.id}}"
+                            <input class="centered-input approach_{{this.id}}" type="text" name="approach" data-ringid="{{this.id}}" value="{{this.value}}" readonly="readonly" />
-                                   type="text"
-                                   name="approach"
-                                   data-ringid="{{this.id}}"
-                                   value="{{this.value}}"
-                                   readonly="readonly"
-                            />
                         </label>
                     </li>
                     {{/each}}
@@ -32,19 +20,11 @@
             </td>
             <td class="skill">
                 {{#if data.skill.name}}
-                <div>
                     <label>{{localizeSkill data.skill.cat 'title'}}</label>
-                </div>
-
                 {{#if actorIsPc}}
-                <div>
                     <label>{{data.skill.name}}</label>
-                </div>
                 {{/if}}
-
-                <div>
                         <label id="stance_label">{{localizeSkill data.skill.cat data.ring.id}}</label>
-                </div>
                         <div id="skill_default_value" class="dice-container pointer-choice">
                             <img src="systems/l5r5e/assets/dices/default/skill_blank.svg" alt="1">
                             <div class="dice-value">
@@ -52,13 +32,7 @@
                             </div>
                         </div>
                 {{else}}
-                <img class="profile-img"
+                    <img class="profile-img" src="systems/l5r5e/assets/imgs/noskill.webp" data-edit="img" alt="no skill selected" />
-                     src="systems/l5r5e/assets/imgs/noskill.webp"
-                     data-edit="img"
-                     height="200"
-                     width="200"
-                     alt="no skill selected"
-                >
                 {{/if}}
             </td>
         </tr>
@@ -81,7 +55,7 @@
             <td>
                 {{#if data.difficulty.hidden}}
                 <label>
-                    <input type="checkbox" id="diff_add_void_point" name="difficulty.addVoidPoint" value="1" {{checked data.difficulty.addVoidPoint}}>
+                    <input type="checkbox" id="diff_add_void_point" name="difficulty.addVoidPoint" value="1" {{checked data.difficulty.addVoidPoint}} />
                     +1 <i class="i_void" title="{{localize 'l5r5e.dicepicker.void_point_tooltip'}}"></i>
                 </label>
                 {{else}}
@@ -92,9 +66,9 @@
 
                     <div class="third">
                         <div class="dice-container">
-                            <img src="systems/l5r5e/assets/dices/default/3d/blank.png" alt="1">
+                            <img src="systems/l5r5e/assets/dices/default/3d/blank.png" alt="1" />
                             <div class="dice-value">
-                                <input class="input-dice" type="text" name="difficulty.value" value="{{data.difficulty.value}}" readonly="readonly">
+                                <input class="input-dice" type="text" name="difficulty.value" value="{{data.difficulty.value}}" readonly="readonly" />
                             </div>
                         </div>
                     </div>
@@ -113,9 +87,9 @@
 
                 <div class="third">
                     <div class="dice-container">
-                        <img src="systems/l5r5e/assets/dices/default/ring_blank.svg" alt="1">
+                        <img src="systems/l5r5e/assets/dices/default/ring_blank.svg" alt="1" />
                         <div class="dice-value">
-                            <input class="input-dice input-dice-ring" type="text" name="ring.value" value="{{data.ring.value}}" readonly="readonly">
+                            <input class="input-dice input-dice-ring" type="text" name="ring.value" value="{{data.ring.value}}" readonly="readonly" />
                         </div>
                     </div>
                 </div>
@@ -132,9 +106,9 @@
 
                 <div class="third">
                     <div class="dice-container">
-                        <img src="systems/l5r5e/assets/dices/default/skill_blank.svg" alt="1">
+                        <img src="systems/l5r5e/assets/dices/default/skill_blank.svg" alt="1" />
                         <div class="dice-value">
-                            <input class="input-dice input-dice-skill" type="text" name="skill.value" value="{{data.skill.value}}" readonly="readonly">
+                            <input class="input-dice input-dice-skill" type="text" name="skill.value" value="{{data.skill.value}}" readonly="readonly" />
                         </div>
                     </div>
                 </div>
@@ -150,7 +124,7 @@
             <td>
                 {{^if difficultyHiddenIsLock}}
                 <label>
-                    <input type="checkbox" id="diff_hidden" name="difficulty.hidden" value="1" {{checked data.difficulty.hidden}}>
+                    <input type="checkbox" id="diff_hidden" name="difficulty.hidden" value="1" {{checked data.difficulty.hidden}} />
                     {{localize 'l5r5e.dicepicker.difficulty_hidden_label'}}
                 </label>
                 {{/if}}
@@ -158,7 +132,7 @@
             <td>
                 {{#if canUseVoidPoint}}
                     <label>
-                        <input type="checkbox" id="use_void_point" name="useVoidPoint" value="1" {{checked data.useVoidPoint}}>
+                        <input type="checkbox" id="use_void_point" name="useVoidPoint" value="1" {{checked data.useVoidPoint}} />
                         {{localize 'l5r5e.dicepicker.use_void_point_label'}} <i class="i_void" title="{{localize 'l5r5e.dicepicker.void_point_tooltip'}}"></i>
                     </label>
                 {{/if}}
@@ -171,9 +145,9 @@
                 <div class="third">
                     <i class="i_skill"></i> {{localize 'l5r5e.dicepicker.skill_assistance_label'}}
                     <div class="dice-container">
-                        <img src="systems/l5r5e/assets/dices/default/3d/blank.png" alt="1">
+                        <img src="systems/l5r5e/assets/dices/default/3d/blank.png" alt="1" />
                         <div class="dice-value">
-                            <input class="input-dice" type="text" name="skill.assistance" value="{{data.skill.assistance}}" readonly="readonly">
+                            <input class="input-dice" type="text" name="skill.assistance" value="{{data.skill.assistance}}" readonly="readonly" />
                         </div>
                     </div>
                 </div>
@@ -183,10 +157,10 @@
                 </div>
             </td>
         </tr>
-
+        <tr>
-    </table>
+            <td colspan="3">
-
-    <div class="form-group">
                 <button name="roll" type="submit" {{#if disableSubmit}}disabled{{/if}}>{{localize 'l5r5e.dicepicker.roll_label'}} <i class='fas fa-arrow-circle-right'></i></button>
-    </div>
+            </td>
+        </tr>
+    </table>
 </form>

system/templates/dice/gm-tools-dialog.html

@@ -1,8 +1,14 @@
 <form class="l5r5e gm-tools-dialog" autocomplete="off">
-    <p class="gm-tools-container">
+    <ul class="gm-tools-container">
-        <a class="difficulty_hidden" title="{{localize 'l5r5e.gm_toolbox.difficulty_hidden'}}"><i class="fa fa-eye{{#if data.difficultyHidden}}-slash{{/if}}"></i></a>
+        <li class="difficulty_hidden" title="{{localize 'l5r5e.gm_toolbox.difficulty_hidden'}}">
+            <i class="fa fa-eye{{#if data.difficultyHidden}}-slash{{/if}}"></i>
             <strong class="difficulty" title="{{localize 'l5r5e.gm_toolbox.difficulty'}}">{{data.difficulty}}</strong>
-        <a class="gm_actor_updates sleep" data-type="sleep" title="{{localize 'l5r5e.gm_toolbox.sleep'}}"><i class="fa fa-bed"></i></a>
+        </li>
-        <a class="gm_actor_updates scene_end" data-type="scene_end" title="{{localize 'l5r5e.gm_toolbox.scene_end'}}"><i class="fas fa-star-half-alt"></i></a>
+        <li class="gm_actor_updates sleep" data-type="sleep" title="{{localize 'l5r5e.gm_toolbox.sleep'}}">
-    </p>
+            <i class="fa fa-bed"></i>
+        </li>
+        <li class="gm_actor_updates scene_end" data-type="scene_end" title="{{localize 'l5r5e.gm_toolbox.scene_end'}}">
+            <i class="fas fa-star-half-alt"></i>
+        </li>
+    </ul>
 </form>

system/templates/dice/roll-n-keep-dialog.html

@@ -36,10 +36,9 @@
             </span>
         </header>
     </div>
-
+        <table>
             {{!-- Body --}}
             {{#if options.editable}}
-        <table>
                 <tr>
                     {{!-- Face Rings --}}
                     <td>
@@ -53,7 +52,6 @@
                             </div>
                         {{/each}}
                     </td>
-
                     {{!-- Center --}}
                     <td>
                         {{!-- Discard & ReRoll --}}
@@ -76,32 +74,24 @@
                                 </td>
                             </tr>
                         </table>
-
                         {{!-- DiceList history --}}
                         <table>
                             {{#each data.dicesList as |item idxStep|}}
                             <tr>
                                 {{#each item as |dice idxDie|}}
-                            <td>
                                     {{#if dice.face}}
-                                    <div
+                                        <td>
-                                        class="dice {{dice.choice}}{{#ifCond ../../data.currentStep '==' idxStep}} draggable{{/ifCond}}"
-                                        data-step="{{idxStep}}"
-                                        data-die="{{idxDie}}"
-                                    >
                                             {{#if dice.newFace}}
-                                            <img src="{{getDiceFaceUrl dice.type dice.newFace}}" alt="{{idxStep}}_{{idxDie}}" />
+                                                <img class="dice {{dice.choice}}{{#ifCond ../../data.currentStep '==' idxStep}} draggable{{/ifCond}}" data-step="{{idxStep}}" data-die="{{idxDie}}" src="{{getDiceFaceUrl dice.type dice.newFace}}" alt="{{idxStep}}_{{idxDie}}" />
                                             {{else}}
-                                            <img src="{{getDiceFaceUrl dice.type dice.face}}" alt="{{idxStep}}_{{idxDie}}" />
+                                                <img class="dice {{dice.choice}}{{#ifCond ../../data.currentStep '==' idxStep}} draggable{{/ifCond}}" data-step="{{idxStep}}" data-die="{{idxDie}}" src="{{getDiceFaceUrl dice.type dice.face}}" alt="{{idxStep}}_{{idxDie}}" />
-                                        {{/if}}
-                                    </div>
                                             {{/if}}
                                         </td>
+                                    {{/if}}
                                 {{/each}}
                             </tr>
                             {{/each}}
                         </table>
-
                         {{!-- Keep --}}
                         <table>
                             <tr>
@@ -115,13 +105,11 @@
                             </tr>
                         </table>
                     </td>
-
                     {{!-- Face Skills --}}
                     <td>
                         <legend class="section-header">
                             <i class="fa fa-arrow-down" aria-hidden="true"></i> {{ localize 'l5r5e.roll_n_keep.swap_drop_here' }}
                         </legend>
-
                         {{#each data.swapDiceFaces.skills}}
                             <div class="dice dropbox faces-change" data-type="swap" data-face="{{this}}" data-die="AbilityDie">
                                 <img src="{{getDiceFaceUrl 'AbilityDie' this}}" alt="{{this}}" />
@@ -129,32 +117,30 @@
                         {{/each}}
                     </td>
                 </tr>
-        </table>
+                <tr>
-
+                    <td colspan="3">
                         <button id="finalize" name="finalize" type="button" {{#if data.submitDisabled}}disabled{{/if}}>
                             {{ localize 'l5r5e.roll_n_keep.bt_validate' }} <i class="fas fa-arrow-circle-right"></i>
                         </button>
-
+                    </td>
+                </tr>
             {{else}}
                 {{!-- Non editable DiceList history --}}
-        <table>
                     {{#each data.dicesList as |item idxStep|}}
                     <tr>
                         {{#each item as |dice idxDie|}}
-                <td>
                             {{#if dice.face}}
-                        <div class="dice {{dice.choice}}">
+                                <td>
                                     {{#if dice.newFace}}
-                                <img src="{{getDiceFaceUrl dice.type dice.newFace}}" alt="{{idxStep}}_{{idxDie}}" />
+                                        <img class="dice {{dice.choice}}" src="{{getDiceFaceUrl dice.type dice.newFace}}" alt="{{idxStep}}_{{idxDie}}" />
                                     {{else}}
-                                <img src="{{getDiceFaceUrl dice.type dice.face}}" alt="{{idxStep}}_{{idxDie}}" />
+                                        <img class="dice {{dice.choice}}" src="{{getDiceFaceUrl dice.type dice.face}}" alt="{{idxStep}}_{{idxDie}}" />
-                            {{/if}}
-                        </div>
                                     {{/if}}
                                 </td>
+                            {{/if}}
                         {{/each}}
                     </tr>
                     {{/each}}
-        </table>
             {{/if}}
+        </table>
 </form>