From 5d60af1857e4afd11f60494db5c5bab2be891f7b Mon Sep 17 00:00:00 2001
From: Dirk Lemmermann <dlemmermann@gmail.com>
Date: Wed, 2 Dec 2020 09:22:13 +0100
Subject: [PATCH] Refined styling of duration picker popup / picker.

---
 .../dlsc/gemsfx/demo/DurationPickerApp.java   |  2 +-
 .../gemsfx/skins/DurationPickerPopupSkin.java |  1 +
 .../com/dlsc/gemsfx/duration-picker.css       | 52 ++++++++++++++-----
 3 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/gemsfx-demo/src/main/java/com/dlsc/gemsfx/demo/DurationPickerApp.java b/gemsfx-demo/src/main/java/com/dlsc/gemsfx/demo/DurationPickerApp.java
index b77b0de1..c9e00630 100644
--- a/gemsfx-demo/src/main/java/com/dlsc/gemsfx/demo/DurationPickerApp.java
+++ b/gemsfx-demo/src/main/java/com/dlsc/gemsfx/demo/DurationPickerApp.java
@@ -230,7 +230,7 @@ public Duration fromString(String string) {
         stackPane.setPadding(new Insets(20));
 
         Scene scene = new Scene(stackPane);
-        CSSFX.start();
+        CSSFX.start(scene);
 
         primaryStage.setTitle("DurationPicker");
         primaryStage.setScene(scene);
diff --git a/gemsfx/src/main/java/com/dlsc/gemsfx/skins/DurationPickerPopupSkin.java b/gemsfx/src/main/java/com/dlsc/gemsfx/skins/DurationPickerPopupSkin.java
index 33329881..bbe5709e 100644
--- a/gemsfx/src/main/java/com/dlsc/gemsfx/skins/DurationPickerPopupSkin.java
+++ b/gemsfx/src/main/java/com/dlsc/gemsfx/skins/DurationPickerPopupSkin.java
@@ -21,6 +21,7 @@ public DurationPickerPopupSkin(DurationPickerPopup popup) {
         durationPicker.valueProperty().bindBidirectional(popup.durationProperty());
         durationPicker.maximumDurationProperty().bind(popup.maximumDurationProperty());
         durationPicker.minimumDurationProperty().bind(popup.minimumDurationProperty());
+        durationPicker.fieldsProperty().bind(popup.fieldsProperty());
 
         hBox.setFillHeight(true);
         hBox.getChildren().add(durationPicker);
diff --git a/gemsfx/src/main/resources/com/dlsc/gemsfx/duration-picker.css b/gemsfx/src/main/resources/com/dlsc/gemsfx/duration-picker.css
index 07992c78..e159976e 100644
--- a/gemsfx/src/main/resources/com/dlsc/gemsfx/duration-picker.css
+++ b/gemsfx/src/main/resources/com/dlsc/gemsfx/duration-picker.css
@@ -75,30 +75,58 @@
 .duration-picker-popup .box .picker {
     -fx-cell-size: 30px;
     -fx-indicator-size: 30px;
+    -fx-padding: 1px;
+    -fx-border-width: 1;
+    -fx-border-color: -fx-box-border;
+    -fx-background-color: -fx-control-inner-background-alt;
+}
+
+.duration-picker-popup .box .picker .container {
+    -fx-spacing: 0px;
+    -fx-padding: 0px;
 }
 
 .duration-picker-popup .box .picker:vertical .segment {
-    -fx-background-color: linear-gradient(from 0% 0% to 0% 100%,
-    rgba(255, 255, 255, .4),
-    rgba(255, 255, 255, .6) 25%,
-    rgba(255, 255, 255, 1) 50%,
-    rgba(255, 255, 255, .6) 75%,
-    rgba(255, 255, 255, .4) 100%);
+    -fx-background-color: -fx-control-inner-background;
     -fx-pref-height: 150;
     -fx-pref-width: 50;
+    -fx-padding: 0px;
 }
 
-.duration-picker-popup .box .picker .segment > .segment-cell {
-    -fx-font-size: 1.25em;
+.duration-picker-popup .box .picker:vertical .segment > .segment-cell {
+    -fx-font-size: 1em;
     -fx-font-family: null;
     -fx-text-fill: black;
     -fx-background-color: transparent;
     -fx-background-insets: 0;
 }
 
-.duration-picker-popup .box .colon {
+.duration-picker-popup .box .picker:vertical .colon {
+    -fx-padding: 0px 2px;
     -fx-font-family: null;
-    -fx-pref-width: 15;
-    -fx-font-size: 1.25em !important;
-    -fx-background-color: white;
+    -fx-pref-width: 5;
+    -fx-font-size: 1em;
+    -fx-background-color: transparent;
+}
+
+.duration-picker-popup .picker:vertical > .shadow {
+    -fx-background-color: transparent;
+}
+
+.duration-picker-popup .picker:vertical > .indicator {
+    -fx-border-color: black;
+    -fx-border-width: 1;
+    -fx-border-insets: 0;
+    -fx-background-color: -fx-accent;
+    -fx-background-insets: 0;
+    -fx-background-radius: 0;
+    -fx-opacity: .4;
+}
+
+.duration-picker-popup .picker:vertical .segment-separator {
+    -fx-background-color: -fx-box-border;
+    -fx-pref-width: 1;
+    -fx-min-width: 1;
+    -fx-max-width: 1;
+    -fx-pref-height: 20;
 }