From fa729e220c8220ce9082892f1d15d7b98c978436 Mon Sep 17 00:00:00 2001
From: Tobias Hagemann <tobias@hagemann.org>
Date: Mon, 22 Jul 2019 16:16:15 +0200
Subject: [PATCH] updated theme

---
 main/ui/src/main/resources/css/theme.css      | 159 +++++++++++++-----
 .../src/main/resources/fxml/main_window.fxml  |  16 +-
 .../src/main/resources/fxml/vault_list.fxml   |   6 +-
 3 files changed, 131 insertions(+), 50 deletions(-)

diff --git a/main/ui/src/main/resources/css/theme.css b/main/ui/src/main/resources/css/theme.css
index ed15487c5..234f5c37d 100644
--- a/main/ui/src/main/resources/css/theme.css
+++ b/main/ui/src/main/resources/css/theme.css
@@ -1,27 +1,51 @@
 /*******************************************************************************
  *                                                                             *
- * COLORS                                                                      *
+ * Colors                                                                      *
  *                                                                             *
  ******************************************************************************/
- 
-.root {
-	WHITE: #FFF;
-	PRIMARY_BG: #79B01A;
-	TEXT_FILL: #222;
-	CONTROL_BORDER: #79B01A;
-}
 
+.root {
+	PRIMARY: #79B01A;
+	PRIMARY_BG: #70A11B;
+	GRAY_LIGHT_BG: #F7F7F7;
+	TEXT_FILL: #222;
+	CONTROL_BORDER: #CFCFCF;
+	CONTROL_ARMED: #E1E1E1;
+
+	-fx-background-color: GRAY_LIGHT_BG;
+    -fx-text-fill: TEXT_FILL;
+}
 
 /*******************************************************************************
  *                                                                             *
  * Main Window                                                                 *
  *                                                                             *
  ******************************************************************************/
- 
+
 .main-window .title {
 	-fx-background-color: PRIMARY_BG;
 }
 
+.main-window .title .label {
+	-fx-font-family: 'Dosis';
+	-fx-font-size: 21px;
+	-fx-font-style: normal;
+	-fx-font-weight: 700;
+	-fx-text-fill: white;
+}
+
+.main-window .title .button {
+	-fx-background-color: none;
+}
+
+.main-window .title .button .fa-icon {
+	-fx-fill: white;
+}
+
+.main-window .title .button:armed .fa-icon {
+	-fx-fill: CONTROL_ARMED;
+}
+
 /*******************************************************************************
  *                                                                             *
  * SplitPane                                                                   *
@@ -29,12 +53,36 @@
  ******************************************************************************/
 
 .split-pane > .split-pane-divider {
-    -fx-padding: 0 2;
+	-fx-padding: 0px 1px;
 }
 
 .split-pane:horizontal > .split-pane-divider {
-   -fx-background-color: CONTROL_BORDER, WHITE;
-   -fx-background-insets: 0, 0 1;
+	-fx-background-color: GRAY_LIGHT_BG, CONTROL_BORDER;
+	-fx-background-insets: 0, 0 1 0 0;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Vault List                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.list-view {
+    -fx-background-color: white;
+}
+
+.list-cell:selected {
+	-fx-background-color: CONTROL_ARMED;
+}
+
+.onboarding-overlay-arc {
+	-fx-stroke: black;
+	-fx-fill: transparent;
+}
+
+.toolbar-container {
+	-fx-border-color: CONTROL_BORDER transparent transparent transparent;
+	-fx-border-width: 1px 0 0 0;
 }
 
 /*******************************************************************************
@@ -44,9 +92,11 @@
  ******************************************************************************/
 
 .tooltip {
-	-fx-background-color: WHITE;
-    -fx-padding: 0.2em 0.4em 0.2em 0.4em;
-    -fx-font-size: 0.8em;
+	-fx-text-fill: TEXT_FILL;
+	-fx-font-size: 0.8em;
+	-fx-background-color: white;
+	-fx-padding: 0.2em 0.4em 0.2em 0.4em;
+	-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.5), 2, 0, 0, 0);
 }
 
 /*******************************************************************************
@@ -56,12 +106,13 @@
  ******************************************************************************/
 
 .text-input {
-    -fx-text-fill: TEXT_FILL;
-    -fx-prompt-text-fill: derive(TEXT_FILL, +50%);
-    -fx-background-color: CONTROL_BORDER, WHITE;
-    -fx-background-insets: 0, 1px;
-    -fx-cursor: text;
-	-fx-padding: 2px 4px 2px 4px;
+	-fx-cursor: text;
+	-fx-text-fill: TEXT_FILL;
+	-fx-prompt-text-fill: derive(TEXT_FILL, +50%);
+	-fx-background-color: CONTROL_BORDER, white;
+	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+	-fx-padding: 0.3em 0.5em 0.3em 0.5em;
 }
 
 /****************************************************************************
@@ -72,11 +123,16 @@
 
 .button {
 	-fx-pref-height: 25px;
-	-fx-background-color: CONTROL_BORDER, WHITE;
-	-fx-background-insets: 0, 1px;
-	-fx-padding: 2px 4px 2px 4px;
 	-fx-text-fill: TEXT_FILL;
 	-fx-alignment: CENTER;
+	-fx-background-color: CONTROL_BORDER, white;
+	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+	-fx-padding: 0.2em 0.4em 0.2em 0.4em;
+}
+
+.button:armed {
+	-fx-background-color: CONTROL_BORDER, CONTROL_ARMED;
 }
 
 /*******************************************************************************
@@ -86,22 +142,25 @@
  ******************************************************************************/
 
 .check-box {
-    -fx-label-padding: 0 0 0 6px;
-    -fx-text-fill: TEXT_FILL;
+	-fx-text-fill: TEXT_FILL;
+	-fx-label-padding: 0 0 0 6px;
 }
+
 .check-box > .box {
-    -fx-padding: 2px;
-    -fx-background-color: CONTROL_BORDER, WHITE;
+	-fx-background-color: CONTROL_BORDER, white;
 	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+	-fx-padding: 0.3em;
 }
+
 .check-box > .box > .mark {
-    -fx-background-color: transparent;
-    -fx-padding: 4px;
-    -fx-shape: "M-1,4, L-1,5.5 L3.5,8.5 L9,0 L9,-1 L7,-1 L3,6 L1,4 Z";
+	-fx-background-color: transparent;
+	-fx-padding: 0.4em;
+	-fx-shape: "M-1,4, L-1,5.5 L3.5,8.5 L9,0 L9,-1 L7,-1 L3,6 L1,4 Z";
 }
 
 .check-box:selected > .box > .mark {
-    -fx-background-color: TEXT_FILL;
+	-fx-background-color: TEXT_FILL;
 }
 
 /*******************************************************************************
@@ -111,25 +170,43 @@
  ******************************************************************************/
 
 .choice-box {
-	-fx-background-color: CONTROL_BORDER, WHITE;
-	-fx-background-insets: 0, 1px;
-	-fx-background-radius: 0, 0;
-	-fx-padding: 2px 4px 2px 4px;
 	-fx-text-fill: TEXT_FILL;
+	-fx-background-color: CONTROL_BORDER, white;
+	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+	-fx-padding: 0.3em 0.5em 0.3em 0.5em;
 }
 
 .choice-box:focused {
-	-fx-background-color: derive(CONTROL_BORDER, -20%), WHITE;
+	-fx-background-color: derive(CONTROL_BORDER, -20%), white;
+}
+
+.choice-box > .open-button {
+	-fx-padding: 0 0 0 0.3em;
 }
 
 .choice-box > .open-button > .arrow {
 	-fx-background-color: transparent, TEXT_FILL;
 	-fx-background-insets: 0 0 -1 0, 0;
-	-fx-padding: 2px 4px 2px 4px;
+	-fx-padding: 0.15em 0.3em 0.15em 0.3em;
 	-fx-shape: "M 0 0 h 7 l -3.5 4 z";
 }
 
 .choice-box .context-menu {
-	-fx-background-color: CONTROL_BORDER, WHITE;
-    -fx-background-insets: 0, 1px;
-}
\ No newline at end of file
+	-fx-background-color: CONTROL_BORDER, white;
+	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+	-fx-padding: 0.2em 0 0.2em 0;
+}
+
+.context-menu {
+	-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.2), 8, 0, 0, 0);
+}
+
+.menu-item {
+	-fx-padding: 0.2em 0.4em 0.2em 0.4em;
+}
+
+.menu-item:focused {
+	-fx-background-color: CONTROL_ARMED;
+}
diff --git a/main/ui/src/main/resources/fxml/main_window.fxml b/main/ui/src/main/resources/fxml/main_window.fxml
index 8a7e979b1..7b56ed282 100644
--- a/main/ui/src/main/resources/fxml/main_window.fxml
+++ b/main/ui/src/main/resources/fxml/main_window.fxml
@@ -3,30 +3,34 @@
 <?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.SplitPane?>
 <?import javafx.scene.control.Tooltip?>
 <?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.Region?>
 <?import javafx.scene.layout.VBox?>
-<?import javafx.scene.control.SplitPane?>
 <VBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.mainwindow.MainWindowController"
 	  styleClass="main-window">
-	<HBox styleClass="title" fx:id="titleBar" alignment="CENTER_RIGHT" minHeight="50" maxHeight="50" VBox.vgrow="NEVER" spacing="12">
+	<HBox styleClass="title" fx:id="titleBar" alignment="CENTER" minHeight="50" maxHeight="50" VBox.vgrow="NEVER" spacing="12">
 		<padding>
 			<Insets bottom="6" left="12" right="12" top="6"/>
 		</padding>
 		<children>
-			<Button contentDisplay="GRAPHIC_ONLY" mnemonicParsing="false" onAction="#showPreferences" style="-fx-background-color: none;">
+			<Label text="Cryptomator"/>
+			<Region HBox.hgrow="ALWAYS"/>
+			<Button contentDisplay="GRAPHIC_ONLY" mnemonicParsing="false" onAction="#showPreferences">
 				<graphic>
-					<FontAwesomeIconView fill="WHITE" glyphName="COGS"/>
+					<FontAwesomeIconView styleClass="fa-icon" glyphName="COGS"/>
 				</graphic>
 				<tooltip>
 					<Tooltip text="%main.settingsBtn.tooltip"/>
 				</tooltip>
 			</Button>
-			<Button contentDisplay="GRAPHIC_ONLY" mnemonicParsing="false" onAction="#close" style="-fx-background-color: none;">
+			<Button contentDisplay="GRAPHIC_ONLY" mnemonicParsing="false" onAction="#close">
 				<graphic>
-					<FontAwesomeIconView fill="WHITE" glyphName="CLOSE"/>
+					<FontAwesomeIconView styleClass="fa-icon" glyphName="CLOSE"/>
 				</graphic>
 				<tooltip>
 					<Tooltip text="%main.closeBtn.tooltip"/>
diff --git a/main/ui/src/main/resources/fxml/vault_list.fxml b/main/ui/src/main/resources/fxml/vault_list.fxml
index 9df62bae0..77d3227ba 100644
--- a/main/ui/src/main/resources/fxml/vault_list.fxml
+++ b/main/ui/src/main/resources/fxml/vault_list.fxml
@@ -21,10 +21,10 @@
 			<HBox AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.bottomAnchor="100.0" alignment="BOTTOM_LEFT">
 				<Label textAlignment="CENTER" text="%vaultlist.emptyList.onboardingInstruction" wrapText="true"/>
 			</HBox>
-			<Arc AnchorPane.bottomAnchor="5.0" type="OPEN" centerX="-10.0" centerY="0.0" radiusY="100.0" radiusX="60.0" startAngle="0" length="-60.0" strokeWidth="1" stroke="BLACK" fill="TRANSPARENT"/>
+			<Arc styleClass="onboarding-overlay-arc" AnchorPane.bottomAnchor="5.0" type="OPEN" centerX="-10.0" centerY="0.0" radiusY="100.0" radiusX="60.0" startAngle="0" length="-60.0" strokeWidth="1"/>
 		</AnchorPane>
 	</StackPane>
-	<HBox VBox.vgrow="NEVER" spacing="6" alignment="CENTER_LEFT">
+	<HBox styleClass="toolbar-container" VBox.vgrow="NEVER" spacing="6" alignment="CENTER_LEFT">
 		<padding>
 			<Insets bottom="6" left="6" right="6" top="6"/>
 		</padding>
@@ -42,7 +42,7 @@
 					<FontAwesomeIconView glyphName="MINUS"/>
 				</graphic>
 				<tooltip>
-					<Tooltip text="Remove vault"/>
+					<Tooltip text="Remove Vault"/>
 				</tooltip>
 			</Button>
 		</children>