Style application

README.md

@@ -35,3 +35,4 @@ Probably tastes better than any Apple editor and NetBeans combined.
 - [richtextfx-demos](https://github.com/FXMisc/RichTextFX/blob/master/richtextfx-demos/README.md) -> Examples and demos of how to use RichTextFX, including [Java Keywords Demo](https://github.com/FXMisc/RichTextFX/blob/master/richtextfx-demos/src/main/java/org/fxmisc/richtext/demo/JavaKeywordsAsyncDemo.java)
 - [Pixabay/311788](https://pixabay.com/vectors/bananas-fruits-pair-yellow-bananas-311788/) -> Banana logo
 - [Guava Event Bus](https://github.com/google/guava/wiki/EventBusExplained) -> Library for handling communication between controllers
+- [JFX Moderna](https://github.com/openjdk/jfx/blob/master/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin/modena/modena.css) - CSS reference

src/main/java/app/Main.java

@@ -42,6 +42,9 @@ public class Main extends Application {
     }
 
     Scene scene = new Scene(document);
+
+    scene.getStylesheets().add(getClass().getResource("/styling/app.css").toExternalForm());
+
     window.setScene(scene);
     window.show();
   }

src/main/resources/fxml/components/Filetree.fxml

@@ -6,11 +6,11 @@
 <ScrollPane
   xmlns="http://javafx.com/javafx/8.0.65"
   xmlns:fx="http://javafx.com/fxml/1"
-  fx:controller="app.controllers.FiletreeController">
+  fx:controller="app.controllers.FiletreeController"
+  fitToWidth="true"
+  fitToHeight="true">
   <content>
     <TreeView
-      fx:id="filetree"
+      fx:id="filetree"/>
-      prefHeight="${filetree.parent.height}"
-      prefWidth="${filetree.parent.width}"/>
   </content>
 </ScrollPane>

src/main/resources/fxml/components/Modeline.fxml

@@ -5,10 +5,11 @@
 <?import javafx.scene.layout.Region?>
 
 <HBox 
-  prefHeight="25.0"
+  prefHeight="35.0"
   xmlns="http://javafx.com/javafx/8.0.65"
   xmlns:fx="http://javafx.com/fxml/1"
-  fx:controller="app.controllers.ModelineController">
+  fx:controller="app.controllers.ModelineController"
+  alignment="CENTER_LEFT">
   <Label text="Modeline :)"/>
   <Region HBox.hgrow="ALWAYS"/>
   <Label fx:id="columnrow" text="[y:x]"/>

src/main/resources/styling/app.css

@@ -0,0 +1,216 @@
+
+* {
+  -main-fg-color:      #f8f8f2;
+
+  -light-bg-color:     #75715e;
+  -main-bg-color:      #272822;
+  -dark-bg-color:      #1a1b17;
+  -shadow-bg-color:    #0d0e0b;
+
+  -main-red-color:     #f92672;
+  -main-green-color:   #a6e22e;
+  -main-yellow-color:  #f4bf75;
+  -main-blue-color:    #66d9ef;
+  -main-magenta-color: #ae81ff;
+  -main-cyan-color:    #a1efe4;
+}
+
+.root {
+  /* -fx-font-family: "Roboto"; */
+  -fx-background-color: -dark-bg-color;
+}
+
+/* --------------------------------- Colors --------------------------------- */
+
+.red-text {
+  -fx-text-fill: -main-red-color
+}
+
+.green-text {
+  -fx-text-fill: -main-red-color
+}
+
+.yellow-text {
+  -fx-text-fill: -main-red-color
+}
+
+.blue-text {
+  -fx-text-fill: -main-red-color
+}
+
+.magenta-text {
+  -fx-text-fill: -main-red-color
+}
+
+.cyan-text {
+  -fx-text-fill: -main-red-color
+}
+
+.gray-text {
+  -fx-text-fill: -light-bg-color
+}
+
+/* --------------------------------- Menubar -------------------------------- */
+
+.menu-bar {
+  -fx-padding: 0 20;
+}
+
+.context-menu {
+  /* -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin"; */
+  -fx-background-color: -dark-bg-color;
+  -fx-padding: 2 2;
+
+}
+
+.menu-bar, .menu-item-separator{
+  -fx-background-color: -dark-bg-color;
+  -fx-text-fill: -main-fg-color;
+}
+
+.menu, .menu-item{
+  -fx-background-color: -main-bg-color;
+  -fx-text-fill: -main-fg-color;
+}
+
+.menu-item:focused {
+  -fx-background-color: -main-blue-color;
+}
+
+/* Menuitems visible in top of window */
+
+.menu-bar > * > .menu {
+  -fx-background-color: -dark-bg-color;
+}
+
+.menu-bar > * > .menu:hover {
+  -fx-background-color: -main-bg-color;
+}
+
+/* -------------------------------- SplitPane ------------------------------- */
+
+.split-pane:horizontal {
+  -fx-padding: 10 20 0 20;
+  -fx-background-insets: 10 0 0 0;
+  -fx-background-color: -dark-bg-color;
+}
+
+.split-pane:horizontal > .split-pane-divider {
+  -fx-background-color: -dark-bg-color;
+  -fx-padding: 0 5;
+}
+
+/* ------------------------------- ScrollPane ------------------------------- */
+
+/* https://stackoverflow.com/questions/41804373/javafx-scrollpane-styling */
+
+.scroll-pane {
+  -fx-background-color: -dark-bg-color;
+}
+
+.scroll-bar:horizontal, .scroll-bar:vertical{
+  -fx-background-color: -dark-bg-color;
+}
+
+.increment-button, .decrement-button {
+  -fx-background-color: transparent;
+  -fx-border-color: transparent;
+}
+
+.scroll-bar:horizontal .track,
+.scroll-bar:vertical .track{
+  -fx-background-color: transparent;
+  -fx-border-color: transparent;
+  -fx-background-radius: 0em;
+}
+
+.scroll-bar:horizontal .thumb,
+.scroll-bar:vertical .thumb {
+  -fx-background-color: white;
+  -fx-background-radius: 5em;
+}
+
+* > .corner {
+  -fx-background-color: -dark-bg-color;
+}
+
+.scroll-pane > .viewport {
+  -fx-background-color: transparent;
+  -fx-effect: innershadow(gaussian, -shadow-bg-color, 10, 0.2, -2, 0);
+}
+
+.scroll-pane {
+  -fx-background-color: transparent;
+}
+
+/* -------------------------------- Filetree -------------------------------- */
+
+.tree-view {
+  -fx-background-color: -main-bg-color;
+  -fx-border-style: none;
+  -fx-background-radius: 20px;
+}
+
+.tree-view .tree-cell {
+  -fx-background-color: transparent;
+  -fx-text-fill: -main-fg-color;
+}
+
+.tree-view:focused .tree-cell:focused {
+  -fx-background-color: -main-blue-color;
+}
+
+.tree-cell:filled:selected{
+  -fx-background-color: transparent;
+  -fx-border-color: -main-blue-color;
+  -fx-border-width: 3;
+}
+
+/* --------------------------------- Editor --------------------------------- */
+
+.code-area .text {
+  -fx-fill: -main-fg-color;
+}
+
+.code-area {
+  -fx-font-family: "Fira Code";
+  -fx-font-size: 16;
+  -fx-color: -main-fg-color;
+  -fx-text-fill: -main-fg-color;
+  -fx-background-color: -main-bg-color;
+  -fx-background-radius: 20px;
+  -fx-effect: innershadow(gaussian, -shadow-bg-color, 10, 0.2, -2, 0);
+}
+
+.caret {
+  -fx-stroke: -main-fg-color;
+}
+
+.lineno {
+  -fx-background-color: -light-bg-color;
+  -fx-text-fill: -main-fg-color;
+  -fx-font-size: 16;
+  -fx-padding: 0 15 0 5;
+  -fx-background-insets: 0 10 0 0;
+}
+
+/* -------------------------------- Modeline -------------------------------- */
+
+#modeline {
+  -fx-padding: 0 20;
+}
+
+#modeline .label {
+  -fx-font-size:15;
+  -fx-border-insets: 0 10;
+  -fx-background-insets: 0 10;
+  -fx-padding: 2 20;
+  -fx-background-radius: 10px;
+  -fx-background-color: -light-bg-color;
+}
+
+/* ---------------------------------- Misc ---------------------------------- */
+
+.label {
+  -fx-text-fill: -main-fg-color;
+}