More styling for PagingControls.

gemsfx-demo/src/main/java/com/dlsc/gemsfx/demo/PagingControlsApp.java

@@ -1,7 +1,9 @@
 package com.dlsc.gemsfx.demo;
 
+import com.dlsc.gemsfx.PagingControlBase;
 import com.dlsc.gemsfx.PagingControlBase.MessageLabelStrategy;
 import com.dlsc.gemsfx.PagingControls;
+import com.dlsc.gemsfx.util.StageManager;
 import fr.brouillard.oss.cssfx.CSSFX;
 import javafx.application.Application;
 import javafx.beans.property.BooleanProperty;
@@ -12,14 +14,19 @@
 import javafx.geometry.Insets;
 import javafx.geometry.Pos;
 import javafx.scene.Scene;
+import javafx.scene.control.Button;
 import javafx.scene.control.CheckBox;
 import javafx.scene.control.ChoiceBox;
 import javafx.scene.control.ScrollPane;
+import javafx.scene.control.ToggleButton;
 import javafx.scene.layout.HBox;
+import javafx.scene.layout.Priority;
 import javafx.scene.layout.Region;
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
 import javafx.stage.Stage;
+import org.kordamp.ikonli.javafx.FontIcon;
+import org.kordamp.ikonli.materialdesign.MaterialDesign;
 import org.scenicview.ScenicView;
 
 import java.util.Objects;
@@ -28,31 +35,30 @@ public class PagingControlsApp extends Application {
 
     private final ObjectProperty<HPos> alignmentProperty = new SimpleObjectProperty<>(HPos.RIGHT);
 
-    private final BooleanProperty showControls = new SimpleBooleanProperty(false);
-
     @Override
     public void start(Stage stage) {
-        VBox vBox1 = createSection(10, 221, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.HIDE, 1);
+        VBox vBox1 = createSection(10, 221, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.SHOW_ARROW_BUTTONS, 1);
         VBox vBox2 = createSection(10, 221, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.HIDE, 2);
         VBox vBox3 = createSection(10, 221, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.HIDE, 3);
-        VBox vBox4 = createSection(15, 45, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.SHOW_ARROW_BUTTONS, 4);
+        VBox vBox4 = createSection(15, 45, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.HIDE, 4);
         VBox vBox5 = createSection(20, 1000, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.SHOW_PAGE_BUTTONS, 5);
         VBox vBox6 = createSection(5, 5, MessageLabelStrategy.ALWAYS_SHOW, PagingControls.FirstLastPageDisplayMode.HIDE, 6);
         VBox vBox7 = createSection(5, 0, MessageLabelStrategy.ALWAYS_SHOW, PagingControls.FirstLastPageDisplayMode.HIDE, 7);
-        VBox vBox8 = createSection(10, 200, MessageLabelStrategy.ALWAYS_SHOW, PagingControls.FirstLastPageDisplayMode.HIDE, 8);
-        VBox vBox9 = createSection(10, 200, MessageLabelStrategy.ALWAYS_SHOW, PagingControls.FirstLastPageDisplayMode.HIDE, 9);
+        VBox vBox8 = createSection(10, 200, MessageLabelStrategy.ALWAYS_SHOW, PagingControls.FirstLastPageDisplayMode.SHOW_PAGE_BUTTONS, 8);
+        VBox vBox9 = createSection(10, 200, MessageLabelStrategy.ALWAYS_SHOW, PagingControls.FirstLastPageDisplayMode.SHOW_PAGE_BUTTONS, 9);
+        VBox vBox10 = createSection(10, 200, MessageLabelStrategy.ALWAYS_SHOW, PagingControls.FirstLastPageDisplayMode.SHOW_PAGE_BUTTONS, 10);
 
         ChoiceBox<HPos> alignmentChoiceBox = new ChoiceBox<>();
         alignmentChoiceBox.getItems().setAll(HPos.values());
         alignmentChoiceBox.valueProperty().bindBidirectional(alignmentProperty);
 
-        CheckBox showControlsBox = new CheckBox("Show settings");
-        showControlsBox.selectedProperty().bindBidirectional(showControls);
+        Button scenicViewButton = new Button("Scenic View");
+        scenicViewButton.setOnAction(event -> ScenicView.show(stage.getScene()));
 
-        HBox hBox = new HBox(10, alignmentChoiceBox, showControlsBox);
+        HBox hBox = new HBox(10, alignmentChoiceBox, scenicViewButton);
         hBox.setAlignment(Pos.CENTER_LEFT);
 
-        VBox all = new VBox(20, hBox, vBox1, vBox2, vBox3, vBox4, vBox5, vBox6, vBox7, vBox8, vBox9);
+        VBox all = new VBox(20, hBox, vBox1, vBox2, vBox3, vBox4, vBox5, vBox6, vBox7, vBox8, vBox9, vBox10);
 
         StackPane stackPane = new StackPane(all);
         stackPane.setPadding(new Insets(50, 50, 50, 50));
@@ -73,9 +79,12 @@ public void start(Stage stage) {
         stage.centerOnScreen();
         stage.sizeToScene();
         stage.setTitle("Paging View");
+
+        StageManager.install(stage, "paging-controls-app");
+
         stage.show();
 
-        CSSFX.start();
+        CSSFX.start(stackPane);
     }
 
     private VBox createSection(int pageSize, int itemCount, MessageLabelStrategy messageLabelStrategy, PagingControls.FirstLastPageDisplayMode displayMode, int index) {
@@ -88,12 +97,20 @@ private VBox createSection(int pageSize, int itemCount, MessageLabelStrategy mes
         pagingControls.getStylesheets().add(Objects.requireNonNull(PagingControlsApp.class.getResource("paging-controls-" + index + ".css")).toExternalForm());
         pagingControls.setStyle("-fx-border-color: black; -fx-padding: 20px");
         pagingControls.setPrefWidth(800);
+        HBox.setHgrow(pagingControls, Priority.ALWAYS);
+
+        ToggleButton toggleButton = new ToggleButton();
+        toggleButton.setGraphic(new FontIcon(MaterialDesign.MDI_CHEVRON_DOUBLE_DOWN));
+        toggleButton.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
 
         PagingControlsSettingsView pagingControlsSettingsView = new PagingControlsSettingsView(pagingControls);
-        pagingControlsSettingsView.visibleProperty().bind(showControls);
-        pagingControlsSettingsView.managedProperty().bind(showControls);
+        pagingControlsSettingsView.visibleProperty().bind(toggleButton.selectedProperty());
+        pagingControlsSettingsView.managedProperty().bind(toggleButton.selectedProperty());
+
+        HBox hBox = new HBox(10, pagingControls, toggleButton);
+        hBox.setFillHeight(true);
 
-        VBox vBox = new VBox(10, pagingControls, pagingControlsSettingsView);
+        VBox vBox = new VBox(10, hBox, pagingControlsSettingsView);
         vBox.setMaxHeight(Region.USE_PREF_SIZE);
 
         return vBox;

gemsfx-demo/src/main/java/com/dlsc/gemsfx/demo/PagingControlsSettingsView.java

@@ -27,9 +27,9 @@ public PagingControlsSettingsView(PagingControlBase pagingControls) {
         Label pageCountLabel = new Label();
         pageCountLabel.textProperty().bind(Bindings.createStringBinding(() -> "Page count: " + pagingControls.getPageCount(), pagingControls.pageCountProperty()));
 
-        ChoiceBox<PagingControls.FirstLastPageDisplayMode> displayModeChoiceBox = new ChoiceBox<>();
-        displayModeChoiceBox.getItems().setAll(PagingControls.FirstLastPageDisplayMode.values());
-        displayModeChoiceBox.valueProperty().bindBidirectional(pagingControls.firstLastPageDisplayModeProperty());
+        ChoiceBox<PagingControls.FirstLastPageDisplayMode> firstLastPageDisplayModeBox = new ChoiceBox<>();
+        firstLastPageDisplayModeBox.getItems().setAll(PagingControls.FirstLastPageDisplayMode.values());
+        firstLastPageDisplayModeBox.valueProperty().bindBidirectional(pagingControls.firstLastPageDisplayModeProperty());
 
         CheckBox showPreviousNextButton = new CheckBox("Show prev / next buttons");
         showPreviousNextButton.selectedProperty().bindBidirectional(pagingControls.showPreviousNextPageButtonProperty());
@@ -48,7 +48,7 @@ public PagingControlsSettingsView(PagingControlBase pagingControls) {
         maxPageIndicatorsBox.setValue(pagingControls.getMaxPageIndicatorsCount());
         maxPageIndicatorsBox.valueProperty().addListener(it -> pagingControls.setMaxPageIndicatorsCount(maxPageIndicatorsBox.getValue()));
 
-        HBox displayModeBox = new HBox(5, new Label("Display mode: "), displayModeChoiceBox);
+        HBox displayModeBox = new HBox(5, new Label("First / last buttons: "), firstLastPageDisplayModeBox);
         displayModeBox.setAlignment(Pos.CENTER_LEFT);
 
         HBox strategyBox = new HBox(5, new Label("Label strategy: "), strategyChoiceBox);

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-1.css

@@ -1,3 +1,7 @@
+.paging-controls {
+    -fx-background-color: white;
+}
+
 .paging-controls > .pane > .page-buttons-container > .element {
     -fx-background-color:
             #090a0c,

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-10.css

@@ -0,0 +1,28 @@
+.paging-controls {
+    -fx-background-color: white;
+}
+
+.paging-controls > .pane > .page-buttons-container {
+    -fx-spacing: 10px;
+}
+
+.paging-controls > .pane > .page-buttons-container > .button {
+    -fx-background-color: transparent;
+    -fx-border-color: lightgrey;
+    -fx-border-width: 1px;
+    -fx-border-radius: 4px;
+    -fx-padding: 10px 20px;
+    -fx-font-size: 1.5em;
+    -fx-text-fill: -fx-text-base-color;
+}
+
+.paging-controls > .pane > .page-buttons-container > .button:hover {
+    -fx-text-fill: -fx-text-base-color;
+}
+
+.paging-controls > .pane > .page-buttons-container > .button.current {
+    -fx-background-color: black;
+    -fx-background-radius: 4px;
+    -fx-border-color: transparent;
+    -fx-text-fill: white;
+}

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-2.css

@@ -1,3 +1,7 @@
+.paging-controls {
+    -fx-background-color: white;
+}
+
 .paging-controls > .pane > .page-buttons-container {
     -fx-spacing: 5px;
 }
@@ -26,4 +30,12 @@
 
 .paging-controls > .pane > .page-buttons-container > .navigation-button {
     -fx-content-display: graphic-only;
+}
+
+.paging-controls > .pane > .page-buttons-container > .navigation-button.previous-page-button  > .icon-wrapper > .icon {
+    -fx-translate-x: -1;
+}
+
+.paging-controls > .pane > .page-buttons-container > .navigation-button.next-page-button  > .icon-wrapper > .icon {
+    -fx-translate-x: 1;
 }

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-3.css

@@ -1,3 +1,7 @@
+.paging-controls {
+    -fx-background-color: white;
+}
+
 .paging-controls > .pane > .page-buttons-container > .button {
     -fx-background-color:
             linear-gradient(#ffd65b, #e68400),

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-4.css

@@ -1,3 +1,7 @@
+.paging-controls {
+    -fx-background-color: white;
+}
+
 .paging-controls > .pane > .page-buttons-container > .element {
     -fx-background-color:
             linear-gradient(#f0ff35, #a9ff00),

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-5.css

@@ -0,0 +1,3 @@
+.paging-controls {
+    -fx-background-color: white;
+}

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-6.css

@@ -0,0 +1,3 @@
+.paging-controls {
+    -fx-background-color: white;
+}

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-7.css

@@ -0,0 +1,3 @@
+.paging-controls {
+    -fx-background-color: white;
+}

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-8.css

@@ -1,3 +1,7 @@
+.paging-controls {
+    -fx-background-color: white;
+}
+
 .paging-controls > .pane > .page-buttons-container > .element {
     -fx-background-color:
             #3c7fb1,

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-9.css

@@ -1,3 +1,7 @@
+.paging-controls {
+    -fx-background-color: white;
+}
+
 .paging-controls > .pane > .page-buttons-container > .button {
     -fx-background-color: linear-gradient(#ff5400, #be1d00);
     -fx-background-radius: 30;

gemsfx/src/main/java/com/dlsc/gemsfx/skins/PagingControlsSkin.java

@@ -14,6 +14,7 @@
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.Pane;
 import javafx.scene.layout.Region;
+import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
 
 public class PagingControlsSkin extends SkinBase<PagingControls> {
@@ -95,11 +96,11 @@ private void createButtons() {
 
         firstPageButton = new Button();
         firstPageButton.textProperty().bind(view.firstPageTextProperty());
-        firstPageButton.setGraphic(firstPageButtonRegion);
+        firstPageButton.setGraphic(wrapIcon(firstPageButtonRegion));
         firstPageButton.getStyleClass().addAll("element", "navigation-button", "first-page-button");
         firstPageButton.setMinWidth(Region.USE_PREF_SIZE);
         firstPageButton.managedProperty().bind(firstPageButton.visibleProperty());
-        firstPageButton.disableProperty().bind(startPage.greaterThan(0).not());
+        firstPageButton.disableProperty().bind(view.pageProperty().greaterThan(0).not());
         firstPageButton.visibleProperty().bind(view.firstLastPageDisplayModeProperty().isEqualTo(PagingControls.FirstLastPageDisplayMode.SHOW_ARROW_BUTTONS).and(view.pageCountProperty().greaterThan(1)));
         firstPageButton.setOnMouseClicked(evt -> {
             view.setPage(0);
@@ -108,7 +109,7 @@ private void createButtons() {
 
         previousButton = new Button();
         previousButton.textProperty().bind(view.previousPageTextProperty());
-        previousButton.setGraphic(previousPageRegion);
+        previousButton.setGraphic(wrapIcon(previousPageRegion));
         previousButton.getStyleClass().addAll("element", "navigation-button", "previous-page-button");
         previousButton.setOnMouseClicked(evt -> view.setPage(Math.max(0, view.getPage() - 1)));
         previousButton.setMinWidth(Region.USE_PREF_SIZE);
@@ -118,7 +119,7 @@ private void createButtons() {
 
         nextButton = new Button();
         nextButton.textProperty().bind(view.nextPageTextProperty());
-        nextButton.setGraphic(nextPageRegion);
+        nextButton.setGraphic(wrapIcon(nextPageRegion));
         nextButton.getStyleClass().addAll("element", "navigation-button", "next-page-button");
         nextButton.setOnMouseClicked(evt -> view.setPage(Math.min(view.getPageCount() - 1, view.getPage() + 1)));
         nextButton.setMinWidth(Region.USE_PREF_SIZE);
@@ -128,15 +129,21 @@ private void createButtons() {
 
         lastPageButton = new Button();
         lastPageButton.textProperty().bind(view.lastPageTextProperty());
-        lastPageButton.setGraphic(lastPageButtonRegion);
+        lastPageButton.setGraphic(wrapIcon(lastPageButtonRegion));
         lastPageButton.setMinWidth(Region.USE_PREF_SIZE);
         lastPageButton.getStyleClass().addAll("element", "navigation-button", "last-page-button");
         lastPageButton.managedProperty().bind(lastPageButton.visibleProperty());
-        lastPageButton.disableProperty().bind(startPage.add(view.getMaxPageIndicatorsCount()).lessThan(view.getPageCount()).not());
+        lastPageButton.disableProperty().bind(view.pageProperty().add(view.getMaxPageIndicatorsCount()).lessThan(view.getPageCount()).not());
         lastPageButton.visibleProperty().bind(view.firstLastPageDisplayModeProperty().isEqualTo(PagingControls.FirstLastPageDisplayMode.SHOW_ARROW_BUTTONS).and(view.pageCountProperty().greaterThan(1)));
         lastPageButton.setOnMouseClicked(evt -> view.setPage(view.getPageCount() - 1));
     }
 
+    private Node wrapIcon(Region region) {
+        StackPane stackPane = new StackPane(region);
+        stackPane.getStyleClass().add("icon-wrapper");
+        return stackPane;
+    }
+
     private void updateView() {
         PagingControls view = getSkinnable();
 

gemsfx/src/main/resources/com/dlsc/gemsfx/paging-controls.css

@@ -75,7 +75,7 @@
 }
 
 .paging-controls > .pane > .page-buttons-container > .navigation-button {
-    -fx-padding: 2px;
+    -fx-padding: 2px 5px;
     -fx-graphic-text-gap: 10px;
 }
 
@@ -95,32 +95,50 @@
     -fx-content-display: right;
 }
 
-.paging-controls > .pane > .page-buttons-container > .navigation-button > .icon {
+.paging-controls > .pane > .page-buttons-container > .navigation-button > .icon-wrapper {
+}
+
+.paging-controls > .pane > .page-buttons-container > .navigation-button:hover > .icon-wrapper {
+}
+
+.paging-controls > .pane > .page-buttons-container > .navigation-button:focused > .icon-wrapper,
+.paging-controls > .pane > .page-buttons-container > .navigation-button:pressed > .icon-wrapper {
+}
+
+.paging-controls > .pane > .page-buttons-container > .navigation-button > .icon-wrapper > .icon {
     -fx-background-color: -fx-text-background-color;
-    -fx-scale-shape: false;
-    -fx-opacity: .5;
+    -fx-scale-shape: true;
+    -size: 0.666667em;
+    -fx-pref-height: -size;
+    -fx-pref-width: -size;
+    -fx-min-height: -size;
+    -fx-min-width: -size;
+    -fx-max-height: -size;
+    -fx-max-width: -size;
+}
+
+.paging-controls > .pane > .page-buttons-container > .navigation-button:hover > .icon-wrapper > .icon {
 }
 
-.paging-controls > .pane > .page-buttons-container > .navigation-button.first-page-button > .icon {
-    -fx-shape: "M6 6 L8.0156 6 L8.0156 18 L6 18 L6 6 ZM18.4219 16.5938 L17.0156 18 L11.0156 12 L17.0156 6 L18.4219 7.4062 L13.8281 12 L18.4219 16.5938 Z";
+.paging-controls > .pane > .page-buttons-container > .navigation-button.first-page-button  > .icon-wrapper > .icon {
+    -fx-shape: "M7.2031 6 Q6.9531 6 6.8125 6.1406 Q6.6719 6.2812 6.625 6.4844 L6.625 17.375 Q6.5781 17.6094 6.7344 17.8125 Q6.9062 18 7.1406 18 Q7.3906 18 7.5625 17.8906 Q7.7344 17.7656 7.7812 17.5156 L7.8281 6.5781 Q7.8281 6.3438 7.625 6.1719 Q7.4375 6 7.2031 6 ZM16.6094 6.1875 Q16.4688 6 16.25 6 Q16.0312 6 15.8438 6.0938 L10.375 11.5625 Q10.2188 11.7188 10.1875 11.9375 Q10.1719 12.1406 10.3125 12.3438 L15.7969 17.8125 Q15.9375 18 16.1719 18 Q16.4219 18 16.5781 17.8594 Q16.75 17.7188 16.7969 17.4844 Q16.8438 17.2344 16.7031 17.0469 L11.6562 12 L16.6094 7.0156 Q16.7969 6.8594 16.7969 6.6094 Q16.7969 6.3438 16.6094 6.1875 Z";
 }
 
-.paging-controls > .pane > .page-buttons-container > .navigation-button.last-page-button > .icon {
-    -fx-shape: "M15.9844 6 L18 6 L18 18 L15.9844 18 L15.9844 6 ZM5.5781 7.4062 L6.9844 6 L12.9844 12 L6.9844 18 L5.5781 16.5938 L10.1719 12 L5.5781 7.4062 Z";
+.paging-controls > .pane > .page-buttons-container > .navigation-button.last-page-button  > .icon-wrapper > .icon {
+    -fx-shape: "M16.2188 6 Q16.4219 6 16.5781 6.1406 Q16.75 6.2812 16.7969 6.4844 L16.7969 17.375 Q16.7969 17.6094 16.625 17.8125 Q16.4688 18 16.25 18 Q16.0312 18 15.8281 17.8906 Q15.6406 17.7656 15.5938 17.5156 L15.5938 6.5781 Q15.5938 6.3438 15.7656 6.1719 Q15.9375 6 16.1719 6 L16.2188 6 ZM6.7656 6.1875 Q6.9062 6 7.125 6 Q7.3438 6 7.5312 6.0938 L13.0156 11.5625 Q13.2031 11.7188 13.2031 11.9375 Q13.2031 12.1406 13.1094 12.3438 L7.625 17.8125 Q7.4375 18 7.2188 18 Q7.0156 18 6.8125 17.8594 Q6.625 17.7188 6.5938 17.4844 Q6.5781 17.2344 6.7188 17.0469 L11.7656 12 L6.7656 7.0156 Q6.5781 6.8594 6.5781 6.6094 Q6.5781 6.3438 6.7656 6.1875 Z";
 }
 
-.paging-controls > .pane > .page-buttons-container > .navigation-button.previous-page-button > .icon {
-    -fx-shape: "M15.4219 16.5938 L10.8281 12 L15.4219 7.4062 L14.0156 6 L8.0156 12 L14.0156 18 L15.4219 16.5938 Z";
+.paging-controls > .pane > .page-buttons-container > .navigation-button.previous-page-button  > .icon-wrapper > .icon {
+    -fx-shape: "M16.6094 6.1875 Q16.4688 6 16.25 6 Q16.0312 6 15.8438 6.0938 L10.375 11.5625 Q10.2188 11.7188 10.1875 11.9375 Q10.1719 12.1406 10.3125 12.3438 L15.7969 17.8125 Q15.9375 18 16.1719 18 Q16.4219 18 16.5781 17.8594 Q16.75 17.7188 16.7969 17.4844 Q16.8438 17.2344 16.7031 17.0469 L11.6562 12 L16.6094 7.0156 Q16.7969 6.8594 16.7969 6.6094 Q16.7969 6.3438 16.6094 6.1875 Z";
 }
 
-.paging-controls > .pane > .page-buttons-container > .navigation-button.next-page-button > .icon {
-    -fx-shape: "M8.5781 16.5938 L13.1719 12 L8.5781 7.4062 L9.9844 6 L15.9844 12 L9.9844 18 L8.5781 16.5938 Z";
+.paging-controls > .pane > .page-buttons-container > .navigation-button.next-page-button  > .icon-wrapper > .icon {
+    -fx-shape: "M6.7656 6.1875 Q6.9062 6 7.125 6 Q7.3438 6 7.5312 6.0938 L13.0156 11.5625 Q13.2031 11.7188 13.2031 11.9375 Q13.2031 12.1406 13.1094 12.3438 L7.625 17.8125 Q7.4375 18 7.2188 18 Q7.0156 18 6.8125 17.8594 Q6.625 17.7188 6.5938 17.4844 Q6.5781 17.2344 6.7188 17.0469 L11.7656 12 L6.7656 7.0156 Q6.5781 6.8594 6.5781 6.6094 Q6.5781 6.3438 6.7656 6.1875 Z";
 }
 
 .paging-controls > .pane > .page-buttons-container > .page-divider {
     -fx-background-color: -fx-text-background-color;
     -fx-shape: "M7.2031 12 Q7.2031 12.625 6.7656 13.0625 Q6.3438 13.4844 5.7188 13.4844 Q5.0938 13.4844 4.6562 13.0625 Q4.2188 12.625 4.2188 12 Q4.2188 11.375 4.6562 10.9531 Q5.0938 10.5156 5.7188 10.5156 Q6.3438 10.5156 6.7656 10.9531 Q7.2031 11.375 7.2031 12 ZM13.4844 12 Q13.4844 12.625 13.0469 13.0625 Q12.625 13.4844 12 13.4844 Q11.375 13.4844 10.9375 13.0625 Q10.5156 12.625 10.5156 12 Q10.5156 11.375 10.9375 10.9531 Q11.375 10.5156 12 10.5156 Q12.625 10.5156 13.0469 10.9531 Q13.4844 11.375 13.4844 12 ZM18.2812 13.4844 Q18.9062 13.4844 19.3594 13.0625 Q19.8281 12.625 19.8281 12 Q19.8281 11.375 19.3594 10.9531 Q18.9062 10.5156 18.2812 10.5156 Q17.6562 10.5156 17.2188 10.9531 Q16.7969 11.375 16.7969 12 Q16.7969 12.625 17.2188 13.0625 Q17.6562 13.4844 18.2812 13.4844 Z";
     -fx-padding: 5px 10px;
     -fx-scale-shape: false;
-    -fx-opacity: .5;
 }