add: separators

app/src/main/java/org/toop/app/layer/Container.java

@@ -5,8 +5,10 @@ import org.toop.framework.eventbus.GlobalEventBus;
 
 import javafx.beans.property.BooleanProperty;
 import javafx.beans.property.SimpleBooleanProperty;
+import javafx.geometry.Orientation;
 import javafx.scene.Node;
 import javafx.scene.control.Label;
+import javafx.scene.control.Separator;
 import javafx.scene.control.Slider;
 import javafx.scene.control.TextField;
 import javafx.scene.layout.Region;
@@ -19,7 +21,6 @@ public abstract class Container {
 	public abstract Region getContainer();
 
 	public abstract void addNode(Node node);
-
 	public abstract void addContainer(Container container, boolean fill);
 
 	public void addText(String cssClass, String x, boolean wrap) {
@@ -129,4 +130,16 @@ public abstract class Container {
 	public void addInput(String input, Consumer<String> consumer) {
 		addInput("input", input, consumer);
 	}
+
+	public void addSeparator(String cssClass, boolean horizontal) {
+		final Separator element = new Separator(horizontal ? Orientation.HORIZONTAL : Orientation.VERTICAL);
+		element.getStyleClass().add(cssClass);
+		element.setMinSize(50, 50);
+
+		addNode(element);
+	}
+
+	public void addSeparator(boolean horizontal) {
+		addSeparator("separator", horizontal);
+	}
 }

app/src/main/java/org/toop/app/layer/layers/MultiplayerLayer.java

@@ -87,6 +87,8 @@ public class MultiplayerLayer extends Layer {
 			player2Container.addInput("", (input) -> {
 			});
 
+			player2Container.addSeparator(true);
+
 			player2Container.addText("Server Port", true);
 			player2Container.addInput("", (input) -> {
 			});

app/src/main/resources/assets/style/app.css

@@ -13,7 +13,7 @@
     -fx-background-radius: 5;
 }
 
-.text, .button, .toggle, .input {
+.text, .button, .toggle {
 	-fx-padding: 10;
 
 	-fx-fill: white;
@@ -37,6 +37,21 @@
 	-fx-effect: dropshadow(gaussian, #007fff, 10, 0.5, 0, 0);
 }
 
+.input {
+	-fx-padding: 10;
+
+	-fx-fill: white;
+	-fx-text-fill: white;
+
+	-fx-font-family: "Segoe UI", sans-serif;
+	-fx-font-weight: bold;
+	-fx-font-size: 20px;
+
+	-fx-background-color: transparent;
+
+	-fx-border-color: #7f7f7f;
+}
+
 .input:focused {
 	-fx-background-color: linear-gradient(to bottom right, orange, indigo), #1d1d1d;
 	-fx-background-insets: 0, 2;
@@ -58,4 +73,8 @@
 
 .slider .thumb {
 	-fx-background-color: linear-gradient(to bottom right, orange, indigo), #1d1d1d;
+}
+
+.separator {
+	-fx-background-color: linear-gradient(to bottom right, orange, indigo), #1d1d1d;
 }