/* Document : caspian */ /* * Copyright (c) 2009, 2011, Oracle and/or its affiliates. All rights reserved. * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER. * * This code is free software; you can redistribute it and/or modify it * under the terms of the GNU General Public License version 2 only, as * published by the Free Software Foundation. Oracle designates this * particular file as subject to the "Classpath" exception as provided * by Oracle in the LICENSE file that accompanied this code. * * This code is distributed in the hope that it will be useful, but WITHOUT * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License * version 2 for more details (a copy is included in the LICENSE file that * accompanied this code). * * You should have received a copy of the GNU General Public License version * 2 along with this work; if not, write to the Free Software Foundation, * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. * * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA * or visit www.oracle.com if you need additional information or have any * questions. * */ /******************************************************************************* * * * CSS Styles for core infrastructure bits. The .root section provides the * * overall default font and 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: #d0d0d0; /* 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: #f4f4f4; /* 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: white; /* 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: #292929; -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; * default buttons. */ -fx-accent: #0093ff; /* 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. * * TODO: should this be derived from -fx-accent? */ -fx-focus-color: #0093ff; /* 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; /* The opacity level to use for the "disabled" pseudoclass. */ -fx-disabled-opacity: 0.4; /*************************************************************************** * * * 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,-20%); /* Used to specify the body color for focused objects. By default, it's * the same as -fx-base (i.e., the body color doesn't change when a control * gets focus). */ -fx-focused-base: -fx-base; /* 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% ); /* The default color for all text. Sections should change the -fx-text-fill * property if change the background color to something else. 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-text-fill: -fx-text-background-color; /* 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,-30%) 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% ); /* Typically lighter than -fx-background and used to provide a small * highlight under controls and tick marks for checkboxes and radio buttons. * Often used with an insets of 0 0 -1 0, and is also often the first * color in a -fx-background-color list. Also is typically replaced by * -fx-focus-color with an insets of -1.4 in the "focused" pseudoclass. */ -fx-shadow-highlight-color: ladder( -fx-background, transparent 0%, derive(-fx-background,40%) 5%, derive(-fx-background,60%) 70%, derive(-fx-background,100%) 85%, derive(-fx-background,100%) 97%, derive(-fx-background,-10%) 97.5% ); /* 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: linear-gradient( to bottom, derive(-fx-color,-9%) 0%, derive(-fx-color,-33%) 100% ); /* 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,80%) 60%, white 82%) 0%, ladder(-fx-color, derive(-fx-color,20%) 10%, derive(-fx-color,-10%) 80%) 100% ); -fx-inner-border-horizontal: linear-gradient( to right, ladder(-fx-color, derive(-fx-color,80%) 60%, white 82%) 0%, ladder(-fx-color, derive(-fx-color,20%) 10%, derive(-fx-color,-10%) 80%) 100% ); -fx-inner-border-bottomup: linear-gradient( to top, ladder(-fx-color, derive(-fx-color,80%) 60%, white 82%) 0%, ladder(-fx-color, derive(-fx-color,20%) 10%, derive(-fx-color,-10%) 80%) 100%); /* 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. Typically is the fourth color * in the -fx-background-color list and represents main body of the control. * Insets are typically 2. */ -fx-body-color: linear-gradient( to bottom, derive(-fx-color,34%) 0%, derive(-fx-color,-18%) 100% ); -fx-body-color-bottomup: linear-gradient( to top, derive(-fx-color,34%) 0%, derive(-fx-color,-18%) 100% ); /* 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. * * TODO: it seems like this should be based upon -fx-accent and we should * remove the setting -fx-background in all the sections that use * -fx-selection-bar. */ -fx-selection-bar: linear-gradient( to bottom, derive(-fx-background,-7%) 0%, derive(-fx-background,-34%) 100% ); /* The color to use as -fx-text-fill when painting text on top of * backgrounds filled with -fx-selection-bar. * * TODO: it seems like this should be derived from -fx-selection-bar. */ -fx-selection-bar-text: ladder( -fx-background, -fx-light-text-color 50%, -fx-mid-text-color 51% ); /* The default border color for a tab. * * TODO: should this be -fx-box-border or derived from some other color? */ -fx-tab-border-color: -fx-box-border; /* 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; -fx-cell-focus-inner-border: #85b9de; /* The colors to use in Pagination */ -fx-page-bullet-border: #acacac; -fx-page-indicator-hover-border: #accee5; } .mnemonic-underline { -fx-stroke: transparent; } .text { -fx-font-smoothing-type: lcd; } /******************************************************************************* ******************************************************************************* ** ** ** CSS Sections for each control. In general, each control will have a main ** ** section that defines the following: ** ** ** ** .control-name { ** ** -fx-skin: "com.sun.javafx.scene.control.skin.ControlNameSkin"; ** ** -fx-background-color: a, b, c, d ** ** -fx-background-insets: e, f, g, h ** ** -fx-background-radius: i, j, k, l ** ** -fx-padding: m ** ** -fx-text-fill: n ** ** } ** ** ** ** where: ** ** ** ** -fx-background-color, -fx-background-insets, and -fx-background-radius ** ** are parallel arrays that specify background colors for the control. ** ** ** ** -fx-background represents a sequence of colors for regions that will be ** ** drawn, one on top of the other. ** ** ** ** -fx-background-insets is a comma separated list of insets that represent ** ** the top right bottom left insets from the edge of the control for each ** ** color specified in the -fx-background-color list. A single size for ** ** an inset means the same inset will be used for the top right bottom left ** ** values. A negative inset will draw outside the bounds of the control. ** ** ** ** -fx-background-radius is a comma separated list of values that represent ** ** the radii of the top right, bottom right, bottom left, and top left ** ** corners of the rectangle associated with the rectangle from the ** ** -fx-background-color list. As with insets, a single size for a radius ** ** means the same radius will be used for all corners. ** ** ** ** Typically, the following values will be used: ** ** ** ** a/e/i = -fx-shadow-highlight-color, 0 0 -1 0, 5 ** ** Draws a background highlight dropped 1 pixel down with ** ** corners with a 5 pixel radius. ** ** b/f/j = -fx-outer-border, 0, 5 ** ** Draws an outer border the size of the control (insets = 0) and ** ** with corners with a 5 pixel radius. ** ** c/g/k = -fx-inner-border, 1, 4 ** ** Draws an inner border inset 1 pixel from the control edge and ** ** with corners with a smaller radius (radius = 4). ** ** d/h/l = -fx-body-color, 2, 3 ** ** Draws the body last, inset 2 pixels from the control edge and ** ** with cornersd with an even smaller radius (radius = 3). ** ** m = Padding from the edge of the control to the outer edge of the ** ** skin content. ** ** n = If specified, the color chosen for -fx-text-fill should match ** ** the innermost color from -fx-background-colors (e.g., 'd'). ** ** See the -fx-text-fill entry in .scene for more information. ** ** ** ** The control will also typically define pseudoclass sections for when it ** ** is focused, when the mouse is hovering over it ("hover") and when the ** ** mouse button is being held down on it (e.g., "armed"). ** ** ** ** For example, in the "focused" pseudoclass, -fx-focus-color will typically ** ** just replace -fx-shadow-highlight-color and will be drawn so it extents ** ** outside the control with a glowing effect. The glowing effect is ** ** achieved by using a non-integer insets value of -1.4 and the radius ** ** is adjusted accordingly. ** ** ** ** .control-name:focused { ** ** -fx-background-color: -fx-focus-color, b, c, d ** ** -fx-background-insets: -1.4, f, g, h ** ** -fx-background-radius: 6.4, j, k, l ** ** } ** ** ** ** In the "hover" pseudoclass, the -fx-color is replaced with -fx-hover-base ** ** which will result in a re-derivation of the other colors in ** ** -fx-background-colors: ** ** ** ** .control-name:hover { ** ** -fx-color: -fx-hover-base; ** ** } ** ** ** ** In the "armed" pseudoclass, the -fx-color is replaced with ** ** -fx-pressed-base, which will result in a rederivation of the other colors ** ** in -fx-background-colors: ** ** ** ** .control-name:armed { ** ** -fx-color: -fx-pressed-base; ** ** } ** ** ** ** The control will also typically include a "disabled" pseudoclass which ** ** makes the component transparent: ** ** ** ** .control-name:disabled { ** ** -fx-opacity: -fx-disabled-opacity; ** ** } ** ** ** ******************************************************************************* ******************************************************************************/ /******************************************************************************* ******************************************************************************* ** ** ** NOTE on em values: em values are used for padding and other sizing ** ** throughout this file. Size values in ems represent fraction of the ** ** font size in use. As used in this file, each 1/12th represents a pixel ** ** based upon the default size of 12px. Here's a table for quick reference: ** ** ** ** 1px: 0.083333em ** ** 2px: 0.166667em ** ** 3px: 0.25em ** ** 4px: 0.333333em ** ** 5px: 0.416667em ** ** 6px: 0.5em ** ** 7px: 0.583333em ** ** 8px: 0.666667em ** ** 9px: 0.75em ** ** 10px: 0.833333em ** ** 11px: 0.916667em ** ** 12px: 1.0em ** ** ** ******************************************************************************* ******************************************************************************/ /******************************************************************************* * * * Label * * * ******************************************************************************/ .label { -fx-skin: "com.sun.javafx.scene.control.skin.LabelSkin"; -fx-text-fill: -fx-text-background-color; } .label:disabled { -fx-opacity: -fx-disabled-opacity; } .label:show-mnemonics .mnemonic-underline { -fx-stroke: -fx-text-fill; } /* The opacity of the parent is applied to the children. So we make the * opacity 1.0 here to avoid double translucency. */ /*:disabled > * > .label { -fx-opacity: 1.0; }*/ /******************************************************************************* * * * Button * * * ******************************************************************************/ .button { -fx-skin: "com.sun.javafx.scene.control.skin.ButtonSkin"; -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: 5, 5, 4, 3; -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */ -fx-text-fill: -fx-text-base-color; -fx-alignment: CENTER; -fx-content-display: LEFT; } .button:focused { -fx-color: -fx-focused-base; -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: -1.4, 0, 1, 2; -fx-background-radius: 6.4, 5, 4, 3; } .button:hover { -fx-color: -fx-hover-base; } .button:armed { -fx-color: -fx-pressed-base; } .button:default { -fx-base: -fx-accent; } .button:cancel { } .button:disabled { -fx-opacity: -fx-disabled-opacity; } .button:show-mnemonics .mnemonic-underline { -fx-stroke: -fx-text-fill; } /******************************************************************************* * * * ToggleButton * * * ******************************************************************************/ .toggle-button { -fx-skin: "com.sun.javafx.scene.control.skin.ToggleButtonSkin"; -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: 5, 5, 4, 3; -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */ -fx-text-fill: -fx-text-base-color; -fx-alignment: CENTER; -fx-content-display: LEFT; } .toggle-button:focused { -fx-color: -fx-focused-base; -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: -1.4, 0, 1, 2; -fx-background-radius: 6.4, 5, 4, 3; } .toggle-button:hover { -fx-color: -fx-hover-base; } .toggle-button:armed { -fx-color: -fx-pressed-base; } .toggle-button:selected { -fx-background-color: -fx-shadow-highlight-color, linear-gradient(to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100%), linear-gradient(to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100%), linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%); -fx-background-insets: 0 0 -1 0, 0, 1, 1; /* TODO: -fx-text-fill should be derived */ -fx-text-fill: -fx-light-text-color; } .toggle-button:selected:focused { -fx-color: -fx-focused-base; -fx-background-color: -fx-focus-color, linear-gradient(to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100%), linear-gradient(to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100%), linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%); -fx-background-insets: -1.4, 0, 1, 1; } .toggle-button:disabled { -fx-opacity: -fx-disabled-opacity; } .toggle-button:show-mnemonics .mnemonic-underline { -fx-stroke: -fx-text-fill; } /******************************************************************************* * * * RadioButton * * * ******************************************************************************/ .radio-button { -fx-skin: "com.sun.javafx.scene.control.skin.RadioButtonSkin"; -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */ -fx-text-fill: -fx-text-background-color; } .radio-button:focused { -fx-color: -fx-focused-base; } .radio-button .radio { -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: 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:focused .radio { -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-radius: 1.0em; /* large value to make sure this remains circular */ -fx-background-insets: -1.4, 0, 1, 2; } .radio-button:hover .radio { -fx-color: -fx-hover-base; } .radio-button:armed .radio { -fx-color: -fx-pressed-base; } .radio-button .dot { -fx-background-color: transparent; -fx-background-insets: 0; -fx-background-radius: 1.0em; /* large value to make sure this remains circular */ -fx-padding: 0.25em; /* 3 -- radius of the inner black dot when selected */ } .radio-button:selected .dot { -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; -fx-background-insets: 0 0 -1 0, 0; } .radio-button:disabled { -fx-opacity: -fx-disabled-opacity; } .radio-button:show-mnemonics .mnemonic-underline { -fx-stroke: -fx-text-fill; } /******************************************************************************* * * * CheckBox * * * ******************************************************************************/ .check-box { -fx-skin: "com.sun.javafx.scene.control.skin.CheckBoxSkin"; -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */ -fx-text-fill: -fx-text-background-color; } .check-box:focused { -fx-color: -fx-focused-base; } .check-box .box { -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: 2, 2, 1, 1; -fx-padding: 0.25em; /* 3 -- padding from the outside edge to the mark */ } .check-box:focused .box { -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: -1.4, 0, 1, 2; -fx-background-radius: 3.4, 2, 1, 1; } .check-box:hover .box { -fx-color: -fx-hover-base; } .check-box:armed .box { -fx-color: -fx-pressed-base; } .check-box .mark { -fx-background-color: transparent; -fx-background-insets: 1 0 -1 0, 0; -fx-padding: 0.333333em; /* 4 -- this is half the size of the mark */ -fx-shape: "M0,4H2L3,6L6,0H8L4,8H2Z"; } /* TODO: scale the shape - the problem is that it is not within a square * boundary. */ .check-box:indeterminate .mark { -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; -fx-shape: "M0,0H8V2H0Z"; -fx-scale-shape: false; } .check-box:selected .mark { -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; } .check-box:disabled { -fx-opacity: -fx-disabled-opacity; } .check-box:show-mnemonics .mnemonic-underline { -fx-stroke: -fx-text-fill; } /******************************************************************************* * * * Hyperlink * * * ******************************************************************************/ .hyperlink { -fx-skin: "com.sun.javafx.scene.control.skin.HyperlinkSkin"; -fx-padding: 0.166667em; /* 2 */ -fx-cursor: hand; -fx-content-display: LEFT; -fx-text-fill: -fx-text-background-color; -fx-border-color: transparent; -fx-border-width: 1px; } .hyperlink:visited { -fx-text-fill: -fx-accent; } .hyperlink:focused { -fx-color: -fx-focused-base; -fx-border-color: -fx-focus-color; -fx-border-style: dotted; -fx-border-width: 1px; } .hyperlink:disabled { -fx-opacity: -fx-disabled-opacity; } .hyperlink:hover { -fx-underline: true; } .hyperlink:show-mnemonics .mnemonic-underline { -fx-stroke: -fx-text-fill; } /******************************************************************************* * * * PopupMenu * * * ******************************************************************************/ .context-menu { -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin"; -fx-background-color: derive(-fx-color,-40%), derive(-fx-color,100%), linear-gradient(to bottom, derive(-fx-color,100%) 0%, derive(-fx-color,50%) 12%, derive(-fx-color,65%) 88%, derive(-fx-color,23%) 100%); -fx-background-insets: 0, 1, 2; -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4; /* -fx-padding: 0.666667em 0.083333em 0.666667em 0.083333em; 8 1 8 1 */ -fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; /* 4 1 8 1 */ } .context-menu .separator { -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */ } .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-accent; -fx-background-color: -fx-selection-bar; -fx-text-fill: -fx-selection-bar-text; } .context-menu:show-mnemonics .mnemonic-underline { -fx-stroke: -fx-text-fill; } /******************************************************************************* * * * Menu * * * ******************************************************************************/ .menu { /* -fx-skin: "com.sun.javafx.scene.control.skin.MenuSkin";*/ -fx-background-color: transparent; -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */ } .menu:disabled { -fx-opacity: -fx-disabled-opacity; } .menu:show-mnemonics .mnemonic-underline { -fx-stroke: -fx-text-fill; } /* This hides the down arrow that would show on a menu placed in a menubar */ .menu-bar .menu .arrow { -fx-padding: 0; -fx-background-color: transparent; -fx-shape: null; } .menu-bar .menu .arrow-button { -fx-padding: 0; } .menu .arrow { -fx-background-color: -fx-mark-color; -fx-shape: "M0,-4L4,0L0,4Z"; -fx-scale-shape: false; } .menu:focused:showing .arrow, .menu:hover:showing .arrow, .menu:focused .arrow, .menu:showing .arrow { -fx-background-color: white; } .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 * * * ******************************************************************************/ /* Corresponding hex values for the color derivations used below are: * * derive(-fx-base,-30%); #929292 * * derive(-fx-base,-50%); #686868 * * derive(-fx-base,-70%); #3e3e3e */ .menu-bar { -fx-skin: "com.sun.javafx.scene.control.skin.MenuBarSkin"; -fx-padding: 0.0em 0.666667em 0.0em 0.666667em; /* 0 8 0 8 */ -fx-spacing: 0.166667em; /* 2 */ -fx-base: derive(#d0d0d0,-70%); -fx-background-color: linear-gradient(to bottom, derive(-fx-color,50%), derive(-fx-color,-30%)), -fx-body-color; -fx-background-insets: 0, 1 0 1 0; -fx-background-radius: 0, 0 ; } /* Show nothing for background of normal menu button in a menu bar */ .menu-bar .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 .menu-button .label { -fx-padding: 0.333em 0.5em 0.333em 0.5em; /* 4 6 4 6*/ } .menu-bar .menu-button:hover, .menu-bar .menu-button:focused, .menu-bar .menu-button:showing { -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar; -fx-text-fill: -fx-selection-bar-text; } /*.menu-bar .menu:focused:showing, .menu-bar .menu:showing, .menu-bar .menu:focused, .menu:focused:showing, .menu:showing, .menu:focused {*/ /*.menu-bar .menu-button:showing, .menu-button:showing { -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar; -fx-text-fill: -fx-selection-bar-text; }*/ .menu-bar .menu-button:hover { -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar; -fx-text-fill: -fx-selection-bar-text; } .menu-bar:show-mnemonics .mnemonic-underline { -fx-stroke: -fx-text-fill; } /******************************************************************************* * * * MenuItem * * * ******************************************************************************/ .menu-item { /* -fx-skin: "com.sun.javafx.scene.control.skin.MenuItemSkin";*/ -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:disabled .label { -fx-opacity: -fx-disabled-opacity; } .menu-item:focused { -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar; -fx-text-fill: -fx-selection-bar-text; } .menu-item:focused .label { -fx-text-fill: white; } .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 .radio { -fx-background-color: -fx-mark-color; -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z"; -fx-scale-shape: false; } .radio-menu-item:focused:checked .radio { -fx-background-color: white; } .check-menu-item:checked .check { -fx-background-color: -fx-mark-color; -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z"; -fx-scale-shape: false; } .check-menu-item:focused:checked .check { -fx-background-color: white; } .menu .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:selected .arrow { -fx-background-color: white; } /*.radio.selected { -fx-background-color: -fx-mark-color; -fx-padding: 0.666667em; 8 -fx-shape: "M7,3.5C7,5.433,5.433,7,3.5,7C1.567,7,0,5.433,0,3.5C0,1.567,1.63,0,3.5,0C5.433,0,7,1.567,7,3.5z"; -fx-scale-shape: false; }*/ /*.check.checked { -fx-background-color: -fx-mark-color; -fx-padding: 0.666667em; 8 -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z"; -fx-scale-shape: false; }*/ /* .menu-item:hover:selected .menu-item-check, .menu-item:focused:selected .menu-item-check,.menu-item:hover:selected .menu-item-radio, .menu-item:focused:selected .menu-item-radio { -fx-background-color: -fx-selection-bar-text; } */ .menu-item:disabled { -fx-opacity: -fx-disabled-opacity; } /******************************************************************************* * * * ChoiceBox * * * ******************************************************************************/ .choice-box { -fx-skin: "com.sun.javafx.scene.control.skin.ChoiceBoxSkin"; -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: 5, 5, 4, 3; -fx-padding: 0.0em 0.5em 0.0em 0.0em; /* 0 6 0 0 */ -fx-alignment: CENTER; -fx-content-display: LEFT; } .choice-box:focused { -fx-color: -fx-focused-base; -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: -1.4, 0, 1, 2; -fx-background-radius: 6.4, 5, 4, 3; } .choice-box:hover { -fx-color: -fx-hover-base; } .choice-box:showing { -fx-color: -fx-pressed-base; } .choice-box .label { -fx-padding: 0.166667em 0.333333em 0.25em 0.5em; /* 2 4 3 6 */ -fx-text-fill: -fx-text-base-color; } .choice-box .open-button { -fx-background-color: null; -fx-padding: 0.083333em 0.0em 0.0em 0.666667em; /* 1 0 0 8 */ } .choice-box .arrow { -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; -fx-background-insets: 1 0 -1 0, 0; /* padding determines the size of the arrow; this should match the design size in the SVG */ -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; } .choice-box .menu-item { -fx-accelerator-gutter: 0; } /* TODO: need to use the ID here. For some reason, the other form does not * work. This might be related to popup issues. */ /*.choice-box > * > .menu-item-radio {*/ #choice-box-menu-item > * > .menu-item-radio { /* When we show RadioMenuItems in ChoiceBox, we replace the radio shape with a check mark, which looks much better */ -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z"; -fx-scale-shape: false; } .choice-box:disabled { -fx-opacity: -fx-disabled-opacity; } /******************************************************************************* * * * Slider * * * ******************************************************************************/ .slider { -fx-skin: "com.sun.javafx.scene.control.skin.SliderSkin"; } .slider .thumb { -fx-background-color: derive(-fx-color,-36%), derive(-fx-color,73%), linear-gradient(to bottom, derive(-fx-color,-19%),derive(-fx-color,61%)); -fx-background-insets: 0, 1, 2; -fx-background-radius: 1.0em; /* makes sure this remains circular */ -fx-padding: 0.583333em; /* 7 */ } .slider:focused .thumb { -fx-color: -fx-focused-base; -fx-background-color: -fx-focus-color, derive(-fx-color,-36%), derive(-fx-color,73%), linear-gradient(to bottom, derive(-fx-color,-19%),derive(-fx-color,61%)); -fx-background-insets: -1.4, 0, 1, 2; -fx-background-radius: 1.0em; /* makes sure this remains circular */ } .slider .thumb:hover { -fx-color: -fx-hover-base; } /* Uncomment when RT-10521 is fixed. .slider .thumb:pressed { -fx-color: -fx-pressed-base; } */ .slider .track { -fx-background-color: -fx-shadow-highlight-color, derive(-fx-color,-22%), linear-gradient(to bottom, derive(-fx-color,-15.5%), derive(-fx-color,34%) 30%, derive(-fx-color,68%)); -fx-background-insets: 1 0 -1 0, 0, 1; -fx-background-radius: 2.5, 2.5, 1.5; -fx-padding: 0.208333em; /* 2.5 */ } .slider:vertical .track { -fx-background-color: -fx-shadow-highlight-color, derive(-fx-color,-22%), linear-gradient(to right, derive(-fx-color,-15.5%), derive(-fx-color,34%) 30%, derive(-fx-color,68%)); -fx-background-insets: 0 -1 0 1, 0, 1; } .slider .axis { -fx-tick-mark-stroke: ladder(-fx-background, derive(-fx-background,30%) 40%, derive(-fx-background,-30%) 41%); -fx-tick-label-font: 0.833333em System; -fx-tick-label-fill: -fx-text-background-color; } .slider:disabled { -fx-opacity: -fx-disabled-opacity; } /******************************************************************************* * * * ScrollBar * * * ******************************************************************************/ .scroll-bar { -fx-skin: "com.sun.javafx.scene.control.skin.ScrollBarSkin"; } .scroll-bar:horizontal { -fx-background-color: -fx-box-border, linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%); -fx-background-insets: 0, 1; } .scroll-bar:horizontal:focused { -fx-background-color: -fx-focus-color, -fx-box-border, linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%); -fx-background-insets: -1.4, 0, 1; } .scroll-bar:vertical { -fx-background-color: -fx-box-border, linear-gradient(to top, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%); -fx-background-insets: 0, 1; } .scroll-bar:vertical:focused { -fx-background-color: -fx-focus-color, -fx-box-border, linear-gradient(to top, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%); -fx-background-insets: -1.4, 0, 1; } .scroll-bar:horizontal .thumb { -fx-background-color: -fx-box-border, linear-gradient(to bottom, derive(-fx-color,95%), derive(-fx-color,10%)), linear-gradient(to bottom, derive(-fx-color,38%), derive(-fx-color,-16%)); -fx-background-insets: 0, 1, 2; -fx-background-radius: 0.5em; /* makes sure this remains circular */ } .scroll-bar:vertical .thumb { -fx-background-color: -fx-box-border, linear-gradient(to right, derive(-fx-color,95%), derive(-fx-color,10%)), linear-gradient(to right, derive(-fx-color,38%), derive(-fx-color,-16%)); -fx-background-insets: 0, 1, 2; -fx-background-radius: 0.5em; /* makes sure this remains circular */ } .scroll-bar:focused .thumb { -fx-color: -fx-focused-base; } .scroll-bar .thumb:hover { -fx-color: -fx-hover-base; } /* Uncomment when RT-10521 is fixed. .scroll-bar .thumb:pressed { -fx-color: -fx-pressed-base; } */ .scroll-bar:horizontal .track { -fx-background-color: -fx-box-border, linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%)); -fx-background-insets: 0, 1; -fx-background-radius: 0.5em; /* makes sure this remains circular */ } .scroll-bar:horizontal .track-background { -fx-background-color: -fx-box-border, linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%)); -fx-background-insets: 0, 1; } .scroll-bar:vertical .track { -fx-background-color: -fx-box-border, linear-gradient(to right, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%)); -fx-background-insets: 0, 1; -fx-background-radius: 0.5em; /* makes sure this remains circular */ } .scroll-bar:vertical .track-background { -fx-background-color: -fx-box-border, linear-gradient(to right, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%)); -fx-background-insets: 0, 1; } .scroll-bar .increment-button { -fx-background-color: -fx-box-border, linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%)); -fx-background-insets: 0, 1; -fx-padding: 0.25em; /* 3 */ } .scroll-bar .decrement-button { -fx-background-color: -fx-box-border, linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%)); -fx-background-insets: 0, 1; -fx-padding: 0.25em; /* 3 */ } .scroll-bar:horizontal .increment-arrow { -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; -fx-background-insets: 1 0 -1 0, 0; -fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */ -fx-shape: "M 4 0 L 0 -3 L 0 3 z"; } .scroll-bar:vertical .increment-arrow { -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; -fx-background-insets: 1 0 -1 0, 0; -fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */ -fx-shape: "M -3 0 L 0 4 L 3 0 z"; } .scroll-bar:horizontal .decrement-arrow { -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; -fx-background-insets: 1 0 -1 0, 0; -fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */ -fx-shape: "M 0 0 L 4 -3 L 4 3 z"; } .scroll-bar:vertical .decrement-arrow { -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; -fx-background-insets: 1 0 -1 0, 0; -fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */ -fx-shape: "M -3 0 L 0 -4 L 3 0 z"; } .scroll-bar:disabled { -fx-opacity: -fx-disabled-opacity; } /* The opacity of the parent is applied to the children. So we make the * opacity 1.0 here to avoid double translucency. */ /*:disabled > * > .scroll-bar { -fx-opacity: 1.0; }*/ /******************************************************************************* * * * ScrollPane * * * ******************************************************************************/ .scroll-pane { -fx-skin: "com.sun.javafx.scene.control.skin.ScrollPaneSkin"; -fx-background-color: -fx-box-border,-fx-background; -fx-background-insets: 0, 1; -fx-padding: 1.0; } .scroll-pane:focused { -fx-background-color: -fx-focus-color, -fx-box-border, -fx-background; -fx-background-insets: -1.4, 0, 1; } .scroll-pane > * > .scroll-bar:horizontal { -fx-background-insets: 0, 1 0 0 0; -fx-padding: 0.0 0.0 0.0 0.0; } .scroll-pane > * > .scroll-bar:vertical { -fx-background-insets: 0, 0 0 0 1; -fx-padding: 0.0 0.0 0.0 0.0; } .scroll-pane .corner { -fx-background-color: -fx-box-border, -fx-base; -fx-background-insets: 0, 1 0 0 1; } .scroll-pane:disabled { -fx-opacity: -fx-disabled-opacity; } /******************************************************************************* * * * Separator * * * ******************************************************************************/ .separator { -fx-skin: "com.sun.javafx.scene.control.skin.SeparatorSkin"; } .separator .line { -fx-border-style: segments(0.166667em, 0.166667em); -fx-border-width: 0.083333em; /* 1 */ } .separator:horizontal .line { -fx-background-color: null; -fx-padding: 0.083333em 0.0em 0.0em 0.0em; /* 1 0 0 0 */ -fx-border-color: derive(-fx-background,-20%) transparent transparent transparent; } .separator:vertical .line { -fx-background-color: null; -fx-padding: 0.0em 0.083333em 0.0em 0.0em; /* 0 1 0 0 */ -fx-border-color: transparent derive(-fx-background,-20%) transparent transparent; } /******************************************************************************* * * * TextInput * * * ******************************************************************************/ .text-input { -fx-text-fill: -fx-text-inner-color; -fx-highlight-fill: -fx-accent; -fx-highlight-text-fill: white; } /******************************************************************************* * * * TextField * * * ******************************************************************************/ .text-field { -fx-skin: "com.sun.javafx.scene.control.skin.TextFieldSkin"; -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: 0, 1, 2; -fx-background-radius: 3, 2, 2; -fx-padding: 3 5 3 5; -fx-text-fill: -fx-text-inner-color; -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); -fx-cursor: text; } .text-field:focused { -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: -0.4, 1, 2; -fx-background-radius: 3.4, 2, 2; -fx-prompt-text-fill: transparent; } .text-field:disabled { -fx-opacity: -fx-disabled-opacity; } /******************************************************************************* * * * PasswordField * * * ******************************************************************************/ .password-field { -fx-skin: "com.sun.javafx.scene.control.skin.PasswordFieldSkin"; -fx-text-fill: -fx-text-inner-color; } /******************************************************************************* * * * TextArea * * * ******************************************************************************/ .text-area { -fx-skin: "com.sun.javafx.scene.control.skin.TextAreaSkin"; -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: 0, 1, 2; -fx-background-radius: 3, 2, 2; -fx-padding: 1; -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); } .text-area .scroll-pane { -fx-background-color: transparent; } .text-area .content { -fx-padding: 3 5 3 5; -fx-cursor: text; } .text-area:focused { -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: -0.4, 1, 2; -fx-background-radius: 3.4, 2, 2; -fx-prompt-text-fill: transparent; } .text-area:disabled { -fx-opacity: -fx-disabled-opacity; } /******************************************************************************* * * * 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 .arrow { -fx-background-color: -fx-mark-highlight-color, white; } /******************************************************************************* * * * ListView and ListCell * * * ******************************************************************************/ .list-view { -fx-skin: "com.sun.javafx.scene.control.skin.ListViewSkin"; -fx-background-color: -fx-box-border, -fx-control-inner-background; -fx-background-insets: 0, 1; /* There is some oddness if padding is in em values rather than pixels, in particular, the left border of the control doesn't show. */ -fx-padding: 1; /* 0.083333em; */ } .list-view:focused { -fx-background-color: -fx-focus-color,-fx-box-border,-fx-control-inner-background; -fx-background-insets: -1.4, 0, 1; -fx-background-radius: 1.4, 0, 0; /* There is some oddness if padding is in em values rather than pixels, in particular, the left border of the control doesn't show. */ -fx-padding: 1; /* 0.083333em; */ } .list-view .scroll-bar:vertical{ -fx-background-insets: 0, 0 0 0 1; -fx-padding: 0.0 0.0 0.0 0.0; } .list-view .scroll-bar:horizontal{ -fx-background-insets: 0, 1 0 0 0; -fx-padding: 0.0 0.0 0.0 0.0; } .list-view:disabled { -fx-opacity: -fx-disabled-opacity; } .list-view .corner { -fx-background-color: -fx-box-border, -fx-base; -fx-background-insets: 0, 1 0 0 1; } .list-cell { -fx-skin: "com.sun.javafx.scene.control.skin.ListCellSkin"; -fx-background-color: -fx-control-inner-background; -fx-padding: 0.25em; /* 3 */ -fx-text-fill: -fx-text-inner-color; -fx-opacity: 1; } .list-cell:odd { -fx-background-color: derive(-fx-control-inner-background,-5%); } .list-view:focused .list-cell:focused { -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; -fx-background-insets: 0, 1, 2; } .list-view:focused .list-cell:focused:odd { -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, derive(-fx-control-inner-background,-5%); -fx-background-insets: 0, 1, 2; } /* When the list-cell is selected and focused */ .list-view:focused .list-cell:filled:focused:selected { -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; -fx-background-insets: 0, 1, 2; -fx-background: -fx-accent; -fx-text-fill: -fx-selection-bar-text; } .list-view:focused .list-cell:filled:selected, .list-view:focused .list-cell:filled:selected:hover { -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar; -fx-text-fill: -fx-selection-bar-text; } .list-view:focused .list-cell:filled:focused:selected:hover { -fx-background: -fx-accent; -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; -fx-background-insets: 0, 1, 2; -fx-text-fill: -fx-selection-bar-text; } /* When the ListView is _not_ focused, we show alternate selection colors */ .list-cell:filled:selected:focused, .list-cell:filled:selected, .list-view:horizontal .list-cell:filled:selected { -fx-background-color: lightgray; -fx-text-fill: -fx-selection-bar-text; } .list-cell:filled:selected:focused:disabled, .list-cell:filled:selected:disabled { -fx-opacity: -fx-disabled-opacity; } .list-cell:filled:hover { -fx-background-color: -fx-cell-hover-color; -fx-text-fill: -fx-text-inner-color; } .list-view:focused .list-cell:filled:focused:hover { -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; -fx-background-insets: 0, 1, 2; -fx-text-fill: -fx-text-inner-color; } .list-view:horizontal .list-cell:filled:selected, .list-view:horizontal .list-cell:filled:selected:hover { -fx-background-color: linear-gradient(to right, derive(-fx-accent,-7%), derive(-fx-accent,-25%)); } /******************************************************************************* * * * TreeView and TreeCell * * * ******************************************************************************/ .tree-view { -fx-skin: "com.sun.javafx.scene.control.skin.TreeViewSkin"; -fx-background-color: -fx-box-border, -fx-control-inner-background; -fx-background-insets: 0, 1; /* There is some oddness if padding is in em values rather than pixels, in particular, the left border of the control doesn't show. */ -fx-padding: 1; /* 0.083333em; */ } .tree-view:focused { -fx-background-color: -fx-focus-color,-fx-box-border,-fx-control-inner-background; -fx-background-insets: -1.4, 0, 1; -fx-background-radius: 1.4, 0, 0; /* There is some oddness if padding is in em values rather than pixels, in particular, the left border of the control doesn't show. */ -fx-padding: 1; /* 0.083333em; */ } .tree-view .scroll-bar:vertical{ -fx-background-insets: 0, 0 0 0 1; -fx-padding: 0.0 0.0 0.0 0.0; } .tree-view .scroll-bar:horizontal{ -fx-background-insets: 0, 1 0 0 0; -fx-padding: 0.0 0.0 0.0 0.0; } .tree-view:disabled { -fx-opacity: -fx-disabled-opacity; } .tree-view .corner { -fx-background-color: -fx-box-border, -fx-base; -fx-background-insets: 0, 1 0 0 1; } .tree-cell { -fx-skin: "com.sun.javafx.scene.control.skin.TreeCellSkin"; -fx-background-color: -fx-control-inner-background; -fx-padding: 0.25em; /* 3 */ -fx-text-fill: -fx-text-inner-color; -fx-indent: 10; } .tree-cell .label { -fx-padding: 0.0em 0.0em 0.0em 0.25em; /* 0 0 0 3 */ } .tree-view:focused .tree-cell:focused { -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; -fx-background-insets: 0, 1, 2; } .tree-view:focused .tree-cell:filled:focused:selected { -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; -fx-background-insets: 0, 1, 2; -fx-background: -fx-accent; -fx-text-fill: -fx-selection-bar-text; } .tree-view:focused .tree-cell:filled:selected, .tree-view:focused .tree-cell:filled:selected:hover { -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar; -fx-text-fill: -fx-selection-bar-text; } .tree-view:focused .tree-cell:filled:focused:selected:hover { -fx-background: -fx-accent; -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; -fx-background-insets: 0, 1, 2; -fx-text-fill: -fx-selection-bar-text; } /* When the TreeView is _not_ focused, we show alternate selection colors */ .tree-cell:filled:selected:focused, .tree-cell:filled:selected { -fx-background-color: lightgray; -fx-text-fill: -fx-selection-bar-text; } .tree-cell:filled:selected:focused:disabled, .tree-cell:filled:selected:disabled { -fx-opacity: -fx-disabled-opacity; } .tree-cell .tree-disclosure-node { /** put a bit of padding around the disclosure node to make the clicking region larger */ -fx-padding: 4 2 4 8; -fx-background-color: transparent; } .tree-cell .tree-disclosure-node:disabled { -fx-opacity: -fx-disabled-opacity; } .tree-cell .tree-disclosure-node .arrow { -fx-background-color: -fx-mark-color; -fx-padding: 0.333333em; /* 4 */ -fx-shape: "M 0 -4 L 8 0 L 0 4 z"; } .tree-cell:expanded .tree-disclosure-node .arrow { -fx-rotate: 90; } .tree-cell:filled:selected .tree-disclosure-node .arrow { -fx-background-color: -fx-selection-bar-text; } .tree-cell:filled:hover { -fx-background-color: -fx-cell-hover-color; -fx-text-fill: -fx-text-inner-color; } .tree-cell:filled:hover .tree-disclosure-node .arrow { -fx-background-color: -fx-mark-color; } .tree-view:focused .tree-cell:filled:focused:hover { -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; -fx-background-insets: 0, 1, 2; -fx-text-fill: -fx-text-inner-color; } .tree-cell:filled:selected:hover .tree-disclosure-node .arrow { -fx-background-color: -fx-selection-bar-text; } /******************************************************************************* * * * MenuButton * * * ******************************************************************************/ .menu-button { -fx-skin: "com.sun.javafx.scene.control.skin.MenuButtonSkin"; -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: 5, 5, 4, 3; -fx-padding: 0.0em; /* 0 */ -fx-text-fill: -fx-text-base-color; } /* TODO workaround for RT-19062 */ .menu-button .label { -fx-text-fill: -fx-text-base-color; } .menu-button:focused { -fx-color: -fx-focused-base; -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: -1.4, 0, 1, 2; -fx-background-radius: 6.4, 4, 5, 3; } .menu-button:hover { -fx-color: -fx-hover-base; } .menu-button:armed { -fx-color: -fx-pressed-base; } /* The MenuButton skin uses an inner Label part */ .menu-button .label { -fx-padding: 0.166667em 1.5em 0.25em 0.833333em; /* 2 18 3 10 */ } .menu-button .arrow-button { -fx-background-insets: 0; -fx-background-radius: 0; -fx-padding: 0.5em 0.416667em 0.5em 0.0em; /* 6 5 6 0 */ } .menu-button .arrow { -fx-background-insets: 1 0 -1 0, 0; -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; -fx-padding: 0.25em; /* 3 */ -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z"; } .menu-button:openvertically .arrow { -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"; } .menu-button:disabled { -fx-opacity: -fx-disabled-opacity; } .menu-button:show-mnemonics .mnemonic-underline { -fx-stroke: -fx-text-fill; } /******************************************************************************* * * * SplitMenuButton * * * ******************************************************************************/ .split-menu-button { -fx-skin: "com.sun.javafx.scene.control.skin.SplitMenuButtonSkin"; -fx-background-color: -fx-shadow-highlight-color; -fx-background-insets: 0 0 -1 0; -fx-background-radius: 5; -fx-padding: 0.0em; /* 0 */ -fx-text-fill: -fx-text-base-color; } .split-menu-button:focused { -fx-color: -fx-focused-base; -fx-background-color: -fx-focus-color; -fx-background-insets: -1.4; -fx-background-radius: 6.4; } .split-menu-button .label:hover { -fx-color: -fx-hover-base; } .split-menu-button:armed .label { -fx-color: -fx-pressed-base; } /* The SplitMenuButton skin uses an inner Label part */ .split-menu-button .label { -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: 0, 1, 2; -fx-background-radius: 5 0 0 5, 4 0 0 4, 3 0 0 3; -fx-padding: 0.166667em 1.5em 0.25em 0.833333em; /* 2 18 3 10 */ } .split-menu-button .arrow-button { -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: 0, 1, 2; -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0; -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */ } .split-menu-button .arrow-button:hover { -fx-color: -fx-hover-base; } .split-menu-button .arrow-button:armed { -fx-color: -fx-pressed-base; } .split-menu-button .arrow { -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; -fx-background-insets: 1 0 -1 0, 0; -fx-padding: 0.25em; /* 3 */ -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z"; } .split-menu-button:openvertically .arrow { -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"; } .split-menu-button:disabled { -fx-opacity: -fx-disabled-opacity; } .split-menu-button:show-mnemonics .mnemonic-underline { -fx-stroke: -fx-text-fill; } /******************************************************************************* * * * Tooltip * * * ******************************************************************************/ .tooltip { -fx-skin: "com.sun.javafx.scene.control.skin.TooltipSkin"; -fx-background-color: linear-gradient(#cec340, #a59c31), linear-gradient(#fefefc, #e6dd71), linear-gradient(#fef592, #e5d848); -fx-background-insets: 0,1,2; -fx-background-radius: 0 0 13 0; -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */ -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 ); } .page-corner { -fx-padding: 4.5 4.5 4.5 4.5; -fx-background-color: linear-gradient( from 0% 0% to 50% 50%, #fcf7b6, #a59c31); -fx-shape: "M0,0H9L0,9Z"; -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 4 , 0.0 , 0 , 0 ); } /******************************************************************************* * * * Toolbar * * * * Corresponding hex values for the color derivations used below are: * * derive(-fx-base,-20%); #a6a6a6 * * derive(-fx-base,-30%); #929292 * * derive(-fx-base,-35%); #878787 * * derive(-fx-base,-50%); #686868 * * derive(-fx-base,-60%); #535353 * * derive(-fx-base,65%); #efefef * * * ******************************************************************************/ .tool-bar { -fx-skin: "com.sun.javafx.scene.control.skin.ToolBarSkin"; } .tool-bar:vertical { -fx-background: derive(-fx-base,-20%); -fx-background-color: linear-gradient(to right, derive(-fx-base,-30%), derive(-fx-base,-60%)), linear-gradient(to right, derive(-fx-base,65%) 2%, derive(-fx-base,-20%) 95%); -fx-background-insets: 0, 0 1 0 1; -fx-background-radius: 0 ; -fx-padding: 0.833em 0.416667em 0.833em 0.416667em; /* 10 5 10 5 */ -fx-spacing: 0.333em; /* 4 */ -fx-alignment: TOP_LEFT; } .tool-bar .separator:vertical .line { -fx-border-style: solid; -fx-background-color: null; -fx-border-color: transparent derive(-fx-base,-35%) transparent transparent; } .tool-bar .separator:horizontal .line { -fx-border-style: solid; -fx-background-color: null; -fx-border-color: transparent transparent derive(-fx-base,-35%) transparent; } .tool-bar:vertical .separator { -fx-orientation: horizontal; -fx-padding: 0.0em 0.0835em 0.0em 0.0835em; /* 0 1 0 1 */ } .tool-bar:horizontal { -fx-background: derive(-fx-base,-30%); -fx-background-color: linear-gradient(to bottom, derive(-fx-base,-30%), derive(-fx-base,-60%)), linear-gradient(to bottom, derive(-fx-base,65%) 2%, derive(-fx-base,-20%) 95%); -fx-background-insets: 0, 1 0 1 0; -fx-background-radius: 0, 0 ; -fx-padding: 0.416667em 0.833em 0.416667em 0.833em; /* 5 10 5 10 */ -fx-spacing: 0.333em; /* 4 */ -fx-alignment: CENTER_LEFT; } .tool-bar:horizontal .separator { -fx-orientation: vertical; -fx-padding: 0.0835em 0.0em 0.0835em 0.0em; /* 1 0 1 0 */ } .tool-bar-overflow-button { -fx-background-color: transparent; -fx-padding: 0.666667em 0.916667em 0em 0em; /* 8 11 0 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; } /******************************************************************************* * * * ProgressBar * * * ******************************************************************************/ .progress-bar { -fx-skin: "com.sun.javafx.scene.control.skin.ProgressBarSkin"; -fx-background-color: -fx-box-border, linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%)); -fx-background-insets: 0, 1; -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: -fx-box-border, linear-gradient(to bottom, derive(-fx-accent,95%), derive(-fx-accent,10%)), linear-gradient(to bottom, derive(-fx-accent,38%), -fx-accent); -fx-background-insets: 0, 1, 2; -fx-padding: 0.416667em; /* 5 */ } .progress-bar:indeterminate .bar { -fx-background-color: linear-gradient(to left, transparent, -fx-accent); } .progress-bar .track { -fx-background-color: -fx-box-border, linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%)); -fx-background-insets: 0, 1; } .progress-bar:disabled { -fx-opacity: -fx-disabled-opacity; } /******************************************************************************* * * * ProgressIndicator * * * ******************************************************************************/ .progress-indicator { -fx-skin: "com.sun.javafx.scene.control.skin.ProgressIndicatorSkin"; -fx-progress-color: dodgerblue; } .progress-indicator .indicator { -fx-background-color: -fx-box-border, -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: 1 0 -1 0, 0, 1, 2; -fx-padding: 0.083333em; /* 1 */ } .progress-indicator .progress { -fx-background-color: linear-gradient(to bottom, derive(-fx-box-border,38%), derive(-fx-box-border,-60%)), linear-gradient(to bottom, derive(-fx-box-border,38%), -fx-box-border); -fx-background-insets: 0, 1; -fx-padding: 0.75em; /* 9 */ } /* TODO: scaling the shape seems to make it disappear */ .progress-indicator .tick { -fx-background-color: -fx-mark-color, white; -fx-background-insets: 1 0 -1 0, 0; -fx-padding: 0.416667em; /* 5 */ -fx-shape: "M 0,5 L 2.5,5 L 3.7,7.5 L 7.5,0 L 10,0 L 5,10 L 2.5,10 Z"; -fx-scale-shape: false; } .progress-indicator:indeterminate .spinner { -fx-padding: 0.833333em; /* 10 */ } .progress-indicator .percentage { -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */ -fx-fill: -fx-text-background-color; } .progress-indicator:disabled { -fx-opacity: -fx-disabled-opacity; } /******************************************************************************* * * * TableView * * * ******************************************************************************/ .table-view { -fx-skin: "com.sun.javafx.scene.control.skin.TableViewSkin"; -fx-background-color: -fx-box-border, -fx-control-inner-background; -fx-background-insets: 0,1; /* There is some oddness if padding is in em values rather than pixels, in particular, the left border of the control doesn't show. */ -fx-padding: 1; /* 0.083333em; */ /* Constants used throughout the tableview. * TODO: Should these be derived from the palette in .scene? */ -fx-table-header-border-color: #959595; /* -fx-table-header-background-color: linear (0%,0%) to (0%,100%) stops (80%, #bbbbbb) (10%, #f6f6f6);*/ -fx-table-cell-border-color: #bbbbbb; } /** Draws focus border around tableview */ .table-view:focused { -fx-background-color: -fx-focus-color,-fx-box-border,-fx-control-inner-background; -fx-background-insets: -1.4, 0, 1; -fx-background-radius: 1.4, 0, 0; /* There is some oddness if padding is in em values rather than pixels, in particular, the left border of the control doesn't show. */ -fx-padding: 1; /* 0.083333em; */ } .table-view:disabled { -fx-opacity: -fx-disabled-opacity; } .table-view .scroll-bar:vertical{ -fx-background-insets: 0, 0 0 0 1; -fx-padding: 0.0 0.0 0.0 0.0; } .table-view .scroll-bar:horizontal{ -fx-background-insets: 0, 1 0 0 0; -fx-padding: 0.0 0.0 0.0 0.0; } .table-view .corner { -fx-background-color: -fx-box-border, -fx-base; -fx-background-insets: 0, 1 0 0 1; } /* Each row in the table is a table-row-cell. Inside a table-row-cell is any number of table-cell. */ .table-row-cell { -fx-skin: "com.sun.javafx.scene.control.skin.TableRowSkin"; -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background; -fx-background-insets: 0, 0 0 1 0; -fx-padding: 0.0em; /* 0 */ -fx-text-fill: -fx-text-inner-color; } .table-row-cell:odd { -fx-background-color: -fx-table-cell-border-color, derive(-fx-control-inner-background,-5%); -fx-background-insets: 0, 0 0 1 0; } .table-row-cell:focused { -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; -fx-background-insets: 0, 1, 2; } .table-row-cell:focused:odd { -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, derive(-fx-control-inner-background,-5%); -fx-background-insets: 0, 1, 2; } /* When the table-row-cell is selected and focused */ .table-view:focused .table-row-cell:filled:focused:selected { -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; -fx-background-insets: 0, 1, 2; -fx-background: -fx-accent; -fx-text-fill: -fx-selection-bar-text; } .table-view:focused .table-row-cell:filled:selected .table-cell { -fx-text-fill: -fx-selection-bar-text; } .table-view:focused .table-row-cell:filled:selected, .table-view:row-selection .table-row-cell:filled:hover:selected { -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar; -fx-text-fill: -fx-selection-bar-text; } .table-view:focused .table-row-cell:filled:focused:selected:hover { -fx-background: -fx-accent; -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; -fx-background-insets: 0, 1, 2; -fx-text-fill: -fx-selection-bar-text; } /* When the TableView is _not_ focused, we show alternate selection colors */ .table-row-cell:filled:selected:focused, .table-row-cell:filled:selected { -fx-background-color: lightgray; -fx-text-fill: -fx-selection-bar-text; } .table-row-cell:selected:disabled { -fx-opacity: -fx-disabled-opacity; } .table-view:row-selection .table-row-cell:filled:hover { -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color; -fx-background-insets: 0, 0 0 1 0; -fx-text-fill: -fx-text-inner-color; } .table-view:row-selection .table-row-cell:filled:focused:hover { -fx-background-color: -fx-table-cell-border-color, -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; -fx-background-insets: 0, 0 0 1 0, 1 1 2 1, 2 2 3 2, 3 3 4 3; -fx-text-fill: -fx-text-inner-color; } .table-cell { -fx-skin: "com.sun.javafx.scene.control.skin.TableCellSkin"; -fx-padding: 0.166667em; /* 2px, plus border adds 1px */ -fx-background-color: transparent; -fx-border-color: transparent -fx-table-cell-border-color transparent transparent; -fx-border-width: 0.083333em; /* 1 */ -fx-cell-size: 2.0em; /* 24 */ -fx-text-fill: -fx-text-inner-color; } /* When in constrained resize mode, the right-most visible cell should not have a right-border, as it is not possible to get this cleanly out of view without introducing horizontal scrollbars (see RT-14886). */ .table-view:constrained-resize .table-cell:last-visible { -fx-border-color: transparent; } .table-view:constrained-resize .column-header:last-visible { -fx-border-width: 0.083333em 0.0em 0.083333em 0.083333em, 0.083333em 0.0em 0.083333em 0.083333em; } .table-view:constrained-resize .filler { -fx-border-color: derive(-fx-base, 80%) linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%) derive(-fx-base, 10%) linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), /* Outer border: */ transparent -fx-table-header-border-color -fx-table-header-border-color -fx-table-header-border-color; -fx-border-insets: 0 1 1 1, 0 0 0 0; } .table-view:focused .table-cell:focused { -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; } .table-view:focused .table-row-cell:filled .table-cell:focused:selected { -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; -fx-background: -fx-accent; -fx-text-fill: -fx-selection-bar-text; } .table-view:focused .table-row-cell:filled .table-cell:selected, .table-view:cell-selection .table-row-cell:filled .table-cell:hover:selected { -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar; -fx-text-fill: -fx-selection-bar-text; -fx-background-insets: 0 0 1 0; } .table-view:focused .table-row-cell:filled .table-cell:focused:selected:hover { -fx-background: -fx-accent; -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; -fx-text-fill: -fx-selection-bar-text; } /* When the TableView is _not_ focused, we show alternate selection colors */ .table-row-cell:filled .table-cell:selected:focused, .table-row-cell:filled .table-cell:selected { -fx-background-color: lightgray; -fx-text-fill: -fx-selection-bar-text; } .table-cell:selected:disabled { -fx-opacity: -fx-disabled-opacity; } /*.table-cell:focused { -fx-background-color: -fx-focus-color, -fx-control-inner-background; -fx-background-insets: 0, 1.4; }*/ .table-view:cell-selection .table-row-cell:filled .table-cell:hover { -fx-background-color: -fx-cell-hover-color; -fx-text-fill: -fx-text-inner-color; -fx-background-insets: 0 0 1 0; } .table-view:cell-selection .table-row-cell:filled .table-cell:focused:hover { -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; -fx-text-fill: -fx-text-inner-color; } /* The column-resize-line is shown when the user is attempting to resize a column. */ .table-view .column-resize-line { -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar; -fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */ } /* This is the area behind the column headers. An ideal place to specify background and border colors for the whole area (not individual column-header's). */ .table-view .column-header-background { -fx-background-color: -fx-body-color; -fx-padding: 0; } /* The column header row is made up of a number of column-header, one for each TableColumn, and a 'filler' area that extends from the right-most column to the edge of the tableview, or up to the 'column control' button. */ .table-view .column-header, .table-view .filler { -fx-text-fill: -fx-selection-bar-text; /* TODO: for some reason, this doesn't scale. */ -fx-font-size: 1.083333em; /* 13pt - 1 more than the default font */ -fx-size: 25; -fx-border-style: solid; -fx-border-color: /* Inner border: we have different colours along the top, right, bottom and left. Refer to RT-12298 for the spec. */ derive(-fx-base, 80%) linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%) derive(-fx-base, 10%) linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), /* Outer border: */ transparent -fx-table-header-border-color -fx-table-header-border-color transparent; -fx-border-insets: 0 1 1 0, 0 0 0 0; -fx-border-width: 0.083333em, 0.083333em; } .table-view .column-header .sort-order { -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */ } .table-view .show-hide-columns-button { -fx-background-color: -fx-body-color; -fx-border-color: /* inner border: A copy of the inner border used above in the general column header area. */ derive(-fx-base, 80%) linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), derive(-fx-base, 10%) linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), /* outer border: Slightly different to the above*/ transparent transparent -fx-table-header-border-color -fx-table-header-border-color; -fx-border-insets: 0 0 1 1, 0 0 0 0; } .table-view .show-hide-column-image { -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; -fx-background-insets: 1 0 -1 0, 0; -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"; } /*.nested-column-header .column-header { -fx-background-color: transparent; }*/ /* When a column is being 'dragged' to be placed in a different position, there is a region that follows along the column header area to indicate where the column will be dropped. This region can be styled using the .column-drag-header name. */ .table-view .column-drag-header { -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 { -fx-background-color: darkgray; -fx-opacity: 0.3; } .table-view .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"; } /* This is shown when the table has no rows and/or no columns. */ .table-view .empty-table { -fx-background-color: white; -fx-font-size: 1.166667em; /* 14pt - 2 more than the default font */ } /******************************************************************************* * * * TitledPane * * * ******************************************************************************/ .titled-pane { -fx-skin: "com.sun.javafx.scene.control.skin.TitledPaneSkin"; -fx-text-fill: -fx-text-base-color; } .titled-pane:focused { -fx-text-fill: white; } .titled-pane > .title { -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color; -fx-background-insets: 0, 1, 2; -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0; -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */ } .titled-pane:focused > .title { -fx-color: -fx-focus-color; } .titled-pane > .title > .arrow-button { -fx-background-color: null; -fx-background-insets: 0; -fx-background-radius: 0; -fx-padding: 0.0em 0.25em 0.0em 0.0em; /* 0 3 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:collapsed > .title > .arrow-button .arrow { -fx-rotate: -90; } .titled-pane > *.content { -fx-background-color: -fx-box-border, linear-gradient(to bottom, derive(-fx-color,-02%), derive(-fx-color,65%) 12%, derive(-fx-color,23%) 88%, derive(-fx-color,50%) 99%, -fx-box-border); -fx-background-insets: 0, 0 1 1 1; -fx-padding: 0.167em; } .titled-pane:focused > .title > .arrow-button .arrow { -fx-background-color: white; } /******************************************************************************* * * * Accordion * * * ******************************************************************************/ .accordion { -fx-skin: "com.sun.javafx.scene.control.skin.AccordionSkin"; } .accordion .titled-pane .title { -fx-background-color: -fx-box-border, -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; } .accordion .titled-pane:focused > .title { -fx-color: -fx-focus-color; } .accordion .titled-pane:focused { -fx-text-fill: white; } .accordion .titled-pane:focused > .title > .arrow-button .arrow { -fx-background-color: white; } .accordion .titled-pane:focused .titled-pane:collapsed > .title > .arrow-button .arrow { -fx-background-color: white; } .accordion .titled-pane:collapsed:focused > .title { -fx-color: -fx-focus-color; } .accordion .titled-pane:expanded:focused > .title { -fx-color: -fx-focus-color; } .accordion .titled-pane:hover > .title { -fx-color: -fx-hover-base; } /******************************************************************************* * * * SplitPane * * * ******************************************************************************/ .split-pane > * > * > .table-view { -fx-padding: 0px; } .split-pane > * > * > .list-view { -fx-padding: 0px; } .split-pane > * > * > .tree-view { -fx-padding: 0px; } .split-pane > * > * > .scroll-pane { -fx-padding: 0px; } .split-pane > * > * > .split-pane { -fx-background-insets: 0, 0; -fx-padding: 0; } .split-pane { -fx-skin: "com.sun.javafx.scene.control.skin.SplitPaneSkin"; -fx-background-color: -fx-box-border, -fx-control-inner-background; -fx-background-insets: 0, 1; -fx-padding: 1; } .split-pane *.split-pane-divider { -fx-padding: 0 2 0 2; /* 0 3 0 3 */ } /* horizontal the two nodes are placed to the left/right of each other. */ .split-pane:horizontal > * > .split-pane-divider { -fx-border-color: transparent -fx-box-border transparent #BBBBBB; -fx-background-color: transparent, -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-border-color: #BBBBBB transparent -fx-box-border transparent; -fx-background-color: transparent, -fx-inner-border; -fx-background-insets: 0, 1 0 1 0; } .split-pane *.horizontal-grabber { -fx-padding: 5 1 5 1; -fx-background-color: #FFFFFF, -fx-box-border; -fx-background-insets: 1 0 -1 0, 0; -fx-shape: "M0 0 L0 0 L2 0 L2 2 L0 2 Z M0 4 L0 4 L2 4 L2 6 L0 6 Z M0 8 L0 8 L2 8 L2 10 L0 10 Z"; } .split-pane *.vertical-grabber { -fx-padding: 1 5 1 5; -fx-background-color: #FFFFFF, -fx-box-border; -fx-background-insets: 1 0 -1 0, 0; -fx-shape: "M0 0 L0 0 L2 0 L2 2 L0 2 Z M4 0 L4 0 L4 2 L6 2 L6 0 Z M8 0 L8 0 L8 2 L10 2 L10 0 Z"; } /******************************************************************************* * * * TabPane * * * ******************************************************************************/ .tab-pane { -fx-skin: "com.sun.javafx.scene.control.skin.TabPaneSkin"; /* -fx-tab-min-width: 4.583em; 55 */ /* -fx-tab-max-width: 4.583em; 55 */ -fx-tab-min-height: 2em; /* 24 */ -fx-tab-max-height: 2em; /* 24 */ } .tab .tab-label { -fx-skin: "com.sun.javafx.scene.control.skin.LabelSkin"; -fx-background-color: transparent; -fx-alignment: CENTER; -fx-text-fill: -fx-text-base-color; } /* .tab *.tab-label Text { -fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1); }*/ .tab-content-area { -fx-background-color: -fx-control-inner-background; -fx-padding: 0.0em; /* 0 */ /* -fx-opacity: -fx-disabled-opacity;*/ } .tab { /* This is how it is done in Button, but the -1 inset caused a white line */ /* to appear beneath the tab, which looks bad, so it's taken out below. */ /* -fx-background-color: -fx-shadow-highlight-color, -fx-tab-border-color, -fx-inner-border, -fx-body-color; -fx-background-radius: 5 5 0 0, 5 5 0 0, 4 4 0 0, 3 3 0 0; -fx-background-insets: 0 0 -1 0, 0, 1, 2;*/ -fx-background-insets: 0, 1, 2; -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0; -fx-padding: 0.083333em 0.5em 0.083333em 0.5em; /* 1 6 1 6 */ /* -fx-text-fill: -fx-text-base-color;*/ } .tab:top { -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color; } .tab:right { -fx-background-color: -fx-tab-border-color, -fx-inner-border-bottomup, -fx-body-color-bottomup; } .tab:bottom { -fx-background-color: -fx-tab-border-color, -fx-inner-border-bottomup, -fx-body-color-bottomup; } .tab:left { -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color; } .tab:hover { -fx-color: -fx-hover-base; } .tab:selected { /* -fx-background-color: white;*/ /* -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color; -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0; -fx-background-insets: 0, 1 1 0 1, 2 2 0 2;*/ -fx-background-color: -fx-tab-border-color, -fx-control-inner-background; -fx-background-insets: 0, 1 1 0 1; -fx-background-radius: 5 5 0 0, 4 4 0 0; } .tab:disabled { -fx-opacity: -fx-disabled-opacity; } .tab:disabled:hover { -fx-color: -fx-base; -fx-opacity: -fx-disabled-opacity; } .tab-pane *.tab-header-background { -fx-background-color: -fx-outer-border, -fx-inner-border, derive(-fx-color, -20%); -fx-effect: innershadow(two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 0); } /*.tab-pane *.tab-header-area {*/ /* I would like to use -fx-tab-border-color here, but for some reason it */ /* just isn't the correct color, even though it works in :top above */ /* -fx-background-color: -fx-tab-border-color, lightgray;*/ /*}*/ .tab-pane:top *.tab-header-area { -fx-background-insets: 0, 0 0 1 0; -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */ } .tab-pane:bottom *.tab-header-area { -fx-background-insets: 0, 1 0 0 0; -fx-padding: 0 0.166667em 0.416667em 0.833em; /* 0 2 5 0 */ } .tab-pane:left *.tab-header-area { -fx-background-insets: 0, 0 1 0 0; -fx-padding: 0.833em 0.0em 0.166667em 0.416667em; /* 10 0 2 5 */ } .tab-pane:right *.tab-header-area { -fx-background-insets: 0, 0 0 0 1; -fx-padding: 0.833em 0.416667em 0.166667em 0.0em; /* 10 5 2 0 */ } .tab-pane .headers-region { -fx-effect: dropshadow(two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0, 0); } /* TODO: scaling the shape seems to make it way too large */ .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-close-button:hover { -fx-background-color: derive(-fx-mark-color, -30%); } /* CONTROL BUTTONS */ .control-buttons-tab { -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color; -fx-background-insets: 0, 1, 2; -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0; -fx-padding: 0.083333em 0.25em 0.083333em 0.25em; /* 1 3 1 3 */ } .tab-down-button { -fx-background-color: transparent; -fx-padding: 0.0em 0.416667em 0.0em 0.416667em; /* 0 5 0 5 */ } .tab-down-button:hover { -fx-background-color: -fx-body-color; -fx-color: -fx-hover-base; } .tab-down-button .arrow { -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; -fx-background-insets: 1 0 -1 0, 0; -fx-padding: 0.238083em 0.416667em 0.238083em 0.416667em; /* 2.857 5 2.857 5 */ -fx-shape: "M 0 0 H 7 L 3.5 4 z"; } /* FLOATING TABS CUSTOMISATION */ .tab-pane.floating *.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-tab-border-color, -fx-control-inner-background; -fx-background-insets: 0, 1; -fx-background-radius: 5, 4; } .tab-pane.floating *.tab { -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color; -fx-background-insets: 0, 1, 2; -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0; } .tab-pane.floating *.tab:selected { -fx-background-color: -fx-tab-border-color, -fx-control-inner-background; -fx-background-insets: 0 0 -1 0, 1 1 -1 1; -fx-background-radius: 5 5 0 0, 4 4 0 0; } /*.tab-pane:floating *.control-buttons-tab { -fx-padding: 0.083333em 0.25em 0.083333em 0.25em; -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color; -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0; -fx-background-insets: 0, 1 1 0 1, 2 2 0 2; }*/ /* ====== CHART TOP LEVEL ITEMS =========================================================== */ .chart { -fx-padding: 5px; } .chart-content { -fx-padding: 10px; } .chart-title { -fx-font-size: 1.4em; } .chart-legend { -fx-background-color: #cccccc, #eeeeee; -fx-background-insets: 0,1; -fx-background-radius: 6,5; -fx-padding: 6px; } /* ====== AXIS ============================================================================ */ .axis { -fx-tick-label-font: 0.833333em System; /* 10 pix */ -fx-tick-label-fill: -fx-text-background-color; } .axis:top { -fx-border-color: transparent transparent #666666 transparent; } .axis:right { -fx-border-color: transparent transparent transparent #666666; } .axis:bottom { -fx-border-color: #666666 transparent transparent transparent; } .axis:left { -fx-border-color: transparent #666666 transparent transparent; } .axis-tick-mark { -fx-fill: null; -fx-stroke: #666666; } .axis-minor-tick-mark { -fx-fill: null; -fx-stroke: #AAAAAA; } .axis .text { -fx-font-smoothing-type: lcd; } /* ====== CHART PLOT BACKGROUND =========================================================== */ .chart-plot-background { -fx-background-color: #f5f5f5; } .chart-vertical-grid-lines { -fx-stroke: #dddddd; } .chart-horizontal-grid-lines { -fx-stroke: #dddddd; } .chart-alternative-column-fill { -fx-fill: #eeeeee; -fx-stroke: transparent; -fx-stroke-width: 0; } .chart-alternative-row-fill { -fx-fill: #eeeeee; -fx-stroke: transparent; -fx-stroke-width: 0; } .chart-vertical-zero-line { -fx-stroke: #999999; } .chart-horizontal-zero-line { -fx-stroke: #999999; } /* ====== SCATTER CHART =========================================================== */ .chart-symbol { /* solid circle */ -fx-background-color: #f9d900; -fx-background-radius: 5px; -fx-padding: 5px; } .default-color1.chart-symbol { /* solid square */ -fx-background-color: #a9e200; -fx-background-radius: 0; } .default-color2.chart-symbol { /* solid diamond */ -fx-background-color: #22bad9; -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: #0181e2; -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: #2f357f; -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: #860061, white; -fx-background-insets: 0, 2; -fx-background-radius: 5px; -fx-padding: 5px; } .default-color6.chart-symbol { /* hollow square */ -fx-background-color: #c62b00, white; -fx-background-insets: 0, 2; -fx-background-radius: 0; } .default-color7.chart-symbol { /* hollow diamond */ -fx-background-color: #ff5700, 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"; } /* ====== LINE CHART =========================================================== */ .chart-line-symbol { -fx-background-color: #f9d900, white; -fx-background-insets: 0, 2; -fx-background-radius: 5px; -fx-padding: 5px; } .chart-series-line { -fx-stroke: #f9d900; -fx-stroke-width: 4px; -fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.3) , 8, 0.0 , 0 , 3 ); } .default-color0.chart-line-symbol { -fx-background-color: #f9d900, white; } .default-color1.chart-line-symbol { -fx-background-color: #a9e200, white; } .default-color2.chart-line-symbol { -fx-background-color: #22bad9, white; } .default-color3.chart-line-symbol { -fx-background-color: #0181e2, white; } .default-color4.chart-line-symbol { -fx-background-color: #2f357f, white; } .default-color5.chart-line-symbol { -fx-background-color: #860061, white; } .default-color6.chart-line-symbol { -fx-background-color: #c62b00, white; } .default-color7.chart-line-symbol { -fx-background-color: #ff5700, white; } .default-color0.chart-series-line { -fx-stroke: #f9d900; } .default-color1.chart-series-line { -fx-stroke: #a9e200; } .default-color2.chart-series-line { -fx-stroke: #22bad9; } .default-color3.chart-series-line { -fx-stroke: #0181e2; } .default-color4.chart-series-line { -fx-stroke: #2f357f; } .default-color5.chart-series-line { -fx-stroke: #860061; } .default-color6.chart-series-line { -fx-stroke: #c62b00; } .default-color7.chart-series-line { -fx-stroke: #ff5700; } /* ====== AREA CHART =========================================================== */ .chart-area-symbol { -fx-background-color: #f9d900, 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: #f9d900, white; } .default-color1.chart-area-symbol { -fx-background-color: #a9e200, white; } .default-color2.chart-area-symbol { -fx-background-color: #22bad9, white; } .default-color3.chart-area-symbol { -fx-background-color: #0181e2, white; } .default-color4.chart-area-symbol { -fx-background-color: #2f357f, white; } .default-color5.chart-area-symbol { -fx-background-color: #860061, white; } .default-color6.chart-area-symbol { -fx-background-color: #c62b00, white; } .default-color7.chart-area-symbol { -fx-background-color: #ff5700, white; } .chart-series-area-line { -fx-stroke: #f9d900; -fx-stroke-width: 1px; } .default-color0.chart-series-area-line { -fx-stroke: #c2a902; } .default-color1.chart-series-area-line { -fx-stroke: #88b501; } .default-color2.chart-series-area-line { -fx-stroke: #22bad9; } .default-color3.chart-series-area-line { -fx-stroke: #0181e2; } .default-color4.chart-series-area-line { -fx-stroke: #2f357f; } .default-color5.chart-series-area-line { -fx-stroke: #860061; } .default-color6.chart-series-area-line { -fx-stroke: #c62b00; } .default-color7.chart-series-area-line { -fx-stroke: #ff5700; } .chart-series-area-fill { -fx-stroke: null; -fx-fill: #f9d90044; } .default-color0.chart-series-area-fill { -fx-fill: #f9d90044; } .default-color1.chart-series-area-fill { -fx-fill: #a9e20044; } .default-color2.chart-series-area-fill { -fx-fill: #22bad944; } .default-color3.chart-series-area-fill { -fx-fill: #0181e244; } .default-color4.chart-series-area-fill { -fx-fill: #2f357f44; } .default-color5.chart-series-area-fill { -fx-fill: #86006144; } .default-color6.chart-series-area-fill { -fx-fill: #c62b0044; } .default-color7.chart-series-area-fill { -fx-fill: #ff570044; } .area-legend-symbol { -fx-padding: 6px; -fx-background-radius: 6px; /* makes sure this remains circular */ -fx-background-insets: 0, 3; } /* ====== BUBBLE CHART =========================================================== */ .bubble-legend-symbol { -fx-background-radius: 8px; -fx-padding: 8px; } .chart-bubble { -fx-bubble-fill: #f9d900; -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: #f9d900aa; } .default-color1.chart-bubble { -fx-bubble-fill: #a9e200aa; } .default-color2.chart-bubble { -fx-bubble-fill: #22bad9aa; } .default-color3.chart-bubble { -fx-bubble-fill: #0181e2aa; } .default-color4.chart-bubble { -fx-bubble-fill: #2f357faa; } .default-color5.chart-bubble { -fx-bubble-fill: #860061aa; } .default-color6.chart-bubble { -fx-bubble-fill: #c62b00aa; } .default-color7.chart-bubble { -fx-bubble-fill: #ff5700aa; } /* ====== BAR CHART =========================================================== */ /* TODO flip gradient vertical for negative bars */ .chart-bar { -fx-bar-fill: #22bad9; -fx-background-color: linear-gradient(derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)), linear-gradient(derive(-fx-bar-fill,80%), derive(-fx-bar-fill, 0%)), linear-gradient(derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%)); -fx-background-insets: 0,1,2; -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0; } .negative.chart-bar { -fx-background-color: linear-gradient(to top, derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)), linear-gradient(to top, derive(-fx-bar-fill, 80%), derive(-fx-bar-fill,0%)), linear-gradient(to top, derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%)); -fx-background-radius: 0 0 5 5, 0 0 4 4, 0 0 3 3; } .bar-chart:horizontal .chart-bar { -fx-background-color: linear-gradient(to left, derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)), linear-gradient(to left, derive(-fx-bar-fill,80%), derive(-fx-bar-fill, 0%)), linear-gradient(to left, derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%)); -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0; } .bar-chart:horizontal .negative.chart-bar { -fx-background-color: linear-gradient(to right, derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)), linear-gradient(to right, derive(-fx-bar-fill, 80%), derive(-fx-bar-fill, 0%)), linear-gradient(to right, derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%)); -fx-background-radius: 5 0 0 5, 4 0 0 4, 3 0 0 3; } .default-color0.chart-bar { -fx-bar-fill: #f9d900; } .default-color1.chart-bar { -fx-bar-fill: #a9e200; } .default-color2.chart-bar { -fx-bar-fill: #22bad9; } .default-color3.chart-bar { -fx-bar-fill: #0181e2; } .default-color4.chart-bar { -fx-bar-fill: #2f357f; } .default-color5.chart-bar { -fx-bar-fill: #860061; } .default-color6.chart-bar { -fx-bar-fill: #c62b00; } .default-color7.chart-bar { -fx-bar-fill: #ff5700; } .bar-legend-symbol { -fx-padding: 8px; } /* ====== PIE CHART ============================================================== */ .chart-pie { -fx-pie-color: #2f357f; -fx-background-color: radial-gradient(radius 100%, derive(-fx-pie-color,55%), derive(-fx-pie-color,-20%)); -fx-background-insets: 0; -fx-border-color: derive(-fx-pie-color,-30%); } .chart-pie-label { -fx-padding: 3px; } .chart-pie-label-line { -fx-stroke: #aaaaaa; -fx-fill: #aaaaaa; } .default-color0.chart-pie { -fx-pie-color: #f9d900; } .default-color1.chart-pie { -fx-pie-color: #a9e200; } .default-color2.chart-pie { -fx-pie-color: #22bad9; } .default-color3.chart-pie { -fx-pie-color: #0181e2; } .default-color4.chart-pie { -fx-pie-color: #2f357f; } .default-color5.chart-pie { -fx-pie-color: #860061; } .default-color6.chart-pie { -fx-pie-color: #c62b00; } .default-color7.chart-pie { -fx-pie-color: #ff5700; } .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; } /* -------------- CODE FOR THE NON-EDITABLE COMBO-BOX -------------- */ /* ------- MAIN BUTTON ------- */ .combo-box-base { -fx-skin: "com.sun.javafx.scene.control.skin.ComboBoxBaseSkin"; -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-radius: 5, 5, 4, 3; -fx-background-insets: 0 0 -1 0, 0, 1, 2; -fx-padding: 0; } .combo-box-base:hover { -fx-color: -fx-hover-base; } /*------- THIS SPECIFIES THE BUTTON COLOR WHEN THE POPUP MENU IS SHOWING -------*/ .combo-box-base:showing { -fx-color: -fx-pressed-base; } .combo-box-base:focused { -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-radius: 6.4, 4, 5, 3; -fx-background-insets: -1.4, 0, 1, 2; } .combo-box-base:disabled { -fx-opacity: .4; } /* ------- OPEN BUTTON ------- */ .combo-box-base .arrow-button { -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: 0, 1, 2; -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0; -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */ } /* -fx-background-color: null; -fx-background-insets: 0, 1, 2; -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0; -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; 6 5 6 5 }*/ /*.combo-box-base.split-button .arrow-button { -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: 0, 1, 2; -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0; -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; 6 5 6 5 }*/ /* ------- ARROW* ------- */ .combo-box-base .arrow { -fx-background-insets: 1 0 -1 0, 0; -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; -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"; } /* ------- POPUP MENU ------- */ /* --- .combo-box .popup-menu, .combo-box .menu-item, .combo-box .popup-menu .menu-item-radio all inherit from Menu Control's popup-menu. --- */ /* -------------- CODE FOR THE EDITABLE COMBO-BOX -------------- */ /* ------- TEXTBOX SEGMENT OF COMBO BOX ------- */ /*--- 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 .text-field { -fx-padding: 3 5 2 5; -fx-background-radius: 4 5 5 4, 3 4 4 3, 2 3 3 2; -fx-background-insets: 0 0 -1 0, 0, 1; -fx-vpos: CENTER; -fx-content-display: LEFT; } .combo-box-base:editable .text-field:focused { -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-control-inner-background; -fx-background-radius: 5.4, 3, 2; -fx-background-insets: -1.4, 0, 1; } .combo-box-base:editable:focused { -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-control-inner-background; -fx-background-radius: 5, 5, 4, 3; -fx-background-insets: 0 0 -1 0, 0, 1, 2; } /* -------------- STYLES FOR THE DEFAULT LISTVIEW-BASED COMBOBOX ------------- */ .combo-box { -fx-skin: "com.sun.javafx.scene.control.skin.ComboBoxListViewSkin"; } /* Customie 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: 3 0 2 7; -fx-cell-size: 1.66667em; /* 20 */ } .combo-box-popup .list-view { -fx-background-color: -fx-box-border, -fx-control-inner-background; -fx-background-insets: 0, 1; -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 ); } .combo-box-popup .list-view .list-cell { -fx-padding: 4 0 4 5; /* No alternate highlighting */ -fx-background-color: -fx-control-inner-background; } .combo-box-popup .list-view .list-cell:filled:selected, .combo-box-popup .list-view .list-cell:filled:selected:hover { -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar; -fx-text-fill: -fx-selection-bar-text; } .combo-box-popup .list-view .list-cell:filled:hover { -fx-background-color: -fx-cell-hover-color; -fx-text-fill: -fx-text-inner-color; } /* -------------------------- STYLES FOR THE COLOR-PICKER CONTROL ----- */ .color-picker { -fx-skin: "com.sun.javafx.scene.control.skin.ColorPickerSkin"; } .color-picker .arrow-button { -fx-background-color: null; -fx-background-insets: 0, 1, 2; -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0; -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */ } .color-picker .color-picker-label .text { -fx-padding: 0.0em 0.833333em 0.0em 0.0em; /* 0 10 0 0 */ } .color-picker .split-button .arrow-button { -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: 0, 1, 2; -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0; -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */ } .color-picker:hover { -fx-color: -fx-base; } .color-picker .split-button .arrow-button:hover { -fx-color: -fx-hover-base; } .color-picker .split-button .color-picker-label:hover { -fx-color: -fx-hover-base; } .color-picker .picker-color { -fx-padding: 4; -fx-background-color: null; } .color-picker .picker-color .picker-color-rect { -fx-stroke: -fx-pressed-base; } .color-palette { -fx-background-color: derive(-fx-color,-40%), derive(-fx-color,100%), linear-gradient(to bottom, derive(-fx-color,100%) 0%, derive(-fx-color,50%) 12%, derive(-fx-color,65%) 88%, derive(-fx-color,23%) 100%); -fx-background-insets: 0, 1, 2; -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4; -fx-padding: 15 15 15 15; -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 ); } .color-palette .color-rect { -fx-stroke: black; -fx-stroke-width: 0.4; -fx-border-color: black; } .color-palette .color-picker-grid { -fx-border-color: black; } .color-palette .color-square { -fx-background-color: transparent; -fx-background-insets: -1, 0; -fx-padding: 0.5; -fx-border: black; } /* the color over which the user is hovering */ .color-palette .color-square:focused, .color-palette .color-square:selected:focused { -fx-background-color: -fx-focus-color; } /* the currently selected color */ .color-palette .color-square:selected { /* -fx-background-color: derive(-fx-base, -27%) #989898 , white, derive(-fx-base, -59%) #555555 ;*/ -fx-background-color: black; } .color-palette .separator .line { -fx-background-color: -fx-pressed-base; /* -fx-background-color: white;*/ -fx-padding: 6 0 0 0; -fx-background-insets: 4 -10 0 -10,5 -10 0 -10; -fx-border-style: none; -fx-border-color: null; } .custom-color-dialog .color-rect-pane { -fx-padding: 15 8 15 15; /* -fx-background-color: -fx-background;*/ } .custom-color-dialog .controls-pane { -fx-padding: 15 15 15 0; /* -fx-background-color: -fx-background;*/ } .custom-color-dialog { -fx-background-color: -fx-background; } /* -------- Toggle Button ---------------- */ .custom-color-dialog .controls-pane .toggle-button { -fx-background-radius: 4, 4, 3, 2; -fx-padding: 3 6 3 6; } .custom-color-dialog .controls-pane .toggle-button:focused { -fx-background-color: rgba(23,134,248,0.2), -fx-focus-color, -fx-inner-border, -fx-body-color; } .custom-color-dialog .controls-pane .toggle-button:selected Text { -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.9) , 2, 0.0 , 0 , 1 ); } .custom-color-dialog .controls-pane .toggle-button:selected { -fx-background-color: -fx-shadow-highlight-color, linear-gradient( to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100% ), linear-gradient( to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100% ), linear-gradient( to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100% ); -fx-background-insets: 0 0 -1 0, 0, 1, 1; /* TODO: -fx-text-fill should be derived */ -fx-text-fill: -fx-light-text-color; } .custom-color-dialog .controls-pane #toggle-button-left { -fx-background-radius: 3 0 0 3; -fx-background-insets: 0 0 -1 0, 0, 1 0 1 1, 2 0 2 2; -fx-border-color: transparent -fx-outer-border transparent transparent; -fx-border-insets: 4 0 4 0; -fx-padding: -2 8 -2 8; } .custom-color-dialog .controls-pane #toggle-button-left:focused { -fx-background-radius: 3 0 0 3; -fx-background-insets: -1.4 0 -1.4 -1.4, 0 0 0 0, 1, 2; -fx-border-color: transparent; } .custom-color-dialog .controls-pane #toggle-button-left:selected, .controls-pane #toggle-button-left:selected:focused { -fx-background-insets: 0 0 -1 0, 0, 1 0 1 1, 1 0 1 1; -fx-border-color: transparent; } .custom-color-dialog .controls-pane #toggle-button-center { -fx-background-radius: 0; -fx-background-insets: 0; -fx-background-insets: 0 0 -1 0, 0, 1 0 1 0, 2 0 2 0; -fx-border-color: transparent -fx-outer-border transparent transparent; -fx-border-insets: 4 0 4 0; -fx-padding: -2 8 -2 8; } .custom-color-dialog .controls-pane #toggle-button-center:focused { -fx-background-radius: 0; -fx-background-insets: -1.4 0 -1.4 -1, 0 0 0 -1, 1 1 1 0, 2 2 2 1; -fx-border-color: transparent; } .custom-color-dialog .controls-pane #toggle-button-center:selected, .controls-pane #toggle-button-center:selected:focused { -fx-background-insets: -1.4 0 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0; -fx-border-color: transparent; } .custom-color-dialog .controls-pane #toggle-button-right { -fx-background-radius: 0 3 3 0; -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 0; -fx-padding: 3 8 3 8; } .custom-color-dialog .controls-pane #toggle-button-right:focused { -fx-background-radius: 0 3 3 0; -fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 2 2 2 1; } .custom-color-dialog .controls-pane #toggle-button-right:selected, .controls-pane #toggle-button-right:selected:focused { -fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0; } .custom-color-dialog .controls-pane .current-new-color-grid #transparent-current, .controls-pane .current-new-color-grid #transparent-new { -fx-background-image: url("pattern-transparent.png"); -fx-background-repeat: repeat; -fx-background-size: auto; -fx-padding: 9 64 9 64; } .custom-color-dialog .controls-pane .customcolor-controls-background { -fx-background-color: -fx-text-box-border, -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: 0, 1, 2; -fx-background-radius: 3, 2, 2; -fx-padding: 3 5 3 5; } .custom-color-dialog .controls-pane .alpha-settings .text-field { /* -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;*/ -fx-background-color: -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: 0, 1; -fx-background-radius: 3, 2; -fx-padding: 3 5 3 5; -fx-text-fill: -fx-text-inner-color; -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); -fx-cursor: text; } .custom-color-dialog .controls-pane .current-new-color-grid .label { -fx-padding: 0 0 0 5; } .custom-color-dialog #input-text-field { -fx-skin: "com.sun.javafx.scene.control.skin.TextFieldSkin"; } .custom-color-dialog .input-field { -fx-skin: "com.sun.javafx.scene.control.skin.InputFieldSkin"; -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: 0, 1, 2; -fx-background-radius: 3, 2, 2; -fx-padding: 3 5 3 5; -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); -fx-cursor: text; } .custom-color-dialog .input-field:focused { -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: -0.4, 1, 2; -fx-background-radius: 3.4, 2, 2; } .custom-color-dialog .input-field:disabled { -fx-opacity: -fx-disabled-opacity; } .custom-color-dialog .integer-field { -fx-skin: "com.sun.javafx.scene.control.skin.IntegerFieldSkin"; -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: 0, 1, 2; -fx-background-radius: 3, 2, 2; -fx-padding: 3 5 3 5; -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); -fx-cursor: text; } .custom-color-dialog .integer-field:focused { -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: -0.4, 1, 2; -fx-background-radius: 3.4, 2, 2; } /*.integer-field:disabled { -fx-opacity: -fx-disabled-opacity; }*/ .custom-color-dialog .double-field { -fx-skin: "com.sun.javafx.scene.control.skin.DoubleFieldSkin"; -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: 0, 1, 2; -fx-background-radius: 3, 2, 2; -fx-padding: 3 5 3 5; -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); -fx-cursor: text; } .custom-color-dialog .double-field:focused { -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: -0.4, 1, 2; -fx-background-radius: 3.4, 2, 2; } .custom-color-dialog .double-field:disabled { -fx-opacity: -fx-disabled-opacity; } .custom-color-dialog .webcolor-field { -fx-skin: "com.sun.javafx.scene.control.skin.WebColorFieldSkin"; -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: 0, 1, 2; -fx-background-radius: 3, 2, 2; -fx-padding: 3 5 3 5; -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); -fx-cursor: text; } .custom-color-dialog .webcolor-field:focused { -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; -fx-background-insets: -0.4, 1, 2; -fx-background-radius: 3.4, 2, 2; } .custom-color-dialog .webcolor-field:disabled { -fx-opacity: -fx-disabled-opacity; } /* -------------------------- STYLES FOR PAGINATION CONTROL ----- */ .pagination { -fx-skin: "com.sun.javafx.scene.control.skin.PaginationSkin"; -fx-padding: 0; -fx-arrows-visible: true; -fx-tooltip-visible: true; -fx-page-information-visible: true; -fx-page-information-alignment: bottom; } .pagination .page { -fx-background-color: transparent; } .pagination .pagination-control { -fx-background-color: transparent; -fx-padding: 0.833333em 0em 0.833333em 0em; } .pagination .pagination-control .control-box { -fx-spacing: 4; -fx-alignment: center; } .pagination .pagination-control .left-arrow-button{ -fx-background-radius: 0; -fx-padding: 0.166667em 0.416em 0.25em 0.333em; } .pagination .pagination-control .right-arrow-button { -fx-background-radius: 0; -fx-padding: 0.166667em 0.333em 0.25em 0.416em; } .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 .bullet-button { -fx-background-radius: 0, 4em, 4em, 4em, 4em; -fx-padding: 0.333em; -fx-background-color: transparent, -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: 0, 4 4 3 4, 5, 6, 7; } .pagination .pagination-control .bullet-button:selected { -fx-base: -fx-accent; } .pagination.bullet .pagination-control .left-arrow-button, .pagination.bullet .pagination-control .right-arrow-button { -fx-background-radius: 4em; } .pagination .pagination-control .number-button { -fx-background-radius: 0; -fx-padding: 0.166667em 0.25em 0.25em 0.333em; -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color; } .pagination .pagination-control .number-button:selected { -fx-base: -fx-accent; } .pagination .pagination-control .page-information { -fx-padding: 0.416em 0 0 0; }