Guest User

caspian.css - JavaFX

a guest
Dec 6th, 2012
17,152
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.     Document   : caspian
  3. */
  4. /*
  5.  * Copyright (c) 2009, 2011, Oracle and/or its affiliates. All rights reserved.
  6.  * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
  7.  *  
  8.  * This code is free software; you can redistribute it and/or modify it
  9.  * under the terms of the GNU General Public License version 2 only, as
  10.  * published by the Free Software Foundation.  Oracle designates this
  11.  * particular file as subject to the "Classpath" exception as provided
  12.  * by Oracle in the LICENSE file that accompanied this code.
  13.  *  
  14.  * This code is distributed in the hope that it will be useful, but WITHOUT
  15.  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  16.  * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
  17.  * version 2 for more details (a copy is included in the LICENSE file that
  18.  * accompanied this code).
  19.  *  
  20.  * You should have received a copy of the GNU General Public License version
  21.  * 2 along with this work; if not, write to the Free Software Foundation,
  22.  * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
  23.  *  
  24.  * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
  25.  * or visit www.oracle.com if you need additional information or have any
  26.  * questions.
  27.  *                                                                              
  28.  */
  29.  
  30. /*******************************************************************************
  31.  *                                                                             *
  32.  * CSS Styles for core infrastructure bits.  The .root section provides the   *
  33.  * overall default font and colors used by the rest of the sections.           *
  34.  *                                                                             *
  35.  ******************************************************************************/
  36.  
  37. .root {
  38.     /***************************************************************************
  39.      *                                                                         *
  40.      * The main color palette from which the rest of the colors are derived.   *
  41.      *                                                                         *
  42.      **************************************************************************/
  43.  
  44.     /* A light grey that is the base color for objects.  Instead of using
  45.      * -fx-base directly, the sections in this file will typically use -fx-color.
  46.      */
  47.     -fx-base: #d0d0d0;
  48.  
  49.     /* A very light grey used for the background of windows.  See also
  50.      * -fx-text-background-color, which should be used as the -fx-text-fill
  51.      * value for text painted on top of backgrounds colored with -fx-background.
  52.      */
  53.     -fx-background: #f4f4f4;
  54.  
  55.     /* Used for the inside of text boxes, password boxes, lists, trees, and
  56.      * tables.  See also -fx-text-inner-color, which should be used as the
  57.      * -fx-text-fill value for text painted on top of backgrounds colored
  58.      * with -fx-control-inner-background.
  59.      */
  60.     -fx-control-inner-background: white;
  61.  
  62.     /* One of these colors will be chosen based upon a ladder calculation
  63.      * that uses the brightness of a background color.  Instead of using these
  64.      * colors directly as -fx-text-fill values, the sections in this file should
  65.      * use a derived color to match the background in use.  See also:
  66.      *
  67.      * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
  68.      * -fx-text-background-color for text on top of -fx-background
  69.      * -fx-text-inner-color for text on top of -fx-control-inner-color
  70.      * -fx-selection-bar-text for text on top of -fx-selection-bar
  71.      */
  72.     -fx-dark-text-color: black;
  73.     -fx-mid-text-color: #292929;
  74.     -fx-light-text-color: white;
  75.  
  76.     /* A bright blue for highlighting/accenting objects.  For example: selected
  77.      * text; selected items in menus, lists, trees, and tables; progress bars;
  78.      * default buttons.
  79.      */
  80.     -fx-accent: #0093ff;
  81.  
  82.     /* A bright blue for the focus indicator of objects. Typically used as the
  83.      * first color in -fx-background-color for the "focused" pseudo-class. Also
  84.      * typically used with insets of -1.4 to provide a glowing effect.
  85.      *
  86.      * TODO: should this be derived from -fx-accent?
  87.      */
  88.     -fx-focus-color: #0093ff;
  89.  
  90.     /* The color that is used in styling controls. The default value is based
  91.      * on -fx-base, but is changed by pseudoclasses to change the base color.
  92.      * For example, the "hover" pseudoclass will typically set -fx-color to
  93.      * -fx-hover-base (see below) and the "armed" pseudoclass will typically
  94.      * set -fx-color to -fx-pressed-base.
  95.      */
  96.     -fx-color: -fx-base;
  97.  
  98.     /* The opacity level to use for the "disabled" pseudoclass.
  99.      */
  100.     -fx-disabled-opacity: 0.4;
  101.  
  102.     /***************************************************************************
  103.      *                                                                         *
  104.      * Colors that are derived from the main color palette.                    *
  105.      *                                                                         *
  106.      **************************************************************************/
  107.  
  108.     /* A little lighter than -fx-base and used as the -fx-color for the
  109.      * "hovered" pseudoclass state.
  110.      */
  111.     -fx-hover-base: ladder(
  112.         -fx-base,
  113.         derive(-fx-base,20%) 20%,
  114.         derive(-fx-base,30%) 35%,
  115.         derive(-fx-base,40%) 50%
  116.      );
  117.  
  118.     /* A little darker than -fx-base and used as the -fx-color for the
  119.      * "armed" pseudoclass state.
  120.      *
  121.      * TODO: should this be renamed to -fx-armed-base?
  122.      */
  123.     -fx-pressed-base: derive(-fx-base,-20%);
  124.  
  125.     /* Used to specify the body color for focused objects.  By default, it's
  126.      * the same as -fx-base (i.e., the body color doesn't change when a control
  127.      * gets focus).
  128.      */
  129.     -fx-focused-base: -fx-base;
  130.  
  131.     /* The color to use for -fx-text-fill when text is to be painted on top of
  132.      * a background filled with the -fx-background color.
  133.      */
  134.     -fx-text-background-color: ladder(
  135.         -fx-background,
  136.         -fx-light-text-color 45%,
  137.         -fx-dark-text-color  46%,
  138.         -fx-dark-text-color  59%,
  139.         -fx-mid-text-color   60%
  140.      );
  141.  
  142.     /* The default color for all text.  Sections should change the -fx-text-fill
  143.      * property if change the background color to something else.  See also:
  144.      *
  145.      * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
  146.      * -fx-text-background-color for text on top of -fx-background
  147.      * -fx-text-inner-color for text on top of -fx-control-inner-color
  148.      * -fx-selection-bar-text for text on top of -fx-selection-bar
  149.      */
  150.     -fx-text-fill: -fx-text-background-color;
  151.  
  152.     /* A little darker than -fx-color and used to draw boxes around objects such
  153.      * as progress bars, scroll bars, scroll panes, trees, tables, and lists.
  154.      */
  155.     -fx-box-border: ladder(
  156.         -fx-color,
  157.         black 20%,
  158.         derive(-fx-color,-30%) 30%
  159.     );
  160.  
  161.     /* Darker than -fx-background and used to draw boxes around text boxes and
  162.      * password boxes.
  163.      */
  164.     -fx-text-box-border: ladder(
  165.         -fx-background,
  166.         black 10%,
  167.         derive(-fx-background, -15%) 30%
  168.     );
  169.  
  170.     /* Typically lighter than -fx-background and used to provide a small
  171.      * highlight under controls and tick marks for checkboxes and radio buttons.
  172.      * Often used with an insets of 0 0 -1 0, and is also often the first
  173.      * color in a -fx-background-color list.  Also is typically replaced by
  174.      * -fx-focus-color with an insets of -1.4 in the "focused" pseudoclass.
  175.      */
  176.     -fx-shadow-highlight-color: ladder(
  177.         -fx-background,
  178.         transparent 0%,
  179.         derive(-fx-background,40%)   5%,
  180.         derive(-fx-background,60%)  70%,
  181.         derive(-fx-background,100%) 85%,
  182.         derive(-fx-background,100%) 97%,
  183.         derive(-fx-background,-10%) 97.5%
  184.       );
  185.  
  186.     /* A gradient that goes from a little darker than -fx-color on the top to
  187.      * even more darker than -fx-color on the bottom.  Typically is the second
  188.      * color in the -fx-background-color list as the small thin border around
  189.      * a control. It is typically the same size as the control (i.e., insets
  190.      * are 0).
  191.      */
  192.     -fx-outer-border: linear-gradient(
  193.         to bottom,
  194.         derive(-fx-color,-9%) 0%,
  195.         derive(-fx-color,-33%) 100%
  196.     );
  197.  
  198.     /* A gradient that goes from a bit lighter than -fx-color on the top to
  199.      * a little darker at the bottom.  Typically is the third color in the
  200.      * -fx-background-color list as a thin highlight inside the outer border.
  201.      * Insets are typically 1.
  202.      */
  203.     -fx-inner-border: linear-gradient(
  204.         to bottom,
  205.         ladder(-fx-color,
  206.                derive(-fx-color,80%) 60%,
  207.                white 82%) 0%,
  208.         ladder(-fx-color,
  209.                derive(-fx-color,20%) 10%,
  210.                derive(-fx-color,-10%) 80%) 100%
  211.     );
  212.  
  213.     -fx-inner-border-horizontal: linear-gradient(
  214.         to right,
  215.         ladder(-fx-color,
  216.                derive(-fx-color,80%) 60%,
  217.                white 82%) 0%,
  218.         ladder(-fx-color,
  219.                derive(-fx-color,20%) 10%,
  220.                derive(-fx-color,-10%) 80%) 100%
  221.     );
  222.  
  223.     -fx-inner-border-bottomup: linear-gradient(
  224.         to top,
  225.         ladder(-fx-color,
  226.                derive(-fx-color,80%) 60%,
  227.                white 82%) 0%,
  228.         ladder(-fx-color,
  229.                derive(-fx-color,20%) 10%,
  230.                derive(-fx-color,-10%) 80%) 100%);
  231.  
  232.     /* A gradient that goes from a little lighter than -fx-color at the top to
  233.      * a little darker than -fx-color at the bottom and is used to fill the
  234.      * body of many controls such as buttons.  Typically is the fourth color
  235.      * in the -fx-background-color list and represents main body of the control.
  236.      * Insets are typically 2.
  237.      */
  238.     -fx-body-color: linear-gradient(
  239.         to bottom,
  240.         derive(-fx-color,34%) 0%,
  241.         derive(-fx-color,-18%) 100%
  242.     );
  243.        
  244.     -fx-body-color-bottomup:  linear-gradient(
  245.         to top,
  246.         derive(-fx-color,34%) 0%,
  247.         derive(-fx-color,-18%) 100%
  248.     );
  249.  
  250.     /* The color to use as -fx-text-fill when painting text on top of
  251.      * backgrounds filled with -fx-base, -fx-color, and -fx-body-color.
  252.      */
  253.     -fx-text-base-color: ladder(
  254.         -fx-color,
  255.         -fx-light-text-color 45%,
  256.         -fx-dark-text-color  46%,
  257.         -fx-dark-text-color  59%,
  258.         -fx-mid-text-color   60%
  259.     );
  260.  
  261.     /* The color to use as -fx-text-fill when painting text on top of
  262.      * backgrounds filled with -fx-control-inner-background.
  263.      */
  264.     -fx-text-inner-color: ladder(
  265.         -fx-control-inner-background,
  266.         -fx-light-text-color 45%,
  267.         -fx-dark-text-color  46%,
  268.         -fx-dark-text-color  59%,
  269.         -fx-mid-text-color   60%
  270.     );
  271.  
  272.     /* The color to use for small mark-like objects such as checks on check
  273.      * boxes, filled in circles in radio buttons, arrows on scroll bars, etc.
  274.      */
  275.     -fx-mark-color: ladder(
  276.         -fx-color,
  277.         white 30%,
  278.         derive(-fx-color,-63%) 31%
  279.     );
  280.  
  281.     /* The small thin light "shadow" for mark-like objects. Typically used in
  282.      * conjunction with -fx-mark-color with an insets of 1 0 -1 0.
  283.      */
  284.     -fx-mark-highlight-color: ladder(
  285.         -fx-color,
  286.         derive(-fx-color,80%) 60%,
  287.         white 70%
  288.     );
  289.  
  290.     /* Background for items in list like things such as menus, lists, trees,
  291.      * and tables.
  292.      *
  293.      * TODO: it seems like this should be based upon -fx-accent and we should
  294.      * remove the setting -fx-background in all the sections that use
  295.      * -fx-selection-bar.
  296.      */
  297.     -fx-selection-bar: linear-gradient(
  298.         to bottom,
  299.         derive(-fx-background,-7%) 0%,
  300.         derive(-fx-background,-34%) 100%
  301.     );
  302.  
  303.     /* The color to use as -fx-text-fill when painting text on top of
  304.      * backgrounds filled with -fx-selection-bar.
  305.      *
  306.      * TODO: it seems like this should be derived from -fx-selection-bar.
  307.      */
  308.     -fx-selection-bar-text: ladder(
  309.         -fx-background,
  310.         -fx-light-text-color 50%,
  311.         -fx-mid-text-color   51%
  312.     );
  313.  
  314.     /* The default border color for a tab.
  315.      *
  316.      * TODO: should this be -fx-box-border or derived from some other color?
  317.      */
  318.     -fx-tab-border-color: -fx-box-border;
  319.  
  320.     /* These are needed for Popup */
  321.     -fx-background-color: inherit;
  322.     -fx-background-radius: inherit;
  323.     -fx-background-insets: inherit;
  324.     -fx-padding: inherit;
  325.    
  326.     /* The color to use in ListView/TreeView/TableView to indicate hover. */
  327.     -fx-cell-hover-color: #cce3f4;
  328.    
  329.     -fx-cell-focus-inner-border: #85b9de;
  330.    
  331.     /* The colors to use in Pagination */
  332.     -fx-page-bullet-border: #acacac;    
  333.     -fx-page-indicator-hover-border: #accee5;
  334.    
  335.    
  336. }
  337.  
  338. .mnemonic-underline {
  339.     -fx-stroke: transparent;
  340. }
  341.  
  342. .text {
  343.     -fx-font-smoothing-type: lcd;
  344. }
  345.  
  346.  
  347. /*******************************************************************************
  348.  *******************************************************************************
  349.  **                                                                           **
  350.  ** CSS Sections for each control.  In general, each control will have a main **
  351.  ** section that defines the following:                                       **
  352.  **                                                                           **
  353.  ** .control-name {                                                           **
  354.  **     -fx-skin: "com.sun.javafx.scene.control.skin.ControlNameSkin";        **
  355.  **     -fx-background-color: a, b, c, d                                      **
  356.  **     -fx-background-insets: e, f, g, h                                     **
  357.  **     -fx-background-radius: i, j, k, l                                     **
  358.  **     -fx-padding: m                                                        **
  359.  **     -fx-text-fill: n                                                      **
  360.  ** }                                                                         **
  361.  **                                                                           **
  362.  ** where:                                                                    **
  363.  **                                                                           **
  364.  ** -fx-background-color, -fx-background-insets, and -fx-background-radius    **
  365.  ** are parallel arrays that specify background colors for the control.       **
  366.  **                                                                           **
  367.  ** -fx-background represents a sequence of colors for regions that will be   **
  368.  ** drawn, one on top of the other.                                           **
  369.  **                                                                           **
  370.  ** -fx-background-insets is a comma separated list of insets that represent  **
  371.  ** the top right bottom left insets from the edge of the control for each    **
  372.  ** color specified in the -fx-background-color list.  A single size for      **
  373.  ** an inset means the same inset will be used for the top right bottom left  **
  374.  ** values.  A negative inset will draw outside the bounds of the control.    **
  375.  **                                                                           **
  376.  ** -fx-background-radius is a comma separated list of values that represent  **
  377.  ** the radii of the top right, bottom right, bottom left, and top left       **
  378.  ** corners of the rectangle associated with the rectangle from the           **
  379.  ** -fx-background-color list.  As with insets, a single size for a radius    **
  380.  ** means the same radius will be used for all corners.                       **
  381.  **                                                                           **
  382.  ** Typically, the following values will be used:                             **
  383.  **                                                                           **
  384.  **    a/e/i = -fx-shadow-highlight-color, 0 0 -1 0, 5                        **
  385.  **            Draws a background highlight dropped 1 pixel down with         **
  386.  **            corners with a 5 pixel radius.                                 **
  387.  **    b/f/j = -fx-outer-border, 0, 5                                         **
  388.  **            Draws an outer border the size of the control (insets = 0) and **
  389.  **            with corners with a 5 pixel radius.                            **
  390.  **    c/g/k = -fx-inner-border, 1, 4                                         **
  391.  **            Draws an inner border inset 1 pixel from the control edge and  **
  392.  **            with corners with a smaller radius (radius = 4).               **
  393.  **    d/h/l = -fx-body-color, 2, 3                                           **
  394.  **            Draws the body last, inset 2 pixels from the control edge and  **
  395.  **            with cornersd with an even smaller radius (radius = 3).        **
  396.  **    m     = Padding from the edge of the control to the outer edge of the  **
  397.  **            skin content.                                                  **
  398.  **    n     = If specified, the color chosen for -fx-text-fill should match  **
  399.  **            the innermost color from -fx-background-colors (e.g., 'd').    **
  400.  **            See the -fx-text-fill entry in .scene for more information.    **
  401.  **                                                                           **
  402.  ** The control will also typically define pseudoclass sections for when it   **
  403.  ** is focused, when the mouse is hovering over it ("hover") and when the     **
  404.  ** mouse button is being held down on it (e.g., "armed").                    **
  405.  **                                                                           **
  406.  ** For example, in the "focused" pseudoclass, -fx-focus-color will typically **
  407.  ** just replace -fx-shadow-highlight-color and will be drawn so it extents   **
  408.  ** outside the control with a glowing effect.  The glowing effect is         **
  409.  ** achieved by using a non-integer insets value of -1.4 and the radius       **
  410.  ** is adjusted accordingly.                                                  **
  411.  **                                                                           **
  412.  ** .control-name:focused {                                                   **
  413.  **     -fx-background-color: -fx-focus-color, b, c, d                        **
  414.  **     -fx-background-insets: -1.4, f, g, h                                  **
  415.  **     -fx-background-radius: 6.4, j, k, l                                   **
  416.  **  }                                                                        **
  417.  **                                                                           **
  418.  ** In the "hover" pseudoclass, the -fx-color is replaced with -fx-hover-base **
  419.  ** which will result in a re-derivation of the other colors in               **
  420.  ** -fx-background-colors:                                                    **
  421.  **                                                                           **
  422.  ** .control-name:hover {                                                     **
  423.  **     -fx-color: -fx-hover-base;                                            **
  424.  ** }                                                                         **
  425.  **                                                                           **
  426.  ** In the "armed" pseudoclass, the -fx-color is replaced with                **
  427.  ** -fx-pressed-base, which will result in a rederivation of the other colors **
  428.  ** in -fx-background-colors:                                                 **
  429.  **                                                                           **
  430.  ** .control-name:armed {                                                     **
  431.  **     -fx-color: -fx-pressed-base;                                          **
  432.  ** }                                                                         **
  433.  **                                                                           **
  434.  ** The control will also typically include a  "disabled" pseudoclass which   **
  435.  ** makes the component transparent:                                          **
  436.  **                                                                           **
  437.  ** .control-name:disabled {                                                  **
  438.  **     -fx-opacity: -fx-disabled-opacity;                                    **
  439.  ** }                                                                         **
  440.  **                                                                           **
  441.  *******************************************************************************
  442.  ******************************************************************************/
  443.  
  444. /*******************************************************************************
  445.  *******************************************************************************
  446.  **                                                                           **
  447.  ** NOTE on em values:  em values are used for padding and other sizing       **
  448.  ** throughout this file.  Size values in ems represent fraction of the       **
  449.  ** font size in use.  As used in this file, each 1/12th represents a pixel   **
  450.  ** based upon the default size of 12px.  Here's a table for quick reference: **
  451.  **                                                                           **
  452.  ** 1px:    0.083333em                                                       **
  453.  ** 2px:    0.166667em                                                        **
  454.  ** 3px:    0.25em                                                            **
  455.  ** 4px:    0.333333em                                                        **
  456.  ** 5px:    0.416667em                                                        **
  457.  ** 6px:    0.5em                                                             **
  458.  ** 7px:    0.583333em                                                        **
  459.  ** 8px:    0.666667em                                                        **
  460.  ** 9px:    0.75em                                                            **
  461.  ** 10px:   0.833333em                                                        **
  462.  ** 11px:   0.916667em                                                        **
  463.  ** 12px:   1.0em                                                             **
  464.  **                                                                           **
  465.  *******************************************************************************
  466.  ******************************************************************************/
  467.  
  468. /*******************************************************************************
  469.  *                                                                             *
  470.  * Label                                                                       *
  471.  *                                                                             *
  472.  ******************************************************************************/
  473.  
  474. .label {
  475.     -fx-skin: "com.sun.javafx.scene.control.skin.LabelSkin";
  476.     -fx-text-fill: -fx-text-background-color;
  477. }
  478.  
  479. .label:disabled {
  480.     -fx-opacity: -fx-disabled-opacity;
  481. }
  482.  
  483. .label:show-mnemonics .mnemonic-underline {
  484.     -fx-stroke: -fx-text-fill;
  485. }
  486.  
  487. /* The opacity of the parent is applied to the children.  So we make the
  488.  * opacity 1.0 here to avoid double translucency.
  489.  */
  490. /*:disabled > * > .label {
  491.     -fx-opacity: 1.0;
  492. }*/
  493.  
  494. /*******************************************************************************
  495.  *                                                                             *
  496.  * Button                                                                      *
  497.  *                                                                             *
  498.  ******************************************************************************/
  499.  
  500. .button {
  501.     -fx-skin: "com.sun.javafx.scene.control.skin.ButtonSkin";
  502.     -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  503.     -fx-background-insets: 0 0 -1 0, 0, 1, 2;
  504.     -fx-background-radius: 5, 5, 4, 3;
  505.     -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */
  506.     -fx-text-fill: -fx-text-base-color;
  507.     -fx-alignment: CENTER;
  508.     -fx-content-display: LEFT;
  509. }
  510.  
  511. .button:focused {
  512.     -fx-color: -fx-focused-base;
  513.     -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  514.     -fx-background-insets: -1.4, 0, 1, 2;
  515.     -fx-background-radius:  6.4, 5, 4, 3;
  516. }
  517.  
  518. .button:hover {
  519.     -fx-color: -fx-hover-base;
  520. }
  521.  
  522. .button:armed {
  523.     -fx-color: -fx-pressed-base;
  524. }
  525.  
  526. .button:default {
  527.     -fx-base: -fx-accent;
  528. }
  529.  
  530. .button:cancel {
  531. }
  532.  
  533. .button:disabled {
  534.     -fx-opacity: -fx-disabled-opacity;
  535. }
  536.  
  537. .button:show-mnemonics .mnemonic-underline {
  538.     -fx-stroke: -fx-text-fill;
  539. }
  540. /*******************************************************************************
  541.  *                                                                             *
  542.  * ToggleButton                                                                *
  543.  *                                                                             *
  544.  ******************************************************************************/
  545.  
  546. .toggle-button {
  547.     -fx-skin: "com.sun.javafx.scene.control.skin.ToggleButtonSkin";
  548.     -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  549.     -fx-background-insets: 0 0 -1 0, 0, 1, 2;
  550.     -fx-background-radius: 5, 5, 4, 3;
  551.     -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */
  552.     -fx-text-fill: -fx-text-base-color;
  553.     -fx-alignment: CENTER;
  554.     -fx-content-display: LEFT;
  555. }
  556.  
  557. .toggle-button:focused {
  558.     -fx-color: -fx-focused-base;
  559.     -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  560.     -fx-background-insets: -1.4, 0, 1, 2;
  561.     -fx-background-radius: 6.4, 5, 4, 3;
  562. }
  563.  
  564. .toggle-button:hover {
  565.     -fx-color: -fx-hover-base;
  566. }
  567.  
  568. .toggle-button:armed {
  569.     -fx-color: -fx-pressed-base;
  570. }
  571.  
  572. .toggle-button:selected {
  573.     -fx-background-color:
  574.         -fx-shadow-highlight-color,
  575.         linear-gradient(to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100%),
  576.         linear-gradient(to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100%),
  577.         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%);
  578.     -fx-background-insets: 0 0 -1 0, 0, 1, 1;
  579.     /* TODO: -fx-text-fill should be derived */
  580.     -fx-text-fill: -fx-light-text-color;
  581. }
  582.  
  583. .toggle-button:selected:focused {
  584.     -fx-color: -fx-focused-base;
  585.     -fx-background-color:
  586.         -fx-focus-color,
  587.         linear-gradient(to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100%),
  588.         linear-gradient(to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100%),
  589.         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%);
  590.     -fx-background-insets: -1.4, 0, 1, 1;
  591. }
  592.  
  593. .toggle-button:disabled {
  594.     -fx-opacity: -fx-disabled-opacity;
  595. }
  596.  
  597. .toggle-button:show-mnemonics .mnemonic-underline {
  598.     -fx-stroke: -fx-text-fill;
  599. }
  600.  
  601. /*******************************************************************************
  602.  *                                                                             *
  603.  * RadioButton                                                                 *
  604.  *                                                                             *
  605.  ******************************************************************************/
  606.  
  607. .radio-button {
  608.     -fx-skin: "com.sun.javafx.scene.control.skin.RadioButtonSkin";
  609.     -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
  610.     -fx-text-fill: -fx-text-background-color;
  611. }
  612.  
  613. .radio-button:focused {
  614.     -fx-color: -fx-focused-base;
  615. }
  616.  
  617. .radio-button .radio  {
  618.    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  619.    -fx-background-insets: 0 0 -1 0,  0,  1,  2;
  620.    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
  621.    -fx-padding: 0.333333em; /* 4 -- padding from outside edge to the inner black dot */
  622. }
  623.  
  624. .radio-button:focused .radio {
  625.     -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  626.     -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
  627.     -fx-background-insets: -1.4, 0, 1, 2;
  628. }
  629.  
  630. .radio-button:hover .radio {
  631.     -fx-color: -fx-hover-base;
  632. }
  633. .radio-button:armed .radio {
  634.     -fx-color: -fx-pressed-base;
  635. }
  636.  
  637. .radio-button .dot {
  638.    -fx-background-color: transparent;
  639.    -fx-background-insets: 0;
  640.    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
  641.    -fx-padding: 0.25em; /* 3 -- radius of the inner black dot when selected */
  642. }
  643.  
  644. .radio-button:selected .dot {
  645.    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  646.    -fx-background-insets: 0 0 -1 0, 0;
  647. }
  648.  
  649. .radio-button:disabled {
  650.     -fx-opacity: -fx-disabled-opacity;
  651. }
  652.  
  653. .radio-button:show-mnemonics .mnemonic-underline {
  654.     -fx-stroke: -fx-text-fill;
  655. }
  656.  
  657. /*******************************************************************************
  658.  *                                                                             *
  659.  * CheckBox                                                                    *
  660.  *                                                                             *
  661.  ******************************************************************************/
  662.  
  663. .check-box {
  664.     -fx-skin: "com.sun.javafx.scene.control.skin.CheckBoxSkin";
  665.     -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
  666.     -fx-text-fill: -fx-text-background-color;
  667. }
  668.  
  669. .check-box:focused {
  670.     -fx-color: -fx-focused-base;
  671. }
  672.  
  673. .check-box .box {
  674.     -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  675.     -fx-background-insets: 0 0 -1 0, 0, 1, 2;
  676.     -fx-background-radius: 2, 2, 1, 1;
  677.     -fx-padding: 0.25em; /* 3 -- padding from the outside edge to the mark */
  678. }
  679.  
  680. .check-box:focused .box {
  681.     -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  682.     -fx-background-insets: -1.4, 0, 1, 2;
  683.     -fx-background-radius: 3.4, 2, 1, 1;
  684. }
  685.  
  686. .check-box:hover .box {
  687.     -fx-color: -fx-hover-base;
  688. }
  689.  
  690. .check-box:armed .box {
  691.     -fx-color: -fx-pressed-base;
  692. }
  693.  
  694. .check-box .mark {
  695.     -fx-background-color: transparent;
  696.     -fx-background-insets: 1 0 -1 0, 0;
  697.     -fx-padding: 0.333333em; /* 4 -- this is half the size of the mark */
  698.     -fx-shape: "M0,4H2L3,6L6,0H8L4,8H2Z";
  699. }
  700.  
  701. /* TODO: scale the shape - the problem is that it is not within a square
  702.  * boundary.
  703.  */
  704. .check-box:indeterminate .mark {
  705.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  706.     -fx-shape: "M0,0H8V2H0Z";
  707.     -fx-scale-shape: false;
  708. }
  709.  
  710. .check-box:selected .mark {
  711.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  712. }
  713.  
  714. .check-box:disabled {
  715.     -fx-opacity: -fx-disabled-opacity;
  716. }
  717.  
  718. .check-box:show-mnemonics .mnemonic-underline {
  719.     -fx-stroke: -fx-text-fill;
  720. }
  721.  
  722. /*******************************************************************************
  723.  *                                                                             *
  724.  * Hyperlink                                                                   *
  725.  *                                                                             *
  726.  ******************************************************************************/
  727.  
  728. .hyperlink {
  729.     -fx-skin: "com.sun.javafx.scene.control.skin.HyperlinkSkin";
  730.     -fx-padding: 0.166667em; /* 2 */
  731.     -fx-cursor: hand;
  732.     -fx-content-display: LEFT;
  733.     -fx-text-fill: -fx-text-background-color;
  734.     -fx-border-color: transparent;
  735.     -fx-border-width: 1px;
  736. }
  737.  
  738. .hyperlink:visited {
  739.     -fx-text-fill: -fx-accent;
  740. }
  741.  
  742. .hyperlink:focused {
  743.     -fx-color: -fx-focused-base;
  744.     -fx-border-color: -fx-focus-color;
  745.     -fx-border-style: dotted;
  746.     -fx-border-width: 1px;
  747. }
  748.  
  749. .hyperlink:disabled {
  750.     -fx-opacity: -fx-disabled-opacity;
  751. }
  752.  
  753. .hyperlink:hover {
  754.     -fx-underline: true;
  755. }
  756.  
  757. .hyperlink:show-mnemonics .mnemonic-underline {
  758.     -fx-stroke: -fx-text-fill;
  759. }
  760.  
  761.  
  762. /*******************************************************************************
  763.  *                                                                             *
  764.  * PopupMenu                                                                   *
  765.  *                                                                             *
  766.  ******************************************************************************/
  767.  
  768. .context-menu {
  769.     -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
  770.     -fx-background-color:
  771.         derive(-fx-color,-40%),
  772.         derive(-fx-color,100%),
  773.         linear-gradient(to bottom, derive(-fx-color,100%) 0%, derive(-fx-color,50%) 12%, derive(-fx-color,65%) 88%, derive(-fx-color,23%) 100%);
  774.     -fx-background-insets: 0, 1, 2;
  775.     -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
  776. /*    -fx-padding: 0.666667em 0.083333em 0.666667em 0.083333em;  8 1 8 1 */
  777.     -fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; /* 4 1 8 1 */
  778. }
  779.  
  780. .context-menu .separator {
  781.     -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */
  782. }
  783.  
  784. .context-menu .scroll-arrow {
  785.     -fx-padding: 0.416667em 0.416667em 0.416667em 0.416667em; /* 5 */
  786.     -fx-background-color: transparent;
  787. }
  788.  
  789. .context-menu .scroll-arrow:hover {
  790.     -fx-background: -fx-accent;
  791.     -fx-background-color: -fx-selection-bar;
  792.     -fx-text-fill: -fx-selection-bar-text;
  793. }
  794.  
  795. .context-menu:show-mnemonics .mnemonic-underline {
  796.     -fx-stroke: -fx-text-fill;
  797. }
  798.  
  799.  
  800. /*******************************************************************************
  801.  *                                                                             *
  802.  * Menu                                                                        *
  803.  *                                                                             *
  804.  ******************************************************************************/
  805.  
  806. .menu {
  807. /*    -fx-skin: "com.sun.javafx.scene.control.skin.MenuSkin";*/
  808.     -fx-background-color: transparent;
  809.     -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
  810. }
  811.  
  812. .menu:disabled {
  813.     -fx-opacity: -fx-disabled-opacity;
  814. }
  815.  
  816. .menu:show-mnemonics .mnemonic-underline {
  817.     -fx-stroke: -fx-text-fill;
  818. }
  819.  
  820. /* This hides the down arrow that would show on a menu placed in a menubar */
  821. .menu-bar .menu .arrow {
  822.     -fx-padding: 0;
  823.     -fx-background-color: transparent;
  824.     -fx-shape: null;
  825. }
  826.  
  827. .menu-bar .menu .arrow-button {
  828.     -fx-padding: 0;
  829. }
  830.  
  831. .menu .arrow {
  832.     -fx-background-color: -fx-mark-color;
  833.     -fx-shape: "M0,-4L4,0L0,4Z";
  834.     -fx-scale-shape: false;
  835. }
  836.  
  837. .menu:focused:showing .arrow, .menu:hover:showing .arrow, .menu:focused .arrow, .menu:showing .arrow {
  838.     -fx-background-color: white;
  839. }
  840.  
  841. .menu-up-arrow {
  842.     -fx-padding: 0.666667em 0.416667em 0.0em 0.416667em;  /* 8 5 0 5 */
  843.     -fx-background-color: derive(-fx-color,-2%);
  844.     -fx-shape: "M0 1 L1 1 L.5 0 Z";
  845.     -fx-effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );
  846. }
  847.  
  848. .menu-down-arrow {
  849.     -fx-background-color: derive(-fx-color,-2%);
  850.     -fx-padding: 0.666667em 0.416667em 0.0em 0.416667em;  /* 8 5 0 5 */
  851.     -fx-shape: "M0 0 L1 0 L.5 1 Z";
  852.     -fx-effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );
  853. }
  854.  
  855.  
  856. /*******************************************************************************
  857.  *                                                                             *
  858.  * MenuBar                                                                     *
  859.  *                                                                             *
  860.  ******************************************************************************/
  861.  
  862. /* Corresponding hex values for the color derivations used below are: *
  863.  * derive(-fx-base,-30%); #929292                                     *
  864.  * derive(-fx-base,-50%); #686868                                     *
  865.  * derive(-fx-base,-70%); #3e3e3e                                     */
  866.  
  867. .menu-bar {
  868.     -fx-skin: "com.sun.javafx.scene.control.skin.MenuBarSkin";
  869.     -fx-padding: 0.0em 0.666667em 0.0em 0.666667em; /* 0 8 0 8 */
  870.     -fx-spacing: 0.166667em; /* 2 */
  871.     -fx-base: derive(#d0d0d0,-70%);
  872.     -fx-background-color: linear-gradient(to bottom, derive(-fx-color,50%), derive(-fx-color,-30%)), -fx-body-color;
  873.     -fx-background-insets: 0, 1 0 1 0;
  874.     -fx-background-radius: 0, 0 ;
  875. }
  876.  
  877. /* Show nothing for background of normal menu button in a menu bar */
  878. .menu-bar .menu-button {
  879.     -fx-background-radius: 0;
  880.     -fx-background-color: transparent;
  881.     -fx-background-insets: 0;
  882. }
  883. /* Change padding of menu buttons when in menu bar */
  884. .menu-bar .menu-button .label {
  885.     -fx-padding: 0.333em 0.5em 0.333em 0.5em; /* 4 6 4 6*/
  886. }
  887.  
  888. .menu-bar .menu-button:hover, .menu-bar .menu-button:focused, .menu-bar .menu-button:showing {
  889.     -fx-background: -fx-accent;
  890.     -fx-background-color: -fx-selection-bar;
  891.     -fx-text-fill: -fx-selection-bar-text;
  892. }
  893.  
  894. /*.menu-bar .menu:focused:showing, .menu-bar .menu:showing, .menu-bar .menu:focused, .menu:focused:showing, .menu:showing, .menu:focused {*/
  895. /*.menu-bar .menu-button:showing, .menu-button:showing {
  896.     -fx-background: -fx-accent;
  897.     -fx-background-color: -fx-selection-bar;
  898.     -fx-text-fill: -fx-selection-bar-text;
  899. }*/
  900.  
  901. .menu-bar .menu-button:hover {
  902.     -fx-background: -fx-accent;
  903.     -fx-background-color: -fx-selection-bar;
  904.     -fx-text-fill: -fx-selection-bar-text;
  905. }
  906.  
  907. .menu-bar:show-mnemonics .mnemonic-underline {
  908.     -fx-stroke: -fx-text-fill;
  909. }
  910.  
  911. /*******************************************************************************
  912.  *                                                                             *
  913.  * MenuItem                                                                    *
  914.  *                                                                             *
  915.  ******************************************************************************/
  916.  
  917. .menu-item {
  918. /*    -fx-skin: "com.sun.javafx.scene.control.skin.MenuItemSkin";*/
  919.     -fx-background-color: transparent;
  920.     -fx-padding: 0.333333em 0.41777em 0.333333em 0.41777em;  /* 4 5 4 5 */
  921. }
  922.  
  923. .menu-item .left-container {
  924.     -fx-padding: 0.458em 0.791em 0.458em 0.458em;
  925. }
  926.  
  927. .menu-item .graphic-container {
  928.     -fx-padding: 0em 0.333em 0em 0em;
  929. }
  930.  
  931. .menu-item .label {
  932.     -fx-padding: 0em 0.5em 0em 0em;
  933.     -fx-text-fill: -fx-text-base-color;
  934. }
  935.  
  936. .menu-item:disabled .label {
  937.     -fx-opacity: -fx-disabled-opacity;
  938. }
  939.  
  940. .menu-item:focused {
  941.      -fx-background: -fx-accent;
  942.      -fx-background-color: -fx-selection-bar;
  943.      -fx-text-fill: -fx-selection-bar-text;
  944. }
  945.  
  946. .menu-item:focused .label {
  947.     -fx-text-fill: white;
  948. }
  949. .menu-item .right-container {
  950.     -fx-padding: 0em 0em 0em 0.5em;
  951. }
  952.  
  953. .menu-item:show-mnemonics .mnemonic-underline {
  954.     -fx-stroke: -fx-text-fill;
  955. }
  956.  
  957.  
  958. .radio-menu-item:checked .radio {
  959.     -fx-background-color: -fx-mark-color;
  960.     -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
  961.     -fx-scale-shape: false;
  962. }
  963.  
  964. .radio-menu-item:focused:checked .radio {
  965.     -fx-background-color: white;
  966. }
  967.  
  968. .check-menu-item:checked .check {
  969.     -fx-background-color: -fx-mark-color;
  970.     -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
  971.     -fx-scale-shape: false;
  972. }
  973.  
  974. .check-menu-item:focused:checked .check {
  975.     -fx-background-color: white;
  976. }
  977.  
  978. .menu .arrow {
  979.     -fx-padding: 0.458em 0.167em 0.458em 0.167em; /* 4.5 2 4.5 2 */
  980.     -fx-background-color: -fx-mark-color;
  981.     -fx-shape: "M0,-4L4,0L0,4Z";
  982.     -fx-scale-shape: false;
  983. }
  984.  
  985. .menu:selected .arrow {
  986.     -fx-background-color: white;
  987. }
  988. /*.radio.selected {
  989.     -fx-background-color: -fx-mark-color;
  990.     -fx-padding: 0.666667em;  8
  991.     -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";
  992.     -fx-scale-shape: false;
  993. }*/
  994.  
  995. /*.check.checked {
  996.     -fx-background-color: -fx-mark-color;
  997.     -fx-padding: 0.666667em;  8
  998.     -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
  999.     -fx-scale-shape: false;
  1000. }*/
  1001.  
  1002. /*
  1003. .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 {
  1004.     -fx-background-color: -fx-selection-bar-text;
  1005. }
  1006. */
  1007. .menu-item:disabled {
  1008.     -fx-opacity: -fx-disabled-opacity;
  1009. }
  1010.  
  1011. /*******************************************************************************
  1012.  *                                                                             *
  1013.  * ChoiceBox                                                                   *
  1014.  *                                                                             *
  1015.  ******************************************************************************/
  1016.  
  1017. .choice-box {
  1018.     -fx-skin: "com.sun.javafx.scene.control.skin.ChoiceBoxSkin";
  1019.     -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  1020.     -fx-background-insets: 0 0 -1 0, 0, 1, 2;
  1021.     -fx-background-radius: 5, 5, 4, 3;
  1022.     -fx-padding: 0.0em 0.5em 0.0em 0.0em; /* 0 6 0 0 */
  1023.     -fx-alignment: CENTER;
  1024.     -fx-content-display: LEFT;
  1025. }
  1026.  
  1027. .choice-box:focused {
  1028.     -fx-color: -fx-focused-base;
  1029.     -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  1030.     -fx-background-insets: -1.4, 0, 1, 2;
  1031.     -fx-background-radius: 6.4, 5, 4, 3;
  1032. }
  1033.  
  1034. .choice-box:hover {
  1035.     -fx-color: -fx-hover-base;
  1036. }
  1037.  
  1038. .choice-box:showing {
  1039.     -fx-color: -fx-pressed-base;
  1040. }
  1041.  
  1042. .choice-box .label {
  1043.     -fx-padding: 0.166667em 0.333333em 0.25em 0.5em; /* 2 4 3 6 */
  1044.     -fx-text-fill: -fx-text-base-color;
  1045. }
  1046.  
  1047. .choice-box .open-button {
  1048.     -fx-background-color: null;
  1049.     -fx-padding: 0.083333em 0.0em 0.0em 0.666667em; /* 1 0 0 8 */
  1050. }
  1051.  
  1052. .choice-box .arrow {
  1053.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  1054.     -fx-background-insets: 1 0 -1 0, 0;
  1055.     /* padding determines the size of the arrow;
  1056.        this should match the design size in the SVG */
  1057.     -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 3.5 2 3.5 */
  1058.     -fx-shape: "M 0 0 h 7 l -3.5 4 z";
  1059. }
  1060.  
  1061. .choice-box .context-menu {
  1062.     -fx-background-radius: 6, 5, 4;
  1063. }
  1064.  
  1065. .choice-box .menu-item {
  1066.     -fx-accelerator-gutter: 0;
  1067. }
  1068.  
  1069. /* TODO: need to use the ID here.  For some reason, the other form does not
  1070.  * work.  This might be related to popup issues.
  1071.  */
  1072. /*.choice-box > * > .menu-item-radio {*/
  1073. #choice-box-menu-item > * > .menu-item-radio {
  1074.     /* When we show RadioMenuItems in ChoiceBox, we replace the radio shape with
  1075.        a check mark, which looks much better */
  1076.     -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
  1077.     -fx-scale-shape: false;
  1078. }
  1079.  
  1080. .choice-box:disabled {
  1081.     -fx-opacity: -fx-disabled-opacity;
  1082. }
  1083.  
  1084.  
  1085. /*******************************************************************************
  1086.  *                                                                             *
  1087.  * Slider                                                                      *
  1088.  *                                                                             *
  1089.  ******************************************************************************/
  1090.  
  1091. .slider {
  1092.     -fx-skin: "com.sun.javafx.scene.control.skin.SliderSkin";
  1093. }
  1094.  
  1095. .slider .thumb {
  1096.     -fx-background-color:
  1097.         derive(-fx-color,-36%),
  1098.         derive(-fx-color,73%),
  1099.         linear-gradient(to bottom, derive(-fx-color,-19%),derive(-fx-color,61%));
  1100.     -fx-background-insets: 0, 1, 2;
  1101.     -fx-background-radius: 1.0em; /* makes sure this remains circular */
  1102.     -fx-padding: 0.583333em; /* 7 */
  1103. }
  1104.  
  1105. .slider:focused .thumb {
  1106.     -fx-color: -fx-focused-base;
  1107.     -fx-background-color:
  1108.         -fx-focus-color,
  1109.         derive(-fx-color,-36%),
  1110.         derive(-fx-color,73%),
  1111.         linear-gradient(to bottom, derive(-fx-color,-19%),derive(-fx-color,61%));
  1112.     -fx-background-insets: -1.4, 0, 1, 2;
  1113.     -fx-background-radius: 1.0em; /* makes sure this remains circular */
  1114. }
  1115.  
  1116. .slider .thumb:hover {
  1117.     -fx-color: -fx-hover-base;
  1118. }
  1119.  
  1120. /* Uncomment when RT-10521 is fixed.
  1121. .slider .thumb:pressed {
  1122.     -fx-color: -fx-pressed-base;
  1123. }
  1124. */
  1125.  
  1126. .slider .track {
  1127.     -fx-background-color:
  1128.         -fx-shadow-highlight-color,
  1129.         derive(-fx-color,-22%),
  1130.         linear-gradient(to bottom, derive(-fx-color,-15.5%), derive(-fx-color,34%) 30%, derive(-fx-color,68%));
  1131.     -fx-background-insets: 1 0 -1 0, 0, 1;
  1132.     -fx-background-radius: 2.5, 2.5, 1.5;
  1133.     -fx-padding: 0.208333em; /* 2.5 */
  1134. }
  1135.  
  1136. .slider:vertical .track {
  1137.     -fx-background-color:
  1138.         -fx-shadow-highlight-color,
  1139.         derive(-fx-color,-22%),
  1140.         linear-gradient(to right, derive(-fx-color,-15.5%), derive(-fx-color,34%) 30%, derive(-fx-color,68%));
  1141.     -fx-background-insets: 0 -1 0 1, 0, 1;
  1142. }
  1143.  
  1144. .slider .axis {
  1145.     -fx-tick-mark-stroke: ladder(-fx-background, derive(-fx-background,30%) 40%, derive(-fx-background,-30%) 41%);
  1146.     -fx-tick-label-font: 0.833333em System;
  1147.     -fx-tick-label-fill: -fx-text-background-color;
  1148. }
  1149.  
  1150. .slider:disabled {
  1151.     -fx-opacity: -fx-disabled-opacity;
  1152. }
  1153.  
  1154. /*******************************************************************************
  1155.  *                                                                             *
  1156.  * ScrollBar                                                                   *
  1157.  *                                                                             *
  1158.  ******************************************************************************/
  1159.  
  1160. .scroll-bar {
  1161.     -fx-skin: "com.sun.javafx.scene.control.skin.ScrollBarSkin";
  1162. }
  1163.  
  1164. .scroll-bar:horizontal {
  1165.     -fx-background-color:
  1166.         -fx-box-border,
  1167.         linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
  1168.     -fx-background-insets: 0, 1;
  1169. }
  1170.  
  1171. .scroll-bar:horizontal:focused {
  1172.     -fx-background-color:
  1173.         -fx-focus-color,
  1174.         -fx-box-border,
  1175.         linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
  1176.     -fx-background-insets: -1.4, 0, 1;
  1177. }
  1178.  
  1179. .scroll-bar:vertical {
  1180.     -fx-background-color:
  1181.         -fx-box-border,
  1182.         linear-gradient(to top, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
  1183.     -fx-background-insets: 0, 1;
  1184. }
  1185.  
  1186. .scroll-bar:vertical:focused {
  1187.     -fx-background-color:
  1188.         -fx-focus-color,
  1189.         -fx-box-border,
  1190.         linear-gradient(to top, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
  1191.     -fx-background-insets: -1.4, 0, 1;
  1192. }
  1193.  
  1194. .scroll-bar:horizontal .thumb {
  1195.     -fx-background-color:
  1196.         -fx-box-border,
  1197.         linear-gradient(to bottom, derive(-fx-color,95%), derive(-fx-color,10%)),
  1198.         linear-gradient(to bottom, derive(-fx-color,38%), derive(-fx-color,-16%));
  1199.     -fx-background-insets: 0, 1, 2;
  1200.     -fx-background-radius: 0.5em; /* makes sure this remains circular */
  1201. }
  1202.  
  1203. .scroll-bar:vertical .thumb {
  1204.     -fx-background-color:
  1205.         -fx-box-border,
  1206.         linear-gradient(to right, derive(-fx-color,95%), derive(-fx-color,10%)),
  1207.         linear-gradient(to right, derive(-fx-color,38%), derive(-fx-color,-16%));
  1208.     -fx-background-insets: 0, 1, 2;
  1209.     -fx-background-radius: 0.5em; /* makes sure this remains circular */
  1210. }
  1211.  
  1212. .scroll-bar:focused .thumb {
  1213.     -fx-color: -fx-focused-base;
  1214. }
  1215.  
  1216. .scroll-bar .thumb:hover {
  1217.     -fx-color: -fx-hover-base;
  1218. }
  1219.  
  1220. /* Uncomment when RT-10521 is fixed.
  1221. .scroll-bar .thumb:pressed {
  1222.     -fx-color: -fx-pressed-base;
  1223. }
  1224. */
  1225.  
  1226. .scroll-bar:horizontal .track {
  1227.      -fx-background-color:
  1228.         -fx-box-border,
  1229.         linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
  1230.     -fx-background-insets:  0, 1;
  1231.     -fx-background-radius: 0.5em; /* makes sure this remains circular */
  1232. }
  1233. .scroll-bar:horizontal .track-background {
  1234.      -fx-background-color:
  1235.         -fx-box-border,
  1236.         linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
  1237.     -fx-background-insets:  0, 1;
  1238. }
  1239.  
  1240. .scroll-bar:vertical .track {
  1241.      -fx-background-color:
  1242.         -fx-box-border,
  1243.         linear-gradient(to right, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
  1244.     -fx-background-insets:  0, 1;
  1245.     -fx-background-radius: 0.5em; /* makes sure this remains circular */
  1246. }
  1247.  
  1248. .scroll-bar:vertical .track-background {
  1249.      -fx-background-color:
  1250.         -fx-box-border,
  1251.         linear-gradient(to right, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
  1252.     -fx-background-insets:  0, 1;
  1253. }
  1254.  
  1255. .scroll-bar .increment-button {
  1256.     -fx-background-color:
  1257.         -fx-box-border,
  1258.         linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
  1259.     -fx-background-insets:  0, 1;
  1260.     -fx-padding: 0.25em; /* 3 */
  1261. }
  1262.  
  1263. .scroll-bar .decrement-button {
  1264.     -fx-background-color:
  1265.         -fx-box-border,
  1266.         linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
  1267.     -fx-background-insets:  0, 1;
  1268.     -fx-padding: 0.25em; /* 3 */
  1269. }
  1270.  
  1271. .scroll-bar:horizontal .increment-arrow {
  1272.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  1273.     -fx-background-insets: 1 0 -1 0, 0;
  1274.     -fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
  1275.     -fx-shape: "M 4 0 L 0 -3 L 0 3 z";
  1276. }
  1277.  
  1278. .scroll-bar:vertical .increment-arrow {
  1279.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  1280.     -fx-background-insets: 1 0 -1 0, 0;
  1281.     -fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
  1282.     -fx-shape: "M -3 0 L 0 4 L 3 0 z";
  1283. }
  1284.  
  1285. .scroll-bar:horizontal .decrement-arrow {
  1286.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  1287.     -fx-background-insets: 1 0 -1 0, 0;
  1288.     -fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
  1289.     -fx-shape: "M 0 0 L 4 -3 L 4 3 z";
  1290. }
  1291.  
  1292. .scroll-bar:vertical .decrement-arrow {
  1293.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  1294.     -fx-background-insets: 1 0 -1 0, 0;
  1295.     -fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
  1296.     -fx-shape: "M -3 0 L 0 -4 L 3 0 z";
  1297. }
  1298.  
  1299. .scroll-bar:disabled {
  1300.     -fx-opacity: -fx-disabled-opacity;
  1301. }
  1302.  
  1303. /* The opacity of the parent is applied to the children.  So we make the
  1304.  * opacity 1.0 here to avoid double translucency.
  1305.  */
  1306. /*:disabled > * > .scroll-bar {
  1307.     -fx-opacity: 1.0;
  1308. }*/
  1309.  
  1310. /*******************************************************************************
  1311.  *                                                                             *
  1312.  * ScrollPane                                                                  *
  1313.  *                                                                             *
  1314.  ******************************************************************************/
  1315.  
  1316. .scroll-pane {
  1317.     -fx-skin: "com.sun.javafx.scene.control.skin.ScrollPaneSkin";
  1318.     -fx-background-color: -fx-box-border,-fx-background;
  1319.     -fx-background-insets: 0, 1;
  1320.     -fx-padding: 1.0;
  1321. }
  1322.  
  1323. .scroll-pane:focused {
  1324.     -fx-background-color: -fx-focus-color, -fx-box-border, -fx-background;
  1325.     -fx-background-insets: -1.4, 0, 1;
  1326. }
  1327.  
  1328. .scroll-pane > * > .scroll-bar:horizontal {
  1329.     -fx-background-insets: 0, 1 0 0 0;
  1330.     -fx-padding: 0.0 0.0 0.0 0.0;
  1331. }
  1332.  
  1333. .scroll-pane > * > .scroll-bar:vertical {
  1334.     -fx-background-insets: 0, 0 0 0 1;
  1335.     -fx-padding: 0.0 0.0 0.0 0.0;
  1336. }
  1337.  
  1338. .scroll-pane .corner {
  1339.     -fx-background-color: -fx-box-border, -fx-base;
  1340.     -fx-background-insets: 0, 1 0 0 1;
  1341. }
  1342.  
  1343. .scroll-pane:disabled {
  1344.     -fx-opacity: -fx-disabled-opacity;
  1345. }
  1346.  
  1347. /*******************************************************************************
  1348.  *                                                                             *
  1349.  * Separator                                                                   *
  1350.  *                                                                             *
  1351.  ******************************************************************************/
  1352.  
  1353. .separator {
  1354.     -fx-skin: "com.sun.javafx.scene.control.skin.SeparatorSkin";
  1355. }
  1356.  
  1357. .separator .line {
  1358.     -fx-border-style: segments(0.166667em, 0.166667em);
  1359.     -fx-border-width: 0.083333em; /* 1 */
  1360. }
  1361.  
  1362. .separator:horizontal .line {
  1363.     -fx-background-color: null;
  1364.     -fx-padding: 0.083333em 0.0em 0.0em 0.0em; /* 1 0 0 0 */
  1365.     -fx-border-color: derive(-fx-background,-20%) transparent transparent transparent;
  1366. }
  1367.  
  1368. .separator:vertical .line {
  1369.     -fx-background-color: null;
  1370.     -fx-padding: 0.0em 0.083333em 0.0em 0.0em; /* 0 1 0 0 */
  1371.     -fx-border-color:  transparent derive(-fx-background,-20%) transparent transparent;
  1372. }
  1373.  
  1374. /*******************************************************************************
  1375.  *                                                                             *
  1376.  * TextInput                                                                   *
  1377.  *                                                                             *
  1378.  ******************************************************************************/
  1379.  
  1380. .text-input {
  1381.     -fx-text-fill: -fx-text-inner-color;
  1382.     -fx-highlight-fill: -fx-accent;
  1383.     -fx-highlight-text-fill: white;
  1384. }
  1385.  
  1386. /*******************************************************************************
  1387.  *                                                                             *
  1388.  * TextField                                                                   *
  1389.  *                                                                             *
  1390.  ******************************************************************************/
  1391.  
  1392. .text-field {
  1393.     -fx-skin: "com.sun.javafx.scene.control.skin.TextFieldSkin";
  1394.     -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;
  1395.     -fx-background-insets: 0, 1, 2;
  1396.     -fx-background-radius: 3, 2, 2;
  1397.     -fx-padding: 3 5 3 5;
  1398.     -fx-text-fill: -fx-text-inner-color;
  1399.     -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
  1400.     -fx-cursor: text;
  1401. }
  1402.  
  1403. .text-field:focused {
  1404.     -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
  1405.     -fx-background-insets: -0.4, 1, 2;
  1406.     -fx-background-radius: 3.4, 2, 2;
  1407.     -fx-prompt-text-fill: transparent;
  1408. }
  1409.  
  1410. .text-field:disabled {
  1411.     -fx-opacity: -fx-disabled-opacity;
  1412. }
  1413.  
  1414. /*******************************************************************************
  1415.  *                                                                             *
  1416.  * PasswordField                                                               *
  1417.  *                                                                             *
  1418.  ******************************************************************************/
  1419.  
  1420. .password-field {
  1421.     -fx-skin: "com.sun.javafx.scene.control.skin.PasswordFieldSkin";
  1422.     -fx-text-fill: -fx-text-inner-color;
  1423. }
  1424.  
  1425. /*******************************************************************************
  1426.  *                                                                             *
  1427.  * TextArea                                                                    *
  1428.  *                                                                             *
  1429.  ******************************************************************************/
  1430.  
  1431. .text-area {
  1432.     -fx-skin: "com.sun.javafx.scene.control.skin.TextAreaSkin";
  1433.     -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;
  1434.     -fx-background-insets: 0, 1, 2;
  1435.     -fx-background-radius: 3, 2, 2;
  1436.     -fx-padding: 1;
  1437.     -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
  1438. }
  1439.  
  1440. .text-area .scroll-pane {
  1441.     -fx-background-color: transparent;
  1442. }
  1443.  
  1444. .text-area .content {
  1445.     -fx-padding: 3 5 3 5;
  1446.     -fx-cursor: text;
  1447. }
  1448.  
  1449. .text-area:focused {
  1450.     -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
  1451.     -fx-background-insets: -0.4, 1, 2;
  1452.     -fx-background-radius: 3.4, 2, 2;
  1453.     -fx-prompt-text-fill: transparent;
  1454. }
  1455.  
  1456. .text-area:disabled {
  1457.     -fx-opacity: -fx-disabled-opacity;
  1458. }
  1459.  
  1460. /*******************************************************************************
  1461.  *                                                                             *
  1462.  * Customised CSS for controls placed directly within cells                    *
  1463.  *                                                                             *
  1464.  ******************************************************************************/
  1465.  
  1466. .cell .choice-box {
  1467.     -fx-background-color: transparent;
  1468.     -fx-background-insets: 0;
  1469.     -fx-background-radius: 0;
  1470.     -fx-padding: 0.0em 0.5em 0.0em 0.0em; /* 0 6 0 0 */
  1471.     -fx-alignment: CENTER_LEFT;
  1472.     -fx-content-display: LEFT;
  1473. }
  1474.  
  1475. .cell .choice-box .label {
  1476.     -fx-padding: 0em 0.333333em 0.0em 0.333333; /* 2 4 3 6 */
  1477. }
  1478.  
  1479. .cell:focused:selected .choice-box .label {
  1480.     -fx-text-fill: white;
  1481. }
  1482.  
  1483. .cell:focused:selected .choice-box .arrow {
  1484.     -fx-background-color: -fx-mark-highlight-color, white;
  1485. }
  1486.  
  1487. /*******************************************************************************
  1488.  *                                                                             *
  1489.  * ListView and ListCell                                                       *
  1490.  *                                                                             *
  1491.  ******************************************************************************/
  1492.  
  1493. .list-view {
  1494.     -fx-skin: "com.sun.javafx.scene.control.skin.ListViewSkin";
  1495.     -fx-background-color: -fx-box-border, -fx-control-inner-background;
  1496.     -fx-background-insets: 0, 1;
  1497.  
  1498.      /* There is some oddness if padding is in em values rather than pixels,
  1499.         in particular, the left border of the control doesn't show. */
  1500.     -fx-padding: 1; /* 0.083333em; */
  1501. }
  1502.  
  1503. .list-view:focused {
  1504.     -fx-background-color: -fx-focus-color,-fx-box-border,-fx-control-inner-background;
  1505.     -fx-background-insets: -1.4, 0, 1;
  1506.     -fx-background-radius: 1.4, 0, 0;
  1507.  
  1508.     /* There is some oddness if padding is in em values rather than pixels,
  1509.        in particular, the left border of the control doesn't show. */
  1510.     -fx-padding: 1; /* 0.083333em; */
  1511. }
  1512.  
  1513. .list-view .scroll-bar:vertical{
  1514.     -fx-background-insets: 0, 0 0 0 1;
  1515.     -fx-padding: 0.0 0.0 0.0 0.0;
  1516. }
  1517.  
  1518. .list-view .scroll-bar:horizontal{
  1519.     -fx-background-insets: 0, 1 0 0 0;
  1520.     -fx-padding: 0.0 0.0 0.0 0.0;
  1521. }
  1522.  
  1523. .list-view:disabled {
  1524.     -fx-opacity: -fx-disabled-opacity;
  1525. }
  1526.  
  1527. .list-view .corner {
  1528.     -fx-background-color: -fx-box-border, -fx-base;
  1529.     -fx-background-insets: 0, 1 0 0 1;
  1530. }
  1531.  
  1532. .list-cell {
  1533.     -fx-skin: "com.sun.javafx.scene.control.skin.ListCellSkin";
  1534.     -fx-background-color: -fx-control-inner-background;
  1535.     -fx-padding: 0.25em; /* 3 */
  1536.     -fx-text-fill: -fx-text-inner-color;
  1537.     -fx-opacity: 1;
  1538. }
  1539.  
  1540. .list-cell:odd {
  1541.     -fx-background-color: derive(-fx-control-inner-background,-5%);
  1542. }
  1543.  
  1544. .list-view:focused .list-cell:focused {
  1545.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
  1546.     -fx-background-insets: 0, 1, 2;
  1547. }
  1548.  
  1549. .list-view:focused .list-cell:focused:odd {
  1550.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, derive(-fx-control-inner-background,-5%);
  1551.     -fx-background-insets: 0, 1, 2;
  1552. }
  1553.  
  1554. /* When the list-cell is selected and focused */
  1555. .list-view:focused .list-cell:filled:focused:selected {
  1556.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
  1557.     -fx-background-insets: 0, 1, 2;
  1558.     -fx-background: -fx-accent;
  1559.     -fx-text-fill: -fx-selection-bar-text;
  1560. }
  1561.  
  1562. .list-view:focused .list-cell:filled:selected, .list-view:focused .list-cell:filled:selected:hover {
  1563.     -fx-background: -fx-accent;
  1564.     -fx-background-color: -fx-selection-bar;
  1565.     -fx-text-fill: -fx-selection-bar-text;
  1566. }
  1567.  
  1568. .list-view:focused .list-cell:filled:focused:selected:hover {
  1569.     -fx-background: -fx-accent;
  1570.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
  1571.     -fx-background-insets: 0, 1, 2;
  1572.     -fx-text-fill: -fx-selection-bar-text;
  1573. }
  1574.  
  1575. /* When the ListView is _not_ focused, we show alternate selection colors */
  1576. .list-cell:filled:selected:focused, .list-cell:filled:selected, .list-view:horizontal .list-cell:filled:selected {
  1577.     -fx-background-color: lightgray;
  1578.     -fx-text-fill: -fx-selection-bar-text;
  1579. }
  1580.  
  1581. .list-cell:filled:selected:focused:disabled, .list-cell:filled:selected:disabled {
  1582.     -fx-opacity: -fx-disabled-opacity;
  1583. }
  1584.  
  1585. .list-cell:filled:hover {
  1586.     -fx-background-color: -fx-cell-hover-color;
  1587.     -fx-text-fill: -fx-text-inner-color;
  1588. }
  1589.  
  1590. .list-view:focused .list-cell:filled:focused:hover {
  1591.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
  1592.     -fx-background-insets: 0, 1, 2;
  1593.     -fx-text-fill: -fx-text-inner-color;
  1594. }
  1595.  
  1596. .list-view:horizontal .list-cell:filled:selected, .list-view:horizontal .list-cell:filled:selected:hover {
  1597.     -fx-background-color: linear-gradient(to right, derive(-fx-accent,-7%), derive(-fx-accent,-25%));
  1598. }
  1599.  
  1600. /*******************************************************************************
  1601.  *                                                                             *
  1602.  * TreeView and TreeCell                                                       *
  1603.  *                                                                             *
  1604.  ******************************************************************************/
  1605.  
  1606. .tree-view {
  1607.     -fx-skin: "com.sun.javafx.scene.control.skin.TreeViewSkin";
  1608.     -fx-background-color: -fx-box-border, -fx-control-inner-background;
  1609.     -fx-background-insets: 0, 1;
  1610.  
  1611.     /* There is some oddness if padding is in em values rather than pixels,
  1612.        in particular, the left border of the control doesn't show. */
  1613.     -fx-padding: 1; /* 0.083333em; */
  1614. }
  1615.  
  1616. .tree-view:focused {
  1617.     -fx-background-color: -fx-focus-color,-fx-box-border,-fx-control-inner-background;
  1618.     -fx-background-insets: -1.4, 0, 1;
  1619.     -fx-background-radius: 1.4, 0, 0;
  1620.  
  1621.     /* There is some oddness if padding is in em values rather than pixels,
  1622.        in particular, the left border of the control doesn't show. */
  1623.     -fx-padding: 1; /* 0.083333em; */
  1624. }
  1625.  
  1626. .tree-view .scroll-bar:vertical{
  1627.     -fx-background-insets: 0, 0 0 0 1;
  1628.     -fx-padding: 0.0 0.0 0.0 0.0;
  1629. }
  1630.  
  1631. .tree-view .scroll-bar:horizontal{
  1632.     -fx-background-insets: 0, 1 0 0 0;
  1633.     -fx-padding: 0.0 0.0 0.0 0.0;
  1634. }
  1635.  
  1636. .tree-view:disabled {
  1637.     -fx-opacity: -fx-disabled-opacity;
  1638. }
  1639.  
  1640. .tree-view .corner {
  1641.     -fx-background-color: -fx-box-border, -fx-base;
  1642.     -fx-background-insets: 0, 1 0 0 1;
  1643. }
  1644.  
  1645. .tree-cell {
  1646.     -fx-skin: "com.sun.javafx.scene.control.skin.TreeCellSkin";
  1647.     -fx-background-color: -fx-control-inner-background;
  1648.     -fx-padding: 0.25em; /* 3 */
  1649.     -fx-text-fill: -fx-text-inner-color;
  1650.     -fx-indent: 10;
  1651. }
  1652.  
  1653. .tree-cell .label {
  1654.     -fx-padding: 0.0em 0.0em 0.0em 0.25em; /* 0 0 0 3 */
  1655. }
  1656.  
  1657.  
  1658.  
  1659. .tree-view:focused .tree-cell:focused {
  1660.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
  1661.     -fx-background-insets: 0, 1, 2;
  1662. }
  1663.  
  1664. .tree-view:focused .tree-cell:filled:focused:selected {
  1665.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
  1666.     -fx-background-insets: 0, 1, 2;
  1667.     -fx-background: -fx-accent;
  1668.     -fx-text-fill: -fx-selection-bar-text;
  1669. }
  1670.  
  1671. .tree-view:focused .tree-cell:filled:selected, .tree-view:focused .tree-cell:filled:selected:hover {
  1672.     -fx-background: -fx-accent;
  1673.     -fx-background-color: -fx-selection-bar;
  1674.     -fx-text-fill: -fx-selection-bar-text;
  1675. }
  1676.  
  1677. .tree-view:focused .tree-cell:filled:focused:selected:hover {
  1678.     -fx-background: -fx-accent;
  1679.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
  1680.     -fx-background-insets: 0, 1, 2;
  1681.     -fx-text-fill: -fx-selection-bar-text;
  1682. }
  1683.  
  1684. /* When the TreeView is _not_ focused, we show alternate selection colors */
  1685. .tree-cell:filled:selected:focused, .tree-cell:filled:selected {
  1686.     -fx-background-color: lightgray;
  1687.     -fx-text-fill: -fx-selection-bar-text;
  1688. }
  1689.  
  1690. .tree-cell:filled:selected:focused:disabled, .tree-cell:filled:selected:disabled {
  1691.     -fx-opacity: -fx-disabled-opacity;
  1692. }
  1693.  
  1694. .tree-cell .tree-disclosure-node {
  1695.     /** put a bit of padding around the disclosure node to make the clicking region larger */
  1696.     -fx-padding: 4 2 4 8;
  1697.     -fx-background-color: transparent;
  1698. }
  1699.  
  1700. .tree-cell .tree-disclosure-node:disabled {
  1701.     -fx-opacity: -fx-disabled-opacity;
  1702. }
  1703.  
  1704. .tree-cell .tree-disclosure-node .arrow {
  1705.     -fx-background-color: -fx-mark-color;
  1706.     -fx-padding: 0.333333em; /* 4 */
  1707.     -fx-shape: "M 0 -4 L 8 0 L 0 4 z";
  1708. }
  1709.  
  1710. .tree-cell:expanded .tree-disclosure-node .arrow {
  1711.     -fx-rotate: 90;
  1712. }
  1713.  
  1714. .tree-cell:filled:selected .tree-disclosure-node .arrow {
  1715.     -fx-background-color: -fx-selection-bar-text;
  1716. }
  1717.  
  1718. .tree-cell:filled:hover {
  1719.     -fx-background-color: -fx-cell-hover-color;
  1720.     -fx-text-fill: -fx-text-inner-color;
  1721. }
  1722.  
  1723. .tree-cell:filled:hover .tree-disclosure-node .arrow {
  1724.     -fx-background-color: -fx-mark-color;
  1725. }
  1726.  
  1727. .tree-view:focused .tree-cell:filled:focused:hover {
  1728.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
  1729.     -fx-background-insets: 0, 1, 2;
  1730.     -fx-text-fill: -fx-text-inner-color;
  1731. }
  1732.  
  1733. .tree-cell:filled:selected:hover .tree-disclosure-node .arrow {
  1734.     -fx-background-color: -fx-selection-bar-text;
  1735. }
  1736.  
  1737. /*******************************************************************************
  1738.  *                                                                             *
  1739.  * MenuButton                                                                  *
  1740.  *                                                                             *
  1741.  ******************************************************************************/
  1742.  
  1743. .menu-button {
  1744.     -fx-skin: "com.sun.javafx.scene.control.skin.MenuButtonSkin";
  1745.     -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  1746.     -fx-background-insets: 0 0 -1 0, 0, 1, 2;
  1747.     -fx-background-radius: 5, 5, 4, 3;
  1748.     -fx-padding: 0.0em; /* 0 */
  1749.     -fx-text-fill: -fx-text-base-color;
  1750. }
  1751.  
  1752. /* TODO workaround for RT-19062 */
  1753. .menu-button .label { -fx-text-fill: -fx-text-base-color; }
  1754.  
  1755. .menu-button:focused {
  1756.     -fx-color: -fx-focused-base;
  1757.     -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  1758.     -fx-background-insets: -1.4, 0, 1, 2;
  1759.     -fx-background-radius: 6.4, 4, 5, 3;
  1760. }
  1761.  
  1762. .menu-button:hover {
  1763.     -fx-color: -fx-hover-base;
  1764. }
  1765.  
  1766. .menu-button:armed {
  1767.     -fx-color: -fx-pressed-base;
  1768. }
  1769.  
  1770. /* The MenuButton skin uses an inner Label part */
  1771. .menu-button .label {
  1772.     -fx-padding: 0.166667em 1.5em 0.25em 0.833333em; /* 2 18 3 10 */
  1773. }
  1774.  
  1775. .menu-button .arrow-button {
  1776.     -fx-background-insets: 0;
  1777.     -fx-background-radius: 0;
  1778.     -fx-padding: 0.5em 0.416667em 0.5em 0.0em; /* 6 5 6 0 */
  1779. }
  1780.  
  1781. .menu-button .arrow {
  1782.     -fx-background-insets: 1 0 -1 0, 0;
  1783.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  1784.     -fx-padding: 0.25em; /* 3 */
  1785.     -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
  1786. }
  1787.  
  1788. .menu-button:openvertically .arrow {
  1789.     -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
  1790.     -fx-shape: "M 0 0 h 7 l -3.5 4 z";
  1791. }
  1792.  
  1793. .menu-button:disabled {
  1794.     -fx-opacity: -fx-disabled-opacity;
  1795. }
  1796.  
  1797. .menu-button:show-mnemonics .mnemonic-underline {
  1798.     -fx-stroke: -fx-text-fill;
  1799. }
  1800.  
  1801.  
  1802.  
  1803. /*******************************************************************************
  1804.  *                                                                             *
  1805.  * SplitMenuButton                                                             *
  1806.  *                                                                             *
  1807.  ******************************************************************************/
  1808.  
  1809. .split-menu-button {
  1810.     -fx-skin: "com.sun.javafx.scene.control.skin.SplitMenuButtonSkin";
  1811.     -fx-background-color: -fx-shadow-highlight-color;
  1812.     -fx-background-insets: 0 0 -1 0;
  1813.     -fx-background-radius: 5;
  1814.     -fx-padding: 0.0em; /* 0 */
  1815.     -fx-text-fill: -fx-text-base-color;
  1816. }
  1817.  
  1818. .split-menu-button:focused {
  1819.     -fx-color: -fx-focused-base;
  1820.     -fx-background-color: -fx-focus-color;
  1821.     -fx-background-insets: -1.4;
  1822.     -fx-background-radius: 6.4;
  1823. }
  1824.  
  1825. .split-menu-button .label:hover {
  1826.     -fx-color: -fx-hover-base;
  1827. }
  1828.  
  1829. .split-menu-button:armed .label {
  1830.     -fx-color: -fx-pressed-base;
  1831. }
  1832.  
  1833. /* The SplitMenuButton skin uses an inner Label part */
  1834. .split-menu-button .label {
  1835.     -fx-background-color:  -fx-outer-border, -fx-inner-border, -fx-body-color;
  1836.     -fx-background-insets: 0, 1, 2;
  1837.     -fx-background-radius: 5 0 0 5, 4 0 0 4, 3 0 0 3;
  1838.     -fx-padding: 0.166667em 1.5em 0.25em 0.833333em; /* 2 18 3 10 */
  1839. }
  1840.  
  1841. .split-menu-button .arrow-button {
  1842.     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
  1843.     -fx-background-insets: 0, 1, 2;
  1844.     -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
  1845.     -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */
  1846. }
  1847.  
  1848. .split-menu-button .arrow-button:hover {
  1849.     -fx-color: -fx-hover-base;
  1850. }
  1851.  
  1852. .split-menu-button .arrow-button:armed {
  1853.     -fx-color: -fx-pressed-base;
  1854. }
  1855.  
  1856. .split-menu-button .arrow {
  1857.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  1858.     -fx-background-insets: 1 0 -1 0, 0;
  1859.     -fx-padding: 0.25em; /* 3 */
  1860.     -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
  1861. }
  1862.  
  1863. .split-menu-button:openvertically .arrow {
  1864.     -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
  1865.     -fx-shape: "M 0 0 h 7 l -3.5 4 z";
  1866. }
  1867.  
  1868. .split-menu-button:disabled {
  1869.     -fx-opacity: -fx-disabled-opacity;
  1870. }
  1871.  
  1872. .split-menu-button:show-mnemonics .mnemonic-underline {
  1873.     -fx-stroke: -fx-text-fill;
  1874. }
  1875.  
  1876.  
  1877.  
  1878. /*******************************************************************************
  1879.  *                                                                             *
  1880.  * Tooltip                                                                     *
  1881.  *                                                                             *
  1882.  ******************************************************************************/
  1883.  
  1884. .tooltip {
  1885.     -fx-skin: "com.sun.javafx.scene.control.skin.TooltipSkin";
  1886.     -fx-background-color:
  1887.         linear-gradient(#cec340, #a59c31),
  1888.         linear-gradient(#fefefc, #e6dd71),
  1889.         linear-gradient(#fef592, #e5d848);
  1890.     -fx-background-insets: 0,1,2;
  1891.     -fx-background-radius: 0 0 13 0;
  1892.     -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
  1893.     -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
  1894. }
  1895.  
  1896. .page-corner {
  1897.     -fx-padding: 4.5 4.5 4.5 4.5;
  1898.     -fx-background-color: linear-gradient( from 0% 0% to 50% 50%, #fcf7b6, #a59c31);
  1899.     -fx-shape: "M0,0H9L0,9Z";
  1900.     -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 4 , 0.0 , 0 , 0 );
  1901. }
  1902.  
  1903. /*******************************************************************************
  1904.  *                                                                             *
  1905.  * Toolbar                                                                     *
  1906.  *                                                                             *
  1907.  * Corresponding hex values for the color derivations used below are:          *
  1908.  * derive(-fx-base,-20%); #a6a6a6                                              *
  1909.  * derive(-fx-base,-30%); #929292                                              *
  1910.  * derive(-fx-base,-35%); #878787                                              *
  1911.  * derive(-fx-base,-50%); #686868                                              *
  1912.  * derive(-fx-base,-60%); #535353                                              *
  1913.  * derive(-fx-base,65%); #efefef                                               *
  1914.  *                                                                             *
  1915.  ******************************************************************************/
  1916.  
  1917. .tool-bar {
  1918.     -fx-skin: "com.sun.javafx.scene.control.skin.ToolBarSkin";    
  1919. }
  1920.  
  1921. .tool-bar:vertical {
  1922.     -fx-background: derive(-fx-base,-20%);
  1923.     -fx-background-color:
  1924.         linear-gradient(to right, derive(-fx-base,-30%), derive(-fx-base,-60%)),
  1925.         linear-gradient(to right, derive(-fx-base,65%) 2%, derive(-fx-base,-20%) 95%);
  1926.     -fx-background-insets: 0, 0 1 0 1;
  1927.     -fx-background-radius: 0 ;
  1928.     -fx-padding: 0.833em 0.416667em 0.833em 0.416667em; /* 10 5 10 5 */
  1929.     -fx-spacing: 0.333em; /* 4 */
  1930.     -fx-alignment: TOP_LEFT;
  1931. }
  1932.  
  1933. .tool-bar .separator:vertical .line {
  1934.     -fx-border-style: solid;
  1935.     -fx-background-color: null;
  1936.     -fx-border-color:  transparent derive(-fx-base,-35%) transparent transparent;
  1937. }
  1938.  
  1939. .tool-bar .separator:horizontal .line {
  1940.     -fx-border-style: solid;
  1941.     -fx-background-color: null;
  1942.     -fx-border-color:  transparent transparent derive(-fx-base,-35%) transparent;
  1943. }
  1944.  
  1945. .tool-bar:vertical .separator {
  1946.     -fx-orientation: horizontal;    
  1947.     -fx-padding: 0.0em 0.0835em 0.0em 0.0835em; /* 0 1 0 1 */
  1948. }
  1949.  
  1950. .tool-bar:horizontal {
  1951.     -fx-background: derive(-fx-base,-30%);
  1952.     -fx-background-color:
  1953.         linear-gradient(to bottom, derive(-fx-base,-30%), derive(-fx-base,-60%)),
  1954.         linear-gradient(to bottom, derive(-fx-base,65%) 2%, derive(-fx-base,-20%) 95%);
  1955.     -fx-background-insets: 0, 1 0 1 0;
  1956.     -fx-background-radius: 0, 0 ;
  1957.     -fx-padding: 0.416667em 0.833em 0.416667em 0.833em; /* 5 10 5 10 */
  1958.     -fx-spacing: 0.333em; /* 4 */
  1959.     -fx-alignment: CENTER_LEFT;
  1960. }
  1961.  
  1962. .tool-bar:horizontal .separator {
  1963.     -fx-orientation: vertical;
  1964.     -fx-padding: 0.0835em 0.0em 0.0835em 0.0em; /* 1 0 1 0 */
  1965. }
  1966.  
  1967. .tool-bar-overflow-button {
  1968.     -fx-background-color: transparent;
  1969.     -fx-padding: 0.666667em 0.916667em 0em 0em; /* 8 11 0 0 */
  1970. }
  1971.  
  1972. .tool-bar-overflow-button .arrow {
  1973.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  1974.     -fx-background-insets: 1 0 -1 0, 0;
  1975.     -fx-padding: 0.666667em 0.916667em 0em 0em; /* 8 11 0 0 */
  1976.     -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" ;
  1977. }
  1978.  
  1979. .tool-bar-overflow-button:focused .arrow {
  1980.    -fx-background-color: -fx-mark-highlight-color, derive(-fx-accent, -15%);
  1981.    -fx-background-insets: 1 0 -1 0, 0;
  1982. }
  1983.  
  1984. .tool-bar-overflow-button:hover .arrow {
  1985.    -fx-background-color: -fx-mark-highlight-color, derive(-fx-hover-base, -35%);
  1986.    -fx-background-insets: 1 0 -1 0, 0;
  1987. }
  1988.  
  1989. /*******************************************************************************
  1990.  *                                                                             *
  1991.  * ProgressBar                                                                 *
  1992.  *                                                                             *
  1993.  ******************************************************************************/
  1994.  
  1995. .progress-bar {
  1996.     -fx-skin: "com.sun.javafx.scene.control.skin.ProgressBarSkin";
  1997.     -fx-background-color:
  1998.         -fx-box-border,
  1999.         linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
  2000.     -fx-background-insets: 0, 1;
  2001.     -fx-indeterminate-bar-length: 60;
  2002.     -fx-indeterminate-bar-escape: true;
  2003.     -fx-indeterminate-bar-flip: true;
  2004.     -fx-indeterminate-bar-animation-time: 2;
  2005. }
  2006.  
  2007. .progress-bar .bar {
  2008.     -fx-background-color:
  2009.         -fx-box-border,
  2010.         linear-gradient(to bottom, derive(-fx-accent,95%), derive(-fx-accent,10%)),
  2011.         linear-gradient(to bottom, derive(-fx-accent,38%), -fx-accent);
  2012.     -fx-background-insets: 0, 1, 2;
  2013.     -fx-padding: 0.416667em; /* 5 */
  2014. }
  2015.  
  2016. .progress-bar:indeterminate .bar {
  2017.     -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
  2018. }
  2019.  
  2020. .progress-bar .track {
  2021.      -fx-background-color:
  2022.         -fx-box-border,
  2023.         linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
  2024.     -fx-background-insets:  0, 1;
  2025. }
  2026.  
  2027. .progress-bar:disabled {
  2028.     -fx-opacity: -fx-disabled-opacity;
  2029. }
  2030.  
  2031. /*******************************************************************************
  2032.  *                                                                             *
  2033.  * ProgressIndicator                                                           *
  2034.  *                                                                             *
  2035.  ******************************************************************************/
  2036.  
  2037. .progress-indicator {
  2038.     -fx-skin: "com.sun.javafx.scene.control.skin.ProgressIndicatorSkin";
  2039.     -fx-progress-color: dodgerblue;
  2040. }
  2041.  
  2042. .progress-indicator .indicator {
  2043.     -fx-background-color:
  2044.         -fx-box-border,
  2045.         -fx-outer-border,
  2046.         -fx-inner-border,
  2047.         -fx-body-color;
  2048.     -fx-background-insets: 1 0 -1 0, 0, 1, 2;
  2049.     -fx-padding: 0.083333em; /* 1 */
  2050. }
  2051.  
  2052. .progress-indicator .progress {
  2053.     -fx-background-color:
  2054.         linear-gradient(to bottom, derive(-fx-box-border,38%), derive(-fx-box-border,-60%)),
  2055.         linear-gradient(to bottom, derive(-fx-box-border,38%), -fx-box-border);
  2056.     -fx-background-insets: 0, 1;
  2057.     -fx-padding: 0.75em; /* 9 */
  2058. }
  2059.  
  2060. /* TODO: scaling the shape seems to make it disappear */
  2061. .progress-indicator .tick {
  2062.     -fx-background-color: -fx-mark-color, white;
  2063.     -fx-background-insets: 1 0 -1 0, 0;
  2064.     -fx-padding: 0.416667em; /* 5 */
  2065.     -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";
  2066.     -fx-scale-shape: false;
  2067. }
  2068.  
  2069. .progress-indicator:indeterminate .spinner {
  2070.     -fx-padding: 0.833333em; /* 10 */
  2071. }
  2072.  
  2073. .progress-indicator .percentage {
  2074.     -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
  2075.     -fx-fill: -fx-text-background-color;
  2076. }
  2077.  
  2078. .progress-indicator:disabled {
  2079.     -fx-opacity: -fx-disabled-opacity;
  2080. }
  2081.  
  2082. /*******************************************************************************
  2083.  *                                                                             *
  2084.  * TableView                                                                   *
  2085.  *                                                                             *
  2086.  ******************************************************************************/
  2087.  
  2088. .table-view {
  2089.     -fx-skin: "com.sun.javafx.scene.control.skin.TableViewSkin";
  2090.     -fx-background-color: -fx-box-border, -fx-control-inner-background;
  2091.     -fx-background-insets: 0,1;
  2092.  
  2093.     /* There is some oddness if padding is in em values rather than pixels,
  2094.        in particular, the left border of the control doesn't show. */
  2095.     -fx-padding: 1; /* 0.083333em; */
  2096.  
  2097.     /* Constants used throughout the tableview.
  2098.      * TODO: Should these be derived from the palette in .scene?
  2099.      */
  2100.     -fx-table-header-border-color: #959595;
  2101. /*    -fx-table-header-background-color: linear (0%,0%) to (0%,100%) stops (80%, #bbbbbb) (10%, #f6f6f6);*/
  2102.     -fx-table-cell-border-color: #bbbbbb;
  2103. }
  2104.  
  2105. /** Draws focus border around tableview */
  2106. .table-view:focused {
  2107.     -fx-background-color: -fx-focus-color,-fx-box-border,-fx-control-inner-background;
  2108.     -fx-background-insets: -1.4, 0, 1;
  2109.     -fx-background-radius: 1.4, 0, 0;
  2110.  
  2111.     /* There is some oddness if padding is in em values rather than pixels,
  2112.        in particular, the left border of the control doesn't show. */
  2113.     -fx-padding: 1; /* 0.083333em; */
  2114. }
  2115.  
  2116. .table-view:disabled {
  2117.     -fx-opacity: -fx-disabled-opacity;
  2118. }
  2119.  
  2120. .table-view .scroll-bar:vertical{
  2121.     -fx-background-insets: 0, 0 0 0 1;
  2122.     -fx-padding: 0.0 0.0 0.0 0.0;
  2123. }
  2124.  
  2125. .table-view .scroll-bar:horizontal{
  2126.     -fx-background-insets: 0, 1 0 0 0;
  2127.     -fx-padding: 0.0 0.0 0.0 0.0;
  2128. }
  2129.  
  2130. .table-view .corner {
  2131.     -fx-background-color: -fx-box-border, -fx-base;
  2132.     -fx-background-insets: 0, 1 0 0 1;
  2133. }
  2134.  
  2135. /* Each row in the table is a table-row-cell. Inside a table-row-cell is any
  2136.    number of table-cell. */
  2137. .table-row-cell {
  2138.     -fx-skin: "com.sun.javafx.scene.control.skin.TableRowSkin";
  2139.     -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background;
  2140.     -fx-background-insets: 0, 0 0 1 0;
  2141.     -fx-padding: 0.0em; /* 0 */
  2142.     -fx-text-fill: -fx-text-inner-color;
  2143. }
  2144.  
  2145. .table-row-cell:odd {
  2146.     -fx-background-color: -fx-table-cell-border-color, derive(-fx-control-inner-background,-5%);
  2147.     -fx-background-insets: 0, 0 0 1 0;
  2148. }
  2149.  
  2150. .table-row-cell:focused {
  2151.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
  2152.     -fx-background-insets: 0, 1, 2;
  2153. }
  2154.  
  2155. .table-row-cell:focused:odd {
  2156.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, derive(-fx-control-inner-background,-5%);
  2157.     -fx-background-insets: 0, 1, 2;
  2158. }
  2159.  
  2160. /* When the table-row-cell is selected and focused */
  2161. .table-view:focused .table-row-cell:filled:focused:selected {
  2162.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
  2163.     -fx-background-insets: 0, 1, 2;
  2164.     -fx-background: -fx-accent;
  2165.     -fx-text-fill: -fx-selection-bar-text;
  2166. }
  2167.  
  2168. .table-view:focused .table-row-cell:filled:selected .table-cell {
  2169.     -fx-text-fill: -fx-selection-bar-text;
  2170. }
  2171.  
  2172. .table-view:focused .table-row-cell:filled:selected, .table-view:row-selection .table-row-cell:filled:hover:selected {
  2173.     -fx-background: -fx-accent;
  2174.     -fx-background-color: -fx-selection-bar;
  2175.     -fx-text-fill: -fx-selection-bar-text;
  2176. }
  2177.  
  2178. .table-view:focused .table-row-cell:filled:focused:selected:hover {
  2179.     -fx-background: -fx-accent;
  2180.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
  2181.     -fx-background-insets: 0, 1, 2;
  2182.     -fx-text-fill: -fx-selection-bar-text;
  2183. }
  2184.  
  2185. /* When the TableView is _not_ focused, we show alternate selection colors */
  2186. .table-row-cell:filled:selected:focused, .table-row-cell:filled:selected {
  2187.     -fx-background-color: lightgray;
  2188.     -fx-text-fill: -fx-selection-bar-text;
  2189. }
  2190.  
  2191. .table-row-cell:selected:disabled {
  2192.     -fx-opacity: -fx-disabled-opacity;
  2193. }
  2194.  
  2195. .table-view:row-selection .table-row-cell:filled:hover {
  2196.     -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color;
  2197.     -fx-background-insets: 0, 0 0 1 0;
  2198.     -fx-text-fill: -fx-text-inner-color;
  2199. }
  2200.  
  2201. .table-view:row-selection .table-row-cell:filled:focused:hover {
  2202.     -fx-background-color: -fx-table-cell-border-color, -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
  2203.     -fx-background-insets: 0, 0 0 1 0, 1 1 2 1, 2 2 3 2, 3 3 4 3;
  2204.     -fx-text-fill: -fx-text-inner-color;
  2205. }
  2206.  
  2207. .table-cell {
  2208.     -fx-skin: "com.sun.javafx.scene.control.skin.TableCellSkin";
  2209.     -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
  2210.  
  2211.     -fx-background-color: transparent;
  2212.     -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
  2213.     -fx-border-width: 0.083333em; /* 1 */
  2214.     -fx-cell-size: 2.0em; /* 24 */
  2215.     -fx-text-fill: -fx-text-inner-color;
  2216. }
  2217.  
  2218. /* When in constrained resize mode, the right-most visible cell should not have
  2219.    a right-border, as it is not possible to get this cleanly out of view without
  2220.    introducing horizontal scrollbars (see RT-14886). */
  2221. .table-view:constrained-resize .table-cell:last-visible {
  2222.     -fx-border-color: transparent;
  2223. }
  2224. .table-view:constrained-resize .column-header:last-visible {
  2225.     -fx-border-width: 0.083333em 0.0em 0.083333em 0.083333em, 0.083333em 0.0em 0.083333em 0.083333em;
  2226. }
  2227. .table-view:constrained-resize .filler {
  2228.     -fx-border-color:
  2229.         derive(-fx-base, 80%)
  2230.         linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%)
  2231.         derive(-fx-base, 10%)
  2232.         linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
  2233.         /* Outer border: */
  2234.         transparent -fx-table-header-border-color -fx-table-header-border-color -fx-table-header-border-color;
  2235.     -fx-border-insets: 0 1 1 1, 0 0 0 0;
  2236. }
  2237.  
  2238. .table-view:focused .table-cell:focused {
  2239.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
  2240.     -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
  2241. }
  2242.  
  2243. .table-view:focused .table-row-cell:filled .table-cell:focused:selected {
  2244.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
  2245.     -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
  2246.     -fx-background: -fx-accent;
  2247.     -fx-text-fill: -fx-selection-bar-text;
  2248. }
  2249.  
  2250. .table-view:focused .table-row-cell:filled .table-cell:selected, .table-view:cell-selection .table-row-cell:filled .table-cell:hover:selected {
  2251.     -fx-background: -fx-accent;
  2252.     -fx-background-color: -fx-selection-bar;
  2253.     -fx-text-fill: -fx-selection-bar-text;
  2254.     -fx-background-insets: 0 0 1 0;
  2255. }
  2256.  
  2257. .table-view:focused .table-row-cell:filled .table-cell:focused:selected:hover {
  2258.     -fx-background: -fx-accent;
  2259.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
  2260.     -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
  2261.     -fx-text-fill: -fx-selection-bar-text;
  2262. }
  2263.  
  2264. /* When the TableView is _not_ focused, we show alternate selection colors */
  2265.  .table-row-cell:filled .table-cell:selected:focused,  .table-row-cell:filled .table-cell:selected {
  2266.     -fx-background-color: lightgray;
  2267.     -fx-text-fill: -fx-selection-bar-text;
  2268. }
  2269.  
  2270. .table-cell:selected:disabled {
  2271.     -fx-opacity: -fx-disabled-opacity;
  2272. }
  2273.  
  2274. /*.table-cell:focused {
  2275.     -fx-background-color: -fx-focus-color, -fx-control-inner-background;
  2276.     -fx-background-insets: 0, 1.4;
  2277. }*/
  2278.  
  2279. .table-view:cell-selection  .table-row-cell:filled .table-cell:hover {
  2280.     -fx-background-color: -fx-cell-hover-color;
  2281.     -fx-text-fill: -fx-text-inner-color;
  2282.     -fx-background-insets: 0 0 1 0;
  2283. }
  2284.  
  2285. .table-view:cell-selection .table-row-cell:filled .table-cell:focused:hover {
  2286.     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
  2287.     -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
  2288.     -fx-text-fill: -fx-text-inner-color;
  2289. }
  2290.  
  2291. /* The column-resize-line is shown when the user is attempting to resize a column. */
  2292. .table-view .column-resize-line {
  2293.     -fx-background: -fx-accent;
  2294.     -fx-background-color: -fx-selection-bar;
  2295.     -fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */
  2296. }
  2297.  
  2298. /* This is the area behind the column headers. An ideal place to specify background
  2299.    and border colors for the whole area (not individual column-header's). */
  2300. .table-view .column-header-background {
  2301.     -fx-background-color: -fx-body-color;
  2302.     -fx-padding: 0;
  2303. }
  2304.  
  2305. /* The column header row is made up of a number of column-header, one for each
  2306.    TableColumn, and a 'filler' area that extends from the right-most column
  2307.    to the edge of the tableview, or up to the 'column control' button. */
  2308. .table-view .column-header, .table-view .filler {
  2309.     -fx-text-fill: -fx-selection-bar-text;
  2310.  
  2311.     /* TODO: for some reason, this doesn't scale. */
  2312.     -fx-font-size: 1.083333em; /* 13pt - 1 more than the default font */
  2313.     -fx-size: 25;
  2314.     -fx-border-style: solid;
  2315.     -fx-border-color:
  2316.         /*
  2317.           Inner border: we have different colours along the top, right, bottom and left.
  2318.           Refer to RT-12298 for the spec.
  2319.         */
  2320.         derive(-fx-base, 80%)
  2321.         linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%)
  2322.         derive(-fx-base, 10%)
  2323.         linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
  2324.         /* Outer border: */
  2325.         transparent -fx-table-header-border-color -fx-table-header-border-color transparent;
  2326.     -fx-border-insets: 0 1 1 0, 0 0 0 0;
  2327.     -fx-border-width: 0.083333em, 0.083333em;
  2328. }
  2329.  
  2330. .table-view .column-header .sort-order {
  2331.     -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
  2332. }
  2333.  
  2334. .table-view .show-hide-columns-button {
  2335.     -fx-background-color: -fx-body-color;
  2336.  
  2337.     -fx-border-color:
  2338.         /* inner border: A copy of the inner border used above in the general column header area. */
  2339.         derive(-fx-base, 80%)
  2340.         linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
  2341.         derive(-fx-base, 10%)
  2342.         linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
  2343.         /* outer border: Slightly different to the above*/
  2344.         transparent transparent -fx-table-header-border-color -fx-table-header-border-color;
  2345.     -fx-border-insets: 0 0 1 1, 0 0 0 0;
  2346. }
  2347.  
  2348. .table-view .show-hide-column-image {
  2349.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  2350.     -fx-background-insets: 1 0 -1 0, 0;
  2351.  
  2352.     -fx-padding: 0.25em; /* 3px */
  2353.     -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";
  2354. }
  2355.  
  2356. /*.nested-column-header .column-header {
  2357.     -fx-background-color: transparent;
  2358. }*/
  2359.  
  2360. /* When a column is being 'dragged' to be placed in a different position, there
  2361.    is a region that follows along the column header area to indicate where the
  2362.    column will be dropped. This region can be styled using the .column-drag-header
  2363.    name. */
  2364. .table-view .column-drag-header {
  2365.     -fx-background: -fx-accent;
  2366.     -fx-background-color: -fx-selection-bar;
  2367.     -fx-border-color: transparent;
  2368.     -fx-opacity: 0.6;
  2369. }
  2370.  
  2371. /* Semi-transparent overlay to indicate the column that is currently being moved */
  2372. .table-view .column-overlay {
  2373.     -fx-background-color: darkgray;
  2374.     -fx-opacity: 0.3;
  2375. }
  2376.  
  2377. .table-view .arrow {
  2378.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  2379.     -fx-background-insets: 1 0 -1 0, 0;
  2380.     -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
  2381.     -fx-shape: "M 0 0 h 7 l -3.5 4 z";
  2382. }
  2383.  
  2384. /* This is shown when the table has no rows and/or no columns. */
  2385. .table-view .empty-table {
  2386.     -fx-background-color: white;
  2387.     -fx-font-size: 1.166667em; /* 14pt - 2 more than the default font */
  2388. }
  2389.  
  2390. /*******************************************************************************
  2391.  *                                                                             *
  2392.  * TitledPane                                                                  *
  2393.  *                                                                             *
  2394.  ******************************************************************************/
  2395.  
  2396. .titled-pane {
  2397.     -fx-skin: "com.sun.javafx.scene.control.skin.TitledPaneSkin";    
  2398.     -fx-text-fill: -fx-text-base-color;
  2399. }
  2400.  
  2401. .titled-pane:focused {
  2402.     -fx-text-fill: white;
  2403. }
  2404.  
  2405. .titled-pane > .title {
  2406.     -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color;
  2407.     -fx-background-insets: 0, 1, 2;
  2408.     -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
  2409.     -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */
  2410. }
  2411.  
  2412. .titled-pane:focused > .title {
  2413.     -fx-color: -fx-focus-color;
  2414. }
  2415.  
  2416. .titled-pane > .title > .arrow-button {
  2417.     -fx-background-color: null;
  2418.     -fx-background-insets: 0;
  2419.     -fx-background-radius: 0;
  2420.     -fx-padding: 0.0em 0.25em 0.0em 0.0em; /* 0 3 0 0 */
  2421. }
  2422.  
  2423. .titled-pane > .title > .arrow-button .arrow {
  2424.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  2425.     -fx-background-insets: 1 0 -1 0, 0;
  2426.     -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
  2427.     -fx-shape: "M 0 0 h 7 l -3.5 4 z";
  2428. }
  2429.  
  2430. .titled-pane:collapsed > .title > .arrow-button .arrow {
  2431.     -fx-rotate: -90;
  2432. }
  2433.  
  2434. .titled-pane > *.content {
  2435.     -fx-background-color:
  2436.         -fx-box-border,
  2437.         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);
  2438.     -fx-background-insets: 0, 0 1 1 1;
  2439.     -fx-padding: 0.167em;
  2440. }
  2441.  
  2442. .titled-pane:focused > .title > .arrow-button .arrow {
  2443.     -fx-background-color: white;
  2444. }
  2445.  
  2446.  
  2447. /*******************************************************************************
  2448.  *                                                                             *
  2449.  * Accordion                                                                   *
  2450.  *                                                                             *
  2451.  ******************************************************************************/
  2452.  
  2453. .accordion {
  2454.     -fx-skin: "com.sun.javafx.scene.control.skin.AccordionSkin";
  2455. }
  2456.  
  2457. .accordion .titled-pane .title {
  2458.     -fx-background-color:
  2459.         -fx-box-border,
  2460.         -fx-inner-border,
  2461.         -fx-body-color;
  2462.     -fx-background-insets: -1 0 0 0, 0 1 1 1, 1 2 2 2;
  2463.     -fx-background-radius: 0, 0, 0;
  2464. }
  2465.  
  2466. .accordion .first-titled-pane .title {
  2467.     -fx-background-insets: 0, 1, 2;
  2468. }
  2469.  
  2470. .accordion .titled-pane:focused > .title {
  2471.     -fx-color: -fx-focus-color;
  2472. }
  2473.  
  2474. .accordion .titled-pane:focused {
  2475.     -fx-text-fill: white;
  2476. }
  2477.  
  2478. .accordion .titled-pane:focused > .title > .arrow-button .arrow {
  2479.     -fx-background-color: white;
  2480. }
  2481.  
  2482. .accordion .titled-pane:focused .titled-pane:collapsed > .title > .arrow-button .arrow {
  2483.     -fx-background-color: white;
  2484. }
  2485.  
  2486. .accordion .titled-pane:collapsed:focused > .title {
  2487.     -fx-color: -fx-focus-color;
  2488. }
  2489.  
  2490. .accordion .titled-pane:expanded:focused > .title {
  2491.     -fx-color: -fx-focus-color;
  2492. }
  2493.  
  2494. .accordion .titled-pane:hover > .title {
  2495.     -fx-color: -fx-hover-base;
  2496. }
  2497.  
  2498. /*******************************************************************************
  2499.  *                                                                             *
  2500.  * SplitPane                                                                   *
  2501.  *                                                                             *
  2502.  ******************************************************************************/
  2503.  
  2504. .split-pane > * > * > .table-view { -fx-padding: 0px; }
  2505. .split-pane > * > * > .list-view { -fx-padding: 0px; }
  2506. .split-pane > * > * > .tree-view { -fx-padding: 0px; }
  2507. .split-pane > * > * > .scroll-pane { -fx-padding: 0px; }
  2508. .split-pane > * > * > .split-pane {
  2509.     -fx-background-insets: 0, 0;
  2510.     -fx-padding: 0;
  2511.  }
  2512.  
  2513. .split-pane {
  2514.     -fx-skin: "com.sun.javafx.scene.control.skin.SplitPaneSkin";
  2515.     -fx-background-color: -fx-box-border, -fx-control-inner-background;
  2516.     -fx-background-insets: 0, 1;
  2517.     -fx-padding: 1;
  2518. }
  2519.  
  2520. .split-pane *.split-pane-divider {
  2521.     -fx-padding: 0 2 0 2; /* 0 3 0 3 */
  2522. }
  2523.  
  2524. /* horizontal the two nodes are placed to the left/right of each other. */
  2525. .split-pane:horizontal > * > .split-pane-divider {
  2526.    -fx-border-color: transparent -fx-box-border transparent #BBBBBB;
  2527.    -fx-background-color: transparent, -fx-inner-border-horizontal;
  2528.    -fx-background-insets: 0, 0 1 0 1;
  2529. }
  2530.  
  2531. /* vertical the two nodes are placed on top of each other. */
  2532. .split-pane:vertical > * > .split-pane-divider {
  2533.    -fx-border-color:  #BBBBBB transparent -fx-box-border transparent;
  2534.    -fx-background-color: transparent, -fx-inner-border;
  2535.    -fx-background-insets: 0, 1 0 1 0;
  2536. }
  2537.  
  2538. .split-pane *.horizontal-grabber {
  2539.     -fx-padding: 5 1 5 1;
  2540.     -fx-background-color: #FFFFFF, -fx-box-border;
  2541.     -fx-background-insets: 1 0 -1 0, 0;
  2542.     -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";
  2543. }
  2544.  
  2545. .split-pane *.vertical-grabber {
  2546.     -fx-padding: 1 5 1 5;
  2547.     -fx-background-color: #FFFFFF, -fx-box-border;
  2548.     -fx-background-insets: 1 0 -1 0, 0;
  2549.     -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";
  2550. }
  2551.  
  2552. /*******************************************************************************
  2553.  *                                                                             *
  2554.  * TabPane                                                                     *
  2555.  *                                                                             *
  2556.  ******************************************************************************/
  2557.  
  2558. .tab-pane {
  2559.     -fx-skin: "com.sun.javafx.scene.control.skin.TabPaneSkin";
  2560.     /* -fx-tab-min-width: 4.583em;  55 */
  2561.     /* -fx-tab-max-width: 4.583em; 55 */
  2562.     -fx-tab-min-height: 2em; /* 24 */
  2563.     -fx-tab-max-height: 2em; /* 24 */
  2564. }
  2565.  
  2566. .tab .tab-label {
  2567.     -fx-skin: "com.sun.javafx.scene.control.skin.LabelSkin";
  2568.     -fx-background-color: transparent;    
  2569.     -fx-alignment: CENTER;
  2570.     -fx-text-fill: -fx-text-base-color;
  2571. }
  2572. /*
  2573. .tab *.tab-label Text {
  2574.     -fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
  2575. }*/
  2576.  
  2577. .tab-content-area {
  2578.     -fx-background-color: -fx-control-inner-background;
  2579.     -fx-padding: 0.0em; /* 0 */
  2580.     /* -fx-opacity: -fx-disabled-opacity;*/
  2581. }
  2582.  
  2583. .tab {
  2584.     /* This is how it is done in Button, but the -1 inset caused a white line  */
  2585.     /* to appear beneath the tab, which looks bad, so it's taken out below.    */
  2586. /*    -fx-background-color: -fx-shadow-highlight-color, -fx-tab-border-color, -fx-inner-border, -fx-body-color;
  2587.     -fx-background-radius: 5 5 0 0, 5 5 0 0, 4 4 0 0, 3 3 0 0;
  2588.     -fx-background-insets: 0 0 -1 0, 0, 1, 2;*/
  2589.     -fx-background-insets: 0, 1, 2;
  2590.     -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
  2591.     -fx-padding: 0.083333em 0.5em 0.083333em 0.5em; /* 1 6 1 6 */
  2592. /*    -fx-text-fill: -fx-text-base-color;*/
  2593. }
  2594.  
  2595. .tab:top {
  2596.     -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
  2597. }
  2598.  
  2599. .tab:right {
  2600.     -fx-background-color: -fx-tab-border-color, -fx-inner-border-bottomup, -fx-body-color-bottomup;
  2601. }
  2602.  
  2603. .tab:bottom {
  2604.     -fx-background-color: -fx-tab-border-color, -fx-inner-border-bottomup, -fx-body-color-bottomup;
  2605. }
  2606.  
  2607. .tab:left {
  2608.     -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
  2609. }
  2610.  
  2611. .tab:hover {
  2612.     -fx-color: -fx-hover-base;
  2613. }
  2614.  
  2615. .tab:selected {
  2616. /*    -fx-background-color: white;*/
  2617.  
  2618. /*    -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
  2619.     -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
  2620.     -fx-background-insets: 0, 1 1 0 1, 2 2 0 2;*/
  2621.     -fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
  2622.     -fx-background-insets: 0, 1 1 0 1;
  2623.     -fx-background-radius: 5 5 0 0, 4 4 0 0;
  2624. }
  2625.  
  2626. .tab:disabled {
  2627.     -fx-opacity: -fx-disabled-opacity;
  2628. }
  2629.  
  2630. .tab:disabled:hover {
  2631.     -fx-color: -fx-base;
  2632.     -fx-opacity: -fx-disabled-opacity;
  2633. }
  2634.  
  2635. .tab-pane *.tab-header-background {
  2636.     -fx-background-color: -fx-outer-border, -fx-inner-border, derive(-fx-color, -20%);
  2637.     -fx-effect: innershadow(two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 0);
  2638. }
  2639.  
  2640. /*.tab-pane *.tab-header-area {*/
  2641.     /* I would like to use -fx-tab-border-color here, but for some reason it */
  2642.     /* just isn't the correct color, even though it works in :top above */
  2643. /*    -fx-background-color: -fx-tab-border-color, lightgray;*/
  2644. /*}*/
  2645.  
  2646. .tab-pane:top *.tab-header-area {
  2647.     -fx-background-insets: 0, 0 0 1 0;
  2648.     -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
  2649. }
  2650.  
  2651. .tab-pane:bottom *.tab-header-area {
  2652.     -fx-background-insets: 0, 1 0 0 0;
  2653.     -fx-padding: 0 0.166667em 0.416667em 0.833em; /* 0 2 5 0 */
  2654. }
  2655.  
  2656. .tab-pane:left *.tab-header-area {
  2657.     -fx-background-insets: 0, 0 1 0 0;
  2658.     -fx-padding: 0.833em 0.0em 0.166667em 0.416667em; /* 10 0 2 5 */
  2659. }
  2660.  
  2661. .tab-pane:right *.tab-header-area {
  2662.     -fx-background-insets: 0, 0 0 0 1;
  2663.     -fx-padding: 0.833em 0.416667em 0.166667em 0.0em; /* 10 5 2 0 */
  2664. }
  2665.  
  2666. .tab-pane .headers-region {
  2667.     -fx-effect: dropshadow(two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0, 0);
  2668. }
  2669.  
  2670. /* TODO: scaling the shape seems to make it way too large */
  2671. .tab-close-button {
  2672.     -fx-background-color: -fx-mark-color;
  2673.     -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";
  2674.     -fx-scale-shape: false;
  2675.     -fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
  2676. }
  2677.  
  2678. .tab-close-button:hover {
  2679.     -fx-background-color: derive(-fx-mark-color, -30%);
  2680. }
  2681.  
  2682. /* CONTROL BUTTONS */
  2683. .control-buttons-tab {
  2684.     -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
  2685.     -fx-background-insets: 0, 1, 2;
  2686.     -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
  2687.     -fx-padding: 0.083333em 0.25em 0.083333em 0.25em; /* 1 3 1 3 */
  2688. }
  2689.  
  2690. .tab-down-button {
  2691.     -fx-background-color: transparent;
  2692.     -fx-padding: 0.0em 0.416667em 0.0em 0.416667em; /* 0 5 0 5 */
  2693. }
  2694.  
  2695. .tab-down-button:hover {
  2696.     -fx-background-color: -fx-body-color;
  2697.     -fx-color: -fx-hover-base;
  2698. }
  2699.  
  2700. .tab-down-button .arrow {
  2701.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  2702.     -fx-background-insets: 1 0 -1 0, 0;
  2703.     -fx-padding: 0.238083em 0.416667em 0.238083em 0.416667em; /* 2.857 5 2.857 5 */
  2704.     -fx-shape: "M 0 0 H 7 L 3.5 4 z";
  2705. }
  2706.  
  2707. /* FLOATING TABS CUSTOMISATION */
  2708. .tab-pane.floating *.tab-header-background {
  2709.     -fx-background-color: null;
  2710. }
  2711.  
  2712. .tab-pane.floating *.tab-header-area {
  2713.     -fx-background-color: null;
  2714. }
  2715.  
  2716. .tab-pane.floating *.tab-content-area {
  2717.     -fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
  2718.     -fx-background-insets: 0, 1;
  2719.     -fx-background-radius: 5, 4;
  2720. }
  2721.  
  2722. .tab-pane.floating *.tab {
  2723.     -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
  2724.     -fx-background-insets: 0, 1, 2;
  2725.     -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
  2726. }
  2727.  
  2728. .tab-pane.floating *.tab:selected {
  2729.     -fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
  2730.     -fx-background-insets: 0 0 -1 0, 1 1 -1 1;
  2731.     -fx-background-radius: 5 5 0 0, 4 4 0 0;
  2732. }
  2733.  
  2734. /*.tab-pane:floating *.control-buttons-tab {
  2735.     -fx-padding: 0.083333em 0.25em 0.083333em 0.25em;
  2736.     -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
  2737.     -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
  2738.     -fx-background-insets: 0, 1 1 0 1, 2 2 0 2;
  2739. }*/
  2740.  
  2741.  
  2742.  
  2743.  
  2744. /* ====== CHART TOP LEVEL ITEMS =========================================================== */
  2745. .chart {
  2746.     -fx-padding: 5px;
  2747. }
  2748. .chart-content {
  2749.     -fx-padding: 10px;
  2750. }
  2751. .chart-title {
  2752.     -fx-font-size: 1.4em;
  2753. }
  2754. .chart-legend {
  2755.    -fx-background-color:  #cccccc, #eeeeee;
  2756.    -fx-background-insets: 0,1;
  2757.    -fx-background-radius: 6,5;
  2758.    -fx-padding: 6px;
  2759. }
  2760.  
  2761. /* ====== AXIS ============================================================================ */
  2762. .axis {
  2763.     -fx-tick-label-font: 0.833333em System; /* 10 pix */
  2764.     -fx-tick-label-fill: -fx-text-background-color;
  2765. }
  2766. .axis:top {
  2767.     -fx-border-color: transparent transparent #666666 transparent;
  2768. }
  2769. .axis:right {
  2770.     -fx-border-color: transparent transparent transparent #666666;
  2771. }
  2772. .axis:bottom {
  2773.     -fx-border-color: #666666 transparent transparent transparent;
  2774. }
  2775. .axis:left {
  2776.     -fx-border-color: transparent #666666 transparent transparent;
  2777. }
  2778. .axis-tick-mark {
  2779.     -fx-fill: null;
  2780.     -fx-stroke: #666666;
  2781. }
  2782. .axis-minor-tick-mark {
  2783.     -fx-fill: null;
  2784.     -fx-stroke: #AAAAAA;
  2785. }
  2786.  
  2787. .axis .text {
  2788.   -fx-font-smoothing-type: lcd;
  2789. }
  2790.  
  2791. /* ====== CHART PLOT BACKGROUND =========================================================== */
  2792. .chart-plot-background {
  2793.     -fx-background-color: #f5f5f5;
  2794. }
  2795. .chart-vertical-grid-lines {
  2796.     -fx-stroke: #dddddd;
  2797. }
  2798. .chart-horizontal-grid-lines {
  2799.     -fx-stroke: #dddddd;
  2800. }
  2801. .chart-alternative-column-fill {
  2802.     -fx-fill: #eeeeee;
  2803.     -fx-stroke: transparent;
  2804.     -fx-stroke-width: 0;
  2805. }
  2806. .chart-alternative-row-fill {
  2807.     -fx-fill: #eeeeee;
  2808.     -fx-stroke: transparent;
  2809.     -fx-stroke-width: 0;
  2810. }
  2811. .chart-vertical-zero-line {
  2812.     -fx-stroke: #999999;
  2813. }
  2814. .chart-horizontal-zero-line {
  2815.     -fx-stroke: #999999;
  2816. }
  2817. /* ====== SCATTER CHART =========================================================== */
  2818. .chart-symbol { /* solid circle */
  2819.     -fx-background-color: #f9d900;
  2820.     -fx-background-radius: 5px;
  2821.     -fx-padding: 5px;
  2822. }
  2823. .default-color1.chart-symbol { /* solid square */
  2824.     -fx-background-color: #a9e200;
  2825.     -fx-background-radius: 0;
  2826. }
  2827. .default-color2.chart-symbol { /* solid diamond */
  2828.     -fx-background-color: #22bad9;
  2829.     -fx-background-radius: 0;
  2830.     -fx-padding: 7px 5px 7px 5px;
  2831.     -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
  2832. }
  2833. .default-color3.chart-symbol { /* cross */
  2834.     -fx-background-color: #0181e2;
  2835.     -fx-background-radius: 0;
  2836.     -fx-background-insets: 0;
  2837.     -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";
  2838. }
  2839. .default-color4.chart-symbol { /* solid triangle */
  2840.     -fx-background-color: #2f357f;
  2841.     -fx-background-radius: 0;
  2842.     -fx-background-insets: 0;
  2843.     -fx-shape: "M5,0 L10,8 L0,8 Z";
  2844. }
  2845. .default-color5.chart-symbol { /* hollow circle */
  2846.     -fx-background-color: #860061, white;
  2847.     -fx-background-insets: 0, 2;
  2848.     -fx-background-radius: 5px;
  2849.     -fx-padding: 5px;
  2850. }
  2851. .default-color6.chart-symbol { /* hollow square */
  2852.     -fx-background-color: #c62b00, white;
  2853.     -fx-background-insets: 0, 2;
  2854.     -fx-background-radius: 0;
  2855. }
  2856. .default-color7.chart-symbol { /* hollow diamond */
  2857.     -fx-background-color: #ff5700, white;
  2858.     -fx-background-radius: 0;
  2859.     -fx-background-insets: 0, 2.5;
  2860.     -fx-padding: 7px 5px 7px 5px;
  2861.     -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
  2862. }
  2863.  
  2864. /* ====== LINE CHART =========================================================== */
  2865. .chart-line-symbol {
  2866.     -fx-background-color: #f9d900, white;
  2867.     -fx-background-insets: 0, 2;
  2868.     -fx-background-radius: 5px;
  2869.     -fx-padding: 5px;
  2870. }
  2871. .chart-series-line {
  2872.     -fx-stroke: #f9d900;
  2873.     -fx-stroke-width: 4px;
  2874.     -fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.3) , 8, 0.0 , 0 , 3 );
  2875. }
  2876. .default-color0.chart-line-symbol { -fx-background-color: #f9d900, white; }
  2877. .default-color1.chart-line-symbol { -fx-background-color: #a9e200, white; }
  2878. .default-color2.chart-line-symbol { -fx-background-color: #22bad9, white; }
  2879. .default-color3.chart-line-symbol { -fx-background-color: #0181e2, white; }
  2880. .default-color4.chart-line-symbol { -fx-background-color: #2f357f, white; }
  2881. .default-color5.chart-line-symbol { -fx-background-color: #860061, white; }
  2882. .default-color6.chart-line-symbol { -fx-background-color: #c62b00, white; }
  2883. .default-color7.chart-line-symbol { -fx-background-color: #ff5700, white; }
  2884. .default-color0.chart-series-line { -fx-stroke: #f9d900; }
  2885. .default-color1.chart-series-line { -fx-stroke: #a9e200; }
  2886. .default-color2.chart-series-line { -fx-stroke: #22bad9; }
  2887. .default-color3.chart-series-line { -fx-stroke: #0181e2; }
  2888. .default-color4.chart-series-line { -fx-stroke: #2f357f; }
  2889. .default-color5.chart-series-line { -fx-stroke: #860061; }
  2890. .default-color6.chart-series-line { -fx-stroke: #c62b00; }
  2891. .default-color7.chart-series-line { -fx-stroke: #ff5700; }
  2892.  
  2893. /* ====== AREA CHART =========================================================== */
  2894. .chart-area-symbol {
  2895.     -fx-background-color: #f9d900, white;
  2896.     -fx-background-insets: 0, 1;
  2897.     -fx-background-radius: 4px; /* makes sure this remains circular */
  2898.     -fx-padding: 3px;
  2899. }
  2900. .default-color0.chart-area-symbol { -fx-background-color: #f9d900, white; }
  2901. .default-color1.chart-area-symbol { -fx-background-color: #a9e200, white; }
  2902. .default-color2.chart-area-symbol { -fx-background-color: #22bad9, white; }
  2903. .default-color3.chart-area-symbol { -fx-background-color: #0181e2, white; }
  2904. .default-color4.chart-area-symbol { -fx-background-color: #2f357f, white; }
  2905. .default-color5.chart-area-symbol { -fx-background-color: #860061, white; }
  2906. .default-color6.chart-area-symbol { -fx-background-color: #c62b00, white; }
  2907. .default-color7.chart-area-symbol { -fx-background-color: #ff5700, white; }
  2908. .chart-series-area-line {
  2909.     -fx-stroke: #f9d900;
  2910.     -fx-stroke-width: 1px;
  2911. }
  2912. .default-color0.chart-series-area-line { -fx-stroke: #c2a902; }
  2913. .default-color1.chart-series-area-line { -fx-stroke: #88b501; }
  2914. .default-color2.chart-series-area-line { -fx-stroke: #22bad9; }
  2915. .default-color3.chart-series-area-line { -fx-stroke: #0181e2; }
  2916. .default-color4.chart-series-area-line { -fx-stroke: #2f357f; }
  2917. .default-color5.chart-series-area-line { -fx-stroke: #860061; }
  2918. .default-color6.chart-series-area-line { -fx-stroke: #c62b00; }
  2919. .default-color7.chart-series-area-line { -fx-stroke: #ff5700; }
  2920. .chart-series-area-fill {
  2921.     -fx-stroke: null;
  2922.     -fx-fill: #f9d90044;
  2923. }
  2924. .default-color0.chart-series-area-fill { -fx-fill: #f9d90044; }
  2925. .default-color1.chart-series-area-fill { -fx-fill: #a9e20044; }
  2926. .default-color2.chart-series-area-fill { -fx-fill: #22bad944; }
  2927. .default-color3.chart-series-area-fill { -fx-fill: #0181e244; }
  2928. .default-color4.chart-series-area-fill { -fx-fill: #2f357f44; }
  2929. .default-color5.chart-series-area-fill { -fx-fill: #86006144; }
  2930. .default-color6.chart-series-area-fill { -fx-fill: #c62b0044; }
  2931. .default-color7.chart-series-area-fill { -fx-fill: #ff570044; }
  2932. .area-legend-symbol {
  2933.     -fx-padding: 6px;
  2934.     -fx-background-radius: 6px; /* makes sure this remains circular */
  2935.     -fx-background-insets: 0, 3;
  2936. }
  2937. /* ====== BUBBLE CHART =========================================================== */
  2938. .bubble-legend-symbol {
  2939.     -fx-background-radius: 8px;
  2940.     -fx-padding: 8px;
  2941. }
  2942. .chart-bubble {
  2943.     -fx-bubble-fill: #f9d900;
  2944.     -fx-background-color: radial-gradient(center 50% 50%, radius 80%, derive(-fx-bubble-fill,20%), derive(-fx-bubble-fill,-30%));
  2945. }
  2946. .default-color0.chart-bubble { -fx-bubble-fill: #f9d900aa; }
  2947. .default-color1.chart-bubble { -fx-bubble-fill: #a9e200aa; }
  2948. .default-color2.chart-bubble { -fx-bubble-fill: #22bad9aa; }
  2949. .default-color3.chart-bubble { -fx-bubble-fill: #0181e2aa; }
  2950. .default-color4.chart-bubble { -fx-bubble-fill: #2f357faa; }
  2951. .default-color5.chart-bubble { -fx-bubble-fill: #860061aa; }
  2952. .default-color6.chart-bubble { -fx-bubble-fill: #c62b00aa; }
  2953. .default-color7.chart-bubble { -fx-bubble-fill: #ff5700aa; }
  2954.  
  2955. /* ====== BAR CHART =========================================================== */
  2956. /* TODO flip gradient vertical for negative bars */
  2957. .chart-bar {
  2958.     -fx-bar-fill: #22bad9;
  2959.     -fx-background-color: linear-gradient(derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)),
  2960.                           linear-gradient(derive(-fx-bar-fill,80%), derive(-fx-bar-fill, 0%)),
  2961.                           linear-gradient(derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%));
  2962.     -fx-background-insets: 0,1,2;
  2963.     -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
  2964. }
  2965.  
  2966. .negative.chart-bar {
  2967.    -fx-background-color: linear-gradient(to top, derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)),
  2968.                           linear-gradient(to top, derive(-fx-bar-fill, 80%), derive(-fx-bar-fill,0%)),
  2969.                           linear-gradient(to top, derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%));
  2970.    -fx-background-radius: 0 0 5 5, 0 0 4 4, 0 0 3 3;
  2971. }
  2972. .bar-chart:horizontal .chart-bar {
  2973.     -fx-background-color: linear-gradient(to left, derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)),
  2974.                           linear-gradient(to left, derive(-fx-bar-fill,80%), derive(-fx-bar-fill, 0%)),
  2975.                           linear-gradient(to left, derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%));
  2976.     -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
  2977. }
  2978. .bar-chart:horizontal .negative.chart-bar {
  2979.     -fx-background-color: linear-gradient(to right, derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)),
  2980.                           linear-gradient(to right, derive(-fx-bar-fill, 80%), derive(-fx-bar-fill, 0%)),
  2981.                           linear-gradient(to right, derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%));
  2982.     -fx-background-radius: 5 0 0 5, 4 0 0 4, 3 0 0 3;
  2983. }
  2984. .default-color0.chart-bar { -fx-bar-fill: #f9d900; }
  2985. .default-color1.chart-bar { -fx-bar-fill: #a9e200; }
  2986. .default-color2.chart-bar { -fx-bar-fill: #22bad9; }
  2987. .default-color3.chart-bar { -fx-bar-fill: #0181e2; }
  2988. .default-color4.chart-bar { -fx-bar-fill: #2f357f; }
  2989. .default-color5.chart-bar { -fx-bar-fill: #860061; }
  2990. .default-color6.chart-bar { -fx-bar-fill: #c62b00; }
  2991. .default-color7.chart-bar { -fx-bar-fill: #ff5700; }
  2992. .bar-legend-symbol {
  2993.     -fx-padding: 8px;
  2994. }
  2995. /* ====== PIE CHART ============================================================== */
  2996. .chart-pie {
  2997.     -fx-pie-color: #2f357f;
  2998.     -fx-background-color: radial-gradient(radius 100%, derive(-fx-pie-color,55%), derive(-fx-pie-color,-20%));
  2999.     -fx-background-insets: 0;
  3000.     -fx-border-color: derive(-fx-pie-color,-30%);
  3001. }
  3002. .chart-pie-label {
  3003.     -fx-padding: 3px;
  3004. }
  3005. .chart-pie-label-line {
  3006.     -fx-stroke: #aaaaaa;
  3007.     -fx-fill: #aaaaaa;
  3008. }
  3009. .default-color0.chart-pie { -fx-pie-color: #f9d900; }
  3010. .default-color1.chart-pie { -fx-pie-color: #a9e200; }
  3011. .default-color2.chart-pie { -fx-pie-color: #22bad9; }
  3012. .default-color3.chart-pie { -fx-pie-color: #0181e2; }
  3013. .default-color4.chart-pie { -fx-pie-color: #2f357f; }
  3014. .default-color5.chart-pie { -fx-pie-color: #860061; }
  3015. .default-color6.chart-pie { -fx-pie-color: #c62b00; }
  3016. .default-color7.chart-pie { -fx-pie-color: #ff5700; }
  3017. .negative.chart-pie {
  3018.     -fx-pie-color: transparent;
  3019.     -fx-background-color: white;
  3020. }
  3021. .pie-legend-symbol.chart-pie {
  3022.     -fx-background-radius: 8px;
  3023.     -fx-padding: 8px;
  3024.     -fx-border-color: null;
  3025. }
  3026.  
  3027. /* -------------- CODE  FOR THE NON-EDITABLE COMBO-BOX -------------- */
  3028.  
  3029. /* ------- MAIN BUTTON ------- */
  3030. .combo-box-base  {
  3031.     -fx-skin: "com.sun.javafx.scene.control.skin.ComboBoxBaseSkin";
  3032.     -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  3033.     -fx-background-radius: 5, 5, 4, 3;
  3034.     -fx-background-insets: 0 0 -1 0, 0, 1, 2;
  3035.     -fx-padding: 0;
  3036. }
  3037.  
  3038. .combo-box-base:hover {
  3039.     -fx-color: -fx-hover-base;
  3040. }
  3041.  
  3042. /*------- THIS SPECIFIES THE BUTTON COLOR WHEN THE POPUP MENU IS SHOWING -------*/
  3043. .combo-box-base:showing {
  3044.     -fx-color: -fx-pressed-base;
  3045. }
  3046.  
  3047. .combo-box-base:focused {
  3048.     -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  3049.     -fx-background-radius: 6.4, 4, 5, 3;
  3050.     -fx-background-insets: -1.4, 0, 1, 2;
  3051. }
  3052.  
  3053. .combo-box-base:disabled {
  3054.     -fx-opacity: .4;
  3055. }
  3056.  
  3057. /* ------- OPEN BUTTON ------- */
  3058. .combo-box-base .arrow-button {
  3059.     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
  3060.     -fx-background-insets: 0, 1, 2;
  3061.     -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
  3062.     -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5  */
  3063. }
  3064. /*    -fx-background-color: null;
  3065.     -fx-background-insets: 0, 1, 2;
  3066.     -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
  3067.     -fx-padding: 0.5em 0.416667em 0.5em 0.416667em;  6 5 6 5
  3068. }*/
  3069. /*.combo-box-base.split-button .arrow-button {
  3070.     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
  3071.     -fx-background-insets: 0, 1, 2;
  3072.     -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
  3073.     -fx-padding: 0.5em 0.416667em 0.5em 0.416667em;  6 5 6 5
  3074. }*/
  3075.  
  3076. /* ------- ARROW* ------- */
  3077. .combo-box-base .arrow {
  3078.     -fx-background-insets: 1 0 -1 0, 0;
  3079.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  3080.     -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
  3081.     -fx-shape: "M 0 0 h 7 l -3.5 4 z";
  3082. }
  3083.  
  3084. /* ------- POPUP MENU ------- */
  3085. /* --- .combo-box .popup-menu, .combo-box .menu-item, .combo-box .popup-menu .menu-item-radio
  3086. all inherit from Menu Control's popup-menu. --- */
  3087.  
  3088.  
  3089. /* -------------- CODE  FOR THE EDITABLE COMBO-BOX -------------- */
  3090.  
  3091. /* ------- TEXTBOX SEGMENT OF COMBO BOX ------- */
  3092. /*--- The editable ComboBox TextBox inherits its properties from the TextBox Control.
  3093. Only the properties with values that are different from the TextBox are specified here. ---*/
  3094.  
  3095. .combo-box-base:editable .text-field {
  3096.     -fx-padding: 3 5 2 5;
  3097.     -fx-background-radius: 4 5 5 4, 3 4 4 3, 2 3 3 2;
  3098.     -fx-background-insets: 0 0 -1 0, 0, 1;
  3099.     -fx-vpos: CENTER;
  3100.     -fx-content-display: LEFT;
  3101. }
  3102.  
  3103. .combo-box-base:editable .text-field:focused {
  3104.     -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-control-inner-background;
  3105.     -fx-background-radius: 5.4, 3, 2;
  3106.     -fx-background-insets: -1.4, 0, 1;
  3107. }
  3108.  
  3109. .combo-box-base:editable:focused {
  3110.     -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-control-inner-background;
  3111.     -fx-background-radius: 5, 5, 4, 3;
  3112.     -fx-background-insets: 0 0 -1 0, 0, 1, 2;
  3113. }
  3114.  
  3115. /* -------------- STYLES FOR THE DEFAULT LISTVIEW-BASED COMBOBOX ------------- */
  3116. .combo-box {
  3117.     -fx-skin: "com.sun.javafx.scene.control.skin.ComboBoxListViewSkin";
  3118. }
  3119.  
  3120. /* Customie the ListCell that appears in the ComboBox button itself */
  3121. .combo-box .list-cell {
  3122.     -fx-background: transparent;
  3123.     -fx-background-color: transparent;
  3124.     -fx-text-fill: -fx-text-base-color;
  3125.     -fx-padding: 3 0 2 7;
  3126.     -fx-cell-size: 1.66667em; /* 20 */
  3127. }
  3128.  
  3129. .combo-box-popup .list-view {
  3130.     -fx-background-color: -fx-box-border, -fx-control-inner-background;
  3131.     -fx-background-insets: 0, 1;
  3132.     -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
  3133. }
  3134.  
  3135. .combo-box-popup .list-view .list-cell {
  3136.     -fx-padding: 4 0 4 5;
  3137.    
  3138.     /* No alternate highlighting */
  3139.     -fx-background-color: -fx-control-inner-background;
  3140. }
  3141.  
  3142. .combo-box-popup .list-view .list-cell:filled:selected, .combo-box-popup .list-view .list-cell:filled:selected:hover {
  3143.     -fx-background: -fx-accent;
  3144.     -fx-background-color: -fx-selection-bar;
  3145.     -fx-text-fill: -fx-selection-bar-text;
  3146. }
  3147.  
  3148. .combo-box-popup .list-view .list-cell:filled:hover {
  3149.     -fx-background-color: -fx-cell-hover-color;
  3150.     -fx-text-fill: -fx-text-inner-color;
  3151. }
  3152.  
  3153. /* -------------------------- STYLES FOR THE COLOR-PICKER CONTROL ----- */
  3154. .color-picker {
  3155.     -fx-skin: "com.sun.javafx.scene.control.skin.ColorPickerSkin";
  3156. }
  3157.  
  3158. .color-picker .arrow-button {
  3159.     -fx-background-color: null;
  3160.     -fx-background-insets: 0, 1, 2;
  3161.     -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
  3162.     -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */
  3163. }
  3164.  
  3165. .color-picker .color-picker-label .text {
  3166.     -fx-padding: 0.0em 0.833333em 0.0em 0.0em;  /* 0 10 0 0 */
  3167. }
  3168.  
  3169. .color-picker .split-button .arrow-button {
  3170.     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
  3171.     -fx-background-insets: 0, 1, 2;
  3172.     -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
  3173.     -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */
  3174. }
  3175.  
  3176. .color-picker:hover {
  3177.     -fx-color: -fx-base;
  3178. }
  3179.  
  3180. .color-picker .split-button .arrow-button:hover {
  3181.     -fx-color: -fx-hover-base;
  3182. }
  3183.  
  3184. .color-picker .split-button .color-picker-label:hover {
  3185.      -fx-color: -fx-hover-base;
  3186. }
  3187.  
  3188. .color-picker .picker-color {
  3189.     -fx-padding: 4;
  3190.     -fx-background-color: null;
  3191. }
  3192.  
  3193. .color-picker .picker-color .picker-color-rect {
  3194.     -fx-stroke: -fx-pressed-base;
  3195. }
  3196.  
  3197. .color-palette {
  3198.      -fx-background-color:
  3199.         derive(-fx-color,-40%),
  3200.         derive(-fx-color,100%),
  3201.         linear-gradient(to bottom,
  3202.         derive(-fx-color,100%) 0%,
  3203.         derive(-fx-color,50%) 12%,
  3204.         derive(-fx-color,65%) 88%,
  3205.         derive(-fx-color,23%) 100%);
  3206.     -fx-background-insets: 0, 1, 2;
  3207.     -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
  3208.     -fx-padding: 15 15 15 15;
  3209.     -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
  3210. }
  3211.  
  3212. .color-palette .color-rect {
  3213.     -fx-stroke: black;
  3214.     -fx-stroke-width: 0.4;
  3215.     -fx-border-color: black;
  3216. }
  3217.  
  3218. .color-palette .color-picker-grid {
  3219.     -fx-border-color: black;
  3220. }
  3221.  
  3222. .color-palette .color-square {
  3223.     -fx-background-color: transparent;
  3224.     -fx-background-insets: -1, 0;  
  3225.     -fx-padding: 0.5;
  3226.     -fx-border: black;
  3227. }
  3228. /* the color over which the user is hovering */
  3229. .color-palette .color-square:focused, .color-palette .color-square:selected:focused {
  3230.     -fx-background-color: -fx-focus-color;
  3231. }
  3232.  
  3233. /* the currently selected color */
  3234. .color-palette .color-square:selected {
  3235. /*    -fx-background-color: derive(-fx-base, -27%)  #989898 , white, derive(-fx-base, -59%)  #555555 ;*/
  3236.     -fx-background-color: black;
  3237. }
  3238.  
  3239. .color-palette .separator .line {
  3240.     -fx-background-color: -fx-pressed-base;
  3241. /*    -fx-background-color: white;*/
  3242.     -fx-padding: 6 0 0 0;
  3243.     -fx-background-insets: 4 -10 0 -10,5 -10 0 -10;
  3244.     -fx-border-style: none;
  3245.     -fx-border-color: null;
  3246. }
  3247. .custom-color-dialog .color-rect-pane {
  3248.     -fx-padding: 15 8 15 15;
  3249. /*    -fx-background-color: -fx-background;*/
  3250. }
  3251.  
  3252. .custom-color-dialog .controls-pane {
  3253.     -fx-padding: 15 15 15 0;
  3254. /*    -fx-background-color: -fx-background;*/
  3255. }
  3256. .custom-color-dialog  {
  3257.     -fx-background-color: -fx-background;
  3258. }
  3259. /* -------- Toggle Button ---------------- */
  3260. .custom-color-dialog .controls-pane .toggle-button {
  3261.     -fx-background-radius: 4, 4, 3, 2;
  3262.     -fx-padding: 3 6 3 6;
  3263. }
  3264.  
  3265. .custom-color-dialog .controls-pane .toggle-button:focused {
  3266.     -fx-background-color:
  3267.         rgba(23,134,248,0.2),
  3268.         -fx-focus-color,
  3269.         -fx-inner-border,
  3270.         -fx-body-color;
  3271. }
  3272. .custom-color-dialog .controls-pane .toggle-button:selected Text {
  3273.     -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.9) , 2, 0.0 , 0 , 1 );
  3274. }
  3275.  
  3276. .custom-color-dialog .controls-pane .toggle-button:selected {
  3277.     -fx-background-color:
  3278.         -fx-shadow-highlight-color,
  3279.         linear-gradient( to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100% ),        
  3280.         linear-gradient( to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100% ),    
  3281.         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% );
  3282.     -fx-background-insets: 0 0 -1 0, 0, 1, 1;
  3283.     /* TODO: -fx-text-fill should be derived */
  3284.     -fx-text-fill: -fx-light-text-color;
  3285. }
  3286. .custom-color-dialog .controls-pane #toggle-button-left {
  3287.     -fx-background-radius: 3 0 0 3;
  3288.     -fx-background-insets: 0 0 -1 0, 0, 1 0 1 1, 2 0 2 2;
  3289.     -fx-border-color: transparent -fx-outer-border transparent transparent;
  3290.     -fx-border-insets: 4 0 4 0;
  3291.     -fx-padding: -2 8 -2 8;
  3292. }
  3293. .custom-color-dialog .controls-pane #toggle-button-left:focused {
  3294.     -fx-background-radius: 3 0 0 3;
  3295.     -fx-background-insets: -1.4 0 -1.4 -1.4, 0 0 0 0, 1, 2;
  3296.     -fx-border-color: transparent;
  3297. }
  3298. .custom-color-dialog .controls-pane #toggle-button-left:selected, .controls-pane #toggle-button-left:selected:focused {
  3299.         -fx-background-insets: 0 0 -1 0, 0, 1 0 1 1, 1 0 1 1;
  3300.     -fx-border-color: transparent;
  3301. }
  3302. .custom-color-dialog .controls-pane #toggle-button-center {
  3303.     -fx-background-radius: 0;
  3304.         -fx-background-insets: 0;
  3305.     -fx-background-insets: 0 0 -1 0, 0, 1 0 1 0, 2 0 2 0;
  3306.     -fx-border-color: transparent -fx-outer-border transparent transparent;
  3307.         -fx-border-insets: 4 0 4 0;
  3308.     -fx-padding: -2 8 -2 8;
  3309. }
  3310. .custom-color-dialog .controls-pane #toggle-button-center:focused {
  3311.     -fx-background-radius: 0;
  3312.     -fx-background-insets: -1.4 0 -1.4 -1, 0 0 0 -1, 1 1 1 0, 2 2 2 1;
  3313.     -fx-border-color: transparent;
  3314. }
  3315. .custom-color-dialog .controls-pane #toggle-button-center:selected, .controls-pane #toggle-button-center:selected:focused {
  3316.     -fx-background-insets: -1.4 0 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0;
  3317.     -fx-border-color: transparent;
  3318. }
  3319.  
  3320. .custom-color-dialog .controls-pane #toggle-button-right {
  3321.     -fx-background-radius: 0 3 3 0;
  3322.     -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 0;
  3323.     -fx-padding: 3 8 3 8;
  3324. }
  3325. .custom-color-dialog .controls-pane #toggle-button-right:focused {
  3326.     -fx-background-radius: 0 3 3 0;
  3327.     -fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 2 2 2 1;
  3328. }
  3329. .custom-color-dialog .controls-pane #toggle-button-right:selected, .controls-pane #toggle-button-right:selected:focused {
  3330.     -fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0;
  3331. }
  3332.  
  3333. .custom-color-dialog .controls-pane .current-new-color-grid #transparent-current, .controls-pane .current-new-color-grid #transparent-new {
  3334.     -fx-background-image: url("pattern-transparent.png");
  3335.     -fx-background-repeat: repeat;
  3336.     -fx-background-size: auto;
  3337.     -fx-padding: 9 64 9 64;
  3338. }
  3339.  
  3340. .custom-color-dialog .controls-pane .customcolor-controls-background {
  3341.     -fx-background-color: -fx-text-box-border, -fx-text-box-border, -fx-control-inner-background;
  3342.     -fx-background-insets: 0, 1, 2;
  3343.     -fx-background-radius: 3, 2, 2;
  3344.     -fx-padding: 3 5 3 5;
  3345. }
  3346.  
  3347. .custom-color-dialog .controls-pane .alpha-settings .text-field {
  3348. /*    -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;*/
  3349.     -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
  3350.     -fx-background-insets: 0, 1;
  3351.     -fx-background-radius: 3, 2;
  3352.     -fx-padding: 3 5 3 5;
  3353.     -fx-text-fill: -fx-text-inner-color;
  3354.     -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
  3355.     -fx-cursor: text;
  3356. }
  3357.  
  3358. .custom-color-dialog .controls-pane .current-new-color-grid .label {
  3359.     -fx-padding: 0 0 0 5;
  3360. }
  3361.  
  3362. .custom-color-dialog #input-text-field {
  3363.     -fx-skin: "com.sun.javafx.scene.control.skin.TextFieldSkin";
  3364. }
  3365.  
  3366. .custom-color-dialog .input-field {
  3367.     -fx-skin: "com.sun.javafx.scene.control.skin.InputFieldSkin";
  3368.     -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;
  3369.     -fx-background-insets: 0, 1, 2;
  3370.     -fx-background-radius: 3, 2, 2;
  3371.     -fx-padding: 3 5 3 5;
  3372.     -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
  3373.     -fx-cursor: text;
  3374. }
  3375.  
  3376. .custom-color-dialog .input-field:focused {
  3377.     -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
  3378.     -fx-background-insets: -0.4, 1, 2;
  3379.     -fx-background-radius: 3.4, 2, 2;
  3380. }
  3381.  
  3382. .custom-color-dialog .input-field:disabled {
  3383.     -fx-opacity: -fx-disabled-opacity;
  3384. }
  3385.  
  3386. .custom-color-dialog .integer-field {
  3387.     -fx-skin: "com.sun.javafx.scene.control.skin.IntegerFieldSkin";
  3388.     -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;
  3389.     -fx-background-insets: 0, 1, 2;
  3390.     -fx-background-radius: 3, 2, 2;
  3391.     -fx-padding: 3 5 3 5;
  3392.     -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
  3393.     -fx-cursor: text;
  3394. }
  3395.  
  3396. .custom-color-dialog .integer-field:focused {
  3397.     -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
  3398.     -fx-background-insets: -0.4, 1, 2;
  3399.     -fx-background-radius: 3.4, 2, 2;
  3400. }
  3401.  
  3402. /*.integer-field:disabled {
  3403.     -fx-opacity: -fx-disabled-opacity;
  3404. }*/
  3405.  
  3406. .custom-color-dialog .double-field {
  3407.     -fx-skin: "com.sun.javafx.scene.control.skin.DoubleFieldSkin";
  3408.     -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;
  3409.     -fx-background-insets: 0, 1, 2;
  3410.     -fx-background-radius: 3, 2, 2;
  3411.     -fx-padding: 3 5 3 5;
  3412.     -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
  3413.     -fx-cursor: text;
  3414. }
  3415.  
  3416. .custom-color-dialog .double-field:focused {
  3417.     -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
  3418.     -fx-background-insets: -0.4, 1, 2;
  3419.     -fx-background-radius: 3.4, 2, 2;
  3420. }
  3421.  
  3422. .custom-color-dialog .double-field:disabled {
  3423.     -fx-opacity: -fx-disabled-opacity;
  3424. }
  3425.  
  3426.  
  3427. .custom-color-dialog .webcolor-field {
  3428.     -fx-skin: "com.sun.javafx.scene.control.skin.WebColorFieldSkin";
  3429.     -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;
  3430.     -fx-background-insets: 0, 1, 2;
  3431.     -fx-background-radius: 3, 2, 2;
  3432.     -fx-padding: 3 5 3 5;
  3433.     -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
  3434.     -fx-cursor: text;
  3435. }
  3436.  
  3437. .custom-color-dialog .webcolor-field:focused {
  3438.     -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
  3439.     -fx-background-insets: -0.4, 1, 2;
  3440.     -fx-background-radius: 3.4, 2, 2;
  3441. }
  3442.  
  3443. .custom-color-dialog .webcolor-field:disabled {
  3444.     -fx-opacity: -fx-disabled-opacity;
  3445. }
  3446.  
  3447.  
  3448. /* -------------------------- STYLES FOR PAGINATION CONTROL ----- */
  3449. .pagination {
  3450.     -fx-skin: "com.sun.javafx.scene.control.skin.PaginationSkin";
  3451.     -fx-padding: 0;        
  3452.     -fx-arrows-visible: true;
  3453.     -fx-tooltip-visible: true;
  3454.     -fx-page-information-visible: true;
  3455.     -fx-page-information-alignment: bottom;    
  3456. }
  3457. .pagination .page {
  3458.     -fx-background-color: transparent;
  3459. }
  3460.  
  3461. .pagination .pagination-control {
  3462.     -fx-background-color: transparent;    
  3463.     -fx-padding: 0.833333em 0em 0.833333em 0em;
  3464. }
  3465.  
  3466. .pagination .pagination-control .control-box {
  3467.     -fx-spacing: 4;
  3468.     -fx-alignment: center;
  3469. }
  3470.  
  3471. .pagination .pagination-control .left-arrow-button{
  3472.     -fx-background-radius: 0;
  3473.     -fx-padding: 0.166667em 0.416em 0.25em 0.333em;
  3474. }
  3475. .pagination .pagination-control .right-arrow-button {
  3476.     -fx-background-radius: 0;
  3477.     -fx-padding: 0.166667em 0.333em 0.25em 0.416em;
  3478. }
  3479.  
  3480. .pagination .pagination-control .left-arrow {
  3481.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  3482.     -fx-background-insets: 1 0 -1 0, 0;
  3483.     -fx-padding: 0.375em 0.291em 0.375em 0.291em;
  3484.     -fx-shape: "M 0 0 L -13 7 L 0 13 z";
  3485.     -fx-scale-shape: true;
  3486. }
  3487.  
  3488. .pagination .pagination-control .right-arrow {
  3489.     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  3490.     -fx-background-insets: 1 0 -1 0, 0;
  3491.     -fx-padding: 0.375em 0.291em 0.375em 0.291em;
  3492.     -fx-shape: "M 0 0 L 13 7 L 0 13 z";
  3493.     -fx-scale-shape: true;
  3494. }
  3495.  
  3496. .pagination .pagination-control .bullet-button {  
  3497.    -fx-background-radius: 0, 4em, 4em, 4em, 4em;
  3498.    -fx-padding: 0.333em;
  3499.    
  3500.    -fx-background-color: transparent, -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  3501.    -fx-background-insets: 0, 4 4 3 4,  5,  6,  7;
  3502. }
  3503.  
  3504. .pagination .pagination-control .bullet-button:selected {  
  3505.     -fx-base: -fx-accent;
  3506. }
  3507.  
  3508. .pagination.bullet .pagination-control .left-arrow-button, .pagination.bullet .pagination-control .right-arrow-button {
  3509.     -fx-background-radius: 4em;
  3510. }
  3511.  
  3512. .pagination .pagination-control .number-button {
  3513.     -fx-background-radius: 0;
  3514.     -fx-padding: 0.166667em 0.25em 0.25em 0.333em;
  3515.     -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  3516. }
  3517.  
  3518. .pagination .pagination-control .number-button:selected {  
  3519.     -fx-base: -fx-accent;
  3520. }
  3521. .pagination .pagination-control .page-information {  
  3522.     -fx-padding: 0.416em 0 0 0;
  3523. }
RAW Paste Data