JavaFX UI组件——默认皮肤文件，modena.css
2024-04-29 02:59:34
1）cmd进入Java 安装目录，查找jfxrt.jar文件目录
cd C:\Program Files\Java\jdk1.8.0_131\jre\lib\ext
2）执行
jar xf jfxrt.jar com/sun/javafx/scene/control/skin/modena/modena.css
3）样式文件
/** Copyright (c) 2009, 2015, Oracle and/or its affiliates. All rights reserved.* ORACLE PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.*********************//** 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-barRESIZING 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 ~ 2px2px -> 0.166667em -> 2.16px ~ 3px3px = 0.25em4px = 0.333333em5px = 0.416667em6px = 0.5em7px = 0.583333em8px = 0.666667em9px = 0.75em10px = 0.833333em11px = 0.916667em12px = 1emIMPORTANT: 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 thatthe text is always vertically centered within the bounds. Based onthe 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,
.titled-pane:disabled > .title,
.accordion:disabled > .titled-pane > .title,
.tab-pane > .tab-header-area > .headers-region > .tab:disabled,
.menu:disabled,
.menu-item:disabled > .label,
.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;
}/* ==== 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,
.hyperlink:show-mnemonics > .mnemonic-underline,
.split-menu-button:show-mnemonics > .mnemonic-underline,
.menu-button:show-mnemonics > .mnemonic-underline {-fx-stroke: -fx-text-base-color;
}/* ==== 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;
}
.hyperlink:show-mnemonics > .mnemonic-underline {-fx-stroke: -fx-text-fill;
}/* 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 > .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;
}
.context-menu:show-mnemonics > .mnemonic-underline {-fx-stroke: -fx-text-fill;
}/******************************************************************************** ** Menu ** *******************************************************************************/.menu {-fx-background-color: transparent;-fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
}
.menu:show-mnemonics > .mnemonic-underline {-fx-stroke: -fx-text-fill;
}
.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;
}
.menu-bar:show-mnemonics > .mnemonic-underline {-fx-stroke: -fx-text-fill;
}/******************************************************************************** ** 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;
}
.menu-item:show-mnemonics > .mnemonic-underline {-fx-stroke: -fx-text-fill;
}
.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, -fx-focus-color;-fx-background-insets: -3,-1;-fx-background-radius: 5,0;-fx-scale-x: 1.5;-fx-scale-y: 1.5;
}
/* ------- 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-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-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 anynumber 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 havea right-border, as it is not possible to get this cleanly out of view withoutintroducing 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 backgroundand 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 eachTableColumn, and a 'filler' area that extends from the right-most columnto 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, thereis a region that follows along the column header area to indicate where thecolumn will be dropped. This region can be styled using the .column-drag-headername. */
.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 atthe 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");
}
JavaFX UI组件——默认皮肤文件，modena.css相关推荐
- JavaFX技巧13：学习Modena CSS文件
到目前为止,这是最简单,最短的提示. 如果要执行以下任何操作: 了解如何使用CSS 使您的自定义控件看起来像标准控件 重用标准控件使用的SVG路径图形(例如,滚动条箭头) 弄清楚如何浏览标准控件的结构 ...
- JavaFX UI组件——Choice Box
详解:https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/choice-box.htm 代码示例: import javaf ...
- javafx css_JavaFX技巧13：研究Modena CSS文件
javafx css 到目前为止,这是最简单,最短的提示. 如果要执行以下任何操作: 了解如何使用CSS 使您的自定义控件看起来像标准控件 重用标准控件使用的SVG路径图形(例如,滚动条箭头) 弄清楚 ...
- Vue上传文件 iview Upload UI 组件上传组件
Vue上传文件 input支持上传文件 定义type类型,隐藏样式 第三定义change事件拿到file 的相关信息,accept限制支持的文件类型 然后给button增加点击事件 template部 ...
- LCUI.css 0.1.2 发布， 基于 LCUI 开发的 UI 组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> LCUI.css 是一个适用于 LCUI 应用程序的 UI 组件库,使用 C 语言编写,提供了一些通用的组件和 c ...
- 使用html编写SVG圆图形,CSS vs. SVG:任意图形UI组件
在这个系列教程的前两篇文章中,我们比较了CSS和SVG创建图形文本.复选框和单选按钮的技术与效果.在这篇文章中将介绍CSS和SVG对比技术中的另一个技术--创建图形UI组件的技术. 具体地说,我们将要 ...
- JavaFX UI控件教程（十六）之Separator
翻译自 Separator 本章介绍如何使用分隔符组织JavaFX应用程序的UI组件. SeparatorJavaFX API中可用的类表示水平或垂直分隔线.它用于划分应用程序用户界面的元素,不会产 ...
- JavaFX UI控件教程（二）之JavaFX UI控件
翻译自 JavaFX UI控件 本章概述了通过API提供的JavaFX UI控件. JavaFX UI控件是使用场景图中的节点构建的.因此,控件可以使用JavaFX平台的视觉丰富功能.由于JavaF ...
- iView：一套基于Vue的高质量UI组件库
基于Vue的UI组件库现在已经有很多了,尤其是移动端的.现在又多了一个 iView . 先睹为快 iView 主要服务于PC界面的中后台业务,是一套高质量的开源UI组件库,先上地址: github.c ...
最新文章
- 符合自己的德国学校与专业
- 利用DHCP，http，tftp，pxe实现批量自动化部署系统
- PHP在Postman上面进行xdebug的测试
- Java服务端向客户端写文件_java实现客户端向服务器发送文件
- DML和DQL 总结
- ListView原理
- java接收jsonarray_java-如何通过JSONArray获取API的数据
- VoLTE 信令分析手册
- 泰勒公式矩阵形式_泰勒公式的各种余项形式及其多种证明
- 生动实践现代农业-国稻种芯-泸州江阳：谋定产村深度融合
- 噜噜噜啦啦啦啦啦啾啾啾~
- 电脑提醒没有权限在此位置保存文件怎么办？
- 2020 所思、所遇、所学、所悟
- 网卡MAC地址（物理地址）映射为IPv6接口标识符
- php__file__用法,PHP 的常量__FILE__的用法图解
- 1分钟学会PS背景虚化
- 《把时间当作朋友》之读后感
- 程序分析之中间表示（Intermediate Representation）
- 亚马逊云科技与格雷西司，助力卡洛哈应对全球运营挑战
- otn与stn网络_全光网络：OTN与超长距离传输