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