fix

css/litegraph-editor.css

@@ -200,18 +200,41 @@
     margin-top: -150px;
     margin-left: -200px;
 
-    background-color: #151515;
+    background-color: #222222;
 
     min-width: 400px;
-    min-height: 300px;
-    box-shadow: 0 0 2px black;
+    min-height: 200px;
+	box-shadow: 0 0 4px #111;
+    border-radius: 6px;
 }
 
-.litegraph-editor .dialog .dialog-header,
-.litegraph-editor .dialog .dialog-footer {
-    height: 40px;
+.litegraph-editor .dialog.settings {
+	left: 10px;
+	top: 10px;
+	height: calc( 100% - 20px );
+	margin: auto;
 }
 
+.litegraph-editor .dialog .close {
+    float: right;
+	margin: 4px;
+	margin-right: 10px;
+	cursor: pointer;
+	font-size: 1.4em;
+}
+
+.litegraph-editor .dialog .close:hover {
+	color: white;
+}
+
+.litegraph-editor .dialog .dialog-header {
+	color: #AAA;
+	border-bottom: 1px solid #161616;
+}
+
+.litegraph-editor .dialog .dialog-header { height: 40px; }
+.litegraph-editor .dialog .dialog-footer { height: 50px; padding: 10px; border-top: 1px solid #1a1a1a;}
+
 .litegraph-editor .dialog .dialog-header .dialog-title {
     font: 20px "Arial";
     margin: 4px;
@@ -220,9 +243,106 @@
 }
 
 .litegraph-editor .dialog .dialog-content {
-    height: calc(100% - 40px);
+    height: calc(100% - 90px);
     width: calc(100% - 10px);
-    background-color: black;
-    margin: 4px;
+    /*background-color: black;*/
+    padding: 4px;
     display: inline-block;
+	color: #AAA;
 }
+
+.litegraph-editor .dialog .node_type {
+	font-size: 1.2em;
+	display: block;
+	margin: 10px;
+}
+
+.litegraph-editor .dialog .node_desc {
+	opacity: 0.5;
+	display: block;
+	margin: 10px;
+}
+
+.litegraph-editor .dialog .separator {
+	display: block;
+	width: calc( 100% - 4px );
+	height: 1px;
+	border-top: 1px solid #000;
+	border-bottom: 1px solid #333;
+	margin: 10px 2px;
+	padding: 0;
+}
+
+.litegraph-editor .dialog .property {
+	margin-bottom: 2px;
+	padding: 0;
+}
+
+.litegraph-editor .dialog .property_name {
+	color: #737373;
+    display: inline-block;
+    text-align: left;
+    vertical-align: top;
+    width: 120px;
+	padding-left: 4px;
+	overflow: hidden;
+}
+
+.litegraph-editor .dialog .property_value {
+    display: inline-block;
+    text-align: right;
+	color: #AAA;
+	background-color: #1A1A1A;
+    width: calc( 100% - 122px );
+    padding: 4px;
+	padding-right: 12px;
+	overflow: hidden;
+	cursor: pointer;
+	border-radius: 3px;
+}
+
+.litegraph-editor .dialog .property_value:hover {
+	color: white;
+}
+
+.litegraph-editor .dialog .property.boolean .property_value {
+	padding-right: 30px;
+}
+
+.litegraph-editor .dialog button {
+	border-radius: 4px;
+    padding: 4px 20px;
+    margin-left: 0px;
+    background-color: #060606;
+    color: #8e8e8e;
+}
+
+.litegraph-editor .dialog button:hover {
+    background-color: #111;
+    color: #FFF;
+}
+
+.litegraph-editor .dialog button.delete:hover {
+    background-color: #F33;
+    color: black;
+}
+
+
+.litegraph-editor textarea.code, .litegraph-editor div.code {
+	height: 100%;
+	width: 100%;
+	background-color: black;
+	padding: 4px;
+	font: 16px monospace;
+	overflow: auto;
+	resize: none;
+	outline: none;
+}
+
+.litegraph-editor .codeflask {
+	background-color: #2a2a2a;
+}
+
+.litegraph-editor .codeflask textarea {
+	opacity: 0;
+}