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 * *
28 * CSS Styles for core infrastructure bits. The .root section provides the *
29 * overall default font and colors used by the rest of the sections. *
30 * *
31 ******************************************************************************/
32
33 .root {
34 /***************************************************************************
35 * *
36 * The main color palette from which the rest of the colors are derived. *
37 * *
38 **************************************************************************/
39
40 /* A light grey that is the base color for objects. Instead of using
41 * -fx-base directly, the sections in this file will typically use -fx-color.
42 */
43 -fx-base: #d0d0d0;
44
45 /* A very light grey used for the background of windows. See also
46 * -fx-text-background-color, which should be used as the -fx-text-fill
47 * value for text painted on top of backgrounds colored with -fx-background.
48 */
49 -fx-background: #f4f4f4;
50
51 /* Used for the inside of text boxes, password boxes, lists, trees, and
52 * tables. See also -fx-text-inner-color, which should be used as the
53 * -fx-text-fill value for text painted on top of backgrounds colored
54 * with -fx-control-inner-background.
55 */
56 -fx-control-inner-background: white;
57
58 /* One of these colors will be chosen based upon a ladder calculation
59 * that uses the brightness of a background color. Instead of using these
60 * colors directly as -fx-text-fill values, the sections in this file should
61 * use a derived color to match the background in use. See also:
62 *
63 * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
64 * -fx-text-background-color for text on top of -fx-background
65 * -fx-text-inner-color for text on top of -fx-control-inner-color
66 * -fx-selection-bar-text for text on top of -fx-selection-bar
67 */
68 -fx-dark-text-color: black;
69 -fx-mid-text-color: #292929;
70 -fx-light-text-color: white;
71
72 /* A bright blue for highlighting/accenting objects. For example: selected
73 * text; selected items in menus, lists, trees, and tables; progress bars;
74 * default buttons.
75 */
76 -fx-accent: #0093ff;
77
78 /* A bright blue for the focus indicator of objects. Typically used as the
79 * first color in -fx-background-color for the "focused" pseudo-class. Also
80 * typically used with insets of -1.4 to provide a glowing effect.
81 *
82 * TODO: should this be derived from -fx-accent?
83 */
84 -fx-focus-color: #0093ff;
85
86 /* The color that is used in styling controls. The default value is based
87 * on -fx-base, but is changed by pseudoclasses to change the base color.
88 * For example, the "hover" pseudoclass will typically set -fx-color to
89 * -fx-hover-base (see below) and the "armed" pseudoclass will typically
90 * set -fx-color to -fx-pressed-base.
91 */
92 -fx-color: -fx-base;
93
94 /* The opacity level to use for the "disabled" pseudoclass.
95 */
96 -fx-disabled-opacity: 0.4;
97
98 /***************************************************************************
99 * *
100 * Colors that are derived from the main color palette. *
101 * *
102 **************************************************************************/
103
104 /* A little lighter than -fx-base and used as the -fx-color for the
105 * "hovered" pseudoclass state.
106 */
107 -fx-hover-base: ladder(
108 -fx-base,
109 derive(-fx-base,20%) 20%,
110 derive(-fx-base,30%) 35%,
111 derive(-fx-base,40%) 50%
112 );
113
114 /* A little darker than -fx-base and used as the -fx-color for the
115 * "armed" pseudoclass state.
116 *
117 * TODO: should this be renamed to -fx-armed-base?
118 */
119 -fx-pressed-base: derive(-fx-base,-20%);
120
121 /* Used to specify the body color for focused objects. By default, it's
122 * the same as -fx-base (i.e., the body color doesn't change when a control
123 * gets focus).
124 */
125 -fx-focused-base: -fx-base;
126
127 /* The color to use for -fx-text-fill when text is to be painted on top of
128 * a background filled with the -fx-background color.
129 */
130 -fx-text-background-color: ladder(
131 -fx-background,
132 -fx-light-text-color 45%,
133 -fx-dark-text-color 46%,
134 -fx-dark-text-color 59%,
135 -fx-mid-text-color 60%
136 );
137
138 /* The default color for all text. Sections should change the -fx-text-fill
139 * property if change the background color to something else. See also:
140 *
141 * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
142 * -fx-text-background-color for text on top of -fx-background
143 * -fx-text-inner-color for text on top of -fx-control-inner-color
144 * -fx-selection-bar-text for text on top of -fx-selection-bar
145 */
146 -fx-text-fill: -fx-text-background-color;
147
148 /* A little darker than -fx-color and used to draw boxes around objects such
149 * as progress bars, scroll bars, scroll panes, trees, tables, and lists.
150 */
151 -fx-box-border: ladder(
152 -fx-color,
153 black 20%,
154 derive(-fx-color,-30%) 30%
155 );
156
157 /* Darker than -fx-background and used to draw boxes around text boxes and
158 * password boxes.
159 */
160 -fx-text-box-border: ladder(
161 -fx-background,
162 black 10%,
163 derive(-fx-background, -15%) 30%
164 );
165
166 /* Typically lighter than -fx-background and used to provide a small
167 * highlight under controls and tick marks for checkboxes and radio buttons.
168 * Often used with an insets of 0 0 -1 0, and is also often the first
169 * color in a -fx-background-color list. Also is typically replaced by
170 * -fx-focus-color with an insets of -1.4 in the "focused" pseudoclass.
171 */
172 -fx-shadow-highlight-color: ladder(
173 -fx-background,
174 transparent 0%,
175 derive(-fx-background,40%) 5%,
176 derive(-fx-background,60%) 70%,
177 derive(-fx-background,100%) 85%,
178 derive(-fx-background,100%) 97%,
179 derive(-fx-background,-10%) 97.5%
180 );
181
182 /* A gradient that goes from a little darker than -fx-color on the top to
183 * even more darker than -fx-color on the bottom. Typically is the second
184 * color in the -fx-background-color list as the small thin border around
185 * a control. It is typically the same size as the control (i.e., insets
186 * are 0).
187 */
188 -fx-outer-border: linear-gradient(
189 to bottom,
190 derive(-fx-color,-9%) 0%,
191 derive(-fx-color,-33%) 100%
192 );
193
194 /* A gradient that goes from a bit lighter than -fx-color on the top to
195 * a little darker at the bottom. Typically is the third color in the
196 * -fx-background-color list as a thin highlight inside the outer border.
197 * Insets are typically 1.
198 */
199 -fx-inner-border: linear-gradient(
200 to bottom,
201 ladder(-fx-color,
202 derive(-fx-color,80%) 60%,
203 white 82%) 0%,
204 ladder(-fx-color,
205 derive(-fx-color,20%) 10%,
206 derive(-fx-color,-10%) 80%) 100%
207 );
208
209 -fx-inner-border-horizontal: linear-gradient(
210 to right,
211 ladder(-fx-color,
212 derive(-fx-color,80%) 60%,
213 white 82%) 0%,
214 ladder(-fx-color,
215 derive(-fx-color,20%) 10%,
216 derive(-fx-color,-10%) 80%) 100%
217 );
218
219 -fx-inner-border-bottomup: linear-gradient(
220 to top,
221 ladder(-fx-color,
222 derive(-fx-color,80%) 60%,
223 white 82%) 0%,
224 ladder(-fx-color,
225 derive(-fx-color,20%) 10%,
226 derive(-fx-color,-10%) 80%) 100%);
227
228 /* A gradient that goes from a little lighter than -fx-color at the top to
229 * a little darker than -fx-color at the bottom and is used to fill the
230 * body of many controls such as buttons. Typically is the fourth color
231 * in the -fx-background-color list and represents main body of the control.
232 * Insets are typically 2.
233 */
234 -fx-body-color: linear-gradient(
235 to bottom,
236 derive(-fx-color,34%) 0%,
237 derive(-fx-color,-18%) 100%
238 );
239
240 -fx-body-color-bottomup: linear-gradient(
241 to top,
242 derive(-fx-color,34%) 0%,
243 derive(-fx-color,-18%) 100%
244 );
245
246 /* The color to use as -fx-text-fill when painting text on top of
247 * backgrounds filled with -fx-base, -fx-color, and -fx-body-color.
248 */
249 -fx-text-base-color: ladder(
250 -fx-color,
251 -fx-light-text-color 45%,
252 -fx-dark-text-color 46%,
253 -fx-dark-text-color 59%,
254 -fx-mid-text-color 60%
255 );
256
257 /* The color to use as -fx-text-fill when painting text on top of
258 * backgrounds filled with -fx-control-inner-background.
259 */
260 -fx-text-inner-color: ladder(
261 -fx-control-inner-background,
262 -fx-light-text-color 45%,
263 -fx-dark-text-color 46%,
264 -fx-dark-text-color 59%,
265 -fx-mid-text-color 60%
266 );
267
268 /* The color to use for small mark-like objects such as checks on check
269 * boxes, filled in circles in radio buttons, arrows on scroll bars, etc.
270 */
271 -fx-mark-color: ladder(
272 -fx-color,
273 white 30%,
274 derive(-fx-color,-63%) 31%
275 );
276
277 /* The small thin light "shadow" for mark-like objects. Typically used in
278 * conjunction with -fx-mark-color with an insets of 1 0 -1 0.
279 */
280 -fx-mark-highlight-color: ladder(
281 -fx-color,
282 derive(-fx-color,80%) 60%,
283 white 70%
284 );
285
286 /* Background for items in list like things such as menus, lists, trees,
287 * and tables.
288 *
289 * TODO: it seems like this should be based upon -fx-accent and we should
290 * remove the setting -fx-background in all the sections that use
291 * -fx-selection-bar.
292 */
293 -fx-selection-bar: linear-gradient(
294 to bottom,
295 derive(-fx-background,-7%) 0%,
296 derive(-fx-background,-34%) 100%
297 );
298
299 /* The color to use as -fx-text-fill when painting text on top of
300 * backgrounds filled with -fx-selection-bar.
301 *
302 * TODO: it seems like this should be derived from -fx-selection-bar.
303 */
304 -fx-selection-bar-text: ladder(
305 -fx-background,
306 -fx-light-text-color 50%,
307 -fx-mid-text-color 51%
308 );
309
310 /* The default border color for a tab.
311 *
312 * TODO: should this be -fx-box-border or derived from some other color?
313 */
314 -fx-tab-border-color: -fx-box-border;
315
316 /* These are needed for Popup */
317 -fx-background-color: inherit;
318 -fx-background-radius: inherit;
319 -fx-background-insets: inherit;
320 -fx-padding: inherit;
321
322 /* The color to use in ListView/TreeView/TableView to indicate hover. */
323 -fx-cell-hover-color: #cce3f4;
324
325 -fx-cell-focus-inner-border: #85b9de;
326
327 /* The colors to use in Pagination */
328 -fx-page-bullet-border: #acacac;
329 -fx-page-indicator-hover-border: #accee5;
330
331
332 }
333
334 .mnemonic-underline {
335 -fx-stroke: transparent;
336 }
337
338 .text {
339 -fx-font-smoothing-type: lcd;
340 }
341
342
343 /*******************************************************************************
344 *******************************************************************************
345 ** **
346 ** CSS Sections for each control. In general, each control will have a main **
347 ** section that defines the following: **
348 ** **
349 ** .control-name { **
350 ** -fx-background-color: a, b, c, d **
351 ** -fx-background-insets: e, f, g, h **
352 ** -fx-background-radius: i, j, k, l **
353 ** -fx-padding: m **
354 ** -fx-text-fill: n **
355 ** } **
356 ** **
357 ** where: **
358 ** **
359 ** -fx-background-color, -fx-background-insets, and -fx-background-radius **
360 ** are parallel arrays that specify background colors for the control. **
361 ** **
362 ** -fx-background represents a sequence of colors for regions that will be **
363 ** drawn, one on top of the other. **
364 ** **
365 ** -fx-background-insets is a comma separated list of insets that represent **
366 ** the top right bottom left insets from the edge of the control for each **
367 ** color specified in the -fx-background-color list. A single size for **
368 ** an inset means the same inset will be used for the top right bottom left **
369 ** values. A negative inset will draw outside the bounds of the control. **
370 ** **
371 ** -fx-background-radius is a comma separated list of values that represent **
372 ** the radii of the top right, bottom right, bottom left, and top left **
373 ** corners of the rectangle associated with the rectangle from the **
374 ** -fx-background-color list. As with insets, a single size for a radius **
375 ** means the same radius will be used for all corners. **
376 ** **
377 ** Typically, the following values will be used: **
378 ** **
379 ** a/e/i = -fx-shadow-highlight-color, 0 0 -1 0, 5 **
380 ** Draws a background highlight dropped 1 pixel down with **
381 ** corners with a 5 pixel radius. **
382 ** b/f/j = -fx-outer-border, 0, 5 **
383 ** Draws an outer border the size of the control (insets = 0) and **
384 ** with corners with a 5 pixel radius. **
385 ** c/g/k = -fx-inner-border, 1, 4 **
386 ** Draws an inner border inset 1 pixel from the control edge and **
387 ** with corners with a smaller radius (radius = 4). **
388 ** d/h/l = -fx-body-color, 2, 3 **
389 ** Draws the body last, inset 2 pixels from the control edge and **
390 ** with corners with an even smaller radius (radius = 3). **
391 ** m = Padding from the edge of the control to the outer edge of the **
392 ** skin content. **
393 ** n = If specified, the color chosen for -fx-text-fill should match **
394 ** the innermost color from -fx-background-colors (e.g., 'd'). **
395 ** See the -fx-text-fill entry in .scene for more information. **
396 ** **
397 ** The control will also typically define pseudoclass sections for when it **
398 ** is focused, when the mouse is hovering over it ("hover") and when the **
399 ** mouse button is being held down on it (e.g., "armed"). **
400 ** **
401 ** For example, in the "focused" pseudoclass, -fx-focus-color will typically **
402 ** just replace -fx-shadow-highlight-color and will be drawn so it extents **
403 ** outside the control with a glowing effect. The glowing effect is **
404 ** achieved by using a non-integer insets value of -1.4 and the radius **
405 ** is adjusted accordingly. **
406 ** **
407 ** .control-name:focused { **
408 ** -fx-background-color: -fx-focus-color, b, c, d **
409 ** -fx-background-insets: -1.4, f, g, h **
410 ** -fx-background-radius: 6.4, j, k, l **
411 ** } **
412 ** **
413 ** In the "hover" pseudoclass, the -fx-color is replaced with -fx-hover-base **
414 ** which will result in a re-derivation of the other colors in **
415 ** -fx-background-colors: **
416 ** **
417 ** .control-name:hover { **
418 ** -fx-color: -fx-hover-base; **
419 ** } **
420 ** **
421 ** In the "armed" pseudoclass, the -fx-color is replaced with **
422 ** -fx-pressed-base, which will result in a rederivation of the other colors **
423 ** in -fx-background-colors: **
424 ** **
425 ** .control-name:armed { **
426 ** -fx-color: -fx-pressed-base; **
427 ** } **
428 ** **
429 ** The control will also typically include a "disabled" pseudoclass which **
430 ** makes the component transparent: **
431 ** **
432 ** .control-name:disabled { **
433 ** -fx-opacity: -fx-disabled-opacity; **
434 ** } **
435 ** **
436 *******************************************************************************
437 ******************************************************************************/
438
439 /*******************************************************************************
440 *******************************************************************************
441 ** **
442 ** NOTE on em values: em values are used for padding and other sizing **
443 ** throughout this file. Size values in ems represent fraction of the **
444 ** font size in use. As used in this file, each 1/12th represents a pixel **
445 ** based upon the default size of 12px. Here's a table for quick reference: **
446 ** **
447 ** 1px: 0.083333em **
448 ** 2px: 0.166667em **
449 ** 3px: 0.25em **
450 ** 4px: 0.333333em **
451 ** 5px: 0.416667em **
452 ** 6px: 0.5em **
453 ** 7px: 0.583333em **
454 ** 8px: 0.666667em **
455 ** 9px: 0.75em **
456 ** 10px: 0.833333em **
457 ** 11px: 0.916667em **
458 ** 12px: 1.0em **
459 ** **
460 *******************************************************************************
461 ******************************************************************************/
462
463 /*******************************************************************************
464 * *
465 * Label *
466 * *
467 ******************************************************************************/
468
469 .label {
470 -fx-text-fill: -fx-text-background-color;
471 }
472
473 .label:disabled {
474 -fx-opacity: -fx-disabled-opacity;
475 }
476
477 .label:show-mnemonics > .mnemonic-underline {
478 -fx-stroke: -fx-text-fill;
479 }
480
481 /* The opacity of the parent is applied to the children. So we make the
482 * opacity 1.0 here to avoid double translucency.
483 */
484 /*:disabled > * > .label {
485 -fx-opacity: 1.0;
486 }*/
487
488 /*******************************************************************************
489 * *
490 * Button *
491 * *
492 ******************************************************************************/
493
494 .button {
495 -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
496 -fx-background-insets: 0 0 -1 0, 0, 1, 2;
497 -fx-background-radius: 5, 5, 4, 3;
498 -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */
499 -fx-text-fill: -fx-text-base-color;
500 -fx-alignment: CENTER;
501 -fx-content-display: LEFT;
502 }
503
504 .button:focused {
505 -fx-color: -fx-focused-base;
506 -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
507 -fx-background-insets: -1.4, 0, 1, 2;
508 -fx-background-radius: 6.4, 5, 4, 3;
509 }
510
511 .button:hover {
512 -fx-color: -fx-hover-base;
513 }
514
515 .button:armed {
516 -fx-color: -fx-pressed-base;
517 }
518
519 .button:default {
520 -fx-base: -fx-accent;
521 }
522
523 .button:cancel {
524 }
525
526 .button:disabled {
527 -fx-opacity: -fx-disabled-opacity;
528 }
529
530 .button:show-mnemonics > .mnemonic-underline {
531 -fx-stroke: -fx-text-fill;
532 }
533 /*******************************************************************************
534 * *
535 * ToggleButton *
536 * *
537 ******************************************************************************/
538
539 .toggle-button {
540 -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
541 -fx-background-insets: 0 0 -1 0, 0, 1, 2;
542 -fx-background-radius: 5, 5, 4, 3;
543 -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */
544 -fx-text-fill: -fx-text-base-color;
545 -fx-alignment: CENTER;
546 -fx-content-display: LEFT;
547 }
548
549 .toggle-button:focused {
550 -fx-color: -fx-focused-base;
551 -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
552 -fx-background-insets: -1.4, 0, 1, 2;
553 -fx-background-radius: 6.4, 5, 4, 3;
554 }
555
556 .toggle-button:hover {
557 -fx-color: -fx-hover-base;
558 }
559
560 .toggle-button:armed {
561 -fx-color: -fx-pressed-base;
562 }
563
564 .toggle-button:selected {
565 -fx-background-color:
566 -fx-shadow-highlight-color,
567 linear-gradient(to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100%),
568 linear-gradient(to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100%),
569 linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
570 -fx-background-insets: 0 0 -1 0, 0, 1, 1;
571 /* TODO: -fx-text-fill should be derived */
572 -fx-text-fill: -fx-light-text-color;
573 }
574
575 .toggle-button:selected:focused {
576 -fx-color: -fx-focused-base;
577 -fx-background-color:
578 -fx-focus-color,
579 linear-gradient(to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100%),
580 linear-gradient(to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100%),
581 linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
582 -fx-background-insets: -1.4, 0, 1, 1;
583 }
584
585 .toggle-button:disabled {
586 -fx-opacity: -fx-disabled-opacity;
587 }
588
589 .toggle-button:show-mnemonics > .mnemonic-underline {
590 -fx-stroke: -fx-text-fill;
591 }
592
593 /*******************************************************************************
594 * *
595 * RadioButton *
596 * *
597 ******************************************************************************/
598
599 .radio-button {
600 -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
601 -fx-text-fill: -fx-text-background-color;
602 }
603
604 .radio-button:focused {
605 -fx-color: -fx-focused-base;
606 }
607
608 .radio-button > .radio {
609 -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
610 -fx-background-insets: 0 0 -1 0, 0, 1, 2;
611 -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
612 -fx-padding: 0.333333em; /* 4 -- padding from outside edge to the inner black dot */
613 }
614
615 .radio-button:focused > .radio {
616 -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
617 -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
618 -fx-background-insets: -1.4, 0, 1, 2;
619 }
620
621 .radio-button:hover > .radio {
622 -fx-color: -fx-hover-base;
623 }
624 .radio-button:armed > .radio {
625 -fx-color: -fx-pressed-base;
626 }
627
628 .radio-button > .radio > .dot {
629 -fx-background-color: transparent;
630 -fx-background-insets: 0;
631 -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
632 -fx-padding: 0.25em; /* 3 -- radius of the inner black dot when selected */
633 }
634
635 .radio-button:selected > .radio > .dot {
636 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
637 -fx-background-insets: 0 0 -1 0, 0;
638 }
639
640 .radio-button:disabled {
641 -fx-opacity: -fx-disabled-opacity;
642 }
643
644 .radio-button:show-mnemonics > .mnemonic-underline {
645 -fx-stroke: -fx-text-fill;
646 }
647
648 /*******************************************************************************
649 * *
650 * CheckBox *
651 * *
652 ******************************************************************************/
653
654 .check-box {
655 -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
656 -fx-text-fill: -fx-text-background-color;
657 }
658
659 .check-box:focused {
660 -fx-color: -fx-focused-base;
661 }
662
663 .check-box > .box {
664 -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
665 -fx-background-insets: 0 0 -1 0, 0, 1, 2;
666 -fx-background-radius: 2, 2, 1, 1;
667 -fx-padding: 0.25em; /* 3 -- padding from the outside edge to the mark */
668 }
669
670 .check-box:focused > .box {
671 -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
672 -fx-background-insets: -1.4, 0, 1, 2;
673 -fx-background-radius: 3.4, 2, 1, 1;
674 }
675
676 .check-box:hover > .box {
677 -fx-color: -fx-hover-base;
678 }
679
680 .check-box:armed > .box {
681 -fx-color: -fx-pressed-base;
682 }
683
684 .check-box > .box > .mark {
685 -fx-background-color: transparent;
686 -fx-background-insets: 1 0 -1 0, 0;
687 -fx-padding: 0.333333em; /* 4 -- this is half the size of the mark */
688 -fx-shape: "M0,4H2L3,6L6,0H8L4,8H2Z";
689 }
690
691 /* TODO: scale the shape - the problem is that it is not within a square
692 * boundary.
693 */
694 .check-box:indeterminate > .box > .mark {
695 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
696 -fx-shape: "M0,0H8V2H0Z";
697 -fx-scale-shape: false;
698 }
699
700 .check-box:selected > .box > .mark {
701 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
702 }
703
704 .check-box:disabled {
705 -fx-opacity: -fx-disabled-opacity;
706 }
707
708 .check-box:show-mnemonics > .mnemonic-underline {
709 -fx-stroke: -fx-text-fill;
710 }
711
712 /*******************************************************************************
713 * *
714 * Hyperlink *
715 * *
716 ******************************************************************************/
717
718 .hyperlink {
719 -fx-padding: 0.166667em; /* 2 */
720 -fx-cursor: hand;
721 -fx-content-display: LEFT;
722 -fx-text-fill: -fx-text-background-color;
723 -fx-border-color: transparent;
724 -fx-border-width: 1px;
725 }
726
727 .hyperlink:visited {
728 -fx-text-fill: -fx-accent;
729 }
730
731 .hyperlink:focused {
732 -fx-color: -fx-focused-base;
733 -fx-border-color: -fx-focus-color;
734 -fx-border-style: segments(0.166667em, 0.166667em);
735 -fx-border-width: 1px;
736 }
737
738 .hyperlink:disabled {
739 -fx-opacity: -fx-disabled-opacity;
740 }
741
742 .hyperlink:hover {
743 -fx-underline: true;
744 }
745
746 .hyperlink:show-mnemonics > .mnemonic-underline {
747 -fx-stroke: -fx-text-fill;
748 }
749
750
751 /*******************************************************************************
752 * *
753 * PopupMenu *
754 * *
755 ******************************************************************************/
756
757 .context-menu {
758 -fx-color: -fx-base;
759 -fx-background-color:
760 derive(-fx-color,-40%),
761 derive(-fx-color,100%),
762 linear-gradient(to bottom, derive(-fx-color,100%) 0%, derive(-fx-color,50%) 12%, derive(-fx-color,65%) 88%, derive(-fx-color,23%) 100%);
763 -fx-background-insets: 0, 1, 2;
764 -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
765 /* -fx-padding: 0.666667em 0.083333em 0.666667em 0.083333em; 8 1 8 1 */
766 -fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; /* 4 1 8 1 */
767 }
768
769 .context-menu > .separator {
770 -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */
771 }
772
773 .context-menu > .scroll-arrow {
774 -fx-padding: 0.416667em 0.416667em 0.416667em 0.416667em; /* 5 */
775 -fx-background-color: transparent;
776 }
777
778 .context-menu > .scroll-arrow:hover {
779 -fx-background: -fx-accent;
780 -fx-background-color: -fx-selection-bar;
781 -fx-text-fill: -fx-selection-bar-text;
782 }
783
784 .context-menu:show-mnemonics > .mnemonic-underline {
785 -fx-stroke: -fx-text-fill;
786 }
787
788 /*
789 * RT-33312 - if the context-menu is belongs to a menu-button, then set the context-menu's -fx-color to -fx-base
790 * effectively overriding the menu-button:armed, menu-button:hover styling of -fx-color
791 */
792 .menu-button > * > .context-menu {
793 -fx-color: -fx-base;
794 }
795
796 /*******************************************************************************
797 * *
798 * Menu *
799 * *
800 ******************************************************************************/
801
802 .menu {
803 -fx-background-color: transparent;
804 -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
805 }
806
807 .menu:disabled {
808 -fx-opacity: -fx-disabled-opacity;
809 }
810
811 .menu:show-mnemonics > .mnemonic-underline {
812 -fx-stroke: -fx-text-fill;
813 }
814 .menu > .right-container > .arrow {
815 -fx-padding: 0.458em 0.167em 0.458em 0.167em; /* 4.5 2 4.5 2 */
816 -fx-background-color: -fx-mark-color;
817 -fx-shape: "M0,-4L4,0L0,4Z";
818 -fx-scale-shape: false;
819 }
820
821 .menu:focused > .right-container > .arrow {
822 -fx-background-color: white;
823 }
824
825 /* This hides the down arrow that would show on a menu placed in a menubar */
826 .menu-bar > .container > .menu > .arrow-button > .arrow {
827 -fx-padding: 0;
828 -fx-background-color: transparent;
829 -fx-shape: null;
830 }
831
832 .menu-bar > .container > .menu > .arrow-button {
833 -fx-padding: 0;
834 }
835
836 .menu-up-arrow {
837 -fx-padding: 0.666667em 0.416667em 0.0em 0.416667em; /* 8 5 0 5 */
838 -fx-background-color: derive(-fx-color,-2%);
839 -fx-shape: "M0 1 L1 1 L.5 0 Z";
840 -fx-effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );
841 }
842
843 .menu-down-arrow {
844 -fx-background-color: derive(-fx-color,-2%);
845 -fx-padding: 0.666667em 0.416667em 0.0em 0.416667em; /* 8 5 0 5 */
846 -fx-shape: "M0 0 L1 0 L.5 1 Z";
847 -fx-effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );
848 }
849
850
851 /*******************************************************************************
852 * *
853 * MenuBar *
854 * *
855 ******************************************************************************/
856
857 /* Corresponding hex values for the color derivations used below are: *
858 * derive(-fx-base,-30%); #929292 *
859 * derive(-fx-base,-50%); #686868 *
860 * derive(-fx-base,-70%); #3e3e3e */
861
862 .menu-bar {
863 -fx-padding: 0.0em 0.666667em 0.0em 0.666667em; /* 0 8 0 8 */
864 -fx-spacing: 0.166667em; /* 2 */
865 -fx-base: derive(#d0d0d0,-70%);
866 -fx-background-color: linear-gradient(to bottom, derive(-fx-color,50%), derive(-fx-color,-30%)), -fx-body-color;
867 -fx-background-insets: 0, 1 0 1 0;
868 -fx-background-radius: 0, 0 ;
869 }
870
871 /* Show nothing for background of normal menu button in a menu bar */
872 .menu-bar > .container > .menu-button {
873 -fx-background-radius: 0;
874 -fx-background-color: transparent;
875 -fx-background-insets: 0;
876 }
877 /* Change padding of menu buttons when in menu bar */
878 .menu-bar > .container > .menu-button > .label {
879 -fx-padding: 0.333em 0.5em 0.333em 0.5em; /* 4 6 4 6*/
880 }
881
882 .menu-bar > .container > .menu-button:hover, .menu-bar > .container > .menu-button:focused, .menu-bar > .container > .menu-button:showing {
883 -fx-background: -fx-accent;
884 -fx-background-color: -fx-selection-bar;
885 -fx-text-fill: -fx-selection-bar-text;
886 }
887
888 /*.menu-bar .menu:focused:showing, .menu-bar .menu:showing, .menu-bar .menu:focused, .menu:focused:showing, .menu:showing, .menu:focused {*/
889 /*.menu-bar .menu-button:showing, .menu-button:showing {
890 -fx-background: -fx-accent;
891 -fx-background-color: -fx-selection-bar;
892 -fx-text-fill: -fx-selection-bar-text;
893 }*/
894
895 .menu-bar > .container > .menu-button:hover {
896 -fx-background: -fx-accent;
897 -fx-background-color: -fx-selection-bar;
898 -fx-text-fill: -fx-selection-bar-text;
899 }
900
901 .menu-bar:show-mnemonics > .mnemonic-underline {
902 -fx-stroke: -fx-text-fill;
903 }
904
905 /*******************************************************************************
906 * *
907 * MenuItem *
908 * *
909 ******************************************************************************/
910
911 .menu-item {
912 -fx-background-color: transparent;
913 -fx-padding: 0.333333em 0.41777em 0.333333em 0.41777em; /* 4 5 4 5 */
914 }
915
916 .menu-item > .left-container {
917 -fx-padding: 0.458em 0.791em 0.458em 0.458em;
918 }
919
920 .menu-item > .graphic-container {
921 -fx-padding: 0em 0.333em 0em 0em;
922 }
923
924 .menu-item >.label {
925 -fx-padding: 0em 0.5em 0em 0em;
926 -fx-text-fill: -fx-text-base-color;
927 }
928
929 .menu-item:disabled > .label {
930 -fx-opacity: -fx-disabled-opacity;
931 }
932
933 .menu-item:focused {
934 -fx-background: -fx-accent;
935 -fx-background-color: -fx-selection-bar;
936 -fx-text-fill: -fx-selection-bar-text;
937 }
938
939 .menu-item:focused > .label {
940 -fx-text-fill: white;
941 }
942 .menu-item > .right-container {
943 -fx-padding: 0em 0em 0em 0.5em;
944 }
945
946 .menu-item:show-mnemonics > .mnemonic-underline {
947 -fx-stroke: -fx-text-fill;
948 }
949
950 .radio-menu-item:checked > .left-container > .radio {
951 -fx-background-color: -fx-mark-color;
952 -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
953 -fx-scale-shape: false;
954 }
955
956 .radio-menu-item:focused:checked > .left-container > .radio {
957 -fx-background-color: white;
958 }
959
960 .check-menu-item:checked > .left-container > .check {
961 -fx-background-color: -fx-mark-color;
962 -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
963 -fx-scale-shape: false;
964 }
965
966 .check-menu-item:focused:checked > .left-container > .check {
967 -fx-background-color: white;
968 }
969
970 /*.radio.selected {
971 -fx-background-color: -fx-mark-color;
972 -fx-padding: 0.666667em; 8
973 -fx-shape: "M7,3.5C7,5.433,5.433,7,3.5,7C1.567,7,0,5.433,0,3.5C0,1.567,1.63,0,3.5,0C5.433,0,7,1.567,7,3.5z";
974 -fx-scale-shape: false;
975 }*/
976
977 /*.check.checked {
978 -fx-background-color: -fx-mark-color;
979 -fx-padding: 0.666667em; 8
980 -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
981 -fx-scale-shape: false;
982 }*/
983
984 /*
985 .menu-item:hover:selected .menu-item-check, .menu-item:focused:selected .menu-item-check,.menu-item:hover:selected .menu-item-radio, .menu-item:focused:selected .menu-item-radio {
986 -fx-background-color: -fx-selection-bar-text;
987 }
988 */
989 .menu-item:disabled {
990 -fx-opacity: -fx-disabled-opacity;
991 }
992
993 /*******************************************************************************
994 * *
995 * ChoiceBox *
996 * *
997 ******************************************************************************/
998
999 .choice-box {
1000 -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
1001 -fx-background-insets: 0 0 -1 0, 0, 1, 2;
1002 -fx-background-radius: 5, 5, 4, 3;
1003 -fx-padding: 0;
1004 -fx-alignment: CENTER;
1005 -fx-content-display: LEFT;
1006 }
1007
1008 .choice-box:focused {
1009 -fx-color: -fx-focused-base;
1010 -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
1011 -fx-background-insets: -1.4, 0, 1, 2;
1012 -fx-background-radius: 6.4, 5, 4, 3;
1013 }
1014
1015 .choice-box:hover {
1016 -fx-color: -fx-hover-base;
1017 }
1018
1019 .choice-box:showing {
1020 -fx-color: -fx-pressed-base;
1021 }
1022
1023 .choice-box > .label {
1024 -fx-padding: 0.166667em 0.333333em 0.25em 0.5em; /* 2 4 3 6 */
1025 -fx-text-fill: -fx-text-base-color;
1026 }
1027
1028 .choice-box > .open-button {
1029 -fx-background-color: null;
1030 -fx-padding: 0.083333em 0.666667em 0 0; /* 1 0 0 8 */
1031 }
1032
1033 .choice-box > .open-button > .arrow {
1034 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
1035 -fx-background-insets: 1 0 -1 0, 0;
1036 /* padding determines the size of the arrow;
1037 this should match the design size in the SVG */
1038 -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 3.5 2 3.5 */
1039 -fx-shape: "M 0 0 h 7 l -3.5 4 z";
1040 }
1041
1042 .choice-box > .context-menu {
1043 -fx-background-radius: 6, 5, 4;
1044 }
1045
1046 /*.choice-box > .context-menu > .menu-item {
1047 -fx-accelerator-gutter: 0;
1048 }*/
1049
1050 /* TODO: need to use the ID here. For some reason, the other form does not
1051 * work. This might be related to popup issues.
1052 */
1053 /*.choice-box > * > .menu-item-radio {*/
1054 #choice-box-menu-item > * > .menu-item-radio {
1055 /* When we show RadioMenuItems in ChoiceBox, we replace the radio shape with
1056 a check mark, which looks much better */
1057 -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
1058 -fx-scale-shape: false;
1059 }
1060
1061 .choice-box:disabled {
1062 -fx-opacity: -fx-disabled-opacity;
1063 }
1064
1065
1066 /*******************************************************************************
1067 * *
1068 * Slider *
1069 * *
1070 ******************************************************************************/
1071
1072 .slider > .thumb {
1073 -fx-background-color:
1074 derive(-fx-color,-36%),
1075 derive(-fx-color,73%),
1076 linear-gradient(to bottom, derive(-fx-color,-19%),derive(-fx-color,61%));
1077 -fx-background-insets: 0, 1, 2;
1078 -fx-background-radius: 1.0em; /* makes sure this remains circular */
1079 -fx-padding: 0.583333em; /* 7 */
1080 }
1081
1082 .slider:focused > .thumb {
1083 -fx-color: -fx-focused-base;
1084 -fx-background-color:
1085 -fx-focus-color,
1086 derive(-fx-color,-36%),
1087 derive(-fx-color,73%),
1088 linear-gradient(to bottom, derive(-fx-color,-19%),derive(-fx-color,61%));
1089 -fx-background-insets: -1.4, 0, 1, 2;
1090 -fx-background-radius: 1.0em; /* makes sure this remains circular */
1091 }
1092
1093 .slider > .thumb:hover {
1094 -fx-color: -fx-hover-base;
1095 }
1096
1097 /* Uncomment when RT-10521 is fixed.
1098 .slider .thumb:pressed {
1099 -fx-color: -fx-pressed-base;
1100 }
1101 */
1102
1103 .slider > .track {
1104 -fx-background-color:
1105 -fx-shadow-highlight-color,
1106 derive(-fx-color,-22%),
1107 linear-gradient(to bottom, derive(-fx-color,-15.5%), derive(-fx-color,34%) 30%, derive(-fx-color,68%));
1108 -fx-background-insets: 1 0 -1 0, 0, 1;
1109 -fx-background-radius: 2.5, 2.5, 1.5;
1110 -fx-padding: 0.208333em; /* 2.5 */
1111 }
1112
1113 .slider:vertical > .track {
1114 -fx-background-color:
1115 -fx-shadow-highlight-color,
1116 derive(-fx-color,-22%),
1117 linear-gradient(to right, derive(-fx-color,-15.5%), derive(-fx-color,34%) 30%, derive(-fx-color,68%));
1118 -fx-background-insets: 0 -1 0 1, 0, 1;
1119 }
1120
1121 .slider > .axis {
1122 -fx-tick-mark-stroke: ladder(-fx-background, derive(-fx-background,30%) 40%, derive(-fx-background,-30%) 41%);
1123 -fx-tick-label-font-size: 0.833333em;
1124 -fx-tick-label-fill: -fx-text-background-color;
1125 }
1126
1127 .slider:disabled {
1128 -fx-opacity: -fx-disabled-opacity;
1129 }
1130
1131 /*******************************************************************************
1132 * *
1133 * ScrollBar *
1134 * *
1135 ******************************************************************************/
1136
1137 .scroll-bar:horizontal {
1138 -fx-background-color:
1139 -fx-box-border,
1140 linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
1141 -fx-background-insets: 0, 1;
1142 }
1143
1144 .scroll-bar:horizontal:focused {
1145 -fx-background-color:
1146 -fx-focus-color,
1147 -fx-box-border,
1148 linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
1149 -fx-background-insets: -1.4, 0, 1;
1150 }
1151
1152 .scroll-bar:vertical {
1153 -fx-background-color:
1154 -fx-box-border,
1155 linear-gradient(to top, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
1156 -fx-background-insets: 0, 1;
1157 }
1158
1159 .scroll-bar:vertical:focused {
1160 -fx-background-color:
1161 -fx-focus-color,
1162 -fx-box-border,
1163 linear-gradient(to top, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
1164 -fx-background-insets: -1.4, 0, 1;
1165 }
1166
1167 .scroll-bar:horizontal > .thumb {
1168 -fx-background-color:
1169 -fx-box-border,
1170 linear-gradient(to bottom, derive(-fx-color,95%), derive(-fx-color,10%)),
1171 linear-gradient(to bottom, derive(-fx-color,38%), derive(-fx-color,-16%));
1172 -fx-background-insets: 0, 1, 2;
1173 -fx-background-radius: 0.5em; /* makes sure this remains circular */
1174 }
1175
1176 .scroll-bar:vertical > .thumb {
1177 -fx-background-color:
1178 -fx-box-border,
1179 linear-gradient(to right, derive(-fx-color,95%), derive(-fx-color,10%)),
1180 linear-gradient(to right, derive(-fx-color,38%), derive(-fx-color,-16%));
1181 -fx-background-insets: 0, 1, 2;
1182 -fx-background-radius: 0.5em; /* makes sure this remains circular */
1183 }
1184
1185 .scroll-bar:focused > .thumb {
1186 -fx-color: -fx-focused-base;
1187 }
1188
1189 .scroll-bar > .thumb:hover {
1190 -fx-color: -fx-hover-base;
1191 }
1192
1193 /* Uncomment when RT-10521 is fixed.
1194 .scroll-bar .thumb:pressed {
1195 -fx-color: -fx-pressed-base;
1196 }
1197 */
1198
1199 .scroll-bar:horizontal > .track {
1200 -fx-background-color:
1201 -fx-box-border,
1202 linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
1203 -fx-background-insets: 0, 1;
1204 -fx-background-radius: 0.5em; /* makes sure this remains circular */
1205 }
1206 .scroll-bar:horizontal > .track-background {
1207 -fx-background-color:
1208 -fx-box-border,
1209 linear-gradient(to top, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
1210 -fx-background-insets: 0, 1;
1211 }
1212
1213 .scroll-bar:vertical > .track {
1214 -fx-background-color:
1215 -fx-box-border,
1216 linear-gradient(to right, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
1217 -fx-background-insets: 0, 1;
1218 -fx-background-radius: 0.5em; /* makes sure this remains circular */
1219 }
1220
1221 .scroll-bar:vertical > .track-background {
1222 -fx-background-color:
1223 -fx-box-border,
1224 linear-gradient(to left, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
1225 -fx-background-insets: 0, 1;
1226 }
1227
1228 .scroll-bar > .increment-button {
1229 -fx-background-color: transparent;
1230 -fx-background-insets: 0;
1231 -fx-padding: 0.25em; /* 3 */
1232 }
1233
1234 .scroll-bar > .decrement-button {
1235 -fx-background-color: transparent;
1236 -fx-background-insets: 0;
1237 -fx-padding: 0.25em; /* 3 */
1238 }
1239
1240 .scroll-bar:horizontal > .increment-button > .increment-arrow {
1241 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
1242 -fx-background-insets: 1 0 -1 0, 0;
1243 -fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
1244 -fx-shape: "M 4 0 L 0 -3 L 0 3 z";
1245 }
1246
1247 .scroll-bar:vertical > .increment-button > .increment-arrow {
1248 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
1249 -fx-background-insets: 1 0 -1 0, 0;
1250 -fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
1251 -fx-shape: "M -3 0 L 0 4 L 3 0 z";
1252 }
1253
1254 .scroll-bar:horizontal > .decrement-button > .decrement-arrow {
1255 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
1256 -fx-background-insets: 1 0 -1 0, 0;
1257 -fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
1258 -fx-shape: "M 0 0 L 4 -3 L 4 3 z";
1259 }
1260
1261 .scroll-bar:vertical > .decrement-button > .decrement-arrow {
1262 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
1263 -fx-background-insets: 1 0 -1 0, 0;
1264 -fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
1265 -fx-shape: "M -3 0 L 0 -4 L 3 0 z";
1266 }
1267
1268 .scroll-bar:disabled {
1269 -fx-opacity: -fx-disabled-opacity;
1270 }
1271
1272 /* The opacity of the parent is applied to the children. So we make the
1273 * opacity 1.0 here to avoid double translucency.
1274 */
1275 /*:disabled > * > .scroll-bar {
1276 -fx-opacity: 1.0;
1277 }*/
1278
1279 /*******************************************************************************
1280 * *
1281 * ScrollPane *
1282 * *
1283 ******************************************************************************/
1284
1285 .scroll-pane {
1286 -fx-background-color: -fx-box-border,-fx-background;
1287 -fx-background-insets: 0, 1;
1288 -fx-padding: 1.0;
1289 }
1290
1291 .scroll-pane:focused {
1292 -fx-background-color: -fx-focus-color, -fx-box-border, -fx-background;
1293 -fx-background-insets: -1.4, 0, 1;
1294 }
1295
1296 .scroll-pane > * > .scroll-bar:horizontal {
1297 -fx-background-insets: 0, 1 0 0 0;
1298 -fx-padding: 0.0 0.0 0.0 0.0;
1299 }
1300
1301 .scroll-pane > * > .scroll-bar:vertical {
1302 -fx-background-insets: 0, 0 0 0 1;
1303 -fx-padding: 0.0 0.0 0.0 0.0;
1304 }
1305
1306 .scroll-pane > .corner {
1307 -fx-background-color: -fx-box-border, -fx-base;
1308 -fx-background-insets: 0, 1 0 0 1;
1309 }
1310
1311 .scroll-pane:disabled {
1312 -fx-opacity: -fx-disabled-opacity;
1313 }
1314
1315 /*******************************************************************************
1316 * *
1317 * Separator *
1318 * *
1319 ******************************************************************************/
1320
1321 .separator > .line {
1322 -fx-border-style: segments(0.166667em, 0.166667em);
1323 -fx-border-width: 0.083333em; /* 1 */
1324 }
1325
1326 .separator:horizontal > .line {
1327 -fx-background-color: null;
1328 -fx-padding: 0.083333em 0.0em 0.0em 0.0em; /* 1 0 0 0 */
1329 -fx-border-color: derive(-fx-background,-20%) transparent transparent transparent;
1330 }
1331
1332 .separator:vertical > .line {
1333 -fx-background-color: null;
1334 -fx-padding: 0.0em 0.083333em 0.0em 0.0em; /* 0 1 0 0 */
1335 -fx-border-color: transparent derive(-fx-background,-20%) transparent transparent;
1336 }
1337
1338 /*******************************************************************************
1339 * *
1340 * TextInput *
1341 * *
1342 ******************************************************************************/
1343
1344 .text-input {
1345 -fx-text-fill: -fx-text-inner-color;
1346 -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
1347 -fx-highlight-text-fill: -fx-text-inner-color;
1348 }
1349
1350 .text-input:focused {
1351 -fx-highlight-fill: -fx-accent;
1352 -fx-highlight-text-fill: white;
1353 }
1354
1355 /*******************************************************************************
1356 * *
1357 * TextField *
1358 * *
1359 ******************************************************************************/
1360
1361 .text-field {
1362 -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;
1363 -fx-background-insets: 0, 1, 2;
1364 -fx-background-radius: 3, 2, 2;
1365 -fx-padding: 0.25em 0.416667em 0.333333em 0.416667em; /* 3 5 4 5 */
1366 -fx-text-fill: -fx-text-inner-color;
1367 -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
1368 -fx-cursor: text;
1369 }
1370
1371 .text-field:focused {
1372 -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
1373 -fx-background-insets: -0.4, 1, 2;
1374 -fx-background-radius: 3.4, 2, 2;
1375 -fx-prompt-text-fill: transparent;
1376 }
1377
1378 .text-field:disabled {
1379 -fx-opacity: -fx-disabled-opacity;
1380 }
1381
1382 /*******************************************************************************
1383 * *
1384 * PasswordField *
1385 * *
1386 ******************************************************************************/
1387
1388 .password-field {
1389 -fx-text-fill: -fx-text-inner-color;
1390 }
1391
1392 /*******************************************************************************
1393 * *
1394 * TextArea *
1395 * *
1396 ******************************************************************************/
1397
1398 .text-area {
1399 -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;
1400 -fx-background-insets: 0, 1, 2;
1401 -fx-background-radius: 3, 2, 2;
1402 -fx-padding: 1;
1403 -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
1404 }
1405
1406 .text-area > .scroll-pane {
1407 -fx-background-color: transparent;
1408 }
1409
1410 .text-area .content {
1411 -fx-padding: 3 5 3 5;
1412 -fx-cursor: text;
1413 }
1414
1415 .text-area:focused {
1416 -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
1417 -fx-background-insets: -0.4, 1, 2;
1418 -fx-background-radius: 3.4, 2, 2;
1419 -fx-prompt-text-fill: transparent;
1420 }
1421
1422 .text-area:disabled {
1423 -fx-opacity: -fx-disabled-opacity;
1424 }
1425
1426 /*******************************************************************************
1427 * *
1428 * Customised CSS for controls placed directly within cells *
1429 * *
1430 ******************************************************************************/
1431
1432 .cell > .choice-box {
1433 -fx-background-color: transparent;
1434 -fx-background-insets: 0;
1435 -fx-background-radius: 0;
1436 -fx-padding: 0.0em 0.5em 0.0em 0.0em; /* 0 6 0 0 */
1437 -fx-alignment: CENTER_LEFT;
1438 -fx-content-display: LEFT;
1439 }
1440
1441 .cell > .choice-box > .label {
1442 -fx-padding: 0em 0.333333em 0.0em 0.333333; /* 2 4 3 6 */
1443 }
1444
1445 .cell:focused:selected > .choice-box > .label {
1446 -fx-text-fill: white;
1447 }
1448
1449 .cell:focused:selected > .choice-box > .open-button > .arrow {
1450 -fx-background-color: -fx-mark-highlight-color, white;
1451 }
1452
1453 /*******************************************************************************
1454 * *
1455 * ListView and ListCell *
1456 * *
1457 ******************************************************************************/
1458
1459 .list-view {
1460 -fx-background-color: -fx-box-border, -fx-control-inner-background;
1461 -fx-background-insets: 0, 1;
1462
1463 /* There is some oddness if padding is in em values rather than pixels,
1464 in particular, the left border of the control doesn't show. */
1465 -fx-padding: 1; /* 0.083333em; */
1466 }
1467
1468 .list-view:focused {
1469 -fx-background-color: -fx-focus-color,-fx-box-border,-fx-control-inner-background;
1470 -fx-background-insets: -1.4, 0, 1;
1471 -fx-background-radius: 1.4, 0, 0;
1472
1473 /* There is some oddness if padding is in em values rather than pixels,
1474 in particular, the left border of the control doesn't show. */
1475 -fx-padding: 1; /* 0.083333em; */
1476 }
1477
1478 .list-view > .virtual-flow > .scroll-bar:vertical{
1479 -fx-background-insets: 0, 0 0 0 1;
1480 -fx-padding: -1 -1 -1 0;
1481 }
1482
1483 .list-view > .virtual-flow > .scroll-bar:horizontal{
1484 -fx-background-insets: 0, 1 0 0 0;
1485 -fx-padding: 0 -1 -1 -1;
1486 }
1487
1488 .list-view:disabled {
1489 -fx-opacity: -fx-disabled-opacity;
1490 }
1491
1492 .list-view > .virtual-flow > .corner {
1493 -fx-background-color: -fx-box-border, -fx-base;
1494 -fx-background-insets: 0, 1 0 0 1;
1495 }
1496
1497 .list-cell {
1498 -fx-background-color: -fx-control-inner-background;
1499 -fx-padding: 0.25em; /* 3 */
1500 -fx-text-fill: -fx-text-inner-color;
1501 -fx-opacity: 1;
1502 }
1503
1504 .list-cell:odd {
1505 -fx-background-color: derive(-fx-control-inner-background,-5%);
1506 }
1507
1508 .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused {
1509 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
1510 -fx-background-insets: 0, 1, 2;
1511 }
1512
1513 .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused:odd {
1514 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, derive(-fx-control-inner-background,-5%);
1515 -fx-background-insets: 0, 1, 2;
1516 }
1517
1518 /* When the list-cell is selected and focused */
1519 .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected {
1520 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
1521 -fx-background-insets: 0, 1, 2;
1522 -fx-background: -fx-accent;
1523 -fx-text-fill: -fx-selection-bar-text;
1524 }
1525
1526 .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
1527 .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
1528 -fx-background: -fx-accent;
1529 -fx-background-color: -fx-selection-bar;
1530 -fx-text-fill: -fx-selection-bar-text;
1531 }
1532
1533 .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected:hover {
1534 -fx-background: -fx-accent;
1535 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
1536 -fx-background-insets: 0, 1, 2;
1537 -fx-text-fill: -fx-selection-bar-text;
1538 }
1539
1540 /* When the ListView is _not_ focused, we show alternate selection colors */
1541 .list-cell:filled:selected:focused,
1542 .list-cell:filled:selected,
1543 .list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
1544 -fx-background-color: lightgray;
1545 -fx-text-fill: -fx-selection-bar-text;
1546 }
1547
1548 .list-cell:filled:selected:focused:disabled,
1549 .list-cell:filled:selected:disabled {
1550 -fx-opacity: -fx-disabled-opacity;
1551 }
1552
1553 .list-cell:filled:hover {
1554 -fx-background-color: -fx-cell-hover-color;
1555 -fx-text-fill: -fx-text-inner-color;
1556 }
1557
1558 .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:hover {
1559 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
1560 -fx-background-insets: 0, 1, 2;
1561 -fx-text-fill: -fx-text-inner-color;
1562 }
1563
1564 .list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
1565 .list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
1566 -fx-background-color: linear-gradient(to right, derive(-fx-accent,-7%), derive(-fx-accent,-25%));
1567 }
1568
1569 /*******************************************************************************
1570 * *
1571 * TreeView and TreeCell *
1572 * *
1573 ******************************************************************************/
1574
1575 .tree-view {
1576 -fx-background-color: -fx-box-border, -fx-control-inner-background;
1577 -fx-background-insets: 0, 1;
1578
1579 /* There is some oddness if padding is in em values rather than pixels,
1580 in particular, the left border of the control doesn't show. */
1581 -fx-padding: 1; /* 0.083333em; */
1582 }
1583
1584 .tree-view:focused {
1585 -fx-background-color: -fx-focus-color,-fx-box-border,-fx-control-inner-background;
1586 -fx-background-insets: -1.4, 0, 1;
1587 -fx-background-radius: 1.4, 0, 0;
1588
1589 /* There is some oddness if padding is in em values rather than pixels,
1590 in particular, the left border of the control doesn't show. */
1591 -fx-padding: 1; /* 0.083333em; */
1592 }
1593
1594 .tree-view > .virtual-flow > .scroll-bar:vertical{
1595 -fx-background-insets: 0, 0 0 0 1;
1596 -fx-padding: -1 -1 -1 0;
1597 }
1598
1599 .tree-view > .virtual-flow > .scroll-bar:horizontal{
1600 -fx-background-insets: 0, 1 0 0 0;
1601 -fx-padding: 0 -1 -1 -1;
1602 }
1603
1604 .tree-view:disabled {
1605 -fx-opacity: -fx-disabled-opacity;
1606 }
1607
1608 .tree-view > .virtual-flow > .corner {
1609 -fx-background-color: -fx-box-border, -fx-base;
1610 -fx-background-insets: 0, 1 0 0 1;
1611 }
1612
1613 .tree-cell {
1614 -fx-background-color: -fx-control-inner-background;
1615 -fx-padding: 0.25em; /* 3 */
1616 -fx-text-fill: -fx-text-inner-color;
1617 -fx-indent: 10;
1618 }
1619
1620 .tree-cell .label {
1621 -fx-padding: 0.0em 0.0em 0.0em 0.25em; /* 0 0 0 3 */
1622 }
1623
1624 .tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:focused {
1625 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
1626 -fx-background-insets: 0, 1, 2;
1627 }
1628
1629 .tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected {
1630 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
1631 -fx-background-insets: 0, 1, 2;
1632 -fx-background: -fx-accent;
1633 -fx-text-fill: -fx-selection-bar-text;
1634 }
1635
1636 .tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected,
1637 .tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected:hover {
1638 -fx-background: -fx-accent;
1639 -fx-background-color: -fx-selection-bar;
1640 -fx-text-fill: -fx-selection-bar-text;
1641 }
1642
1643 .tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected:hover {
1644 -fx-background: -fx-accent;
1645 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
1646 -fx-background-insets: 0, 1, 2;
1647 -fx-text-fill: -fx-selection-bar-text;
1648 }
1649
1650 /* When the TreeView is _not_ focused, we show alternate selection colors */
1651 .tree-cell:filled:selected:focused,
1652 .tree-cell:filled:selected {
1653 -fx-background-color: lightgray;
1654 -fx-text-fill: -fx-selection-bar-text;
1655 }
1656
1657 .tree-cell:filled:selected:focused:disabled,
1658 .tree-cell:filled:selected:disabled {
1659 -fx-opacity: -fx-disabled-opacity;
1660 }
1661
1662 .tree-cell > .tree-disclosure-node,
1663 .tree-table-row-cell > .tree-disclosure-node {
1664 -fx-padding: 4 2 4 8;
1665 -fx-background-color: transparent;
1666 }
1667
1668 .tree-cell > .tree-disclosure-node:disabled,
1669 .tree-table-row-cell > .tree-disclosure-node:disabled {
1670 -fx-opacity: -fx-disabled-opacity;
1671 }
1672
1673 .tree-cell > .tree-disclosure-node > .arrow,
1674 .tree-table-row-cell > .tree-disclosure-node > .arrow {
1675 -fx-background-color: -fx-mark-color;
1676 -fx-padding: 0.333333em; /* 4 */
1677 -fx-shape: "M 0 -4 L 8 0 L 0 4 z";
1678 }
1679
1680 .tree-cell:expanded > .tree-disclosure-node > .arrow,
1681 .tree-table-row-cell:expanded > .tree-disclosure-node > .arrow {
1682 -fx-rotate: 90;
1683 }
1684
1685 .tree-cell:filled:selected > .tree-disclosure-node > .arrow,
1686 .tree-table-row-cell:filled:selected > .tree-disclosure-node > .arrow {
1687 -fx-background-color: -fx-selection-bar-text;
1688 }
1689
1690 .tree-cell:filled:hover,
1691 .tree-table-row-cell:filled:hover {
1692 -fx-background-color: -fx-cell-hover-color;
1693 -fx-text-fill: -fx-text-inner-color;
1694 }
1695
1696 .tree-cell:filled:hover > .tree-disclosure-node > .arrow,
1697 .tree-table-row-cell:filled:hover > .tree-disclosure-node > .arrow {
1698 -fx-background-color: -fx-mark-color;
1699 }
1700
1701 .tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:hover,
1702 .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover {
1703 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
1704 -fx-background-insets: 0, 1, 2;
1705 -fx-text-fill: -fx-text-inner-color;
1706 }
1707
1708 .tree-cell:filled:selected:hover > .tree-disclosure-node > .arrow,
1709 .tree-table-row-cell:filled:selected:hover > .tree-disclosure-node > .arrow {
1710 -fx-background-color: -fx-selection-bar-text;
1711 }
1712
1713 /*******************************************************************************
1714 * *
1715 * MenuButton *
1716 * *
1717 ******************************************************************************/
1718
1719 .menu-button {
1720 -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
1721 -fx-background-insets: 0 0 -1 0, 0, 1, 2;
1722 -fx-background-radius: 5, 5, 4, 3;
1723 -fx-padding: 0.0em; /* 0 */
1724 -fx-text-fill: -fx-text-base-color;
1725 }
1726
1727 .menu-button > .label {
1728 /* TODO workaround for RT-19062 */
1729 -fx-text-fill: -fx-text-base-color;
1730
1731 /* The MenuButton skin uses an inner Label part */
1732 -fx-padding: 0.166667em 0.667em 0.25em 0.833333em; /* 2 8 3 10 */
1733 }
1734
1735 .menu-button:focused {
1736 -fx-color: -fx-focused-base;
1737 -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
1738 -fx-background-insets: -1.4, 0, 1, 2;
1739 -fx-background-radius: 6.4, 4, 5, 3;
1740 }
1741
1742 .menu-button:hover {
1743 -fx-color: -fx-hover-base;
1744 }
1745
1746 .menu-button:armed {
1747 -fx-color: -fx-pressed-base;
1748 }
1749
1750 .menu-button > .arrow-button {
1751 -fx-background-insets: 0;
1752 -fx-background-radius: 0;
1753 -fx-padding: 0.5em 0.667em 0.5em 0.0em; /* 6 8 6 0 */
1754 }
1755
1756 .menu-button > .arrow-button > .arrow {
1757 -fx-background-insets: 1 0 -1 0, 0;
1758 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
1759 -fx-padding: 0.25em; /* 3 */
1760 -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
1761 }
1762
1763 .menu-button:openvertically > .arrow-button > .arrow {
1764 -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
1765 -fx-shape: "M 0 0 h 7 l -3.5 4 z";
1766 }
1767
1768 .menu-button:disabled {
1769 -fx-opacity: -fx-disabled-opacity;
1770 }
1771
1772 .menu-button:show-mnemonics > .mnemonic-underline {
1773 -fx-stroke: -fx-text-fill;
1774 }
1775
1776
1777
1778 /*******************************************************************************
1779 * *
1780 * SplitMenuButton *
1781 * *
1782 ******************************************************************************/
1783
1784 .split-menu-button {
1785 -fx-background-color: -fx-shadow-highlight-color;
1786 -fx-background-insets: 0 0 -1 0;
1787 -fx-background-radius: 5;
1788 -fx-padding: 0.0em; /* 0 */
1789 -fx-text-fill: -fx-text-base-color;
1790 }
1791
1792 .split-menu-button:focused {
1793 -fx-color: -fx-focused-base;
1794 -fx-background-color: -fx-focus-color;
1795 -fx-background-insets: -1.4;
1796 -fx-background-radius: 6.4;
1797 }
1798
1799 .split-menu-button > .label:hover {
1800 -fx-color: -fx-hover-base;
1801 }
1802
1803 .split-menu-button:armed > .label {
1804 -fx-color: -fx-pressed-base;
1805 }
1806
1807 /* The SplitMenuButton skin uses an inner Label part */
1808 .split-menu-button > .label {
1809 -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
1810 -fx-background-insets: 0, 1 0 1 1, 2 1 2 2;
1811 -fx-background-radius: 5 0 0 5, 4 0 0 4, 3 0 0 3;
1812 -fx-padding: 0.166667em 0.667em 0.25em 0.833333em; /* 2 8 3 10 */
1813 }
1814
1815 .split-menu-button > .arrow-button {
1816 -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
1817 -fx-background-insets: 0, 1, 2;
1818 -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
1819 -fx-padding: 0.5em 0.667em 0.5em 0.667em; /* 6 8 6 8 */
1820 }
1821
1822 .split-menu-button > .arrow-button:hover {
1823 -fx-color: -fx-hover-base;
1824 }
1825
1826 .split-menu-button > .arrow-button:pressed {
1827 -fx-color: -fx-pressed-base;
1828 }
1829
1830 .split-menu-button > .arrow-button > .arrow {
1831 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
1832 -fx-background-insets: 1 0 -1 0, 0;
1833 -fx-padding: 0.25em; /* 3 */
1834 -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
1835 }
1836
1837 .split-menu-button:openvertically > .arrow-button > .arrow {
1838 -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
1839 -fx-shape: "M 0 0 h 7 l -3.5 4 z";
1840 }
1841
1842 .split-menu-button:disabled {
1843 -fx-opacity: -fx-disabled-opacity;
1844 }
1845
1846 .split-menu-button:show-mnemonics > .mnemonic-underline {
1847 -fx-stroke: -fx-text-fill;
1848 }
1849
1850
1851
1852 /*******************************************************************************
1853 * *
1854 * Tooltip *
1855 * *
1856 ******************************************************************************/
1857
1858 .tooltip {
1859 -fx-background-color:
1860 linear-gradient(#cec340, #a59c31),
1861 linear-gradient(#fefefc, #e6dd71),
1862 linear-gradient(#fef592, #e5d848);
1863 -fx-background-insets: 0,1,2;
1864 -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
1865 -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
1866 }
1867
1868 /*******************************************************************************
1869 * *
1870 * Toolbar *
1871 * *
1872 * Corresponding hex values for the color derivations used below are: *
1873 * derive(-fx-base,-20%); #a6a6a6 *
1874 * derive(-fx-base,-30%); #929292 *
1875 * derive(-fx-base,-35%); #878787 *
1876 * derive(-fx-base,-50%); #686868 *
1877 * derive(-fx-base,-60%); #535353 *
1878 * derive(-fx-base,65%); #efefef *
1879 * *
1880 ******************************************************************************/
1881
1882 .tool-bar:vertical {
1883 -fx-background: derive(-fx-base,-20%);
1884 -fx-background-color:
1885 linear-gradient(to right, derive(-fx-base,-30%), derive(-fx-base,-60%)),
1886 linear-gradient(to right, derive(-fx-base,65%) 2%, derive(-fx-base,-20%) 95%);
1887 -fx-background-insets: 0, 0 1 0 1;
1888 -fx-background-radius: 0 ;
1889 -fx-padding: 0.833em 0.416667em 0.833em 0.416667em; /* 10 5 10 5 */
1890 -fx-spacing: 0.333em; /* 4 */
1891 -fx-alignment: TOP_LEFT;
1892 }
1893
1894 .tool-bar > .container > .separator:vertical > .line {
1895 -fx-border-style: solid;
1896 -fx-background-color: null;
1897 -fx-border-color: transparent derive(-fx-base,-35%) transparent transparent;
1898 }
1899
1900 .tool-bar > .container > .separator:horizontal > .line {
1901 -fx-border-style: solid;
1902 -fx-background-color: null;
1903 -fx-border-color: transparent transparent derive(-fx-base,-35%) transparent;
1904 }
1905
1906 .tool-bar:vertical > .container > .separator {
1907 -fx-orientation: horizontal;
1908 -fx-padding: 0.0em 0.0835em 0.0em 0.0835em; /* 0 1 0 1 */
1909 }
1910
1911 .tool-bar:horizontal {
1912 -fx-background: derive(-fx-base,-30%);
1913 -fx-background-color:
1914 linear-gradient(to bottom, derive(-fx-base,-30%), derive(-fx-base,-60%)),
1915 linear-gradient(to bottom, derive(-fx-base,65%) 2%, derive(-fx-base,-20%) 95%);
1916 -fx-background-insets: 0, 1 0 1 0;
1917 -fx-background-radius: 0, 0 ;
1918 -fx-padding: 0.416667em 0.833em 0.416667em 0.833em; /* 5 10 5 10 */
1919 -fx-spacing: 0.333em; /* 4 */
1920 -fx-alignment: CENTER_LEFT;
1921 }
1922
1923 .tool-bar:horizontal > .container > .separator {
1924 -fx-orientation: vertical;
1925 -fx-padding: 0.0835em 0.0em 0.0835em 0.0em; /* 1 0 1 0 */
1926 }
1927
1928 .tool-bar-overflow-button {
1929 -fx-background-color: transparent;
1930 -fx-padding: 0.666667em 0.916667em 0em 0em; /* 8 11 0 0 */
1931 }
1932
1933 .tool-bar-overflow-button > .arrow {
1934 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
1935 -fx-background-insets: 1 0 -1 0, 0;
1936 -fx-padding: 0.666667em 0.916667em 0em 0em; /* 8 11 0 0 */
1937 -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" ;
1938 }
1939
1940 .tool-bar-overflow-button:focused > .arrow {
1941 -fx-background-color: -fx-mark-highlight-color, derive(-fx-accent, -15%);
1942 -fx-background-insets: 1 0 -1 0, 0;
1943 }
1944
1945 .tool-bar-overflow-button:hover > .arrow {
1946 -fx-background-color: -fx-mark-highlight-color, derive(-fx-hover-base, -35%);
1947 -fx-background-insets: 1 0 -1 0, 0;
1948 }
1949
1950 /*******************************************************************************
1951 * *
1952 * ProgressBar *
1953 * *
1954 ******************************************************************************/
1955
1956 .progress-bar {
1957 -fx-background-color:
1958 -fx-box-border,
1959 linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
1960 -fx-background-insets: 0, 1;
1961 -fx-indeterminate-bar-length: 60;
1962 -fx-indeterminate-bar-escape: true;
1963 -fx-indeterminate-bar-flip: true;
1964 -fx-indeterminate-bar-animation-time: 2;
1965 }
1966
1967 .progress-bar > .bar {
1968 -fx-background-color:
1969 -fx-box-border,
1970 linear-gradient(to bottom, derive(-fx-accent,95%), derive(-fx-accent,10%)),
1971 linear-gradient(to bottom, derive(-fx-accent,38%), -fx-accent);
1972 -fx-background-insets: 0, 1, 2;
1973 -fx-padding: 0.416667em; /* 5 */
1974 }
1975
1976 .progress-bar:indeterminate > .bar {
1977 -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
1978 }
1979
1980 .progress-bar > .track {
1981 -fx-background-color:
1982 -fx-box-border,
1983 linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
1984 -fx-background-insets: 0, 1;
1985 }
1986
1987 .progress-bar:disabled {
1988 -fx-opacity: -fx-disabled-opacity;
1989 }
1990
1991 /*******************************************************************************
1992 * *
1993 * ProgressIndicator *
1994 * *
1995 ******************************************************************************/
1996
1997 .progress-indicator {
1998 -fx-indeterminate-segment-count: 8;
1999 -fx-spin-enabled: true;
2000 }
2001
2002 .progress-indicator > .determinate-indicator > .indicator {
2003 -fx-background-color:
2004 -fx-box-border,
2005 -fx-outer-border,
2006 -fx-inner-border,
2007 -fx-body-color;
2008 -fx-background-insets: 1 0 -1 0, 0, 1, 2;
2009 -fx-padding: 1px;
2010 }
2011
2012 .progress-indicator > .determinate-indicator > .progress {
2013 -fx-background-color:
2014 linear-gradient(to bottom, derive(-fx-accent,38%), derive(-fx-accent,-60%)),
2015 linear-gradient(to bottom, derive(-fx-accent,20%), -fx-accent);
2016 -fx-background-insets: 0, 1;
2017 -fx-padding: 0.25em; /* 3px */
2018 }
2019
2020 /* TODO: scaling the shape seems to make it disappear */
2021 .progress-indicator > .determinate-indicator > .tick {
2022 -fx-background-color: -fx-mark-color, white;
2023 -fx-background-insets: 1 0 -1 0, 0;
2024 -fx-padding: 0.416667em; /* 5 */
2025 -fx-shape: "M 0,5 L 2.5,5 L 3.7,7.5 L 7.5,0 L 10,0 L 5,10 L 2.5,10 Z";
2026 -fx-scale-shape: false;
2027 }
2028
2029 .progress-indicator:indeterminate > .spinner {
2030 -fx-padding: 0.833333em; /* 10 */
2031 }
2032
2033 .progress-indicator > .percentage {
2034 -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
2035 -fx-fill: -fx-text-background-color;
2036 }
2037
2038 .progress-indicator:disabled {
2039 -fx-opacity: -fx-disabled-opacity;
2040 }
2041
2042 .progress-indicator:indeterminate .segment {
2043 -fx-background-color: -fx-accent;
2044 }
2045 .progress-indicator:indeterminate .segment0 {
2046 -fx-shape:"M18.191,4.264l-2.457,1.721l0,0C16.559,7.161,17,8.564,17,10h3C20,7.948,19.369,5.946,18.191,4.264z";
2047 }
2048 .progress-indicator:indeterminate .segment1 {
2049 -fx-shape:"M11.736,0.152l-0.521,2.955l0,0c1.416,0.249,2.719,0.928,3.734,1.943l2.122-2.121C15.62,1.478,13.758,0.508,11.736,0.152z";
2050 }
2051 .progress-indicator:indeterminate .segment2 {
2052 -fx-shape:"M10,0C7.947,0,5.945,0.631,4.264,1.809l1.72,2.457l0,0C7.162,3.442,8.563,3,10,3V0z";
2053 }
2054 .progress-indicator:indeterminate .segment3 {
2055 -fx-shape:"M2.929,2.929C1.478,4.38,0.508,6.242,0.152,8.264l2.955,0.521l0,0C3.356,7.369,4.035,6.066,5.05,5.05l0,0L2.929,2.929z";
2056 }
2057 .progress-indicator:indeterminate .segment4 {
2058 -fx-shape:"M0,10c0,2.052,0.631,4.055,1.809,5.735l2.458-1.721C3.442,12.838,3,11.437,3,10H0z";
2059 }
2060 .progress-indicator:indeterminate .segment5 {
2061 -fx-shape:"M8.785,16.894c-1.416-0.25-2.719-0.929-3.735-1.944l0,0l-2.122,2.122c1.451,1.45,3.313,2.42,5.335,2.776L8.785,16.894z";
2062 }
2063 .progress-indicator:indeterminate .segment6 {
2064 -fx-shape:"M14.016,15.734C12.838,16.558,11.437,17,10,17v3c2.053,0,4.055-0.632,5.736-1.809L14.016,15.734z";
2065 }
2066 .progress-indicator:indeterminate .segment7 {
2067 -fx-shape:"M16.894,11.215c-0.249,1.415-0.929,2.719-1.944,3.734l2.122,2.122c1.45-1.451,2.421-3.314,2.776-5.335L16.894,11.215z";
2068 }
2069
2070 /*******************************************************************************
2071 * *
2072 * TableView *
2073 * *
2074 ******************************************************************************/
2075
2076 .table-view {
2077 -fx-background-color: -fx-box-border, -fx-control-inner-background;
2078 -fx-background-insets: 0,1;
2079
2080 /* There is some oddness if padding is in em values rather than pixels,
2081 in particular, the left border of the control doesn't show. */
2082 -fx-padding: 1; /* 0.083333em; */
2083
2084 /* Constants used throughout the tableview.
2085 * TODO: Should these be derived from the palette in .scene?
2086 */
2087 -fx-table-header-border-color: #959595;
2088 /* -fx-table-header-background-color: linear (0%,0%) to (0%,100%) stops (80%, #bbbbbb) (10%, #f6f6f6);*/
2089 -fx-table-cell-border-color: #bbbbbb;
2090 }
2091
2092 /** Draws focus border around tableview */
2093 .table-view:focused,
2094 .tree-table-view:focused {
2095 -fx-background-color: -fx-focus-color,-fx-box-border,-fx-control-inner-background;
2096 -fx-background-insets: -1.4, 0, 1;
2097 -fx-background-radius: 1.4, 0, 0;
2098
2099 /* There is some oddness if padding is in em values rather than pixels,
2100 in particular, the left border of the control doesn't show. */
2101 -fx-padding: 1; /* 0.083333em; */
2102 }
2103
2104 .table-view:disabled,
2105 .tree-table-view:disabled {
2106 -fx-opacity: -fx-disabled-opacity;
2107 }
2108
2109 .table-view > .virtual-flow > .scroll-bar:vertical,
2110 .tree-table-view > .virtual-flow > .scroll-bar:vertical {
2111 -fx-background-insets: 0, 0 0 0 1;
2112 -fx-padding: -1 -1 -1 0;
2113 }
2114
2115 .table-view > .virtual-flow > .scroll-bar:horizontal,
2116 .tree-table-view > .virtual-flow > .scroll-bar:horizontal {
2117 -fx-background-insets: 0, 1 0 0 0;
2118 -fx-padding: 0 -1 -1 -1;
2119 }
2120
2121 .table-view > .virtual-flow > .corner,
2122 .tree-table-view > .virtual-flow > .corner {
2123 -fx-background-color: -fx-box-border, -fx-base;
2124 -fx-background-insets: 0, 1 0 0 1;
2125 }
2126
2127 /* Each row in the table is a table-row-cell. Inside a table-row-cell is any
2128 number of table-cell. */
2129 .table-row-cell {
2130 -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background;
2131 -fx-background-insets: 0, 0 0 1 0;
2132 -fx-padding: 0.0em; /* 0 */
2133 -fx-text-fill: -fx-text-inner-color;
2134 }
2135
2136 .table-row-cell:odd {
2137 -fx-background-color: -fx-table-cell-border-color, derive(-fx-control-inner-background,-5%);
2138 -fx-background-insets: 0, 0 0 1 0;
2139 }
2140
2141 .table-row-cell:focused,
2142 .tree-table-row-cell:focused {
2143 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
2144 -fx-background-insets: 0, 1, 2;
2145 }
2146
2147 .table-row-cell:focused:odd {
2148 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, derive(-fx-control-inner-background,-5%);
2149 -fx-background-insets: 0, 1, 2;
2150 }
2151
2152 /* When the table-row-cell is selected and focused */
2153 .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:selected,
2154 .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected {
2155 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
2156 -fx-background-insets: 0, 1, 2;
2157 -fx-background: -fx-accent;
2158 -fx-text-fill: -fx-selection-bar-text;
2159 }
2160
2161 .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected > .table-cell,
2162 .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell {
2163 -fx-text-fill: -fx-selection-bar-text;
2164 }
2165
2166 .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
2167 .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected {
2168 -fx-background: -fx-accent;
2169 -fx-background-color: -fx-selection-bar;
2170 -fx-text-fill: -fx-selection-bar-text;
2171 }
2172
2173 .table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:selected:hover,
2174 .tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover{
2175 -fx-background: -fx-accent;
2176 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
2177 -fx-background-insets: 0, 1, 2;
2178 -fx-text-fill: -fx-selection-bar-text;
2179 }
2180
2181 /* When the TableView is _not_ focused, we show alternate selection colors */
2182 .table-row-cell:filled:selected:focused,
2183 .table-row-cell:filled:selected,
2184 .tree-table-row-cell:filled:selected:focused,
2185 .tree-table-row-cell:filled:selected {
2186 -fx-background-color: lightgray;
2187 -fx-text-fill: -fx-selection-bar-text;
2188 }
2189
2190 .table-row-cell:selected:disabled,
2191 .tree-table-row-cell:selected:disabled {
2192 -fx-opacity: -fx-disabled-opacity;
2193 }
2194
2195 .table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:hover {
2196 -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color;
2197 -fx-background-insets: 0, 0 0 1 0;
2198 -fx-text-fill: -fx-text-inner-color;
2199 }
2200
2201 .tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover {
2202 /* No 1-pixel bottom border for the TreeTableView (unlike the TableView above) */
2203 -fx-background-color: -fx-cell-hover-color;
2204 -fx-background-insets: 0;
2205 -fx-text-fill: -fx-text-inner-color;
2206 }
2207
2208 .table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:hover,
2209 .tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover {
2210 -fx-background-color: -fx-table-cell-border-color, -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
2211 -fx-background-insets: 0, 0 0 1 0, 1 1 2 1, 2 2 3 2, 3 3 4 3;
2212 -fx-text-fill: -fx-text-inner-color;
2213 }
2214
2215 .table-cell {
2216 -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
2217
2218 -fx-background-color: transparent;
2219 -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
2220 -fx-border-width: 0.083333em; /* 1 */
2221 -fx-cell-size: 2.0em; /* 24 */
2222 -fx-text-fill: -fx-text-inner-color;
2223 }
2224
2225 /* When in constrained resize mode, the right-most visible cell should not have
2226 a right-border, as it is not possible to get this cleanly out of view without
2227 introducing horizontal scrollbars (see RT-14886). */
2228 .table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:last-visible,
2229 .tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible {
2230 -fx-border-color: transparent;
2231 }
2232 .table-view:constrained-resize > .column-header:last-visible,
2233 .tree-table-view:constrained-resize > .column-header:last-visible {
2234 -fx-border-width: 0.083333em 0.0em 0.083333em 0.083333em, 0.083333em 0.0em 0.083333em 0.083333em;
2235 }
2236 .table-view:constrained-resize .filler,
2237 .tree-table-view:constrained-resize .filler {
2238 -fx-border-color:
2239 derive(-fx-base, 80%)
2240 linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%)
2241 derive(-fx-base, 10%)
2242 linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
2243 /* Outer border: */
2244 transparent -fx-table-header-border-color -fx-table-header-border-color -fx-table-header-border-color;
2245 -fx-border-insets: 0 1 1 1, 0 0 0 0;
2246 }
2247
2248 .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused,
2249 .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused {
2250 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
2251 -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
2252 }
2253
2254 .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled .table-cell:focused:selected,
2255 .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled .tree-table-cell:focused:selected {
2256 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
2257 -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
2258 -fx-background: -fx-accent;
2259 -fx-text-fill: -fx-selection-bar-text;
2260 }
2261
2262 .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:selected,
2263 .table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:hover:selected,
2264 .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:selected,
2265 .tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover:selected {
2266 -fx-background: -fx-accent;
2267 -fx-background-color: -fx-selection-bar;
2268 -fx-text-fill: -fx-selection-bar-text;
2269 -fx-background-insets: 0 0 1 0;
2270 }
2271
2272 .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:focused:selected:hover,
2273 .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:selected:hover{
2274 -fx-background: -fx-accent;
2275 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
2276 -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
2277 -fx-text-fill: -fx-selection-bar-text;
2278 }
2279
2280 /* When the TableView is _not_ focused, we show alternate selection colors */
2281 .table-row-cell:filled > .table-cell:selected:focused,
2282 .table-row-cell:filled > .table-cell:selected,
2283 .tree-table-row-cell:filled > .tree-table-cell:selected:focused,
2284 .tree-table-row-cell:filled > .tree-table-cell:selected {
2285 -fx-background-color: lightgray;
2286 -fx-text-fill: -fx-selection-bar-text;
2287 }
2288
2289 .table-cell:selected:disabled,
2290 .tree-table-cell:selected:disabled {
2291 -fx-opacity: -fx-disabled-opacity;
2292 }
2293
2294 /*.table-cell:focused {
2295 -fx-background-color: -fx-focus-color, -fx-control-inner-background;
2296 -fx-background-insets: 0, 1.4;
2297 }*/
2298
2299 .table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:hover,
2300 .tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover {
2301 -fx-background-color: -fx-cell-hover-color;
2302 -fx-text-fill: -fx-text-inner-color;
2303 -fx-background-insets: 0 0 1 0;
2304 }
2305
2306 .table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:focused:hover,
2307 .tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover {
2308 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
2309 -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
2310 -fx-text-fill: -fx-text-inner-color;
2311 }
2312
2313 /* The column-resize-line is shown when the user is attempting to resize a column. */
2314 .table-view .column-resize-line,
2315 .tree-table-view .column-resize-line {
2316 -fx-background: -fx-accent;
2317 -fx-background-color: -fx-selection-bar;
2318 -fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */
2319 }
2320
2321 /* This is the area behind the column headers. An ideal place to specify background
2322 and border colors for the whole area (not individual column-header's). */
2323 .table-view .column-header-background,
2324 .tree-table-view .column-header-background {
2325 -fx-background-color: -fx-body-color;
2326 -fx-padding: 0;
2327 }
2328
2329 /* The column header row is made up of a number of column-header, one for each
2330 TableColumn, and a 'filler' area that extends from the right-most column
2331 to the edge of the tableview, or up to the 'column control' button. */
2332 .table-view .column-header,
2333 .tree-table-view .column-header {
2334 -fx-text-fill: -fx-selection-bar-text;
2335
2336 /* TODO: for some reason, this doesn't scale. */
2337 -fx-font-size: 1.083333em; /* 13pt - 1 more than the default font */
2338 -fx-size: 25;
2339 -fx-border-style: solid;
2340 -fx-border-color:
2341 /*
2342 Inner border: we have different colours along the top, right, bottom and left.
2343 Refer to RT-12298 for the spec.
2344 */
2345 derive(-fx-base, 80%)
2346 linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%)
2347 derive(-fx-base, 10%)
2348 linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
2349 /* Outer border: */
2350 transparent -fx-table-header-border-color -fx-table-header-border-color transparent;
2351 -fx-border-insets: 0 1 1 0, 0 0 0 0;
2352 -fx-border-width: 0.083333em, 0.083333em;
2353 }
2354
2355 .table-view .filler,
2356 .tree-table-view .filler {
2357 -fx-size: 25;
2358 -fx-border-style: solid;
2359 -fx-border-color:
2360 /*
2361 Inner border: we have different colours along the top, right, bottom and left.
2362 Refer to RT-12298 for the spec.
2363 */
2364 derive(-fx-base, 80%)
2365 linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%)
2366 derive(-fx-base, 10%)
2367 linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
2368 /* Outer border: */
2369 transparent transparent -fx-table-header-border-color transparent;
2370 -fx-border-insets: 0 0 1 0, 0 0 0 0;
2371 -fx-border-width: 0.083333em, 0.083333em 0 0.083333em 0.083333em;
2372 }
2373
2374 .table-view .column-header .sort-order-dots-container,
2375 .tree-table-view .column-header .sort-order-dots-container{
2376 -fx-padding: 2 0 2 0;
2377 }
2378
2379 .table-view .column-header .sort-order,
2380 .tree-table-view .column-header .sort-order{
2381 -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
2382 }
2383
2384 .table-view .column-header .sort-order-dot,
2385 .tree-table-view .column-header .sort-order-dot {
2386 -fx-background-color: derive(-fx-mark-highlight-color, 40%), -fx-mark-color;
2387 -fx-padding: 0.0625em 0.104em 0.0625em 0.104em;
2388 }
2389
2390 .table-view .column-header .sort-order-dot.ascending,
2391 .tree-table-view .column-header .sort-order-dot.ascending {
2392 -fx-background-insets: -1 0 1 0, 0;
2393 }
2394
2395 .table-view .column-header .sort-order-dot.descending,
2396 .tree-table-view .column-header .sort-order-dot.descending {
2397 -fx-background-insets: 1 0 -1 0, 0;
2398 }
2399
2400 .table-view .column-header .label,
2401 .tree-table-view .column-header .label {
2402 -fx-alignment: center;
2403 }
2404
2405 .table-view > .column-header-background > .show-hide-columns-button,
2406 .tree-table-view > .column-header-background > .show-hide-columns-button{
2407 -fx-background-color: -fx-body-color;
2408
2409 -fx-border-color:
2410 /* inner border: A copy of the inner border used above in the general column header area. */
2411 derive(-fx-base, 80%)
2412 linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
2413 derive(-fx-base, 10%)
2414 linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
2415 /* outer border: Slightly different to the above*/
2416 transparent transparent -fx-table-header-border-color -fx-table-header-border-color;
2417 -fx-border-insets: 0 0 0 1, 0 0 0 0;
2418 }
2419
2420 .table-view .show-hide-column-image,
2421 .tree-table-view .show-hide-column-image {
2422 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
2423 -fx-background-insets: 1 0 -1 0, 0;
2424
2425 -fx-padding: 0.25em; /* 3px */
2426 -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";
2427 }
2428
2429 /*.nested-column-header .column-header {
2430 -fx-background-color: transparent;
2431 }*/
2432
2433 /* When a column is being 'dragged' to be placed in a different position, there
2434 is a region that follows along the column header area to indicate where the
2435 column will be dropped. This region can be styled using the .column-drag-header
2436 name. */
2437 .table-view .column-drag-header,
2438 .tree-table-view .column-drag-header {
2439 -fx-background: -fx-accent;
2440 -fx-background-color: -fx-selection-bar;
2441 -fx-border-color: transparent;
2442 -fx-opacity: 0.6;
2443 }
2444
2445 /* Semi-transparent overlay to indicate the column that is currently being moved */
2446 .table-view .column-overlay,
2447 .tree-table-view .column-overlay {
2448 -fx-background-color: darkgray;
2449 -fx-opacity: 0.3;
2450 }
2451
2452 .table-view /*> column-header-background > nested-column-header >*/ .arrow,
2453 .tree-table-view /*> column-header-background > nested-column-header >*/ .arrow {
2454 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
2455 -fx-background-insets: 1 0 -1 0, 0;
2456 -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
2457 -fx-shape: "M 0 0 h 7 l -3.5 4 z";
2458 }
2459
2460 /* This is shown when the table has no rows and/or no columns. */
2461 .table-view .empty-table,
2462 .tree-table-view .empty-table {
2463 -fx-background-color: white;
2464 -fx-font-size: 1.166667em; /* 14pt - 2 more than the default font */
2465 }
2466
2467 /*******************************************************************************
2468 * *
2469 * TitledPane *
2470 * *
2471 ******************************************************************************/
2472
2473 .titled-pane {
2474 -fx-text-fill: -fx-text-base-color;
2475 }
2476
2477 .titled-pane:focused {
2478 -fx-text-fill: white;
2479 }
2480
2481 .titled-pane > .title {
2482 -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color;
2483 -fx-background-insets: 0, 1, 2;
2484 -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
2485 -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */
2486 }
2487
2488 .titled-pane:focused > .title {
2489 -fx-color: -fx-focus-color;
2490 }
2491
2492 .titled-pane > .title > .arrow-button {
2493 -fx-background-color: null;
2494 -fx-background-insets: 0;
2495 -fx-background-radius: 0;
2496 -fx-padding: 0.0em 0.25em 0.0em 0.0em; /* 0 3 0 0 */
2497 }
2498
2499 .titled-pane > .title > .arrow-button > .arrow {
2500 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
2501 -fx-background-insets: 1 0 -1 0, 0;
2502 -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
2503 -fx-shape: "M 0 0 h 7 l -3.5 4 z";
2504 }
2505
2506 .titled-pane > *.content {
2507 -fx-background-color:
2508 -fx-box-border,
2509 linear-gradient(to bottom, derive(-fx-color,-02%), derive(-fx-color,65%) 12%, derive(-fx-color,23%) 88%, derive(-fx-color,50%) 99%, -fx-box-border);
2510 -fx-background-insets: 0, 0 1 1 1;
2511 -fx-padding: 0.167em;
2512 }
2513
2514 .titled-pane:focused > .title > .arrow-button > .arrow {
2515 -fx-background-color: white;
2516 }
2517
2518
2519 /*******************************************************************************
2520 * *
2521 * Accordion *
2522 * *
2523 ******************************************************************************/
2524
2525 .accordion > .titled-pane > .title {
2526 -fx-background-color:
2527 -fx-box-border,
2528 -fx-inner-border,
2529 -fx-body-color;
2530 -fx-background-insets: -1 0 0 0, 0 1 1 1, 1 2 2 2;
2531 -fx-background-radius: 0, 0, 0;
2532 }
2533
2534 .accordion > .first-titled-pane > .title {
2535 -fx-background-insets: 0, 1, 2;
2536 }
2537
2538 .accordion > .titled-pane:focused > .title {
2539 -fx-color: -fx-focus-color;
2540 }
2541
2542 .accordion > .titled-pane:focused {
2543 -fx-text-fill: white;
2544 }
2545
2546 .accordion > .titled-pane:focused > .title > .arrow-button > .arrow {
2547 -fx-background-color: white;
2548 }
2549
2550 .accordion > .titled-pane:focused > .titled-pane:collapsed > .title > .arrow-button > .arrow {
2551 -fx-background-color: white;
2552 }
2553
2554 .accordion > .titled-pane:collapsed:focused > .title {
2555 -fx-color: -fx-focus-color;
2556 }
2557
2558 .accordion > .titled-pane:expanded:focused > .title {
2559 -fx-color: -fx-focus-color;
2560 }
2561
2562 .accordion > .titled-pane:hover > .title {
2563 -fx-color: -fx-hover-base;
2564 }
2565
2566 /*******************************************************************************
2567 * *
2568 * SplitPane *
2569 * *
2570 ******************************************************************************/
2571
2572 .tab-pane > * > .tab-pane,
2573 .tab-pane > * > .table-view,
2574 .tab-pane > * > .list-view,
2575 .tab-pane > * > .tree-view,
2576 .tab-pane > * > .scroll-pane,
2577 .tab-pane > * > .split-pane,
2578 .split-pane > * > .tab-pane,
2579 .split-pane > * > .table-view,
2580 .split-pane > * > .list-view,
2581 .split-pane > * > .tree-view,
2582 .split-pane > * > .scroll-pane,
2583 .split-pane > * > .split-pane {
2584 -fx-background-insets: 0, 0;
2585 -fx-padding: 0;
2586 }
2587
2588 .split-pane {
2589 -fx-background-color: -fx-box-border, -fx-control-inner-background;
2590 -fx-background-insets: 0, 1;
2591 -fx-padding: 1;
2592 }
2593
2594 .split-pane > .split-pane-divider {
2595 -fx-padding: 0 2 0 2; /* 0 3 0 3 */
2596 }
2597
2598 /* horizontal the two nodes are placed to the left/right of each other. */
2599 .split-pane:horizontal > .split-pane-divider {
2600 -fx-border-color: transparent -fx-box-border transparent #BBBBBB;
2601 -fx-background-color: transparent, -fx-inner-border-horizontal;
2602 -fx-background-insets: 0, 0 1 0 1;
2603 }
2604
2605 /* vertical the two nodes are placed on top of each other. */
2606 .split-pane:vertical > .split-pane-divider {
2607 -fx-border-color: #BBBBBB transparent -fx-box-border transparent;
2608 -fx-background-color: transparent, -fx-inner-border;
2609 -fx-background-insets: 0, 1 0 1 0;
2610 }
2611
2612 .split-pane > .split-pane-divider > .horizontal-grabber {
2613 -fx-padding: 5 1 5 1;
2614 -fx-background-color: #FFFFFF, -fx-box-border;
2615 -fx-background-insets: 1 0 -1 0, 0;
2616 -fx-shape: "M0 0 L0 0 L2 0 L2 2 L0 2 Z M0 4 L0 4 L2 4 L2 6 L0 6 Z M0 8 L0 8 L2 8 L2 10 L0 10 Z";
2617 }
2618
2619 .split-pane > .split-pane-divider > .vertical-grabber {
2620 -fx-padding: 1 5 1 5;
2621 -fx-background-color: #FFFFFF, -fx-box-border;
2622 -fx-background-insets: 1 0 -1 0, 0;
2623 -fx-shape: "M0 0 L0 0 L2 0 L2 2 L0 2 Z M4 0 L4 0 L4 2 L6 2 L6 0 Z M8 0 L8 0 L8 2 L10 2 L10 0 Z";
2624 }
2625
2626 /*******************************************************************************
2627 * *
2628 * TabPane *
2629 * *
2630 ******************************************************************************/
2631
2632 .tab-pane {
2633 /* -fx-tab-min-width: 4.583em; 55 */
2634 /* -fx-tab-max-width: 4.583em; 55 */
2635 -fx-tab-min-height: 1.75em; /* 21 */
2636 -fx-tab-max-height: 1.75em; /* 21 */
2637 }
2638
2639 .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
2640 -fx-background-color: transparent;
2641 -fx-alignment: CENTER;
2642 -fx-text-fill: -fx-text-base-color;
2643 }
2644 /*
2645 .tab *.tab-label Text {
2646 -fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
2647 }*/
2648
2649 .tab-pane > .tab-content-area {
2650 -fx-background-color: -fx-control-inner-background;
2651 -fx-padding: 0.0em; /* 0 */
2652 /* -fx-opacity: -fx-disabled-opacity;*/
2653 }
2654
2655 .tab-pane > .tab-header-area > .headers-region > .tab {
2656 /* This is how it is done in Button, but the -1 inset caused a white line */
2657 /* to appear beneath the tab, which looks bad, so it's taken out below. */
2658 /* -fx-background-color: -fx-shadow-highlight-color, -fx-tab-border-color, -fx-inner-border, -fx-body-color;
2659 -fx-background-radius: 5 5 0 0, 5 5 0 0, 4 4 0 0, 3 3 0 0;
2660 -fx-background-insets: 0 0 -1 0, 0, 1, 2;*/
2661 /*-fx-background-insets: 0, 1, 2;*/
2662 -fx-background-insets: 0 1 1 0, 1 2 1 1, 2 3 1 2;
2663 -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
2664 -fx-padding: 0.083333em 0.5em 0.083333em 0.5em; /* 1 6 1 6 */
2665 /* -fx-text-fill: -fx-text-base-color;*/
2666 }
2667
2668 .tab-pane > .tab-header-area > .headers-region > .tab:top {
2669 -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
2670 }
2671
2672 .tab-pane > .tab-header-area > .headers-region > .tab:right {
2673 -fx-background-color: -fx-tab-border-color, -fx-inner-border-bottomup, -fx-body-color-bottomup;
2674 }
2675
2676 .tab-pane > .tab-header-area > .headers-region > .tab:bottom {
2677 -fx-background-color: -fx-tab-border-color, -fx-inner-border-bottomup, -fx-body-color-bottomup;
2678 }
2679
2680 .tab-pane > .tab-header-area > .headers-region > .tab:left {
2681 -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
2682 }
2683
2684 .tab-pane > .tab-header-area > .headers-region > .tab:hover {
2685 -fx-color: -fx-hover-base;
2686 }
2687
2688 .tab-pane > .tab-header-area > .headers-region > .tab:selected {
2689 /* -fx-background-color: white;*/
2690
2691 /* -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
2692 -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
2693 -fx-background-insets: 0, 1 1 0 1, 2 2 0 2;*/
2694 -fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
2695 -fx-background-insets: 0 1 0 0, 1 2 0 1;
2696 -fx-background-radius: 5 5 0 0, 4 4 0 0;
2697 }
2698
2699 .tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
2700 -fx-border-style: segments(0.166667em, 0.166667em);
2701 -fx-border-width: 1;
2702 -fx-border-color: -fx-focus-color;
2703 }
2704
2705 .tab-pane > .tab-header-area > .headers-region > .tab:disabled {
2706 -fx-opacity: -fx-disabled-opacity;
2707 }
2708
2709 .tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover {
2710 -fx-color: -fx-base;
2711 -fx-opacity: -fx-disabled-opacity;
2712 }
2713
2714 .tab-pane > .tab-header-area > .tab-header-background {
2715 -fx-background-color: -fx-outer-border, -fx-inner-border, derive(-fx-color, -20%);
2716 -fx-effect: innershadow(two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 0);
2717 }
2718
2719 /*.tab-pane *.tab-header-area {*/
2720 /* I would like to use -fx-tab-border-color here, but for some reason it */
2721 /* just isn't the correct color, even though it works in :top above */
2722 /* -fx-background-color: -fx-tab-border-color, lightgray;*/
2723 /*}*/
2724
2725 .tab-pane:top > .tab-header-area {
2726 -fx-background-insets: 0, 0 0 1 0;
2727 -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
2728 }
2729
2730 .tab-pane:bottom > .tab-header-area {
2731 -fx-background-insets: 0, 1 0 0 0;
2732 -fx-padding: 0 0.166667em 0.416667em 0.833em; /* 0 2 5 0 */
2733 }
2734
2735 .tab-pane:left > .tab-header-area {
2736 -fx-background-insets: 0, 0 1 0 0;
2737 -fx-padding: 0.833em 0.0em 0.166667em 0.416667em; /* 10 0 2 5 */
2738 }
2739
2740 .tab-pane:right > .tab-header-area {
2741 -fx-background-insets: 0, 0 0 0 1;
2742 -fx-padding: 0.833em 0.416667em 0.166667em 0.0em; /* 10 5 2 0 */
2743 }
2744
2745 /* TODO: scaling the shape seems to make it way too large */
2746 .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button {
2747 -fx-background-color: -fx-mark-color;
2748 -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";
2749 -fx-scale-shape: false;
2750 -fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
2751 }
2752
2753 .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button:hover {
2754 -fx-background-color: derive(-fx-mark-color, -30%);
2755 }
2756
2757 /* CONTROL BUTTONS */
2758 .tab-pane > .tab-header-area > .control-buttons-tab {
2759 -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
2760 -fx-background-insets: 0, 1, 2;
2761 -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
2762 -fx-padding: 0.083333em 0.25em 0.083333em 0.25em; /* 1 3 1 3 */
2763 }
2764
2765 .tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
2766 -fx-background-color: transparent;
2767 -fx-padding: 0.0em 0.416667em 0.0em 0.416667em; /* 0 5 0 5 */
2768 }
2769
2770 .tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover {
2771 -fx-background-color: -fx-body-color;
2772 -fx-color: -fx-hover-base;
2773 }
2774
2775 .tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button .arrow {
2776 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
2777 -fx-background-insets: 1 0 -1 0, 0;
2778 -fx-padding: 0.238083em 0.416667em 0.238083em 0.416667em; /* 2.857 5 2.857 5 */
2779 -fx-shape: "M 0 0 H 7 L 3.5 4 z";
2780 }
2781
2782 /* FLOATING TABS CUSTOMISATION */
2783 .tab-pane.floating > .tab-header-area > .tab-header-background {
2784 -fx-background-color: null;
2785 }
2786
2787 .tab-pane.floating > .tab-header-area {
2788 -fx-background-color: null;
2789 }
2790
2791 .tab-pane.floating > .tab-content-area {
2792 -fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
2793 -fx-background-insets: 0, 1;
2794 -fx-background-radius: 5, 4;
2795 -fx-padding: 2;
2796 }
2797
2798 .tab-pane.floating > .tab-header-area > .headers-region > .tab {
2799 -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
2800 -fx-background-insets: 0 1 1 0, 1 2 1 1, 2 3 1 2;
2801 -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
2802 }
2803
2804 .tab-pane.floating > .tab-header-area > .headers-region > .tab:selected {
2805 -fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
2806 -fx-background-insets: 0 1 -1 0, 1 2 -1 1;
2807 -fx-background-radius: 5 5 0 0, 4 4 0 0;
2808 }
2809
2810 /*.tab-pane:floating *.control-buttons-tab {
2811 -fx-padding: 0.083333em 0.25em 0.083333em 0.25em;
2812 -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
2813 -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
2814 -fx-background-insets: 0, 1 1 0 1, 2 2 0 2;
2815 }*/
2816
2817
2818
2819
2820 /* ====== CHART TOP LEVEL ITEMS =========================================================== */
2821 .chart {
2822 -fx-padding: 5px;
2823 }
2824 .chart-content {
2825 -fx-padding: 10px;
2826 }
2827 .chart-title {
2828 -fx-font-size: 1.4em;
2829 }
2830 .chart-legend {
2831 -fx-background-color: ladder(-fx-background, derive(-fx-box-border, -10%) 50%, derive(-fx-box-border, 10%) 51%),
2832 ladder(-fx-background, derive(-fx-control-inner-background, 5%) 50%, derive(-fx-control-inner-background, -5%) 51%);
2833 -fx-background-insets: 0,1;
2834 -fx-background-radius: 6,5;
2835 -fx-padding: 6px;
2836 }
2837
2838 /* ====== AXIS ============================================================================ */
2839 .axis {
2840 -fx-tick-label-font-size: 0.833333em; /* 10 pix */
2841 -fx-tick-label-fill: -fx-text-background-color;
2842 }
2843 .axis:top {
2844 -fx-border-color: transparent transparent #666666 transparent;
2845 }
2846 .axis:right {
2847 -fx-border-color: transparent transparent transparent #666666;
2848 }
2849 .axis:bottom {
2850 -fx-border-color: #666666 transparent transparent transparent;
2851 }
2852 .axis:left {
2853 -fx-border-color: transparent #666666 transparent transparent;
2854 }
2855 .axis-tick-mark {
2856 -fx-fill: null;
2857 -fx-stroke: #666666;
2858 }
2859 .axis-minor-tick-mark {
2860 -fx-fill: null;
2861 -fx-stroke: #AAAAAA;
2862 }
2863
2864 .axis .text {
2865 -fx-font-smoothing-type: lcd;
2866 }
2867
2868 /* ====== CHART PLOT BACKGROUND =========================================================== */
2869 .chart-plot-background {
2870 -fx-background-color: #f5f5f5;
2871 }
2872 .chart-vertical-grid-lines {
2873 -fx-stroke: #dddddd;
2874 }
2875 .chart-horizontal-grid-lines {
2876 -fx-stroke: #dddddd;
2877 }
2878 .chart-alternative-column-fill {
2879 -fx-fill: #eeeeee;
2880 -fx-stroke: transparent;
2881 -fx-stroke-width: 0;
2882 }
2883 .chart-alternative-row-fill {
2884 -fx-fill: #eeeeee;
2885 -fx-stroke: transparent;
2886 -fx-stroke-width: 0;
2887 }
2888 .chart-vertical-zero-line {
2889 -fx-stroke: #999999;
2890 }
2891 .chart-horizontal-zero-line {
2892 -fx-stroke: #999999;
2893 }
2894 /* ====== SCATTER CHART =========================================================== */
2895 .chart-symbol { /* solid circle */
2896 -fx-background-color: #f9d900;
2897 -fx-background-radius: 5px;
2898 -fx-padding: 5px;
2899 }
2900 .default-color1.chart-symbol { /* solid square */
2901 -fx-background-color: #a9e200;
2902 -fx-background-radius: 0;
2903 }
2904 .default-color2.chart-symbol { /* solid diamond */
2905 -fx-background-color: #22bad9;
2906 -fx-background-radius: 0;
2907 -fx-padding: 7px 5px 7px 5px;
2908 -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
2909 }
2910 .default-color3.chart-symbol { /* cross */
2911 -fx-background-color: #0181e2;
2912 -fx-background-radius: 0;
2913 -fx-background-insets: 0;
2914 -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";
2915 }
2916 .default-color4.chart-symbol { /* solid triangle */
2917 -fx-background-color: #2f357f;
2918 -fx-background-radius: 0;
2919 -fx-background-insets: 0;
2920 -fx-shape: "M5,0 L10,8 L0,8 Z";
2921 }
2922 .default-color5.chart-symbol { /* hollow circle */
2923 -fx-background-color: #860061, white;
2924 -fx-background-insets: 0, 2;
2925 -fx-background-radius: 5px;
2926 -fx-padding: 5px;
2927 }
2928 .default-color6.chart-symbol { /* hollow square */
2929 -fx-background-color: #c62b00, white;
2930 -fx-background-insets: 0, 2;
2931 -fx-background-radius: 0;
2932 }
2933 .default-color7.chart-symbol { /* hollow diamond */
2934 -fx-background-color: #ff5700, white;
2935 -fx-background-radius: 0;
2936 -fx-background-insets: 0, 2.5;
2937 -fx-padding: 7px 5px 7px 5px;
2938 -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
2939 }
2940
2941 /* ====== LINE CHART =========================================================== */
2942 .chart-line-symbol {
2943 -fx-background-color: #f9d900, white;
2944 -fx-background-insets: 0, 2;
2945 -fx-background-radius: 5px;
2946 -fx-padding: 5px;
2947 }
2948 .chart-series-line {
2949 -fx-stroke: #f9d900;
2950 -fx-stroke-width: 4px;
2951 -fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.3) , 8, 0.0 , 0 , 3 );
2952 }
2953 .default-color0.chart-line-symbol { -fx-background-color: #f9d900, white; }
2954 .default-color1.chart-line-symbol { -fx-background-color: #a9e200, white; }
2955 .default-color2.chart-line-symbol { -fx-background-color: #22bad9, white; }
2956 .default-color3.chart-line-symbol { -fx-background-color: #0181e2, white; }
2957 .default-color4.chart-line-symbol { -fx-background-color: #2f357f, white; }
2958 .default-color5.chart-line-symbol { -fx-background-color: #860061, white; }
2959 .default-color6.chart-line-symbol { -fx-background-color: #c62b00, white; }
2960 .default-color7.chart-line-symbol { -fx-background-color: #ff5700, white; }
2961 .default-color0.chart-series-line { -fx-stroke: #f9d900; }
2962 .default-color1.chart-series-line { -fx-stroke: #a9e200; }
2963 .default-color2.chart-series-line { -fx-stroke: #22bad9; }
2964 .default-color3.chart-series-line { -fx-stroke: #0181e2; }
2965 .default-color4.chart-series-line { -fx-stroke: #2f357f; }
2966 .default-color5.chart-series-line { -fx-stroke: #860061; }
2967 .default-color6.chart-series-line { -fx-stroke: #c62b00; }
2968 .default-color7.chart-series-line { -fx-stroke: #ff5700; }
2969
2970 /* ====== AREA CHART =========================================================== */
2971 .chart-area-symbol {
2972 -fx-background-color: #f9d900, white;
2973 -fx-background-insets: 0, 1;
2974 -fx-background-radius: 4px; /* makes sure this remains circular */
2975 -fx-padding: 3px;
2976 }
2977 .default-color0.chart-area-symbol { -fx-background-color: #f9d900, white; }
2978 .default-color1.chart-area-symbol { -fx-background-color: #a9e200, white; }
2979 .default-color2.chart-area-symbol { -fx-background-color: #22bad9, white; }
2980 .default-color3.chart-area-symbol { -fx-background-color: #0181e2, white; }
2981 .default-color4.chart-area-symbol { -fx-background-color: #2f357f, white; }
2982 .default-color5.chart-area-symbol { -fx-background-color: #860061, white; }
2983 .default-color6.chart-area-symbol { -fx-background-color: #c62b00, white; }
2984 .default-color7.chart-area-symbol { -fx-background-color: #ff5700, white; }
2985 .chart-series-area-line {
2986 -fx-stroke: #f9d900;
2987 -fx-stroke-width: 1px;
2988 }
2989 .default-color0.chart-series-area-line { -fx-stroke: #c2a902; }
2990 .default-color1.chart-series-area-line { -fx-stroke: #88b501; }
2991 .default-color2.chart-series-area-line { -fx-stroke: #22bad9; }
2992 .default-color3.chart-series-area-line { -fx-stroke: #0181e2; }
2993 .default-color4.chart-series-area-line { -fx-stroke: #2f357f; }
2994 .default-color5.chart-series-area-line { -fx-stroke: #860061; }
2995 .default-color6.chart-series-area-line { -fx-stroke: #c62b00; }
2996 .default-color7.chart-series-area-line { -fx-stroke: #ff5700; }
2997 .chart-series-area-fill {
2998 -fx-stroke: null;
2999 -fx-fill: #f9d90044;
3000 }
3001 .default-color0.chart-series-area-fill { -fx-fill: #f9d90044; }
3002 .default-color1.chart-series-area-fill { -fx-fill: #a9e20044; }
3003 .default-color2.chart-series-area-fill { -fx-fill: #22bad944; }
3004 .default-color3.chart-series-area-fill { -fx-fill: #0181e244; }
3005 .default-color4.chart-series-area-fill { -fx-fill: #2f357f44; }
3006 .default-color5.chart-series-area-fill { -fx-fill: #86006144; }
3007 .default-color6.chart-series-area-fill { -fx-fill: #c62b0044; }
3008 .default-color7.chart-series-area-fill { -fx-fill: #ff570044; }
3009 .area-legend-symbol {
3010 -fx-padding: 6px;
3011 -fx-background-radius: 6px; /* makes sure this remains circular */
3012 -fx-background-insets: 0, 3;
3013 }
3014 /* ====== BUBBLE CHART =========================================================== */
3015 .bubble-legend-symbol {
3016 -fx-background-radius: 8px;
3017 -fx-padding: 8px;
3018 }
3019 .chart-bubble {
3020 -fx-bubble-fill: #f9d900;
3021 -fx-background-color: radial-gradient(center 50% 50%, radius 80%, derive(-fx-bubble-fill,20%), derive(-fx-bubble-fill,-30%));
3022 }
3023 .default-color0.chart-bubble { -fx-bubble-fill: #f9d900aa; }
3024 .default-color1.chart-bubble { -fx-bubble-fill: #a9e200aa; }
3025 .default-color2.chart-bubble { -fx-bubble-fill: #22bad9aa; }
3026 .default-color3.chart-bubble { -fx-bubble-fill: #0181e2aa; }
3027 .default-color4.chart-bubble { -fx-bubble-fill: #2f357faa; }
3028 .default-color5.chart-bubble { -fx-bubble-fill: #860061aa; }
3029 .default-color6.chart-bubble { -fx-bubble-fill: #c62b00aa; }
3030 .default-color7.chart-bubble { -fx-bubble-fill: #ff5700aa; }
3031
3032 /* ====== BAR CHART =========================================================== */
3033 /* TODO flip gradient vertical for negative bars */
3034 .chart-bar {
3035 -fx-bar-fill: #22bad9;
3036 -fx-background-color: linear-gradient(derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)),
3037 linear-gradient(derive(-fx-bar-fill,80%), derive(-fx-bar-fill, 0%)),
3038 linear-gradient(derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%));
3039 -fx-background-insets: 0,1,2;
3040 -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
3041 }
3042
3043 .negative.chart-bar {
3044 -fx-background-color: linear-gradient(to top, derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)),
3045 linear-gradient(to top, derive(-fx-bar-fill, 80%), derive(-fx-bar-fill,0%)),
3046 linear-gradient(to top, derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%));
3047 -fx-background-radius: 0 0 5 5, 0 0 4 4, 0 0 3 3;
3048 }
3049 .bar-chart:horizontal .chart-bar, .stacked-bar-chart:horizontal .chart-bar {
3050 -fx-background-color: linear-gradient(to left, derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)),
3051 linear-gradient(to left, derive(-fx-bar-fill,80%), derive(-fx-bar-fill, 0%)),
3052 linear-gradient(to left, derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%));
3053 -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
3054 }
3055 .bar-chart:horizontal .negative.chart-bar, .stacked-bar-chart:horizontal .negative.chart-bar {
3056 -fx-background-color: linear-gradient(to right, derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)),
3057 linear-gradient(to right, derive(-fx-bar-fill, 80%), derive(-fx-bar-fill, 0%)),
3058 linear-gradient(to right, derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%));
3059 -fx-background-radius: 5 0 0 5, 4 0 0 4, 3 0 0 3;
3060 }
3061 .default-color0.chart-bar { -fx-bar-fill: #f9d900; }
3062 .default-color1.chart-bar { -fx-bar-fill: #a9e200; }
3063 .default-color2.chart-bar { -fx-bar-fill: #22bad9; }
3064 .default-color3.chart-bar { -fx-bar-fill: #0181e2; }
3065 .default-color4.chart-bar { -fx-bar-fill: #2f357f; }
3066 .default-color5.chart-bar { -fx-bar-fill: #860061; }
3067 .default-color6.chart-bar { -fx-bar-fill: #c62b00; }
3068 .default-color7.chart-bar { -fx-bar-fill: #ff5700; }
3069 .bar-legend-symbol {
3070 -fx-padding: 8px;
3071 }
3072 /* ====== PIE CHART ============================================================== */
3073 .chart-pie {
3074 -fx-pie-color: #2f357f;
3075 -fx-background-color: radial-gradient(radius 100%, derive(-fx-pie-color,55%), derive(-fx-pie-color,-20%));
3076 -fx-background-insets: 0;
3077 -fx-border-color: derive(-fx-pie-color,-30%);
3078 }
3079 .chart-pie-label {
3080 -fx-padding: 3px;
3081 -fx-fill: -fx-text-base-color;
3082 }
3083 .chart-pie-label-line {
3084 -fx-stroke: #aaaaaa;
3085 -fx-fill: #aaaaaa;
3086 }
3087 .default-color0.chart-pie { -fx-pie-color: #f9d900; }
3088 .default-color1.chart-pie { -fx-pie-color: #a9e200; }
3089 .default-color2.chart-pie { -fx-pie-color: #22bad9; }
3090 .default-color3.chart-pie { -fx-pie-color: #0181e2; }
3091 .default-color4.chart-pie { -fx-pie-color: #2f357f; }
3092 .default-color5.chart-pie { -fx-pie-color: #860061; }
3093 .default-color6.chart-pie { -fx-pie-color: #c62b00; }
3094 .default-color7.chart-pie { -fx-pie-color: #ff5700; }
3095 .negative.chart-pie {
3096 -fx-pie-color: transparent;
3097 -fx-background-color: white;
3098 }
3099 .pie-legend-symbol.chart-pie {
3100 -fx-background-radius: 8px;
3101 -fx-padding: 8px;
3102 -fx-border-color: null;
3103 }
3104
3105 /* -------------- CODE FOR THE NON-EDITABLE COMBO-BOX -------------- */
3106
3107 /* ------- MAIN BUTTON ------- */
3108 .combo-box-base {
3109 -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
3110 -fx-background-radius: 5, 5, 4, 3;
3111 -fx-background-insets: 0 0 -1 0, 0, 1, 2;
3112 -fx-padding: 0;
3113 }
3114
3115 .combo-box-base:hover {
3116 -fx-color: -fx-hover-base;
3117 }
3118
3119 /*------- THIS SPECIFIES THE BUTTON COLOR WHEN THE POPUP MENU IS SHOWING -------*/
3120 .combo-box-base:showing {
3121 -fx-color: -fx-pressed-base;
3122 }
3123
3124 .combo-box-base:focused {
3125 -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
3126 -fx-background-radius: 6.4, 4, 5, 3;
3127 -fx-background-insets: -1.4, 0, 1, 2;
3128 }
3129
3130 .combo-box-base:disabled {
3131 -fx-opacity: .4;
3132 }
3133
3134 /* ------- OPEN BUTTON ------- */
3135 .combo-box-base > .arrow-button {
3136 -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
3137 -fx-background-insets: 0, 1, 2;
3138 -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
3139 -fx-padding: 0 0.667em 0 0.667em; /* 6 8 6 8 */
3140 /*-fx-padding: 0; *//* 6 8 6 8 */
3141 }
3142
3143 .combo-box-base:hover > .arrow-button,
3144 .date-picker:hover > .arrow-button {
3145 -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
3146 -fx-background-insets: 0, 1, 2;
3147 -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
3148 }
3149
3150 .combo-box-base:showing > .arrow-button,
3151 .date-picker:showing > .arrow-button {
3152 -fx-color: -fx-pressed-base;
3153 }
3154
3155 /* ------- ARROW* ------- */
3156 .combo-box-base > .arrow-button > .arrow,
3157 .web-view .form-select-button .arrow {
3158 -fx-background-insets: 1 0 -1 0, 0;
3159 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
3160 -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
3161 -fx-shape: "M 0 0 h 7 l -3.5 4 z";
3162 }
3163
3164 .web-view .form-select-button {
3165 -fx-background-radius: 2, 2, 1, 0;
3166 -fx-background-insets: 2 2 1 2, 2, 3, 4;
3167 }
3168
3169 /* ------- POPUP MENU ------- */
3170 /* --- .combo-box .popup-menu, .combo-box .menu-item, .combo-box .popup-menu .menu-item-radio
3171 all inherit from Menu Control's popup-menu. --- */
3172
3173
3174 /* -------------- CODE FOR THE EDITABLE COMBO-BOX -------------- */
3175
3176 /* ------- TEXTBOX SEGMENT OF COMBO BOX ------- */
3177 /*--- The editable ComboBox TextBox inherits its properties from the TextBox Control.
3178 Only the properties with values that are different from the TextBox are specified here. ---*/
3179
3180 .combo-box-base:editable > .text-field,
3181 .date-picker > .text-field {
3182 -fx-padding: 0.166667em 0.416667em 0.25em 0.416667em; /* 2 5 3 5 */
3183 /*-fx-padding: 0px;*/
3184 /*-fx-background-color: yellow;*/
3185 -fx-background-radius: 4 0 0 4, 3 0 0 3, 2 0 0 2;
3186 -fx-background-insets: 0 0 -1 0, 0, 1 0 1 1;
3187 }
3188
3189 .combo-box-base:editable:contains-focus,
3190 .date-picker:contains-focus {
3191 -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-control-inner-background;
3192 -fx-background-radius: 5.4, 3, 2;
3193 -fx-background-insets: -1.4, 0, 1;
3194 }
3195
3196 /* -------------- STYLES FOR THE DEFAULT LISTVIEW-BASED COMBOBOX ------------- */
3197
3198 /* Customise the ListCell that appears in the ComboBox button itself */
3199 .combo-box > .list-cell {
3200 -fx-background: transparent;
3201 -fx-background-color: transparent;
3202 -fx-text-fill: -fx-text-base-color;
3203 -fx-padding: 0.25em 0 0.166667em 0.583333em; /* 3 0 2 7 */
3204 -fx-cell-size: 1.7500em; /* 21 */
3205 }
3206
3207 .combo-box-popup > .list-view {
3208 -fx-background-color: -fx-box-border, -fx-control-inner-background;
3209 -fx-background-insets: 0, 1;
3210 -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
3211 }
3212
3213 .combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
3214 -fx-padding: 4 0 4 5;
3215
3216 /* No alternate highlighting */
3217 -fx-background-color: -fx-control-inner-background;
3218 }
3219
3220 .combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
3221 .combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
3222 -fx-background: -fx-accent;
3223 -fx-background-color: -fx-selection-bar;
3224 -fx-text-fill: -fx-selection-bar-text;
3225 }
3226
3227 .combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover {
3228 -fx-background-color: -fx-cell-hover-color;
3229 -fx-text-fill: -fx-text-inner-color;
3230 }
3231
3232 .combo-box-popup > .list-view > .placeholder > .label {
3233 -fx-text-fill: derive(-fx-control-inner-background,-30%);
3234 }
3235
3236 /* -------------------------- STYLES FOR THE COLOR-PICKER CONTROL ----- */
3237
3238 .color-picker {
3239 -fx-color-rect-width: 0.916667em; /* 11px */
3240 -fx-color-rect-height: 0.916667em; /* 11px */
3241 }
3242 .color-picker > .arrow-button {
3243 -fx-background-color: null;
3244 -fx-background-insets: 0, 1, 2;
3245 -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
3246 }
3247
3248 .combo-box-base.color-picker.split-button > .arrow-button {
3249 -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
3250 -fx-background-insets: 0, 1, 2;
3251 -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
3252 -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */
3253 }
3254
3255 .color-picker:hover {
3256 -fx-color: -fx-base;
3257 }
3258
3259 /** Fix for RT-35422 where border was being shown incorrectly on non-split-buttons */
3260 .combo-box-base.color-picker:hover > .arrow-button {
3261 -fx-background-insets: 0, 1 1 1 0, 2 2 2 0;
3262 }
3263
3264 .color-picker.button {
3265 -fx-padding: 0 5 0 0;
3266 }
3267
3268 .color-picker.button > .arrow-button {
3269 -fx-background-color: -fx-inner-border, -fx-body-color;
3270 -fx-background-insets: 0, 1;
3271 -fx-background-radius: 0 5 5 0, 0 4 4 0;
3272 }
3273
3274 .color-picker > .split-button > .arrow-button:hover {
3275 -fx-color: -fx-hover-base;
3276 }
3277
3278 .color-picker > .split-button > .color-picker-label:hover {
3279 -fx-color: -fx-hover-base;
3280 }
3281
3282 .color-picker > .color-picker-label > .picker-color {
3283 -fx-padding: 0.416667em 0.333333em 0.416667em 0.333333em; /* 5 4 5 4 */
3284 -fx-background-color: null;
3285 }
3286
3287 .color-picker > .color-picker-label > .picker-color > .picker-color-rect {
3288 -fx-stroke: -fx-pressed-base;
3289 -fx-stroke-type: inside;
3290 }
3291
3292 .color-palette {
3293 -fx-spacing: 15px;
3294 -fx-background-color:
3295 derive(-fx-color,-40%),
3296 derive(-fx-color,100%),
3297 linear-gradient(to bottom,
3298 derive(-fx-color,100%) 0%,
3299 derive(-fx-color,50%) 12%,
3300 derive(-fx-color,65%) 88%,
3301 derive(-fx-color,23%) 100%);
3302 -fx-background-insets: 0, 1, 2;
3303 -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
3304 -fx-padding: 15 15 15 15;
3305 -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
3306 }
3307
3308 .color-palette > .color-picker-grid > .color-square > .color-rect {
3309 -fx-stroke: black;
3310 -fx-stroke-width: 0.4;
3311 -fx-border-color: black;
3312 }
3313
3314 .color-palette > .color-picker-grid {
3315 -fx-border-color: transparent;
3316 }
3317
3318 .color-palette > .color-picker-grid > .color-square {
3319 -fx-background-color: transparent;
3320 -fx-background-insets: -1, 0;
3321 -fx-padding: 0.5;
3322 -fx-border: black;
3323 }
3324
3325 /* the color over which the user is hovering */
3326 .color-palette-region > .color-square.hover-square {
3327 -fx-background-color: black;
3328 -fx-background-insets: -1;
3329 -fx-padding: 1;
3330 }
3331
3332 .color-palette > .separator > .line {
3333 -fx-border-color: -fx-text-box-border transparent transparent transparent,
3334 -fx-shadow-highlight-color transparent transparent transparent;
3335 -fx-border-insets: 0, 1 0 0 0;
3336 -fx-border-style: none;
3337 -fx-padding: 0;
3338 }
3339
3340
3341 /* ------- CUSTOM COLOR DIALOG ------- */
3342 .custom-color-dialog > .color-rect-pane {
3343 -fx-spacing: 0.75em;
3344 -fx-pref-height: 16.666667em;
3345 -fx-alignment: top-left;
3346 -fx-fill-height: true;
3347 }
3348
3349 .custom-color-dialog .color-rect-pane .color-rect {
3350 -fx-min-width: 16.666667em;
3351 -fx-min-height: 16.666667em;
3352 }
3353
3354 .custom-color-dialog .color-rect-pane .color-rect-border {
3355 -fx-border-color: derive(-fx-base, -20%);
3356 }
3357
3358 .custom-color-dialog > .color-rect-pane #color-rect-indicator {
3359 -fx-background-color: null;
3360 -fx-border-color: white;
3361 -fx-border-radius: 0.4166667em;
3362 -fx-translate-x: -0.4166667em;
3363 -fx-translate-y: -0.4166667em;
3364 -fx-pref-width: 0.833333em;
3365 -fx-pref-height: 0.833333em;
3366 -fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1);
3367 }
3368
3369 .custom-color-dialog > .color-rect-pane > .color-bar {
3370 -fx-min-width: 1.666667em;
3371 -fx-min-height: 16.666667em;
3372 -fx-max-width: 1.666667em;
3373 -fx-border-color: derive(-fx-base, -20%);
3374 }
3375
3376 .custom-color-dialog > .color-rect-pane > .color-bar > #color-bar-indicator {
3377 -fx-border-radius: 0.333333em;
3378 -fx-border-color: white;
3379 -fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1);
3380 -fx-pref-width: 2em;
3381 -fx-pref-height: 0.833333em;
3382 -fx-translate-x: -0.1666667em;
3383 -fx-translate-y: -0.4166667em;
3384 }
3385
3386 .custom-color-dialog {
3387 -fx-background-color: -fx-background;
3388 -fx-padding: 1.25em;
3389 -fx-spacing: 1.25em;
3390 }
3391
3392 /* The fix for RT-37494 forces the web color text's major direction to
3393 * LTR. The following keeps the text right-aligned when in RTL mode. */
3394 .custom-color-dialog .webcolor-field:dir(rtl) > .text-field:dir(ltr) {
3395 -fx-alignment: baseline-right;
3396 }
3397
3398
3399 /* -------- Toggle Button ---------------- */
3400 .custom-color-dialog .controls-pane .toggle-button {
3401 -fx-background-radius: 0.333333em, 0.333333em, 0.25em, 0.1666667em;
3402 -fx-padding: 0.25em 0.5em 0.25em 0.5em;
3403 }
3404
3405 .custom-color-dialog .controls-pane .toggle-button:focused {
3406 -fx-background-color:
3407 rgba(23,134,248,0.2),
3408 -fx-focus-color,
3409 -fx-inner-border,
3410 -fx-body-color;
3411 }
3412 .custom-color-dialog .controls-pane .toggle-button:selected Text {
3413 -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.9) , 2, 0.0 , 0 , 1 );
3414 }
3415
3416 .custom-color-dialog .controls-pane .toggle-button:selected {
3417 -fx-background-color:
3418 -fx-shadow-highlight-color,
3419 linear-gradient( to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100% ),
3420 linear-gradient( to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100% ),
3421 linear-gradient( to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100% );
3422 -fx-background-insets: 0 0 -0.083333em 0, 0, 0.083333em, 0.083333em;
3423 /* TODO: -fx-text-fill should be derived */
3424 -fx-text-fill: -fx-light-text-color;
3425 }
3426 .custom-color-dialog .controls-pane .left-pill {
3427 -fx-background-radius: 0.25em 0 0 0.25em;
3428 -fx-background-insets: 0 0 -0.083333em 0, 0, 0.083333em 0 0.083333em 0.083333em, 0.1666667em 0 0.1666667em 0.1666667em;
3429 -fx-border-color: transparent -fx-outer-border transparent transparent;
3430 -fx-border-insets: 0.333333em 0 0.333333em 0;
3431 -fx-padding: -0.1666667em 0.666667em -0.1666667em 0.666667em;
3432 }
3433 .custom-color-dialog .controls-pane .left-pill:focused {
3434 -fx-background-radius: 0.25em 0 0 0.25em;
3435 -fx-background-insets: -0.11666667em 0 -0.11666667em -0.11666667em, 0 0 0 0, 0.083333em, 0.1666667em;
3436 -fx-border-color: transparent;
3437 }
3438 .custom-color-dialog .controls-pane .left-pill:selected, .controls-pane .left-pill:selected:focused {
3439 -fx-background-insets: 0 0 -0.083333em 0, 0, 0.083333em 0 0.083333em 0.083333em, 0.083333em 0 0.083333em 0.083333em;
3440 -fx-border-color: transparent;
3441 }
3442 .custom-color-dialog .controls-pane .center-pill {
3443 -fx-background-radius: 0;
3444 -fx-background-insets: 0;
3445 -fx-background-insets: 0 0 -0.083333em 0, 0, 0.083333em 0 0.083333em 0, 0.1666667em 0 0.1666667em 0;
3446 -fx-border-color: transparent -fx-outer-border transparent transparent;
3447 -fx-border-insets: 0.333333em 0 0.333333em 0;
3448 -fx-padding: -0.1666667em 0.666667em -0.1666667em 0.666667em;
3449 }
3450 .custom-color-dialog .controls-pane .center-pill:focused {
3451 -fx-background-radius: 0;
3452 -fx-background-insets: -0.11666667em 0 -0.11666667em -0.083333em, 0 0 0 -0.083333em, 0.083333em 0.083333em 0.083333em 0, 0.1666667em 0.1666667em 0.1666667em 0.083333em;
3453 -fx-border-color: transparent;
3454 }
3455 .custom-color-dialog .controls-pane .center-pill:selected, .controls-pane .center-pill:selected:focused {
3456 -fx-background-insets: -0.11666667em 0 -0.11666667em -0.083333em, 0 0 0 -0.083333em, 0.083333em 0.083333em 0.083333em 0, 0.083333em 0.083333em 0.083333em 0;
3457 -fx-border-color: transparent;
3458 }
3459
3460 .custom-color-dialog .controls-pane .right-pill {
3461 -fx-background-radius: 0 0.25em 0.25em 0;
3462 -fx-background-insets: 0 0 -0.083333em 0, 0, 0.083333em 0.083333em 0.083333em 0, 0.1666667em 0.1666667em 0.1666667em 0;
3463 -fx-padding: 0.25em 0.666667em 0.25em 0.666667em;
3464 }
3465 .custom-color-dialog .controls-pane .right-pill:focused {
3466 -fx-background-radius: 0 0.25em 0.25em 0;
3467 -fx-background-insets: -0.11666667em -0.11666667em -0.11666667em -0.083333em, 0 0 0 -0.083333em, 0.083333em 0.083333em 0.083333em 0, 0.1666667em 0.1666667em 0.1666667em 0.083333em;
3468 }
3469 .custom-color-dialog .controls-pane .right-pill:selected, .controls-pane .right-pill:selected:focused {
3470 -fx-background-insets: -0.11666667em -0.11666667em -0.11666667em -0.083333em, 0 0 0 -0.083333em, 0.083333em 0.083333em 0.083333em 0, 0.083333em 0.083333em 0.083333em 0;
3471 }
3472
3473 .custom-color-dialog .controls-pane .current-new-color-grid #current-new-color-border {
3474 -fx-border-color: derive(-fx-base, -20%);
3475 -fx-border-width: 2px;
3476 }
3477
3478 .custom-color-dialog .controls-pane .current-new-color-grid .color-rect {
3479 -fx-min-width: 10.666667em;
3480 -fx-min-height: 1.75em;
3481 -fx-pref-width: 10.666667em;
3482 -fx-pref-height: 1.75em;
3483 }
3484
3485 .custom-color-dialog .transparent-pattern {
3486 -fx-background-image: url("pattern-transparent.png");
3487 -fx-background-repeat: repeat;
3488 -fx-background-size: auto;
3489 }
3490
3491 .custom-color-dialog .controls-pane #spacer1 {
3492 -fx-min-height: 0.1666667em;
3493 -fx-max-height: 0.1666667em;
3494 -fx-pref-height: 0.1666667em;
3495 }
3496
3497 .custom-color-dialog .controls-pane #spacer2 {
3498 -fx-min-height: 1em;
3499 -fx-max-height: 1em;
3500 -fx-pref-height: 1em;
3501 }
3502
3503 .custom-color-dialog .controls-pane #settings-pane {
3504 -fx-hgap: 0.4166667em;
3505 -fx-vgap: 0.3333333em;
3506 }
3507
3508 .custom-color-dialog .controls-pane #settings-pane .settings-label {
3509 -fx-min-width: 5.75em;
3510 }
3511
3512 .custom-color-dialog .controls-pane #settings-pane .settings-unit {
3513 -fx-max-width: 1.5em;
3514 -fx-min-width: 1.5em;
3515 -fx-pref-width: 1.5em;
3516 }
3517
3518 .custom-color-dialog .controls-pane #settings-pane .slider {
3519 -fx-pref-width: 8.25em;
3520 }
3521
3522 .custom-color-dialog .controls-pane .color-input-field {
3523 -fx-pref-column-count: 3;
3524 -fx-max-width: 3.25em;
3525 -fx-min-width: 3.25em;
3526 -fx-pref-width: 3.25em;
3527 }
3528
3529 .custom-color-dialog .controls-pane .web-field {
3530 -fx-pref-column-count: 6;
3531 -fx-pref-width: 8.25em;
3532 }
3533
3534 .custom-color-dialog .controls-pane #spacer-side {
3535 -fx-min-width: 0.5em;
3536 -fx-pref-width: 0.5em;
3537 }
3538
3539 .custom-color-dialog .controls-pane #spacer-bottom {
3540 -fx-pref-height: 0.833333em;
3541 -fx-min-height: 0.833333em;
3542 }
3543
3544 .custom-color-dialog .controls-pane .customcolor-controls-background {
3545 -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
3546 -fx-background-insets:
3547 0.8333333em 0 0.4166667em 0,
3548 1em 0.166667em 0.5833333em 0.166667em;
3549 -fx-background-radius: 0.3333333em, 0.166667em;
3550 }
3551
3552 .custom-color-dialog .controls-pane .current-new-color-grid .label {
3553 -fx-padding: 0 0 0 0.4166667em;
3554 }
3555
3556 .custom-color-dialog .controls-pane #buttons-hbox {
3557 -fx-spacing: 0.333333em;
3558 -fx-padding: 1em 0 0 0;
3559 -fx-alignment: bottom-right;
3560 }
3561
3562
3563
3564
3565 /*******************************************************************************
3566 * *
3567 * DatePicker *
3568 * *
3569 ******************************************************************************/
3570
3571 .date-picker > .arrow-button > .arrow {
3572 -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";
3573 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
3574 -fx-background-insets: 1 0 -1 0, 0;
3575 -fx-padding: 0.416667em 0.416667em 0.333333em 0.333333em; /*5 5 4 4 */
3576 -fx-scale-shape: true;
3577 }
3578
3579 .date-picker-popup {
3580 -fx-background-color: -fx-box-border, -fx-control-inner-background;
3581 -fx-background-insets: 0, 1;
3582 /*-fx-background-radius: 0 6 6 6, 0 5 5 5;*/
3583 -fx-background-radius: 0;
3584 -fx-padding: 0;
3585 -fx-alignment: CENTER; /* VBox */
3586 -fx-spacing: 0; /* VBox */
3587 -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
3588 }
3589 .date-picker-popup > .month-year-pane {
3590 -fx-padding: 0.5em; /* 6 6 6 6 */
3591 -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
3592 -fx-background-insets: 0, 1, 2;
3593 -fx-background-radius: 0;
3594 }
3595 .date-picker-popup > * > .spinner {
3596 -fx-spacing: 0.25em;
3597 -fx-alignment: CENTER;
3598 -fx-fill-height: false;
3599 }
3600 .date-picker-popup > * > .spinner > .button {
3601 -fx-background-color: transparent;
3602 -fx-background-radius: 0;
3603 }
3604 .date-picker-popup > * > .spinner > .button:hover {
3605 -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
3606 -fx-background-radius: 3, 2, 1;
3607 }
3608 .date-picker-popup > * > .spinner > .button:focused {
3609 -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-focus-color, -fx-body-color;
3610 -fx-background-radius: 3, 2, 1;
3611 }
3612 .date-picker-popup > * > .spinner > .left-button {
3613 -fx-padding: 0 0.333333em 0 0.25em; /* 0 4 0 3 */
3614 }
3615 .date-picker-popup > * > .spinner > .right-button {
3616 -fx-padding: 0 0.25em 0 0.333333em; /* 0 3 0 4 */
3617 }
3618 .date-picker-popup > * > .spinner > .button > .right-arrow {
3619 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
3620 -fx-background-insets: 1 0 -1 0, 0;
3621 -fx-padding: 0.5em 0.333333em 0 0; /* 6 4 0 0 */
3622 -fx-shape: "M 4 0 L 0 -3 L 0 3 z";
3623 -fx-scale-shape: true;
3624 }
3625 .date-picker-popup > * > .spinner > .button > .left-arrow {
3626 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
3627 -fx-background-insets: 1 0 -1 0, 0;
3628 -fx-padding: 0.5em 0.333333em 0 0; /* 6 4 0 0 */
3629 -fx-shape: "M 0 0 L 4 -3 L 4 3 z";
3630 -fx-scale-shape: true;
3631 }
3632 .date-picker-popup > * > .spinner > .label {
3633 -fx-alignment: CENTER;
3634 }
3635 .date-picker-popup > .month-year-pane > .secondary-label {
3636 -fx-alignment: BASELINE_CENTER;
3637 -fx-padding: 0.5em 0 0 0; /* 6 0 0 0 */
3638 -fx-text-fill: firebrick;
3639 }
3640 .date-picker-popup > .calendar-grid {
3641 -fx-background-color: derive(-fx-base, 6.8%);
3642 -fx-background-insets: 1;
3643 -fx-padding: 1;
3644 }
3645 .date-picker-popup > * > .date-cell {
3646 -fx-background-color: transparent;
3647 -fx-background-insets: 1, 2;
3648 -fx-padding: 0.166667em;
3649 -fx-alignment: BASELINE_CENTER;
3650 -fx-opacity: 1.0;
3651 }
3652 .date-cell:disabled > * {
3653 -fx-opacity: -fx-disabled-opacity;
3654 }
3655 .date-picker-popup > * > .day-name-cell,
3656 .date-picker-popup > * > .week-number-cell {
3657 -fx-font-size: 0.916667em;
3658 }
3659 .date-picker-popup > * > .week-number-cell {
3660 /* Add one pixel to the top padding to
3661 * compensate for the smaller font size. */
3662 -fx-padding: 0.416667em 0.583333em 0.333333em 0.583333em; /* 5 7 4 7 */
3663 -fx-border-color: -fx-background;
3664 -fx-border-width: 1px;
3665 -fx-background: -fx-control-inner-background;
3666 -fx-background-color: -fx-background;
3667 -fx-text-fill: -fx-accent;
3668 }
3669 .date-picker-popup > * > .day-cell {
3670 -fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */
3671 -fx-border-color: derive(-fx-control-inner-background,-10%);
3672 -fx-border-width: 1px;
3673 -fx-background: -fx-control-inner-background;
3674 -fx-background-color: -fx-background;
3675 -fx-text-fill: -fx-text-background-color;
3676 }
3677 .date-picker-popup > * > .hijrah-day-cell {
3678 -fx-alignment: TOP_LEFT;
3679 -fx-padding: 0.083333em 0.333333em 0.083333em 0.333333em; /* 1 4 1 4 */
3680 -fx-cell-size: 2.75em;
3681 }
3682 .date-picker-popup > * > .day-cell > .secondary-text {
3683 -fx-fill: firebrick;
3684 }
3685 .date-picker-popup > * > .today {
3686 -fx-background-color: -fx-control-inner-background, derive(-fx-base, -10%), -fx-control-inner-background;
3687 -fx-background-insets: 1, 2, 3;
3688 }
3689 .date-picker-popup > * > .day-cell:hover,
3690 .date-picker-popup > * > .selected,
3691 .date-picker-popup > * > .previous-month.selected,
3692 .date-picker-popup > * > .next-month.selected {
3693 -fx-background-color: -fx-selection-bar;
3694 -fx-background: -fx-accent;
3695 }
3696 .date-picker-popup > * > .today:hover,
3697 .date-picker-popup > * > .today.selected {
3698 -fx-background-color: -fx-selection-bar, derive(-fx-base, -10%),-fx-selection-bar;
3699 }
3700 .date-picker-popup > * > .day-cell:focused,
3701 .date-picker-popup > * > .today:focused {
3702 -fx-background-color: -fx-control-inner-background, -fx-cell-focus-inner-border, -fx-control-inner-background;
3703 -fx-background-insets: 1, 2, 3;
3704 }
3705 .date-picker-popup > * > .day-cell:focused:hover,
3706 .date-picker-popup > * > .today:focused:hover,
3707 .date-picker-popup > * > .today.selected:focused,
3708 .date-picker-popup > * > .selected:focused {
3709 -fx-background-color: -fx-selection-bar, -fx-cell-focus-inner-border, -fx-selection-bar;
3710 }
3711 .date-picker-popup > * > .previous-month,
3712 .date-picker-popup > * > .next-month {
3713 -fx-background: derive(-fx-control-inner-background,-5%);
3714 }
3715 .date-picker-popup > * > .previous-month:hover,
3716 .date-picker-popup > * > .next-month:hover {
3717 -fx-background: lightgrey;
3718 -fx-text-fill: -fx-dark-text-color;
3719 }
3720 .date-picker-popup > * > .day-cell:hover > .secondary-text,
3721 .date-picker-popup > * > .previous-month > .secondary-text,
3722 .date-picker-popup > * > .next-month > .secondary-text,
3723 .date-picker-popup > * > .selected > .secondary-text {
3724 -fx-fill: -fx-text-background-color;
3725 }
3726 .date-picker-popup > * > .previous-month.today,
3727 .date-picker-popup > * > .next-month.today {
3728 -fx-background-color: derive(-fx-control-inner-background,-5%), derive(-fx-base, -10%), derive(-fx-control-inner-background,-5%);
3729 }
3730 .date-picker-popup > * > .previous-month.today:hover,
3731 .date-picker-popup > * > .next-month.today:hover {
3732 -fx-background-color: lightgrey, derive(-fx-base, -10%), lightgrey;
3733 }
3734
3735
3736
3737 /* -------------------------- STYLES FOR PAGINATION CONTROL ----- */
3738 .pagination {
3739 -fx-padding: 0;
3740 -fx-arrows-visible: true;
3741 -fx-tooltip-visible: true;
3742 -fx-page-information-visible: true;
3743 -fx-page-information-alignment: bottom;
3744 }
3745 .pagination > .page {
3746 -fx-background-color: transparent;
3747 }
3748
3749 .pagination > .pagination-control {
3750 -fx-background-color: transparent;
3751 -fx-padding: 0.833333em 0em 0.833333em 0em;
3752 }
3753
3754 .pagination > .pagination-control > .control-box {
3755 -fx-spacing: 4;
3756 -fx-alignment: center;
3757 }
3758
3759 .pagination > .pagination-control > .control-box > .left-arrow-button{
3760 -fx-background-radius: 0;
3761 -fx-padding: 0.166667em 0.416em 0.25em 0.333em;
3762 }
3763 .pagination > .pagination-control > .control-box > .right-arrow-button {
3764 -fx-background-radius: 0;
3765 -fx-padding: 0.166667em 0.333em 0.25em 0.416em;
3766 }
3767
3768 .pagination > .pagination-control .left-arrow {
3769 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
3770 -fx-background-insets: 1 0 -1 0, 0;
3771 -fx-padding: 0.375em 0.291em 0.375em 0.291em;
3772 -fx-shape: "M 0 0 L -13 7 L 0 13 z";
3773 -fx-scale-shape: true;
3774 }
3775
3776 .pagination > .pagination-control .right-arrow {
3777 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
3778 -fx-background-insets: 1 0 -1 0, 0;
3779 -fx-padding: 0.375em 0.291em 0.375em 0.291em;
3780 -fx-shape: "M 0 0 L 13 7 L 0 13 z";
3781 -fx-scale-shape: true;
3782 }
3783
3784 .pagination > .pagination-control > .control-box > .bullet-button {
3785 -fx-background-radius: 0, 4em, 4em, 4em, 4em;
3786 -fx-padding: 0.333em;
3787
3788 -fx-background-color: transparent, -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
3789 -fx-background-insets: 0, 4 4 3 4, 5, 6, 7;
3790 }
3791
3792 .pagination > .pagination-control > .control-box > .bullet-button:selected {
3793 -fx-base: -fx-accent;
3794 }
3795
3796 .pagination.bullet > .pagination-control > .control-box > .left-arrow-button,
3797 .pagination.bullet > .pagination-control > .control-box > .right-arrow-button {
3798 -fx-background-radius: 4em;
3799 }
3800
3801 .pagination > .pagination-control > .control-box > .number-button {
3802 -fx-background-radius: 0;
3803 -fx-padding: 0.166667em 0.25em 0.25em 0.333em;
3804 -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
3805 }
3806
3807 .pagination > .pagination-control > .control-box > .number-button:selected {
3808 -fx-base: -fx-accent;
3809 }
3810 .pagination > .pagination-control > .page-information {
3811 -fx-padding: 0.416em 0 0 0;
3812 }
3813
3814
3815 /*******************************************************************************
3816 * *
3817 * TreeTableView *
3818 * Note: A lot of the CSS for TreeTableView is included with the TreeView and *
3819 * TableView CSS styles elsewhere in caspian.css (as they are the same, just *
3820 * targeting different CSS style classes). *
3821 ******************************************************************************/
3822 .tree-table-view {
3823 -fx-background-color: -fx-box-border, -fx-control-inner-background;
3824 -fx-background-insets: 0,1;
3825
3826 /* There is some oddness if padding is in em values rather than pixels,
3827 in particular, the left border of the control doesn't show. */
3828 -fx-padding: 1; /* 0.083333em; */
3829
3830 /* Constants used throughout the tableview.
3831 * TODO: Should these be derived from the palette in .scene?
3832 */
3833 -fx-table-header-border-color: #959595;
3834 /* -fx-table-header-background-color: linear (0%,0%) to (0%,100%) stops (80%, #bbbbbb) (10%, #f6f6f6);*/
3835 -fx-table-cell-border-color: #bbbbbb;
3836 }
3837
3838 .tree-table-row-cell {
3839 -fx-background-color: -fx-control-inner-background;
3840 -fx-padding: 0.0em; /* 0 */
3841 -fx-text-fill: -fx-text-inner-color;
3842 }
3843
3844 .tree-table-cell {
3845 -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
3846
3847 -fx-background-color: transparent;
3848 -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
3849 -fx-border-width: 0.083333em; /* 1 */
3850 -fx-cell-size: 2.0em; /* 24 */
3851 -fx-text-fill: -fx-text-inner-color;
3852 }
3853
3854
3855 /*******************************************************************************
3856 * *
3857 * TreeTableView cell spanning *
3858 * *
3859 ******************************************************************************/
3860
3861 .cell-span-tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell {
3862 -fx-background-color: transparent;
3863 }
3864
3865 /* All table-row-cells - we don't care if they are even or odd */
3866 .cell-span-tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell {
3867 -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background;
3868 -fx-background-insets: 0, 0 1 0 0;
3869 -fx-alignment: center;
3870 }
3871
3872 /** Selection styles */
3873 /*.cell-span-table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused:selected, */
3874 .cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell,
3875 .cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected > .tree-table-cell,
3876 .cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover > .tree-table-cell,
3877 .cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:filled:selected,
3878 .cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:filled:focused:selected,
3879 .cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:filled:focused:selected:hover{
3880 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
3881 -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
3882 -fx-background: -fx-accent;
3883 -fx-text-fill: -fx-selection-bar-text;
3884 }
3885
3886 /** Hover styles */
3887 /** --- Row selection mode hover */
3888 .cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover > .tree-table-cell {
3889 -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color;
3890 -fx-background-insets: 0, 0 0 1 0;
3891 -fx-text-fill: -fx-text-inner-color;
3892 }
3893
3894 .cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover > .tree-table-cell {
3895 -fx-background-color: -fx-table-cell-border-color, -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
3896 -fx-background-insets: 0, 0 0 1 0, 1 1 2 1, 2 2 3 2, 3 3 4 3;
3897 -fx-text-fill: -fx-text-inner-color;
3898 }
3899
3900 /** --- Cell selection mode hover */
3901 .cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover{
3902 -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color;
3903 -fx-text-fill: -fx-text-inner-color;
3904 -fx-background-insets: 0, 0 0 1 0;
3905 }
3906
3907 .cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover{
3908 -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
3909 -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
3910 -fx-text-fill: -fx-text-inner-color;
3911 }
3912 /** End of hover styles */
3913
3914 /********************************************************************************
3915 * *
3916 * HTMLEditor *
3917 * *
3918 ********************************************************************************/
3919
3920 .html-editor {
3921 -fx-border-width: 1;
3922 -fx-border-style: solid;
3923 -fx-padding: 0;
3924 -fx-border-color: derive(-fx-base,-35%);
3925 }
3926 .html-editor .button,
3927 .html-editor .toggle-button {
3928 -fx-padding: 0.333333em 0.833333em 0.416667em 0.833333em; /* 2 10 3 10 */
3929 }
3930 .html-editor .combo-box > .list-cell {
3931 -fx-cell-size: 2.0833em; /* 21 */
3932 }
3933 /* Each Toolbar is constructed of two stacked shapes */
3934 .html-editor > * > .top-toolbar {
3935 -fx-background-color:
3936 linear-gradient(to bottom, white 10%, derive(-fx-base, 50%) 90%),
3937 linear-gradient(to bottom, derive(-fx-base, 65%) 0%, derive(-fx-base, 5%) 90%);
3938 -fx-background-insets: 0, 1;
3939 -fx-border-color: transparent transparent derive(-fx-base,-20%) transparent, transparent;
3940 -fx-border-width: 1, 0;
3941 -fx-padding: 0.333em 0.5em 0.333em 0.5em; /* 4 6 4 6;*/
3942 }
3943
3944 .html-editor > * > .bottom-toolbar {
3945 -fx-background-color:
3946 linear-gradient(to bottom, derive(-fx-base, 50%) 10%, derive(-fx-base, -60%) 90%),
3947 linear-gradient(to bottom, derive(-fx-base, 5%) 0%, derive(-fx-base, -15%) 90%);
3948 -fx-background-insets: 0, 1;
3949 -fx-border-color: transparent derive(-fx-base,50%) transparent derive(-fx-base,50%),
3950 transparent transparent derive(-fx-base,-60%) transparent;
3951 -fx-border-width: 1, 0;
3952 -fx-padding: 0.166667em 0.5em 0.166667em 1.5em; /* 2 6 2 6;*/
3953 }
3954
3955 .html-editor-foreground, .html-editor-background {
3956 -fx-color-label-visible: false;
3957 -fx-color-rect-x: 0;
3958 -fx-color-rect-y: 10;
3959 -fx-color-rect-width: 16;
3960 -fx-color-rect-height: 5;
3961 -fx-padding: 0;
3962 }
3963 .html-editor-foreground > .color-picker-label,
3964 .html-editor-background > .color-picker-label {
3965 -fx-padding: 0 0 -0.083333em 0;
3966 }
3967 /* Note: The Separator is constructed of a 1-pixel shape
3968 whose borders are styled. Only the right border is specified
3969 with a color; the other three borders are transparent.*/
3970
3971 /* Note: This first section of CSS (below) specifies the Separator's color.
3972 Specifying the color here ensures the same color for both .top-toolbar
3973 and .bottom-toolbar Separators, as they will inherit the color. */
3974
3975 .html-editor > * > * > .separator:vertical > .line{
3976 -fx-border-style: solid;
3977 -fx-background-color: null;
3978 -fx-border-color: transparent derive(-fx-base,-35%) transparent transparent; /* #878787 */
3979 }
3980
3981 /* Note: This next section of CSS (below) specifies the Separator's length.
3982 The length of the Separator is determined by adding its -fx-padding values
3983 to the top and bottom -fx-padding values of the parent toolbar. */
3984
3985 .html-editor > * > .top-toolbar > .separator {
3986 -fx-padding: 1 0 1 0;
3987 }
3988
3989 .html-editor > * > .bottom-toolbar:horizontal {
3990 -fx-padding: 0.417em; /* 5px */
3991 }
3992
3993 .html-editor > * > .bottom-toolbar > .separator {
3994 -fx-padding: 1 2 1 2;
3995 }
3996
3997 .html-editor > * > * > .button {
3998 -fx-background-color: null;
3999 -fx-background-insets: -1, 0, 1;
4000 -fx-background-radius: 0.25em; /* 3 */
4001 -fx-padding: 0.25em; /* 3 */
4002 -fx-alignment: CENTER;
4003 -fx-graphic-vpos: CENTER;
4004 }
4005
4006 .html-editor > * > .top-toolbar > .button:hover {
4007 -fx-background-color: transparent, derive(-fx-base,-10%), derive(-fx-base,65%);
4008 }
4009
4010 .html-editor > * > .bottom-toolbar > .button:hover {
4011 -fx-background-color: transparent, derive(-fx-base,-25%), derive(-fx-base,15%);
4012 }
4013
4014 .html-editor > * > * > .toggle-button {
4015 -fx-background-color: transparent;
4016 -fx-background-insets: -1, 0, 1;
4017 -fx-background-radius: 3;
4018 -fx-padding: 0.25em; /* 3 */
4019 -fx-alignment: CENTER;
4020 -fx-graphic-vpos: CENTER;
4021 }
4022
4023 .html-editor > * > .top-toolbar > .toggle-button:hover {
4024 -fx-background-color: transparent, derive(-fx-base,-10%), derive(-fx-base,65%);
4025 }
4026
4027 .html-editor > * > .bottom-toolbar > .toggle-button:hover {
4028 -fx-background-color: transparent, derive(-fx-base,-25%), derive(-fx-base,15%);
4029 }
4030
4031 .html-editor > * > .toggle-button:focused {
4032 -fx-color: transparent;
4033 -fx-background-color: -fx-focus-color, derive(-fx-base,-25%), derive(-fx-base,15%);
4034 -fx-background-insets: -1.2, 0, 1;
4035 -fx-background-radius: 3.2, 3, 3;
4036 }
4037
4038 .html-editor > * > * > .toggle-button:selected {
4039 -fx-background-color: transparent,
4040 linear-gradient(to bottom, derive(-fx-base, -70%) 10%, derive(-fx-base, -40%) 90%),
4041 linear-gradient(to bottom, derive(-fx-base, -40%) 0%, derive(-fx-base, -20%) 50%, derive(-fx-base, -10%) 98%, derive(-fx-base, -35%) 100%);
4042 }
4043
4044 .html-editor > * > * > .font-menu-button {
4045 -fx-background-radius: 5, 5, 4, 3;
4046 }
4047
4048 .html-editor > * > * > .font-menu-button .label{
4049 -fx-padding: 0.166667em 0.5em 0.25em 0.5em; /* 2 6 3 6 */
4050 }
4051
4052 /*******************************************************************************
4053 * *
4054 * Spinner *
4055 * *
4056 ******************************************************************************/
4057
4058 .spinner {
4059 -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;
4060 -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
4061 -fx-background-radius: 3, 3, 2;
4062 }
4063 .spinner:focused,
4064 .spinner:contains-focus {
4065 -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
4066 -fx-background-insets: -1.4 -1.4 -0.4 -1.4, 0 0 1 0, 1 1 2 1;
4067 -fx-background-radius: 4, 3, 2;
4068 }
4069 .spinner:disabled {
4070 -fx-opacity: -fx-disabled-opacity;
4071 }
4072 .spinner > .text-field {
4073 -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
4074 -fx-background-insets: 0 0 1 0, 1 0 2 1;
4075 -fx-background-radius: 3 0 0 3, 2 0 0 2;
4076 }
4077
4078 .spinner .increment-arrow-button {
4079 -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
4080 -fx-background-insets: 0, 1, 2;
4081 -fx-background-radius: 0 3 0 0, 0 2 0 0, 0 1 0 0;
4082 -fx-padding: 0.333em 0.666em 0.333em 0.666em; /* 4 8 4 8 */
4083 }
4084 .spinner .decrement-arrow-button {
4085 -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
4086 -fx-background-insets: -1 0 1 0, 0 1 2 1, 0 2 3 2;
4087 -fx-background-radius: 0 0 3 0, 0 0 2 0, 0 0 1 0;
4088 -fx-padding: 0.250em 0.666em 0.5em 0.666em; /* 3 8 6 8 */
4089 }
4090
4091 .spinner .increment-arrow-button .increment-arrow {
4092 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
4093 -fx-background-insets: -0.6 0 1 0, 0;
4094 -fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */
4095 -fx-shape: "M 0 0 h 7 l -3.5 4 z";
4096 -fx-rotate: 180;
4097 }
4098 .spinner .decrement-arrow-button .decrement-arrow {
4099 -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
4100 -fx-background-insets: 1 0 -1 0, 0;
4101 -fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */
4102 -fx-shape: "M 0 0 h 7 l -3.5 4 z";
4103 }
4104
4105 /* Spinner - Horizontal arrows */
4106 .spinner.split-arrows-horizontal .increment-arrow-button .increment-arrow,
4107 .spinner.arrows-on-right-horizontal .increment-arrow-button .increment-arrow,
4108 .spinner.arrows-on-left-horizontal .increment-arrow-button .increment-arrow,
4109 .spinner.split-arrows-horizontal .decrement-arrow-button .decrement-arrow,
4110 .spinner.arrows-on-right-horizontal .decrement-arrow-button .decrement-arrow,
4111 .spinner.arrows-on-left-horizontal .decrement-arrow-button .decrement-arrow{
4112 -fx-padding: 0.333em 0.166em 0.333em 0.166em; /* 4 2 4 2 */
4113 -fx-shape: "M 4 0 v 7 l -4 -3.5 z";
4114 }
4115
4116 /* Spinner - STYLE_CLASS_ARROWS_ON_RIGHT_HORIZONTAL */
4117 .spinner.arrows-on-right-horizontal .increment-arrow-button {
4118 -fx-background-insets: 0 0 1 0, 1 1 2 0, 2 2 3 1;
4119 -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
4120 -fx-padding: 0.333em 0.666em 0.333em 0.583em; /* 4 8 4 7 */
4121
4122 }
4123 .spinner.arrows-on-right-horizontal .decrement-arrow-button {
4124 -fx-background-insets: 0 0 1 0, 1 1 2 1, 2 2 3 2;
4125 -fx-background-radius: 0, 0, 0;
4126 -fx-padding: 0.333em 0.666em 0.333em 0.666em; /* 4 8 4 8 */
4127 }
4128
4129 /* Spinner - STYLE_CLASS_ARROWS_ON_LEFT_VERTICAL */
4130 .spinner.arrows-on-left-vertical > .text-field {
4131 -fx-background-insets: 0 0 1 0, 1 1 2 0;
4132 -fx-background-radius: 0 3 3 0, 0 2 2 0;
4133 }
4134 .spinner.arrows-on-left-vertical .increment-arrow-button {
4135 -fx-background-radius: 3 0 0 0, 2 0 0 0, 1 0 0 0;
4136 }
4137 .spinner.arrows-on-left-vertical .decrement-arrow-button {
4138 -fx-background-radius: 0 0 0 3, 0 0 0 2, 0 0 0 1;
4139 }
4140
4141 /* Spinner - STYLE_CLASS_ARROWS_ON_LEFT_HORIZONTAL */
4142 .spinner.arrows-on-left-horizontal > .text-field {
4143 -fx-background-insets: 0 0 1 -1, 1 1 2 -1;
4144 -fx-background-radius: 0 3 3 0, 0 2 2 0;
4145 }
4146 .spinner.arrows-on-left-horizontal .increment-arrow-button {
4147 -fx-background-insets: 0 0 1 0, 1 1 2 0, 2 2 3 1;
4148 -fx-background-radius: 0, 0, 0;
4149 -fx-padding: 0.333em 0.666em 0.333em 0.583em; /* 4 8 4 7 */
4150 }
4151 .spinner.arrows-on-left-horizontal .decrement-arrow-button {
4152 -fx-background-insets: 0 0 1 0, 1 1 2 1, 2 2 3 2;
4153 -fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1;
4154 -fx-padding: 0.333em 0.666em 0.333em 0.666em; /* 4 8 4 8 */
4155 }
4156
4157 /* Spinner - STYLE_CLASS_SPLIT_ARROWS_VERTICAL */
4158 .spinner.split-arrows-vertical > .text-field {
4159 -fx-background-insets: 0, 0 1 0 1;
4160 -fx-background-radius: 0, 0;
4161 }
4162 .spinner.split-arrows-vertical .increment-arrow-button {
4163 -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
4164 }
4165 .spinner.split-arrows-vertical .decrement-arrow-button {
4166 -fx-background-insets: -1 0 1 0, 0 1 2 1, 1 2 3 2;
4167 -fx-background-radius: 0 0 3 3, 0 0 2 2, 0 0 1 1;
4168 -fx-padding: 0.25em 0.666em 0.417em 0.666em; /* 3 8 5 8 */
4169 }
4170
4171 /* Spinner - STYLE_CLASS_SPLIT_ARROWS_HORIZONTAL */
4172 .spinner.split-arrows-horizontal > .text-field {
4173 -fx-background-insets: 0 0 1 0, 1 0 2 0;
4174 -fx-background-radius: 0, 0;
4175 }
4176 .spinner.split-arrows-horizontal .increment-arrow-button {
4177 -fx-background-insets: 0 0 1 0, 1 1 2 1, 2 2 3 2;
4178 -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
4179 -fx-padding: 0.333em 0.666em 0.333em 0.666em; /* 4 8 4 8 */
4180 }
4181 .spinner.split-arrows-horizontal .decrement-arrow-button {
4182 -fx-background-insets: 0 0 1 0, 1 1 2 1, 2 2 3 2;
4183 -fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1;
4184 -fx-padding: 0.333em 0.666em 0.333em 0.666em; /* 4 8 4 8 */
4185 }
4186
4187 /*******************************************************************************
4188 * *
4189 * Dialog *
4190 * *
4191 ******************************************************************************/
4192
4193 .dialog-pane {
4194 -fx-background-color: -fx-background;
4195 -fx-padding: 0;
4196 }
4197
4198 .dialog-pane > .expandable-content {
4199 -fx-padding: 0.666em; /* 8px */
4200 }
4201
4202 .dialog-pane > .button-bar > .container {
4203 -fx-padding: 0.833em; /* 10px */
4204 }
4205
4206 .dialog-pane > .content.label {
4207 -fx-alignment: top-left;
4208 -fx-padding: 1.333em 0.833em 0 0.833em; /* 16px 10px 0px 10px */
4209 }
4210
4211 .dialog-pane > .content {
4212 -fx-padding: 0.833em; /* 10 */
4213 }
4214
4215 .dialog-pane:no-header .graphic-container {
4216 -fx-padding: 0.833em 0 0 0.833em; /* 10px 0px 0px 10px */
4217 }
4218
4219 .dialog-pane:header .header-panel {
4220 /*-fx-padding: 0.833em 1.166em 0.833em 1.166em; *//* 10px 14px 10px 14px */
4221 -fx-padding: 0.833em; /* 10px */
4222 -fx-background-color: -fx-box-border, linear-gradient(-fx-background, derive(-fx-background, 30%));
4223 -fx-background-insets: 0, 0 0 1 0;
4224 }
4225
4226 .dialog-pane:header .header-panel .label {
4227 -fx-font-size: 1.167em; /* 14px */
4228 -fx-wrap-text: true;
4229 }
4230
4231 .dialog-pane:header .header-panel .graphic-container {
4232 /* This prevents the text in the header running directly into the graphic */
4233 -fx-padding: 0 0 0 0.833em; /* 0px 0px 0px 10px */
4234 }
4235
4236 .dialog-pane > .button-bar > .container > .details-button {
4237 -fx-alignment: baseline-left;
4238 -fx-focus-traversable: false;
4239 -fx-padding: 0.416em; /* 5px */
4240 -fx-font-size: 0.833em; /* 10px */
4241 }
4242
4243 .dialog-pane > .button-bar > .container > .details-button.more {
4244 -fx-graphic: url("dialog-more-details.png");
4245 }
4246
4247 .dialog-pane > .button-bar > .container > .details-button.less {
4248 -fx-graphic: url("dialog-fewer-details.png");
4249 }
4250
4251 .dialog-pane > .button-bar > .container > .details-button:hover {
4252 -fx-underline: true;
4253 }
4254
4255 .alert.confirmation.dialog-pane,
4256 .text-input-dialog.dialog-pane,
4257 .choice-dialog.dialog-pane {
4258 -fx-graphic: url("dialog-confirm.png");
4259 }
4260
4261 .alert.information.dialog-pane {
4262 -fx-graphic: url("dialog-information.png");
4263 }
4264
4265 .alert.error.dialog-pane {
4266 -fx-graphic: url("dialog-error.png");
4267 }
4268
4269 .alert.warning.dialog-pane {
4270 -fx-graphic: url("dialog-warning.png");
4271 }