FEAT: filter menu style

module/applications/ux/property-filter.mjs

@@ -96,10 +96,10 @@ export default class FilterMenu extends foundry.applications.ux.ContextMenu {
    * @returns {HTMLDivElement} The section DOM element containing the label and buttons.
    */
   #createSection(groupName, items) {
-    const section = document.createElement("div");
+    const section = document.createElement("fieldset");
     section.className = "filter-section";
 
-    const header = document.createElement("label");
+    const header = document.createElement("legend");
     header.textContent = groupName;
     section.appendChild(header);
 

styles/daggerheart.css

@@ -4136,6 +4136,10 @@ div.daggerheart.views.multiclass {
 .application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .search-bar input:placeholder {
   color: light-dark(#18162e50, #efe6d850);
 }
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .search-bar input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  display: none;
+}
 .application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .search-bar .icon {
   align-content: center;
   height: 32px;
@@ -5190,6 +5194,40 @@ div.daggerheart.views.multiclass {
   gap: 10px;
   align-items: center;
 }
+.filter-menu {
+  width: auto;
+}
+.filter-menu fieldset.filter-section {
+  align-items: center;
+  margin: 5px;
+  border-radius: 6px;
+  border-color: light-dark(#18162e, #f3c267);
+  padding: 5px;
+}
+.filter-menu fieldset.filter-section legend {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: bold;
+  color: light-dark(#18162e, #f3c267);
+}
+.filter-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+.filter-buttons button {
+  background: light-dark(rgba(0, 0, 0, 0.3), #18162e);
+  color: light-dark(#18162e, #f3c267);
+  outline: none;
+  box-shadow: none;
+  border: 1px solid light-dark(#18162e, #18162e);
+}
+.filter-buttons button:hover {
+  background: light-dark(transparent, #f3c267);
+  color: light-dark(#18162e, #18162e);
+}
+.filter-buttons button.active {
+  animation: glow 0.75s infinite alternate;
+}
 .daggerheart {
   /* Flex */
   /****/

styles/daggerheart.less

@@ -45,6 +45,8 @@
 @import './less/global/feature-section.less';
 @import './less/global/inventory-item.less';
 @import './less/global/inventory-fieldset-items.less';
+@import "./less/global/filter-menu.less";
+
 @import '../node_modules/@yaireo/tagify/dist/tagify.css';
 
 .daggerheart {

styles/less/actors/character/loadout.less

@@ -30,6 +30,11 @@
                     &:placeholder {
                         color: light-dark(@dark-blue-50, @beige-50);
                     }
+
+                    &::-webkit-search-cancel-button {
+                        -webkit-appearance: none;
+                        display: none;
+                    }
                 }
 
                 .icon {

styles/less/global/filter-menu.less

@@ -0,0 +1,43 @@
+@import '../utils/colors.less';
+@import '../utils/fonts.less';
+
+.filter-menu {
+    width: auto;
+
+    fieldset.filter-section {
+        align-items: center;
+        margin: 5px;
+        border-radius: 6px;
+        border-color: light-dark(@dark-blue, @golden);
+        padding: 5px;
+
+        legend {
+            font-family: @font-body;
+            font-weight: bold;
+            color: light-dark(@dark-blue, @golden);
+        }
+    }
+}
+
+.filter-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+
+    button {
+        background: light-dark(@light-black, @dark-blue);
+        color: light-dark(@dark-blue, @golden);
+        outline: none;
+        box-shadow: none;
+        border: 1px solid light-dark(@dark-blue, @dark-blue);
+
+        &:hover {
+            background: light-dark(transparent, @golden);
+            color: light-dark(@dark-blue, @dark-blue);
+        }
+
+        &.active {
+            animation: glow 0.75s infinite alternate;
+        }
+    }
+}