From a0a7db9f0f22c2dde57a914460572afa6523fd87 Mon Sep 17 00:00:00 2001
From: hba56 <hba56@uclive.ac.nz>
Date: Mon, 17 Jul 2017 10:36:23 +1200
Subject: [PATCH] update the css to include a black on black option and update
 the colour of the water to better fit with the other colours #story[1003]

---
 .../java/seng302/Model/ResizableRaceMap.java  |  2 +-
 .../src/main/resources/css/black_on_black.css | 53 +++++++++++++++++++
 .../src/main/resources/css/red_and_black.css  | 53 +++++++++++++++++++
 visualiser/src/main/resources/css/sail.css    |  2 +-
 4 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 visualiser/src/main/resources/css/black_on_black.css
 create mode 100644 visualiser/src/main/resources/css/red_and_black.css

diff --git a/visualiser/src/main/java/seng302/Model/ResizableRaceMap.java b/visualiser/src/main/java/seng302/Model/ResizableRaceMap.java
index 01b97af9..c77ef9b6 100644
--- a/visualiser/src/main/java/seng302/Model/ResizableRaceMap.java
+++ b/visualiser/src/main/java/seng302/Model/ResizableRaceMap.java
@@ -51,7 +51,7 @@ public class ResizableRaceMap extends ResizableCanvas {
         if (this.raceBoundaries == null) {
             return;
         }
-        gc.setFill(Color.AQUA);
+        gc.setFill(Color.ROYALBLUE);
         setRaceBoundCoordinates();
 
         gc.setLineWidth(1);
diff --git a/visualiser/src/main/resources/css/black_on_black.css b/visualiser/src/main/resources/css/black_on_black.css
new file mode 100644
index 00000000..9a925261
--- /dev/null
+++ b/visualiser/src/main/resources/css/black_on_black.css
@@ -0,0 +1,53 @@
+.root {
+    -fx-base: rgb(20, 20, 20);
+    -fx-background: rgb(50, 50, 50);
+
+    /* make controls (buttons, thumb, etc.) slightly lighter */
+    -fx-color: derive(-fx-base, 10%);
+
+    /* text fields and table rows background */
+    -fx-control-inner-background: rgb(50, 50, 50);
+    /* version of -fx-control-inner-background for alternative rows */
+    -fx-control-inner-background-alt: derive(-fx-control-inner-background, 2.5%);
+
+    /* text colors depending on background's brightness */
+    -fx-light-text-color: rgb(220, 220, 220);
+    -fx-mid-text-color: rgb(100, 100, 100);
+    -fx-dark-text-color: rgb(20, 20, 20);
+
+    /*highlighting/accenting objects.  */
+    -fx-accent: rgb(220, 220, 220);
+
+    /* color of non-focused yet selected elements */
+    -fx-selection-bar-non-focused: rgb(50, 50, 50);
+
+    /*Focus colour*/
+    -fx-focus-color: rgb(255, 255, 255);
+}
+
+/* Fix derived prompt color for text fields */
+.text-input {
+    -fx-prompt-text-fill: derive(-fx-control-inner-background, +50%);
+
+}
+
+/* Keep prompt invisible when focused (above color fix overrides it) */
+.text-input:focused {
+    -fx-prompt-text-fill: transparent;
+}
+
+/* Fix scroll bar buttons arrows colors */
+.scroll-bar > .increment-button > .increment-arrow,
+.scroll-bar > .decrement-button > .decrement-arrow {
+    -fx-background-color: -fx-mark-highlight-color, rgb(255, 255, 255);
+}
+
+.scroll-bar > .increment-button:hover > .increment-arrow,
+.scroll-bar > .decrement-button:hover > .decrement-arrow {
+    -fx-background-color: -fx-mark-highlight-color, rgb(255, 255, 255);
+}
+
+.scroll-bar > .increment-button:pressed > .increment-arrow,
+.scroll-bar > .decrement-button:pressed > .decrement-arrow {
+    -fx-background-color: -fx-mark-highlight-color, rgb(255, 255, 255);
+}
\ No newline at end of file
diff --git a/visualiser/src/main/resources/css/red_and_black.css b/visualiser/src/main/resources/css/red_and_black.css
new file mode 100644
index 00000000..2a1af4bf
--- /dev/null
+++ b/visualiser/src/main/resources/css/red_and_black.css
@@ -0,0 +1,53 @@
+.root {
+    -fx-base: rgb(212, 26, 32);
+    -fx-background: rgb(50, 50, 50);
+
+    /* make controls (buttons, thumb, etc.) slightly lighter */
+    -fx-color: derive(-fx-base, 10%);
+
+    /* text fields and table rows background */
+    -fx-control-inner-background: rgb(50, 50, 50);
+    /* version of -fx-control-inner-background for alternative rows */
+    -fx-control-inner-background-alt: derive(-fx-control-inner-background, 2.5%);
+
+    /* text colors depending on background's brightness */
+    -fx-light-text-color: rgb(220, 220, 220);
+    -fx-mid-text-color: rgb(100, 100, 100);
+    -fx-dark-text-color: rgb(20, 20, 20);
+
+    /*highlighting/accenting objects.  */
+    -fx-accent: rgb(220, 220, 220);
+
+    /* color of non-focused yet selected elements */
+    -fx-selection-bar-non-focused: rgb(50, 50, 50);
+
+    /*Focus colour*/
+    -fx-focus-color: rgb(255, 255, 255);
+}
+
+/* Fix derived prompt color for text fields */
+.text-input {
+    -fx-prompt-text-fill: derive(-fx-control-inner-background, +50%);
+
+}
+
+/* Keep prompt invisible when focused (above color fix overrides it) */
+.text-input:focused {
+    -fx-prompt-text-fill: transparent;
+}
+
+/* Fix scroll bar buttons arrows colors */
+.scroll-bar > .increment-button > .increment-arrow,
+.scroll-bar > .decrement-button > .decrement-arrow {
+    -fx-background-color: -fx-mark-highlight-color, rgb(255, 255, 255);
+}
+
+.scroll-bar > .increment-button:hover > .increment-arrow,
+.scroll-bar > .decrement-button:hover > .decrement-arrow {
+    -fx-background-color: -fx-mark-highlight-color, rgb(255, 255, 255);
+}
+
+.scroll-bar > .increment-button:pressed > .increment-arrow,
+.scroll-bar > .decrement-button:pressed > .decrement-arrow {
+    -fx-background-color: -fx-mark-highlight-color, rgb(255, 255, 255);
+}
\ No newline at end of file
diff --git a/visualiser/src/main/resources/css/sail.css b/visualiser/src/main/resources/css/sail.css
index 2a1af4bf..9a925261 100644
--- a/visualiser/src/main/resources/css/sail.css
+++ b/visualiser/src/main/resources/css/sail.css
@@ -1,5 +1,5 @@
 .root {
-    -fx-base: rgb(212, 26, 32);
+    -fx-base: rgb(20, 20, 20);
     -fx-background: rgb(50, 50, 50);
 
     /* make controls (buttons, thumb, etc.) slightly lighter */