Relaxed vault list cell layout and added highlight colors (inspired by google backup & sync settings)

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

@@ -186,7 +186,7 @@
 }
 
 .list-view:focused .list-cell:selected {
-	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_ARMED;
+	-fx-background-color: PRIMARY, CONTROL_BG_ARMED;
 	-fx-background-insets: 0, 0 2px;
 }
 
@@ -194,6 +194,22 @@
 	-fx-background-color: CONTROL_BG_ARMED;
 }
 
+.list-cell .glyph-icon {
+	-fx-fill: TEXT_FILL_SECONDARY;
+}
+
+.list-cell:selected .glyph-icon {
+	-fx-fill: PRIMARY;
+}
+
+.list-cell:selected .header-label {
+	-fx-text-fill: PRIMARY;
+}
+
+.list-cell .header-label {
+	-fx-font-size: 1.0em;
+}
+
 .list-cell .detail-label {
 	-fx-text-fill: TEXT_FILL_SECONDARY;
 	-fx-font-size: 0.8em;

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

@@ -186,12 +186,28 @@
 }
 
 .list-view:focused .list-cell:selected {
-	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_ARMED;
+	-fx-background-color: CONTROL_PRIMARY_BG_NORMAL, #f3f5f0; /* TODO define constant */
 	-fx-background-insets: 0, 0 2px;
 }
 
 .list-cell:selected {
-	-fx-background-color: CONTROL_BG_ARMED;
+	-fx-background-color: #f3f5f0; /* TODO define constant */
+}
+
+.list-cell .glyph-icon {
+	-fx-fill: TEXT_FILL_SECONDARY;
+}
+
+.list-cell:selected .glyph-icon {
+	-fx-fill: CONTROL_PRIMARY_BG_NORMAL;
+}
+
+.list-cell:selected .header-label {
+	-fx-text-fill: CONTROL_PRIMARY_BG_NORMAL;
+}
+
+.list-cell .header-label {
+	-fx-font-size: 1.0em;
 }
 
 .list-cell .detail-label {

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

@@ -8,17 +8,17 @@
 <HBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.mainwindow.VaultListCellController"
-	  prefHeight="46.0"
+	  prefHeight="60.0"
 	  prefWidth="200.0"
-	  spacing="10"
+	  spacing="12"
 	  alignment="CENTER_LEFT">
 	<padding>
-		<Insets top="6" right="8" bottom="6" left="10"/>
+		<Insets top="12" right="6" bottom="12" left="12"/>
 	</padding>
 	<children>
-		<FontAwesome5IconView glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
+		<FontAwesome5IconView glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="18"/>
 		<VBox spacing="4" HBox.hgrow="ALWAYS">
-			<Label text="${controller.vault.displayableName}"/>
+			<Label styleClass="header-label" text="${controller.vault.displayableName}"/>
 			<Label styleClass="detail-label" text="${controller.vault.displayablePath}" textOverrun="CENTER_ELLIPSIS"/>
 		</VBox>
 	</children>