diff --git a/src/interaction/siWardrobe.js b/src/interaction/siWardrobe.js index eeea76f38a7cdfff07ef8e36094e49db74afa278..626e942f10adf75d1d197019a2569544da238e6c 100644 --- a/src/interaction/siWardrobe.js +++ b/src/interaction/siWardrobe.js @@ -40,7 +40,7 @@ App.UI.SlaveInteract.wardrobe = function(slave) { function filtersDOM() { const el = document.createElement("div"); - el.style.lineHeight = "3em"; + el.classList.add("filter-line"); el.append("Filters: "); const niceFilters = new Map([ @@ -68,7 +68,7 @@ App.UI.SlaveInteract.wardrobe = function(slave) { ); } } - App.UI.DOM.appendNewElement("span", el, App.UI.DOM.generateLinksStrip(linkArray), "button-style"); + App.UI.DOM.appendNewElement("span", el, App.UI.DOM.generateLinksStrip(linkArray), "filter-cluster"); const exposureFilters = new Map([ [0, "Modest"], @@ -98,7 +98,7 @@ App.UI.SlaveInteract.wardrobe = function(slave) { ); } } - App.UI.DOM.appendNewElement("span", el, App.UI.DOM.generateLinksStrip(linkArray), "button-style"); + App.UI.DOM.appendNewElement("span", el, App.UI.DOM.generateLinksStrip(linkArray), "filter-cluster"); // clear filters App.UI.DOM.appendNewElement( @@ -111,7 +111,7 @@ App.UI.SlaveInteract.wardrobe = function(slave) { refresh(); } ), - "button-style"); + "filter-cluster"); return el; } diff --git a/src/interaction/wardrobe.css b/src/interaction/wardrobe.css index 3d3addff1109ee2410defa5eeb2e3d6f96e0d8f2..5a25b2dad340675341bc7e655fe0fb5d705b9ff6 100644 --- a/src/interaction/wardrobe.css +++ b/src/interaction/wardrobe.css @@ -1,8 +1,11 @@ -span.button-style { +span.filter-cluster { background-color: var(--button-color); border: none; /* outline instead of border */ /* left & right outline overlap each other so we don't have a double border */ outline: solid 2px var(--button-border-color); margin: 6px; padding: 1ex 1ex; +} +div.filter-line { + line-height: 3em; } \ No newline at end of file