updated theme

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

@@ -9,8 +9,10 @@
 	PRIMARY_BG: #70A11B;
 	GRAY_LIGHT_BG: #F7F7F7;
 	TEXT_FILL: #222;
-	CONTROL_BORDER: #CFCFCF;
-	CONTROL_ARMED: #E1E1E1;
+	TEXT_FILL_LIGHT: #7E7E7E;
+	CONTROL_BORDER_NORMAL: #CFCFCF;
+	CONTROL_BORDER_FOCUSED: #9E9E9E;
+	CONTROL_BG_ARMED: #E1E1E1;
 
 	-fx-background-color: GRAY_LIGHT_BG;
     -fx-text-fill: TEXT_FILL;
@@ -43,7 +45,7 @@
 }
 
 .main-window .title .button:armed .fa-icon {
-	-fx-fill: CONTROL_ARMED;
+	-fx-fill: CONTROL_BG_ARMED;
 }
 
 /*******************************************************************************
@@ -57,7 +59,7 @@
 }
 
 .split-pane:horizontal > .split-pane-divider {
-	-fx-background-color: GRAY_LIGHT_BG, CONTROL_BORDER;
+	-fx-background-color: GRAY_LIGHT_BG, CONTROL_BORDER_NORMAL;
 	-fx-background-insets: 0, 0 1 0 0;
 }
 
@@ -72,7 +74,20 @@
 }
 
 .list-cell:selected {
-	-fx-background-color: CONTROL_ARMED;
+	-fx-background-color: CONTROL_BG_ARMED;
+}
+
+.list-cell .lock-icon {
+	-fx-fill: TEXT_FILL;
+}
+
+.list-cell .label {
+	-fx-text-fill: TEXT_FILL;
+}
+
+.list-cell .detail-label {
+	-fx-text-fill: TEXT_FILL_LIGHT;
+	-fx-font-size: 0.8em;
 }
 
 .onboarding-overlay-arc {
@@ -81,7 +96,7 @@
 }
 
 .toolbar-container {
-	-fx-border-color: CONTROL_BORDER transparent transparent transparent;
+	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
 	-fx-border-width: 1px 0 0 0;
 }
 
@@ -90,10 +105,15 @@
 	-fx-pref-width: 30px;
 	-fx-background-color: transparent;
 	-fx-background-insets: 0;
-	-fx-border-color: transparent CONTROL_BORDER transparent transparent;
+	-fx-background-radius: 0;
+	-fx-border-color: transparent CONTROL_BORDER_NORMAL transparent transparent;
     -fx-border-width: 1;
 }
 
+.toolbar-container .button:armed {
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_ARMED;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Tooltip                                                                     *
@@ -117,13 +137,17 @@
 .text-input {
 	-fx-cursor: text;
 	-fx-text-fill: TEXT_FILL;
-	-fx-prompt-text-fill: derive(TEXT_FILL, +50%);
-	-fx-background-color: CONTROL_BORDER, white;
+	-fx-prompt-text-fill: TEXT_FILL_LIGHT;
+	-fx-background-color: CONTROL_BORDER_NORMAL, white;
 	-fx-background-insets: 0, 1px;
 	-fx-background-radius: 4px;
 	-fx-padding: 0.3em 0.5em 0.3em 0.5em;
 }
 
+.text-input:focused {
+	-fx-background-color: CONTROL_BORDER_FOCUSED, white;
+}
+
 /****************************************************************************
  *																			*
  * Buttons																	*
@@ -134,14 +158,18 @@
 	-fx-pref-height: 25px;
 	-fx-text-fill: TEXT_FILL;
 	-fx-alignment: CENTER;
-	-fx-background-color: CONTROL_BORDER, white;
+	-fx-background-color: CONTROL_BORDER_NORMAL, white;
 	-fx-background-insets: 0, 1px;
 	-fx-background-radius: 4px;
 	-fx-padding: 0.2em 0.4em 0.2em 0.4em;
 }
 
+.button:focused {
+	-fx-background-color: CONTROL_BORDER_FOCUSED, white;
+}
+
 .button:armed {
-	-fx-background-color: CONTROL_BORDER, CONTROL_ARMED;
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_ARMED;
 }
 
 /*******************************************************************************
@@ -156,12 +184,16 @@
 }
 
 .check-box > .box {
-	-fx-background-color: CONTROL_BORDER, white;
+	-fx-background-color: CONTROL_BORDER_NORMAL, white;
 	-fx-background-insets: 0, 1px;
 	-fx-background-radius: 4px;
 	-fx-padding: 0.3em;
 }
 
+.check-box:focused > .box {
+	-fx-background-color: CONTROL_BORDER_FOCUSED, white;
+}
+
 .check-box > .box > .mark {
 	-fx-background-color: transparent;
 	-fx-padding: 0.4em;
@@ -180,14 +212,14 @@
 
 .choice-box {
 	-fx-text-fill: TEXT_FILL;
-	-fx-background-color: CONTROL_BORDER, white;
+	-fx-background-color: CONTROL_BORDER_NORMAL, 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: CONTROL_BORDER_FOCUSED, white;
 }
 
 .choice-box > .open-button {
@@ -202,7 +234,7 @@
 }
 
 .choice-box .context-menu {
-	-fx-background-color: CONTROL_BORDER, white;
+	-fx-background-color: CONTROL_BORDER_NORMAL, white;
 	-fx-background-insets: 0, 1px;
 	-fx-background-radius: 4px;
 	-fx-padding: 0.2em 0 0.2em 0;
@@ -217,5 +249,5 @@
 }
 
 .menu-item:focused {
-	-fx-background-color: CONTROL_ARMED;
+	-fx-background-color: CONTROL_BG_ARMED;
 }

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

@@ -1,25 +1,25 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-<?import javafx.scene.control.Label?>
-<?import javafx.scene.layout.VBox?>
-<?import javafx.scene.layout.HBox?>
 <?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
 <?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.VBox?>
 <HBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.mainwindow.VaultListCellController"
-	  prefHeight="50.0"
+	  prefHeight="46.0"
 	  prefWidth="200.0"
 	  spacing="12"
 	  alignment="CENTER_LEFT">
 	<padding>
-		<Insets top="4" right="6" bottom="4" left="6"/>
+		<Insets top="6" right="8" bottom="6" left="12"/>
 	</padding>
 	<children>
-		<FontAwesomeIconView glyphName="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="20"/>
-		<VBox spacing="6" HBox.hgrow="ALWAYS">
+		<FontAwesomeIconView styleClass="lock-icon" glyphName="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
+		<VBox spacing="4" HBox.hgrow="ALWAYS">
 			<Label text="${controller.vault.displayableName}"/>
-			<Label text="${controller.vault.displayablePath}" textOverrun="CENTER_ELLIPSIS"/>
+			<Label styleClass="detail-label" text="${controller.vault.displayablePath}" textOverrun="CENTER_ELLIPSIS"/>
 		</VBox>
 	</children>
 </HBox>