How to get similar CSS appearance in both MobileApplication and Application?

Question

Applying CSS behaves differently under a MobileApplication than it does under Application.

Here is an example CSS file to work with (referred to as "/stylesheet/transparent.css" in the following examples):

.list-cell {
    -fx-background-color: red;
}

.tab-pane .tab {
    -fx-background-color: blue;
}

.tab-pane .tab:selected {
    -fx-background-color: blue;
}

.tab .tab-label { 
    -fx-text-fill: gold;
    -fx-alignment: CENTER;
    -fx-font-size: 12px;
    -fx-font-weight: bold;
}

.tab {
    -fx-background-insets: 0 1 0 1,0,0;
}

An MCVE for Application:

public class ControlCSS extends Application {

    static final String CSS = ControlCSS.class.getResource("/stylesheet/transparent.css").toExternalForm();

    @Override
    public void start(Stage stage) {
        ObservableList<String> list = FXCollections.observableArrayList("ASA", "GFDG", "FDGFSD");
        ListView<String> listView = new ListView<>(list);

        TabPane tabs = new TabPane();
        tabs.getTabs().add(new Tab("NEW", listView));

        tabs.getStylesheets().add(CSS);
        listView.getStylesheets().add(CSS);

        Scene scene = new Scene(tabs);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Comes out like this:

An MCVE for MobileApplication using the same content:

public class ControlCSS extends MobileApplication {

    static final String CSS = ControlCSS.class.getResource("/stylesheet/transparent.css").toExternalForm();

    @Override
    public void init() {
        addViewFactory(HOME_VIEW, () -> new BasicView(HOME_VIEW));
    }

    public static void main(String[] args) {
        launch(args);
    }
}

public class BasicView extends View {

    BasicView(String name) {
        super(name);

        ObservableList<String> list = FXCollections.observableArrayList("ASA", "GFDG", "FDGFSD");
        ListView<String> listView = new ListView<>(list);

        TabPane tabs = new TabPane();
        tabs.getTabs().add(new Tab("NEW", listView));

        listView.getStylesheets().add(ControlCSS.CSS);
        tabs.getStylesheets().add(ControlCSS.CSS);
        setCenter(tabs);
    }
}

Comes out like this:

I understand that Glisten has it's own say in CSS, but the result for Application seem correct and for MobileApplication not. How can I get the same results?

Answer 1

If you want to apply your own CSS stylesheet to a Gluon Mobile application, you can get rid of the Glisten css that comes with the library.

This is really extreme of course, as it will remove the MaterialDesign styling that it applies by default to all the built-in JavaFX controls and to the custom controls in the library.

If you want to do this nonetheless, in your MobileApplication class replace add with setAll:

@Override
public void postInit(Scene scene) {
    Swatch.BLUE.assignTo(scene);

    scene.getStylesheets().setAll(
        getClass().getResource("style.css").toExternalForm()); 
}

After you realize you don't want to do this, the next option is to check the css for the component you want to style.

Note: instead of this:

listView.getStylesheets().add(ControlCSS.CSS);
tabs.getStylesheets().add(ControlCSS.CSS);

you can just apply once the stylesheets to the whole view node:

getStylesheets().add(ControlCSS.CSS);

ListView

You want to apply a custom background to every cell:

.list-cell {
    -fx-background-color: red;
}

The posted image shows that it only applies to every other row. The explanation for this is the odd pseudo class. Glisten.css applies some styling to it, so you need to override it too:

.list-cell, 
.list-cell:odd {
    -fx-background-color: red;
}

The same could apply to other properties (border color or width, padding, text color).

Tabs

Glisten applies the Material Design guidelines for tabs, but you can modify that of course.

Replace:

.tab-pane,
.tab-pane .tab:selected {
    -fx-background-color: blue;
}

with:

.tab-pane > .tab-header-area > .headers-region > .tab,
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-color: blue;
}

to set the background color.

You may want to restore the borders and insets, so you'll need to look how this was defined in Modena.css.

Replace also this:

.tab {
    -fx-background-insets: 0 1 0 1,0,0;
}

with this:

.tab-pane > .tab-header-area > .headers-region > .tab,
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-color: blue;
    -fx-background-insets: 0 1 1 0;
    -fx-background-radius: 3 3 0 0;
    -fx-padding: 0.083333em 0.5em 0.0769em 0.5em; /* 1 6 0.99 6 */
}

The last missing style is the tab's label's text fill. If you have a Swatch applied, the text fill comes from the -primary-swatch-500. But you can override it:

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label,
.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-label {
    -fx-text-fill: gold;
}

In conclusion: for anything that you want to override in glisten css, just look up the Modena default definition and add it to your style css.