Page Comparison

...

The CSS stylesheets can be found in the nautdrafter.view.stylesheets package resources/style/ directory of the main project. Most general-purpose elements, such as buttons, text fields and menus have their styles defined in Base.css. Styles specific to custom UI components are generally placed in separate CSS files, given the same name as the FXML file they relate to (for example, styles specific to Titlebar.fxml are defined in Titlebar.css).

...

When possible, refer to JavaFX controls (such as Button, Label, etc.) using their class name (e.g. .button rather than Button to target buttons).

Formatting

• Use soft hard indents (spaces) set to 4 spaces per tab/indent leveltabs).
• One selector per line.
• Opening brace of declaration blocks go on the same line as the last selector, with a single space before it.
• Closing brace of declaration blocks should be placed on a new line (and at the same indentation level as the selectors).
• Declarations should be indented one level (4 spaces)
• Each declaration gets its own line.
• There should be a space after the : in a declaration.
• A single empty line should be placed between rulesets.

...

/*=============================================
 * SCROLLBARS
 *=============================================*/
.scroll-bar {
    	-fx-background-color: transparent;
    	-fx-opacity: 0.5;
}

.scroll-bar .track-background, 
.scroll-bar .track {
    	-fx-background-color: transparent;
}

.scroll-bar .thumb {
    	-fx-background-radius: 2px;
    	-fx-background-color: -col-primary-trans;
}

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

.scroll-bar:horizontal .increment-arrow, 
.scroll-bar:horizontal .decrement-arrow {
    	-fx-background-color: transparent;
    
    	/* Overall scrollbar height is set by the button's padding */
    	-fx-padding: 15px 0 0 0;
}

...

• The JavaFX CSS Reference Guide give an overview of using JavaFX's CSS implementation and details of all available CSS properties.
  
• ScenicView can be useful seeing how UI components are structured in the running application. Unfortunately it's live CSS reloading does not seem to be working.

Related articles

...

• .

...