1.11.15

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 1.11.15
+
+- (New) Remade the styling for the Combat Carousel module, removed the old misc. setting.
+
 # 1.11.14
 
 - (Refinement) When player-tags are enabled, remove the non-tag speaker name if it is identical to the tag. This conserves space.

modules/consts.js

@@ -23,7 +23,7 @@ export const baseThemePf2eApplications = ["HotbarPF2e", "EffectsPanel", "SceneDa
 // prettier-ignore
 export const baseThemePf2eSheets = ["ItemSheet","ActorSheet","LootSheetPF2e"]; //"FamiliarSheetPF2e","HazardSheetPF2e"
 // prettier-ignore
-export const baseThemeModuleApplications = ["CommonToolbar","MonksHotbarExpansion","CustomHotbar", "TokenActionHUD"]
+export const baseThemeModuleApplications = ["CombatCarousel","CommonToolbar","MonksHotbarExpansion","CustomHotbar", "TokenActionHUD"];
 
 // prettier-ignore
 export const baseThemeApplications = [...baseThemeCoreFoundryApplications,...baseThemePf2eApplications,...baseThemeModuleApplications, ...dorakoUiApplications];

modules/settings/misc-settings.js

@@ -3,7 +3,7 @@ import { SettingsMenuDorakoUI } from "./menu.js";
 export class MiscSettings extends SettingsMenuDorakoUI {
   static namespace = "misc";
 
-  static SETTINGS = ["enable-debug-mode", "send-to-chat", "skin-combat-carousel", "skin-crb-journal"];
+  static SETTINGS = ["enable-debug-mode", "send-to-chat", "skin-crb-journal"];
 
   static get settings() {
     return {
@@ -25,15 +25,6 @@ export class MiscSettings extends SettingsMenuDorakoUI {
         type: Boolean,
         requiresReload: false,
       },
-      "skin-combat-carousel": {
-        name: "pf2e-dorako-ui.settings.misc.skin-combat-carousel.name",
-        scope: "world",
-        type: Boolean,
-        default: true,
-        config: true,
-        requiresReload: true,
-        onChange: foundry.utils.debouncedReload,
-      },
       "skin-crb-journal": {
         name: "pf2e-dorako-ui.settings.misc.skin-crb-journal.name",
         hint: "pf2e-dorako-ui.settings.misc.skin-crb-journal.hint",

modules/settings/settings.js

@@ -96,8 +96,6 @@ Hooks.once("init", async () => {
     injectCSS("fonts");
   }
 
-  if (game.settings.get("pf2e-dorako-ui", "misc.skin-combat-carousel")) injectCSS("combat-carousel");
-
   util.debug("injected sheets");
 });
 

sass/module/_combat-carousel.scss

@@ -6,3 +6,118 @@
 #controls ol li.scene-control[data-control="combat-carousel"] {
   position: relative;
 }
+
+.dorako-ui {
+  &#combat-carousel .splide__track {
+    overflow: visible;
+  }
+
+  &#combat-carousel:hover {
+    background: none;
+  }
+
+  &#combat-carousel .card {
+    background: none;
+    border: none;
+  }
+
+  &#combat-carousel .drag-handle {
+    text-shadow: 0px 0px 3px black;
+    color: var(--color-text-light-heading);
+  }
+
+  &#combat-carousel .splide__slide:hover meter::after {
+    top: -17px;
+    text-shadow: 0px 0px 3px black;
+    background: none;
+  }
+
+  &#combat-carousel .splide__slide:hover .fa-dice-d20 {
+    color: var(--color-text-light-highlight);
+  }
+
+  &#combat-carousel .initiative {
+    @include glass;
+    @include quick-transition;
+    text-shadow: 0px 0px 3px black;
+
+    .fa-dice-d20 {
+      color: var(--color-text-light-heading);
+    }
+    &:hover {
+      background-color: var(--primary);
+      .fa-dice-d20 {
+        color: var(--color-text-light-highlight);
+      }
+    }
+  }
+
+  &#combat-carousel .is-active-combatant.card {
+    .avatar {
+      overflow: visible;
+      img {
+        @include quick-transition;
+        filter: drop-shadow(0px 0px 10px var(--tertiary));
+      }
+    }
+  }
+
+  &#combat-carousel .initiative input.fa-stack-1x {
+    font-size: 24px;
+    text-shadow: 0px 0px 3px black, 0px 1px 0px black;
+  }
+
+  &#combat-carousel .splide__slide:hover:not(.combat-round) {
+    transform: scale(1);
+    margin: 0px;
+    .avatar {
+      overflow: visible;
+      img {
+        @include quick-transition;
+        filter: drop-shadow(0px 0px 10px var(--tertiary));
+      }
+    }
+  }
+
+  &#combat-carousel .splide__slide:hover .name {
+    @include glass;
+    color: var(--color-text-light-heading);
+    text-shadow: 0px 0px 3px black;
+    backdrop-filter: blur(5px);
+    min-height: 34px;
+    min-width: 100px;
+    font-size: var(--font-size-14);
+    line-height: var(--font-size-14);
+    top: -40px;
+    left: unset;
+    text-shadow: 0px 0px 3px black;
+    height: unset;
+    overflow: unset;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    padding: 5px 8px;
+    h3 {
+      margin: 0px;
+    }
+  }
+
+  &#combat-carousel .encounter-info,
+  &#combat-carousel .encounter-controls {
+    @include glass;
+    text-shadow: 0px 0px 3px black;
+    color: var(--color-text-light-heading);
+  }
+
+  &#combat-carousel:hover .combat-controls a {
+    @include glass;
+    @include quick-transition;
+    color: var(--color-text-light-heading);
+    text-shadow: 0px 0px 3px black;
+    &:hover {
+      background-color: var(--primary);
+      color: var(--color-text-light-highlight);
+    }
+  }
+}