Merge branch 'issue_75_gm_toolbox_and_monitor_visibility_issues' into 'dev'

issue 75: Unable to see icons in GM ToolBox and text in GM Monitor

See merge request teaml5r/l5r5e!59

system/scripts/gm/gm-monitor.js

@@ -166,6 +166,15 @@ export class GmMonitor extends HandlebarsApplicationMixin(ApplicationV2) {
                 }
             }
         );
+
+        // Apply global interface theme if it is set
+        if (!this.options.classes.includes("themed")) {
+            this.element.classList.remove("theme-light", "theme-dark");
+            const {colorScheme} = game.settings.get("core", "uiConfig");
+            if (colorScheme.interface) {
+                this.element.classList.add("themed", `theme-${colorScheme.interface}`);
+            }
+        }
     }
 
     /** @override ApplicationV2 */

system/scripts/gm/gm-toolbox.js

@@ -5,10 +5,11 @@ export class GmToolbox extends HandlebarsApplicationMixin(ApplicationV2) {
     /** @override ApplicationV2 */
     static get DEFAULT_OPTIONS() { return {
         id: "l5r5e-gm-toolbox",
+        classes: ["faded-ui"],
         window: {
-            contentClasses: ["l5r5e", "gm-toolbox", "faded-ui"],
+            contentClasses: ["l5r5e", "gm-toolbox"],
             title: "l5r5e.gm.toolbox.title",
-            minimizable: true,
+            minimizable: false,
         },
         position: {
             width: "auto",
@@ -89,6 +90,19 @@ export class GmToolbox extends HandlebarsApplicationMixin(ApplicationV2) {
         options.position.left = 220; //x - 630;
     }
 
+    async _onRender(context, options) {
+        await super._onRender(context, options);
+
+        if (this.options.classes.includes("themed")) {
+            return;
+        }
+        this.element.classList.remove("theme-light", "theme-dark");
+        const {colorScheme} = game.settings.get("core", "uiConfig");
+        if (colorScheme.interface) {
+            this.element.classList.add("themed", `theme-${colorScheme.interface}`);
+        }
+    }
+
     /**
      * The GM Toolbox should not be removed when toggling the main menu with the esc key etc.
      * @override ApplicationV2

system/styles/scss/colors.scss

@@ -65,6 +65,7 @@ $l5r5e-water: rgb(95, 145, 155);
 $l5r5e-fire: rgb(155, 115, 80);
 // Void
 $l5r5e-void: rgb(75, 70, 65);
+$l5r5e-void-light: rgba(207,207,207,.8);
 
 // -- Clans
 

system/styles/scss/ui.scss

@@ -20,6 +20,8 @@
     // selection ring
     --l5r5e-filter-selected-opacity: 0.6;
     --l5r5e-filter-selected-tint: invert(1) sepia(1) saturate(4) hue-rotate(5deg); // → gold
+    
+    --l5r5e-gm-monitor-void-icon: #{$l5r5e-void-light};
 }
 
 @mixin theme-light {
@@ -42,6 +44,8 @@
     // selection ring
     --l5r5e-filter-selected-opacity: 0.45;
     --l5r5e-filter-selected-tint: invert(0.15) sepia(1) saturate(6) hue-rotate(295deg) brightness(0.7); // → deep red
+
+    --l5r5e-gm-monitor-void-icon: #{$l5r5e-void};
 }
 
 body.theme-light {
@@ -570,7 +574,7 @@ button {
             top: 0;
 
             i.i_void:before {
-                color: rgba(207,207,207,.8);
+                color: $l5r5e-void-light;
             }
         }
         th,
@@ -591,6 +595,10 @@ button {
         .badvalue {
             color: #ab2a00;
         }
+
+        .i_void:before {
+            color: var(--l5r5e-gm-monitor-void-icon);
+        }
     }
     // hide "search anywhere" draggable icon
     .window-draggable-handle {
@@ -600,11 +608,6 @@ button {
 
 #l5r5e-gm-toolbox {
     display: flex;
-    background: linear-gradient(
-        $l5r5e-linear-gradient-second,
-        $l5r5e-linear-gradient-second-dark,
-        $l5r5e-linear-gradient-second
-    );
     border: 1px solid rgb(195, 165, 130);
     margin: 0.5rem;
     .window-header {
@@ -617,7 +620,7 @@ button {
         h1 {
             letter-spacing: 0.25rem;
             line-height: 2.25rem;
-            color: $white-light;
+            color: var(--color-text-emphatic);
             padding-top: 1ch;
         }
     }
@@ -643,7 +646,7 @@ button {
                     border: 0 none;
                 }
                 :hover {
-                    text-shadow: 0 0 $red;
+                    text-shadow: 0px 0px 5px $red;
                 }
             }
             .difficulty_hidden {

system/templates/gm/gm-toolbox.html

@@ -1,19 +1,19 @@
 <form class="l5r5e gm-toolbox" autocomplete="off">
     <ul class="gm-tools-container">
-        <li class="faded-ui gm_monitor" data-action="open_gm_monitor" title="{{localize 'l5r5e.gm.monitor.title'}}">
+        <li class="gm_monitor" data-action="open_gm_monitor" title="{{localize 'l5r5e.gm.monitor.title'}}">
             <i class="fas fa-table"></i>
         </li>
         <li class="difficulty_hidden" data-action="toggle_hide_difficulty" title="{{localize 'l5r5e.gm.toolbox.difficulty_hidden'}}">
-            <i class="faded-ui fa fa-eye{{#if difficultyHidden}}-slash{{/if}}"></i>
+            <i class="fa fa-eye{{#if difficultyHidden}}-slash{{/if}}"></i>
-            <strong class="faded-ui difficulty" data-action="change_difficulty" title="{{localize 'l5r5e.gm.toolbox.difficulty'}}">{{difficulty}}</strong>
+            <strong class="difficulty" data-action="change_difficulty" title="{{localize 'l5r5e.gm.toolbox.difficulty'}}">{{difficulty}}</strong>
         </li>
-        <li class="faded-ui gm_actor_updates reset_void" data-action="reset_void" title="{{localize 'l5r5e.gm.toolbox.reset_void'}}">
+        <li class="gm_actor_updates reset_void" data-action="reset_void" title="{{localize 'l5r5e.gm.toolbox.reset_void'}}">
             <i class="fas fa-podcast"></i>
         </li>
-        <li class="faded-ui gm_actor_updates sleep" data-action="sleep" title="{{localize 'l5r5e.gm.toolbox.sleep'}}">
+        <li class="gm_actor_updates sleep" data-action="sleep" title="{{localize 'l5r5e.gm.toolbox.sleep'}}">
             <i class="fa fa-bed"></i>
         </li>
-        <li class="faded-ui gm_actor_updates scene_end" data-action="scene_end" title="{{localize 'l5r5e.gm.toolbox.scene_end'}}">
+        <li class="gm_actor_updates scene_end" data-action="scene_end" title="{{localize 'l5r5e.gm.toolbox.scene_end'}}">
             <i class="fas fa-star-half-alt"></i>
         </li>
     </ul>