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