diff --git a/css/litegraph.css b/css/litegraph.css index 32111b724..ac3f5883d 100755 --- a/css/litegraph.css +++ b/css/litegraph.css @@ -151,6 +151,49 @@ padding-right: 10px; } +.litegraph.litesearchbox { + font-family:Tahoma, sans-serif; + position: absolute; + background-color: rgba(0,0,0,0.5); + padding-top: 4px; +} + +.litegraph.litesearchbox input, .litegraph.litesearchbox select { + margin-top: 3px; + min-width: 60px; + min-height: 1.5em; + background-color: black; + border: 0; + color: white; + padding-left: 10px; + margin-right: 5px; +} + +.litegraph.litesearchbox .name { + display: inline-block; + min-width: 60px; + min-height: 1.5em; + padding-left: 10px; +} + +litegraph.litesearchbox .helper { + overflow: auto; + max-height: 200px; + margin-top: 2px; +} + +.litegraph.lite-search-item { + font-family:Tahoma, sans-serif; + background-color: rgba(0,0,0,0.5); + color: white; + padding-top: 2px; +} + +.litegraph.lite-search-item:hover, .litegraph.lite-search-item.selected { + cursor: pointer; + background-color: white; + color: black; +} /* OLD */ diff --git a/src/litegraph.js b/src/litegraph.js index c96854141..f13b17ef3 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -6344,8 +6344,8 @@ LGraphCanvas.prototype.showSearchBox = function(event) var input_html = ""; var dialog = document.createElement("div"); - dialog.className = "graphdialog"; - dialog.innerHTML = "Search
"; + dialog.className = "litegraph litesearchbox"; + dialog.innerHTML = "Search
"; dialog.close = function() { that.search_box = null; @@ -6481,7 +6481,7 @@ LGraphCanvas.prototype.showSearchBox = function(event) var help = document.createElement("div"); if(!first) first = i; help.innerText = i; - help.className = "help-item"; + help.className = "litegraph lite-search-item"; help.addEventListener("click", function(e){ select( this.innerText ); });