3.1.13

Dorako · Dec 2, 2023 · 4603f28 · 4603f28
1 parent 610ea80
commit 4603f28
Show file tree

Hide file tree

Showing 32 changed files with 1,003 additions and 724 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# 3.1.13
+
+- (Refinement) Bunch of tweaks, including tweaks to crb-styled chat message headers.
+- (Fix) Fixed certain themes not having toggle button variables.
+- (Refinement) Found a way to still style the sidebar, without having styling from the sidebar trickle into the chat messages.
+- (New) Added purple and black PC sheet color themes.
+
 # 3.1.12
 
 - (Refinement) Bunch of changes, including restyling of the navigation bar, and changes to toggles.

diff --git a/esmodules/consts.js b/esmodules/consts.js
@@ -37,4 +37,4 @@ export const unlimitedScopeApplications = ["PlaylistDirectory"];
 /* ----------------------------------------- */
 /* Excluded                                  */
 /* ----------------------------------------- */
-export const excludedApplications = ["ItemMenuApp","LevelsUI", "SpecialEffectsManagement", "ParticleEffectsManagement", "FilterEffectsManagementConfig"]; //"ChatLogPF2e"
+export const excludedApplications = ["ChatLogPF2e","ItemMenuApp","LevelsUI", "SpecialEffectsManagement", "ParticleEffectsManagement", "FilterEffectsManagementConfig"]; //
diff --git a/esmodules/message-hooks.js b/esmodules/message-hooks.js
@@ -9,6 +9,9 @@ const rgb2hex = (rgb) =>
 
 Hooks.on("renderChatMessage", (chatMessage, html, messageData) => {
   html[0].dataset.colorScheme = getMessageColorScheme(chatMessage, html, messageData);
+  if (html[0].hasAttribute("style")) {
+    html.css("border-color", "");
+  }
 });
 
 function getMessageColorScheme(chatMessage, html, messageData) {
@@ -127,7 +130,7 @@ function calcHeaderTextColor(html, message) {
   var b = parseInt(bgCol.substr(5, 2), 16);
   var yiq = (r * 299 + g * 587 + b * 114) / 1000;
 
-  if (yiq >= 128) {
+  if (yiq >= 180) {
     return "dark";
   } else {
     return "light";

diff --git a/esmodules/settings/settings.js b/esmodules/settings/settings.js
@@ -66,7 +66,6 @@ Hooks.once("init", async () => {
   const root = document.querySelector(":root").style;
 
   root.setProperty("--border-radius", game.settings.get("pf2e-dorako-ui", "theme.border-radius").toString() + "px");
-  // root.setProperty("--glass-bg", game.settings.get("pf2e-dorako-ui", "theme.glass-bg").toString(), "important");
 
   util.debug("initialized properties");
 });

diff --git a/esmodules/settings/theme-settings.js b/esmodules/settings/theme-settings.js
@@ -25,11 +25,11 @@ export class ThemeSettings extends SettingsMenuDorakoUI {
         default: "none",
         type: String,
         choices: {
-          red: "pf2e-dorako-ui.settings.theme.chat-message-header-style.choice.red",
-          blue: "pf2e-dorako-ui.settings.theme.chat-message-header-style.choice.blue",
-          green: "pf2e-dorako-ui.settings.theme.chat-message-header-style.choice.green",
-          tint: "pf2e-dorako-ui.settings.theme.chat-message-header-style.choice.tint",
-          none: "pf2e-dorako-ui.settings.theme.chat-message-header-style.choice.none",
+          tint: "pf2e-dorako-ui.text.colors.player",
+          red: "pf2e-dorako-ui.text.colors.red",
+          green: "pf2e-dorako-ui.text.colors.green",
+          blue: "pf2e-dorako-ui.text.colors.blue",
+          none: "pf2e-dorako-ui.text.disabled",
         },
         requiresReload: false,
         onChange: refreshChat,
@@ -43,9 +43,11 @@ export class ThemeSettings extends SettingsMenuDorakoUI {
         type: String,
         choices: {
           default: "pf2e-dorako-ui.text.default",
-          red: "pf2e-dorako-ui.settings.theme.pc-sheet-theme.choice.red",
-          blue: "pf2e-dorako-ui.settings.theme.pc-sheet-theme.choice.blue",
-          green: "pf2e-dorako-ui.settings.theme.pc-sheet-theme.choice.green",
+          red: "pf2e-dorako-ui.text.colors.red",
+          green: "pf2e-dorako-ui.text.colors.green",
+          blue: "pf2e-dorako-ui.text.colors.blue",
+          purple: "pf2e-dorako-ui.text.colors.purple",
+          black: "pf2e-dorako-ui.text.colors.black",
         },
         requiresReload: false,
         onChange: () => {

diff --git a/esmodules/ui-theme.js b/esmodules/ui-theme.js
@@ -237,7 +237,8 @@ for (const appName of [...limitedScopeApplications]) {
 for (const appName of ["CharacterSheetPF2e", "VehicleSheetPF2e"]) {
   Hooks.on("render" + appName, (app, html, data) => {
     const theme = game.settings.get("pf2e-dorako-ui", "theme.pc-sheet-theme");
-    html[0].classList.add(`${theme}-theme`);
+    if (theme === "default") return;
+    app.element[0].dataset.themeColor = theme;
   });
 }
 
@@ -253,6 +254,17 @@ Hooks.on("render" + "NPCSheetPF2e", (app, html, data) => {
 
 Hooks.on("render" + "ChatMessage", (app, html, data) => {
   const footer = html.find("footer")[0];
-  // debugger;
   if (footer) html[0].dataset.hasFooter = "";
 });
+
+Hooks.on("render" + "ChatLogPF2e", (app, html, data) => {
+  const theme = game.settings.get("pf2e-dorako-ui", "theme.app-theme");
+  if (theme === "no-theme") return;
+  app.element[0].dataset.chatAppTheme = theme;
+});
+
+Hooks.on("render" + "Sidebar", (app, html, data) => {
+  const theme = game.settings.get("pf2e-dorako-ui", "theme.app-theme");
+  if (theme === "no-theme") return;
+  app.element[0].dataset.chatAppTheme = theme;
+});
diff --git a/img/black-header.webp b/img/black-header.webp
diff --git a/img/black-sidebar-bottom.webp b/img/black-sidebar-bottom.webp
diff --git a/img/black-sidebar-top.webp b/img/black-sidebar-top.webp
diff --git a/img/purple-header.webp b/img/purple-header.webp
diff --git a/img/purple-sidebar-bottom.webp b/img/purple-sidebar-bottom.webp
diff --git a/img/purple-sidebar-top.webp b/img/purple-sidebar-top.webp
diff --git a/languages/en.json b/languages/en.json
@@ -23,7 +23,15 @@
       "no-theme": "No theme",
       "opaque": "Opaque",
       "alliance": "Opposition dark",
-      "gm-vs-players": "GM dark"
+      "gm-vs-players": "GM dark",
+      "colors": {
+        "red": "Red",
+        "blue": "Blue",
+        "green": "Green",
+        "purple": "Purple",
+        "black": "Black",
+        "player": "Player color"
+      }
     },
     "settings": {
       "reset-changes": "Reset Changes",
@@ -53,27 +61,15 @@
         },
         "chat-message-header-style": {
           "name": "Chat message header theme",
-          "hint": "Adds a colored header to every chat message",
-          "choice": {
-            "red": "Red",
-            "blue": "Blue",
-            "green": "Green",
-            "tint": "Player color",
-            "none": "Disabled"
-          }
+          "hint": "Adds a colored header to every chat message"
         },
         "border-radius": {
           "name": "Roundedness",
           "hint": "(default: 3px) Changes the degree of roundedness in many UI elements"
         },
         "pc-sheet-theme": {
-          "name": "PC sheet theme",
-          "hint": "Affects sheets for player characters and vehicles",
-          "choice": {
-            "red": "Original Red",
-            "green": "Remaster Green",
-            "blue": "Classic Blue"
-          }
+          "name": "PC sheet color theme",
+          "hint": "Affects sheets for player characters and vehicles"
         }
       },
       "misc": {

diff --git a/sass/dorako-ui/_dorako-ui.scss b/sass/dorako-ui/_dorako-ui.scss
@@ -147,9 +147,9 @@ i[data-pf2-repost] {
   flex-direction: row;
 }
 
-.chat-message ul.notes {
-  padding: 0px;
-}
+// .chat-message ul.notes {
+//   padding: 0px;
+// }
 
 /* ----------------------------------------- */
 /* Settings                                  */

diff --git a/sass/module-support/_pf2e-idle-hud.scss b/sass/module-support/_pf2e-idle-hud.scss
@@ -235,7 +235,6 @@
 
   &#pf2e-token-hud .sidebar .sidebar-content .details input {
     @include f2-input;
-    --input-height: 14px;
     padding: 1px;
   }
 
@@ -330,13 +329,21 @@
     mix-blend-mode: plus-lighter;
   }
 
-  &#pf2e-token-hud .distance.free {
+  &#pf2e-token-hud .free {
     background: unset;
     @include f2-app;
     backdrop-filter: blur(4px);
-    border-bottom-left-radius: unset;
-    border-bottom-right-radius: unset;
-    border-bottom: unset;
+    &.status {
+      bottom: 0px;
+      border-top-left-radius: unset;
+      border-top-right-radius: unset;
+      border-top: unset;
+    }
+    &.distance {
+      border-bottom-left-radius: unset;
+      border-bottom-right-radius: unset;
+      border-bottom: unset;
+    }
   }
 
   &#pf2e-token-hud .popup .header:before {

diff --git a/sass/module-support/_polyglot.scss b/sass/module-support/_polyglot.scss
@@ -2,168 +2,7 @@
 /* Polyglot                                  */
 /* ----------------------------------------- */
 
-.dorako-ui {
-  .select2-dropdown.polyglot-language {
-    @include glass;
-    backdrop-filter: blur(5px);
-
-    ::-webkit-scrollbar-thumb {
-      background: var(--tertiary);
-      border: 1px solid var(--gold-brown);
-    }
-  }
-
-  .select2-container--default .select2-search--dropdown .select2-search__field {
-    @include glass;
-    @include quick-transition;
-    background: var(--glass-bg-light);
-
-    &:focus,
-    &:active,
-    &:hover {
-      background: var(--secondary-dark);
-      color: var(--color-text-light-highlight);
-    }
-  }
-
-  .select2-container--default .select2-results > .select2-results__options {
-    color: var(--color-text-light-heading);
-    text-shadow: 0px 0px 3px black;
-    padding-top: 1px;
-  }
-
-  .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
-    // @include glass;
-    // @include gold-border;
-    background: var(--secondary-light);
-    // border: 1px solid var(--tertiary);
-    box-shadow: 0px 0px 0px 1px var(--tertiary);
-    color: var(--color-text-light-highlight);
-  }
-
-  .select2-container--default .select2-results__option--selected {
-    // @include glass;
-    // @include gold-border;
-    background: var(--primary-light);
-    // border: 1px solid var(--tertiary);
-    box-shadow: 0px 0px 0px 1px var(--tertiary);
-    color: var(--color-text-light-highlight);
-  }
-
-  .polyglot-lang-select .select2-container--default .select2-selection--single .select2-selection__rendered,
-  .select2-container--default .select2-selection--single .select2-selection__rendered {
-    color: var(--color-text-light-heading);
-    &:focus,
-    &:active,
-    &:hover {
-      color: var(--color-text-light-highlight);
-    }
-  }
-
-  .polyglot-lang-select .select2-container--default .select2-selection--single .select2-selection__arrow b {
-    border-color: var(--color-text-light-heading) transparent transparent transparent;
-  }
-
-  .polyglot-user-list div {
-    box-shadow: 0px 0px 0px 1px var(--tertiary);
-  }
-
-  #polyglot {
-    flex-basis: 20px;
-    gap: 5px;
-    flex-wrap: wrap;
-
-    label {
-      display: none;
-    }
-
-    &.polyglot-lang-select > span.select2-container {
-      margin: unset;
-    }
-
-    .select2-selection {
-      @include glass;
-      @include quick-transition;
-      cursor: pointer;
-      background: var(--glass-bg-light);
-      text-shadow: 0px 0px 3px black;
-      &:focus,
-      &:active,
-      &:hover {
-        background: var(--secondary-dark);
-        color: var(--color-text-light-highlight);
-      }
-    }
-
-    select {
-      @include glass;
-      background: var(--glass-bg-light);
-      color: var(--color-text-light-heading);
-      text-shadow: 0px 0px 3px black;
-      appearance: none;
-      margin: unset;
-      padding-left: 7px;
-      flex: 1 1 70px;
-
-      option,
-      optgroup {
-        background-color: rgb(37, 37, 37);
-        color: var(--color-text-light-highlight);
-      }
-    }
-    &.polyglot-lang-select input {
-      // @include glass;
-      // border radius doesn't work here
-      margin: unset;
-      accent-color: var(--color-checkbox-checked);
-      accent-color: var(--secondary-dark);
-
-      &:checked {
-        accent-color: var(--secondary-light);
-      }
-    }
-    .polyglot-user-list {
-      &:empty {
-        outline: unset;
-        flex: unset;
-        margin-right: -5px;
-      }
-      outline: 1px solid var(--gold-brown);
-      background: var(--gold-brown);
-      margin: 3px;
-      // display: flex;
-      gap: 1px;
-      border-radius: var(--border-radius);
-      flex-grow: 1;
-      flex-direction: row;
-      flex: 1 0 20px;
-      max-width: unset;
-      div {
-        display: flex;
-        border-radius: unset;
-        // height: 22px;
-        // width: 10px;
-        width: unset;
-        height: unset;
-        flex: 1 0;
-        width: 10px;
-        border: 1px solid var(--tertiary);
-        margin: unset;
-        // box-shadow: 0px 0px 3px 1px white;
-        &:first-child {
-          border-top-left-radius: var(--border-radius);
-          border-bottom-left-radius: var(--border-radius);
-        }
-        &:last-child {
-          border-top-right-radius: var(--border-radius);
-          border-bottom-right-radius: var(--border-radius);
-        }
-      }
-    }
-  }
-}
-
-[data-dorako-ui-theme] {
+[data-chat-app-theme] {
   #polyglot {
     label {
       display: none;
@@ -172,9 +11,6 @@
 
   .polyglot-lang-select input {
     margin: unset;
-    flex: 0 0 var(--input-height);
-    width: var(--input-height);
-    height: var(--input-height);
   }
 
   .polyglot-lang-select span.select2-selection {