Skip to content

Instantly share code, notes, and snippets.

@Remzi1993

Remzi1993/modena.css

Last active September 28, 2023 16:49
Show Gist options
  • Save Remzi1993/23350e22a51d325ed00171c117fb66d4 to your computer and use it in GitHub Desktop.
Save Remzi1993/23350e22a51d325ed00171c117fb66d4 to your computer and use it in GitHub Desktop.
Download ZIP
modena.css extracted from JavaFX 19 - path: %HOMEPATH%\.m2\repository\org\openjfx\javafx-controls\19\javafx-controls-19-win.jar
Raw
modena.css
/*
* Copyright (c) 2009, 2021, Oracle and/or its affiliates. All rights reserved.
* DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
*
* This code is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License version 2 only, as
* published by the Free Software Foundation. Oracle designates this
* particular file as subject to the "Classpath" exception as provided
* by Oracle in the LICENSE file that accompanied this code.
*
* This code is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
* version 2 for more details (a copy is included in the LICENSE file that
* accompanied this code).
*
* You should have received a copy of the GNU General Public License version
* 2 along with this work; if not, write to the Free Software Foundation,
* Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
*
* Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
* or visit www.oracle.com if you need additional information or have any
* questions.
*/
/*
* Modena
*
* This is the second generation theme for JavaFX after Caspian.
*/
/*******************************************************************************
* *
* THEMING INSTRUCTIONS *
* *
*******************************************************************************
TODO: Explain here how theming works:
* -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
* -fx-text-background-color for text on top of -fx-background
* -fx-text-inner-color for text on top of -fx-control-inner-color
* -fx-selection-bar-text for text on top of -fx-selection-bar
RESIZING FOR DIFFERENT SCREEN DPI
-------------------------------
When the screen DPI changes Windows will use a different font size by default.
The default is 12px and can change to 15px or 18px depending on user
preference or screen DPI. On Mac the default is 13px and embedded will depend
on hardware. To make UI controls scale and be the right proportions for each of
these font sizes we base the padding (which controls size of control) on the
font size. This is done using the CSS measurement unit of a "em" where
(1em = font size). The default sizes are based on Windows default of 12px, as
a quick reference here are common px sizes in em units on windows.
Windows 12px -> em units -> Mac 13px |
----------------------------------------
1px -> 0.083333em -> 1.08px ~ 2px
2px -> 0.166667em -> 2.16px ~ 3px
3px = 0.25em
4px = 0.333333em
5px = 0.416667em
6px = 0.5em
7px = 0.583333em
8px = 0.666667em
9px = 0.75em
10px = 0.833333em
11px = 0.916667em
12px = 1em
IMPORTANT: Not all sizes are scaled with em units only padding. All borders and
background insets are still in pixels. Also any padding where it has to match up
is being used to size a border should also be in pixels.
******************************************************************************/
/*******************************************************************************
* *
* CSS Styles for core infrastructure bits. The .root section provides the *
* overall default colors used by the rest of the sections. *
* *
******************************************************************************/
.root {
/***************************************************************************
* *
* The main color palette from which the rest of the colors are derived. *
* *
**************************************************************************/
/* A light grey that is the base color for objects. Instead of using
* -fx-base directly, the sections in this file will typically use -fx-color.
*/
-fx-base: #ececec;
/* A very light grey used for the background of windows. See also
* -fx-text-background-color, which should be used as the -fx-text-fill
* value for text painted on top of backgrounds colored with -fx-background.
*/
-fx-background: derive(-fx-base,26.4%);
/* Used for the inside of text boxes, password boxes, lists, trees, and
* tables. See also -fx-text-inner-color, which should be used as the
* -fx-text-fill value for text painted on top of backgrounds colored
* with -fx-control-inner-background.
*/
-fx-control-inner-background: derive(-fx-base,80%);
/* Version of -fx-control-inner-background for alternative rows */
-fx-control-inner-background-alt: derive(-fx-control-inner-background,-2%);
/* One of these colors will be chosen based upon a ladder calculation
* that uses the brightness of a background color. Instead of using these
* colors directly as -fx-text-fill values, the sections in this file should
* use a derived color to match the background in use. See also:
*
* -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
* -fx-text-background-color for text on top of -fx-background
* -fx-text-inner-color for text on top of -fx-control-inner-color
* -fx-selection-bar-text for text on top of -fx-selection-bar
*/
-fx-dark-text-color: black;
-fx-mid-text-color: #333;
-fx-light-text-color: white;
/* A bright blue for highlighting/accenting objects. For example: selected
* text; selected items in menus, lists, trees, and tables; progress bars */
-fx-accent: #0096C9;
/* Default buttons color, this is similar to accent but more subtle */
-fx-default-button: #ABD8ED;
/* A bright blue for the focus indicator of objects. Typically used as the
* first color in -fx-background-color for the "focused" pseudo-class. Also
* typically used with insets of -1.4 to provide a glowing effect.
*/
-fx-focus-color: #039ED3;
-fx-faint-focus-color: #039ED322;
/* The color that is used in styling controls. The default value is based
* on -fx-base, but is changed by pseudoclasses to change the base color.
* For example, the "hover" pseudoclass will typically set -fx-color to
* -fx-hover-base (see below) and the "armed" pseudoclass will typically
* set -fx-color to -fx-pressed-base.
*/
-fx-color: -fx-base;
/* Chart Color Palette */
CHART_COLOR_1: #f3622d;
CHART_COLOR_2: #fba71b;
CHART_COLOR_3: #57b757;
CHART_COLOR_4: #41a9c9;
CHART_COLOR_5: #4258c9;
CHART_COLOR_6: #9a42c8;
CHART_COLOR_7: #c84164;
CHART_COLOR_8: #888888;
/* Chart Color Palette Semi-Transparent
* These are used by charts that need semi transparent versions of the above colors, such as BubbleChart. They
* are exactly the same colors as above just with alpha
*
* 20% opacity
*/
CHART_COLOR_1_TRANS_20: #f3622d33;
CHART_COLOR_2_TRANS_20: #fba71b33;
CHART_COLOR_3_TRANS_20: #57b75733;
CHART_COLOR_4_TRANS_20: #41a9c933;
CHART_COLOR_5_TRANS_20: #4258c933;
CHART_COLOR_6_TRANS_20: #9a42c833;
CHART_COLOR_7_TRANS_20: #c8416433;
CHART_COLOR_8_TRANS_20: #88888833;
/* 70% opacity */
CHART_COLOR_1_TRANS_70: #f3622db3;
CHART_COLOR_2_TRANS_70: #fba71bb3;
CHART_COLOR_3_TRANS_70: #57b757b3;
CHART_COLOR_4_TRANS_70: #41a9c9b3;
CHART_COLOR_5_TRANS_70: #4258c9b3;
CHART_COLOR_6_TRANS_70: #9a42c8b3;
CHART_COLOR_7_TRANS_70: #c84164b3;
CHART_COLOR_8_TRANS_70: #888888b3;
/***************************************************************************
* *
* Colors that are derived from the main color palette. *
* *
**************************************************************************/
/* A little lighter than -fx-base and used as the -fx-color for the
* "hovered" pseudoclass state.
*/
-fx-hover-base: ladder(
-fx-base,
derive(-fx-base,20%) 20%,
derive(-fx-base,30%) 35%,
derive(-fx-base,40%) 50%
);
/* A little darker than -fx-base and used as the -fx-color for the
* "armed" pseudoclass state.
*
* TODO: should this be renamed to -fx-armed-base?
*/
-fx-pressed-base: derive(-fx-base,-6%);
/* The color to use for -fx-text-fill when text is to be painted on top of
* a background filled with the -fx-background color.
*/
-fx-text-background-color: ladder(
-fx-background,
-fx-light-text-color 45%,
-fx-dark-text-color 46%,
-fx-dark-text-color 59%,
-fx-mid-text-color 60%
);
/* A little darker than -fx-color and used to draw boxes around objects such
* as progress bars, scroll bars, scroll panes, trees, tables, and lists.
*/
-fx-box-border: ladder(
-fx-color,
black 20%,
derive(-fx-color,-15%) 30%
);
/* Darker than -fx-background and used to draw boxes around text boxes and
* password boxes.
*/
-fx-text-box-border: ladder(
-fx-background,
black 10%,
derive(-fx-background, -15%) 30%
);
/* Lighter than -fx-background and used to provide a small highlight when
* needed on top of -fx-background. This is never a shadow in Modena but
* keep -fx-shadow-highlight-color name to be compatible with Caspian.
*/
-fx-shadow-highlight-color: ladder(
-fx-background,
rgba(255,255,255,0.07) 0%,
rgba(255,255,255,0.07) 20%,
rgba(255,255,255,0.07) 70%,
rgba(255,255,255,0.7) 90%,
rgba(255,255,255,0.75) 100%
);
/* A gradient that goes from a little darker than -fx-color on the top to
* even more darker than -fx-color on the bottom. Typically is the second
* color in the -fx-background-color list as the small thin border around
* a control. It is typically the same size as the control (i.e., insets
* are 0).
*/
-fx-outer-border: derive(-fx-color,-23%);
/* A gradient that goes from a bit lighter than -fx-color on the top to
* a little darker at the bottom. Typically is the third color in the
* -fx-background-color list as a thin highlight inside the outer border.
* Insets are typically 1.
*/
-fx-inner-border: linear-gradient(to bottom,
ladder(
-fx-color,
derive(-fx-color,30%) 0%,
derive(-fx-color,20%) 40%,
derive(-fx-color,25%) 60%,
derive(-fx-color,55%) 80%,
derive(-fx-color,55%) 90%,
derive(-fx-color,75%) 100%
),
ladder(
-fx-color,
derive(-fx-color,20%) 0%,
derive(-fx-color,10%) 20%,
derive(-fx-color,5%) 40%,
derive(-fx-color,-2%) 60%,
derive(-fx-color,-5%) 100%
));
-fx-inner-border-horizontal: linear-gradient(to right, derive(-fx-color,55%), derive(-fx-color,-5%));
-fx-inner-border-bottomup: linear-gradient(to top, derive(-fx-color,55%), derive(-fx-color,-5%));
/* A gradient that goes from a little lighter than -fx-color at the top to
* a little darker than -fx-color at the bottom and is used to fill the
* body of many controls such as buttons.
*/
-fx-body-color: linear-gradient(to bottom,
ladder(
-fx-color,
derive(-fx-color,8%) 75%,
derive(-fx-color,10%) 80%
),
derive(-fx-color,-8%));
-fx-body-color-bottomup: linear-gradient(to top, derive(-fx-color,10%) ,derive(-fx-color,-6%));
-fx-body-color-to-right: linear-gradient(to right, derive(-fx-color,10%) ,derive(-fx-color,-6%));
/* The color to use as -fx-text-fill when painting text on top of
* backgrounds filled with -fx-base, -fx-color, and -fx-body-color.
*/
-fx-text-base-color: ladder(
-fx-color,
-fx-light-text-color 45%,
-fx-dark-text-color 46%,
-fx-dark-text-color 59%,
-fx-mid-text-color 60%
);
/* The color to use as -fx-text-fill when painting text on top of
* backgrounds filled with -fx-control-inner-background.
*/
-fx-text-inner-color: ladder(
-fx-control-inner-background,
-fx-light-text-color 45%,
-fx-dark-text-color 46%,
-fx-dark-text-color 59%,
-fx-mid-text-color 60%
);
/* The color to use for small mark-like objects such as checks on check
* boxes, filled in circles in radio buttons, arrows on scroll bars, etc.
*/
-fx-mark-color: ladder(
-fx-color,
white 30%,
derive(-fx-color,-63%) 31%
);
/* The small thin light "shadow" for mark-like objects. Typically used in
* conjunction with -fx-mark-color with an insets of 1 0 -1 0. */
-fx-mark-highlight-color: ladder(
-fx-color,
derive(-fx-color,80%) 60%,
white 70%
);
/* Background for items in list like things such as menus, lists, trees,
* and tables. */
-fx-selection-bar: -fx-accent;
/* Background color to use for selection of list cells etc. This is when
* the control doesn't have focus or the row of a previously selected item. */
-fx-selection-bar-non-focused: lightgrey;
/* The color to use as -fx-text-fill when painting text on top of
* backgrounds filled with -fx-selection-bar.
*
* TODO: this can be removed
*/
-fx-selection-bar-text: -fx-text-background-color;
/* These are needed for Popup */
-fx-background-color: inherit;
-fx-background-radius: inherit;
-fx-background-insets: inherit;
-fx-padding: inherit;
/* The color to use in ListView/TreeView/TableView to indicate hover. */
-fx-cell-hover-color: #cce3f4;
/** Focus line for keyboard focus traversal on cell based controls */
-fx-cell-focus-inner-border: derive(-fx-selection-bar,30%);
/* The colors to use in Pagination */
-fx-page-bullet-border: #acacac;
-fx-page-indicator-hover-border: #accee5;
-fx-focused-text-base-color : ladder(
-fx-selection-bar,
-fx-light-text-color 45%,
-fx-dark-text-color 46%,
-fx-dark-text-color 59%,
-fx-mid-text-color 60%
);
-fx-focused-mark-color : -fx-focused-text-base-color ;
/***************************************************************************
* *
* Set the default background color for the scene *
* *
**************************************************************************/
-fx-background-color: -fx-background;
}
/* Make popups transparent */
.root.popup {
-fx-background-color: transparent;
}
/*******************************************************************************
* *
* Common Styles *
* *
* These are styles that give a standard look to a whole range of controls *
* *
******************************************************************************/
/* ==== TEXT NODES IN CONTROLS ========================================== */
.text {
/* This adjusts text alignment within the bounds of text nodes so that
the text is always vertically centered within the bounds. Based on
the cap height of the text. */
-fx-bounds-type: logical_vertical_center;
/* Enable LCD text rendering */
-fx-font-smoothing-type: lcd;
}
/* ==== BUTTON LIKE THINGS ============================================== */
.button,
.toggle-button,
.radio-button > .radio,
.check-box > .box,
.menu-button,
.choice-box,
.color-picker.split-button > .color-picker-label,
.combo-box-base,
.combo-box-base:editable > .arrow-button {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-background-radius: 3px, 3px, 2px, 1px;
-fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
-fx-text-fill: -fx-text-base-color;
-fx-alignment: CENTER;
-fx-content-display: LEFT;
}
.menu-button > .label {
-fx-alignment: CENTER_LEFT;
}
.button:hover,
.toggle-button:hover,
.radio-button:hover > .radio,
.check-box:hover > .box,
.menu-button:hover,
.split-menu-button > .label:hover,
.split-menu-button > .arrow-button:hover,
.slider .thumb:hover,
.scroll-bar > .thumb:hover,
.scroll-bar > .increment-button:hover,
.scroll-bar > .decrement-button:hover,
.choice-box:hover,
.color-picker.split-button > .arrow-button:hover,
.color-picker.split-button > .color-picker-label:hover,
.combo-box-base:hover,
.combo-box-base:editable > .arrow-button:hover,
.spinner .increment-arrow-button:hover,
.spinner .decrement-arrow-button:hover,
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover {
-fx-color: -fx-hover-base;
}
.button:armed,
.toggle-button:armed,
.radio-button:armed > .radio,
.check-box:armed .box,
.menu-button:armed,
.split-menu-button:armed > .label,
.split-menu-button > .arrow-button:pressed,
.split-menu-button:showing > .arrow-button,
.slider .thumb:pressed,
.scroll-bar > .thumb:pressed,
.scroll-bar > .increment-button:pressed,
.scroll-bar > .decrement-button:pressed,
.choice-box:showing,
.combo-box-base:showing,
.combo-box-base:editable:showing > .arrow-button,
.spinner .increment-arrow-button:pressed,
.spinner .decrement-arrow-button:pressed,
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:pressed {
-fx-color: -fx-pressed-base;
}
.button:focused,
.toggle-button:focused,
.radio-button:focused > .radio,
.check-box:focused > .box,
.menu-button:focused,
.choice-box:focused,
.color-picker.split-button:focused > .color-picker-label,
.combo-box-base:focused,
.slider:focused .thumb {
-fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
-fx-background-insets: -0.2, 1, 2, -1.4, 2.6;
-fx-background-radius: 3, 2, 1, 4, 1;
}
/* ==== DISABLED THINGS ================================================= */
.label:disabled,
.button:disabled,
.toggle-button:disabled,
.radio-button:disabled,
.check-box:disabled,
.hyperlink:disabled,
.menu-button:disabled,
.split-menu-button:disabled,
.slider:disabled,
.scroll-bar:disabled,
.scroll-pane:disabled,
.progress-bar:disabled,
.progress-indicator:disabled,
.text-input:disabled,
.choice-box:disabled,
.combo-box-base:disabled,
.date-cell:disabled > *, /* This is set on children so border is not affected. */
.list-view:disabled,
.tree-view:disabled,
.table-view:disabled,
.tree-table-view:disabled,
/*.tab-pane:disabled, / Removed for JDK-8144983 */
.titled-pane:disabled > .title,
.accordion:disabled > .titled-pane > .title,
.tab-pane > .tab-header-area > .headers-region > .tab:disabled,
.menu:disabled,
.menu-item:disabled,
.list-cell:filled:selected:focused:disabled,
.list-cell:filled:selected:disabled,
.tree-cell:filled:selected:focused:disabled,
.tree-cell:filled:selected:disabled,
.tree-cell > .tree-disclosure-node:disabled,
.tree-table-row-cell > .tree-disclosure-node:disabled,
.table-row-cell:selected:disabled,
.tree-table-row-cell:selected:disabled,
.table-cell:selected:disabled,
.tree-table-cell:selected:disabled,
.spinner:disabled {
-fx-opacity: 0.4;
}
/* Prevent opacity being applied twice for JDK-8152392 */
.text-input:disabled > .scroll-pane {
-fx-opacity: 1.0;
}
/* ==== MNEMONIC THINGS ================================================= */
.mnemonic-underline {
-fx-stroke: transparent;
}
.titled-pane:show-mnemonics > .mnemonic-underline,
.label:show-mnemonics > .mnemonic-underline,
.context-menu:show-mnemonics > .mnemonic-underline,
.menu:show-mnemonics > .mnemonic-underline,
.menu-bar:show-mnemonics > .mnemonic-underline,
.menu-item:show-mnemonics > .mnemonic-underline,
.button:show-mnemonics > .mnemonic-underline,
.toggle-button:show-mnemonics > .mnemonic-underline,
.radio-button:show-mnemonics > .mnemonic-underline,
.check-box:show-mnemonics > .mnemonic-underline,
.split-menu-button:show-mnemonics > .mnemonic-underline,
.menu-button:show-mnemonics > .mnemonic-underline {
-fx-stroke: -fx-text-base-color;
}
.menu-button:showing > .label:show-mnemonics > .mnemonic-underline,
.menu-button:hover > .label:show-mnemonics > .mnemonic-underline,
.menu-button:focused > .label:show-mnemonics > .mnemonic-underline,
.menu-item:hover .label:show-mnemonics > .mnemonic-underline,
.menu-item:focused .label:show-mnemonics > .mnemonic-underline {
-fx-stroke: -fx-focused-text-base-color;
}
.hyperlink:show-mnemonics > .mnemonic-underline {
-fx-stroke: -fx-text-fill;
}
/* ==== MARKS =========================================================== */
.radio-button:selected > .radio > .dot,
.check-box:selected > .box > .mark,
.check-box:indeterminate > .box > .mark {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
}
/* ==== ARROWS ========================================================== */
.menu-button > .arrow-button > .arrow,
.split-menu-button > .arrow-button > .arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 0 0 -1 0, 0;
-fx-padding: 0.25em;
-fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
}
.choice-box > .open-button > .arrow,
.menu-button:openvertically > .arrow-button > .arrow,
.split-menu-button:openvertically > .arrow-button > .arrow,
.combo-box-base > .arrow-button > .arrow,
.web-view .form-select-button .arrow,
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 0 0 -1 0, 0;
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
/* ==== CHOICE BOX LIKE THINGS ========================================== */
.choice-box,
.menu-button,
.combo-box-base {
-fx-padding: 0;
}
.choice-box > .label,
.menu-button > .label,
.color-picker > .label {
-fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
-fx-text-fill: -fx-text-base-color;
}
.choice-box > .open-button,
.menu-button > .arrow-button {
-fx-padding: 0.5em 0.667em 0.5em 0.0em; /* 6 8 6 0 */
}
/* ==== BOX LIKE THINGS ================================================= */
.scroll-pane,
.split-pane,
.list-view,
.tree-view,
.table-view,
.tree-table-view,
.html-editor {
-fx-background-color: -fx-box-border, -fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-padding: 1;
}
.scroll-pane:focused,
.split-pane:focused,
.list-view:focused,
.tree-view:focused,
.table-view:focused,
.tree-table-view:focused,
.html-editor:contains-focus {
-fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background;
-fx-background-insets: -1.4, -0.3, 1;
-fx-background-radius: 2, 0, 0;
}
/* ones with grey -fx-background not lighter -fx-control-inner-background */
.scroll-pane,
.split-pane {
-fx-background-color: -fx-box-border, -fx-background;
}
.scroll-pane:focused,
.split-pane:focused {
-fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-background;
}
/*******************************************************************************
* *
* Label *
* *
******************************************************************************/
.label {
-fx-text-fill: -fx-text-background-color;
}
/*******************************************************************************
* *
* Button & ToggleButton *
* *
******************************************************************************/
/* ==== DEFAULT ========================================================= */
.button:default {
-fx-base: -fx-default-button;
}
/* ==== WEB BUTTONS ===================================================== */
.web-view .form-select-button {
-fx-background-radius: 2, 2, 1, 0;
-fx-background-insets: 2 2 1 2, 2, 3, 4;
}
/* ==== PILL BUTTONS ==================================================== */
.button.left-pill,
.toggle-button.left-pill {
-fx-background-radius: 3 0 0 3, 3 0 0 3, 2 0 0 2, 1 0 0 1;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-padding: 0.333333em 0.666667em 0.333333em 0.75em; /* 4 8 4 9 */
}
.button.center-pill,
.toggle-button.center-pill {
-fx-background-radius: 0;
-fx-background-insets: 0 0 -1 0, 0 0 0 0, 1 1 1 0, 2 2 2 1 ;
}
.button.right-pill,
.toggle-button.right-pill {
-fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
-fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 1 ;
}
.button.left-pill:focused,
.toggle-button.left-pill:focused {
-fx-background-insets: -0.2 0 -0.2 -0.2, 1, 2, -1.4 0 -1.4 -1.4, 2.6;
-fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1, 4 0 0 4, 1 0 0 1;
}
.button.center-pill:focused,
.toggle-button.center-pill:focused {
-fx-background-insets: -0.2 0 -0.2 -1, 1 1 1 0, 2 2 2 1, -1.4 0 -1.4 -1, 2.6 2.6 2.6 1.6;
-fx-background-radius: 0, 0, 0, 0, 0;
}
.button.right-pill:focused,
.toggle-button.right-pill:focused {
-fx-background-insets: -0.2 -0.2 -0.2 -1, 1 1 1 0, 2 2 2 1, -1.4 -1.4 -1.4 -1, 2.6 2.6 2.6 1.6;
-fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0, 0 4 4 0, 0 1 1 0;
}
.toggle-button:selected.left-pill:focused {
-fx-background-insets: -0.2 0 -0.2 -0.2, 1, -1.4 0 -1.4 -1.4, 2.6;
-fx-background-radius: 3 0 0 3, 2 0 0 2, 4 0 0 4, 0;
}
.toggle-button:selected.center-pill:focused {
-fx-background-insets: -0.2 0 -0.2 -1, 1 1 1 0, -1.4 0 -1.4 -1, 2.6 2.6 2.6 1.6;
-fx-background-radius: 0, 0, 0, 0;
}
.toggle-button:selected.right-pill:focused {
-fx-background-insets: -0.2 -0.2 -0.2 -1, 1 1 1 0, -1.4 -1.4 -1.4 -1, 2.6 2.6 2.6 1.6;
-fx-background-radius: 0 3 3 0, 0 2 2 0, 0 4 4 0, 0;
}
/* ==== SELECTED TOGGLE ================================================= */
.toggle-button:selected {
-fx-background-color:
-fx-shadow-highlight-color,
linear-gradient(to bottom, derive(-fx-outer-border, -20%), -fx-outer-border),
linear-gradient(to bottom,
derive(-fx-color, -22%) 0%,
derive(-fx-color, -13%) 20%,
derive(-fx-color, -11%) 50%);
-fx-background-insets: 0 0 -1 0, 0, 1;
}
.toggle-button:selected:focused {
-fx-background-color:
-fx-focus-color,
linear-gradient(to bottom,
derive(-fx-color, -22%) 0%,
derive(-fx-color, -13%) 20%,
derive(-fx-color, -11%) 50%),
-fx-faint-focus-color,
linear-gradient(to bottom,
derive(-fx-color, -22%) 0%,
derive(-fx-color, -13%) 20%,
derive(-fx-color, -11%) 50%);
-fx-background-insets: -0.2, 1, -1.4, 2.6;
-fx-background-radius: 3, 2, 4, 0;
}
/*******************************************************************************
* *
* RadioButton *
* *
******************************************************************************/
.radio-button {
-fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
-fx-text-fill: -fx-text-background-color;
}
.radio-button > .radio,
.radio-button:focused > .radio {
-fx-background-radius: 1.0em; /* large value to make sure this remains circular */
-fx-padding: 0.333333em; /* 4 -- padding from outside edge to the inner black dot */
}
.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 */
}
/*******************************************************************************
* *
* CheckBox *
* *
******************************************************************************/
.check-box {
-fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
-fx-text-fill: -fx-text-background-color;
}
.check-box > .box {
-fx-background-radius: 3, 2, 1;
-fx-padding: 0.166667em 0.166667em 0.25em 0.25em; /* 2 2 3 3 */
}
.check-box > .box > .mark {
-fx-background-color: null;
-fx-padding: 0.416667em 0.416667em 0.5em 0.5em; /* 5 5 6 6 */
-fx-shape: "M-0.25,6.083c0.843-0.758,4.583,4.833,5.75,4.833S14.5-1.5,15.917-0.917c1.292,0.532-8.75,17.083-10.5,17.083C3,16.167-1.083,6.833-0.25,6.083z";
}
.check-box:indeterminate > .box {
-fx-padding: 0;
}
.check-box:indeterminate > .box > .mark {
-fx-shape: "M0,0H10V2H0Z";
-fx-scale-shape: false;
-fx-padding: 0.666667em; /* 16x16 = 8+8 */
}
/*******************************************************************************
* *
* Hyperlink *
* *
******************************************************************************/
.hyperlink {
-fx-padding: 0.166667em 0.25em 0.166667em 0.25em; /* 2 3 2 3 */
-fx-cursor: hand;
-fx-content-display: LEFT;
-fx-border-color: transparent;
-fx-border-width: 1px;
}
.hyperlink,
.hyperlink:hover,
.hyperlink:hover:visited {
-fx-text-fill: -fx-accent;
}
.hyperlink:armed,
.hyperlink:visited,
.hyperlink:hover:armed {
-fx-text-fill: -fx-text-background-color;
}
.hyperlink:hover,
.hyperlink:visited,
.hyperlink:hover:visited {
-fx-underline: true;
}
.hyperlink:visited:armed {
-fx-underline: false;
}
.hyperlink:focused {
-fx-border-color: -fx-focus-color;
-fx-border-style: segments(0.166667em, 0.166667em);
-fx-border-width: 1px;
}
/* Fix for RT-37971 */
.cell:selected .hyperlink,
.cell:selected .hyperlink:hover,
.cell:selected .hyperlink:hover:visited {
-fx-text-fill: -fx-text-background-color;
}
/*******************************************************************************
* *
* SplitMenuButton *
* *
******************************************************************************/
.split-menu-button {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border;
-fx-background-insets: 0 0 -1 0, 0;
-fx-background-radius: 3, 3;
-fx-padding: 0;
}
.split-menu-button > .label {
-fx-text-fill: -fx-text-base-color;
-fx-background-color: -fx-inner-border, -fx-body-color;
-fx-background-insets: 1 0 1 1, 2 1 2 2;
-fx-background-radius: 2 0 0 2, 1 0 0 1;
-fx-padding: 0.333333em 0.667em 0.333333em 0.667em; /* 4 8 4 8 */
}
.split-menu-button > .arrow-button {
-fx-background-color: -fx-inner-border, -fx-body-color;
-fx-background-insets: 1, 2;
-fx-background-radius: 0 2 2 0, 0 1 1 0;
-fx-padding: 0.5em 0.667em 0.5em 0.667em; /* 6 8 6 8 */
}
.split-menu-button:focused {
-fx-background-color: -fx-focus-color;
-fx-background-insets: -0.2;
-fx-background-radius: 3;
}
.split-menu-button:focused > .label {
-fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
-fx-background-insets: 1 0 1 1, 2 1 2 2, -1.4 0 -1.4 -1.4, 2.6 1.6 2.6 2.6;
-fx-background-radius: 2 0 0 2, 1 0 0 1, 4 0 0 4, 0;
}
.split-menu-button:focused > .arrow-button {
-fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
-fx-background-insets: 1, 2, -1.4, 2.6;
-fx-background-radius: 0 2 2 0, 0 1 1 0, 0 4 4 0, 0;
}
/*******************************************************************************
* *
* ToolBar *
* *
******************************************************************************/
.tool-bar:vertical { /* left */
-fx-background-color:
-fx-outer-border,
linear-gradient(to right, derive(-fx-base,0%) 0%, derive(-fx-base,10%) 50%, derive(-fx-base,0%) 100%);
-fx-background-insets: 0, 0 0 0 1;
-fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */
-fx-spacing: 0.333em; /* 4 */
-fx-alignment: TOP_LEFT;
}
.tool-bar { /* top */
TOP-COLOR: ladder(
-fx-base,
derive(-fx-base,0%) 0%,
derive(-fx-base,46%) 100%
);
-fx-background-color:
linear-gradient(to bottom, derive(TOP-COLOR,25%) 0%, -fx-outer-border 90%),
linear-gradient(to bottom, TOP-COLOR 2%, derive(-fx-base,-2.1%) 95%);
-fx-background-insets: 0 0 0 0, 1 0 1 0;
-fx-padding: 0.416667em 0.5em 0.416667em 0.5em; /* 5 6 5 6 */
-fx-spacing: 0.333em; /* 4 */
-fx-alignment: CENTER_LEFT;
}
.tool-bar:vertical.right {
-fx-background-insets: 0, 0 1 0 0;
}
.tool-bar.bottom {
-fx-background-color:
-fx-outer-border,
derive(TOP-COLOR,25%),
linear-gradient(to bottom, TOP-COLOR 2%, derive(-fx-base,-2.1%) 95%);
-fx-background-insets: 0, 1 0 0 0, 2 0 0 0;
}
.tool-bar > .container > .separator {
-fx-orientation: vertical;
}
.tool-bar:vertical > .container > .separator {
-fx-orientation: horizontal;
}
.tool-bar-overflow-button {
-fx-padding: 0 0.75em 0 0 ;
}
.tool-bar:vertical > .tool-bar-overflow-button {
-fx-padding: 0 0 0.75em 0 ;
}
.tool-bar-overflow-button > .arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.666667em 0.916667em 0em 0em; /* 8 11 0 0 */
-fx-shape: "M337.273,297.622l-0.016,1.069l2.724,2.639l-2.723,2.628l0.015,1.048h0.881l3.81-3.685l-3.788-3.699H337.273z M343.783,297.622h-0.902l-0.015,1.069l2.724,2.639l-2.724,2.628l0.015,1.048h0.882l3.809-3.685L343.783,297.622z" ;
}
.tool-bar-overflow-button:focused > .arrow {
-fx-background-color: -fx-mark-highlight-color, derive(-fx-accent, -15%);
-fx-background-insets: 1 0 -1 0, 0;
}
.tool-bar-overflow-button:hover > .arrow {
-fx-background-color: -fx-mark-highlight-color, derive(-fx-hover-base, -35%);
-fx-background-insets: 1 0 -1 0, 0;
}
/*******************************************************************************
* *
* Slider *
* *
******************************************************************************/
.slider .thumb {
-fx-background-color:
linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
-fx-inner-border,
-fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 1.0em; /* makes sure this remains circular */
-fx-padding: 0.583333em; /* 7 */
-fx-effect: dropshadow(two-pass-box , rgba(0, 0, 0, 0.1), 5, 0.0 , 0, 2);
}
.slider:focused .thumb {
-fx-background-radius: 1.0em; /* makes sure this remains circular */
}
.slider .track {
-fx-background-color:
-fx-shadow-highlight-color,
linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
linear-gradient(to bottom,
derive(-fx-control-inner-background, -9%),
derive(-fx-control-inner-background, 0%),
derive(-fx-control-inner-background, -5%),
derive(-fx-control-inner-background, -12%)
);
-fx-background-insets: 0 0 -1 0, 0, 1;
-fx-background-radius: 0.25em, 0.25em, 0.166667em; /* 3 3 2 */
-fx-padding: 0.25em; /* 3 */
}
.slider:vertical .track {
-fx-background-color:
-fx-shadow-highlight-color,
-fx-text-box-border,
linear-gradient(to right,
derive(-fx-control-inner-background, -9%),
-fx-control-inner-background,
derive(-fx-control-inner-background, -9%)
);
}
.slider .axis {
-fx-tick-label-fill: derive(-fx-text-background-color, 30%);
-fx-tick-length: 5px;
-fx-minor-tick-length: 3px;
-fx-border-color: null;
}
/*******************************************************************************
* *
* ScrollBar *
* *
******************************************************************************/
.scroll-bar:horizontal {
-fx-background-color: derive(-fx-box-border,30%), linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
-fx-background-insets: 0, 1 0 1 0;
}
.scroll-bar:vertical {
-fx-background-color: derive(-fx-box-border,30%), linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
-fx-background-insets: 0, 0 1 0 1;
}
.scroll-bar:focused {
-fx-background-color:
-fx-focus-color,
linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%)),
-fx-faint-focus-color,
linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
-fx-background-insets: -0.2, 1, -1.4, 2.6;
}
.scroll-bar:vertical:focused {
-fx-background-color:
-fx-focus-color,
linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%)),
-fx-faint-focus-color,
linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
}
.scroll-bar > .thumb {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
/*-fx-background-insets: 1, 2, 3;*/
-fx-background-insets: 2, 3, 4;
/*-fx-background-radius: 0.416667em, 0.333333em, 0.25em; *//* 5, 4,3 */
-fx-background-radius: 3, 2, 1;
}
.scroll-bar:vertical > .thumb {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color-to-right;
}
.scroll-bar > .increment-button,
.scroll-bar > .decrement-button {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-color: transparent;
-fx-padding: 0.25em; /* 3px */
}
.scroll-bar:horizontal > .increment-button,
.scroll-bar:horizontal > .decrement-button {
-fx-background-insets: 2 1 2 1, 3 2 3 2, 4 3 4 3;
}
.scroll-bar:vertical > .increment-button,
.scroll-bar:vertical > .decrement-button {
-fx-background-insets: 1 2 1 2, 2 3 2 3, 3 4 3 4;
}
.scroll-bar > .increment-button > .increment-arrow,
.scroll-bar > .decrement-button > .decrement-arrow {
-fx-background-color: -fx-mark-highlight-color,derive(-fx-base,-45%);
}
.scroll-bar > .increment-button:hover > .increment-arrow,
.scroll-bar > .decrement-button:hover > .decrement-arrow {
-fx-background-color: -fx-mark-highlight-color,derive(-fx-base,-50%);
}
.scroll-bar > .increment-button:pressed > .increment-arrow,
.scroll-bar > .decrement-button:pressed > .decrement-arrow {
-fx-background-color: -fx-mark-highlight-color,derive(-fx-base,-55%);
}
.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
-fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */
-fx-shape: "M5.997,5.072L5.995,6.501l-2.998-4l2.998-4l0.002,1.43l-1.976,2.57L5.997,5.072z";
-fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
/*-fx-background-insets: 2 0 -2 0, 0;*/
}
.scroll-bar:horizontal > .increment-button > .increment-arrow {
-fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */
-fx-shape: "M2.998-0.07L3-1.499l2.998,4L3,6.501l-0.002-1.43l1.976-2.57L2.998-0.07z";
-fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
/*-fx-background-insets: 2 0 -2 0, 0;*/
}
.scroll-bar:vertical > .decrement-button > .decrement-arrow {
-fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */
-fx-shape: "M1.929,4L0.5,3.998L4.5,1l4,2.998L7.07,4L4.5,2.024L1.929,4z";
-fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
/*-fx-background-insets: 2 0 -2 0, 0;*/
}
.scroll-bar:vertical > .increment-button > .increment-arrow {
-fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */
-fx-shape: "M7.071,1L8.5,1.002L4.5,4l-4-2.998L1.93,1L4.5,2.976L7.071,1z";
-fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
/*-fx-background-insets: 2 0 -2 0, 0;*/
}
/*******************************************************************************
* *
* ScrollPane *
* *
******************************************************************************/
.scroll-pane > .viewport {
-fx-background-color: -fx-background;
}
.scroll-pane > .scroll-bar:horizontal {
-fx-background-insets: 0 1 1 1, 1;
-fx-padding: 0 1 0 1;
}
.scroll-pane > .scroll-bar:horizontal > .increment-button,
.scroll-pane > .scroll-bar:horizontal > .decrement-button {
-fx-padding: 0.166667em 0.25em 0.25em 0.25em; /* 2 3 3 3 */
}
.scroll-pane > .scroll-bar:vertical > .increment-button,
.scroll-pane > .scroll-bar:vertical > .decrement-button {
-fx-padding: 0.25em 0.25em 0.25em 0.166667em; /* 3 3 3 2 */
}
.scroll-pane > .scroll-bar:vertical {
-fx-background-insets: 1 1 1 0, 1;
-fx-padding: 1 0 1 0;
}
.scroll-pane > .corner {
-fx-background-color: derive(-fx-base,-1%);
-fx-background-insets: 0 1 1 0;
}
/* new styleclass for edge to edge scrollpanes that don't want to draw a border */
.scroll-pane.edge-to-edge,
.tab-pane > * > .scroll-pane {
-fx-background-color: -fx-background;
-fx-background-insets: 0;
-fx-padding: 0;
}
.scroll-pane.edge-to-edge > .scroll-bar,
.tab-pane > * > .scroll-pane > .scroll-bar,
.titled-pane > .content > .scroll-pane > .scroll-bar {
-fx-background-insets: 0;
-fx-padding: 0;
}
.scroll-pane.edge-to-edge > .scroll-bar > .increment-button,
.scroll-pane.edge-to-edge > .scroll-bar > .decrement-button,
.tab-pane > * > .scroll-pane > .scroll-bar > .increment-button,
.tab-pane > * > .scroll-pane > .scroll-bar > .decrement-button,
.titled-pane > .content > .scroll-pane > .scroll-bar > .increment-button,
.titled-pane > .content > .scroll-pane > .scroll-bar > .decrement-button {
-fx-padding: 0.25em; /* 3px */
}
/*******************************************************************************
* *
* Separator *
* *
******************************************************************************/
.separator:horizontal .line {
-fx-border-color: -fx-text-box-border transparent transparent transparent,
-fx-shadow-highlight-color transparent transparent transparent;
-fx-border-insets: 0, 1 0 0 0;
}
.separator:vertical .line {
-fx-border-color: transparent transparent transparent -fx-shadow-highlight-color,
transparent transparent transparent -fx-text-box-border;
-fx-border-width: 3, 1;
-fx-border-insets: 0, 0 0 0 1;
}
/*******************************************************************************
* *
* ProgressBar *
* *
******************************************************************************/
.progress-bar {
-fx-indeterminate-bar-length: 60;
-fx-indeterminate-bar-escape: true;
-fx-indeterminate-bar-flip: true;
-fx-indeterminate-bar-animation-time: 2;
}
.progress-bar > .bar {
-fx-background-color: linear-gradient(to bottom, derive(-fx-accent, -7%), derive(-fx-accent, 0%), derive(-fx-accent, -3%), derive(-fx-accent, -9%) );
-fx-background-insets: 3 3 4 3;
/*-fx-background-radius: 0.583em; *//* 7 */
-fx-background-radius: 2;
-fx-padding: 0.75em;
}
.progress-bar:indeterminate > .bar {
-fx-background-color: linear-gradient(to left, transparent, -fx-accent);
}
.progress-bar > .track {
-fx-background-color:
-fx-shadow-highlight-color,
linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
linear-gradient(to bottom,
derive(-fx-control-inner-background, -7%),
derive(-fx-control-inner-background, 0%),
derive(-fx-control-inner-background, -3%),
derive(-fx-control-inner-background, -9%)
);
-fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
-fx-background-radius: 4, 3, 2; /* 10, 9, 8 */
}
/*******************************************************************************
* *
* ProgressIndicator *
* *
******************************************************************************/
.progress-indicator {
-fx-indeterminate-segment-count: 12;
-fx-spin-enabled: true;
}
.progress-indicator > .determinate-indicator > .indicator {
-fx-background-color: -fx-box-border,
radial-gradient(center 50% 50%, radius 50%, -fx-control-inner-background 70%, derive(-fx-control-inner-background, -9%) 100%),
-fx-control-inner-background;
-fx-background-insets: 0, 1, 5 2 1 2;
-fx-padding: 0.166667em; /* 2px */
}
.progress-indicator > .determinate-indicator > .progress {
-fx-background-color: -fx-accent;
-fx-padding: 0.083333em; /* 1px */
}
.progress-indicator > .determinate-indicator > .tick {
-fx-background-color: white;
-fx-background-insets: 0;
-fx-padding: 0.666667em; /* 8 */
-fx-shape: "M-0.25,6.083c0.843-0.758,4.583,4.833,5.75,4.833S14.5-1.5,15.917-0.917c1.292,0.532-8.75,17.083-10.5,17.083C3,16.167-1.083,6.833-0.25,6.083z";
}
.progress-indicator > .determinate-indicator > .percentage {
-fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
-fx-fill: -fx-text-background-color;
}
.progress-indicator:indeterminate > .spinner {
/** Applying to undo styling from .spinner, reported in RT-37965 */
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-background-radius: 0;
}
.progress-indicator:indeterminate .segment {
-fx-background-color: -fx-accent;
}
.progress-indicator:indeterminate .segment0 {
-fx-shape:"M41.98 14.74 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment1 {
-fx-shape:"M33.75 6.51 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment2 {
-fx-shape:"M22.49 3.5 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment3 {
-fx-shape:"M11.24 6.51 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment4 {
-fx-shape:"M3.01 14.74 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment5 {
-fx-shape:"M0.0 26.0 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment6 {
-fx-shape:"M3.01 37.25 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment7 {
-fx-shape:"M11.25 45.48 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment8 {
-fx-shape:"M22.5 48.5 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment9 {
-fx-shape:"M33.75 45.48 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment10 {
-fx-shape:"M41.98 37.25 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment11 {
-fx-shape:"M45.0 26.0 a3.5,3.5 0 1,1 0,1 Z";
}
/*******************************************************************************
* *
* Text COMMON *
* *
******************************************************************************/
.text-input {
-fx-text-fill: -fx-text-inner-color;
-fx-highlight-fill: derive(-fx-control-inner-background,-20%);
-fx-highlight-text-fill: -fx-text-inner-color;
-fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 0, 1;
-fx-background-radius: 3, 2;
-fx-cursor: text;
-fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
}
.text-input:focused {
-fx-highlight-fill: -fx-accent;
-fx-highlight-text-fill: white;
-fx-background-color:
-fx-focus-color,
-fx-control-inner-background,
-fx-faint-focus-color,
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: -0.2, 1, -1.4, 3;
-fx-background-radius: 3, 2, 4, 0;
-fx-prompt-text-fill: transparent;
}
/*******************************************************************************
* *
* TextArea *
* *
******************************************************************************/
.text-area {
-fx-padding: 0;
-fx-cursor: default;
-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
derive(-fx-base,-1%);
}
.text-area > .scroll-pane {
-fx-background-color: null;
}
.text-area > .scroll-pane > .scroll-bar:horizontal {
-fx-background-radius: 0 0 2 2;
}
.text-area > .scroll-pane > .scroll-bar:vertical {
-fx-background-radius: 0 2 2 0;
}
.text-area > .scroll-pane > .corner {
-fx-background-radius: 0 0 2 0;
}
.text-area .content {
/*the is 1px less top and bottom than TextInput because of scrollpane border */
-fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
-fx-cursor: text;
-fx-background-color:
linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
-fx-background-radius: 2;
}
.text-area:focused .content {
-fx-background-color:
-fx-control-inner-background,
-fx-faint-focus-color,
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 0, 0, 2;
-fx-background-radius: 2, 1, 0;
}
/*******************************************************************************
* *
* HTML Editor *
* *
******************************************************************************/
.html-editor-foreground {
-fx-color-label-visible: false;
-fx-color-rect-x: 1;
-fx-color-rect-y: 1;
-fx-color-rect-width: 4;
-fx-color-rect-height: 3;
-fx-graphic: url("HTMLEditor-Text-Color.png");
}
.html-editor-background {
-fx-color-label-visible: false;
-fx-color-rect-x: 1;
-fx-color-rect-y: 1;
-fx-color-rect-width: 4;
-fx-color-rect-height: 3;
-fx-graphic: url("HTMLEditor-Background-Color.png");
}
.color-picker.html-editor-foreground > .color-picker-label > .picker-color > .picker-color-rect,
.color-picker.html-editor-background > .color-picker-label > .picker-color > .picker-color-rect {
-fx-stroke: null;
}
.html-editor .button ,
.html-editor .toggle-button {
-fx-padding: 0.333333em 0.416667em 0.333333em 0.416667em; /* 4 5 4 5 */
}
.html-editor-cut {
-fx-graphic: url("HTMLEditor-Cut.png");
}
.html-editor-copy {
-fx-graphic: url("HTMLEditor-Copy.png");
}
.html-editor-paste {
-fx-graphic: url("HTMLEditor-Paste.png");
}
.html-editor-align-left {
-fx-graphic: url("HTMLEditor-Left.png");
}
.html-editor-align-center {
-fx-graphic: url("HTMLEditor-Center.png");
}
.html-editor-align-right {
-fx-graphic: url("HTMLEditor-Right.png");
}
.html-editor-align-justify {
-fx-graphic: url("HTMLEditor-Justify.png");
}
.html-editor-outdent {
-fx-graphic: url("HTMLEditor-Outdent.png");
}
.html-editor-outdent:dir(rtl) {
-fx-graphic: url("HTMLEditor-Outdent-rtl.png");
}
.html-editor-indent {
-fx-graphic: url("HTMLEditor-Indent.png");
}
.html-editor-indent:dir(rtl) {
-fx-graphic: url("HTMLEditor-Indent-rtl.png");
}
.html-editor-bullets {
-fx-graphic: url("HTMLEditor-Bullets.png");
}
.html-editor-bullets:dir(rtl) {
-fx-graphic: url("HTMLEditor-Bullets-rtl.png");
}
.html-editor-numbers {
-fx-graphic: url("HTMLEditor-Numbered.png");
}
.html-editor-numbers:dir(rtl) {
-fx-graphic: url("HTMLEditor-Numbered-rtl.png");
}
.html-editor-bold {
-fx-graphic: url("HTMLEditor-Bold.png");
}
.html-editor-italic {
-fx-graphic: url("HTMLEditor-Italic.png");
}
.html-editor-underline {
-fx-graphic: url("HTMLEditor-Underline.png");
}
.html-editor-strike {
-fx-graphic: url("HTMLEditor-Strikethrough.png");
}
.html-editor-hr {
-fx-graphic: url("HTMLEditor-Break.png");
}
/*******************************************************************************
* *
* PopupMenu *
* *
******************************************************************************/
.context-menu {
-fx-background-color:
linear-gradient(to bottom,
derive(-fx-color,-17%),
derive(-fx-color,-30%)
),
-fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-padding: 0.333333em 0.083333em 0.333333em 0.083333em; /* 4 1 8 1 */
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
}
.context-menu .separator:horizontal .line {
-fx-border-color: -fx-box-border transparent transparent transparent;
-fx-border-insets: 1 0 0 0;
}
.context-menu > .scroll-arrow {
-fx-padding: 0.416667em 0.416667em 0.416667em 0.416667em; /* 5 */
-fx-background-color: transparent;
}
.context-menu > .scroll-arrow:hover {
-fx-background: -fx-selection-bar;
-fx-background-color: -fx-background;
-fx-text-fill: -fx-text-background-color;
}
/*******************************************************************************
* *
* Menu *
* *
******************************************************************************/
.menu {
-fx-background-color: transparent;
-fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
}
.menu > .right-container > .arrow {
-fx-padding: 0.458em 0.167em 0.458em 0.167em; /* 4.5 2 4.5 2 */
-fx-background-color: -fx-mark-color;
-fx-shape: "M0,-4L4,0L0,4Z";
-fx-scale-shape: false;
}
.menu:focused > .right-container > .arrow {
-fx-background-color: -fx-focused-mark-color;
}
.menu-up-arrow {
-fx-padding: 0.666667em 0.416667em 0.0em 0.416667em; /* 8 5 0 5 */
-fx-background-color: derive(-fx-color,-2%);
-fx-shape: "M0 1 L1 1 L.5 0 Z";
-fx-effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );
}
.menu-down-arrow {
-fx-background-color: derive(-fx-color,-2%);
-fx-padding: 0.666667em 0.416667em 0.0em 0.416667em; /* 8 5 0 5 */
-fx-shape: "M0 0 L1 0 L.5 1 Z";
-fx-effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );
}
/*******************************************************************************
* *
* MenuBar *
* *
******************************************************************************/
.menu-bar {
-fx-padding: 0.0em 0.666667em 0.0em 0.666667em; /* 0 8 0 8 */
-fx-spacing: 0.166667em; /* 2 */
-fx-background-color:
linear-gradient(to bottom, derive(-fx-base,75%) 0%, -fx-outer-border 90%),
linear-gradient(to bottom, derive(-fx-base,46.9%) 2%, derive(-fx-base,-2.1%) 95%);
-fx-background-insets: 0 0 0 0, 1 0 1 0;
-fx-background-radius: 0, 0 ;
}
/* Show nothing for background of normal menu button in a menu bar */
.menu-bar > .container > .menu-button {
-fx-background-radius: 0;
-fx-background-color: transparent;
-fx-background-insets: 0;
}
/* Change padding of menu buttons when in menu bar */
.menu-bar > .container > .menu-button > .label {
-fx-padding: 0;
}
/* Hide the down arrow for a menu placed in a menubar */
.menu-bar > .container > .menu-button > .arrow-button > .arrow {
-fx-padding: 0.167em 0 0.250em 0; /* 2 0 3 0 */
-fx-background-color: transparent;
-fx-shape: null;
}
.menu-bar > .container > .menu > .arrow-button {
-fx-padding: 0.500em 0 0.500em 0; /* 6 0 6 0 */
}
.menu-bar > .container > .menu-button:hover,
.menu-bar > .container > .menu-button:focused,
.menu-bar > .container > .menu-button:showing {
-fx-background: -fx-selection-bar;
-fx-background-color: -fx-background;
}
.menu-bar > .container > .menu-button:hover > .label,
.menu-bar > .container > .menu-button:focused > .label,
.menu-bar > .container > .menu-button:showing > .label {
-fx-text-fill: -fx-text-background-color;
}
/*******************************************************************************
* *
* MenuItem *
* *
******************************************************************************/
.menu-item {
-fx-background-color: transparent;
-fx-padding: 0.333333em 0.41777em 0.333333em 0.41777em; /* 4 5 4 5 */
}
.menu-item > .left-container {
-fx-padding: 0.458em 0.791em 0.458em 0.458em;
}
.menu-item > .graphic-container {
-fx-padding: 0em 0.333em 0em 0em;
}
.menu-item >.label {
-fx-padding: 0em 0.5em 0em 0em;
-fx-text-fill: -fx-text-base-color;
}
.menu-item:focused {
-fx-background: -fx-selection-bar;
-fx-background-color: -fx-background;
-fx-text-fill: -fx-text-background-color;
}
.menu-item:focused > .label {
-fx-text-fill: -fx-focused-text-base-color;
}
.menu-item > .right-container {
-fx-padding: 0em 0em 0em 0.5em;
}
.radio-menu-item:checked > .left-container > .radio {
-fx-background-color: -fx-mark-color;
-fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
-fx-scale-shape: false;
}
.radio-menu-item:focused:checked > .left-container > .radio {
-fx-background-color: -fx-focused-mark-color;
}
.check-menu-item:checked > .left-container > .check {
-fx-background-color: -fx-mark-color;
-fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
-fx-scale-shape: false;
}
.check-menu-item:focused:checked > .left-container > .check {
-fx-background-color: -fx-focused-mark-color;
}
/*******************************************************************************
* *
* ChoiceBox *
* *
******************************************************************************/
/*.choice-box > .open-button > .arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; 2 3.5 2 3.5
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}*/
.choice-box > .context-menu {
-fx-background-radius: 6, 5, 4;
}
/*******************************************************************************
* *
* TabPane *
* *
******************************************************************************/
.tab-pane {
-fx-tab-min-height: 1.8333em; /* 22 */
-fx-tab-max-height: 1.8333em; /* 22 */
}
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: -fx-text-base-color;
}
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-background-insets: 0 1 1 0, 1 2 1 1, 2 3 1 2;
-fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
-fx-padding: 0.083333em 0.5em 0.0769em 0.5em; /* 1 6 0.99 6 */
}
.tab-pane > .tab-header-area > .headers-region > .tab:top {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
}
.tab-pane > .tab-header-area > .headers-region > .tab:right {
-fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
}
.tab-pane > .tab-header-area > .headers-region > .tab:bottom {
-fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
}
.tab-pane > .tab-header-area > .headers-region > .tab:left {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
}
.tab-pane > .tab-header-area > .headers-region > .tab:hover {
-fx-color: -fx-hover-base;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-background;
-fx-background-insets: 0 1 1 0, 1 2 0 1, 2 3 0 2;
}
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-border-width: 1, 1;
-fx-border-color: -fx-focus-color, -fx-faint-focus-color;
-fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
-fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
}
.tab-pane:focused > .tab-header-area > .headers-region > .tab:bottom:selected .focus-indicator {
-fx-border-insets: -6 -5 -4 -4, -5 -3 -2 -2;
}
.tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover {
-fx-color: -fx-base;
}
.tab-pane > .tab-header-area > .tab-header-background {
/* TODO should not be using text-box-border I think? */
-fx-background-color:
-fx-outer-border,
-fx-text-box-border,
linear-gradient(from 0px 0px to 0px 5px, -fx-text-box-border, derive(-fx-text-box-border, 30%));
}
.tab-pane:top > .tab-header-area > .tab-header-background {
-fx-background-insets: 0, 0 0 1 0, 1;
}
.tab-pane:bottom > .tab-header-area > .tab-header-background {
-fx-background-insets: 0, 1 0 0 0, 1;
}
.tab-pane:left > .tab-header-area > .tab-header-background {
-fx-background-insets: 0, 0 1 0 0, 1;
}
.tab-pane:right > .tab-header-area > .tab-header-background {
-fx-background-insets: 0, 0 0 0 1, 1;
}
.tab-pane:top > .tab-header-area {
/*-fx-padding: 0.416667em 0.166667em 0.0em 0.416667em; *//* 5 2 0 5 */
-fx-padding: 0.416667em 5 0.0em 0.416667em; /* 5 2 0 5 */
}
.tab-pane:bottom > .tab-header-area {
-fx-padding: 0 0.166667em 0.416667em 0.416667em; /* 0 2 5 5 */
}
.tab-pane:left > .tab-header-area {
-fx-padding: 0.416667em 0.0em 0.166667em 0.416667em; /* 5 0 2 5 */
}
.tab-pane:right > .tab-header-area {
-fx-padding: 0.416667em 0.416667em 0.166667em 0.0em; /* 5 5 2 0 */
}
/* TODO: scaling the shape seems to make it way too large */
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button {
-fx-background-color: -fx-mark-color;
-fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
-fx-scale-shape: false;
-fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
}
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button:hover {
-fx-background-color: derive(-fx-mark-color, -30%);
}
/* CONTROL BUTTONS */
.tab-pane > .tab-header-area > .control-buttons-tab > .container {
-fx-padding: 3 0 0 0;
}
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: -1 0 5 0, 0 1 6 1, 1 2 7 2;
-fx-padding: 4 4 9 4;
-fx-background-radius: 10;
}
.tab-pane:bottom > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
-fx-padding: -5 4 4 4; /* TODO convert to ems */
}
/* FLOATING TABS CUSTOMISATION */
.tab-pane.floating > .tab-header-area > .tab-header-background {
-fx-background-color: null;
}
.tab-pane.floating > .tab-header-area {
-fx-background-color: null;
}
.tab-pane.floating > .tab-content-area {
-fx-background-color: -fx-outer-border, -fx-background;
-fx-background-insets: 0, 1;
-fx-background-radius: 2, 0;
-fx-padding: 2;
}
/*******************************************************************************
* *
* ComboBox *
* *
******************************************************************************/
/* Customise the ListCell that appears in the ComboBox button itself */
.combo-box > .list-cell {
-fx-background: transparent;
-fx-background-color: transparent;
-fx-text-fill: -fx-text-base-color;
-fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
}
.combo-box-base > .arrow-button {
-fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
-fx-padding: 0.5em 0.667em 0.5em 0.833333em; /* 6 8 6 10 */
-fx-background-color: transparent;
}
/*******************************************************************************
* *
* Editable ComboBox *
* *
* The editable ComboBox TextBox inherits its properties from the TextBox *
* Control. Only the properties with values that are different from the *
* TextBox are specified here. *
* *
******************************************************************************/
.combo-box-base:editable > .arrow-button,
.date-picker > .arrow-button {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 1 1 1 0, 1, 2;
-fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
}
.combo-box-base:editable > .text-field,
.date-picker > .text-field {
-fx-background-color:
linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 1 0 1 1;
-fx-background-radius: 2 0 0 2;
}
.combo-box-base:editable:focused,
.date-picker:focused {
-fx-background-color: -fx-focus-color;
-fx-background-insets: -0.2;
-fx-background-radius: 3;
}
.combo-box-base:editable:focused > .text-field,
.combo-box-base:editable > .text-field:focused,
.date-picker:focused > .text-field,
.date-picker > .text-field:focused {
-fx-background-color:
-fx-control-inner-background,
-fx-faint-focus-color,
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 1 0 1 1, 1 0 1 1, 3 2 3 3;
-fx-background-radius: 2 0 0 2, 1 0 0 1, 0;
}
.combo-box-base:editable:focused > .arrow-button,
.date-picker:focused > .arrow-button {
-fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
-fx-background-insets: 1, 2, 1, 2.6;
-fx-background-radius: 0 2 2 0, 0 1 1 0, 0 1 1 0, 0 1 1 0;
}
/* -------------- STYLES FOR THE DEFAULT LISTVIEW-BASED COMBOBOX ------------- */
.combo-box-popup > .list-view {
-fx-background-color:
linear-gradient(to bottom,
derive(-fx-color,-17%),
derive(-fx-color,-30%)
),
-fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
-fx-padding: 4 0 4 5;
/* No alternate highlighting */
-fx-background: -fx-control-inner-background;
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover {
-fx-background: -fx-accent;
-fx-background-color: -fx-selection-bar;
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
-fx-background: -fx-accent;
-fx-background-color: -fx-background, -fx-cell-focus-inner-border, -fx-background;
-fx-background-insets: 0, 1, 2;
}
.combo-box-popup > .list-view > .placeholder > .label {
-fx-text-fill: derive(-fx-control-inner-background,-30%);
}
/*******************************************************************************
* *
* TitledPane *
* *
******************************************************************************/
.titled-pane {
-fx-text-fill: -fx-text-base-color;
}
.titled-pane:focused {
-fx-color: -fx-base;
}
.titled-pane > .title {
-fx-background-color:
linear-gradient(to bottom,
derive(-fx-color,-15%) 95%,
derive(-fx-color,-25%) 100%
),
-fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
-fx-padding: 0.3333em 0.75em 0.3333em 0.75em; /* 4 9 4 9 */
}
/* alternative focus using the ring around the entire title area */
/*.titled-pane:focused > .title {
-fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 0.7, 2, 3;
}*/
/* focus purely on the arrow */
.titled-pane:focused > .title > .arrow-button > .arrow {
-fx-background-color: -fx-focus-color, -fx-mark-color;
-fx-background-insets: -1, 0;
-fx-effect: dropshadow(two-pass-box , -fx-focus-color, 5, 0.2 , 0, 0);
}
.titled-pane > .title > .arrow-button {
-fx-background-color: null;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-padding: 0.0em 0.583em 0.0em 0.0em; /* 0 7 0 0 */
}
.titled-pane > .title > .arrow-button > .arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
.titled-pane > .title:hover {
-fx-color: -fx-hover-base;
}
/* alternative content using a border and a grad to transparent background - why should TitledPane content have a colour? */
.titled-pane > *.content {
-fx-border-color: -fx-box-border;
-fx-border-insets: -1 0 0 0;
-fx-background-color: linear-gradient(from 0px 0px to 0px 5px, derive(-fx-background, -6%), -fx-background);
}
/*******************************************************************************
* *
* Accordion *
* *
******************************************************************************/
.accordion > .titled-pane > .title {
-fx-background-color:
linear-gradient(to bottom,
derive(-fx-color,-15%) 95%,
derive(-fx-color,-25%) 100%
),
-fx-inner-border,
-fx-body-color;
-fx-background-insets: -1 0 0 0, 0 1 1 1, 1 2 2 2;
-fx-background-radius: 0, 0, 0;
}
.accordion > .first-titled-pane > .title {
-fx-background-insets: 0, 1, 2;
}
/*******************************************************************************
* *
* SplitPane *
* *
******************************************************************************/
.split-pane > .split-pane-divider {
-fx-padding: 0 0.25em 0 0.25em; /* 0 3 0 3 */
}
/* horizontal the two nodes are placed to the left/right of each other. */
.split-pane:horizontal > .split-pane-divider {
-fx-background-color: -fx-box-border, -fx-inner-border-horizontal;
-fx-background-insets: 0, 0 1 0 1;
}
/* vertical the two nodes are placed on top of each other. */
.split-pane:vertical > .split-pane-divider {
-fx-background-color: -fx-box-border, -fx-inner-border;
-fx-background-insets: 0, 1 0 1 0;
}
/*******************************************************************************
* *
* ColorPicker *
* *
******************************************************************************/
.color-picker > .arrow-button {
-fx-background-color: null;
-fx-padding: 0.5em 0.667em 0.5em 0; /* 6 8 6 0 */
}
.color-picker.split-button > .arrow-button {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 1 1 1 0, 1, 2;
-fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
}
.color-picker.split-button:focused > .arrow-button {
/*-fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color !important;*/
/*-fx-background-insets: 0, 1, 2;*/
-fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
-fx-background-insets: 1 1 1 0, 1, 2, 1, 2.6;
-fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0, 0 1 1 0, 0 1 1 0;
}
.color-picker.split-button > .color-picker-label,
.color-picker.split-button:focused > .color-picker-label{
-fx-background-color: null;
}
.color-picker.split-button > .arrow-button {
/*-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color !important;*/
-fx-padding: 0.5em 0.667em 0.5em 0.667em; /* 6 8 6 8 */
}
.color-picker > .color-picker-label > .picker-color > .picker-color-rect {
-fx-stroke: -fx-box-border;
}
.color-palette {
-fx-spacing: 0.833333em; /* 10px */
-fx-background-color:
linear-gradient(to bottom,
derive(-fx-color,-17%),
derive(-fx-color,-30%)
),
linear-gradient(to bottom,
derive(-fx-background,10%) 0%,
derive(-fx-background,-5%) 12%,
derive(-fx-background,15%) 88%,
derive(-fx-background,-10%) 100%);
-fx-background-insets: 0, 1;
-fx-background-radius: 6, 5;
-fx-padding: 1em; /* 12 */
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
}
.color-palette > .color-picker-grid {
-fx-padding: 0.5px;
-fx-snap-to-pixel: false;
}
.color-palette > .color-picker-grid > .color-square {
-fx-background-color: transparent;
-fx-padding: 0.5px;
}
/* the color over which the user is hovering */
.color-palette-region > .color-square.hover-square {
-fx-background-color: -fx-faint-focus-color, white;
-fx-background-insets: -3,-1;
-fx-background-radius: 5,0;
-fx-scale-x: 1.5;
-fx-scale-y: 1.5;
-fx-border-color: -fx-focus-color;
-fx-border-insets: -1, -1;
}
/* ------- CUSTOM COLOR DIALOG ------- */
.custom-color-dialog > .color-rect-pane {
-fx-spacing: 0.75em;
-fx-pref-height: 16.666667em;
-fx-alignment: top-left;
-fx-fill-height: true;
}
.custom-color-dialog .color-rect-pane .color-rect {
-fx-min-width: 16.666667em;
-fx-min-height: 16.666667em;
}
.custom-color-dialog .color-rect-pane .color-rect-border {
-fx-border-color: derive(-fx-base, -20%);
}
.custom-color-dialog > .color-rect-pane #color-rect-indicator {
-fx-background-color: null;
-fx-border-color: white;
-fx-border-radius: 0.4166667em;
-fx-translate-x: -0.4166667em;
-fx-translate-y: -0.4166667em;
-fx-pref-width: 0.833333em;
-fx-pref-height: 0.833333em;
-fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1);
}
.custom-color-dialog > .color-rect-pane > .color-bar {
-fx-min-width: 1.666667em;
-fx-min-height: 16.666667em;
-fx-max-width: 1.666667em;
-fx-border-color: derive(-fx-base, -20%);
}
.custom-color-dialog > .color-rect-pane > .color-bar > #color-bar-indicator {
-fx-border-radius: 0.333333em;
-fx-border-color: white;
-fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1);
-fx-pref-width: 2em;
-fx-pref-height: 0.833333em;
-fx-translate-x: -0.1666667em;
-fx-translate-y: -0.4166667em;
}
.custom-color-dialog {
-fx-background-color: -fx-background;
-fx-padding: 1.25em;
-fx-spacing: 1.25em;
}
.custom-color-dialog .controls-pane .current-new-color-grid #current-new-color-border {
-fx-border-color: derive(-fx-base, -20%);
-fx-border-width: 2px;
}
.custom-color-dialog .controls-pane .current-new-color-grid .color-rect {
-fx-min-width: 10.666667em;
-fx-min-height: 1.75em;
-fx-pref-width: 10.666667em;
-fx-pref-height: 1.75em;
}
.custom-color-dialog .transparent-pattern {
-fx-background-image: url("pattern-transparent.png");
-fx-background-repeat: repeat;
-fx-background-size: auto;
}
.custom-color-dialog .controls-pane #spacer1 {
-fx-min-height: 0.1666667em;
-fx-max-height: 0.1666667em;
-fx-pref-height: 0.1666667em;
}
.custom-color-dialog .controls-pane #spacer2 {
-fx-min-height: 1em;
-fx-max-height: 1em;
-fx-pref-height: 1em;
}
.custom-color-dialog .controls-pane #settings-pane {
-fx-hgap: 0.4166667em;
-fx-vgap: 0.3333333em;
}
.custom-color-dialog .controls-pane #settings-pane .settings-label {
-fx-min-width: 5.75em;
}
.custom-color-dialog .controls-pane #settings-pane .settings-unit {
-fx-max-width: 1.5em;
-fx-min-width: 1.5em;
-fx-pref-width: 1.5em;
}
.custom-color-dialog .controls-pane #settings-pane .slider {
-fx-pref-width: 8.25em;
}
.custom-color-dialog .controls-pane .color-input-field {
-fx-pref-column-count: 3;
-fx-max-width: 3.25em;
-fx-min-width: 3.25em;
-fx-pref-width: 3.25em;
}
.custom-color-dialog .controls-pane .web-field {
-fx-pref-column-count: 6;
-fx-pref-width: 8.25em;
}
.custom-color-dialog .controls-pane #spacer-side {
-fx-min-width: 0.5em;
-fx-pref-width: 0.5em;
}
.custom-color-dialog .controls-pane #spacer-bottom {
-fx-pref-height: 0.833333em;
-fx-min-height: 0.833333em;
}
.custom-color-dialog .controls-pane .customcolor-controls-background {
-fx-background-color: -fx-text-box-border, -fx-control-inner-background;
-fx-background-insets:
0.8333333em 0 0.4166667em 0,
1em 0.166667em 0.5833333em 0.166667em;
-fx-background-radius: 0.3333333em, 0.166667em;
}
.custom-color-dialog .controls-pane .current-new-color-grid .label {
-fx-padding: 0 0 0 0.4166667em;
}
.custom-color-dialog .controls-pane #buttons-hbox {
-fx-spacing: 0.333333em;
-fx-padding: 1em 0 0 0;
-fx-alignment: bottom-right;
}
/* The fix for RT-37494 forces the web color text's major direction to
* LTR. The following keeps the text right-aligned when in RTL mode. */
.custom-color-dialog .webcolor-field:dir(rtl) > .text-field:dir(ltr) {
-fx-alignment: baseline-right;
}
/*******************************************************************************
* *
* Pagination *
* *
******************************************************************************/
.pagination {
-fx-padding: 0;
-fx-arrows-visible: true;
-fx-tooltip-visible: true;
-fx-page-information-visible: true;
-fx-page-information-alignment: bottom;
-fx-arrow-button-gap: 0;
}
.pagination > .page {
-fx-background-color: transparent;
}
.pagination > .pagination-control {
-fx-background-color: transparent;
-fx-font-size: 0.82em;
}
.pagination > .pagination-control > .control-box {
-fx-padding: 5px 0 0 0;
-fx-spacing: 2;
-fx-alignment: center;
}
.pagination > .pagination-control > .control-box > .left-arrow-button {
-fx-background-radius: 3 0 0 3, 3 0 0 3, 2 0 0 2, 1 0 0 1;
-fx-background-insets: 0 0 -1 5, 0 0 0 5, 1 1 1 6, 2 2 2 7;
-fx-padding: 0em 0.417em 0em 0.833em; /* 0 5 0 10 */
}
.pagination > .pagination-control > .control-box > .right-arrow-button {
-fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
-fx-background-insets: 0 5 -1 0, 0 5 0 0, 1 6 1 1, 2 7 2 2;
-fx-padding: 0em 0.75em 0em 0.417em; /* 0 9 0 5 */
}
.pagination > .pagination-control .left-arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.375em 0.291em 0.375em 0.291em;
-fx-shape: "M 0 0 L -13 7 L 0 13 z";
-fx-scale-shape: true;
}
.pagination > .pagination-control .right-arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.375em 0.291em 0.375em 0.291em;
-fx-shape: "M 0 0 L 13 7 L 0 13 z";
-fx-scale-shape: true;
}
.pagination > .pagination-control > .control-box > .bullet-button {
-fx-background-radius: 0, 4em, 4em, 4em, 4em;
-fx-padding: 0.333em;
-fx-background-color: transparent, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 5, 6, 7;
}
.pagination > .pagination-control > .control-box > .bullet-button:selected {
-fx-base: -fx-selection-bar-non-focused;
}
.pagination:focused > .pagination-control > .control-box > .bullet-button:selected {
-fx-base: -fx-accent;
}
.pagination.bullet > .pagination-control > .control-box {
-fx-spacing: 0;
-fx-alignment: center;
}
.pagination.bullet > .pagination-control > .control-box > .left-arrow-button {
-fx-background-radius: 4em;
-fx-background-insets: 0, 1, 2;
-fx-padding: 0em 0.25em 0em 0.083em; /* 0 3 0 1 */
}
.pagination.bullet > .pagination-control > .control-box > .right-arrow-button {
-fx-background-radius: 4em;
-fx-background-insets: 0, 1, 2;
-fx-padding: 0em 0.083em 0em 0.25em; /* 0 1 0 3 */
}
.pagination > .pagination-control > .control-box > .number-button {
-fx-background-radius: 0;
-fx-padding: 0.166667em 0.333em 0.25em 0.333em;
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
}
.pagination > .pagination-control > .control-box > .number-button:selected {
-fx-base: -fx-selection-bar-non-focused;
}
.pagination:focused > .pagination-control > .control-box > .number-button:selected {
-fx-base: -fx-accent;
}
.pagination > .pagination-control > .page-information {
-fx-padding: 0.416em 0 0 0;
}
/*******************************************************************************
* *
* Customised CSS for controls placed directly within cells *
* *
******************************************************************************/
.cell > .choice-box {
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-padding: 0.0em 0.5em 0.0em 0.0em; /* 0 6 0 0 */
-fx-alignment: CENTER_LEFT;
-fx-content-display: LEFT;
}
.cell > .choice-box > .label {
-fx-padding: 0em 0.333333em 0.0em 0.333333; /* 2 4 3 6 */
}
.cell:focused:selected > .choice-box > .label {
-fx-text-fill: white;
}
.cell:focused:selected > .choice-box > .open-button > .arrow {
-fx-background-color: -fx-mark-highlight-color, white;
}
/*******************************************************************************
* *
* List, Tree, Table COMMON *
* *
******************************************************************************/
/* remove double borders from scrollbars */
.list-view > .virtual-flow > .scroll-bar:vertical,
.tree-view > .virtual-flow > .scroll-bar:vertical,
.table-view > .virtual-flow > .scroll-bar:vertical,
.tree-table-view > .virtual-flow > .scroll-bar:vertical {
-fx-background-insets: 0, 0 0 0 1;
-fx-padding: -1 -1 -1 0;
}
.list-view > .virtual-flow > .scroll-bar:horizontal,
.tree-view > .virtual-flow > .scroll-bar:horizontal,
.table-view > .virtual-flow > .scroll-bar:horizontal,
.tree-table-view > .virtual-flow > .scroll-bar:horizontal {
-fx-background-insets: 0, 1 0 0 0;
-fx-padding: 0 -1 -1 -1;
}
.list-view > .virtual-flow > .corner,
.tree-view > .virtual-flow > .corner,
.table-view > .virtual-flow > .corner,
.tree-table-view > .virtual-flow > .corner {
-fx-background-color: derive(-fx-base,-1%);
}
/* standard cell */
.list-cell,
.tree-cell {
-fx-background: -fx-control-inner-background;
-fx-background-color: -fx-background;
-fx-text-fill: -fx-text-background-color;
}
/* Selected rows */
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected {
-fx-background: -fx-selection-bar;
-fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}
/* Selected when control is not focused */
.list-cell:filled:selected,
.tree-cell:filled:selected,
.table-row-cell:filled:selected,
.tree-table-row-cell:filled:selected,
.table-row-cell:filled > .table-cell:selected,
.tree-table-row-cell:filled > .tree-table-cell:selected {
-fx-background: -fx-selection-bar-non-focused;
-fx-table-cell-border-color: derive(-fx-selection-bar-non-focused, 20%);
}
/* focused cell (keyboard navigation) */
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused,
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:focused,
.table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:focused,
.tree-table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:focused,
.table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused,
.tree-table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused {
-fx-background-color: -fx-background, -fx-cell-focus-inner-border, -fx-background;
-fx-background-insets: 0, 1, 2;
}
/*******************************************************************************
* *
* ListView and ListCell *
* *
******************************************************************************/
.list-cell {
-fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
}
.list-cell:odd {
-fx-background: -fx-control-inner-background-alt;
}
/*******************************************************************************
* *
* TreeView and TreeCell *
* *
******************************************************************************/
.tree-cell {
-fx-padding: 0.25em; /* 3 */
-fx-indent: 1em;
}
.tree-cell .label {
-fx-padding: 0.0em 0.0em 0.0em 0.25em; /* 0 0 0 3 */
}
.tree-cell > .tree-disclosure-node,
.tree-table-row-cell > .tree-disclosure-node {
-fx-padding: 4 6 4 8;
-fx-background-color: transparent;
}
.tree-cell > .tree-disclosure-node > .arrow,
.tree-table-row-cell > .tree-disclosure-node > .arrow {
-fx-background-color: -fx-text-background-color;
-fx-padding: 0.333333em 0.229em 0.333333em 0.229em; /* 4 */
-fx-shape: "M 0 -3.5 L 4 0 L 0 3.5 z";
}
.tree-cell:expanded > .tree-disclosure-node > .arrow,
.tree-table-row-cell:expanded > .tree-disclosure-node > .arrow {
-fx-rotate: 90;
}
/*******************************************************************************
* *
* TableView *
* *
******************************************************************************/
.table-view,
.tree-table-view {
/* Constants used throughout the tableview. */
-fx-table-header-border-color: -fx-box-border;
-fx-table-cell-border-color: derive(-fx-color,5%);
}
/***** ROW CELLS **************************************************************/
/* Each row in the table is a table-row-cell. Inside a table-row-cell is any
number of table-cell. */
.table-row-cell {
-fx-background: -fx-control-inner-background;
-fx-background-color: -fx-table-cell-border-color, -fx-background;
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0;
-fx-text-fill: -fx-text-background-color;
}
.table-row-cell:odd {
-fx-background: -fx-control-inner-background-alt;
}
/***** INDIVIDUAL CELLS ********************************************************/
.table-cell {
-fx-padding: 0.166667em; /* 2px, plus border adds 1px */
-fx-background-color: null;
-fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
-fx-cell-size: 2.0em; /* 24 */
-fx-text-fill: -fx-text-background-color;
}
.table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected,
.tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected {
-fx-background-color: -fx-table-cell-border-color, -fx-background;
-fx-background-insets: 0, 0 0 1 0;
}
/* When in constrained resize mode, the right-most visible cell should not have
a right-border, as it is not possible to get this cleanly out of view without
introducing horizontal scrollbars (see RT-14886). */
.table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:last-visible,
.tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible {
-fx-border-color: transparent;
}
/***** HEADER **********************************************************************/
/* The column-resize-line is shown when the user is attempting to resize a column. */
.table-view .column-resize-line,
.tree-table-view .column-resize-line {
-fx-background: -fx-accent;
-fx-background-color: -fx-background;
-fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */
}
/* This is the area behind the column headers. An ideal place to specify background
and border colors for the whole area (not individual column-header's). */
.table-view .column-header-background,
.tree-table-view > .column-header-background {
-fx-background-color: -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1;
}
/* The column header row is made up of a number of column-header, one for each
TableColumn, and a 'filler' area that extends from the right-most column
to the edge of the tableview, or up to the 'column control' button. */
.table-view .column-header,
.tree-table-view .column-header,
.table-view .filler,
.tree-table-view .filler,
.table-view > .column-header-background > .show-hide-columns-button,
.tree-table-view > .column-header-background > .show-hide-columns-button,
.table-view:constrained-resize .filler,
.tree-table-view:constrained-resize .filler {
-fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 0 1 1 0, 1 2 2 1;
-fx-font-weight: bold;
-fx-size: 2em;
-fx-text-fill: -fx-selection-bar-text;
-fx-padding: 0.166667em;
}
.table-view .column-header .context-menu,
.tree-table-view .column-header .context-menu,
.table-view > .column-header-background > .show-hide-columns-button .context-menu,
.tree-table-view > .column-header-background > .show-hide-columns-button .context-menu {
-fx-font-weight: null;
}
.table-view .filler,
.tree-table-view .filler,
.table-view:constrained-resize .filler,
.tree-table-view:constrained-resize .filler {
-fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
}
.table-view > .column-header-background > .show-hide-columns-button,
.tree-table-view > .column-header-background > .show-hide-columns-button {
-fx-background-insets: 0, 0 0 1 1, 1 1 2 2;
}
.table-view .column-header .sort-order-dots-container,
.tree-table-view .column-header .sort-order-dots-container{
-fx-padding: 2 0 2 0;
}
.table-view .column-header .sort-order,
.tree-table-view .column-header .sort-order{
-fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
}
.table-view .column-header .sort-order-dot,
.tree-table-view .column-header .sort-order-dot {
-fx-background-color: -fx-mark-color;
-fx-padding: 0.115em;
-fx-background-radius: 0.115em;
}
.table-view .column-header .label,
.tree-table-view .column-header .label {
-fx-alignment: center;
}
/* Plus Symbol */
.table-view .show-hide-column-image,
.tree-table-view .show-hide-column-image {
-fx-background-color: -fx-mark-color;
-fx-padding: 0.25em; /* 3px */
-fx-shape: "M398.902,298.045c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c0,0.666,0,1.332,0,1.999c-0.667,0-1.333,0-2,0c0-0.667,0-1.333,0-1.999c-0.666,0-1.333,0-1.999,0c0-0.667,0-1.334,0-2c0.666,0,1.333,0,1.999,0C398.902,299.378,398.902,298.711,398.902,298.045z";
}
/* When a column is being 'dragged' to be placed in a different position, there
is a region that follows along the column header area to indicate where the
column will be dropped. This region can be styled using the .column-drag-header
name. */
.table-view .column-drag-header,
.tree-table-view .column-drag-header {
-fx-background: -fx-accent;
-fx-background-color: -fx-selection-bar;
-fx-border-color: transparent;
-fx-opacity: 0.6;
}
/* Semi-transparent overlay to indicate the column that is currently being moved */
.table-view .column-overlay,
.tree-table-view .column-overlay {
-fx-background-color: darkgray;
-fx-opacity: 0.3;
}
/* Header Sort Arrows */
.table-view /*> column-header-background > nested-column-header >*/ .arrow,
.tree-table-view /*> column-header-background > nested-column-header >*/ .arrow {
-fx-background-color: -fx-mark-color;
-fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
/* This is shown when the table has no rows and/or no columns. */
.table-view .empty-table,
.tree-table-view .empty-table {
-fx-background-color: white;
-fx-font-size: 1.166667em; /* 14pt - 2 more than the default font */
}
/*******************************************************************************
* *
* Table Cells *
* *
******************************************************************************/
.check-box-table-cell {
-fx-alignment: center;
-fx-padding: 0;
}
.check-box-table-cell > .check-box {
-fx-font-size: 0.8em;
-fx-opacity: 1;
-fx-padding: 0 0 1 0;
}
.check-box-table-cell > .check-box > .box {
-fx-background-color: -fx-outer-border, -fx-background;
-fx-background-insets: 0,1;
}
.check-box-table-cell > .check-box:focused > .box {
-fx-background-color: -fx-focus-color, -fx-outer-border, -fx-background;
-fx-background-insets: -0.2, 1, 1.6;
-fx-background-radius: 3, 2, 1;
}
.check-box-table-cell > .check-box:selected > .box > .mark {
-fx-background-color: -fx-text-background-color;
-fx-background-insets: 0;
}
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .check-box-table-cell:selected > .check-box > .box,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .check-box-table-cell:selected > .check-box > .box,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected > .check-box-table-cell > .check-box > .box,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .check-box-table-cell > .check-box > .box {
-fx-background-color: derive(-fx-accent,40%), -fx-background;
}
/*******************************************************************************
* *
* TreeTableView *
* *
* Note: A lot of the CSS for TreeTableView is included with the TreeView and *
* TableView CSS styles elsewhere in modena.css (as they are the same, just *
* targeting different CSS style classes). *
******************************************************************************/
.tree-table-row-cell {
-fx-background: -fx-control-inner-background;
-fx-background-color: -fx-background;
-fx-padding: 0;
-fx-text-fill: -fx-text-background-color;
-fx-indent: 1em;
}
.tree-table-cell {
/* tree-table-cell needs slightly different padding to make the text sit at
the right height for the arrow */
-fx-padding: 0.25em 0.166667em 0.083em 0.166667em; /* 3 2 1 2 , plus border adds 1px */
-fx-background-color: null;
-fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
-fx-cell-size: 2.0em; /* 24 */
-fx-text-fill: -fx-text-background-color;
}
/*******************************************************************************
* *
* Tooltip *
* *
******************************************************************************/
.tooltip {
-fx-background: rgba(30,30,30);
-fx-text-fill: white;
-fx-background-color: rgba(30,30,30,0.8);
-fx-background-radius: 6px;
-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;
}
/*******************************************************************************
* *
* Charts *
* *
******************************************************************************/
.chart {
-fx-padding: 5px;
}
.chart-plot-background {
-fx-background-color: -fx-background;
}
.chart-content {
-fx-padding: 10px;
}
.chart-title {
-fx-font-size: 1.4em;
}
.chart-legend {
-fx-background-color: -fx-shadow-highlight-color,
linear-gradient(to bottom, derive(-fx-background, -10%), derive(-fx-background, -5%)),
linear-gradient(from 0px 0px to 0px 4px, derive(-fx-background, -4%), derive(-fx-background, 10%));
-fx-background-insets: 0 0 -1 0, 0,1;
-fx-background-radius: 4,4,3;
-fx-padding: 6px;
}
/*******************************************************************************
* *
* Axis *
* *
******************************************************************************/
.axis {
AXIS_COLOR: derive(-fx-background,-20%);
-fx-tick-label-font-size: 0.833333em; /* 10px */
-fx-tick-label-fill: derive(-fx-text-background-color, 30%);
}
.axis:top {
-fx-border-color: transparent transparent AXIS_COLOR transparent;
}
.axis:right {
-fx-border-color: transparent transparent transparent AXIS_COLOR;
}
.axis:bottom {
-fx-border-color: AXIS_COLOR transparent transparent transparent;
}
.axis:left {
-fx-border-color: transparent AXIS_COLOR transparent transparent;
}
.axis:top > .axis-label,
.axis:left > .axis-label {
-fx-padding: 0 0 4px 0;
}
.axis:bottom > .axis-label,
.axis:right > .axis-label {
-fx-padding: 4px 0 0 0;
}
.axis-tick-mark,
.axis-minor-tick-mark {
-fx-fill: null;
-fx-stroke: AXIS_COLOR;
}
/*******************************************************************************
* *
* ChartPlot *
* *
******************************************************************************/
.chart-vertical-grid-lines {
-fx-stroke: derive(-fx-background,-10%);
-fx-stroke-dash-array: 0.25em, 0.25em;
}
.chart-horizontal-grid-lines {
-fx-stroke: derive(-fx-background,-10%);
-fx-stroke-dash-array: 0.25em, 0.25em;
}
.chart-alternative-column-fill {
-fx-fill: null;
-fx-stroke: null;
}
.chart-alternative-row-fill {
-fx-fill: null;
-fx-stroke: null;
}
.chart-vertical-zero-line,
.chart-horizontal-zero-line {
-fx-stroke: derive(-fx-text-background-color, 40%);
}
/*******************************************************************************
* *
* ScatterChart *
* *
******************************************************************************/
.chart-symbol { /* solid circle */
-fx-background-color: CHART_COLOR_1;
-fx-background-radius: 5px;
-fx-padding: 5px;
}
.default-color1.chart-symbol { /* solid square */
-fx-background-color: CHART_COLOR_2;
-fx-background-radius: 0;
}
.default-color2.chart-symbol { /* solid diamond */
-fx-background-color: CHART_COLOR_3;
-fx-background-radius: 0;
-fx-padding: 7px 5px 7px 5px;
-fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
}
.default-color3.chart-symbol { /* cross */
-fx-background-color: CHART_COLOR_4;
-fx-background-radius: 0;
-fx-background-insets: 0;
-fx-shape: "M2,0 L5,4 L8,0 L10,0 L10,2 L6,5 L10,8 L10,10 L8,10 L5,6 L2,10 L0,10 L0,8 L4,5 L0,2 L0,0 Z";
}
.default-color4.chart-symbol { /* solid triangle */
-fx-background-color: CHART_COLOR_5;
-fx-background-radius: 0;
-fx-background-insets: 0;
-fx-shape: "M5,0 L10,8 L0,8 Z";
}
.default-color5.chart-symbol { /* hollow circle */
-fx-background-color: CHART_COLOR_6, white;
-fx-background-insets: 0, 2;
-fx-background-radius: 5px;
-fx-padding: 5px;
}
.default-color6.chart-symbol { /* hollow square */
-fx-background-color: CHART_COLOR_7, white;
-fx-background-insets: 0, 2;
-fx-background-radius: 0;
}
.default-color7.chart-symbol { /* hollow diamond */
-fx-background-color: CHART_COLOR_8, white;
-fx-background-radius: 0;
-fx-background-insets: 0, 2.5;
-fx-padding: 7px 5px 7px 5px;
-fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
}
/*******************************************************************************
* *
* LineChart *
* *
******************************************************************************/
.chart-line-symbol {
-fx-background-color: CHART_COLOR_1, white;
-fx-background-insets: 0, 2;
-fx-background-radius: 5px;
-fx-padding: 5px;
}
.chart-series-line {
-fx-stroke: CHART_COLOR_1;
-fx-stroke-width: 3px;
}
.default-color0.chart-line-symbol { -fx-background-color: CHART_COLOR_1, white; }
.default-color1.chart-line-symbol { -fx-background-color: CHART_COLOR_2, white; }
.default-color2.chart-line-symbol { -fx-background-color: CHART_COLOR_3, white; }
.default-color3.chart-line-symbol { -fx-background-color: CHART_COLOR_4, white; }
.default-color4.chart-line-symbol { -fx-background-color: CHART_COLOR_5, white; }
.default-color5.chart-line-symbol { -fx-background-color: CHART_COLOR_6, white; }
.default-color6.chart-line-symbol { -fx-background-color: CHART_COLOR_7, white; }
.default-color7.chart-line-symbol { -fx-background-color: CHART_COLOR_8, white; }
.default-color0.chart-series-line { -fx-stroke: CHART_COLOR_1; }
.default-color1.chart-series-line { -fx-stroke: CHART_COLOR_2; }
.default-color2.chart-series-line { -fx-stroke: CHART_COLOR_3; }
.default-color3.chart-series-line { -fx-stroke: CHART_COLOR_4; }
.default-color4.chart-series-line { -fx-stroke: CHART_COLOR_5; }
.default-color5.chart-series-line { -fx-stroke: CHART_COLOR_6; }
.default-color6.chart-series-line { -fx-stroke: CHART_COLOR_7; }
.default-color7.chart-series-line { -fx-stroke: CHART_COLOR_8; }
/*******************************************************************************
* *
* AreaChart *
* *
******************************************************************************/
.chart-area-symbol {
-fx-background-color: CHART_COLOR_1, white;
-fx-background-insets: 0, 1;
-fx-background-radius: 4px; /* makes sure this remains circular */
-fx-padding: 3px;
}
.default-color0.chart-area-symbol { -fx-background-color: CHART_COLOR_1, white; }
.default-color1.chart-area-symbol { -fx-background-color: CHART_COLOR_2, white; }
.default-color2.chart-area-symbol { -fx-background-color: CHART_COLOR_3, white; }
.default-color3.chart-area-symbol { -fx-background-color: CHART_COLOR_4, white; }
.default-color4.chart-area-symbol { -fx-background-color: CHART_COLOR_5, white; }
.default-color5.chart-area-symbol { -fx-background-color: CHART_COLOR_6, white; }
.default-color6.chart-area-symbol { -fx-background-color: CHART_COLOR_7, white; }
.default-color7.chart-area-symbol { -fx-background-color: CHART_COLOR_8, white; }
.chart-series-area-line {
-fx-stroke: CHART_COLOR_1;
-fx-stroke-width: 1px;
}
.default-color0.chart-series-area-line { -fx-stroke: CHART_COLOR_1; }
.default-color1.chart-series-area-line { -fx-stroke: CHART_COLOR_2; }
.default-color2.chart-series-area-line { -fx-stroke: CHART_COLOR_3; }
.default-color3.chart-series-area-line { -fx-stroke: CHART_COLOR_4; }
.default-color4.chart-series-area-line { -fx-stroke: CHART_COLOR_5; }
.default-color5.chart-series-area-line { -fx-stroke: CHART_COLOR_6; }
.default-color6.chart-series-area-line { -fx-stroke: CHART_COLOR_7; }
.default-color7.chart-series-area-line { -fx-stroke: CHART_COLOR_8; }
.chart-series-area-fill {
-fx-stroke: null;
-fx-fill: CHART_COLOR_1_TRANS_20;
}
.default-color0.chart-series-area-fill { -fx-fill: CHART_COLOR_1_TRANS_20; }
.default-color1.chart-series-area-fill { -fx-fill: CHART_COLOR_2_TRANS_20; }
.default-color2.chart-series-area-fill { -fx-fill: CHART_COLOR_3_TRANS_20; }
.default-color3.chart-series-area-fill { -fx-fill: CHART_COLOR_4_TRANS_20; }
.default-color4.chart-series-area-fill { -fx-fill: CHART_COLOR_5_TRANS_20; }
.default-color5.chart-series-area-fill { -fx-fill: CHART_COLOR_6_TRANS_20; }
.default-color6.chart-series-area-fill { -fx-fill: CHART_COLOR_7_TRANS_20; }
.default-color7.chart-series-area-fill { -fx-fill: CHART_COLOR_8_TRANS_20; }
.area-legend-symbol {
-fx-padding: 6px;
-fx-background-radius: 6px; /* makes sure this remains circular */
-fx-background-insets: 0, 3;
}
/*******************************************************************************
* *
* BubbleChart *
* *
******************************************************************************/
.bubble-legend-symbol {
-fx-background-radius: 8px;
-fx-padding: 8px;
}
.chart-bubble {
-fx-bubble-fill: CHART_COLOR_1_TRANS_70;
-fx-background-color: radial-gradient(center 50% 50%, radius 80%, derive(-fx-bubble-fill,20%), derive(-fx-bubble-fill,-30%));
}
.default-color0.chart-bubble { -fx-bubble-fill: CHART_COLOR_1_TRANS_70; }
.default-color1.chart-bubble { -fx-bubble-fill: CHART_COLOR_2_TRANS_70; }
.default-color2.chart-bubble { -fx-bubble-fill: CHART_COLOR_3_TRANS_70; }
.default-color3.chart-bubble { -fx-bubble-fill: CHART_COLOR_4_TRANS_70; }
.default-color4.chart-bubble { -fx-bubble-fill: CHART_COLOR_5_TRANS_70; }
.default-color5.chart-bubble { -fx-bubble-fill: CHART_COLOR_6_TRANS_70; }
.default-color6.chart-bubble { -fx-bubble-fill: CHART_COLOR_7_TRANS_70; }
.default-color7.chart-bubble { -fx-bubble-fill: CHART_COLOR_8_TRANS_70; }
/*******************************************************************************
* *
* BarChart *
* *
******************************************************************************/
.chart-bar {
-fx-bar-fill: CHART_COLOR_1;
-fx-background-color: linear-gradient(to right,
derive(-fx-bar-fill, -4%),
derive(-fx-bar-fill, -1%),
derive(-fx-bar-fill, 0%),
derive(-fx-bar-fill, -1%),
derive(-fx-bar-fill, -6%)
);
-fx-background-insets: 0;
}
.chart-bar.negative {
-fx-background-insets: 1 0 0 0;
}
.bar-chart:horizontal .chart-bar {
-fx-background-insets: 0 0 0 1;
}
.bar-chart:horizontal .chart-bar,
.stacked-bar-chart:horizontal .chart-bar {
-fx-background-color: linear-gradient(to bottom,
derive(-fx-bar-fill, -4%),
derive(-fx-bar-fill, -1%),
derive(-fx-bar-fill, 0%),
derive(-fx-bar-fill, -1%),
derive(-fx-bar-fill, -6%)
);
}
.default-color0.chart-bar { -fx-bar-fill: CHART_COLOR_1; }
.default-color1.chart-bar { -fx-bar-fill: CHART_COLOR_2; }
.default-color2.chart-bar { -fx-bar-fill: CHART_COLOR_3; }
.default-color3.chart-bar { -fx-bar-fill: CHART_COLOR_4; }
.default-color4.chart-bar { -fx-bar-fill: CHART_COLOR_5; }
.default-color5.chart-bar { -fx-bar-fill: CHART_COLOR_6; }
.default-color6.chart-bar { -fx-bar-fill: CHART_COLOR_7; }
.default-color7.chart-bar { -fx-bar-fill: CHART_COLOR_8; }
.bar-legend-symbol {
-fx-padding: 8px;
}
/*******************************************************************************
* *
* PieChart *
* *
******************************************************************************/
.chart-pie {
-fx-pie-color: CHART_COLOR_1;
-fx-background-color: radial-gradient(radius 100%, derive(-fx-pie-color,20%), derive(-fx-pie-color,-10%));
-fx-background-insets: 1;
-fx-border-color: -fx-background;
}
.chart-pie-label {
-fx-padding: 3px;
-fx-fill: -fx-text-base-color;
}
.chart-pie-label-line {
-fx-stroke: derive(-fx-background,-20%);
}
.default-color0.chart-pie { -fx-pie-color: CHART_COLOR_1; }
.default-color1.chart-pie { -fx-pie-color: CHART_COLOR_2; }
.default-color2.chart-pie { -fx-pie-color: CHART_COLOR_3; }
.default-color3.chart-pie { -fx-pie-color: CHART_COLOR_4; }
.default-color4.chart-pie { -fx-pie-color: CHART_COLOR_5; }
.default-color5.chart-pie { -fx-pie-color: CHART_COLOR_6; }
.default-color6.chart-pie { -fx-pie-color: CHART_COLOR_7; }
.default-color7.chart-pie { -fx-pie-color: CHART_COLOR_8; }
.negative.chart-pie {
-fx-pie-color: transparent;
-fx-background-color: white;
}
.pie-legend-symbol.chart-pie {
-fx-background-radius: 8px;
-fx-padding: 8px;
-fx-border-color: null;
}
/*******************************************************************************
* *
* Combinations *
* *
* This section is for special handling of when one control is nested inside *
* another control. There are many cases where we would end up with ugly *
* double borders that are fixed here. *
* *
******************************************************************************/
.tab-pane > * > .table-view,
.tab-pane > * > .tree-table-view,
.tab-pane > * > .list-view,
.tab-pane > * > .tree-view,
.tab-pane > * > .scroll-pane,
.tab-pane > * > .split-pane,
.tab-pane > * > .text-area,
.tab-pane > * > .html-editor,
.split-pane > * > .tab-pane,
.split-pane > * > .table-view,
.split-pane > * > .tree-table-view,
.split-pane > * > .list-view,
.split-pane > * > .tree-view,
.split-pane > * > .scroll-pane,
.split-pane > * > .split-pane,
.split-pane > * > .text-area,
.split-pane > * > .html-editor {
-fx-background-insets: 0, 0;
-fx-padding: 0;
}
.tab-pane > * > .scroll-pane > .corner {
-fx-background-insets: 0; /* Fix for RT-35067 */
}
.tab-pane.floating > * > .table-view,
.tab-pane.floating > * > .tree-table-view,
.tab-pane.floating > * > .list-view,
.tab-pane.floating > * > .tree-view,
.tab-pane.floating > * > .scroll-pane,
.tab-pane.floating > * > .split-pane,
.tab-pane.floating > * > .text-area,
.tab-pane.floating > * > .html-editor {
-fx-background-insets: 0, 0;
-fx-padding: -1;
}
.split-pane > * > .accordion > .titled-pane > *.content {
-fx-border-color: null;
-fx-border-insets: 0;
}
.split-pane > * > .accordion > .titled-pane > .title {
-fx-background-insets: 0,1 0 1 0, 2 1 2 1;
}
.split-pane > * > .accordion > .first-titled-pane > .title {
-fx-background-insets: 0,0 0 1 0, 1 1 2 1;
}
.split-pane > * > .accordion > .titled-pane:collapsed > .title {
-fx-background-insets: 0,1 0 0 0, 2 1 1 1;
}
.split-pane > * > .accordion > .first-titled-pane:collapsed > .title {
-fx-background-insets: 0,0 0 0 0, 1 1 1 1;
}
.titled-pane > .content > .split-pane,
.titled-pane > .content > .text-area,
.titled-pane > .content > .html-editor,
.titled-pane > .content > .list-view,
.titled-pane > .content > .tree-view,
.titled-pane > .content > .table-view,
.titled-pane > .content > .tree-table-view,
.titled-pane > .content > .scroll-pane {
-fx-background-color: null;
-fx-background-insets: 0, 0;
-fx-padding: 0;
}
.titled-pane > .content > AnchorPane,
.titled-pane > .content > BorderPane,
.titled-pane > .content > FlowPane,
.titled-pane > .content > GridPane,
.titled-pane > .content > HBox,
.titled-pane > .content > Pane,
.titled-pane > .content > StackPane,
.titled-pane > .content > TilePane,
.titled-pane > .content > VBox {
-fx-padding: 0.8em;
}
/*******************************************************************************
* *
* DatePicker *
* *
******************************************************************************/
.date-picker > .arrow-button > .arrow {
-fx-shape: "M0,0v9h9V0H0z M2,8H1V7h1V8z M2,6H1V5h1V6z M2,4H1V3h1V4z M4,8H3V7h1V8z M4,6H3V5h1V6z M4,4H3V3h1V4z M6,8H5V7h1V8z M6,6H5 V5h1V6z M6,4H5V3h1V4z M8,8H7V7h1V8z M8,6H7V5h1V6z M8,4H7V3h1V4z";
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.416667em 0.416667em 0.333333em 0.333333em; /* 5 5 4 4 */
-fx-scale-shape: true;
}
.date-picker-popup {
-fx-background-color:
linear-gradient(to bottom,
derive(-fx-color,-17%),
derive(-fx-color,-30%)
),
-fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-background-radius: 0;
-fx-alignment: CENTER; /* VBox */
-fx-spacing: 0; /* VBox */
-fx-padding: 0.083333em; /* 1 1 1 1 */
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
}
.date-picker-popup > .month-year-pane {
-fx-padding: 0.588883em 0.5em 0.666667em 0.5em; /* 7 6 8 6 */
-fx-background-color: derive(-fx-box-border,30%), linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
-fx-background-insets: 0 0 0 0, 0 0 1 0;
}
.date-picker-popup > * > .spinner {
-fx-spacing: 0.25em; /* 3 */
-fx-alignment: CENTER;
-fx-fill-height: false;
-fx-background-color: transparent;
}
.date-picker-popup > * > .spinner > .button {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-color: transparent;
-fx-background-radius: 0;
}
.date-picker-popup > * > .spinner > .button:focused {
-fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
-fx-color: -fx-hover-base;
-fx-background-insets: -0.2, 1, 2, -1.4, 2.6;
}
.date-picker-popup > * > .spinner > .button:hover {
-fx-color: -fx-hover-base;
}
.date-picker-popup > * > .spinner > .button:armed {
-fx-color: -fx-pressed-base;
}
.date-picker-popup > * > .spinner > .left-button {
-fx-padding: 0 0.333333em 0 0.25em; /* 0 4 0 3 */
}
.date-picker-popup > * > .spinner > .right-button {
-fx-padding: 0 0.25em 0 0.333333em; /* 0 3 0 4 */
}
.date-picker-popup > * > .spinner > .button > .left-arrow,
.date-picker-popup > * > .spinner > .button > .right-arrow {
-fx-background-color: -fx-mark-highlight-color, derive(-fx-base,-45%);
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.333333em 0.166667em 0.333333em 0.166667em; /* 4 2 4 2 */
-fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
}
.date-picker-popup > * > .spinner > .button:hover > .left-arrow,
.date-picker-popup > * > .spinner > .button:hover > .right-arrow {
-fx-background-color: -fx-mark-highlight-color, derive(-fx-base,-50%);
}
.date-picker-popup > * > .spinner > .button:pressed > .left-arrow,
.date-picker-popup > * > .spinner > .button:pressed > .right-arrow {
-fx-background-color: -fx-mark-highlight-color, derive(-fx-base,-55%);
}
.date-picker-popup > * > .spinner > .button > .left-arrow {
-fx-padding: 0.333333em 0.25em 0.333333em 0.166667em; /* 4 3 4 2 */
-fx-shape: "M5.997,5.072L5.995,6.501l-2.998-4l2.998-4l0.002,1.43l-1.976,2.57L5.997,5.072z";
-fx-scale-shape: true;
}
.date-picker-popup > * > .spinner > .button > .right-arrow {
-fx-padding: 0.333333em 0.25em 0.333333em 0.166667em; /* 4 3 4 2 */
-fx-shape: "M2.998-0.07L3-1.499l2.998,4L3,6.501l-0.002-1.43l1.976-2.57L2.998-0.07z";
-fx-scale-shape: true;
}
.date-picker-popup > * > .spinner > .label {
-fx-alignment: CENTER;
}
.date-picker-popup > .month-year-pane > .secondary-label {
-fx-alignment: BASELINE_CENTER;
-fx-padding: 0.5em 0 0 0; /* 6 0 0 0 */
-fx-text-fill: #f3622d;
}
.date-picker-popup > .calendar-grid {
-fx-background-color: derive(-fx-selection-bar-non-focused, 60%);
/*-fx-background-insets: 1 0 0 0;*/
-fx-padding: 0;
}
.date-picker-popup > * > .date-cell {
-fx-background-color: transparent;
-fx-background-insets: 1, 2;
-fx-padding: 0;
-fx-alignment: BASELINE_CENTER;
-fx-opacity: 1.0;
}
.date-picker-popup > * > .day-name-cell,
.date-picker-popup > * > .week-number-cell {
-fx-font-size: 0.916667em;
}
.date-picker-popup > * > .week-number-cell {
-fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */
-fx-border-color: -fx-control-inner-background;
-fx-border-width: 1px;
-fx-background: -fx-control-inner-background;
-fx-background-color: -fx-background;
-fx-text-fill: -fx-accent;
}
.date-picker-popup > * > .day-cell {
-fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */
-fx-border-color: derive(-fx-selection-bar-non-focused, 60%);
-fx-border-width: 1px;
-fx-font-size: 1em;
-fx-background: -fx-control-inner-background;
-fx-background-color: -fx-background;
-fx-text-fill: -fx-text-background-color;
}
.date-picker-popup > * > .hijrah-day-cell {
-fx-alignment: TOP_LEFT;
-fx-padding: 0.083333em 0.333333em 0.083333em 0.333333em; /* 1 4 1 4 */
-fx-cell-size: 2.75em;
}
.date-picker-popup > * > .day-cell > .secondary-text {
-fx-fill: #f3622d;
}
.date-picker-popup > * > .today {
-fx-background-color: -fx-control-inner-background, derive(-fx-selection-bar-non-focused, -20%), -fx-control-inner-background;
-fx-background-insets: 1, 2, 3;
}
.date-picker-popup > * > .day-cell:hover,
.date-picker-popup > * > .selected,
.date-picker-popup > * > .previous-month.selected,
.date-picker-popup > * > .next-month.selected {
-fx-background: -fx-selection-bar;
}
.date-picker-popup > * > .previous-month:hover,
.date-picker-popup > * > .next-month:hover {
-fx-background: -fx-selection-bar-non-focused;
}
.date-picker-popup > * > .today:hover,
.date-picker-popup > * > .today.selected {
-fx-background-color: -fx-selection-bar, derive(-fx-selection-bar-non-focused, -20%),-fx-selection-bar;
}
.date-picker-popup > * > .day-cell:focused,
.date-picker-popup > * > .today:focused {
-fx-background-color: -fx-control-inner-background, -fx-cell-focus-inner-border, -fx-control-inner-background;
-fx-background-insets: 1, 2, 3;
}
.date-picker-popup > * > .day-cell:focused:hover,
.date-picker-popup > * > .today:focused:hover,
.date-picker-popup > * > .selected:focused,
.date-picker-popup > * > .today.selected:focused {
-fx-background-color: -fx-selection-bar, -fx-cell-focus-inner-border, -fx-selection-bar;
}
.date-picker-popup > * > .previous-month,
.date-picker-popup > * > .next-month {
-fx-background: derive(-fx-control-inner-background, -4%);
}
.date-picker-popup > * > .day-cell:hover > .secondary-text,
.date-picker-popup > * > .previous-month > .secondary-text,
.date-picker-popup > * > .next-month > .secondary-text,
.date-picker-popup > * > .selected > .secondary-text {
-fx-fill: -fx-text-background-color;
}
.date-picker-popup > * > .previous-month.today,
.date-picker-popup > * > .next-month.today {
-fx-background-color: derive(-fx-control-inner-background, -4%), derive(-fx-selection-bar-non-focused, -20%), derive(-fx-control-inner-background, -4%);
}
.date-picker-popup > * > .previous-month.today:hover,
.date-picker-popup > * > .next-month.today:hover {
-fx-background-color: -fx-selection-bar-non-focused, derive(-fx-selection-bar-non-focused, -20%), -fx-selection-bar-non-focused;
}
/*******************************************************************************
* *
* Spinner *
* *
******************************************************************************/
.spinner {
-fx-background-color:
linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 0, 1;
-fx-background-radius: 3, 2;
}
.spinner:focused,
.spinner:contains-focus {
-fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
-fx-background-insets: -0.2, 1, 2, -1.4, 2.6;
-fx-background-radius: 3, 2, 1, 4, 1;
}
.spinner > .text-field {
-fx-background-color:
linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 0, 1 0 1 1;
-fx-background-radius: 3 0 0 3, 2 0 0 2;
}
.spinner:focused > .text-field,
.spinner:contains-focus > .text-field {
-fx-background-color:
-fx-control-inner-background,
-fx-faint-focus-color,
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 1 0 1 1, 1 0 1 1, 3 2 3 3;
-fx-background-radius: 2 0 0 2, 1 0 0 1, 0;
}
.spinner .increment-arrow-button {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
/*Change the two 0's here to -1 to get rid of the horizontal line */
-fx-background-insets: 0 0 -1 0, 1 1 0 1, 2 2 1 2;
-fx-background-radius: 0 3 0 0, 0 2 0 0, 0 1 0 0;
-fx-padding: 0.333335em 0.666667em 0.333335em 0.666667em; /* 5 8 3 8 */
}
.spinner .decrement-arrow-button {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1 1 1 1, 1 2 2 2;
-fx-background-radius: 0 0 3 0, 0 0 2 0, 0 0 1 0;
-fx-padding: 0.333335em 0.666667em 0.333335em 0.666667em; /* 3 8 5 8 */
}
.spinner:focused .increment-arrow-button,
.spinner:contains-focus .increment-arrow-button,
.spinner:focused .decrement-arrow-button,
.spinner:contains-focus .decrement-arrow-button {
-fx-background-color: -fx-focus-color, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
}
.spinner .increment-arrow-button .increment-arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 0 0 -1 0, 0;
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
-fx-shape: "M 0 4 h 7 l -3.5 -4 z";
}
.spinner .decrement-arrow-button .decrement-arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 0 0 -1 0, 0;
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
/* Spinner - Horizontal arrows */
.spinner.split-arrows-horizontal .increment-arrow-button .increment-arrow,
.spinner.arrows-on-right-horizontal .increment-arrow-button .increment-arrow,
.spinner.arrows-on-left-horizontal .increment-arrow-button .increment-arrow {
-fx-padding: 0.333333em 0.166667em 0.333333em 0.166667em; /* 4 2 4 2 */
-fx-shape: "M 0 0 v 7 l 3.5 -4 z";
}
.spinner.split-arrows-horizontal .decrement-arrow-button .decrement-arrow,
.spinner.arrows-on-right-horizontal .decrement-arrow-button .decrement-arrow,
.spinner.arrows-on-left-horizontal .decrement-arrow-button .decrement-arrow {
-fx-padding: 0.333333em 0.166667em 0.333333em 0.166667em; /* 4 2 4 2 */
-fx-shape: "M 4 0 v 7 l -4 -3.5 z";
}
/* Spinner - STYLE_CLASS_ARROWS_ON_RIGHT_HORIZONTAL */
.spinner.arrows-on-right-horizontal .increment-arrow-button {
-fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
-fx-background-insets: 0 0 0 -1, 1 1 1 0, 2 2 2 1;
}
.spinner.arrows-on-right-horizontal .decrement-arrow-button {
-fx-background-radius: 0;
-fx-background-insets: 0, 1, 2;
}
/* Spinner - STYLE_CLASS_ARROWS_ON_LEFT_VERTICAL */
.spinner.arrows-on-left-vertical > .text-field {
-fx-background-insets: 0, 1 1 1 0;
-fx-background-radius: 0 3 3 0, 0 2 2 0;
}
.spinner.arrows-on-left-vertical .increment-arrow-button {
-fx-background-radius: 3 0 0 0, 2 0 0 0, 1 0 0 0;
}
.spinner.arrows-on-left-vertical .decrement-arrow-button {
-fx-background-radius: 0 0 0 3, 0 0 0 2, 0 0 0 1;
}
/* Spinner - STYLE_CLASS_ARROWS_ON_LEFT_HORIZONTAL */
.spinner.arrows-on-left-horizontal > .text-field {
-fx-background-insets: 0, 1 1 1 0;
-fx-background-radius: 0 3 3 0, 0 2 2 0;
}
.spinner.arrows-on-left-horizontal .increment-arrow-button {
-fx-background-insets: 0 0 0 -1, 1 1 1 0, 2 2 2 1;
-fx-background-radius: 0;
}
.spinner.arrows-on-left-horizontal .decrement-arrow-button {
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1;
}
.spinner.arrows-on-left-vertical:focused > .text-field,
.spinner.arrows-on-left-vertical:contains-focus > .text-field,
.spinner.arrows-on-left-horizontal:focused > .text-field,
.spinner.arrows-on-left-horizontal:contains-focus > .text-field {
-fx-background-insets: 1 1 1 0, 1 1 1 0, 3 3 3 2;
}
/* Spinner - STYLE_CLASS_SPLIT_ARROWS_VERTICAL */
.spinner.split-arrows-vertical > .text-field {
-fx-background-insets: 0, 0 1 0 1;
-fx-background-radius: 0, 0;
}
.spinner.split-arrows-vertical .increment-arrow-button {
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
}
.spinner.split-arrows-vertical .decrement-arrow-button {
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0 0 3 3, 0 0 2 2, 0 0 1 1;
}
.spinner.split-arrows-vertical:focused > .text-field,
.spinner.split-arrows-vertical:contains-focus > .text-field {
-fx-background-insets: 0 1 0 1, 0 1 0 1, 2 3 2 3;
}
/* Spinner - STYLE_CLASS_SPLIT_ARROWS_HORIZONTAL */
.spinner.split-arrows-horizontal > .text-field {
-fx-background-insets: 0, 1 0 1 0;
-fx-background-radius: 0, 0;
}
.spinner.split-arrows-horizontal .increment-arrow-button {
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
}
.spinner.split-arrows-horizontal .decrement-arrow-button {
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1;
}
.spinner.split-arrows-horizontal:focused > .text-field,
.spinner.split-arrows-horizontal:contains-focus > .text-field {
-fx-background-insets: 1 0 1 0, 1 0 1 0, 3 2 3 2;
}
/*******************************************************************************
* *
* Dialog *
* *
******************************************************************************/
.dialog-pane {
-fx-background-color: -fx-background;
-fx-padding: 0;
}
.dialog-pane > .expandable-content {
-fx-padding: 0.666em; /* 8px */
}
.dialog-pane > .button-bar > .container {
-fx-padding: 0.833em; /* 10px */
}
.dialog-pane > .content.label {
-fx-alignment: top-left;
-fx-padding: 1.333em 0.833em 0 0.833em; /* 16px 10px 0px 10px */
}
.dialog-pane > .content {
-fx-padding: 0.833em; /* 10 */
}
.dialog-pane:no-header > * > .graphic-container {
-fx-padding: 0.833em 0 0 0.833em; /* 10px 0px 0px 10px */
}
.dialog-pane:header .header-panel {
/*-fx-padding: 0.833em 1.166em 0.833em 1.166em; *//* 10px 14px 10px 14px */
-fx-padding: 0.833em; /* 10px */
-fx-background-color: -fx-box-border, linear-gradient(-fx-background, derive(-fx-background, 30%));
-fx-background-insets: 0, 0 0 1 0;
}
.dialog-pane:header .header-panel .label {
-fx-font-size: 1.167em; /* 14px */
-fx-wrap-text: true;
}
.dialog-pane:header .header-panel .graphic-container {
/* This prevents the text in the header running directly into the graphic */
-fx-padding: 0 0 0 0.833em; /* 0px 0px 0px 10px */
}
.dialog-pane > .button-bar > .container > .details-button {
-fx-alignment: baseline-left;
-fx-focus-traversable: false;
-fx-padding: 0.416em; /* 5px */
}
.dialog-pane > .button-bar > .container > .details-button.more {
-fx-graphic: url("dialog-more-details.png");
}
.dialog-pane > .button-bar > .container > .details-button.less {
-fx-graphic: url("dialog-fewer-details.png");
}
.dialog-pane > .button-bar > .container > .details-button:hover {
-fx-underline: true;
}
.alert.confirmation.dialog-pane,
.text-input-dialog.dialog-pane,
.choice-dialog.dialog-pane {
-fx-graphic: url("dialog-confirm.png");
}
.alert.information.dialog-pane {
-fx-graphic: url("dialog-information.png");
}
.alert.error.dialog-pane {
-fx-graphic: url("dialog-error.png");
}
.alert.warning.dialog-pane {
-fx-graphic: url("dialog-warning.png");
}
@Remzi1993
Copy link
Author

JavaFX CSS Reference Guide: https://openjfx.io/javadoc/19/javafx.graphics/javafx/scene/doc-files/cssref.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment