Merge branch 'v13_update' into 'dev'

Updating to v13, various changes to make it work

See merge request teaml5r/l5r5e!38

system/scripts/hooks.js

@@ -165,7 +165,7 @@ export default class HooksL5r5e {
      */
     static async renderCombatTracker(app, html, data) {
         // Display Combat bar (only for GMs)
-        await this._gmCombatBar(app, html, data);
+        await this._gmCombatBar(app, $(html), data);
     }
 
     /**
@@ -261,7 +261,7 @@ export default class HooksL5r5e {
             // Add additional data to the entries to make it faster to lookup.
             // Add Ring/rank/rarity information
             for (const document of content) {
-                const entry = entries.filter(`[data-document-id="${document.id}"]`);
+                const entry = entries.filter(`[data-entry-id="${document.id}"]`);
 
                 // Hide filter if only one value of this type is found in the compendium
                 const autoDisplayFilter = (props, documentData = null) => {
@@ -310,9 +310,9 @@ export default class HooksL5r5e {
 
             const unavailableSourceForPlayers = allCompendiumReferences.filter((element) => {
                 if (CONFIG.l5r5e.sourceReference[element]) {
-                    return officialContent.length > 0 ? !officialContent.includes(element) : false;
+                    return officialContent.size > 0 ? !officialContent.has(element) : false;
                 }
-                return unofficialContent.length > 0 ? !unofficialContent.includes(element) : false;
+                return unofficialContent.size > 0 ? !unofficialContent.has(element) : false;
             });
 
             // Create filter function
@@ -333,7 +333,7 @@ export default class HooksL5r5e {
                     let shouldShow = true;
 
                     // Handle unavailable sources
-                    if (unavailableSourceForPlayers.includes(lineSource)) {
+                    if (unavailableSourceForPlayers.has(lineSource)) {
                         if (game.user.isGM) {
                             shouldShow &= true;
                             $(this)
@@ -410,7 +410,7 @@ export default class HooksL5r5e {
                     label: CONFIG.l5r5e.sourceReference[reference]?.label ?? reference,
                     translate: true,
                     group: CONFIG.l5r5e.sourceReference[reference]?.type.split(",")[0] ?? "l5r5e.multiselect.sources_categories.others",
-                    disabled: !sourcesInThisCompendium.has(reference) || (!game.user.isGM && unavailableSourceForPlayers.includes(reference))
+                    disabled: !sourcesInThisCompendium.has(reference) || (!game.user.isGM && unavailableSourceForPlayers.has(reference))
                 }));
                 const filterSourcesBox = L5r5eHtmlMultiSelectElement.create({
                     name: "filter-sources",
@@ -427,7 +427,7 @@ export default class HooksL5r5e {
                         + '</button>'
 
                     const filterPlayerView = allCompendiumReferences
-                        .filter((item) => !unavailableSourceForPlayers.includes(item))
+                        .filter((item) => !unavailableSourceForPlayers.has(item))
                         .filter((item) => sourcesInThisCompendium.has(item));
 
                     $(buttonHTML).appendTo($(header).find("l5r5e-multi-select")).click(function() {

system/styles/conf/l5r5e.scss

@@ -1,21 +1,24 @@
+@layer system {
 /* Global */
 @import "../scss/colors";
 @import "../scss/global";
 @import "../scss/compatibility-modules";
 @import "../scss/fonts";
 @import "../scss/cursors";
-@import "../scss/dices";
 @import "../scss/ui";
 @import "../scss/global-appv2.scss";
 
-.l5r5e {
+    .l5r5e {
-    @import "../scss/dices-chat";
+        @import "../scss/dices";
-    @import "../scss/sheets";
+        @import "../scss/l5r5e-global";
-    @import "../scss/npc";
+        @import "../scss/dices-chat";
-    @import "../scss/army";
+        @import "../scss/sheets";
-    @import "../scss/nav";
+        @import "../scss/npc";
-    @import "../scss/rings";
+        @import "../scss/army";
-    @import "../scss/skills";
+        @import "../scss/nav";
-    @import "../scss/items";
+        @import "../scss/rings";
-    @import "../scss/twenty-questions";
+        @import "../scss/skills";
+        @import "../scss/items";
+        @import "../scss/twenty-questions";
+    }
 }

system/styles/scss/dices-chat.scss

@@ -1,86 +1,201 @@
 // Dice in chat
-.chat-dice {
+&.chat.dice-roll {
-    display: inline;
-    position: relative;
-    padding: 0;
-    margin: 0;
-    &:after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        border-radius: 0.15rem;
-        padding: 0 0.225rem 0 0.15rem;
-        font-size: 0.75em;
-        line-height: 1rem;
-        width: 1em;
-        text-align: center;
-        color: white;
-        background: transparent;
-    }
-    &:last-of-type,
-    &:nth-child(6),
-    &:nth-child(12),
-    &:nth-child(18) {
-        &:after {
-            padding: 0 0.175rem 0 0.15rem;
-        }
-    }
-    &.rerolled {
-        > img {
-            border-bottom: 0 none;
-        }
-        &:after {
-            content: "\f2f9";
-            background: orangered;
-        }
-    }
 
-    &.swapped {
-        > img {
-            border-bottom: 0 none;
-        }
-        &:after {
-            content: "\f337";
-            background: fuchsia;
-        }
-    }
-
-    > img {
-        border: 1px solid transparent;
-        height: auto;
-        width: calc(100% / 6 - 0.255rem);
-        margin: auto;
-    }
-}
-td {
     .chat-dice {
-    }
+        display: inline;
-}
+        position: relative;
-
+        padding: 0;
-.chat-profil {
+        margin: 0;
-    text-align: center;
+        &:after {
-    vertical-align: middle;
+            content: "";
-
+            position: absolute;
-    .profile-img {
+            bottom: 0;
-        margin: 0.25rem 0.25rem 0 0;
+            right: 0;
-    }
+            border-radius: 0.15rem;
-
+            padding: 0 0.225rem 0 0.15rem;
-    &-stance {
+            font-size: 0.75em;
-        font-size: 2.5rem;
+            line-height: 1rem;
-        line-height: 2.5rem;
+            width: 1em;
-        margin: 0.25rem;
+            text-align: center;
-        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+            color: white;
-    }
+            background: transparent;
-    &-element {
-        flex-wrap: wrap;
-        flex-grow: 1;
-
-        &-skill {
-            flex-grow: 3;
         }
-        &:last-child {
+        &:last-of-type,
-            flex-grow: 2;
+        &:nth-child(6),
+        &:nth-child(12),
+        &:nth-child(18) {
+            &:after {
+                padding: 0 0.175rem 0 0.15rem;
+            }
+        }
+        &.rerolled {
+            > img {
+                border-bottom: 0 none;
+            }
+            &:after {
+                content: "\f2f9";
+                background: orangered;
+            }
+        }
+
+        &.swapped {
+            > img {
+                border-bottom: 0 none;
+            }
+            &:after {
+                content: "\f337";
+                background: fuchsia;
+            }
+        }
+
+        > img {
+            border: 1px solid transparent;
+            height: auto;
         }
     }
+    td {
+        .chat-dice {
+        }
+    }
+
+    .chat-profil {
+        text-align: center;
+        vertical-align: middle;
+
+        .profile-img {
+            margin: 0.25rem 0.25rem 0 0;
+        }
+
+        &-stance {
+            font-size: 2.5rem;
+            line-height: 2.5rem;
+            margin: 0.25rem;
+            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+        }
+        &-element {
+            flex-wrap: wrap;
+            flex-grow: 1;
+
+            &-skill {
+                flex-grow: 3;
+            }
+            &:last-child {
+                flex-grow: 2;
+            }
+        }
+    }
+    .dice-formula,
+    .dice-total {
+        background: rgba(255, 255, 255, 0.1);
+        border: rgba(255, 255, 255, 0.75);
+        text-align: center;
+        margin: 0.5rem 0;
+        padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+        &-rnk {
+            line-height: 2rem;
+            i {
+                margin-left: 0.5rem;
+            }
+        }
+    }
+    button {
+        justify-self: center;
+        &.chat-dice-rnk {
+            cursor: url("../assets/cursors/pointer.webp"), pointer;
+            color: $white;
+            background: linear-gradient(
+                $l5r5e-linear-gradient-third,
+                $l5r5e-linear-gradient-third-dark,
+                $l5r5e-linear-gradient-third
+            );
+            background-origin: padding-box;
+            border-image: url("../assets/ui/macro-button.webp") 10 repeat;
+            border-image-width: 0.5rem;
+            border-image-outset: 0px;
+            margin: 0.5rem 0 0;
+            &:hover {
+                background: linear-gradient(
+                    $l5r5e-linear-gradient-first-dark,
+                    $l5r5e-linear-gradient-first,
+                    $l5r5e-linear-gradient-first-dark
+                );
+            }
+        }
+        &.chat-dice-rnk-ended {
+            background: linear-gradient(
+                $l5r5e-linear-gradient-second,
+                $l5r5e-linear-gradient-second-dark,
+                $l5r5e-linear-gradient-second
+            );
+        }
+    }
+    .dice-result-rnk {
+        background: rgba(0, 0, 255, 0.1);
+        border: 1px solid rgba(55, 55, 155, 0.75);
+        padding: 0.25rem;
+        color: rgba(55, 55, 155, 0.75);
+        text-align: center;
+        font-weight: bold;
+        text-shadow: 0 0 0 $black;
+        &.success {
+            background: rgba(0, 255, 0, 0.1);
+            border-color: rgba(55, 155, 55, 0.75);
+            color: rgba(55, 155, 55, 0.75);
+            i.i_success {
+                font-size: 1rem;
+            }
+        }
+        &.unknown {
+            background: rgba(121, 121, 121, 0.1);
+            border-color: rgba(124, 124, 124, 0.75);
+            color: rgba(91, 91, 91, 0.75);
+        }
+        &.fail {
+            background: rgba(255, 0, 0, 0.1);
+            border-color: rgba(155, 55, 55, 0.75);
+            color: rgba(155, 55, 55, 0.75);
+        }
+    }
+    .target,
+    .item-infos {
+        display: flex;
+        align-items: center;
+        flex: 0 0 100%;
+        margin: 0.5rem 0;
+        padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+        background: rgba(255, 255, 255, 0.1);
+        border: solid 1px rgba(100, 0, 0, 0.75);
+        border-radius: 3px;
+        .profile {
+            flex: 1;
+            margin: 0.25rem 0.25rem 0 0;
+            position: relative;
+            .profile-img {
+                position: relative;
+                border: none;
+                filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.66));
+            }
+        }
+        .name {
+            flex: 6;
+            font-family: "BrushtipTexe", sans-serif;
+        }
+        .content-link {
+            background: unset;
+            border: unset;
+            i {
+                display: none;
+            }
+        }
+    }
+    .item-infos {
+        border: solid 1px rgba(0, 78, 100, 0.75);
+        i {
+            font-size: var(--font-size-12);
+        }
+    }
+
+    .dice-container {
+        display: flex;
+    }
 }

system/styles/scss/dices.scss

@@ -1,115 +1,4 @@
 // -- Dices.scss
-.dice-roll {
-    .dice-formula,
-    .dice-total {
-        background: rgba(255, 255, 255, 0.1);
-        border: rgba(255, 255, 255, 0.75);
-        text-align: center;
-        margin: 0.5rem 0;
-        padding: 0.25rem 0.5rem 0.25rem 0.25rem;
-        &-rnk {
-            line-height: 2rem;
-            i {
-                margin-left: 0.5rem;
-            }
-        }
-    }
-    button {
-        &.chat-dice-rnk {
-            cursor: url("../assets/cursors/pointer.webp"), pointer;
-            color: $white;
-            background: linear-gradient(
-                $l5r5e-linear-gradient-third,
-                $l5r5e-linear-gradient-third-dark,
-                $l5r5e-linear-gradient-third
-            );
-            background-origin: padding-box;
-            border-image: url("../assets/ui/macro-button.webp") 10 repeat;
-            border-image-width: 0.5rem;
-            border-image-outset: 0px;
-            margin: 0.5rem 0 0;
-            &:hover {
-                background: linear-gradient(
-                    $l5r5e-linear-gradient-first-dark,
-                    $l5r5e-linear-gradient-first,
-                    $l5r5e-linear-gradient-first-dark
-                );
-            }
-        }
-        &.chat-dice-rnk-ended {
-            background: linear-gradient(
-                $l5r5e-linear-gradient-second,
-                $l5r5e-linear-gradient-second-dark,
-                $l5r5e-linear-gradient-second
-            );
-        }
-    }
-    .dice-result-rnk {
-        background: rgba(0, 0, 255, 0.1);
-        border: 1px solid rgba(55, 55, 155, 0.75);
-        padding: 0.25rem;
-        color: rgba(55, 55, 155, 0.75);
-        text-align: center;
-        font-weight: bold;
-        text-shadow: 0 0 0 $black;
-        &.success {
-            background: rgba(0, 255, 0, 0.1);
-            border-color: rgba(55, 155, 55, 0.75);
-            color: rgba(55, 155, 55, 0.75);
-            i.i_success {
-                font-size: 1rem;
-            }
-        }
-        &.unknown {
-            background: rgba(121, 121, 121, 0.1);
-            border-color: rgba(124, 124, 124, 0.75);
-            color: rgba(91, 91, 91, 0.75);
-        }
-        &.fail {
-            background: rgba(255, 0, 0, 0.1);
-            border-color: rgba(155, 55, 55, 0.75);
-            color: rgba(155, 55, 55, 0.75);
-        }
-    }
-    .target,
-    .item-infos {
-        display: flex;
-        align-items: center;
-        flex: 0 0 100%;
-        margin: 0.5rem 0;
-        padding: 0.25rem 0.5rem 0.25rem 0.25rem;
-        background: rgba(255, 255, 255, 0.1);
-        border: solid 1px rgba(100, 0, 0, 0.75);
-        border-radius: 3px;
-        .profile {
-            flex: 1;
-            margin: 0.25rem 0.25rem 0 0;
-            position: relative;
-            .profile-img {
-                position: relative;
-                border: none;
-                filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.66));
-            }
-        }
-        .name {
-            flex: 6;
-            font-family: "BrushtipTexe", sans-serif;
-        }
-        .content-link {
-            background: unset;
-            border: unset;
-            i {
-                display: none;
-            }
-        }
-    }
-    .item-infos {
-        border: solid 1px rgba(0, 78, 100, 0.75);
-        i {
-            font-size: var(--font-size-12);
-        }
-    }
-}
 
 // If DicePicker add a pointer
 .dice-picker {
@@ -202,7 +91,13 @@
         vertical-align: middle;
     }
 
+    .dice-container.assistance {
+        display: flex;
+        align-items: anchor-center;
+    }
+
     .dice-container {
+        display: inline-block;
         position: relative;
         text-align: center;
 
@@ -210,6 +105,16 @@
             height: 40px;
             width: 40px;
         }
+        &.dice-value{
+            &.input-dice {
+                width: 20px;
+                color: #0f0f0e;
+                background: none;
+                border: none;
+                font-size: large;
+                padding: 0;
+            }
+        }
     }
 
     .dice-value {
@@ -218,22 +123,25 @@
         left: 50%;
         transform: translate(-50%, -50%);
     }
-
+    input[name="ring.value"][type="text"] {
-    .input-dice {
+        color: #f0f0e0;
-        width: 20px;
+        border: unset;
+        background: unset;
+    }
+    input[name="skill.value"][type="text"] {
         color: #0f0f0e;
-        background: none;
+        border: unset;
-        border: none;
+        background: unset;
-        font-size: large;
+    }
-        padding: 0;
+    input[name="difficulty.value"][type="text"] {
-
+        color: #0f0f0e;
-        &-ring {
+        border: unset;
-            color: #f0f0e0;
+        background: unset;
-        }
+    }
-
+    input[name="skill.assistance"][type="text"] {
-        &-skill {
+        color: #0f0f0e;
-            color: #0f0f0e;
+        border: unset;
-        }
+        background: unset;
     }
 }
 

system/styles/scss/global-appv2.scss

@@ -1,5 +1,4 @@
 .application {
-    background: unset;
     color: var(--color-text-dark-primary);
     
     .scrollable {
@@ -19,7 +18,6 @@
     }
 
     .window-content {
-        background: rgb(255, 250, 230) url("../assets/imgs/bg-l5r.webp") no-repeat;
         padding: 0.25rem;
     }
 }
@@ -49,3 +47,46 @@
         }
     }
 }
+
+#sidebar-tabs > menu {
+    gap: 4px; // halve the distance between menu icons
+}
+
+#sidebar-content {
+    background: url("../assets/ui/bgSidebar.webp") no-repeat;
+    border-image: url("../assets/ui/macro-button.webp") 10 repeat;
+    border-style: solid;
+    border-image-width: 0.5rem;
+    border-image-outset: 0px;
+    margin-top: 2px;
+    margin-right: 2px;
+    height: calc(100% - 10px); // use height calculation to add margin at bottom
+
+    .sidebar-tab,.tab {
+        margin: 3px; // center content in sidebar
+        border-radius: 5px; // round of the inside content
+    }
+
+    #chat {
+        margin: unset;
+        padding-right: 4px; // scrollbar should be inside the container
+        .chat-scroll {
+          direction: unset;     // Scrollbar on right
+          scrollbar-color:  var(--color-light-4) var(--color-dark-3);
+          scrollbar-width: thin;
+        }
+    }
+}
+
+// hotbar
+#hotbar {
+    //margin: 0;
+    #action-bar {
+        //flex: 0 0 100%;
+        .slot {
+            border-image: url("../assets/ui/macro-button.webp");
+            border-image-slice: 8 fill;
+            border-image-width: 0.25rem;
+        }
+    }
+}

system/styles/scss/global.scss

@@ -158,20 +158,6 @@ button:focus {
     box-shadow: 0 0 10px $red;
 }
 
-option {
-    font-size: 1rem;
-    line-height: 1.5rem;
-    padding: 0.25rem;
-    color: $black-light;
-}
-
-/* lists */
-ul,
-li {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
 .item-list {
     > li {
         padding: 0.25rem;
@@ -205,27 +191,6 @@ fieldset {
     }
 }
 
-// inputs
-input[type="text"],
-input[type="number"],
-input[type="password"],
-input[type="date"],
-input[type="time"],
-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,
 .editor-content {
@@ -233,23 +198,6 @@ input[type="number"] {
     height: 100%;
 }
 
-// Elements Colors
-.earth {
-    color: $l5r5e-earth;
-}
-.air {
-    color: $l5r5e-air;
-}
-.water {
-    color: $l5r5e-water;
-}
-.fire {
-    color: $l5r5e-fire;
-}
-.void {
-    color: $l5r5e-void;
-}
-
 table {
     background: transparent;
     border: 1px solid $l5r5e-title;
@@ -363,3 +311,4 @@ a.compendium-link {
         color: #0096ff;
     }
 }
+

system/styles/scss/l5r5e-global.scss

@@ -0,0 +1,46 @@
+
+/* lists */
+ul,
+li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+// Elements Colors
+.earth {
+    color: $l5r5e-earth;
+}
+.air {
+    color: $l5r5e-air;
+}
+.water {
+    color: $l5r5e-water;
+}
+.fire {
+    color: $l5r5e-fire;
+}
+.void {
+    color: $l5r5e-void;
+}
+
+// inputs
+input[type="text"],
+input[type="number"],
+input[type="password"],
+input[type="date"],
+input[type="time"],
+textarea {
+    padding: 0.25rem;
+    background: $l5r5e-white;
+    border: 1px solid $l5r5e-title;
+    color: $l5r5e-black;
+    resize: vertical;
+    border-radius: 0;
+    &[disabled] {
+        background: $l5r5e-white-light;
+    }
+}
+input[type="number"] {
+    text-align: center;
+}

system/styles/scss/sheets.scss

@@ -101,8 +101,8 @@
     }
 
     .sheet-header {
-        flex: 0 0 100%;
         align-items: flex-start;
+        flex-wrap: wrap;
         input {
             flex: 0 0 3rem;
             font-size: 1.5rem;
@@ -230,12 +230,8 @@
                 }
             }
             .identity-content {
-                flex: 0 0 100%;
                 display: flex;
                 flex-wrap: wrap;
-                margin: 0;
-                padding-top: 0.25rem;
-                padding-left: 0.5rem;
                 li {
                     flex: 33%;
                     &:nth-child(1),

system/styles/scss/ui.scss

@@ -21,442 +21,11 @@ button {
     }
 }
 
-// sidebar
+.chat-message {
-#sidebar {
+    ul,li {
-    padding: 0.5rem 0.25rem 0.5rem 0.5rem;
+        list-style: none;
-    background-position: top;
+        margin: unset;
-    background-size: 100%;
+        padding: unset;
-    background: url("../assets/ui/bgSidebar.webp") no-repeat;
-    border: 1px solid rgb(195, 165, 130);
-    border-radius: 0;
-    overflow: initial;
-    height: calc(100% - 1.1rem);
-    top: 0.2rem;
-    min-width: 20rem;
-    letter-spacing: 0.1rem;
-    position: relative;
-    margin-right: 0.5rem;
-    &:before {
-        z-index: -1;
-        content: "";
-        position: absolute;
-        height: calc(100% + 0.6rem);
-        width: 100%;
-        border: 1px solid rgb(195, 165, 130);
-        border-radius: 0;
-        top: -0.35rem;
-        left: 0.25rem;
-    }
-    #sidebar-tabs {
-        flex: 0 0 2rem;
-        box-sizing: border-box;
-        margin: 0 0 0.25rem;
-        border-bottom: 1px solid rgba(195, 165, 130, 0.5);
-        box-shadow: none;
-        display: flex;
-        i {
-            flex: 1;
-            width: 100%;
-            height: 100%;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: 100%;
-            border-radius: 100%;
-
-            // v10 FA6+ color need to be set
-            &.fa-swords,
-            &.fa-user,
-            &.fa-cards {
-                color: black;
-            }
-
-            &.fa-comments {
-                background-image: url("../assets/ui/sidebar/chat.svg");
-                &:before {
-                    content: "";
-                }
-            }
-            &.fa-fist-raised {
-                background-image: url("../assets/ui/sidebar/combat-tracker.svg");
-                background-size: 85%;
-                &:before {
-                    content: "";
-                }
-            }
-            &.fa-map {
-                background-image: url("../assets/ui/sidebar/scenes.svg");
-                background-size: 80%;
-                &:before {
-                    content: "";
-                }
-            }
-            &.fa-users {
-                background-image: url("../assets/ui/sidebar/actors.svg");
-                background-size: 90%;
-                &:before {
-                    content: "";
-                }
-            }
-            &.fa-suitcase {
-                background-image: url("../assets/ui/sidebar/object.svg");
-                &:before {
-                    content: "";
-                }
-            }
-            &.fa-book-open {
-                background-image: url("../assets/ui/sidebar/journal.svg");
-                &:before {
-                    content: "";
-                }
-            }
-            &.fa-th-list {
-                background-image: url("../assets/ui/sidebar/rolltable.svg");
-                background-size: 85%;
-                &:before {
-                    content: "";
-                }
-            }
-            &.fa-id-badge {
-                background-size: 85%;
-                color: black;
-                padding-left: 2px;
-                &:before {
-                    content: "\f2c1";
-                }
-            }
-            &.fa-music {
-                background-image: url("../assets/ui/sidebar/playlist.svg");
-                background-size: 80%;
-                &:before {
-                    content: "";
-                }
-            }
-            &.fa-atlas {
-                background-image: url("../assets/ui/sidebar/compendium.svg");
-                &:before {
-                    content: "";
-                }
-            }
-            &.fa-cogs {
-                background-image: url("../assets/ui/sidebar/settings.svg");
-                background-size: 85%;
-                &:before {
-                    content: "";
-                }
-            }
-        }
-        > .item {
-            flex: 0 0 1.5rem;
-            width: 1.5rem;
-            height: 1.5rem;
-            line-height: 1.5rem;
-            margin: 0.1rem;
-            border-radius: 100%;
-            background: $l5r5e-white;
-            &.active,
-            &:hover {
-                background: $white;
-                border: 1px solid $l5r5e-border-sidebar;
-                box-shadow: 0 0 10px $red;
-            }
-        }
-        .collapse {
-            position: relative;
-            flex: 0 0 0.85rem;
-            line-height: 1.75rem;
-            color: rgb(195, 165, 130);
-            text-align: center;
-            i {
-                background-color: transparent;
-            }
-        }
-    }
-    &.collapsed {
-        min-width: 0;
-        width: 3rem !important;
-
-        #sidebar-tabs {
-            > .item {
-                &.active {
-                    border: 1px solid $l5r5e-border-sidebar;
-                    box-shadow: 0 0 10px $l5r5e-white;
-                    border-radius: 100%;
-                }
-            }
-            .collapse {
-                flex: 0 0 1.5rem;
-                margin: 0.1rem;
-            }
-        }
-    }
-    .sidebar-tab {
-        .chat-control-icon {
-            cursor: url("../assets/cursors/pointer.webp"), pointer;
-        }
-        .action-buttons button {
-            cursor: default;
-            color: $white;
-            background: linear-gradient(
-                $l5r5e-linear-gradient-third,
-                $l5r5e-linear-gradient-third-dark,
-                $l5r5e-linear-gradient-third
-            );
-            background-origin: padding-box;
-            border-image: url("../assets/ui/macro-button.webp") 10 repeat;
-            border-image-width: 0.5rem;
-            border-image-outset: 0px;
-            &:hover {
-                background: linear-gradient(
-                    $l5r5e-linear-gradient-first-dark,
-                    $l5r5e-linear-gradient-first,
-                    $l5r5e-linear-gradient-first-dark
-                );
-            }
-        }
-    }
-    // Settings
-    #settings button {
-        cursor: default;
-        color: $white;
-        background: linear-gradient(
-            $l5r5e-linear-gradient-third,
-            $l5r5e-linear-gradient-third-dark,
-            $l5r5e-linear-gradient-third
-        );
-        background-origin: padding-box;
-        border-image: url("../assets/ui/macro-button.webp") 10 repeat;
-        border-image-width: 0.5rem;
-        border-image-outset: 0px;
-        &:hover {
-            background: linear-gradient(
-                $l5r5e-linear-gradient-first-dark,
-                $l5r5e-linear-gradient-first,
-                $l5r5e-linear-gradient-first-dark
-            );
-        }
-    }
-
-    // Chat
-    #chat-form textarea {
-        color: $black;
-    }
-    #chat-form textarea,
-    .chat-message,
-    .blind,
-    .whisper,
-    #chat-controls .roll-type-select,
-    .header-search input {
-        background: transparent url("../assets/ui/chat-texture.webp") repeat-y;
-        &:focus {
-            background: #f0f0e0 url("../assets/ui/chat-texture.webp") repeat-y;
-        }
-    }
-    .header-search input[name="search"] {
-        background-color: $l5r5e-chat-color;
-        color: $l5r5e-black;
-        &:focus {
-            background-color: $l5r5e-chat-color-roll;
-        }
-    }
-
-    // Chat-Message
-    .chat-message {
-        .message-header {
-            line-height: 2rem;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            margin-bottom: 0.25rem;
-            border-radius: 0;
-        }
-    }
-
-    #chat-log {
-        margin: 0 0 0.5rem;
-        font-size: 1rem;
-        .message.whisper,
-        .message.blind,
-        .message.roll {
-            position: relative;
-            .message-header {
-                .message-metadata:before {
-                    position: absolute;
-                    top: -0.5rem;
-                    right: 0.25rem;
-                    font-size: 0.5rem;
-                    color: $l5r5e-red;
-                    height: 0;
-                }
-            }
-        }
-        .message.whisper {
-            font-style: italic;
-            .message-header {
-                .message-metadata:before {
-                    content: "(Private)";
-                }
-            }
-            &.roll {
-                .message-header {
-                    .message-metadata:before {
-                        content: "(Private Roll)";
-                    }
-                }
-            }
-        }
-        .message.blind {
-            font-style: italic;
-            .message-header {
-                .message-metadata:before {
-                    content: "(Blind)";
-                }
-            }
-            &.roll {
-                .message-header {
-                    .message-metadata:before {
-                        content: "(Blind Roll)";
-                    }
-                }
-            }
-        }
-        .message.roll {
-            .message-header {
-                .message-metadata:before {
-                    content: "(Roll)";
-                }
-            }
-        }
-    }
-    .message-sender {
-        color: $l5r5e-red;
-        text-shadow: 1px 1px 0px $l5r5e-black-light;
-    }
-    .message {
-        background-color: $l5r5e-chat-color;
-        color: $black-light;
-        ul {
-            li {
-                padding: 0.25rem;
-                border: 1px solid rgba(0, 0, 0, 0.05);
-                border-bottom: 0 none;
-                &:nth-child(odd) {
-                    background: $l5r5e-odd;
-                }
-                &:nth-child(even) {
-                    background: $l5r5e-even;
-                }
-                &:last-child {
-                    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-                }
-            }
-        }
-        &.roll {
-            background-color: $l5r5e-chat-color-roll;
-        }
-        &.blind {
-            background-color: $l5r5e-chat-color-blind;
-        }
-        &.whisper {
-            background-color: $l5r5e-chat-color-whisper;
-        }
-    }
-}
-
-// hotbar
-#hotbar {
-    //margin: 0;
-    #action-bar {
-        //flex: 0 0 100%;
-        .macro {
-            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-image: url("../assets/ui/macro-button.webp");
-            border-image-slice: 8 fill;
-            border-image-width: 0.25rem;
-            border-image-outset: 0;
-            border-radius: 0;
-            .macro-key {
-                background: $l5r5e-black;
-            }
-            &.active {
-                background: linear-gradient(
-                    $l5r5e-linear-gradient-second-dark,
-                    $l5r5e-linear-gradient-second,
-                    $l5r5e-linear-gradient-second-dark
-                );
-                box-shadow: 1px 1px 10px $black inset;
-                border: 1px solid rgba(195, 165, 130, 0.5);
-            }
-        }
-        #macro-list {
-            background: transparent;
-            margin: 0;
-            padding: 0.05rem;
-            border-radius: 0;
-            border: 0 none;
-            box-shadow: 0.25rem 0.25rem 0.5rem $black-light;
-        }
-    }
-    .bar-controls {
-        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-image: url("../assets/ui/macro-button.webp") 15 repeat;
-        border-image-width: 0.5rem;
-        border-image-outset: 0px;
-        box-shadow: 0 0 0.25rem $black-light;
-        border-radius: 0;
-        margin: 0 0.5rem;
-        a.page-control,
-        span.page-number {
-            font-size: 1rem;
-            line-height: 0.95rem;
-        }
-    }
-}
-
-// players
-#players {
-    border-radius: 0;
-    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") 15 repeat;
-    border-image-width: 0.5rem;
-    border-image-outset: 0px;
-    margin: 0;
-    padding: 0;
-    left: 0.2rem;
-    bottom: 0.65rem;
-    box-shadow: inset 0 0 0.5rem $black-light;
-    position: relative;
-    &:before {
-        z-index: -1;
-        position: absolute;
-        content: "";
-        background: transparent url("../assets/ui/players-border.webp") no-repeat 0 0;
-        background-size: 100%;
-        display: block;
-        top: -12px;
-        right: 10%;
-        left: 10%;
-        bottom: 0;
     }
 }
 
@@ -623,11 +192,14 @@ button {
                     border-right: 1px solid $l5r5e-white-light;
                 }
                 li {
-                    flex: 1;
                     cursor: url("../assets/cursors/pointer.webp"), pointer;
                 }
             }
+            .prepared {
+                justify-content: space-evenly;
+            }
             .encounter {
+                justify-content: space-between;
                 i {
                     font-size: 23px;
                     vertical-align: middle;
@@ -683,27 +255,7 @@ button {
 }
 
 // Compendium
-.compendium,
+.directory-item {    
-.compendium-list {
-    .compendium-pack {
-        .pack-title {
-            margin: 0;
-            line-height: 1rem;
-        }
-        .compendium-footer {
-            text-align: right;
-            margin-right: 2rem;
-            font-size: 0.75rem;
-            color: rgba(240, 240, 225, 0.75);
-        }
-    }
-    .ring-filter,
-    .number-filter {
-        .selected {
-            background-image: radial-gradient(closest-side, yellow, transparent);
-        }
-    }
-
     .ring-filter {
         i.i_earth,
         i.i_fire,
@@ -713,20 +265,29 @@ button {
             line-height: unset; // do not have it rised up
         }
     }
-    .directory-item {
+
-        .ring-rarity-rank {
+    .ring-rarity-rank {
-            flex: unset
+        flex: unset
+    }
+}
+
+.not-for-players {
+    filter:brightness(0.5);
+}
+
+.compendium-header {
+    .ring-filter{
+        .selected {
+            filter: drop-shadow(0px 0px 5px yellow);
         }
     }
-
+    .rank-filter {
-    .not-for-players {
+        .selected {
-        filter:brightness(0.5);
+            filter: drop-shadow(0px 0px 5px yellow) drop-shadow(0px 0px 5px yellow) drop-shadow(0px 0px 5px yellow);
+        }
     }
 
     l5r5e-multi-select {
-        select {
-            background: rgba(255, 255, 245, 0.8); // same as the header-search in compendium popout
-        }
         .input-element-tags {
             max-height: 100px;
         }
@@ -860,6 +421,7 @@ button {
     min-width: 240px;
 
     .window-content {
+        background: rgb(255, 250, 230) url("../assets/imgs/bg-l5r.webp") no-repeat;
         [data-application-part="hidden_tabs"] {
             display: none;
         }
@@ -925,7 +487,6 @@ button {
         }
     }
     .window-content {
-        background: none;
         padding: 0;
         .gm-tools-container {
             color: var(--color-text-primary);
@@ -1042,9 +603,6 @@ l5r5e-multi-select:has( > button.gm) {
 
 
 .autocomplete-wrapper {
-    position: relative;
-    display: inline-block;
-
     .autocomplete-list {
         position: absolute;
         border: 1px solid #6e7e6b;

system/templates/compendium/rank-filter.html

@@ -1,4 +1,4 @@
-<div class="flexrow {{type}}-filter number-filter">
+<div class="flexrow l5r5e {{type}}-filter number-filter">
     <label>{{localize (localize 'l5r5e.compendium.filter.{type}' type=type)}}:</label>
 {{#each number}}
 <a data-{{../type}}="{{.}}" data-tooltip="{{localize (localize 'l5r5e.compendium.filter.{type}' type=../type)}} {{.}}">{{.}}</a>

system/templates/compendium/ring-filter.html

@@ -1,4 +1,4 @@
-<div class="flexrow ring-filter number-filter">
+<div class="flexrow l5r5e ring-filter number-filter">
     <label>{{localize 'l5r5e.rings.label'}}:</label>
 <i data-ring="fire" data-ringId="1" data-tooltip="{{localize 'l5r5e.rings.fire'}}" class="i_fire"></i>
 <i data-ring="water" data-ringId="2" data-tooltip="{{localize 'l5r5e.rings.water'}}" class="i_water"></i>

system/templates/compendium/ring-rarity-rank.html

@@ -1,4 +1,4 @@
-<div class="ring-rarity-rank">
+<div class="l5r5e ring-rarity-rank">
     <i {{#if ring}} class="i_{{ring}}" {{/if}}>
         {{#if rarity}} {{localize "l5r5e.sheets.rarity"}} {{rarity}} {{/if}}
         {{#if rank}} {{localize "l5r5e.sheets.rank"}} {{rank}} {{/if}}

system/templates/dice/chat-roll.html

@@ -1,4 +1,4 @@
-<div class="l5r5e dice-roll">
+<div class="l5r5e chat dice-roll">
     {{#if isPublicRoll}}
 
     {{#if l5r5e.stance}}
@@ -71,6 +71,7 @@
     <div class="l5r5e dice-result">
         {{#if l5r5e.dicesTypes.l5r}}
         <div class="l5r5e item-display dices-l5r">
+            <div class="l5r5e dice-container">
             {{!-- Dices list --}}
             {{#each l5r5e.dices}}
                 {{#if this.diceTypeL5r}}
@@ -79,6 +80,7 @@
                     {{/each}}
                 {{/if}}
             {{/each}}
+            </div>
 
             {{!-- Roll & Keep Button --}}
             {{^if l5r5e.dicesTypes.std}}

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

@@ -41,7 +41,9 @@
                     {{/if}}
                     <div>
                         <label id="stance_label">{{localizeSkill data.skill.cat data.ring.id}}</label>
-                        <div id="skill_default_value" class="dice-container pointer-choice">
+                    </div>
+                    <div id="skill_default_value" class="pointer-choice">
+                        <div class="dice-container">
                             <img src="systems/l5r5e/assets/dices/default/skill_blank.svg" alt="1">
                             <div class="dice-value">
                                 <span class="dice-skill" type="text" name="skill_{{data.skill.name}}">{{data.skill.defaultValue}}</span>
@@ -155,22 +157,19 @@
                 {{/if}}
             </td>
             <td>
-                <div class="third">
-                    <i class="assistance pointer-choice fa fa-minus-square" data-item="assistance" data-value="-1"></i>
-                </div>
 
                 <div class="third">
                     <i class="i_skill"></i> {{localize 'l5r5e.dice.dicepicker.skill_assistance_label'}}
+                    <div class="assistance dice-container">
+                    <i class="assistance pointer-choice fa fa-minus-square" data-item="assistance" data-value="-1"></i>                    
                     <div class="dice-container">
                         <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" />
                         </div>
                     </div>
-                </div>
-
-                <div class="third">
                     <i class="assistance pointer-choice fa fa-plus-square" data-item="assistance" data-value="1"></i>
+                    </div>
                 </div>
             </td>
         </tr>

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

@@ -1,4 +1,4 @@
-<nav class="encounters flexrow" id="l5r5e_gm_combat_tracker_bar">
+<nav class="encounters flexrow l5r5e" id="l5r5e_gm_combat_tracker_bar">
     <ul class="encounter">
         {{#each encounterTypeList}}
             <li class="encounter encounter-control" data-id="{{this}}">