Updating to v13, various changes to make it work

2025-05-30 08:58:14 +00:00
parent 897ccefd71
commit 1649c2b032
16 changed files with 384 additions and 767 deletions
--- a/system/scripts/hooks.js
+++ b/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() {
--- a/system/styles/conf/l5r5e.scss
+++ b/system/styles/conf/l5r5e.scss
@@ -1,14 +1,16 @@
+@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 {
+        @import "../scss/dices";
+        @import "../scss/l5r5e-global";
        @import "../scss/dices-chat";
        @import "../scss/sheets";
        @import "../scss/npc";
@@ -19,3 +21,4 @@
        @import "../scss/items";
        @import "../scss/twenty-questions";
    }
+}
--- a/system/styles/l5r5e.css
+++ b/system/styles/l5r5e.css
--- a/system/styles/scss/dices-chat.scss
+++ b/system/styles/scss/dices-chat.scss
@@ -1,4 +1,6 @@
 // Dice in chat
+&.chat.dice-roll {
+
    .chat-dice {
        display: inline;
        position: relative;
@@ -49,8 +51,6 @@
        > img {
            border: 1px solid transparent;
            height: auto;
-        width: calc(100% / 6 - 0.255rem);
-        margin: auto;
        }
    }
    td {
@@ -84,3 +84,118 @@ td {
            }
        }
    }
+    .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;
+    }
+}
--- a/system/styles/scss/dices.scss
+++ b/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-dice {
-        width: 20px;
-        color: #0f0f0e;
-        background: none;
-        border: none;
-        font-size: large;
-        padding: 0;
-
-        &-ring {
+    input[name="ring.value"][type="text"] {
        color: #f0f0e0;
+        border: unset;
+        background: unset;
    }
-
-        &-skill {
+    input[name="skill.value"][type="text"] {
        color: #0f0f0e;
+        border: unset;
+        background: unset;
    }
+    input[name="difficulty.value"][type="text"] {
+        color: #0f0f0e;
+        border: unset;
+        background: unset;
+    }
+    input[name="skill.assistance"][type="text"] {
+        color: #0f0f0e;
+        border: unset;
+        background: unset;
    }
 }

--- a/system/styles/scss/global-appv2.scss
+++ b/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;
+        }
+    }
+}
--- a/system/styles/scss/global.scss
+++ b/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;
    }
 }
+
--- a/system/styles/scss/l5r5e-global.scss
+++ b/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;
+}
--- a/system/styles/scss/sheets.scss
+++ b/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),
--- a/system/styles/scss/ui.scss
+++ b/system/styles/scss/ui.scss
@@ -21,442 +21,11 @@ button {
    }
 }

-// sidebar
-#sidebar {
-    padding: 0.5rem 0.25rem 0.5rem 0.5rem;
-    background-position: top;
-    background-size: 100%;
-    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;
+    ul,li {
+        list-style: none;
+        margin: unset;
+        padding: unset;
    }
 }

@@ -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,
-.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);
-        }
-    }
-
+.directory-item {    
    .ring-filter {
        i.i_earth,
        i.i_fire,
@@ -713,7 +265,7 @@ button {
            line-height: unset; // do not have it rised up
        }
    }
-    .directory-item {
+
    .ring-rarity-rank {
        flex: unset
    }
@@ -723,10 +275,19 @@ button {
    filter:brightness(0.5);
 }

-    l5r5e-multi-select {
-        select {
-            background: rgba(255, 255, 245, 0.8); // same as the header-search in compendium popout
+.compendium-header {
+    .ring-filter{
+        .selected {
+            filter: drop-shadow(0px 0px 5px yellow);
        }
+    }
+    .rank-filter {
+        .selected {
+            filter: drop-shadow(0px 0px 5px yellow) drop-shadow(0px 0px 5px yellow) drop-shadow(0px 0px 5px yellow);
+        }
+    }
+
+    l5r5e-multi-select {
        .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;
--- a/system/templates/compendium/rank-filter.html
+++ b/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>
--- a/system/templates/compendium/ring-filter.html
+++ b/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>
--- a/system/templates/compendium/ring-rarity-rank.html
+++ b/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}}
--- a/system/templates/dice/chat-roll.html
+++ b/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}}
--- a/system/templates/dice/dice-picker-dialog.html
+++ b/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,23 +157,20 @@
                {{/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>
        <tr>
--- a/system/templates/gm/combat-tracker-bar.html
+++ b/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}}">