Fix marge on sheet + fix nav on 20Q + clean imgs

system/styles/scss/colors.scss

@@ -25,10 +25,12 @@ $l5r5e-label-light: rgba(90, 110, 90, 0.25);
 $l5r5e-red: rgb(150, 60, 65);
 // color white 0.5
 $l5r5e-white: rgba(255, 255, 255, 0.5);
-// color white 0.5
+// color white 0.2
 $l5r5e-white-light: rgba(255, 255, 255, 0.25);
 // color black 0.5
 $l5r5e-black: rgba(0, 0, 0, 0.5);
+// color black 0.25
+$l5r5e-black-light: rgba(0, 0, 0, 0.25);
 // color border sidebar
 $l5r5e-border-sidebar: rgb(195, 165, 130);
 

system/styles/scss/global.scss

@@ -1,7 +1,7 @@
 /** Global **/
 
 body {
-    background: url("../assets/imgs/background.webp") no-repeat center;
+    background: url("../assets/imgs/bg-table.webp") no-repeat center;
     background-size: cover;
     > * {
         scrollbar-width: thin;
@@ -13,8 +13,9 @@ body {
     .window-content {
         z-index: 1;
         position: relative;
-        background: url("../assets/imgs/bgL5R.webp") no-repeat;
+        background: rgb(255, 250, 230) url("../assets/imgs/bg-l5r.webp") no-repeat;
         background-size: cover;
+        overflow-y: scroll;
         scrollbar-width: thin;
     }
     .window-resizable-handle {
@@ -23,7 +24,7 @@ body {
     }
     &.twenty-questions-dialog {
         .window-content {
-            background: url("../assets/imgs/bg20Q.webp") no-repeat;
+            background: rgb(255, 250, 230) url("../assets/imgs/bg-scroll.webp") no-repeat;
             background-size: cover;
         }
     }

system/styles/scss/npc.scss

@@ -20,6 +20,9 @@
             min-height: 2rem;
             width: 100%;
         }
+        .header-fields {
+            padding: 0 0.25rem;
+        }
         .identity-wrapper {
             flex: 1 1 100%;
             h1 {
@@ -90,6 +93,9 @@
             }
         }
     }
+    .sheet-body {
+        padding: 0.25rem;
+    }
     .npc-skill {
         display: flex;
         width: 100%;

system/styles/scss/sheets.scss

@@ -8,10 +8,10 @@
     }
     &.actor {
         .sheet-header {
-            height: 28rem;
+            height: 27rem;
         }
         .sheet-body {
-            height: calc(100% - 28rem);
+            height: calc(100% - 27rem);
         }
         .techniques-wrapper {
             fieldset {
@@ -94,7 +94,7 @@
             &:before {
                 content: "";
                 position: absolute;
-                background: url("../assets/imgs/brushL5r.webp") no-repeat 0 0;
+                background: url("../assets/imgs/brush.webp") no-repeat 0 0;
                 background-size: contain;
                 height: 225px;
                 width: 100%;
@@ -128,12 +128,13 @@
             flex: 0 0 100%;
             h2 {
                 font-family: $font-secondary;
+                font-size: 1rem;
                 float: left;
                 width: 30%;
-                padding: 0 0.25rem;
+                padding: 0.25rem 0.25rem 0;
                 margin: 1rem 20% 0 0;
                 text-align: center;
-                color: $l5r5e-red;
+                color: $l5r5e-black-light;
                 text-shadow: 0 0 1px $l5r5e-label-light;
                 border-bottom: 0 none;
                 background: $l5r5e-title;
@@ -274,7 +275,7 @@
                 color: $l5r5e-label;
                 text-transform: uppercase;
                 font-size: 0.75rem;
-                height: 3rem;
+                height: 2.5rem;
                 margin: 0.25rem 0;
                 flex-direction: row-reverse;
                 strong {
@@ -283,10 +284,10 @@
                 input {
                     flex: 0 0 3rem;
                     margin: 0 0.25rem;
-                    height: 2.5rem;
+                    height: 2rem;
                     &[disabled] {
                         flex: 0 0 3rem;
-                        background: transparent;
+                        background: $l5r5e-white-light;
                     }
                 }
             }
@@ -334,7 +335,7 @@
             .composure-content {
                 input {
                     &[disabled] {
-                        flex: 0 0 4.75rem;
+                        flex: 0 0 5rem;
                         padding-right: 3rem;
                     }
                 }
@@ -355,7 +356,7 @@
                             position: absolute;
                             right: 2.9rem;
                             font-size: 1rem;
-                            bottom: 0.8rem;
+                            bottom: 0.6rem;
                             color: $l5r5e-bold;
                         }
                     }
@@ -383,12 +384,14 @@
                     display: none;
                     z-index: 2;
                     position: absolute;
-                    background: rgba(0, 0, 0, 0.5);
+                    background: $l5r5e-black;
-                    color: #fff;
+                    color: $white;
-                    height: auto;
+                    line-height: 1.5rem;
+                    text-align: center;
+                    width: 100%;
                     padding: 0.25rem;
-                    bottom: -1rem;
+                    bottom: -2.25rem;
-                    right: 0;
+                    right: -0.25rem;
                     --notchSize: 0.5rem;
                     clip-path: polygon(
                         0% 0,

system/styles/scss/twentyquestions.scss

@@ -1,12 +1,26 @@
 &.twenty-questions-dialog {
     .sheet-tabs {
-        float: left;
+        position: fixed;
         flex-direction: column;
-        width: 9%;
+        background: url("../assets/imgs/bg-20nav.webp") no-repeat;
-        height: 100%;
+        background-size: cover;
-        margin: 7% 4.75%;
+        width: 5%;
-        padding: 0;
+        height: 52vw;
+        margin: 1%;
+        line-height: 5rem;
+        padding: 0.25rem;
         border-bottom: 0 none;
+    }
+    h3 {
+        font-size: 1rem;
+        color: $l5r5e-label;
+    }
+    nav {
+        .item {
+            background-color: $l5r5e-white-light;
+            &.active,
+            &:hover {
+                background-color: rgba(73, 12, 11, 0.85);
                 --notchSize: 0.5rem;
                 clip-path: polygon(
                     0% var(--notchSize),
@@ -19,21 +33,13 @@
                     0% calc(100% - var(--notchSize))
                 );
             }
-    h3 {
-        font-size: 1rem;
-        color: $l5r5e-label;
-    }
-    nav {
-        .item {
-            &.active,
             &:hover {
-                clip-path: none;
+                background-color: $l5r5e-label;
             }
         }
     }
     article {
-        float: left;
+        padding: 2% 2% 0 18%;
-        width: 80%;
         label {
             &.full {
                 display: block;
@@ -50,7 +56,11 @@
             width: 100%;
         }
         table tr td {
-            vertical-align: top;
+            vertical-align: middle;
+            line-height: 2rem;
+            border: 1px solid $l5r5e-title;
+            font-size: 0.85rem;
+            padding: 0.25rem;
         }
         .third {
             width: 230px;

system/styles/scss/ui.scss

@@ -280,7 +280,7 @@ button {
     }
     .message-sender {
         color: $l5r5e-red;
-        text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
+        text-shadow: 1px 1px 0px $l5r5e-black-light;
     }
     .message {
         background-color: $l5r5e-chat-color-light;

system/templates/actors/twenty-questions-dialog.html

@@ -4,7 +4,6 @@
     {{/if}}
 
     <div class="content">
-        <section class="sheet-body">
         <nav class="sheet-tabs tabs" data-group="primary">
             <a class="item" data-tab="part0">?</a>
             <a class="item" data-tab="part1">I</a>
@@ -15,6 +14,7 @@
             <a class="item" data-tab="part6">VI</a>
             <a class="item" data-tab="part7">VII</a>
         </nav>
+        <section class="sheet-body">
             <article class="tab parts part0" data-group="primary" data-tab="part0">
                 <h1>{{localize 'l5r5e.twenty_questions.title'}}</h1>
                 {{localize 'l5r5e.twenty_questions.part0.intro'}}
@@ -600,27 +600,26 @@
                     </tr>
                     <tr>
                         <td>
+                            <ul>
                                 {{#each summary.summary.rings}}
-                                {{this}}
+                                    <li>{{this}}</li>
                                 {{/each}}
+                            </ul>
                         </td>
                         <td>
+                            <ul>
                                 {{#each summary.summary.skills}}
-                                {{this}}
+                                    <li>{{this}}</li>
                                 {{/each}}
+                            </ul>
                         </td>
                         <td>
-                            {{localize 'l5r5e.twenty_questions.part1.status'}}
+                            <ul>
-                            {{summary.summary.status}}
+                                <li>{{localize 'l5r5e.twenty_questions.part1.status'}} ({{summary.social.status}})</li>
-
+                                <li>{{localize 'l5r5e.twenty_questions.part1.glory'}} ({{summary.social.glory}})</li>
-                            {{localize 'l5r5e.twenty_questions.part1.glory'}}
+                                <li>{{localize 'l5r5e.twenty_questions.part2.honor'}} ({{summary.social.honor}})</li>
-                            {{summary.summary.glory}}
+                                <li>{{localize 'l5r5e.twenty_questions.part1.money'}} ({{data.step2.wealth}})</li>
-
+                            </ul>
-                            {{localize 'l5r5e.twenty_questions.part2.honor'}}
-                            {{summary.summary.honor}}
-
-                            {{localize 'l5r5e.twenty_questions.part1.money'}}
-                            {{data.step2.wealth}}
                         </td>
                     </tr>
                 </table>