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