From 407b70b6624b9c43ef778df8f5083265000e1d7b Mon Sep 17 00:00:00 2001
From: WBHarry <williambjrklund@gmail.com>
Date: Fri, 30 May 2025 15:50:43 +0200
Subject: [PATCH] Css cleanup. Added styling for tagify dropdown

---
 daggerheart.mjs                  |   1 -
 module/helpers/utils.mjs         |   2 +-
 styles/components.less           |  45 ------------
 styles/daggerheart.css           | 103 +++++++++++---------------
 styles/daggerheart.less          |  11 +--
 styles/less/global/elements.less |  59 +++++++++++++++
 styles/less/items/class.less     | 120 ++++++++++++-------------------
 styles/sheets/class.css          |  65 -----------------
 styles/sheets/class.less         |  65 +++++++++++++++++
 templates/components/slider.hbs  |   5 --
 10 files changed, 214 insertions(+), 262 deletions(-)
 delete mode 100644 styles/components.less
 delete mode 100644 styles/sheets/class.css
 create mode 100644 styles/sheets/class.less
 delete mode 100644 templates/components/slider.hbs

diff --git a/daggerheart.mjs b/daggerheart.mjs
index a431f058..0baf2a7f 100644
--- a/daggerheart.mjs
+++ b/daggerheart.mjs
@@ -284,7 +284,6 @@ const preloadHandlebarsTemplates = async function () {
         'systems/daggerheart/templates/sheets/pc/parts/heritageCard.hbs',
         'systems/daggerheart/templates/sheets/pc/parts/advancementCard.hbs',
         'systems/daggerheart/templates/views/parts/level.hbs',
-        'systems/daggerheart/templates/components/slider.hbs',
         'systems/daggerheart/templates/sheets/global/partials/feature-section-item.hbs'
     ]);
 };
diff --git a/module/helpers/utils.mjs b/module/helpers/utils.mjs
index 7a58a1f2..753974f5 100644
--- a/module/helpers/utils.mjs
+++ b/module/helpers/utils.mjs
@@ -1,4 +1,4 @@
-import { diceSoNicePresets, getDiceSoNicePresets } from '../config/generalConfig.mjs';
+import { getDiceSoNicePresets } from '../config/generalConfig.mjs';
 
 export const loadCompendiumOptions = async compendiums => {
     const compendiumValues = [];
diff --git a/styles/components.less b/styles/components.less
deleted file mode 100644
index 34292734..00000000
--- a/styles/components.less
+++ /dev/null
@@ -1,45 +0,0 @@
-.slider-container {
-    position: relative;
-    background: lightslategray;
-
-    .slider-inner-container {
-        position: absolute;
-        top: 1px;
-        left: -60px;
-        background-color: inherit;
-        color: inherit;
-        border-radius: 30px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        height: 20px;
-        width: 40px;
-        padding: 0 4px;
-        border: @thinBorder solid black;
-
-        &:hover {
-            filter: drop-shadow(0 0 3px red);
-        }
-
-        input:checked {
-            opacity: 0;
-            width: 0;
-            height: 0;
-
-            & + .slider-icon {
-                transform: translateX(17px);
-                transition: 1s;
-            }
-        }
-
-        .slider-icon {
-            position: absolute;
-            left: 4px;
-            height: 15px;
-            width: 15px;
-            border-radius: 50%;
-            transition: 1s;
-            transform: translateX(0);
-        }
-    }
-}
diff --git a/styles/daggerheart.css b/styles/daggerheart.css
index 2c1ae691..529c979e 100755
--- a/styles/daggerheart.css
+++ b/styles/daggerheart.css
@@ -2704,46 +2704,6 @@ div.daggerheart.views.multiclass {
   background: inherit;
   border: 0;
 }
-.slider-container {
-  position: relative;
-  background: lightslategray;
-}
-.slider-container .slider-inner-container {
-  position: absolute;
-  top: 1px;
-  left: -60px;
-  background-color: inherit;
-  color: inherit;
-  border-radius: 30px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  height: 20px;
-  width: 40px;
-  padding: 0 4px;
-  border: 1px solid black;
-}
-.slider-container .slider-inner-container:hover {
-  filter: drop-shadow(0 0 3px red);
-}
-.slider-container .slider-inner-container input:checked {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.slider-container .slider-inner-container input:checked + .slider-icon {
-  transform: translateX(17px);
-  transition: 1s;
-}
-.slider-container .slider-inner-container .slider-icon {
-  position: absolute;
-  left: 4px;
-  height: 15px;
-  width: 15px;
-  border-radius: 50%;
-  transition: 1s;
-  transform: translateX(0);
-}
 .item-button.checked {
   background: green;
 }
@@ -2773,27 +2733,6 @@ div.daggerheart.views.multiclass {
   scrollbar-width: thin;
   scrollbar-color: light-dark(#18162e, #f3c267) transparent;
 }
-.application.sheet.daggerheart.dh-style.class .tagify {
-  background: light-dark(transparent, transparent);
-  border: 1px solid light-dark(#222, #efe6d8);
-  height: 34px;
-  border-radius: 3px;
-  margin-right: 1px;
-}
-.application.sheet.daggerheart.dh-style.class .tagify tag div {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 22px;
-}
-.application.sheet.daggerheart.dh-style.class .tagify tag div span {
-  font-weight: 400;
-}
-.application.sheet.daggerheart.dh-style.class .tagify tag div img {
-  margin-left: 8px;
-  height: 20px;
-  width: 20px;
-}
 .application.sheet.daggerheart.dh-style.class .tab.settings .fieldsets-section {
   display: grid;
   gap: 10px;
@@ -3134,6 +3073,48 @@ div.daggerheart.views.multiclass {
 .application.setting.dh-style footer button {
   flex: 1;
 }
+.system-daggerheart .tagify {
+  background: light-dark(transparent, transparent);
+  border: 1px solid light-dark(#222, #efe6d8);
+  height: 34px;
+  border-radius: 3px;
+  margin-right: 1px;
+}
+.system-daggerheart .tagify tag div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 22px;
+}
+.system-daggerheart .tagify tag div span {
+  font-weight: 400;
+}
+.system-daggerheart .tagify tag div img {
+  margin-left: 8px;
+  height: 20px;
+  width: 20px;
+}
+.system-daggerheart .tagify__dropdown {
+  border: 1px solid light-dark(#222, #efe6d8) !important;
+}
+.system-daggerheart .tagify__dropdown .tagify__dropdown__wrapper {
+  background-image: url(../assets/parchments/dh-parchment-dark.png);
+  background-color: transparent;
+  border: 0;
+}
+.system-daggerheart .tagify__dropdown .tagify__dropdown__wrapper .tagify__dropdown__item--active {
+  background-color: light-dark(#222, #efe6d8);
+  color: var(--color-dark-3);
+}
+.system-daggerheart.theme-light .tagify__dropdown {
+  color: black;
+}
+.system-daggerheart.theme-light .tagify__dropdown .tagify__dropdown__wrapper {
+  background-image: url(../assets/parchments/dh-parchment-light.png);
+}
+.system-daggerheart.theme-light .tagify__dropdown .tagify__dropdown__item--active {
+  color: #efe6d8;
+}
 .sheet.daggerheart.dh-style .tab-navigation {
   margin: 5px 0;
   height: 40px;
diff --git a/styles/daggerheart.less b/styles/daggerheart.less
index 0d99ac6a..181cd8a3 100755
--- a/styles/daggerheart.less
+++ b/styles/daggerheart.less
@@ -6,8 +6,7 @@
 @import './chat.less';
 @import './item.less';
 @import './application.less';
-@import './sheets//sheets.less';
-@import './components.less';
+@import './sheets/sheets.less';
 @import './dialog.less';
 @import '../node_modules/@yaireo/tagify/dist/tagify.css';
 
@@ -96,14 +95,6 @@
             cursor: pointer;
         }
     }
-
-    // .window-content {
-    //     background: crimson;
-
-    //     > form, >div {
-    //         background: url(../ui/parchment.jpg) repeat;
-    //     }
-    // }
 }
 
 #players {
diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less
index fca23dc1..8ad2c97f 100755
--- a/styles/less/global/elements.less
+++ b/styles/less/global/elements.less
@@ -213,3 +213,62 @@
         }
     }
 }
+
+.system-daggerheart {
+    .tagify {
+        background: light-dark(transparent, transparent);
+        border: 1px solid light-dark(@dark, @beige);
+        height: 34px;
+
+        border-radius: 3px;
+        margin-right: 1px;
+
+        tag {
+            div {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                height: 22px;
+
+                span {
+                    font-weight: 400;
+                }
+
+                img {
+                    margin-left: 8px;
+                    height: 20px;
+                    width: 20px;
+                }
+            }
+        }
+    }
+
+    .tagify__dropdown {
+        border: 1px solid light-dark(@dark, @beige) !important;
+
+        .tagify__dropdown__wrapper {
+            background-image: url(../assets/parchments/dh-parchment-dark.png);
+            background-color: transparent;
+            border: 0;
+
+            .tagify__dropdown__item--active {
+                background-color: light-dark(@dark, @beige);
+                color: var(--color-dark-3);
+            }
+        }
+    }
+
+    &.theme-light {
+        .tagify__dropdown {
+            color: black;
+
+            .tagify__dropdown__wrapper {
+                background-image: url(../assets/parchments/dh-parchment-light.png);
+            }
+
+            .tagify__dropdown__item--active {
+                color: @beige;
+            }
+        }
+    }
+}
diff --git a/styles/less/items/class.less b/styles/less/items/class.less
index 1b8a0fbc..61974778 100644
--- a/styles/less/items/class.less
+++ b/styles/less/items/class.less
@@ -1,74 +1,46 @@
-@import '../utils/colors.less';
-@import '../utils/fonts.less';
-
-.application.sheet.daggerheart.dh-style.class {
-    .tagify {
-        background: light-dark(transparent, transparent);
-        border: 1px solid light-dark(@dark, @beige);
-        height: 34px;
-
-        border-radius: 3px;
-        margin-right: 1px;
-
-        tag {
-            div {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                height: 22px;
-
-                span {
-                    font-weight: 400;
-                }
-
-                img {
-                    margin-left: 8px;
-                    height: 20px;
-                    width: 20px;
-                }
-            }
-        }
-    }
-
-    .tab.settings {
-        .fieldsets-section {
-            display: grid;
-            gap: 10px;
-            grid-template-columns: 1fr 1.5fr 1.5fr;
-        }
-
-        .list-items {
-            margin-bottom: 10px;
-            width: 100%;
-            &:last-child {
-                margin-bottom: 0px;
-            }
-            .item-line {
-                display: grid;
-                align-items: center;
-                gap: 10px;
-                grid-template-columns: 1fr 3fr 1fr;
-                h4 {
-                    font-family: @font-body;
-                    font-weight: lighter;
-                    color: light-dark(@dark, @beige);
-                }
-                .image {
-                    height: 40px;
-                    width: 40px;
-                    object-fit: cover;
-                    border-radius: 6px;
-                    border: none;
-                }
-                .controls {
-                    display: flex;
-                    justify-content: center;
-                    gap: 10px;
-                    a {
-                        text-shadow: none;
-                    }
-                }
-            }
-        }
-    }
-}
+@import '../utils/colors.less';
+@import '../utils/fonts.less';
+
+.application.sheet.daggerheart.dh-style.class {
+    .tab.settings {
+        .fieldsets-section {
+            display: grid;
+            gap: 10px;
+            grid-template-columns: 1fr 1.5fr 1.5fr;
+        }
+
+        .list-items {
+            margin-bottom: 10px;
+            width: 100%;
+            &:last-child {
+                margin-bottom: 0px;
+            }
+            .item-line {
+                display: grid;
+                align-items: center;
+                gap: 10px;
+                grid-template-columns: 1fr 3fr 1fr;
+                h4 {
+                    font-family: @font-body;
+                    font-weight: lighter;
+                    color: light-dark(@dark, @beige);
+                }
+                .image {
+                    height: 40px;
+                    width: 40px;
+                    object-fit: cover;
+                    border-radius: 6px;
+                    border: none;
+                }
+                .controls {
+                    display: flex;
+                    justify-content: center;
+                    gap: 10px;
+                    a {
+                        text-shadow: none;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/styles/sheets/class.css b/styles/sheets/class.css
deleted file mode 100644
index 09ec1def..00000000
--- a/styles/sheets/class.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.daggerheart.sheet.class .guide .drop-section {
-  width: 100%;
-}
-.daggerheart.sheet.class .guide .drop-section legend {
-  margin-left: auto;
-  margin-right: auto;
-  font-size: 12px;
-}
-.daggerheart.sheet.class .guide .drop-section .drop-section-body {
-  min-height: 40px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.daggerheart.sheet.class .guide .trait-input {
-  text-align: center;
-  min-width: 24px;
-}
-.daggerheart.sheet.class .guide .suggested-item {
-  border-radius: 6px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-.daggerheart.sheet.class .guide .suggested-item img {
-  width: 30px;
-}
-.daggerheart.sheet.class .guide .suggested-item div {
-  text-align: center;
-}
-.daggerheart.sheet.class .guide .suggested-item i {
-  border-radius: 50%;
-  margin-right: 4px;
-  font-size: 11px;
-}
-.daggerheart.sheet.class .guide .extra-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.daggerheart.sheet.class .guide .extra-section .extra-title {
-  font-size: 14px;
-  font-weight: bold;
-}
-.daggerheart.sheet.class .guide-section-title-centered {
-  font-weight: bold;
-  font-size: 18px;
-}
-.daggerheart.sheet.class .inventory-section {
-  width: 100%;
-  border: 2px solid black;
-  border-style: dotted;
-  min-height: 80px;
-}
-.daggerheart.sheet.class .inventory-section .inventory-title {
-  font-weight: bold;
-  font-size: 14px;
-  text-align: center;
-}
-.daggerheart.sheet.class .domain-section {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
diff --git a/styles/sheets/class.less b/styles/sheets/class.less
new file mode 100644
index 00000000..09dafcff
--- /dev/null
+++ b/styles/sheets/class.less
@@ -0,0 +1,65 @@
+.daggerheart.sheet.class .guide .drop-section {
+    width: 100%;
+}
+.daggerheart.sheet.class .guide .drop-section legend {
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 12px;
+}
+.daggerheart.sheet.class .guide .drop-section .drop-section-body {
+    min-height: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.daggerheart.sheet.class .guide .trait-input {
+    text-align: center;
+    min-width: 24px;
+}
+.daggerheart.sheet.class .guide .suggested-item {
+    border-radius: 6px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+.daggerheart.sheet.class .guide .suggested-item img {
+    width: 30px;
+}
+.daggerheart.sheet.class .guide .suggested-item div {
+    text-align: center;
+}
+.daggerheart.sheet.class .guide .suggested-item i {
+    border-radius: 50%;
+    margin-right: 4px;
+    font-size: 11px;
+}
+.daggerheart.sheet.class .guide .extra-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.daggerheart.sheet.class .guide .extra-section .extra-title {
+    font-size: 14px;
+    font-weight: bold;
+}
+.daggerheart.sheet.class .guide-section-title-centered {
+    font-weight: bold;
+    font-size: 18px;
+}
+.daggerheart.sheet.class .inventory-section {
+    width: 100%;
+    border: 2px solid black;
+    border-style: dotted;
+    min-height: 80px;
+}
+.daggerheart.sheet.class .inventory-section .inventory-title {
+    font-weight: bold;
+    font-size: 14px;
+    text-align: center;
+}
+.daggerheart.sheet.class .domain-section {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
diff --git a/templates/components/slider.hbs b/templates/components/slider.hbs
deleted file mode 100644
index 7cbf08d0..00000000
--- a/templates/components/slider.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="slider-container">
-    <div data-action="toggleSlider" class="slider-inner-container">
-        <i class="fa-solid fa-wrench slider-icon {{#if this.editMode}}editMode{{/if}}"></i>
-    </div>
-</div>
\ No newline at end of file