JavaFX - White overlay for UI elements in CSS

Question

I'm tryin to follow the material design guide for my application's color scheme. At the moment, I'm at the part where it's explaining how the dark theme works.

This is my CSS:

#main-app {
    -fx-background-color: #121212;
    -fx-background-radius: 5px;
}

#top-bar {
    -fx-background-color: bar-color;
    -fx-background-radius: 5px 5px 0 0;
}
#bottom-bar {
    -fx-background-color: bar-color;
    -fx-background-radius: 0 0 5px 5px;
}

How can I do the 5% overlay, as seen in the image below, of my #main-app's background-color so I can then apply it to the top and bottom bars?

Answer 1

I give it another shot ;-)

CSS File:

#main-app {
    -fx-background-radius: 5px;
    -fx-background-color: #121212;
}

#top-bar {
    -fx-background-radius: 5px 5px 0 0;
    -fx-background-color: inherit;
}

#top-bar-overlay {
    -fx-background-radius: 5px 5px 0 0;
    -fx-background-color: rgba(255, 255, 255, 0.05);
}

#bottom-bar {
    -fx-background-radius: 0 0 5px 5px;
    -fx-background-color: inherit;
}

#bottom-bar-overlay {
    -fx-background-radius: 0 0 5px 5px;
    -fx-background-color: rgba(255, 255, 255, 0.5);
}

FXML File:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Spinner?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>

<AnchorPane stylesheets="@styling2.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.OverlayController">
   <children>
      <HBox alignment="CENTER_LEFT" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <Label text="Transparency Value for Top Bar Overlay:" />
            <Spinner fx:id="topBarTransparencySpinner" />
            <Label text="Transparency Value for Bottom Bar Overlay:" />
            <Spinner fx:id="bottomBarTransparencySpinner" />
         </children>
      </HBox>
      <GridPane id="main-app" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="27.0">
         <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" />
         </columnConstraints>
         <rowConstraints>
            <RowConstraints vgrow="SOMETIMES" />
            <RowConstraints vgrow="SOMETIMES" />
         </rowConstraints>
         <children>
            <AnchorPane id="top-bar">
               <children>
                  <HBox id="top-bar" alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                     <children>
                        <Label text="Top Bar">
                           <font>
                              <Font size="36.0" />
                           </font>
                           <HBox.margin>
                              <Insets />
                           </HBox.margin>
                        </Label>
                     </children>
                  </HBox>
                  <Pane id="top-bar-overlay" fx:id="topBarOverlayPane" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
               </children>
            </AnchorPane>
            <AnchorPane GridPane.rowIndex="1">
               <children>
                  <HBox id="bottom-bar" alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                     <children>
                        <Label text="Bottom Bar">
                           <font>
                              <Font size="36.0" />
                           </font>
                        </Label>
                     </children>
                  </HBox>
                  <Pane id="bottom-bar-overlay" fx:id="bottomBarOverlayPane" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
               </children>
            </AnchorPane>
         </children>
      </GridPane>
   </children>
</AnchorPane>

Controller Class:

package sample;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Spinner;
import javafx.scene.control.SpinnerValueFactory;
import javafx.scene.layout.Pane;

import java.net.URL;
import java.util.ResourceBundle;

public class OverlayController implements Initializable {

    @FXML
    Spinner<Double>
            topBarTransparencySpinner,
            bottomBarTransparencySpinner;
    @FXML
    private Pane
            topBarOverlayPane,
            bottomBarOverlayPane;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        topBarTransparencySpinner.setValueFactory(new SpinnerValueFactory.DoubleSpinnerValueFactory(0, 1, 0.05, 0.01));
        bottomBarTransparencySpinner.setValueFactory(new SpinnerValueFactory.DoubleSpinnerValueFactory(0, 1, 0.5, 0.01));

        topBarTransparencySpinner.valueProperty().addListener((obs, oldV, newV) ->
                topBarOverlayPane.setStyle(String.format("-fx-background-color: rgba(255, 255, 255, %s);", String.valueOf(newV).replace(",", "."))));
        bottomBarTransparencySpinner.valueProperty().addListener((obs, oldV, newV) ->
                bottomBarOverlayPane.setStyle(String.format("-fx-background-color: rgba(255, 255, 255, %s);", String.valueOf(newV).replace(",", "."))));
    }
}

Preview:

Does this example help you for your project?

Answer 2

I think that it is not possible with css only. Here is one example for a possible solution:

Controller Class:

package sample;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.Node;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.Pane;

import java.net.URL;
import java.util.ResourceBundle;

public class Controller implements Initializable {

    @FXML
    private FlowPane rootFlowPane;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        for (int i = 0; i < rootFlowPane.getChildren().size(); i++) {
            Node node = rootFlowPane.getChildren().get(i);
            if (node instanceof Pane) {
                Pane pane = (Pane) node;

                String style = "-fx-background-color: rgba(255, 255, 255, %s); -fx-background-radius: 5; -fx-border-color: grey;";

                if (i == 0)
                    pane.setStyle(String.format(style, "0"));
                else if (i == 1)
                    pane.setStyle(String.format(style, "0.05"));
                else if (i == 2)
                    pane.setStyle(String.format(style, "0.07"));
                else if (i >= 100)
                    pane.setStyle(String.format(style, "1"));
                else {
                    String transparency = String.format("%.2f", (i + 5) / 100.0).replace(",", ".");
                    pane.setStyle(String.format(style, transparency));
                }
            }
        }
    }
}

FXML File:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.Pane?>


<FlowPane fx:id="rootFlowPane" hgap="20.0" prefHeight="460.0" prefWidth="460.0" style="-fx-background-color: #121212;" vgap="20.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <children>
      <Pane prefHeight="200.0" prefWidth="200.0" />
      <Pane prefHeight="200.0" prefWidth="200.0" />
      <Pane prefHeight="200.0" prefWidth="200.0" />
      <Pane prefHeight="200.0" prefWidth="200.0" />
   </children>
   <padding>
      <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
   </padding>
</FlowPane>

Preview:

Answer 3

If you main background is already black, I think you can use an rgba background-color on the blocks. So for a 5% white overlay rgba(255,255,255,0.05).

I'm not sure if this is what you looking for but I hope it can help you a bit.