- L&F improvements on OS X

main/ui/src/main/java/org/cryptomator/ui/MainApplication.java

@@ -19,6 +19,7 @@ import javafx.scene.Parent;
 import javafx.scene.Scene;
 import javafx.stage.Stage;
 
+import org.apache.commons.lang3.SystemUtils;
 import org.cryptomator.ui.settings.Settings;
 import org.cryptomator.ui.util.TrayIconUtil;
 import org.eclipse.jetty.util.ConcurrentHashSet;
@@ -35,8 +36,9 @@ public class MainApplication extends Application {
 
 	@Override
 	public void start(final Stage primaryStage) throws IOException {
+		chooseNativeStylesheet();
 		final ResourceBundle rb = ResourceBundle.getBundle("localization");
-		final FXMLLoader loader = new FXMLLoader(getClass().getResource("/main.fxml"), rb);
+		final FXMLLoader loader = new FXMLLoader(getClass().getResource("/fxml/main.fxml"), rb);
 		final Parent root = loader.load();
 		final MainController ctrl = loader.getController();
 		ctrl.setStage(primaryStage);
@@ -51,6 +53,16 @@ public class MainApplication extends Application {
 		});
 	}
 
+	private void chooseNativeStylesheet() {
+		if (SystemUtils.IS_OS_MAC_OSX) {
+			setUserAgentStylesheet(getClass().getResource("/css/mac_theme.css").toString());
+		} else if (SystemUtils.IS_OS_LINUX) {
+			setUserAgentStylesheet(getClass().getResource("/css/linux_theme.css").toString());
+		} else if (SystemUtils.IS_OS_WINDOWS) {
+			setUserAgentStylesheet(getClass().getResource("/css/win_theme.css").toString());
+		}
+	}
+
 	private void quit() {
 		Platform.runLater(() -> {
 			CLEAN_SHUTDOWN_PERFORMER.run();

main/ui/src/main/java/org/cryptomator/ui/MainController.java

@@ -137,11 +137,11 @@ public class MainController implements Initializable, InitializationListener, Un
 	}
 
 	private void showWelcomeView() {
-		this.showView("/welcome.fxml");
+		this.showView("/fxml/welcome.fxml");
 	}
 
 	private void showInitializeView(Directory directory) {
-		final InitializeController ctrl = showView("/initialize.fxml");
+		final InitializeController ctrl = showView("/fxml/initialize.fxml");
 		ctrl.setDirectory(directory);
 		ctrl.setListener(this);
 	}
@@ -152,7 +152,7 @@ public class MainController implements Initializable, InitializationListener, Un
 	}
 
 	private void showUnlockView(Directory directory) {
-		final UnlockController ctrl = showView("/unlock.fxml");
+		final UnlockController ctrl = showView("/fxml/unlock.fxml");
 		ctrl.setDirectory(directory);
 		ctrl.setListener(this);
 	}
@@ -164,7 +164,7 @@ public class MainController implements Initializable, InitializationListener, Un
 	}
 
 	private void showUnlockedView(Directory directory) {
-		final UnlockedController ctrl = showView("/unlocked.fxml");
+		final UnlockedController ctrl = showView("/fxml/unlocked.fxml");
 		ctrl.setDirectory(directory);
 		ctrl.setListener(this);
 	}

main/ui/src/main/java/org/cryptomator/ui/controls/DirectoryListCell.java

@@ -13,8 +13,15 @@ import org.cryptomator.ui.model.Directory;
 
 public class DirectoryListCell extends ListCell<Directory> implements ChangeListener<Boolean> {
 
-	// TODO: fancy graphics instead of circles ;-)
-	private final Circle statusIndicator = new Circle(3.0);
+	// fill: #FD4943, stroke: #E1443F
+	private static final Color RED_FILL = Color.rgb(253, 73, 67);
+	private static final Color RED_STROKE = Color.rgb(225, 68, 63);
+
+	// fill: #28CA40, stroke: #30B740
+	private static final Color GREEN_FILL = Color.rgb(40, 202, 64);
+	private static final Color GREEN_STROKE = Color.rgb(48, 183, 64);
+
+	private final Circle statusIndicator = new Circle(4.5);
 
 	public DirectoryListCell() {
 		setGraphic(statusIndicator);
@@ -48,8 +55,10 @@ public class DirectoryListCell extends ListCell<Directory> implements ChangeList
 	}
 
 	private void updateStatusIndicator() {
-		final Paint statusColor = getItem().isUnlocked() ? Color.LIME : Color.RED;
-		statusIndicator.setFill(statusColor);
+		final Paint fillColor = getItem().isUnlocked() ? GREEN_FILL : RED_FILL;
+		final Paint strokeColor = getItem().isUnlocked() ? GREEN_STROKE : RED_STROKE;
+		statusIndicator.setFill(fillColor);
+		statusIndicator.setStroke(strokeColor);
 	}
 
 }

main/ui/src/main/resources/css/mac_theme.css

@@ -0,0 +1,904 @@
+ /*
+  * Copyright (c) 2014 Sebastian Stenzel
+  * This file is licensed under the terms of the MIT license.
+  * See the LICENSE.txt file for more info.
+  * 
+  * Contributors:
+  *     Sebastian Stenzel - initial API and implementation
+  *
+  */
+
+.root {
+	-fx-font-family: 'lucida-grande';
+	-fx-font-smoothing-type: lcd;
+    -fx-font-size: 13.0;
+    
+    /***************************************************************************
+     *                                                                         *
+     * The main color palette from which the rest of the colors are derived.   *
+     *                                                                         *
+     **************************************************************************/
+
+    -fx-base: #FFFFFF;
+    -fx-background: #ECECEC;
+
+    /* Used for the inside of text boxes, password boxes, lists, trees, and
+     * tables.  See also -fx-text-inner-color, which should be used as the
+     * -fx-text-fill value for text painted on top of backgrounds colored
+     * with -fx-control-inner-background.
+     */
+    -fx-control-inner-background: #FFFFFF;
+
+    /* One of these colors will be chosen based upon a ladder calculation
+     * that uses the brightness of a background color.  Instead of using these
+     * colors directly as -fx-text-fill values, the sections in this file should
+     * use a derived color to match the background in use.  See also:
+     *
+     * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
+     * -fx-text-background-color for text on top of -fx-background
+     * -fx-text-inner-color for text on top of -fx-control-inner-color
+     * -fx-selection-bar-text for text on top of -fx-selection-bar
+     */
+    -fx-dark-text-color: black;
+    -fx-mid-text-color: #B5B5B5;
+    -fx-light-text-color: white;
+
+    /* A bright blue for highlighting/accenting objects.  For example: selected
+     * text; selected items in menus, lists, trees, and tables; progress bars */
+    -fx-accent: #B2D7FF;
+
+    /* A bright blue for the focus indicator of objects. Typically used as the
+     * first color in -fx-background-color for the "focused" pseudo-class. Also
+     * typically used with insets of -1.4 to provide a glowing effect.
+     */
+    -fx-focus-color: #78A6D7;
+    -fx-faint-focus-color: #8FBDEE;
+
+    /* The color that is used in styling controls. The default value is based
+     * on -fx-base, but is changed by pseudoclasses to change the base color.
+     * For example, the "hover" pseudoclass will typically set -fx-color to
+     * -fx-hover-base (see below) and the "armed" pseudoclass will typically
+     * set -fx-color to -fx-pressed-base.
+     */
+    -fx-color: -fx-base;
+
+    /* The opacity level to use for the "disabled" pseudoclass.
+     */
+    -fx-disabled-opacity: 0.6;
+    
+    /* Chart Color Palette */
+    CHART_COLOR_1: #28CA40;
+    CHART_COLOR_2: #FD4943;
+    CHART_COLOR_3: #2283FB;
+    CHART_COLOR_4: #FAEA77;
+    CHART_COLOR_5: #FA9E78;
+    CHART_COLOR_6: #F47BF8;
+    CHART_COLOR_7: #c84164;
+    CHART_COLOR_8: #888888;
+
+    /***************************************************************************
+     *                                                                         *
+     * Colors that are derived from the main color palette.                    *
+     *                                                                         *
+     **************************************************************************/
+
+    /* The color to use for -fx-text-fill when text is to be painted on top of
+     * a background filled with the -fx-background color.
+     */
+    -fx-text-background-color: -fx-dark-text-color;
+
+    /* A little darker than -fx-color and used to draw boxes around objects such
+     * as progress bars, scroll bars, scroll panes, trees, tables, and lists.
+     */
+    -fx-box-border: #C8C8C8;
+
+    /* Darker than -fx-background and used to draw boxes around text boxes and
+     * password boxes.
+     */
+    -fx-text-box-border: #B5B5B5;
+    
+    /* A gradient that goes from a little darker than -fx-color on the top to
+     * even more darker than -fx-color on the bottom.  Typically is the second
+     * color in the -fx-background-color list as the small thin border around
+     * a control. It is typically the same size as the control (i.e., insets
+     * are 0).
+     */
+    -fx-outer-border: derive(-fx-color,-23%);
+
+    /* A gradient that goes from a bit lighter than -fx-color on the top to
+     * a little darker at the bottom.  Typically is the third color in the
+     * -fx-background-color list as a thin highlight inside the outer border.
+     * Insets are typically 1.
+     */
+    -fx-inner-border: linear-gradient(to bottom, derive(-fx-color,75%), derive(-fx-color,2%));
+
+    /* A gradient that goes from a little lighter than -fx-color at the top to
+     * a little darker than -fx-color at the bottom and is used to fill the
+     * body of many controls such as buttons.  Typically is the fourth color
+     * in the -fx-background-color list and represents main body of the control.
+     * Insets are typically 2.
+     */
+    -fx-body-color: linear-gradient(to bottom, derive(-fx-color,10%) ,derive(-fx-color,-6%));
+
+    /* The color to use as -fx-text-fill when painting text on top of
+     * backgrounds filled with -fx-base, -fx-color, and -fx-body-color.
+     */
+    -fx-text-base-color: -fx-dark-text-color;
+    
+    /* The color to use as -fx-text-fill when painting text on top of
+     * backgrounds filled with -fx-control-inner-background.
+     */
+    -fx-text-inner-color: -fx-dark-text-color;
+
+    /* Background for items in list like things such as menus, lists, trees,
+     * and tables.
+     *
+     * TODO: it seems like this should be based upon -fx-accent and we should
+     * remove the setting -fx-background in all the sections that use
+     * -fx-selection-bar.
+     */
+    -fx-selection-bar: #2283FB;
+
+    /* The color to use as -fx-text-fill when painting text on top of
+     * backgrounds filled with -fx-selection-bar.
+     *
+     * TODO: it seems like this should be derived from -fx-selection-bar.
+     */
+    -fx-selection-bar-text: -fx-light-text-color;
+
+    /* These are needed for Popup */
+    -fx-background-color: inherit;
+    -fx-background-radius: inherit;
+    -fx-background-insets: inherit;
+    -fx-padding: inherit;
+    
+    -fx-cell-focus-inner-border: -fx-selection-bar;
+
+    /***************************************************************************
+     *                                                                         *
+     * Set the default background color for the scene                          *
+     *                                                                         *
+     **************************************************************************/
+    
+    -fx-background-color: -fx-background;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Common Styles                                                               *
+ *                                                                             *
+ * These are styles that give a standard look to a whole range of controls     *
+ *                                                                             *
+ ******************************************************************************/
+
+/* ====   BUTTON LIKE THINGS   ============================================== */
+
+.button,
+.toggle-button,
+.radio-button > .radio,
+.check-box > .box,
+.menu-button,
+.choice-box,
+.color-picker.split-button > .color-picker-label,
+.combo-box-base,
+.combo-box-base > .arrow-button {
+	-fx-background-color: linear-gradient(to bottom, #C1C1C1 0%, #A6A6A6 100%), -fx-base;
+	-fx-background-insets: 0, 1;
+    -fx-background-radius: 4;
+    -fx-padding: 0.2em 0.8em 0.2em 0.8em;
+    -fx-text-fill: -fx-dark-text-color;
+    -fx-alignment: CENTER;
+    -fx-focus-traversable: false;
+    -fx-effect: dropshadow(one-pass-box, #DCDCDC, 0.0, 0.0, 0.0, 1.0);
+}
+.button:hover,
+.toggle-button:hover,
+.radio-button:hover > .radio,
+.check-box:hover > .box,
+.menu-button:hover,
+.split-menu-button > .label:hover,
+.split-menu-button > .arrow-button:hover,
+.slider .thumb:hover,
+.scroll-bar > .thumb:hover,
+.scroll-bar > .increment-button:hover, 
+.scroll-bar > .decrement-button:hover,
+.choice-box:hover,
+.color-picker.split-button > .arrow-button:hover,
+.color-picker.split-button > .color-picker-label:hover,
+.combo-box-base:hover,
+.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover {
+    -fx-color: -fx-base;
+}
+.button:armed,
+.button:default:armed,
+.toggle-button:armed,
+.radio-button:armed > .radio,
+.check-box:armed .box,
+.menu-button:armed,
+.split-menu-button:armed > .label,
+.split-menu-button > .arrow-button:pressed,
+.split-menu-button:showing > .arrow-button,
+.slider .thumb:pressed,
+.scroll-bar > .thumb:pressed,
+.scroll-bar > .increment-button:pressed, 
+.scroll-bar > .decrement-button:pressed,
+.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:pressed {
+    -fx-background-color: linear-gradient(to bottom, #237FFE 0%, #023FDD 100%), linear-gradient(to bottom, #4A97FD 0%, #0867E4 100%);
+    -fx-text-fill: -fx-light-text-color;
+}
+.button:focused,
+.toggle-button:focused,
+.radio-button:focused > .radio,
+.check-box:focused > .box,
+.menu-button:focused,
+.choice-box:focused,
+.color-picker.split-button:focused > .color-picker-label {
+    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; 
+    -fx-background-insets: -2, -0.3, 1, 2;
+    -fx-background-radius: 7, 6, 4, 3;
+}
+
+/* ====   DISABLED THINGS   ================================================= */
+
+.button:disabled,
+.toggle-button:disabled,
+.radio-button:disabled,
+.check-box:disabled,
+.hyperlink:disabled,
+.menu-button:disabled,
+.split-menu-button:disabled,
+.slider:disabled,
+.scroll-pane:disabled,
+.progress-bar:disabled,
+.progress-indicator:disabled,
+.text-input:disabled,
+.choice-box:disabled,
+.combo-box-base:disabled,
+.list-view:disabled,
+.tree-view:disabled,
+.table-view:disabled,
+.tree-table-view:disabled,
+.tab-pane:disabled,
+.tab-pane > .tab-header-area > .headers-region > .tab:disabled {
+	-fx-background-color: linear-gradient(to bottom, #D2D2D2 0%, #C4C4C4 100%), #F2F2F2;
+	-fx-background-insets: 0, 1;
+    -fx-text-fill: -fx-mid-text-color;
+    -fx-effect: dropshadow(one-pass-box, #E0E0E0, 0.0, 0.0, 0.0, 0.5);
+}
+
+/* ====   MNEMONIC THINGS   ================================================= */
+
+.button:show-mnemonics .mnemonic-underline,
+.toggle-button:show-mnemonics .mnemonic-underline,
+.radio-button:show-mnemonics .mnemonic-underline,
+.check-box:show-mnemonics .mnemonic-underline,
+.hyperlink:show-mnemonics > .mnemonic-underline,
+.split-menu-button:show-mnemonics > .mnemonic-underline,
+.menu-button:show-mnemonics > .mnemonic-underline {
+    -fx-stroke: -fx-text-base-color;
+} 
+
+/* ====   ARROWS   ========================================================== */
+
+.combo-box-base > .arrow-button > .arrow {
+    -fx-background-color: -fx-light-text-color;
+    -fx-background-insets: 0 0 -1 0, 0;
+    -fx-padding: 9px 6px 0 0;
+    -fx-shape: "M 0 3 l 3 -3 l 3 3 m 0 3 l -3 3 l -3 -3";
+}
+
+/* ====   CHOICE BOX LIKE THINGS   ========================================== */
+
+.combo-box-base {
+    -fx-padding: 0;
+}
+
+/* ====   BOX LIKE THINGS   ================================================= */
+
+.scroll-pane,
+.split-pane,
+.list-view,
+.tree-view,
+.table-view, 
+.tree-table-view {
+    -fx-background-color: -fx-box-border, -fx-control-inner-background;
+    -fx-background-insets: 0, 1;
+    -fx-padding: 1;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Label                                                                       *
+ *                                                                             *
+ ******************************************************************************/
+
+.label {
+    -fx-text-fill: -fx-text-background-color;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Button & ToggleButton                                                       *
+ *                                                                             *
+ ******************************************************************************/
+
+/* ====   DEFAULT   ========================================================= */
+
+.button:default {
+	-fx-background-color: linear-gradient(to bottom, #4AA0F9 0%, #045FFF 100%), linear-gradient(to bottom, #69B2FA 0%, #0D81FF 100%);
+    -fx-text-fill: -fx-light-text-color;
+}
+.button:default:disabled {
+	-fx-background-color: linear-gradient(to bottom, #D2D2D2 0%, #C4C4C4 100%), #F2F2F2;
+	-fx-background-insets: 0, 1;
+    -fx-text-fill: -fx-mid-text-color;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ToolBar                                                                     *
+ *                                                                             *
+ ******************************************************************************/
+
+.tool-bar:horizontal {
+	-fx-background-color: -fx-box-border, -fx-background;
+    -fx-background-insets: 0;
+    -fx-padding: 0.4em;
+    -fx-spacing: 0.2em;
+    -fx-alignment: CENTER_LEFT;
+}
+
+.tool-bar:horizontal > .container > .separator {
+    -fx-orientation: vertical;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ScrollBar                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+.scroll-bar:horizontal,
+.scroll-bar:vertical {
+    -fx-background-color: #E8E8E8, #FAFAFA;
+}
+
+.scroll-bar:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+.scroll-bar > .thumb {
+    -fx-background-color: #C1C1C1;
+    -fx-background-insets: 2px; 
+    -fx-background-radius: 4px;
+}
+.scroll-bar > .thumb:hover {
+	-fx-background-color: #7D7D7D; 
+}
+
+.scroll-bar > .increment-button, 
+.scroll-bar > .decrement-button {
+    -fx-background-color: transparent; 
+    -fx-color: transparent;
+}
+
+.scroll-bar:horizontal > .increment-button, 
+.scroll-bar:horizontal > .decrement-button {
+    -fx-padding: 6px 0px;
+}
+
+.scroll-bar:vertical > .increment-button, 
+.scroll-bar:vertical > .decrement-button {
+    -fx-padding: 0px 6px;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Separator                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.separator:horizontal .line {
+    -fx-border-color: -fx-text-box-border transparent transparent transparent;
+    -fx-border-insets: 0, 1 0 0 0;
+}
+.separator:vertical .line {
+    -fx-border-color: transparent transparent transparent -fx-text-box-border;
+    -fx-border-width: 3, 1;
+    -fx-border-insets: 0, 0 0 0 1;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ProgressIndicator                                                           *
+ *                                                                             *
+ ******************************************************************************/
+
+.progress-indicator {
+    -fx-indeterminate-segment-count: 12.0;
+}
+
+.progress-indicator > .determinate-indicator > .indicator {
+    -fx-background-color:
+        rgb(208.0, 208.0, 208.0),
+        linear-gradient(rgb(176.0, 176.0, 176.0), rgb(207.0, 207.0, 207.0)),
+        linear-gradient(rgb(190.0, 190.0, 190.0) 0.0%, rgb(213.0, 213.0, 213.0) 15.0%, rgb(230.0, 230.0, 230.0) 50.0%, rgb(235.0, 235.0, 235.0) 100.0%),
+        linear-gradient(to left, rgb(196.0, 196.0, 196.0, 0.5) 0.0%, rgb(220.0, 220.0, 220.0, 0.2) 2.0% , transparent);
+    -fx-background-insets: 0.5 0.0 -0.5 0.0, 0.0, 0.5, 1.0;
+    -fx-padding: 0.083333em;
+}
+
+.progress-indicator > .determinate-indicator > .progress {
+    -fx-background-color:
+       rgb(208.0, 208.0, 208.0),
+       radial-gradient(center 50.0% 50.0%, radius 50.0%, rgb(84.0, 170.0, 240.0), rgb(90.0, 192.0, 246.0));
+    -fx-background-insets: 0.0, 0.5;
+    -fx-padding: 0.166667em; 
+}
+
+.progress-indicator > .determinate-indicator > .tick {
+    -fx-background-color: rgb(208.0, 208.0, 208.0), white;
+    -fx-background-insets: 1.0 0.0 -1.0 0.0, 0.0;
+    -fx-padding: 0.416667em;
+    -fx-shape: "m 18.174523,1027.137 c -0.18077,-0.4575 -0.184364,-0.8913 0.115901,-1.1721 0.300265,-0.2809 0.836622,-0.3601 1.288422,-0.041 0.4518,0.3191 2.020453,2.9316 2.020453,2.9316 l 5.41194,-8.0232 c -4e-6,0 0.516257,-0.6671 1.248682,-0.3099 0.648831,0.3165 0.559153,1.0373 0.559153,1.0373 0,0 -5.940433,9.3556 -6.15501,9.6287 -0.214577,0.273 -1.595078,0.2481 -1.817995,-0.027 -0.222917,-0.2751 -2.490777,-3.567 -2.671546,-4.0244 z";
+    -fx-scale-shape: false;
+}
+
+.progress-indicator > .percentage {
+    -fx-font-size: 0.916667em;
+}
+
+.progress-indicator:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+
+.progress-indicator:indeterminate > .spinner {
+    -fx-padding: 0.083333em; 
+}
+
+.progress-indicator:indeterminate .segment {
+    -fx-background-color: rgb(95.0, 95.0, 98.0), rgb(122.0, 122.0, 125.0);
+    -fx-background-insets:0.0, 0.5;
+}
+.progress-indicator:indeterminate .segment0 {
+    -fx-shape:"m 14.321262,6.5816808 c -0.824944,0.3797564 -0.10368,1.8484772 0.718513,1.3544717 L 18.786514,5.9486042 C 19.644992,5.4932031 18.92648,4.1387308 18.068001,4.5941315 z";
+}
+.progress-indicator:indeterminate .segment1 {
+    -fx-shape:"m 15.372451,9.2445322 c -0.906719,-0.051108 -0.957826,1.5843588 0,1.5332498 l 4.241273,0 c 0.97179,0 0.97179,-1.5332498 0,-1.5332498 z";
+}
+.progress-indicator:indeterminate .segment2 {
+    -fx-shape:"m 14.423504,13.443113 c -0.824945,-0.379757 -0.10368,-1.848478 0.718512,-1.354472 l 3.746739,1.987548 c 0.858478,0.455401 0.139967,1.809873 -0.718512,1.354473 z";
+}
+.progress-indicator:indeterminate .segment3 {
+    -fx-shape:"m 12.10997,15.070611 c -0.49762,-0.759687 0.893182,-1.621681 1.327834,-0.766626 l 2.120636,3.673051 c 0.485895,0.841595 -0.841938,1.60822 -1.327833,0.766625 z";
+}
+.progress-indicator:indeterminate .segment4 {
+    -fx-shape:"m 9.2224559,19.539943 c -0.051108,0.906718 1.5843581,0.957826 1.5332501,0 l 0,-4.241273 c 0,-0.97179 -1.5332501,-0.97179 -1.5332501,0 z";
+}
+.progress-indicator:indeterminate .segment5 {
+    -fx-shape:"M 8.0465401,15.070611 C 8.5441601,14.310924 7.1533584,13.44893 6.7187068,14.303985 l -2.1206366,3.673051 c -0.485895,0.841595 0.8419383,1.60822 1.3278333,0.766625 z";
+}
+.progress-indicator:indeterminate .segment6 {
+    -fx-shape:"M 5.7330066,13.443113 C 6.5579512,13.063356 5.8366865,11.594635 5.0144939,12.088641 L 1.2677551,14.076189 C 0.409277,14.53159 1.1277888,15.886062 1.9862674,15.430662 z";
+}
+.progress-indicator:indeterminate .segment7 {
+    -fx-shape:"m 0.42171041,9.2083842 c -0.90671825,-0.051108 -0.95782608,1.5843588 0,1.5332498 l 4.24127319,0 c 0.9717899,0 0.9717899,-1.5332498 0,-1.5332498 z";
+}
+.progress-indicator:indeterminate .segment8 {
+    -fx-shape:"M 5.7330066,6.5305598 C 6.5579512,6.9103162 5.8366865,8.3790371 5.0144939,7.8850315 L 1.2677551,5.8974832 C 0.409277,5.4420823 1.1277888,4.0876101 1.9862674,4.5430105 z";
+}
+.progress-indicator:indeterminate .segment9 {
+    -fx-shape:"M 8.0465401,4.9030617 C 8.5441601,5.6627485 7.1533584,6.5247425 6.7187068,5.6696872 L 4.5980702,1.9966363 C 4.1121752,1.1550418 5.4400085,0.38841683 5.9259035,1.2300114 z";
+}
+.progress-indicator:indeterminate .segment10 {
+    -fx-shape:"m 9.2224559,4.62535 c -0.051108,0.9067177 1.5843581,0.957826 1.5332501,0 l 0,-4.24127319 c 0,-0.9717899 -1.5332501,-0.9717899 -1.5332501,0 z";
+}
+.progress-indicator:indeterminate .segment11 {
+    -fx-shape:"m 12.007729,4.9541827 c -0.49762,0.7596865 0.893181,1.6216808 1.327833,0.7666252 L 15.456199,2.0477574 C 15.942094,1.2061627 14.61426,0.43953765 14.128365,1.2811324 z";
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Text COMMON                                                                 *
+ *                                                                             *
+ ******************************************************************************/
+
+.text-input {
+    -fx-text-fill: -fx-dark-text-color;
+    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
+    -fx-highlight-text-fill: -fx-text-inner-color;
+    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
+    -fx-border-color: -fx-text-box-border;
+    -fx-border-width: 1px;
+    -fx-background-color: #FFFFFF;
+    -fx-background-insets: 0;
+    -fx-background-radius: 0;
+    -fx-cursor: text;
+    -fx-padding: 2px;
+}
+.text-input:focused {
+    -fx-highlight-fill: -fx-accent;
+    -fx-border-color: -fx-focus-color;
+    -fx-border-width: 1px;
+    -fx-background-color: -fx-faint-focus-color, #FFFFFF; 
+    -fx-background-insets: -3, 0;
+    -fx-background-radius: 3, 0;
+    -fx-prompt-text-fill: transparent;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * PopupMenu                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.context-menu {
+    -fx-background-color: rgba(255.0, 255.0, 255.0, 0.9);
+    -fx-background-insets: 0;
+    -fx-background-radius: 4.0;
+    -fx-padding: 4px 0 4px 0; 
+    -fx-effect: dropshadow(three-pass-box, rgba(0.0,0.0,0.0,0.6), 8.0, 0.0, 0.0, 0.0 );
+}
+.context-menu > .separator {
+    -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * MenuItem                                                                    *
+ *                                                                             *
+ ******************************************************************************/
+
+.menu-item {
+    -fx-background-color: transparent;
+    -fx-background-insets:0.0;
+    -fx-padding:0.2em 1em 0.2em 1em;
+    -fx-border-width: 0.0 0.0 0.0 0.0;
+    -fx-border-color:transparent;
+}
+.menu-item > .left-container {
+    -fx-padding: 0.458em 0.791em 0.458em 0.458em;
+}
+.menu-item > .graphic-container {
+    -fx-padding: 0em 0.333em 0em 0em;
+}
+.menu-item >.label {
+    -fx-padding: 0em 0.5em 0em 0em;
+    -fx-text-fill: -fx-text-base-color;
+}
+.menu-item:disabled > .label {
+    -fx-opacity: -fx-disabled-opacity;
+}
+.menu-item:focused {
+     -fx-background: -fx-accent;
+     -fx-background-color: -fx-selection-bar;
+     -fx-text-fill: -fx-selection-bar-text;
+}
+.menu-item:focused > .label {
+    -fx-text-fill: white;
+}
+.menu-item > .right-container {
+    -fx-padding: 0em 0em 0em 0.5em;
+}
+.menu-item:show-mnemonics > .mnemonic-underline {
+    -fx-stroke: -fx-text-fill;
+} 
+.menu > .right-container > .arrow {
+    -fx-padding: 0.458em 0.167em 0.458em 0.167em; /* 4.5 2 4.5 2 */
+    -fx-background-color: -fx-color;
+    -fx-shape: "M0,-4L4,0L0,4Z";
+    -fx-scale-shape: false;
+}
+.menu:selected > .right-container > .arrow {
+    -fx-background-color: white;
+}
+.menu-item:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ComboBox                                                                    *
+ *                                                                             *
+ ******************************************************************************/
+
+/* Customie the ListCell that appears in the ComboBox button itself */
+.combo-box > .list-cell {
+    -fx-background: transparent;
+    -fx-background-color: transparent;
+    -fx-text-fill: -fx-text-base-color;
+	-fx-padding: 0.2em 0.5em 0.2em 0.5em;
+}
+.combo-box-base > .arrow-button  {
+	-fx-background-color: linear-gradient(to bottom, #4AA0F9 0%, #045FFF 100%), linear-gradient(to bottom, #69B2FA 0%, #0D81FF 100%);
+    -fx-background-radius: 0 5 5 0, 0 4 4 0;
+	-fx-padding: 0.2em 0.5em 0.2em 0.5em;
+    -fx-background-insets: 0 0 0 1, 1;
+}
+
+.combo-box-popup > .list-view {
+    -fx-background-color: rgba(255.0, 255.0, 255.0, 0.9);
+    -fx-background-insets: 0;
+    -fx-background-radius: 4.0;
+    -fx-padding: 4px 0 4px 0; 
+    -fx-effect: dropshadow(three-pass-box, rgba(0.0,0.0,0.0,0.6), 8.0, 0.0, 0.0, 0.0);
+}
+.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
+    -fx-background-color: transparent;
+    -fx-background-insets:0.0;
+    -fx-padding:0.2em 1em 0.2em 1em;
+    -fx-border-width: 0.0 0.0 0.0 0.0;
+    -fx-border-color:transparent;
+}
+
+.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, 
+.combo-box-popup  > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
+	-fx-background: -fx-accent;
+	-fx-background-color: -fx-selection-bar;
+	-fx-text-fill: -fx-selection-bar-text;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * SplitPane                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.split-pane > .split-pane-divider {
+    -fx-padding: 0 0.25em 0 0.25em; /* 0 3 0 3 */
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ListView and ListCell                                                       *
+ *                                                                             *
+ ******************************************************************************/
+
+.list-view > .virtual-flow > .scroll-bar:vertical{
+    -fx-background-insets: 0, 0 0 0 1;
+    -fx-padding: -1 -1 -1 0;
+}
+.list-view > .virtual-flow > .scroll-bar:horizontal{
+    -fx-background-insets: 0, 1 0 0 0;
+    -fx-padding: 0 -1 -1 -1;
+}
+.list-view > .virtual-flow > .corner {
+    -fx-background-color: -fx-box-border, -fx-base;
+    -fx-background-insets: 0, 1 0 0 1;
+}
+.list-cell {
+    -fx-background-color: -fx-control-inner-background;
+    -fx-padding: 0.8em 0.5em 0.8em 0.5em;
+    -fx-text-fill: -fx-text-inner-color;
+    -fx-opacity: 1;
+}
+.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused {
+    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
+    -fx-background-insets: 0, 1, 2;
+}
+/* When the list-cell is selected and focused */
+.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected {
+    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
+    -fx-background-insets: 0, 1, 2;
+    -fx-background: -fx-accent;
+    -fx-text-fill: -fx-selection-bar-text;
+}
+.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, 
+.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
+    -fx-background: -fx-accent;
+    -fx-background-color: -fx-selection-bar;
+    -fx-text-fill: -fx-selection-bar-text;
+}
+.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected:hover {
+    -fx-background: -fx-accent;
+    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
+    -fx-background-insets: 0, 1, 2;
+    -fx-text-fill: -fx-selection-bar-text;
+}
+/* When the ListView is _not_ focused, we show alternate selection colors */
+.list-cell:filled:selected:focused,
+.list-cell:filled:selected,
+.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
+    -fx-background-color: lightgray;
+    -fx-text-fill: -fx-selection-bar-text;
+}
+.list-cell:filled:selected:focused:disabled, 
+.list-cell:filled:selected:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
+.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
+    -fx-background-color: -fx-selection-bar;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Tooltip                                                                     *
+ *                                                                             *
+ ******************************************************************************/
+
+.tooltip {
+	-fx-background-color: -fx-background;
+    -fx-padding: 0.2em 0.4em 0.2em 0.4em;
+    -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 2, 0, 0, 0);
+    -fx-font-size: 0.8em;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Charts                                                                      *
+ *                                                                             *
+ ******************************************************************************/
+
+.chart {
+    -fx-padding: 5px;
+}
+.chart-content {
+    -fx-padding: 10px;
+}
+.chart-title {
+    -fx-font-size: 1.4em;
+}
+.chart-legend {
+   -fx-background-color: linear-gradient(to bottom, derive(-fx-background, -10%), derive(-fx-background, -5%)),
+        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-background, -5%), derive(-fx-background, 20%));
+   -fx-background-insets: 0,1;
+   -fx-background-radius: 6,5;
+   -fx-padding: 6px;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Axis                                                                        *
+ *                                                                             *
+ ******************************************************************************/
+
+.axis {
+    AXIS_COLOR: derive(-fx-background,-20%);
+    -fx-tick-label-font-size: 0.833333em; /* 10px */
+    -fx-tick-label-fill: derive(-fx-text-background-color, 30%);
+}
+.axis:top {
+    -fx-border-color: transparent transparent AXIS_COLOR transparent;
+}
+.axis:right {
+    -fx-border-color: transparent transparent transparent AXIS_COLOR;
+}
+.axis:bottom {
+    -fx-border-color: AXIS_COLOR transparent transparent transparent;
+}
+.axis:left {
+    -fx-border-color: transparent AXIS_COLOR transparent transparent;
+}
+.axis-tick-mark,
+.axis-minor-tick-mark {
+    -fx-fill: null;
+    -fx-stroke: AXIS_COLOR;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ChartPlot                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.chart-vertical-grid-lines {
+    -fx-stroke: derive(-fx-background,-10%);
+    -fx-stroke-dash-array: 0.25em, 0.25em;
+}
+.chart-horizontal-grid-lines {
+    -fx-stroke: derive(-fx-background,-10%);
+}
+.chart-alternative-column-fill {
+    -fx-fill: null;
+    -fx-stroke: null;
+}
+.chart-alternative-row-fill {
+    -fx-fill: null;
+    -fx-stroke: null;
+}
+.chart-vertical-zero-line,
+.chart-horizontal-zero-line {
+    -fx-stroke: derive(-fx-text-background-color, 40%);
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * LineChart                                                                     *
+ *                                                                             *
+ ******************************************************************************/
+
+.chart-line-symbol {
+    -fx-background-color: #f9d900, white;
+    -fx-background-insets: 0, 2;
+    -fx-background-radius: 5px;
+    -fx-padding: 5px;
+}
+.chart-series-line {
+    -fx-stroke: #f9d900;
+    -fx-stroke-width: 3px;
+    /*-fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.3) , 8, 0.0 , 0 , 3 );*/
+}
+.default-color0.chart-line-symbol { -fx-background-color: CHART_COLOR_1, white; }
+.default-color1.chart-line-symbol { -fx-background-color: CHART_COLOR_2, white; }
+.default-color2.chart-line-symbol { -fx-background-color: CHART_COLOR_3, white; }
+.default-color3.chart-line-symbol { -fx-background-color: CHART_COLOR_4, white; }
+.default-color4.chart-line-symbol { -fx-background-color: CHART_COLOR_5, white; }
+.default-color5.chart-line-symbol { -fx-background-color: CHART_COLOR_6, white; }
+.default-color6.chart-line-symbol { -fx-background-color: CHART_COLOR_7, white; }
+.default-color7.chart-line-symbol { -fx-background-color: CHART_COLOR_8, white; }
+.default-color0.chart-series-line { -fx-stroke: CHART_COLOR_1; }
+.default-color1.chart-series-line { -fx-stroke: CHART_COLOR_2; }
+.default-color2.chart-series-line { -fx-stroke: CHART_COLOR_3; }
+.default-color3.chart-series-line { -fx-stroke: CHART_COLOR_4; }
+.default-color4.chart-series-line { -fx-stroke: CHART_COLOR_5; }
+.default-color5.chart-series-line { -fx-stroke: CHART_COLOR_6; }
+.default-color6.chart-series-line { -fx-stroke: CHART_COLOR_7; }
+.default-color7.chart-series-line { -fx-stroke: CHART_COLOR_8; }
+
+/*******************************************************************************
+ *                                                                             *
+ * Combinations                                                                *
+ *                                                                             *
+ * This section is for special handling of when one control is nested inside   *
+ * another control. There are many cases where we would end up with ugly       *
+ * double borders that are fixed here.                                         *
+ *                                                                             *
+ ******************************************************************************/
+
+.split-pane > * > .table-view { -fx-padding: 0px; }
+.split-pane > * > .list-view { -fx-padding: 0px; }
+.split-pane > * > .tree-view { -fx-padding: 0px; }
+.split-pane > * > .scroll-pane { -fx-padding: 0px; }
+.split-pane > * > .split-pane {
+    -fx-background-insets: 0, 0;
+    -fx-padding: 0;
+ }
+ 
+ /* ############################################################################
+    # Workaround for RT-27627                                                  #
+    ############################################################################ */
+ 
+.choice-box > .open-button > .arrow { doh: true; }
+.split-menu-button:openvertically > .arrow-button > .arrow { doh: true; }
+.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow { doh: true; }
+.tree-table-view { doh: true; }
+.tree-table-view:focused { doh: true; }
+.tree-table-view > .virtual-flow > .scroll-bar:vertical { doh: true; }
+.tree-table-view > .virtual-flow > .scroll-bar:horizontal { doh: true; }
+.tree-table-view > .virtual-flow > .corner { doh: true; }
+.tree-table-row-cell:focused { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected { doh: true; }
+.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover{ doh: true; }
+.tree-table-row-cell:filled:selected:focused { doh: true; }
+.tree-table-row-cell:filled:selected { doh: true; }
+.tree-table-row-cell:selected:disabled { doh: true; }
+.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover { doh: true; }
+.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { doh: true; }
+.tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible { doh: true; }
+.tree-table-view:constrained-resize > .column-header:last-visible { doh: true; }
+.tree-table-view:constrained-resize .filler { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled .tree-table-cell:focused:selected { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; }
+.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover:selected { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:selected:hover{ doh: true; }
+.tree-table-row-cell:filled > .tree-table-cell:selected:focused { doh: true; }
+.tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; }
+.tree-table-cell:selected:disabled { doh: true; }
+.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover { doh: true; }
+.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover { doh: true; }
+.tree-table-view .column-resize-line { doh: true; }
+.tree-table-view > .column-header-background { doh: true; }
+.tree-table-view .column-header { doh: true; }
+.tree-table-view .filler { doh: true; }
+.tree-table-view .column-header .sort-order{ doh: true; }
+.tree-table-view > .column-header-background > .show-hide-columns-button{ doh: true; }
+.tree-table-view .show-hide-column-image { doh: true; }
+.tree-table-view .column-drag-header { doh: true; }
+.tree-table-view .column-overlay { doh: true; }
+.tree-table-view /*> column-header-background > nested-column-header >*/ .arrow { doh: true; }
+.tree-table-view .empty-table { doh: true; }
+.axis-minor-tick-mark { doh: true; }
+.chart-horizontal-zero-line { doh: true; }
+.stacked-bar-chart:horizontal .chart-bar { doh: true; }

main/ui/src/main/resources/main.fxml

@@ -34,7 +34,7 @@
 	<children>
 		<VBox prefWidth="200.0">
 			<children>
-				<ListView fx:id="directoryList" VBox.vgrow="ALWAYS" />
+				<ListView fx:id="directoryList" VBox.vgrow="ALWAYS" focusTraversable="false" />
 				<ToolBar VBox.vgrow="NEVER">
 					<items>
 						<Button text="+" onAction="#didClickAddDirectory" />

main/ui/src/main/resources/fxml/welcome.fxml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  Copyright (c) 2014 Sebastian Stenzel
+  This file is licensed under the terms of the MIT license.
+  See the LICENSE.txt file for more info.
+  
+  Contributors:
+      Sebastian Stenzel - initial API and implementation
+-->
+<?import java.net.*?>
+<?import javafx.geometry.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.text.*?>
+<?import java.lang.String?>
+<?import javafx.scene.shape.Arc?>
+<?import javafx.scene.shape.QuadCurve?>
+<?import javafx.scene.shape.Path?>
+<?import javafx.scene.shape.Line?>
+
+
+<AnchorPane xmlns:fx="http://javafx.com/fxml">
+	
+	<children>
+		<Label AnchorPane.leftAnchor="100.0" AnchorPane.topAnchor="50.0" style="-fx-font-size: 1.5em;" text="%welcome.welcomeLabel"/>
+		<Label AnchorPane.leftAnchor="120.0" AnchorPane.topAnchor="280.0" text="%welcome.addButtonInstructionLabel"/>
+		
+		<QuadCurve AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="300.0" startX="200.0" startY="0.0" endX="0.0" endY="80.0" controlX="180.0" controlY="80.0" fill="TRANSPARENT" stroke="BLACK" strokeWidth="2.0"/>
+		<Line AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="370.0" startX="0.0" endX="10.0" startY="10.0" endY="0.0" strokeWidth="2.0"/>
+		<Line AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="380.0" startX="0.0" endX="10.0" startY="0.0" endY="10.0" strokeWidth="2.0"/>
+	</children>
+	
+</AnchorPane>

main/ui/src/main/resources/localization.properties

@@ -17,6 +17,7 @@ main.directoryList.contextMenu.changePassword=Change password
 
 # welcome.fxml
 welcome.welcomeLabel=Welcome to Cryptomator
+welcome.addButtonInstructionLabel=Start by adding a new vault :-)
 
 
 # initialize.fxml

main/ui/src/main/resources/main.css

@@ -1,119 +0,0 @@
-@CHARSET "US-ASCII";
-
-.root {
-	-fx-background-color: linear-gradient(to bottom, #FFFFFF, #DDDDDD);
-}
-
-.text {
-    -fx-font-smoothing-type: lcd;
-}
-
-.button,
-.combo-box {
-	-fx-border-color: #888888;
-    -fx-background-insets: 0.0, 1.0;
-    -fx-background-radius: 4.0, 4.0;
-    -fx-border-radius: 3.0;
-    -fx-border-width: 0.5;
-}
-
-.text-field {
-	-fx-border-radius: 3.0;
-    -fx-border-width: 0.5;
-}
-
-.button.green,
-.button.red,
-.split-menu-button.green,
-.split-menu-button.red {
-	-fx-background-radius: 3.0;
-	-fx-background-color: #FFFFFF;
-	-fx-background-insets: 1px 1px 1px 1px;
-}
-
-.button.green,
-.button.red,
-.split-menu-button.green > .label,
-.split-menu-button.red > .label {
-	-fx-text-fill: #FFF;
-	-fx-alignment: CENTER;
-	-fx-font-weight: bold;
-	-fx-font-family: "lucida-grande";
-}
-
-.split-menu-button.green > .arrow-button > .arrow,
-.split-menu-button.red > .arrow-button > .arrow {
-	-fx-background-color: #FFF;
-}
-
-.button.green,
-.split-menu-button.green > .label,
-.split-menu-button.green > .arrow-button {
-	-fx-background-color: linear-gradient(to bottom, #33EE55, #22AA33);
-}
-
-.button.green:hover,
-.split-menu-button.green > .label:hover,
-.split-menu-button.green > .arrow-button:hover {
-	-fx-background-color: linear-gradient(to bottom, #33EE55, #118822);
-}
-
-.button.green:armed,
-.split-menu-button.green:armed > .label,
-.split-menu-button.green > .arrow-button:pressed,
-.split-menu-button.green:showing > .arrow-button {
-	-fx-background-color: linear-gradient(to bottom, #118822, #22AA33 20%, #33EE55);
-}
-
-.button.green:disabled,
-.split-menu-button.green:disabled,
-.split-menu-button.green:disabled > .label,
-.split-menu-button.green:disabled > .arrow-button {
-	-fx-background-color: #22AA33;
-}
-
-.button.red,
-.split-menu-button.red > .label,
-.split-menu-button.red > .arrow-button {
-	-fx-background-color: linear-gradient(to bottom, #EE5533, #AA3322);
-}
-
-.button.red:hover,
-.split-menu-button.red > .label:hover,
-.split-menu-button.red > .arrow-button:hover {
-	-fx-background-color: linear-gradient(to bottom, #EE5533, #882211);
-}
-
-.button.red:armed,
-.split-menu-button.red:armed > .label,
-.split-menu-button.red > .arrow-button:pressed,
-.split-menu-button.red:showing > .arrow-button {
-	-fx-background-color: linear-gradient(to bottom, #882211, #AA3322 20%, #EE5533);
-}
-
-.button.red:disabled,
-.split-menu-button.red:disabled,
-.split-menu-button.red:disabled > .label,
-.split-menu-button.red:disabled > .arrow-button {
-	-fx-background-color: #AA3322;
-}
-
-.split-menu-button .menu-item:focused {
-	-fx-background-color: #CCC;
-}
-
-.split-menu-button .menu-item .label {
-	-fx-text-fill: #000000;
-}
-
-.text-field {
-	-fx-border-radius: 3.0;
-    -fx-border-width: 0.5;
-	-fx-border-color: #888888;
-	-fx-background-color: #FFFFFF;
-	-fx-padding: 4 2 4 2;
-}
-
-.text-field:focused {
-	-fx-background-color: #FFFFFF;
-}

main/ui/src/main/resources/welcome.fxml

@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-  Copyright (c) 2014 Sebastian Stenzel
-  This file is licensed under the terms of the MIT license.
-  See the LICENSE.txt file for more info.
-  
-  Contributors:
-      Sebastian Stenzel - initial API and implementation
--->
-<?import java.net.*?>
-<?import javafx.geometry.*?>
-<?import javafx.scene.control.*?>
-<?import javafx.scene.layout.*?>
-<?import javafx.scene.text.*?>
-<?import java.lang.String?>
-
-
-<AnchorPane xmlns:fx="http://javafx.com/fxml">
-	
-	<children>
-		<Label fx:id="messageLabel" AnchorPane.leftAnchor="100.0" AnchorPane.topAnchor="50.0" text="%welcome.welcomeLabel"/>
-	</children>
-	
-</AnchorPane>
-
-