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