Snackbar's color can be changed according to the message type

- load a separate css file to change the color
- if the assignment failed, the snackbar prompt will be red, otherwise theme color

#story[1278]

src/main/resources/css/Master.css

@@ -102,16 +102,13 @@
 }
 
 .jfx-snackbar-content {
-    -fx-background-color: WHITE;
+    -fx-background-color: -fx-pp-front-color;
     -fx-padding: 0 5 0 5;
     -fx-spacing: 0 5 0 5;
-    -fx-font-size: 18px;
+    -fx-font-size: 15;
 }
 
 .jfx-snackbar-toast {
     -fx-text-fill: -fx-pp-theme-color;
-}
-
-.jfx-snackbar-action {
-    -fx-text-fill: #ff4081;
+    -fx-font-size: 15;
 }

src/main/resources/css/dialogs/KeyBindingDialog.css

@@ -29,4 +29,16 @@ JFXToggleButton {
 
 #resetBtn:hover {
     -fx-font-size: 20;
+}
+
+.jfx-snackbar-content {
+    -fx-background-color: #323232;
+}
+
+.jfx-snackbar-toast {
+    -fx-text-fill: WHITE;
+}
+
+.jfx-snackbar-action {
+    -fx-text-fill: #ff4081;
 }

src/main/resources/css/dialogs/Snackbar.css

@@ -0,0 +1,4 @@
+/* a separate file to dynamically change snackbar's color */
+.jfx-snackbar-toast {
+    -fx-text-fill: red !important;
+}