Style for Stance, dice difficulty, initiative

system/scripts/hooks.js

@@ -146,14 +146,20 @@ export default class HooksL5r5e {
             const content = await app.getContent();
             content.forEach((item) => {
                 const tags = [];
-                if (item.data.data.rank) {
-                    tags.push("<i>" + game.i18n.localize("l5r5e.rank") + " " + item.data.data.rank + "</i>");
+                if (!item.data.data.ring) {
+                    tags.push(`<i>`);
                 }
                 if (item.data.data.ring) {
-                    tags.push(`<i class="i_${item.data.data.ring}"></i>`);
+                    tags.push(`<i class="i_${item.data.data.ring}">`);
+                }
+                if (!item.data.data.rank) {
+                    tags.push(`</i>`);
+                }
+                if (item.data.data.rank) {
+                    tags.push(game.i18n.localize("l5r5e.rank") + " " + item.data.data.rank + "</i>");
                 }
                 if (tags.length > 0) {
-                    html.find(`[data-entry-id='${item._id}']`).append(tags.join(" "));
+                    html.find(`[data-entry-id="${item._id}"]`).append(tags.join(" "));
                 }
             });
             return false;

system/styles/scss/dices.scss

@@ -185,36 +185,56 @@
     }
 }
 
-.gm-tools-dialog {
-    bottom: 10px;
-    right: 5px;
+#l5r5e-gm-tools-dialog {
+    bottom: 0;
+    right: 0.5rem;
     display: flex;
-
+    background-position: center;
+    background-size: 100%;
+    background: linear-gradient(
+        $l5r5e-linear-gradient-second,
+        $l5r5e-linear-gradient-second-dark,
+        $l5r5e-linear-gradient-second
+    );
+    background-origin: padding-box;
+    border: 1px solid rgb(195, 165, 130);
+    background-origin: padding-box;
+    border-image: url("../assets/ui/macro-button.webp") 10 repeat;
+    border-image-width: 0.5rem;
+    border-image-outset: 0px;
+    .window-header {
+        text-align: center;
+        border-bottom: 1px solid rgb(195, 165, 130);
+        h4 {
+            font-family: $font-primary;
+            text-transform: uppercase;
+            letter-spacing: 0.15rem;
+        }
+    }
     .window-content {
         text-align: center;
         vertical-align: middle;
-
+        background: transparent;
+        color: $white-light;
         .gm-tools-container {
             flex: 1;
             display: flex;
             flex-flow: wrap;
-
-            div {
+            a {
                 flex: 1;
                 cursor: url("../assets/cursors/pointer.webp"), pointer;
+                i {
+                    font-size: 3rem;
+                    line-height: 4rem;
+                    vertical-align: middle;
+                }
             }
-
             .difficulty {
-                font-size: 60px;
-            }
-
-            i {
-                font-size: 60px;
-                vertical-align: middle;
+                flex: 1;
+                font-size: 3rem;
             }
         }
     }
-
     // hide "search anywhere" draggable icon
     .window-draggable-handle {
         display: none;

system/styles/scss/fonts.scss

@@ -279,3 +279,15 @@ i.i_skill {
     height: 1rem;
     width: 1rem;
 }
+
+// Compendium
+.compendium {
+    .item {
+        i {
+            font-family: $font-primary;
+            &:before {
+                font-family: $font-logoType;
+            }
+        }
+    }
+}

system/styles/scss/global.scss

@@ -62,6 +62,29 @@ body {
                 }
             }
         }
+        // Compendium
+        .compendium {
+            .item {
+                position: relative;
+                i {
+                    float: right;
+                    line-height: 1rem;
+                    text-align: right;
+                    margin-right: 2rem;
+                    font-size: 0.75rem;
+                    color: rgba(240, 240, 225, 0.75);
+                    font-style: italic;
+                    flex: 0 0 auto;
+                    position: absolute;
+                    right: 0;
+                    text-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
+                    &:before {
+                        margin: 0 0.25rem 0 0;
+                        font-style: normal;
+                    }
+                }
+            }
+        }
     }
     &.sheet,
     &.npc,
@@ -284,6 +307,7 @@ sup {
         font-variant: normal;
         text-rendering: auto;
         line-height: 1;
+        width: 1.5rem;
         &-true:before {
             content: "\f06e";
         }

system/styles/scss/ui.scss

@@ -568,14 +568,31 @@ button {
             h3 {
                 font-size: 0.85rem;
             }
+            ul {
+                display: flex;
+                color: $l5r5e-white;
+                &.encounter {
+                    border-right: 1px solid $l5r5e-white-light;
+                }
+                li {
+                    flex: 1;
+                    cursor: url("../assets/cursors/pointer.webp"), pointer;
+                }
+            }
             .encounter {
                 i {
                     font-size: 23px;
                     vertical-align: middle;
+                    &:hover {
+                        text-shadow: 0 0 8px $red;
+                    }
                 }
 
                 .active {
                     color: $l5r5e-maho;
+                    &:hover {
+                        text-shadow: none;
+                    }
                 }
 
                 &-icon {

system/templates/actors/npc/conflict.html

@@ -12,7 +12,7 @@
 </fieldset>
 <fieldset class="stances-content flexrow">
     <legend class="section-header">{{ localize 'l5r5e.conflict.stance' }}</legend>
-    <ul>
+    <ul class="item-list">
         {{#each data.rings as |ringValue ringId|}}
             {{> 'systems/l5r5e/templates/actors/character/stance.html' stance=../data.stance ringId=ringId }}
         {{/each}}

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

@@ -1,11 +1,6 @@
 <form class="l5r5e gm-tools-dialog" autocomplete="off">
-    <div class="gm-tools-container">
-        <div class="difficulty_hidden">
-            <i class="fa fa-eye{{#if data.difficultyHidden}}-slash{{/if}}"></i>
-        </div>
-
-        <div class="difficulty">
-            {{data.difficulty}}
-        </div>
-    </div>
+    <p class="gm-tools-container">
+        <a class="difficulty_hidden"><i class="fa fa-eye{{#if data.difficultyHidden}}-slash{{/if}}"></i></a>
+        <strong class="difficulty">{{data.difficulty}}</strong>
+    </p>
 </form>

system/templates/gm/combat-tracker-bar.html

@@ -1,17 +1,16 @@
 <nav class="encounters flexrow" id="l5r5e_gm_combat_tracker_bar">
-    <div class="encounter">
+    <ul class="encounter">
         {{#each encounterTypeList}}
-        <a class="encounter encounter-control" data-id="{{this}}">
-            <i class="fa fas encounter-icon-{{this}}{{#ifCond this '==' ../encounterType}} active{{/ifCond}}" title="{{localize (localize 'l5r5e.conflict.initiative.{id}' id=this)}}"></i>
-        </a>
+            <li class="encounter encounter-control" data-id="{{this}}">
+                <i class="fa fas encounter-icon-{{this}}{{#ifCond this '==' ../encounterType}} active{{/ifCond}}" title="{{localize (localize 'l5r5e.conflict.initiative.{id}' id=this)}}"></i>
+            </li>
         {{/each}}
-    </div>
-
-    <div class="prepared">
+    </ul>
+    <ul class="prepared">
         {{#each prepared as |prepared charType|}}
-        <a class="encounter prepared-control" data-id="{{charType}}">
-            <i class="fa fas prepared-icon-{{prepared}} prepared-{{charType}}" title="{{localize (localize 'l5r5e.conflict.initiative.prepared_{value}' value=prepared)}} ({{localize (localize 'l5r5e.character_types.{type}' type=charType)}})"></i>
-        </a>
+            <li class="encounter prepared-control" data-id="{{charType}}">
+                <i class="fa fas prepared-icon-{{prepared}} prepared-{{charType}}" title="{{localize (localize 'l5r5e.conflict.initiative.prepared_{value}' value=prepared)}} ({{localize (localize 'l5r5e.character_types.{type}' type=charType)}})"></i>
+            </li>
         {{/each}}
-    </div>
+    </ul>
 </nav>