Login/Register
Bootstrap with JavaFX
Asked Answered
Solved csstwitter-bootstrapnetbeansjavafxfxml
K

4

21

I am creating a GUI in a java fxml project using netbeans. I wanted to use bootstrap to style the gui but I have noticed that everything in javafx is prefixed with fx-. Is there still a way to get bootstrap to work anyway for my project? Does bootstrap even work with javafx?

Kinakinabalu answered 21/1, 2014 at 20:9 Comment(1)
I am afraid that this may be impossible because of the reason you specified in your question. – Cheekpiece
G
32

Update 2024: BootstrapFX Project

As mentioned in seinecle's answer.

There is a newer port with (many) stars on Github.

kordamp created a Bootstrap styling system for some of the native JavaFX controls.

The Kordamp system provides a Bootstrap look-and-feel without using WebView (as demonstrated in the original answer here).

From the kordamp BootstrapFX site:

BootstrapFX is a partial port of Twitter Bootstrap for JavaFX. It mainly provides a CSS stylesheet that closely resembles the original while being custom tailored for JavaFX’s unique CSS flavor.

It’s worth mentioning that Twitter Bootstrap delivers more than just a standardized look for common widgets. It also provides new widgets, behavior and a grid system. Some of these features may be ported at a later stage to BootstrapFX.

Original Answer

Rendering Bootstrap inside a JavaFX WebView

Bootstrap is an HTML based framework.

So to use Bootstrap in JavaFX, use JavaFX's HTML rendering component WebView to render Bootstrap HTML/CSS and JavaScript.

Sample Application

Sample application performing a basic integration of Bootstrap and a JavaFX UI.

The JavaFX buttons on the top of the screen navigate around a WebView page to render different kinds of Bootstrap components.

jumbotron

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ToolBar;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class BaseJump extends Application {
    private static final String BOOTSTRAP_PREFIX = "http://getbootstrap.com/components/#";

    private enum Anchor { progress, jumbotron, badges, pagination }

    @Override public void start(Stage stage) throws Exception {
        final WebView webview = new WebView();

        final ToolBar nav = new ToolBar();
        for (Anchor anchor : Anchor.values()) {
            nav.getItems().add(
                new NavButton(
                    anchor,
                    webview
                )
            );
        }

        VBox layout = new VBox();
        layout.getChildren().addAll(
            nav,
            webview
        );

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

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

    private class NavButton extends Button {
        public NavButton(final Anchor anchor, final WebView webview) {
            setText(anchor.toString());

            setOnAction(new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent event) {
                    webview.getEngine().load(BOOTSTRAP_PREFIX + anchor.toString());
                }
            });
        }
    }
}

Additional, slightly unrelated question

Is it possible to intercept button click events from a web view?

Yes. You can attach click handlers in Java code through the w3c DOM API access WebEngine provides. See the WebEngine documentation for details:

Access to Document Model

The WebEngine objects create and manage a Document Object Model (DOM) for their Web pages. The model can be accessed and modified using Java DOM Core classes. The getDocument() method provides access to the root of the model. Additionally DOM Event specification is supported to define event handlers in Java code.

The following example attaches a Java event listener to an element of a Web page. Clicking on the element causes the application to exit:

EventListener listener = new EventListener() {
    public void handleEvent(Event ev) {
        Platform.exit();
    }
};

Document doc = webEngine.getDocument();
Element el = doc.getElementById("exit-app");
((EventTarget) el).addEventListener("click", listener, false);

However, for me often is is easier to handle interfacing with w3c documents using JavaScript (specifically jQuery), rather than Java. Here is an example of issuing from Java code, a jQuery call to provide click handlers in a WebView.

On Fextile (Bootstrap look for native JavaFX controls)

Why not just port bootstrap.css to conform to the javafx naming conventions?

Because:

  • There is more to bootstrap than just the css, it's a full responsive UI framework with JavaScript based active controls and a user extension mechanism.
  • Rendering in WebView will render the bootstrap html in JavaFX exactly the same as if it were in a web browser, so why port when you already have something which will work perfectly with no extra effort?
  • It's a moving target, the bootstrap.css trunk project gets many contributions from hundreds of developers, it would be difficult to keep up with that with a home-grown JavaFX port, though if you selected just a smaller subset of bootstrap features keeping in sync would be easier.

Still, it is possible to do the port (as linked in Philippe's answer), and that is what Takayuki Okazaki has created in his Fextile project: "Twitter Bootstrap like UI framework for JavaFX. Apply themes to your application just like Twitter Bootstrap via JavaFX CSS.". Don't expect an exact match with bootstrap in HTML, but it should allow your JavaFX controls which don't use HTML to have a pretty close look to what you would achieve with bootstrap in HTML.

You could also create a hybrid application, where some parts of the UI are from HTML with bootstrap and some are rendered from JavaFX controls using Fextile. If you applied such an approach to the sample application in this answer, then the JavaFX buttons "progress", "jumbotron", etc. would look like their HTML bootstrap counterparts, giving the whole application a more consistent look and feel.

Also, note that there is a similar project for Foundation styles for JavaFX, as announced in this Oracle JavaFX forum post. This project mimics the basic Foundation look for native JavaFX controls. For some usages, adopting Foundation styles may be more appropriate than Bootstrap styles as the project is smaller in scope than Bootstrap (as far as I know).

Here is a Q&A (from the Oracle JavaFX forum post) on how to creating the Foundation style (so somebody can get a relative idea of what is involved for extending Fextile for additional Bootstrap style features). Note that the Q&A is a little old and since then a CSS analyzer has been added to SceneBuilder:

  1. How difficult was this work?

No at all: the whole experience was very pleasant and very easy to do. This is my first JavaFX app (a map style editor with real time preview)

  1. Was it very time consuming?

No: using the preview ScenceBuilder 1.1 the styles are updated on the fly - the SceneBuilder could do with a built in CSS editor, but that's only minor: the workflow was quite simple anyway

  1. For a simple port do you think that you need any design skills at all, or could anybody have really done this who knows a bit of css/html/javafx?

Anyone can do this: my background is server side code - I don't do much in the way of front ends - I know JS and HTML very well but my CSS leaves a lot to me desired: so basically if I can do it ...

  1. Was the difference between the javafx css syntax and the html css syntax a major pain or not really an issue?

Once I got used to it, made no difference although I do keep forgetting to add '-fx-' and the -fx-text-fill I always type as -fx-text-color ...

  1. Similarly did a lack of a one-to-one correspondence between html document tags (e.g. the header tags) and JavaFX complicate this?

No

  1. Will the upcoming rich text support in JavaFX 8 simplify (or make possible) more of these kinds of ports?

I need to have a look at this: as I said I'm a complete beginner with JavaFX so I'm still catching up on the current implementation.

The bootstrap styles would be really nice: a lot of people who I've showed the app to are quite amazed when I tell them its Java and not an embedded web app.

Gird answered 21/1, 2014 at 20:33 Comment(5)
That's cool. I never thought of that. +1. Could you post a quick example? – Cheekpiece
Thanks for the answer. +1 Could I have an example please? – Kinakinabalu
Is it possible to intercept button click events from a web view? – Cheekpiece
Updated answer to provide an executable example and to answer Tesla's button click intercept question. – Gird
@Gird Why not just port bootstrap.css to conform to the javafx naming conventions? – Vlada
R
5

It's not a complete implementation of the bootstrap style but you can start with this css file: https://github.com/watermint/Fextile/blob/master/src/main/resources/fextile.css

Rations answered 12/11, 2014 at 21:45 Comment(0)
P
4

There is a newer port with 400+ stars on Github:

https://github.com/kordamp/bootstrapfx

Perforation answered 12/4, 2020 at 10:10 Comment(0)
A
0

I have actually found another bootstrap3.css file which looks great! You can use it as such:

Scene scene = ...;
scene.getStylesheets().add("bootstrap3.css");

(You might have to specify the path to the file... For me it worked like this, with the file being in my resources folder)

And here is what you have to put in the file:

.root {
    -fx-body-color: #F5F5F5;
    -fx-outer-border: #cecece;
}

.button:focused, .toggle-button:focused,
.split-menu-button:focused, .menu-button:focused,
.number-button:focused,
.combo-box:focused .text-field, .choice-box:focused, .color-picker:focused, .date-picker:focused .text-field {
    -fx-effect: dropshadow(gaussian, #b4d1f3, 3, 3, 0, 0);
}

.combo-box:focused * {
    -fx-effect: none;
}

.button, .menu-button, .toggle-button, .split-menu-button {
    -fx-font-size: 14;
    -fx-background-radius: 4;
    -fx-border-radius: 4;
    -fx-pref-height: 30;
    -fx-min-width: 30;
}

.button, .menu-button, .split-menu-button, .toggle-button, .number-button {
    -fx-background-insets: 0, 0, -1, 0;
}

.split-menu-button > .label {
    -fx-border-radius: 4 0 0 4;
    -fx-background-radius: 3 0 0 3;
}

.split-menu-button > .arrow-button {
    -fx-border-radius: 0 4 4 0;
    -fx-background-radius: 0 3 3 0;
}

.lg {
    -fx-min-height: 46;
    -fx-max-height: 46;
    -fx-font-size: 18;
}

.sm {
    -fx-min-height: 30;
    -fx-max-height: 30;
}

.xs {
    -fx-min-height: 22;
    -fx-max-height: 22;
    -fx-font-size: 10;
}

.primary .arrow,
.success .arrow,
.info .arrow,
.warning .arrow,
.danger .arrow {
    -fx-background-color: transparent, white;
}

.primary > .label,
.success > .label,
.info > .label,
.warning > .label,
.danger > .label {
    -fx-text-fill: white;
}

.action-btn {
    -fx-min-width: 80;
}

/*positions*/
/*first*/
.button.first, .menu-button.first, .toggle-button.first, .text-field.first, .text-area.first {
    -fx-border-radius: 4 0 0 4;
    -fx-background-radius: 4 0 0 4;
}

.split-menu-button.first > .arrow-button, .split-menu-button.middle > .arrow-button {
    -fx-border-radius: 0;
    -fx-background-radius: 0;
}

VBox > .button.first,
VBox > .menu-button.first,
VBox > .toggle-button.first,
VBox > .split-menu-button.first,
VBox > .text-field.first,
VBox > .text-area.first {
    -fx-border-radius: 4 4 0 0;
    -fx-background-radius: 4 4 0 0;
}

VBox > .split-menu-button.first > .label {
    -fx-border-radius: 4 0 0 0;
    -fx-background-radius: 3 0 0 0;
}

VBox > .split-menu-button.first > .arrow-button {
    -fx-border-radius: 0 4 0 0;
    -fx-background-radius: 0 3 0 0;
}

/*middle*/
.middle {
    -fx-border-radius: 0;
    -fx-background-radius: 0;
}

/*last*/
.split-menu-button.middle > .label, .split-menu-button.last > .label {
    -fx-border-radius: 0;
    -fx-background-radius: 0;
}

.split-menu-button.last {
    -fx-border-radius: 0 4 4 0;
    -fx-background-radius: 0 4 4 0;
}

.button.middle, .text-field.middle, .text-area.middle, .split-menu-button.middle, .toggle-button.middle {
    -fx-border-radius: 0;
    -fx-background-radius: 0;
}

.button.last, .text-field.last, .text-area.last, .split-menu-button.last, .toggle-button.last, .menu-button.last {
    -fx-border-radius: 0 4 4 0;
    -fx-background-radius: 0 4 4 0;
}

VBox > .button.last,
VBox > .menu-button.last,
VBox > .toggle-button.last,
VBox > .split-menu-button.last,
VBox > .text-field.last,
VBox > .text-area.last {
    -fx-border-radius: 0 0 4 4;
    -fx-background-radius: 0 0 4 4;
}

VBox > .split-menu-button.last > .label {
    -fx-border-radius: 0 0 0 4;
    -fx-background-radius: 0 0 0 3;
}

VBox > .split-menu-button.last > .arrow-button {
    -fx-border-radius: 0 0 4 0;
    -fx-background-radius: 0 0 3 0;
}

/*button styles*/

/*default button settings*/

/*bgcolor setting*/
.color-picker, .date-picker > .arrow-button,
.number-button, .left-arrow-button, .right-arrow-button,
.button, .split-menu-button, .toggle-button, .menu-button,
.font-menu-button, .split-menu-button > .label, .split-menu-button > .arrow-button {
    -fx-background-color: white;
}

.color-picker, .date-picker > .arrow-button,
.button, .menu-button, .toggle-button, .number-button, .left-arrow-button, .right-arrow-button,
.font-menu-button,
.split-menu-button > .label, .split-menu-button > .arrow-button {
    -fx-border-color: #cccccc;
    -fx-text-fill: #333333;
}

/*just for the special split menu button*/
.split-menu-button > .label {
    -fx-border-width: 1 0 1 1;
}

/*for date picker arrow button*/
.date-picker > .arrow-button {
    -fx-border-radius: 0 4 4 0;
}

.combo-box > .arrow-button, .choice-box > .arrow-button {
    -fx-border-width: 0;
}

/*hover state*/
.color-picker:hover,
.date-picker:hover > .arrow-button,
.combo-box:hover, .choice-box:hover,
.number-button:hover, .left-arrow-button:hover, .right-arrow-button:hover,
.button:hover, .menu-button:hover, .toggle-button:hover,
.font-menu-button:hover,
.split-menu-button > .label:hover, .split-menu-button > .arrow-button:hover {
    -fx-background-color: #e6e6e6;
    -fx-border-color: #acacac;
}

/*pressed selected*/
.color-picker:pressed, .color-picker:selected,
.number-button:pressed, .number-button:selected,
.date-picker:pressed > .arrow-button,
.combo-box:pressed > .arrow-button, .combo-box:selected > .arrow-button,
.choice-box:pressed > .arrow-button, .choice-box:selected > .arrow-button,
.font-menu-button:pressed, .font-menu-button:selected,
.left-arrow-button:pressed, .left-arrow-button:selected,
.right-arrow-button:pressed, .right-arrow-button:selected,
.button:pressed, .button:selected, .menu-button:pressed, .menu-button:selected, .toggle-button:pressed, .toggle-button:selected,
.split-menu-button:pressed > .label, .split-menu-button > .arrow-button:pressed {
    -fx-background-color: #e6e6e6;
    -fx-border-color: #acacac;
    -fx-effect: innershadow(gaussian, #adadad, 10, 0, 0, 3);
}

/*primary*/

.button.primary, .split-menu-button.primary, .toggle-button.primary, .menu-button.primary,
.split-menu-button.primary > .label, .split-menu-button.primary > .arrow-button {
    -fx-background-color: #337ab7;
}

.button.primary, .menu-button.primary, .toggle-button.primary,
.split-menu-button.primary > .label, .split-menu-button.primary > .arrow-button {
    -fx-border-color: #2e6da4;
    -fx-text-fill: white;
}

/*hover state*/
.button.primary:hover, .menu-button.primary:hover, .toggle-button.primary:hover,
.split-menu-button.primary > .label:hover, .split-menu-button.primary > .arrow-button:hover {
    -fx-border-color: #204d74;
    -fx-background-color: #286090;
}

/*pressed selected*/
.button.primary:pressed, .button.primary:selected,
.menu-button.primary:pressed, .menu-button.primary:selected, .toggle-button.primary:pressed, .toggle-button.primary:selected,
.split-menu-button.primary:pressed > .label, .split-menu-button.primary > .arrow-button:pressed {
    -fx-background-color: #286090;
    -fx-border-color: #204d74;
    -fx-effect: innershadow(gaussian, #204d74, 10, 0, 0, 3);
}

/*success*/

.button.success, .split-menu-button.success, .toggle-button.success, .menu-button.success,
.split-menu-button.success > .label, .split-menu-button.success > .arrow-button {
    -fx-background-color: #5cb85c;
}

.button.success, .menu-button.success, .toggle-button.success,
.split-menu-button.success > .label, .split-menu-button.success > .arrow-button {
    -fx-border-color: #4cae4c;
    -fx-text-fill: white;
}

/*hover state*/
.button.success:hover, .menu-button.success:hover, .toggle-button.success:hover,
.split-menu-button.success > .label:hover, .split-menu-button.success > .arrow-button:hover {
    -fx-border-color: #398439;
    -fx-background-color: #449d44;
}

/*pressed selected*/
.button.success:pressed, .button.success:selected,
.menu-button.success:pressed, .menu-button.success:selected, .toggle-button.success:pressed, .toggle-button.success:selected,
.split-menu-button.success:pressed > .label, .split-menu-button.success > .arrow-button:pressed {
    -fx-background-color: #449d44;
    -fx-border-color: #398439;
    -fx-effect: innershadow(gaussian, #398439, 10, 0, 0, 3);
}

/*info*/

.button.info, .split-menu-button.info, .toggle-button.info, .menu-button.info,
.split-menu-button.info > .label, .split-menu-button.info > .arrow-button {
    -fx-background-color: #5bc0de;
}

.button.info, .menu-button.info, .toggle-button.info,
.split-menu-button.info > .label, .split-menu-button.info > .arrow-button {
    -fx-border-color: #46b8da;
    -fx-text-fill: white;
}

/*hover state*/
.button.info:hover, .menu-button.info:hover, .toggle-button.info:hover,
.split-menu-button.info > .label:hover, .split-menu-button.info > .arrow-button:hover {
    -fx-border-color: #269abc;
    -fx-background-color: #31b0d5;
}

/*pressed selected*/
.button.info:pressed, .button.info:selected,
.menu-button.info:pressed, .menu-button.info:selected, .toggle-button.info:pressed, .toggle-button.info:selected,
.split-menu-button.info:pressed > .label, .split-menu-button.info > .arrow-button:pressed {
    -fx-background-color: #31b0d5;
    -fx-border-color: #269abc;
    -fx-effect: innershadow(gaussian, #269abc, 10, 0, 0, 3);
}

/*warning*/

.button.warning, .split-menu-button.warning, .toggle-button.warning, .menu-button.warning,
.split-menu-button.warning > .label, .split-menu-button.warning > .arrow-button {
    -fx-background-color: #f0ad4e;
}

.button.warning, .menu-button.warning, .toggle-button.warning,
.split-menu-button.warning > .label, .split-menu-button.warning > .arrow-button {
    -fx-border-color: #eea236;
    -fx-text-fill: white;
}

/*hover state*/
.button.warning:hover, .menu-button.warning:hover, .toggle-button.warning:hover,
.split-menu-button.warning > .label:hover, .split-menu-button.warning > .arrow-button:hover {
    -fx-border-color: #d58512;
    -fx-background-color: #ec971f;
}

/*pressed selected*/
.button.warning:pressed, .button.warning:selected,
.menu-button.warning:pressed, .menu-button.warning:selected, .toggle-button.warning:pressed, .toggle-button.warning:selected,
.split-menu-button.warning:pressed > .label, .split-menu-button.warning > .arrow-button:pressed {
    -fx-background-color: #ec971f;
    -fx-border-color: #d58512;
    -fx-effect: innershadow(gaussian, #d58512, 10, 0, 0, 3);
}

/*danger*/

.button.danger, .split-menu-button.danger, .toggle-button.danger, .menu-button.danger,
.split-menu-button.danger > .label, .split-menu-button.danger > .arrow-button {
    -fx-background-color: #d9534f;
}

.button.danger, .menu-button.danger, .toggle-button.danger,
.split-menu-button.danger > .label, .split-menu-button.danger > .arrow-button {
    -fx-border-color: #d43f3a;
    -fx-text-fill: white;
}

/*hover state*/
.button.danger:hover, .menu-button.danger:hover, .toggle-button.danger:hover,
.split-menu-button.danger > .label:hover, .split-menu-button.danger > .arrow-button:hover {
    -fx-border-color: #ac2925;
    -fx-background-color: #c9302c;
}

/*pressed selected*/
.button.danger:pressed, .button.danger:selected,
.menu-button.danger:pressed, .menu-button.danger:selected, .toggle-button.danger:pressed, .toggle-button.danger:selected,
.split-menu-button.danger:pressed > .label, .split-menu-button.danger > .arrow-button:pressed {
    -fx-border-color: #ac2925;
    -fx-background-color: #c9302c;
    -fx-effect: innershadow(gaussian, #ac2925, 10, 0, 0, 3);
}

.menu-item {
    -fx-min-width: 200;
}

.menu-item:focused {
    -fx-background-color: #f5f5f5;
}

.menu-item:focused > * {
    -fx-text-fill: #262626;
}

.menu-item:focused .arrow {
    -fx-background-color: #333333;
}

.check-menu-item:checked:hover > .left-container > .check,
.check-menu-item:checked:focused > .left-container > .check,
.radio-menu-item:checked:hover > .left-container > .radio,
.radio-menu-item:checked:focused > .left-container > .radio {
    -fx-background-color: #333333;
}

.context-menu {
    -fx-border-radius: 4;
    -fx-background-radius: 4;
    -fx-border-color: #bebec0;
}

.context-menu > * {
    -fx-padding: 5 0 5 0;
}

.separator {
    -fx-padding: 5 0 5 0;
}

.text-field {
    -fx-pref-height: 30;
}

.combo-box, .choice-box {
    -fx-background-insets: 0;
    -fx-border-color: #cecece;
    -fx-padding: -1;
    -fx-border-width: 1;
}

.combo-box, .choice-box, .color-picker, .date-picker {
    -fx-border-radius: 4;
    -fx-background-radius: 4;
    -fx-pref-height: 30;
}

.combo-box:editable > .arrow-button {
    -fx-background-color: white;
}

.combo-box:editable > .arrow-button:hover {
    -fx-background-color: #e6e6e6;
}

.combo-box:editable > .arrow-button:pressed {
    -fx-effect: innershadow(gaussian, #adadad, 10, 0, 0, 3);
}

.combo-box > .text-input, .date-picker > .text-input {
    -fx-background-radius: 4 0 0 4;
    -fx-border-width: 0;
}

.text-field, .text-area {
    -fx-border-color: #cccccc;
    -fx-background-color: white;
    -fx-border-radius: 4;
    -fx-background-radius: 4;
    -fx-effect: innershadow(gaussian, transparent, 0, 0, 0, 0);
}

.text-field:focused, .text-area:focused {
    -fx-border-color: #66afe9;
    -fx-effect: dropshadow(gaussian, #66afe9, 10, 0, 0, 0);
}

.text-area .scroll-pane, .text-area .scroll-pane .content {
    -fx-background-color: white;
    -fx-background-radius: 4;
}

.tab-pane .tab-header-background {
    -fx-background-color: #f4f4f4;
}

.tab-pane.plain .tab-header-background {
    -fx-background-color: transparent;
}

.tab-pane .tab-header-area .tab {
    -fx-border-radius: 4 4 0 0;
    -fx-background-radius: 5 5 0 0;
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-padding: 3 10 5 10;
    -fx-background-insets: 0;
}

.tab-pane .tab-header-area .tab .tab-label {
    -fx-text-fill: #337ab7;
}

.tab-pane .tab-header-area .tab:hover {
    -fx-background-color: #eeeeee;
}

.tab-pane .tab-header-area .tab:disabled:hover {
    -fx-background-color: transparent;
}

.tab-pane .tab-header-area .tab:selected {
    -fx-focus-color: transparent;
    -fx-border-color: #dddddd #dddddd white #dddddd;
    -fx-background-color: white;
}

.tab-pane .tab-header-area .tab:selected .tab-label {
    -fx-text-fill: #333333;
}

.tab-pane > .tab-content-area {
    -fx-background-color: white;
}

.tab-pane .tab-header-area .tab .tab-label {
    -fx-focus-color: transparent;
}

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-color: transparent;
}

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button {
    -fx-background-color: #337ab7;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-close-button {
    -fx-background-color: #333333;
}

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button:hover {
    -fx-background-color: red;
    -fx-cursor: hand;
}

.scroll-bar {
    -fx-background-color: #fafafa;
    -fx-background-radius: 0;
    -fx-block-increment: 50;
}

.corner {
    -fx-background-color: transparent;
}

.scroll-bar .decrement-button, .scroll-bar .decrement-arrow {
    visibility: hidden;
    -fx-pref-height: 1;
    -fx-pref-width: 1;
}

.scroll-bar .increment-button, .scroll-bar .increment-arrow {
    visibility: hidden;
    -fx-pref-height: 1;
    -fx-pref-width: 1;
}

.scroll-bar:vertical {
    -fx-pref-width: 10;
}

.scroll-bar:horizontal {
    -fx-pref-height: 10;
}

.scroll-bar:horizontal .track,
.scroll-bar:vertical .track {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-background-radius: 5;
}

.scroll-bar:vertical .track-background,
.scroll-bar:horizontal .track-background {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 5;
}

.scroll-bar:horizontal .thumb {
    -fx-background-color: #c9c9c9;
    -fx-background-insets: 2 0 2 0;
    -fx-background-radius: 5;
}

.scroll-bar:vertical .thumb {
    -fx-background-color: #c9c9c9;
    -fx-background-insets: 0 2 0 2;
    -fx-background-radius: 5;
}

.scroll-bar:horizontal .thumb:hover,
.scroll-bar:vertical .thumb:hover {
    -fx-background-color: #b5b5b5;
}

.scroll-bar:horizontal .thumb:pressed,
.scroll-bar:vertical .thumb:pressed {
    -fx-background-color: #a0a0a0;
}

.scroll-bar:vertical .increment-button, .scroll-bar:vertical .decrement-button {
    -fx-background-color: transparent;
    -fx-background-radius: 5;
    -fx-padding: 5;
}

.scroll-bar:horizontal .increment-button, .scroll-bar:horizontal .decrement-button {
    -fx-background-color: transparent;
    -fx-background-radius: 5;
    -fx-padding: 5;
}

.scroll-bar:vertical:focused,
.scroll-bar:horizontal:focused {
    -fx-background-color: transparent, rgb(96, 96, 96), rgb(96, 96, 96);
}

.menu-bar {
    -fx-background-color: white;
}

.menu-bar > .container > .menu-button {
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-border-width: 0;
    -fx-border-radius: 0;
}

.menu-bar > .container > .menu-button:hover,
.menu-bar > .container > .menu-button:showing {
    -fx-background-color: #56c0e0;
}

.color-palette {
    -fx-background-color: white;
}

.pagination > .pagination-control > .control-box {
    -fx-spacing: -1;
}

.pagination > .pagination-control > .control-box > .left-arrow-button {
    -fx-border-radius: 3 0 0 3;
    -fx-border-insets: 0 0 0 7;
    -fx-background-insets: 0 0 0 7, 0 0 0 5, 1 1 1 6, 2 2 2 7;
}

.pagination > .pagination-control > .control-box > .right-arrow-button {
    -fx-border-radius: 0 3 3 0;
    -fx-border-insets: 0 7 0 0;
    -fx-background-insets: 0 7 -1 0, 0 5 0 0, 1 6 1 1, 2 7 2 2;
}

.pagination > .pagination-control > .control-box > .number-button {
    -fx-background-radius: 0;
    -fx-border-radius: 0;
}

.progress-bar > .track {
    -fx-pref-height: 10;
    -fx-background-radius: 3;
    -fx-effect: innershadow(gaussian, #e4e4e4, 4, 0, 0, 1);
    -fx-background-color: #f5f5f5;
}

.progress-bar > .bar {
    -fx-background-insets: 0;
    -fx-background-color: #337ab7;
}

.progress-bar.success > .bar {
    -fx-background-insets: 0;
    -fx-background-color: #5cb85c;
}

.progress-bar.info > .bar {
    -fx-background-insets: 0;
    -fx-background-color: #5bc0de;
}

.progress-bar.warning > .bar {
    -fx-background-insets: 0;
    -fx-background-color: #f0ad4e
}

.progress-bar.danger > .bar {
    -fx-background-insets: 0;
    -fx-background-color: #d9534f;
}

.tooltip {
    -fx-background: white;
    -fx-text-fill: #333333;
    -fx-background-color: white;
    -fx-background-radius: 4px;
    -fx-border-radius: 4px;
    -fx-border-color: #C0C0C0;
    -fx-background-insets: 0;
    -fx-padding: 0.667em 0.75em 0.667em 0.75em; /* 10px */
    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.5), 10, 0.0, 0, 3);
    -fx-font-size: 0.85em;
}

.tooltip.success {
    -fx-background: #dff0d8;
    -fx-background-color: #dff0d8;
    -fx-text-fill: #99bb96;
    -fx-border-color: #d6e9c6;
}

.tooltip.info {
    -fx-background: #d8ecf6;
    -fx-background-color: #d8ecf6;
    -fx-text-fill: #31708f;
    -fx-border-color: #bce8f1;
}

.tooltip.warning {
    -fx-background: #fcf8e3;
    -fx-background-color: #fcf8e3;
    -fx-text-fill: #8a6e3c;
    -fx-border-color: #faebcc;
}

.tooltip.danger {
    -fx-background: #f2dede;
    -fx-background-color: #f2dede;
    -fx-text-fill: #a94442;
    -fx-border-color: #ebccd1;
}

.titled-pane > .title {
    -fx-background-color: #f5f5f5;
    -fx-border-color: #dddddd;
    /*-fx-background-insets: 5, 1, 5;*/
    -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
    -fx-border-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
    -fx-padding: 11
}

.titled-pane > .content {
    -fx-background-color: white;
    -fx-background-radius: 0 0 4 4;
    -fx-border-radius: 0 0 4 4;
    -fx-border-color: #dddddd;
    /*-fx-padding: -11;*/
}

.titled-pane.primary {
    -fx-text-fill: white;
}

.titled-pane.primary > .title {
    -fx-background-color: #337ab7;
    -fx-border-color: #337ab7;
}

.titled-pane.primary > .content {
    -fx-border-color: #337ab7;
}

.titled-pane.success .arrow,
.titled-pane.info .arrow,
.titled-pane.warning .arrow,
.titled-pane.danger .arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
}

.titled-pane.success {
    -fx-text-fill: #3c763d;
}

.titled-pane.success > .title {
    -fx-background-color: #dff0d8;
    -fx-border-color: #d6e9c6;
}

.titled-pane.success > .content {
    -fx-border-color: #d6e9c6;
}

.titled-pane.info {
    -fx-text-fill: #31708f;
}

.titled-pane.info > .title {
    -fx-background-color: #d9edf7;
    -fx-border-color: #bce8f1;
}

.titled-pane.info > .content {
    -fx-border-color: #bce8f1;
}

.titled-pane.warning {
    -fx-text-fill: #8a6d3b;
}

.titled-pane.warning > .title {
    -fx-background-color: #fcf8e3;
    -fx-border-color: #faebcc;
}

.titled-pane.warning > .content {
    -fx-border-color: #faebcc;
}

.titled-pane.danger {
    -fx-text-fill: #a94442;
}

.titled-pane.danger > .title {
    -fx-background-color: #f2dede;
    -fx-border-color: #eacbd0;
}

.titled-pane.danger > .content {
    -fx-border-color: #eacbd0;
}

.accordion > .titled-pane > .title,
.accordion > .titled-pane > .content {
    -fx-background-radius: 0;
    -fx-border-radius: 0;
}

.tool-bar:vertical { /* left */
    -fx-border-color: transparent #dddddd transparent transparent;
}

.tool-bar { /* top */
    -fx-background-color: white;
    -fx-border-color: transparent transparent #dddddd transparent;
}

.tool-bar:vertical {
    -fx-background-insets: 0, 0 1 0 0;
}

/*table view columns*/
.filler, .column-header, .show-hide-columns-button {
    -fx-background-color: #dddddd, white, white;
}

.show-hide-columns-button {
    -fx-border-width: 0;
    -fx-background-insets: 0 0 1 1;
}

.column-header:hover, .show-hide-columns-button:hover {
    -fx-background-color: #dddddd, white, #f8f8f8;
}

.column-header-background > .filler {
    -fx-border-color: transparent #dddddd transparent transparent;
    -fx-border-insets: 0 1 0 0;
}

.column-drag-header {
    -fx-background-color: #2fb254;
}

/*split pane*/
.split-pane > .split-pane-divider {
    -fx-background-color: white;
    -fx-border-color: #eeeeee;
    -fx-pref-width: 8;
}

.split-pane:horizontal > .split-pane-divider {
    -fx-background-insets: 0, 0 1 0 1;
    -fx-border-width: 0 1 0 1;
}

/* vertical the two nodes are placed on top of each other. */
.split-pane:vertical > .split-pane-divider {
    -fx-background-insets: 0, 1 0 1 0;
    -fx-border-width: 1 0 1 0;
}

.split-pane > .split-pane-divider:hover {
    -fx-background-color: #E0E0E0;
}

/*******************************************************************************
 *                                                                             *
 * CheckBox                                                                    *
 *                                                                             *
 ******************************************************************************/
.check-box > .box {
    -fx-background-radius: 3;
    /*-fx-padding: 0.166667em 0.166667em 0.25em 0.25em; !* 2 2 3 3 *!*/
    -fx-padding: 0;
    -fx-border-color: #56c0e0;
    -fx-border-radius: 3;
    -fx-background-color: white;
}

.check-box > .box > .mark {
    -fx-background-color: null;
    -fx-padding: 0.416667em 0.416667em 0.5em 0.5em; /* 5 5 6 6 */
    -fx-shape: "M927.936 272.992l-68.288-68.288c-12.608-12.576-32.96-12.576-45.536 0l-409.44 409.44-194.752-196.16c-12.576-12.576-32.928-12.576-45.536 0l-68.288 68.288c-12.576 12.608-12.576 32.96 0 45.536l285.568 287.488c12.576 12.576 32.96 12.576 45.536 0l500.736-500.768c12.576-12.544 12.576-32.96 0-45.536z";
    -fx-background-insets: -3 -3 1 0;
}

.check-box {
    -fx-label-padding: 0.2em 0.0em 0.3em 0.416667em; /* 0 0 0 5 */
    -fx-text-fill: -fx-text-background-color;
    -fx-padding: 0 0 2 0;
}

.check-box:indeterminate > .box {
    -fx-padding: 0;
}

.check-box:selected > .box > .mark {
    -fx-background-color: linear-gradient(to bottom, #56c0e0, #40b8dc);
}

/*******************************************************************************
 *                                                                             *
 * RadioButton                                                                 *
 *                                                                             *
 ******************************************************************************/

.radio-button {
    -fx-label-padding: 0.0em 0.0em 0.1em 0.416667em; /* 0 0 0 5 */
    -fx-text-fill: -fx-text-background-color;
    -fx-padding: 0 0 .5 0;
}

.radio-button > .radio,
.radio-button:focused > .radio {
    -fx-border-color: #56c0e0;
    -fx-border-radius: 1em;
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
    -fx-padding: 1 2 3 2;
    -fx-background-color: white;
}

.radio-button > .radio > .dot {
    -fx-background-color: transparent;
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
    -fx-padding: 0.333333em; /* 4 -- radius of the inner black dot when selected */
    -fx-background-insets: 3 2 1 2;
}

.radio-button:selected > .radio, .radio-button:hover > .radio {
    -fx-fill-color: #56c0e0;
}

.radio-button:pressed > .radio {
    -fx-background-color: #50c0e2;
}

.radio-button:selected > .radio > .dot {
    -fx-background-color: #56c0e0;
}

/*common things*/
.check-box:hover > .box,
.check-box:selected > .box,
.radio-button:hover > .radio,
.radio-button:selected > .radio {
    -fx-background-color: linear-gradient(to bottom, white, #efefef);
}

.check-box:pressed > .box,
.radio-button:pressed > .radio {
    -fx-background-color: #50c0e2;
}

/*******************************************************************************
 *                                                                             *
 * Slider                                                                      *
 *                                                                             *
 ******************************************************************************/

.slider .thumb {
    -fx-background-color: #dad9da, white, #3fbadf;
    -fx-background-insets: 0, 1, 5;
    -fx-effect: dropshadow(two-pass-box, rgba(0, 0, 0, 0.2), 5, 0.0, 0, 0);
}

.slider .thumb:hover {
    -fx-effect: dropshadow(two-pass-box, rgba(0, 0, 0, 0.4), 5, 0.0, 0, 0);
}

.slider .track {
    -fx-background-color: #dad9da, white;
    -fx-background-insets: -1, 0, 1;
    -fx-pref-height: 5;
}

.slider:vertical .track {
    -fx-pref-width: 5;
}
Amadeus answered 7/8, 2020 at 23:20 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.