v1.3.2

- Added compatibility with TheRipper93's Module Hub Dice Tray;
- Adjusted background colors for hit/miss in chat cards;
- Added setting for controlling size of icons;
- Adjusted font-size for some elements of side panel;
- Fixed minor bug when not using video camera dock;

README.md

@@ -1,4 +1,4 @@
-**Latest Version:** 1.3.1
+**Latest Version:** 1.3.2
 
 **Compatibility:** 
 - Foundry VTT version 12.328+
@@ -46,6 +46,7 @@ A light module that provides a sleek minimalist UI overhaul, focusing on saving
 - Monk's Hotbar Expansion 11.0.x
 - Ready Set Roll 5e 3.4.x
 - Taskbar 4.1.x
+- TheRipper93's Module Hub 4.1.x
 - Touch VTT 2.2.x
 
 I have also verified PF2e HUD, but I do not play PF2e so there might be issues I haven't noticed.

dist/module.json

@@ -1,7 +1,7 @@
 {
   "id": "crlngn-ui",
   "title": "Carolingian UI",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Style changes and tweaks to improve look and feel of Foundry UI",
   "url": "https://github.com/crlngn/crlngn-ui",
   "manifest": "https://github.com/crlngn/crlngn-ui/releases/latest/download/module.json",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "crlngn-ui",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Tweaks and style adjustments to improve UI on Foundry",
   "license": "MIT",
   "private": true,

src/components/CameraUtil.mjs

@@ -56,7 +56,7 @@ export class CameraUtil {
     const existingButtons = camControls?.querySelectorAll(".crlngn-video-toggle");
     LogUtil.log("placeControlsToggle", [camControls, existingButtons]);
 
-    if(existingButtons.length > 0){
+    if(existingButtons?.length > 0){
       return; 
     }
 
@@ -72,7 +72,7 @@ export class CameraUtil {
     CameraUtil.cameraContainer?.addEventListener("mousedown", (e) => {
       const body = document.querySelector("body.crlngn-ui");
       LogUtil.log("mousedown", [ e.target ]);
-      if(e.target.parentNode.classList.contains('volume-bar')){
+      if(e.target.parentNode?.classList.contains('volume-bar')){
         return;
       }
       body?.addEventListener("mousemove", CameraUtil.#onDragMove);

src/components/SettingsUtil.mjs

@@ -29,6 +29,9 @@ export class SettingsUtil {
           requiresReload: setting.requiresReload || false,
           onChange: value => SettingsUtil.apply(setting.tag, value)
         }
+        if(setting.choices){
+          settingObj.choices = setting.choices
+        }
 
         await game.settings.register(MODULE_ID, setting.tag, settingObj);
 
@@ -58,6 +61,10 @@ export class SettingsUtil {
         const root = document.querySelector("body.crlngn-ui");
         root.style.setProperty('--crlngn-font-family', customFont);
       }
+
+      // apply icon size setting
+      const iconSizeOption = SettingsUtil.get(SETTINGS.controlIconSize.tag);
+      if(iconSizeOption) SettingsUtil.applyControlIconSize(iconSizeOption);
     }
 
     /**
@@ -140,6 +147,8 @@ export class SettingsUtil {
           SettingsUtil.applyCameraWidth(value); break;
         case SETTINGS.cameraDockHeight.tag:
           SettingsUtil.applyCameraHeight(value); break;
+        case SETTINGS.controlIconSize.tag:
+          SettingsUtil.applyControlIconSize(value); break;
         default:
           // do nothing
       }
@@ -211,9 +220,17 @@ export class SettingsUtil {
       const width = value || SettingsUtil.get(SETTINGS.cameraDockWidth.tag);
       CameraUtil.resetPositionAndSize({ w: width });
     }
+
     static applyCameraHeight(value){
       const height = value || SettingsUtil.get(SETTINGS.cameraDockHeight.tag); 
       CameraUtil.resetPositionAndSize({ h: height });
     }
+
+    static applyControlIconSize(value){
+      const root = document.querySelector("body.crlngn-ui");
+      const size = value == 1 ? '36px' : '42px';
+
+      root.style.setProperty('--left-control-item-size', size);
+    }
 }
 

src/constants/Settings.mjs

@@ -194,5 +194,21 @@ export const SETTINGS = {
     default: 120, 
     scope: SETTING_SCOPE.client, 
     config: true 
+  } ,
+
+  controlIconSize: { 
+    tag: "conrol-icon-size", 
+    label: "Size of control icons", 
+    hint: "If you use a very large screen, you may want to change the size of the icons on left controls. This may affect some other UI elements", 
+    propType: Number, 
+    choices: {
+      1: "small",
+      2: "normal"
+    },
+    inputType: SETTING_INPUT.number, 
+    default: 1, 
+    scope: SETTING_SCOPE.client, 
+    config: true 
   } 
+
 }

src/module.json

@@ -1,7 +1,7 @@
 {
   "id": "crlngn-ui",
   "title": "Carolingian UI",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Style changes and tweaks to improve look and feel of Foundry UI",
   "url": "https://github.com/crlngn/crlngn-ui",
   "manifest": "https://github.com/crlngn/crlngn-ui/releases/latest/download/module.json",

src/styles/chat.css

@@ -114,13 +114,14 @@ body.crlngn-chat {
     font-style: italic;
     letter-spacing: 0.02em;
     margin-top:3px;
-    font-size: var(--font-size-10);
+    font-size: var(--font-size-11);
   }
 
   :is(.chat-popout, #chat-log, .chat-log) .message:not(.ddbgl) .message-header .flavor-text {
-    /*text-transform: uppercase;*/
+    text-transform: uppercase;
     letter-spacing: 0.02em;
-    font-size: var(--font-size-10);
+    font-size: var(--font-size-11);
+    line-height: 1.4;
     /*display: none !important;*/
   }
 
@@ -372,7 +373,7 @@ body.crlngn-chat {
   section.card-header.description.rsr-section-attack,
   section.card-header.description.rsr-section-damage {
     padding: 0;
-    background: transparent;
+    /*background: transparent;*/
   }
 
   .chat-message .message-content .midi-results{
@@ -381,15 +382,18 @@ body.crlngn-chat {
   /* Chat card layout - end */
 
   /*********
-  * PF2E 
+  DARK MODE 
   **********/
-  &.theme-dark.system-pf2e .chat-message .flavor-text > * {
-    margin: 0.5em 0;
+
+  &.theme-dark,
+  &[data-ddb-custom-style=dark] {
+    --dnd5e-color-success-background: rgba(71, 160, 71, 0.35);
+    --dnd5e-color-failure-background: rgba(151, 67, 67, 0.35); 
   }
 
   /*********
-  DARK MODE 
-  **********/
+  * DND5e */
+
   /* CHAT MESSAGE CARD */
   &.theme-dark .chat-message,
   &[data-ddb-custom-style=dark] .chat-message,
@@ -401,6 +405,22 @@ body.crlngn-chat {
     border: 2px solid #182026;
   }
 
+  &.theme-dark .chat-message .table-draw .table-results .table-result,
+  &[data-ddb-custom-style=dark] .chat-message .table-draw .table-results .table-result {
+    align-items: flex-start;
+
+    p{
+      margin: 0;
+    }
+  }
+
+  &.theme-dark .chat-message .table-draw .table-results .table-result img.result-image,
+  &[data-ddb-custom-style=dark] .chat-message .table-draw .table-results .table-result img.result-image {
+    border: none;
+    filter: invert(1);
+  }
+
+
   &.theme-dark .chat-message.whisper,
   &[data-ddb-custom-style=dark] .chat-message.whisper {
     border: 2px dotted #182026;
@@ -411,7 +431,9 @@ body.crlngn-chat {
     opacity: 0.2;
   }
   &.theme-dark .chat-message a.content-link, 
-  &.theme-dark .chat-message a.inline-roll {
+  &.theme-dark .chat-message a.inline-roll,
+  &[data-ddb-custom-style=dark]  .chat-message a.content-link,
+  &[data-ddb-custom-style=dark]  .chat-message a.inline-roll {
     background: rgb(32, 47, 58, 1); 
     color: var(--color-text-light-5);
     opacity: 0.7;
@@ -420,6 +442,7 @@ body.crlngn-chat {
   &[data-ddb-custom-style=dark] .chat-message .message-content {
     color: #989fa5;
   }
+  &.theme-dark .chat-message.ddb-game-log-message .message-content .ddb-card-content a,
   &[data-ddb-custom-style=dark] .chat-message.ddb-game-log-message .message-content .ddb-card-content a {
     color:#4d97c9;
   }
@@ -443,6 +466,7 @@ body.crlngn-chat {
   }
 
   /* message content */
+  &.theme-dark .chat-message.ddb-game-log-message .message-content .ddb-game-log-chat-card .ddb-card-content a,
   &[data-ddb-custom-style=dark] .chat-message.ddb-game-log-message .message-content .ddb-game-log-chat-card .ddb-card-content a {
     color:#4d97c9;
   }
@@ -454,6 +478,14 @@ body.crlngn-chat {
     opacity: 0.35;
   }
 
+  &.theme-dark .dice-tooltip .dice-rolls .roll.discarded, 
+  &.theme-dark .dice-tooltip .dice-rolls .roll.rerolled,
+  &[data-ddb-custom-style=dark] .dice-tooltip .dice-rolls .roll.discarded, 
+  &[data-ddb-custom-style=dark] .dice-tooltip .dice-rolls .roll.rerolled {
+    color: rgba(0,0,0,0.65);
+    filter: contrast(1) opacity(0.6) invert(1);
+  }
+
   &.theme-dark .chat-message .message-content .dice-result .dice-formula, 
   &.theme-dark .chat-message.ddb-game-log-message .dice-result .dice-formula,
   &.theme-dark .chat-message .message-content .dice-result .dice-total, 
@@ -496,6 +528,8 @@ body.crlngn-chat {
   &[data-ddb-custom-style=dark] .chat-message .message-content {
     color: #cad1d6;
   }
+  &.theme-dark .chat-message.ddb-game-log-message .dice-formula, 
+  &.theme-dark .chat-message.ddb-game-log-message .dice-total,
   &[data-ddb-custom-style=dark] .chat-message.ddb-game-log-message .dice-formula, 
   &[data-ddb-custom-style=dark] .chat-message.ddb-game-log-message .dice-total {
     border: 1px solid #000;
@@ -533,10 +567,15 @@ body.crlngn-chat {
     border: 0;
     padding: 0.5rem 0;
   }
+
+  /*
   &.theme-dark .chat-card .description.rsr-section-attack,
-  &.theme-dark .chat-card .description.rsr-section-damage{
+  &.theme-dark .chat-card .description.rsr-section-damage,
+  &[data-ddb-custom-style=dark] .chat-card .description.rsr-section-attack,
+  &[data-ddb-custom-style=dark] .chat-card .description.rsr-section-damage{
     background: transparent;
-  }
+  }*/
+
   &.theme-dark .crlngn.chat-card .description .details,
   &[data-ddb-custom-style=dark] .crlngn.chat-card .description .details,
   &.theme-dark .crlngn.chat-card .message-content .description .details p,
@@ -563,15 +602,17 @@ body.crlngn-chat {
   &.theme-dark .card-tray .target-source-control button,
   &.theme-dark .chat-message .message-content button,
   &[data-ddb-custom-style=dark] :is(.card-tray, .effects-tray) .target-source-control button, 
-  &[data-ddb-custom-style=dark] .card-tray .target-source-control button {
+  &[data-ddb-custom-style=dark] .card-tray .target-source-control button,
+  &[data-ddb-custom-style=dark] .chat-message .message-content button {
     color: var(--color-text-dark);
   }
 
   &.theme-dark .dnd5e2:not(.chat-card, .create-document) button:not(.pip):hover, 
   &.theme-dark .dnd5e-theme-dark button:not(.pip):hover,
   &.theme-dark .chat-message .message-content button:hover,
   &[data-ddb-custom-style=dark] .dnd5e2:not(.chat-card, .create-document) button:not(.pip):hover, 
-  &[data-ddb-custom-style=dark] .dnd5e-theme-dark button:not(.pip):hover {
+  &[data-ddb-custom-style=dark] .dnd5e-theme-dark button:not(.pip):hover,
+  &[data-ddb-custom-style=dark] .chat-message .message-content button:hover {
     border-color: rgba(0,0,0);
     background: #000;
     color: #ccc;
@@ -604,6 +645,7 @@ body.crlngn-chat {
   &[data-ddb-custom-style=dark] :is(.chat-popout, #chat-log) .message .evaluation .target {
     color: #fff;
     padding: 6px 8px;
+    /*background: transparent;*/
   }
   &.theme-dark :is(.chat-popout, #chat-log) .message .evaluation .target.hit,
   &.theme-dark :is(.chat-popout, #chat-log) .message .evaluation .target.success,
@@ -642,7 +684,6 @@ body.crlngn-chat {
     }
   }
 
-
   /* inline rolls  */
   &.theme-dark :is(.dnd5e2, .dnd5e2-journal) a:is(.content-link, .inline-roll) > i, 
   &.theme-dark :is(.dnd5e2, .dnd5e2-journal) :is(.roll-link, .reference-link) a > i,
@@ -710,6 +751,9 @@ body.crlngn-chat {
     --visibility-gm-bg: rgba(255,255,255,0.1)
     --visibility-owner-bg: rgba(235,235,235,0.1)
   }
+  &.theme-dark.system-pf2e .chat-message .flavor-text > * {
+    margin: 0.5em 0;
+  }
 
   &.theme-dark.system-pf2e .chat-message .message-header .tag {
     color: rgba(255,255,255,0.6);

src/styles/other-modules.css

@@ -28,7 +28,7 @@ body.crlngn-ui{
     ol.context-items li.context-item {
       width: 100%;
       padding: 0 6px;
-      font-size: var(--font-size-11);
+      font-size: var(--font-size-12);
       line-height: var(--font-size-24);
       text-align: left;
     }
@@ -59,11 +59,33 @@ body.crlngn-ui{
 
   /* VISUAL ACTIVE EFFECTS */
   .visual-active-effects.panel {
-    --visual-active-effects-icon-size: var(--left-control-item-size);
-    --visual-active-effects-top-offset: 45px;
+    /*--visual-active-effects-icon-size: calc(var(--left-control-item-size) * 1.5);*/
+    --visual-active-effects-top-offset: calc(var(--left-control-item-size) * 1.5);
   }
 
   #taskbar{
     z-index: 1001;
   }
+
+  /* RIPPER93 MODULE HUB */
+  button.dice-tray-button{
+    box-shadow: none;
+    &[data-button=adv],
+    &[data-button=dis]{
+      font-weight: 600;
+      background: var(--left-control-main-bg);
+      border-radius: 2px;
+
+      &:hover{
+        box-shadow: none;
+      }
+    }
+  }
+
+  /* MIDI-QOL */
+  :is(.chat-popout, #chat-log) .message .dnd5e2.evaluation .midi-qol.target > img {
+    border: none !important;
+    border-radius: 0 !important;
+  }
+
 }

src/styles/ui-left.css

@@ -1,5 +1,5 @@
 :root{
-  --left-control-item-size: 34px;
+  --left-control-item-size: 36px;
   --left-control-main-bg: rgba(20, 20, 20, 0.85); 
   --left-control-secondary-bg: rgba(50, 50, 70, 0.75);
 }