From d6e1c0d0b3639ba0d8e7cdd29dd237cbd8822c4e Mon Sep 17 00:00:00 2001 From: Manfred Karrer Date: Thu, 11 Feb 2016 10:35:19 +0100 Subject: [PATCH] Support multiline for alerts --- doc/modena.css | 3617 +++++++++++++++++ .../gui/popups/SendAlertMessagePopup.java | 28 +- .../io/bitsquare/gui/util/FormBuilder.java | 3 +- 3 files changed, 3635 insertions(+), 13 deletions(-) create mode 100644 doc/modena.css diff --git a/doc/modena.css b/doc/modena.css new file mode 100644 index 0000000000..bfe93a1195 --- /dev/null +++ b/doc/modena.css @@ -0,0 +1,3617 @@ +/* + Modena + + This is the second generation theme for JavaFX after Caspian. +*/ + +/* + * Copyright (c) 2009, 2013, Oracle and/or its affiliates. All rights reserved. + * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER. + * + * This code is free software; you can redistribute it and/or modify it + * under the terms of the GNU General Public License version 2 only, as + * published by the Free Software Foundation. Oracle designates this + * particular file as subject to the "Classpath" exception as provided + * by Oracle in the LICENSE file that accompanied this code. + * + * This code is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License + * version 2 for more details (a copy is included in the LICENSE file that + * accompanied this code). + * + * You should have received a copy of the GNU General Public License version + * 2 along with this work; if not, write to the Free Software Foundation, + * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. + * + * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA + * or visit www.oracle.com if you need additional information or have any + * questions. + * + */ + +/******************************************************************************* + * * + * THEMING INSTRUCTIONS * + * * + ******************************************************************************* + +TODO: Explain here how theming works: + + * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color + * -fx-text-background-color for text on top of -fx-background + * -fx-text-inner-color for text on top of -fx-control-inner-color + * -fx-selection-bar-text for text on top of -fx-selection-bar + +RESIZING FOR DIFFERENT SCREEN DPI +------------------------------- + +When the screen DPI changes Windows will use a different font size by default. +The default is 12px and can change to 15px or 18px depending on user +preference or screen DPI. On Mac the default is 13px and embedded will depend +on hardware. To make UI controls scale and be the right proportions for each of +these font sizes we base the padding (which controls size of control) on the +font size. This is done using the CSS measurement unit of a "em" where +(1em = font size). The default sizes are based on Windows default of 12px, as +a quick reference here are common px sizes in em units on windows. + +Windows 12px -> em units -> Mac 13px | +---------------------------------------- + 1px -> 0.083333em -> 1.08px ~ 2px + 2px -> 0.166667em -> 2.16px ~ 3px + 3px = 0.25em + 4px = 0.333333em + 5px = 0.416667em + 6px = 0.5em + 7px = 0.583333em + 8px = 0.666667em + 9px = 0.75em + 10px = 0.833333em + 11px = 0.916667em + 12px = 1em + +IMPORTANT: Not all sizes are scaled with em units only padding. All borders and +background insets are still in pixels. Also any padding where it has to match up +is being used to size a border should also be in pixels. + + ******************************************************************************/ + +/******************************************************************************* + * * + * CSS Styles for core infrastructure bits. The .root section provides the * + * overall default colors used by the rest of the sections. * + * * + ******************************************************************************/ + +.root { + /*************************************************************************** + * * + * The main color palette from which the rest of the colors are derived. * + * * + **************************************************************************/ + + /* A light grey that is the base color for objects. Instead of using + * -fx-base directly, the sections in this file will typically use -fx-color. + */ + -fx-base: #ececec; + + /* A very light grey used for the background of windows. See also + * -fx-text-background-color, which should be used as the -fx-text-fill + * value for text painted on top of backgrounds colored with -fx-background. + */ + -fx-background: derive(-fx-base, 26.4%); + + /* Used for the inside of text boxes, password boxes, lists, trees, and + * tables. See also -fx-text-inner-color, which should be used as the + * -fx-text-fill value for text painted on top of backgrounds colored + * with -fx-control-inner-background. + */ + -fx-control-inner-background: derive(-fx-base, 80%); + /* Version of -fx-control-inner-background for alternative rows */ + -fx-control-inner-background-alt: derive(-fx-control-inner-background, -2%); + + /* One of these colors will be chosen based upon a ladder calculation + * that uses the brightness of a background color. Instead of using these + * colors directly as -fx-text-fill values, the sections in this file should + * use a derived color to match the background in use. See also: + * + * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color + * -fx-text-background-color for text on top of -fx-background + * -fx-text-inner-color for text on top of -fx-control-inner-color + * -fx-selection-bar-text for text on top of -fx-selection-bar + */ + -fx-dark-text-color: black; + -fx-mid-text-color: #333; + -fx-light-text-color: white; + + /* A bright blue for highlighting/accenting objects. For example: selected + * text; selected items in menus, lists, trees, and tables; progress bars */ + -fx-accent: #0096C9; + + /* Default buttons color, this is similar to accent but more subtle */ + -fx-default-button: #ABD8ED; + + /* A bright blue for the focus indicator of objects. Typically used as the + * first color in -fx-background-color for the "focused" pseudo-class. Also + * typically used with insets of -1.4 to provide a glowing effect. + */ + -fx-focus-color: #039ED3; + -fx-faint-focus-color: #039ED322; + + /* The color that is used in styling controls. The default value is based + * on -fx-base, but is changed by pseudoclasses to change the base color. + * For example, the "hover" pseudoclass will typically set -fx-color to + * -fx-hover-base (see below) and the "armed" pseudoclass will typically + * set -fx-color to -fx-pressed-base. + */ + -fx-color: -fx-base; + + /* Chart Color Palette */ + CHART_COLOR_1: #f3622d; + CHART_COLOR_2: #fba71b; + CHART_COLOR_3: #57b757; + CHART_COLOR_4: #41a9c9; + CHART_COLOR_5: #4258c9; + CHART_COLOR_6: #9a42c8; + CHART_COLOR_7: #c84164; + CHART_COLOR_8: #888888; + /* Chart Color Palette Semi-Transparent + * These are used by charts that need semi transparent versions of the above colors, such as BubbleChart. They + * are exactly the same colors as above just with alpha + * + * 20% opacity + */ + CHART_COLOR_1_TRANS_20: #f3622d33; + CHART_COLOR_2_TRANS_20: #fba71b33; + CHART_COLOR_3_TRANS_20: #57b75733; + CHART_COLOR_4_TRANS_20: #41a9c933; + CHART_COLOR_5_TRANS_20: #4258c933; + CHART_COLOR_6_TRANS_20: #9a42c833; + CHART_COLOR_7_TRANS_20: #c8416433; + CHART_COLOR_8_TRANS_20: #88888833; + /* 70% opacity */ + CHART_COLOR_1_TRANS_70: #f3622db3; + CHART_COLOR_2_TRANS_70: #fba71bb3; + CHART_COLOR_3_TRANS_70: #57b757b3; + CHART_COLOR_4_TRANS_70: #41a9c9b3; + CHART_COLOR_5_TRANS_70: #4258c9b3; + CHART_COLOR_6_TRANS_70: #9a42c8b3; + CHART_COLOR_7_TRANS_70: #c84164b3; + CHART_COLOR_8_TRANS_70: #888888b3; + + /*************************************************************************** + * * + * Colors that are derived from the main color palette. * + * * + **************************************************************************/ + + /* A little lighter than -fx-base and used as the -fx-color for the + * "hovered" pseudoclass state. + */ + -fx-hover-base: ladder( + -fx-base, + derive(-fx-base, 20%) 20%, + derive(-fx-base, 30%) 35%, + derive(-fx-base, 40%) 50% + ); + + /* A little darker than -fx-base and used as the -fx-color for the + * "armed" pseudoclass state. + * + * TODO: should this be renamed to -fx-armed-base? + */ + -fx-pressed-base: derive(-fx-base, -6%); + + /* The color to use for -fx-text-fill when text is to be painted on top of + * a background filled with the -fx-background color. + */ + -fx-text-background-color: ladder( + -fx-background, + -fx-light-text-color 45%, + -fx-dark-text-color 46%, + -fx-dark-text-color 59%, + -fx-mid-text-color 60% + ); + + /* A little darker than -fx-color and used to draw boxes around objects such + * as progress bars, scroll bars, scroll panes, trees, tables, and lists. + */ + -fx-box-border: ladder( + -fx-color, + black 20%, + derive(-fx-color, -15%) 30% + ); + + /* Darker than -fx-background and used to draw boxes around text boxes and + * password boxes. + */ + -fx-text-box-border: ladder( + -fx-background, + black 10%, + derive(-fx-background, -15%) 30% + ); + + /* Lighter than -fx-background and used to provide a small highlight when + * needed on top of -fx-background. This is never a shadow in Modena but + * keep -fx-shadow-highlight-color name to be compatible with Caspian. + */ + -fx-shadow-highlight-color: ladder( + -fx-background, + rgba(255, 255, 255, 0.07) 0%, + rgba(255, 255, 255, 0.07) 20%, + rgba(255, 255, 255, 0.07) 70%, + rgba(255, 255, 255, 0.7) 90%, + rgba(255, 255, 255, 0.75) 100% + ); + + /* A gradient that goes from a little darker than -fx-color on the top to + * even more darker than -fx-color on the bottom. Typically is the second + * color in the -fx-background-color list as the small thin border around + * a control. It is typically the same size as the control (i.e., insets + * are 0). + */ + -fx-outer-border: derive(-fx-color, -23%); + + /* A gradient that goes from a bit lighter than -fx-color on the top to + * a little darker at the bottom. Typically is the third color in the + * -fx-background-color list as a thin highlight inside the outer border. + * Insets are typically 1. + */ + -fx-inner-border: linear-gradient(to bottom, + ladder( + -fx-color, + derive(-fx-color, 30%) 0%, + derive(-fx-color, 20%) 40%, + derive(-fx-color, 25%) 60%, + derive(-fx-color, 55%) 80%, + derive(-fx-color, 55%) 90%, + derive(-fx-color, 75%) 100% + ), + ladder( + -fx-color, + derive(-fx-color, 20%) 0%, + derive(-fx-color, 10%) 20%, + derive(-fx-color, 5%) 40%, + derive(-fx-color, -2%) 60%, + derive(-fx-color, -5%) 100% + )); + -fx-inner-border-horizontal: linear-gradient(to right, derive(-fx-color, 55%), derive(-fx-color, -5%)); + -fx-inner-border-bottomup: linear-gradient(to top, derive(-fx-color, 55%), derive(-fx-color, -5%)); + + /* A gradient that goes from a little lighter than -fx-color at the top to + * a little darker than -fx-color at the bottom and is used to fill the + * body of many controls such as buttons. + */ + -fx-body-color: linear-gradient(to bottom, + ladder( + -fx-color, + derive(-fx-color, 8%) 75%, + derive(-fx-color, 10%) 80% + ), + derive(-fx-color, -8%)); + -fx-body-color-bottomup: linear-gradient(to top, derive(-fx-color, 10%), derive(-fx-color, -6%)); + -fx-body-color-to-right: linear-gradient(to right, derive(-fx-color, 10%), derive(-fx-color, -6%)); + + /* The color to use as -fx-text-fill when painting text on top of + * backgrounds filled with -fx-base, -fx-color, and -fx-body-color. + */ + -fx-text-base-color: ladder( + -fx-color, + -fx-light-text-color 45%, + -fx-dark-text-color 46%, + -fx-dark-text-color 59%, + -fx-mid-text-color 60% + ); + + /* The color to use as -fx-text-fill when painting text on top of + * backgrounds filled with -fx-control-inner-background. + */ + -fx-text-inner-color: ladder( + -fx-control-inner-background, + -fx-light-text-color 45%, + -fx-dark-text-color 46%, + -fx-dark-text-color 59%, + -fx-mid-text-color 60% + ); + + /* The color to use for small mark-like objects such as checks on check + * boxes, filled in circles in radio buttons, arrows on scroll bars, etc. + */ + -fx-mark-color: ladder( + -fx-color, + white 30%, + derive(-fx-color, -63%) 31% + ); + + /* The small thin light "shadow" for mark-like objects. Typically used in + * conjunction with -fx-mark-color with an insets of 1 0 -1 0. */ + -fx-mark-highlight-color: ladder( + -fx-color, + derive(-fx-color, 80%) 60%, + white 70% + ); + + /* Background for items in list like things such as menus, lists, trees, + * and tables. */ + -fx-selection-bar: -fx-accent; + + /* Background color to use for selection of list cells etc. This is when + * the control doesn't have focus or the row of a previously selected item. */ + -fx-selection-bar-non-focused: lightgrey; + + /* The color to use as -fx-text-fill when painting text on top of + * backgrounds filled with -fx-selection-bar. + * + * TODO: this can be removed + */ + -fx-selection-bar-text: -fx-text-background-color; + + /* These are needed for Popup */ + -fx-background-color: inherit; + -fx-background-radius: inherit; + -fx-background-insets: inherit; + -fx-padding: inherit; + + /* The color to use in ListView/TreeView/TableView to indicate hover. */ + -fx-cell-hover-color: #cce3f4; + + /** Focus line for keyboard focus traversal on cell based controls */ + -fx-cell-focus-inner-border: derive(-fx-selection-bar, 30%); + + /* The colors to use in Pagination */ + -fx-page-bullet-border: #acacac; + -fx-page-indicator-hover-border: #accee5; + + /*************************************************************************** + * * + * Set the default background color for the scene * + * * + **************************************************************************/ + + -fx-background-color: -fx-background; +} + +/* Make popups transparent */ +.root.popup { + -fx-background-color: transparent; +} + +/******************************************************************************* + * * + * Common Styles * + * * + * These are styles that give a standard look to a whole range of controls * + * * + ******************************************************************************/ + +/* ==== TEXT NODES IN CONTROLS ========================================== */ + +.text { + /* This adjusts text alignment within the bounds of text nodes so that + the text is always vertically centered within the bounds. Based on + the cap height of the text. */ + -fx-bounds-type: logical_vertical_center; + /* Enable LCD text rendering */ + -fx-font-smoothing-type: lcd; +} + +/* ==== BUTTON LIKE THINGS ============================================== */ + +.button, +.toggle-button, +.radio-button > .radio, +.check-box > .box, +.menu-button, +.choice-box, +.color-picker.split-button > .color-picker-label, +.combo-box-base, +.combo-box-base:editable > .arrow-button { + -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-background-insets: 0 0 -1 0, 0, 1, 2; + -fx-background-radius: 3px, 3px, 2px, 1px; + -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */ + -fx-text-fill: -fx-text-base-color; + -fx-alignment: CENTER; + -fx-content-display: LEFT; +} + +.menu-button > .label { + -fx-alignment: CENTER_LEFT; +} + +.button:hover, +.toggle-button:hover, +.radio-button:hover > .radio, +.check-box:hover > .box, +.menu-button:hover, +.split-menu-button > .label:hover, +.split-menu-button > .arrow-button:hover, +.slider .thumb:hover, +.scroll-bar > .thumb:hover, +.scroll-bar > .increment-button:hover, +.scroll-bar > .decrement-button:hover, +.choice-box:hover, +.color-picker.split-button > .arrow-button:hover, +.color-picker.split-button > .color-picker-label:hover, +.combo-box-base:hover, +.combo-box-base:editable > .arrow-button:hover, +.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover { + -fx-color: -fx-hover-base; +} + +.button:armed, +.toggle-button:armed, +.radio-button:armed > .radio, +.check-box:armed .box, +.menu-button:armed, +.split-menu-button:armed > .label, +.split-menu-button > .arrow-button:pressed, +.split-menu-button:showing > .arrow-button, +.slider .thumb:pressed, +.scroll-bar > .thumb:pressed, +.scroll-bar > .increment-button:pressed, +.scroll-bar > .decrement-button:pressed, +.choice-box:showing, +.combo-box-base:showing, +.combo-box-base:editable:showing > .arrow-button, +.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:pressed { + -fx-color: -fx-pressed-base; +} + +.button:focused, +.toggle-button:focused, +.radio-button:focused > .radio, +.check-box:focused > .box, +.menu-button:focused, +.choice-box:focused, +.color-picker.split-button:focused > .color-picker-label, +.combo-box-base:focused, +.slider:focused .thumb { + -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color; + -fx-background-insets: -0.2, 1, 2, -1.4, 2.6; + -fx-background-radius: 3, 2, 1, 4, 1; +} + +/* ==== DISABLED THINGS ================================================= */ + +.label:disabled, +.button:disabled, +.toggle-button:disabled, +.radio-button:disabled, +.check-box:disabled, +.hyperlink:disabled, +.menu-button:disabled, +.split-menu-button:disabled, +.slider:disabled, +.scroll-bar:disabled, +.scroll-pane:disabled, +.progress-bar:disabled, +.progress-indicator:disabled, +.text-input:disabled, +.choice-box:disabled, +.combo-box-base:disabled, +.date-cell:disabled > *, /* This is set on children so border is not affected. */ +.list-view:disabled, +.tree-view:disabled, +.table-view:disabled, +.tree-table-view:disabled, +.tab-pane:disabled, +.titled-pane:disabled > .title, +.accordion:disabled > .titled-pane > .title, +.tab-pane > .tab-header-area > .headers-region > .tab:disabled, +.menu:disabled, +.menu-item:disabled > .label, +.menu-item:disabled, +.list-cell:filled:selected:focused:disabled, +.list-cell:filled:selected:disabled, +.tree-cell:filled:selected:focused:disabled, +.tree-cell:filled:selected:disabled, +.tree-cell > .tree-disclosure-node:disabled, +.tree-table-row-cell > .tree-disclosure-node:disabled, +.table-row-cell:selected:disabled, +.tree-table-row-cell:selected:disabled, +.table-cell:selected:disabled, +.tree-table-cell:selected:disabled { + -fx-opacity: 0.4; +} + +/* ==== MNEMONIC THINGS ================================================= */ + +.mnemonic-underline { + -fx-stroke: transparent; +} + +.titled-pane:show-mnemonics > .mnemonic-underline, +.label:show-mnemonics > .mnemonic-underline, +.context-menu:show-mnemonics > .mnemonic-underline, +.menu:show-mnemonics > .mnemonic-underline, +.menu-bar:show-mnemonics > .mnemonic-underline, +.menu-item:show-mnemonics > .mnemonic-underline, +.button:show-mnemonics > .mnemonic-underline, +.toggle-button:show-mnemonics > .mnemonic-underline, +.radio-button:show-mnemonics > .mnemonic-underline, +.check-box:show-mnemonics > .mnemonic-underline, +.hyperlink:show-mnemonics > .mnemonic-underline, +.split-menu-button:show-mnemonics > .mnemonic-underline, +.menu-button:show-mnemonics > .mnemonic-underline { + -fx-stroke: -fx-text-base-color; +} + +/* ==== MARKS =========================================================== */ + +.radio-button:selected > .radio > .dot, +.check-box:selected > .box > .mark, +.check-box:indeterminate > .box > .mark { + -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; + -fx-background-insets: 1 0 -1 0, 0; +} + +/* ==== ARROWS ========================================================== */ + +.menu-button > .arrow-button > .arrow, +.split-menu-button > .arrow-button > .arrow { + -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; + -fx-background-insets: 0 0 -1 0, 0; + -fx-padding: 0.25em; + -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z"; +} + +.choice-box > .open-button > .arrow, +.menu-button:openvertically > .arrow-button > .arrow, +.split-menu-button:openvertically > .arrow-button > .arrow, +.combo-box-base > .arrow-button > .arrow, +.web-view .form-select-button .arrow, +.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow { + -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; + -fx-background-insets: 0 0 -1 0, 0; + -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */ + -fx-shape: "M 0 0 h 7 l -3.5 4 z"; +} + +/* ==== CHOICE BOX LIKE THINGS ========================================== */ + +.choice-box, +.menu-button, +.combo-box-base { + -fx-padding: 0; +} + +.choice-box > .label, +.menu-button > .label, +.color-picker > .label { + -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */ + -fx-text-fill: -fx-text-base-color; +} + +.choice-box > .open-button, +.menu-button > .arrow-button { + -fx-padding: 0.5em 0.667em 0.5em 0.0em; /* 6 8 6 0 */ +} + +/* ==== BOX LIKE THINGS ================================================= */ + +.scroll-pane, +.split-pane, +.list-view, +.tree-view, +.table-view, +.tree-table-view, +.html-editor { + -fx-background-color: -fx-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-padding: 1; +} + +.scroll-pane:focused, +.split-pane:focused, +.list-view:focused, +.tree-view:focused, +.table-view:focused, +.tree-table-view:focused, +.html-editor:focused { + -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background; + -fx-background-insets: -1.4, -0.3, 1; + -fx-background-radius: 2, 0, 0; +} + +/* ones with grey -fx-background not lighter -fx-control-inner-background */ +.scroll-pane, +.split-pane { + -fx-background-color: -fx-box-border, -fx-background; +} + +.scroll-pane:focused, +.split-pane:focused { + -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-background; +} + +/******************************************************************************* + * * + * Label * + * * + ******************************************************************************/ + +.label { + -fx-text-fill: -fx-text-background-color; +} + +/******************************************************************************* + * * + * Button & ToggleButton * + * * + ******************************************************************************/ + +/* ==== DEFAULT ========================================================= */ + +.button:default { + -fx-base: -fx-default-button; +} + +/* ==== WEB BUTTONS ===================================================== */ + +.web-view .form-select-button { + -fx-background-radius: 2, 2, 1, 0; + -fx-background-insets: 2 2 1 2, 2, 3, 4; +} + +/* ==== PILL BUTTONS ==================================================== */ + +.button.left-pill, +.toggle-button.left-pill { + -fx-background-radius: 3 0 0 3, 3 0 0 3, 2 0 0 2, 1 0 0 1; + -fx-background-insets: 0 0 -1 0, 0, 1, 2; + -fx-padding: 0.333333em 0.666667em 0.333333em 0.75em; /* 4 8 4 9 */ +} + +.button.center-pill, +.toggle-button.center-pill { + -fx-background-radius: 0; + -fx-background-insets: 0 0 -1 0, 0 0 0 0, 1 1 1 0, 2 2 2 1; +} + +.button.right-pill, +.toggle-button.right-pill { + -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0; + -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 1; +} + +.button.left-pill:focused, +.toggle-button.left-pill:focused { + -fx-background-insets: -0.2 0 -0.2 -0.2, 1, 2, -1.4 0 -1.4 -1.4, 2.6; + -fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1, 4 0 0 4, 1 0 0 1; +} + +.button.center-pill:focused, +.toggle-button.center-pill:focused { + -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; + -fx-background-radius: 0, 0, 0, 0, 0; +} + +.button.right-pill:focused, +.toggle-button.right-pill:focused { + -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; + -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0, 0 4 4 0, 0 1 1 0; +} + +.toggle-button:selected.left-pill:focused { + -fx-background-insets: -0.2 0 -0.2 -0.2, 1, -1.4 0 -1.4 -1.4, 2.6; + -fx-background-radius: 3 0 0 3, 2 0 0 2, 4 0 0 4, 0; +} + +.toggle-button:selected.center-pill:focused { + -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; + -fx-background-radius: 0, 0, 0, 0; +} + +.toggle-button:selected.right-pill:focused { + -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; + -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 4 4 0, 0; +} + +/* ==== SELECTED TOGGLE ================================================= */ + +.toggle-button:selected { + -fx-background-color: -fx-shadow-highlight-color, + linear-gradient(to bottom, derive(-fx-outer-border, -20%), -fx-outer-border), + linear-gradient(to bottom, + derive(-fx-color, -22%) 0%, + derive(-fx-color, -13%) 20%, + derive(-fx-color, -11%) 50%); + -fx-background-insets: 0 0 -1 0, 0, 1; +} + +.toggle-button:selected:focused { + -fx-background-color: -fx-focus-color, + linear-gradient(to bottom, + derive(-fx-color, -22%) 0%, + derive(-fx-color, -13%) 20%, + derive(-fx-color, -11%) 50%), + -fx-faint-focus-color, + linear-gradient(to bottom, + derive(-fx-color, -22%) 0%, + derive(-fx-color, -13%) 20%, + derive(-fx-color, -11%) 50%); + -fx-background-insets: -0.2, 1, -1.4, 2.6; + -fx-background-radius: 3, 2, 4, 0; +} + +/******************************************************************************* + * * + * RadioButton * + * * + ******************************************************************************/ + +.radio-button { + -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */ + -fx-text-fill: -fx-text-background-color; +} + +.radio-button > .radio, +.radio-button:focused > .radio { + -fx-background-radius: 1.0em; /* large value to make sure this remains circular */ + -fx-padding: 0.333333em; /* 4 -- padding from outside edge to the inner black dot */ +} + +.radio-button > .radio > .dot { + -fx-background-color: transparent; + -fx-background-radius: 1.0em; /* large value to make sure this remains circular */ + -fx-padding: 0.333333em; /* 4 -- radius of the inner black dot when selected */ +} + +/******************************************************************************* + * * + * CheckBox * + * * + ******************************************************************************/ + +.check-box { + -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */ + -fx-text-fill: -fx-text-background-color; +} + +.check-box > .box { + -fx-background-radius: 3, 2, 1; + -fx-padding: 0.166667em 0.166667em 0.25em 0.25em; /* 2 2 3 3 */ +} + +.check-box > .box > .mark { + -fx-background-color: null; + -fx-padding: 0.416667em 0.416667em 0.5em 0.5em; /* 5 5 6 6 */ + -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"; +} + +.check-box:indeterminate > .box { + -fx-padding: 0; +} + +.check-box:indeterminate > .box > .mark { + -fx-shape: "M0,0H10V2H0Z"; + -fx-scale-shape: false; + -fx-padding: 0.666667em; /* 16x16 = 8+8 */ +} + +/******************************************************************************* + * * + * Hyperlink * + * * + ******************************************************************************/ + +.hyperlink { + -fx-padding: 0.166667em 0.25em 0.166667em 0.25em; /* 2 3 2 3 */ + -fx-cursor: hand; + -fx-content-display: LEFT; + -fx-text-fill: -fx-text-background-color; + -fx-border-color: transparent; + -fx-border-width: 1px; +} + +.hyperlink, +.hyperlink:hover, +.hyperlink:hover:visited { + -fx-text-fill: -fx-accent; +} + +.hyperlink:armed, +.hyperlink:visited, +.hyperlink:hover:armed { + -fx-text-fill: -fx-text-background-color; +} + +.hyperlink:hover, +.hyperlink:visited, +.hyperlink:hover:visited { + -fx-underline: true; +} + +.hyperlink:visited:armed { + -fx-underline: false; +} + +.hyperlink:focused { + -fx-border-color: -fx-focus-color; + -fx-border-style: segments(0.166667em, 0.166667em); + -fx-border-width: 1px; +} + +.hyperlink:show-mnemonics > .mnemonic-underline { + -fx-stroke: -fx-text-fill; +} + +/******************************************************************************* + * * + * SplitMenuButton * + * * + ******************************************************************************/ + +.split-menu-button { + -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border; + -fx-background-insets: 0 0 -1 0, 0; + -fx-background-radius: 3, 3; + -fx-padding: 0; +} + +.split-menu-button > .label { + -fx-text-fill: -fx-text-base-color; + -fx-background-color: -fx-inner-border, -fx-body-color; + -fx-background-insets: 1 0 1 1, 2 1 2 2; + -fx-background-radius: 2 0 0 2, 1 0 0 1; + -fx-padding: 0.333333em 0.667em 0.333333em 0.667em; /* 4 8 4 8 */ +} + +.split-menu-button > .arrow-button { + -fx-background-color: -fx-inner-border, -fx-body-color; + -fx-background-insets: 1, 2; + -fx-background-radius: 0 2 2 0, 0 1 1 0; + -fx-padding: 0.5em 0.667em 0.5em 0.667em; /* 6 8 6 8 */ +} + +.split-menu-button:focused { + -fx-background-color: -fx-focus-color; + -fx-background-insets: -0.2; + -fx-background-radius: 3; +} + +.split-menu-button:focused > .label { + -fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color; + -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; + -fx-background-radius: 2 0 0 2, 1 0 0 1, 4 0 0 4, 0; +} + +.split-menu-button:focused > .arrow-button { + -fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color; + -fx-background-insets: 1, 2, -1.4, 2.6; + -fx-background-radius: 0 2 2 0, 0 1 1 0, 0 4 4 0, 0; +} + +/******************************************************************************* + * * + * ToolBar * + * * + ******************************************************************************/ + +.tool-bar:vertical { + /* left */ + -fx-background-color: -fx-outer-border, + linear-gradient(to right, derive(-fx-base, 0%) 0%, derive(-fx-base, 10%) 50%, derive(-fx-base, 0%) 100%); + -fx-background-insets: 0, 0 0 0 1; + -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */ + -fx-spacing: 0.333em; /* 4 */ + -fx-alignment: TOP_LEFT; +} + +.tool-bar { + /* top */ + TOP-COLOR: ladder( + -fx-base, + derive(-fx-base, 0%) 0%, + derive(-fx-base, 46%) 100% + ); + -fx-background-color: linear-gradient(to bottom, derive(TOP-COLOR, 25%) 0%, -fx-outer-border 90%), + linear-gradient(to bottom, TOP-COLOR 2%, derive(-fx-base, -2.1%) 95%); + -fx-background-insets: 0 0 0 0, 1 0 1 0; + -fx-padding: 0.416667em 0.5em 0.416667em 0.5em; /* 5 6 5 6 */ + -fx-spacing: 0.333em; /* 4 */ + -fx-alignment: CENTER_LEFT; +} + +.tool-bar:vertical.right { + -fx-background-insets: 0, 0 1 0 0; +} + +.tool-bar.bottom { + -fx-background-color: -fx-outer-border, + derive(TOP-COLOR, 25%), + linear-gradient(to bottom, TOP-COLOR 2%, derive(-fx-base, -2.1%) 95%); + -fx-background-insets: 0, 1 0 0 0, 2 0 0 0; +} + +.tool-bar > .container > .separator { + -fx-orientation: vertical; +} + +.tool-bar:vertical > .container > .separator { + -fx-orientation: horizontal; +} + +.tool-bar-overflow-button { + -fx-padding: 0 0.75em 0 0; +} + +.tool-bar:vertical > .tool-bar-overflow-button { + -fx-padding: 0 0 0.75em 0; +} + +.tool-bar-overflow-button > .arrow { + -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; + -fx-background-insets: 1 0 -1 0, 0; + -fx-padding: 0.666667em 0.916667em 0em 0em; /* 8 11 0 0 */ + -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"; +} + +.tool-bar-overflow-button:focused > .arrow { + -fx-background-color: -fx-mark-highlight-color, derive(-fx-accent, -15%); + -fx-background-insets: 1 0 -1 0, 0; +} + +.tool-bar-overflow-button:hover > .arrow { + -fx-background-color: -fx-mark-highlight-color, derive(-fx-hover-base, -35%); + -fx-background-insets: 1 0 -1 0, 0; +} + +/******************************************************************************* + * * + * Slider * + * * + ******************************************************************************/ + +.slider .thumb { + -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)), + -fx-inner-border, + -fx-body-color; + -fx-background-insets: 0, 1, 2; + -fx-background-radius: 1.0em; /* makes sure this remains circular */ + -fx-padding: 0.583333em; /* 7 */ + -fx-effect: dropshadow(two-pass-box, rgba(0, 0, 0, 0.1), 5, 0.0, 0, 2); +} + +.slider:focused .thumb { + -fx-background-radius: 1.0em; /* makes sure this remains circular */ +} + +.slider .track { + -fx-background-color: -fx-shadow-highlight-color, + linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border), + linear-gradient(to bottom, + derive(-fx-control-inner-background, -9%), + derive(-fx-control-inner-background, 0%), + derive(-fx-control-inner-background, -5%), + derive(-fx-control-inner-background, -12%) + ); + -fx-background-insets: 0 0 -1 0, 0, 1; + -fx-background-radius: 0.25em, 0.25em, 0.166667em; /* 3 3 2 */ + -fx-padding: 0.25em; /* 3 */ +} + +.slider:vertical .track { + -fx-background-color: -fx-shadow-highlight-color, + -fx-text-box-border, + linear-gradient(to right, + derive(-fx-control-inner-background, -9%), + -fx-control-inner-background, + derive(-fx-control-inner-background, -9%) + ); +} + +.slider .axis { + -fx-tick-label-fill: derive(-fx-text-background-color, 30%); + -fx-tick-length: 5px; + -fx-minor-tick-length: 3px; + -fx-border-color: null; +} + +/******************************************************************************* + * * + * ScrollBar * + * * + ******************************************************************************/ + +.scroll-bar:horizontal { + -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%)); + -fx-background-insets: 0, 1 0 1 0; +} + +.scroll-bar:vertical { + -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%)); + -fx-background-insets: 0, 0 1 0 1; +} + +.scroll-bar:focused { + -fx-background-color: -fx-focus-color, + linear-gradient(to bottom, derive(-fx-base, -3%), derive(-fx-base, 5%) 50%, derive(-fx-base, -3%)), + -fx-faint-focus-color, + linear-gradient(to bottom, derive(-fx-base, -3%), derive(-fx-base, 5%) 50%, derive(-fx-base, -3%)); + -fx-background-insets: -0.2, 1, -1.4, 2.6; +} + +.scroll-bar:vertical:focused { + -fx-background-color: -fx-focus-color, + linear-gradient(to right, derive(-fx-base, -3%), derive(-fx-base, 5%) 50%, derive(-fx-base, -3%)), + -fx-faint-focus-color, + linear-gradient(to right, derive(-fx-base, -3%), derive(-fx-base, 5%) 50%, derive(-fx-base, -3%)); +} + +.scroll-bar > .thumb { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; + /*-fx-background-insets: 1, 2, 3;*/ + -fx-background-insets: 2, 3, 4; + /*-fx-background-radius: 0.416667em, 0.333333em, 0.25em; *//* 5, 4,3 */ + -fx-background-radius: 3, 2, 1; +} + +.scroll-bar:vertical > .thumb { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color-to-right; +} + +.scroll-bar > .increment-button, +.scroll-bar > .decrement-button { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-color: transparent; + -fx-padding: 0.25em; /* 3px */ +} + +.scroll-bar:horizontal > .increment-button, +.scroll-bar:horizontal > .decrement-button { + -fx-background-insets: 2 1 2 1, 3 2 3 2, 4 3 4 3; +} + +.scroll-bar:vertical > .increment-button, +.scroll-bar:vertical > .decrement-button { + -fx-background-insets: 1 2 1 2, 2 3 2 3, 3 4 3 4; +} + +.scroll-bar > .increment-button > .increment-arrow, +.scroll-bar > .decrement-button > .decrement-arrow { + -fx-background-color: -fx-mark-highlight-color, derive(-fx-base, -45%); +} + +.scroll-bar > .increment-button:hover > .increment-arrow, +.scroll-bar > .decrement-button:hover > .decrement-arrow { + -fx-background-color: -fx-mark-highlight-color, derive(-fx-base, -50%); +} + +.scroll-bar > .increment-button:pressed > .increment-arrow, +.scroll-bar > .decrement-button:pressed > .decrement-arrow { + -fx-background-color: -fx-mark-highlight-color, derive(-fx-base, -55%); +} + +.scroll-bar:horizontal > .decrement-button > .decrement-arrow { + -fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */ + -fx-shape: "M5.997,5.072L5.995,6.501l-2.998-4l2.998-4l0.002,1.43l-1.976,2.57L5.997,5.072z"; + -fx-effect: dropshadow(two-pass-box, -fx-shadow-highlight-color, 1, 0.0, 0, 1.4); + /*-fx-background-insets: 2 0 -2 0, 0;*/ +} + +.scroll-bar:horizontal > .increment-button > .increment-arrow { + -fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */ + -fx-shape: "M2.998-0.07L3-1.499l2.998,4L3,6.501l-0.002-1.43l1.976-2.57L2.998-0.07z"; + -fx-effect: dropshadow(two-pass-box, -fx-shadow-highlight-color, 1, 0.0, 0, 1.4); + /*-fx-background-insets: 2 0 -2 0, 0;*/ +} + +.scroll-bar:vertical > .decrement-button > .decrement-arrow { + -fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */ + -fx-shape: "M1.929,4L0.5,3.998L4.5,1l4,2.998L7.07,4L4.5,2.024L1.929,4z"; + -fx-effect: dropshadow(two-pass-box, -fx-shadow-highlight-color, 1, 0.0, 0, 1.4); + /*-fx-background-insets: 2 0 -2 0, 0;*/ +} + +.scroll-bar:vertical > .increment-button > .increment-arrow { + -fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */ + -fx-shape: "M7.071,1L8.5,1.002L4.5,4l-4-2.998L1.93,1L4.5,2.976L7.071,1z"; + -fx-effect: dropshadow(two-pass-box, -fx-shadow-highlight-color, 1, 0.0, 0, 1.4); + /*-fx-background-insets: 2 0 -2 0, 0;*/ +} + +/******************************************************************************* + * * + * ScrollPane * + * * + ******************************************************************************/ +.scroll-pane > .viewport { + -fx-background-color: -fx-background; +} + +.scroll-pane > .scroll-bar:horizontal { + -fx-background-insets: 0 1 1 1, 1; + -fx-padding: 0 1 0 1; +} + +.scroll-pane > .scroll-bar:horizontal > .increment-button, +.scroll-pane > .scroll-bar:horizontal > .decrement-button { + -fx-padding: 0.166667em 0.25em 0.25em 0.25em; /* 2 3 3 3 */ +} + +.scroll-pane > .scroll-bar:vertical > .increment-button, +.scroll-pane > .scroll-bar:vertical > .decrement-button { + -fx-padding: 0.25em 0.25em 0.25em 0.166667em; /* 3 3 3 2 */ +} + +.scroll-pane > .scroll-bar:vertical { + -fx-background-insets: 1 1 1 0, 1; + -fx-padding: 1 0 1 0; +} + +.scroll-pane > .corner { + -fx-background-color: derive(-fx-base, -1%); + -fx-background-insets: 0 1 1 0; +} + +/* new styleclass for edge to edge scrollpanes that don't want to draw a border */ +.scroll-pane.edge-to-edge, +.tab-pane > * > .scroll-pane { + -fx-background-color: -fx-background; + -fx-background-insets: 0; + -fx-padding: 0; +} + +.scroll-pane.edge-to-edge > .scroll-bar, +.tab-pane > * > .scroll-pane > .scroll-bar, +.titled-pane > * > * > .scroll-pane > .scroll-bar { + -fx-background-insets: 0; + -fx-padding: 0; +} + +.scroll-pane.edge-to-edge > .scroll-bar > .increment-button, +.scroll-pane.edge-to-edge > .scroll-bar > .decrement-button, +.tab-pane > * > .scroll-pane > .scroll-bar > .increment-button, +.tab-pane > * > .scroll-pane > .scroll-bar > .decrement-button, +.titled-pane > * > * > .scroll-pane > .scroll-bar > .increment-button, +.titled-pane > * > * > .scroll-pane > .scroll-bar > .decrement-button { + -fx-padding: 0.25em; /* 3px */ +} + +/******************************************************************************* + * * + * Separator * + * * + ******************************************************************************/ + +.separator:horizontal .line { + -fx-border-color: -fx-text-box-border transparent transparent transparent, + -fx-shadow-highlight-color transparent transparent transparent; + -fx-border-insets: 0, 1 0 0 0; +} + +.separator:vertical .line { + -fx-border-color: transparent transparent transparent -fx-shadow-highlight-color, + transparent transparent transparent -fx-text-box-border; + -fx-border-width: 3, 1; + -fx-border-insets: 0, 0 0 0 1; +} + +/******************************************************************************* + * * + * ProgressBar * + * * + ******************************************************************************/ + +.progress-bar { + -fx-indeterminate-bar-length: 60; + -fx-indeterminate-bar-escape: true; + -fx-indeterminate-bar-flip: true; + -fx-indeterminate-bar-animation-time: 2; +} + +.progress-bar > .bar { + -fx-background-color: linear-gradient(to bottom, derive(-fx-accent, -7%), derive(-fx-accent, 0%), derive(-fx-accent, -3%), derive(-fx-accent, -9%)); + -fx-background-insets: 3 3 4 3; + /*-fx-background-radius: 0.583em; *//* 7 */ + -fx-background-radius: 2; + -fx-padding: 0.75em; +} + +.progress-bar:indeterminate > .bar { + -fx-background-color: linear-gradient(to left, transparent, -fx-accent); +} + +.progress-bar > .track { + -fx-background-color: -fx-shadow-highlight-color, + linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border), + linear-gradient(to bottom, + derive(-fx-control-inner-background, -7%), + derive(-fx-control-inner-background, 0%), + derive(-fx-control-inner-background, -3%), + derive(-fx-control-inner-background, -9%) + ); + -fx-background-insets: 0, 0 0 1 0, 1 1 2 1; + -fx-background-radius: 4, 3, 2; /* 10, 9, 8 */ +} + +/******************************************************************************* + * * + * ProgressIndicator * + * * + ******************************************************************************/ + +.progress-indicator { + -fx-indeterminate-segment-count: 12; + -fx-spin-enabled: true; +} + +.progress-indicator > .determinate-indicator > .indicator { + -fx-background-color: -fx-box-border, + radial-gradient(center 50% 50%, radius 50%, -fx-control-inner-background 70%, derive(-fx-control-inner-background, -9%) 100%), + -fx-control-inner-background; + -fx-background-insets: 0, 1, 5 2 1 2; + -fx-padding: 0.166667em; /* 2px */ +} + +.progress-indicator > .determinate-indicator > .progress { + -fx-background-color: -fx-accent; + -fx-padding: 0.083333em; /* 1px */ +} + +.progress-indicator > .determinate-indicator > .tick { + -fx-background-color: white; + -fx-background-insets: 0; + -fx-padding: 0.666667em; /* 8 */ + -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"; +} + +.progress-indicator > .percentage { + -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */ + -fx-fill: -fx-text-background-color; +} + +.progress-indicator:indeterminate .segment { + -fx-background-color: -fx-accent; +} + +.progress-indicator:indeterminate .segment0 { + -fx-shape: "M41.98 14.74 a3.5,3.5 0 1,1 0,1 Z"; +} + +.progress-indicator:indeterminate .segment1 { + -fx-shape: "M33.75 6.51 a3.5,3.5 0 1,1 0,1 Z"; +} + +.progress-indicator:indeterminate .segment2 { + -fx-shape: "M22.49 3.5 a3.5,3.5 0 1,1 0,1 Z"; +} + +.progress-indicator:indeterminate .segment3 { + -fx-shape: "M11.24 6.51 a3.5,3.5 0 1,1 0,1 Z"; +} + +.progress-indicator:indeterminate .segment4 { + -fx-shape: "M3.01 14.74 a3.5,3.5 0 1,1 0,1 Z"; +} + +.progress-indicator:indeterminate .segment5 { + -fx-shape: "M0.0 26.0 a3.5,3.5 0 1,1 0,1 Z"; +} + +.progress-indicator:indeterminate .segment6 { + -fx-shape: "M3.01 37.25 a3.5,3.5 0 1,1 0,1 Z"; +} + +.progress-indicator:indeterminate .segment7 { + -fx-shape: "M11.25 45.48 a3.5,3.5 0 1,1 0,1 Z"; +} + +.progress-indicator:indeterminate .segment8 { + -fx-shape: "M22.5 48.5 a3.5,3.5 0 1,1 0,1 Z"; +} + +.progress-indicator:indeterminate .segment9 { + -fx-shape: "M33.75 45.48 a3.5,3.5 0 1,1 0,1 Z"; +} + +.progress-indicator:indeterminate .segment10 { + -fx-shape: "M41.98 37.25 a3.5,3.5 0 1,1 0,1 Z"; +} + +.progress-indicator:indeterminate .segment11 { + -fx-shape: "M45.0 26.0 a3.5,3.5 0 1,1 0,1 Z"; +} + +/******************************************************************************* + * * + * Text COMMON * + * * + ******************************************************************************/ + +.text-input { + -fx-text-fill: -fx-text-inner-color; + -fx-highlight-fill: derive(-fx-control-inner-background, -20%); + -fx-highlight-text-fill: -fx-text-inner-color; + -fx-prompt-text-fill: derive(-fx-control-inner-background, -30%); + -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border), + linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background); + -fx-background-insets: 0, 1; + -fx-background-radius: 3, 2; + -fx-cursor: text; + -fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */ +} + +.text-input:focused { + -fx-highlight-fill: -fx-accent; + -fx-highlight-text-fill: white; + -fx-background-color: -fx-focus-color, + -fx-control-inner-background, + -fx-faint-focus-color, + linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background); + -fx-background-insets: -0.2, 1, -1.4, 3; + -fx-background-radius: 3, 2, 4, 0; + -fx-prompt-text-fill: transparent; +} + +/******************************************************************************* + * * + * TextArea * + * * + ******************************************************************************/ + +.text-area { + -fx-padding: 0; + -fx-cursor: default; + -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border), + derive(-fx-base, -1%); +} + +.text-area > .scroll-pane { + -fx-background-color: null; +} + +.text-area > .scroll-pane > .scroll-bar:horizontal { + -fx-background-radius: 0 0 2 2; +} + +.text-area > .scroll-pane > .scroll-bar:vertical { + -fx-background-radius: 0 2 2 0; +} + +.text-area > .scroll-pane > .corner { + -fx-background-radius: 0 0 2 0; +} + +.text-area .content { + /*the is 1px less top and bottom than TextInput because of scrollpane border */ + -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */ + -fx-cursor: text; + -fx-background-color: linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background); + -fx-background-radius: 2; +} + +.text-area:focused .content { + -fx-background-color: -fx-control-inner-background, + -fx-faint-focus-color, + linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background); + -fx-background-insets: 0, 0, 2; + -fx-background-radius: 2, 1, 0; +} + +/******************************************************************************* + * * + * HTML Editor * + * * + ******************************************************************************/ + +.html-editor-foreground { + -fx-color-label-visible: false; + -fx-color-rect-x: 1; + -fx-color-rect-y: 1; + -fx-color-rect-width: 4; + -fx-color-rect-height: 3; + -fx-graphic: url("HTMLEditor-Text-Color.png"); +} + +.html-editor-background { + -fx-color-label-visible: false; + -fx-color-rect-x: 1; + -fx-color-rect-y: 1; + -fx-color-rect-width: 4; + -fx-color-rect-height: 3; + -fx-graphic: url("HTMLEditor-Background-Color.png"); +} + +.color-picker.html-editor-foreground > .color-picker-label > .picker-color > .picker-color-rect, +.color-picker.html-editor-background > .color-picker-label > .picker-color > .picker-color-rect { + -fx-stroke: null; +} + +.html-editor .button, +.html-editor .toggle-button { + -fx-padding: 0.333333em 0.416667em 0.333333em 0.416667em; /* 4 5 4 5 */ +} + +.html-editor-cut { + -fx-graphic: url("HTMLEditor-Cut.png"); +} + +.html-editor-copy { + -fx-graphic: url("HTMLEditor-Copy.png"); +} + +.html-editor-paste { + -fx-graphic: url("HTMLEditor-Paste.png"); +} + +.html-editor-align-left { + -fx-graphic: url("HTMLEditor-Left.png"); +} + +.html-editor-align-center { + -fx-graphic: url("HTMLEditor-Center.png"); +} + +.html-editor-align-right { + -fx-graphic: url("HTMLEditor-Right.png"); +} + +.html-editor-align-justify { + -fx-graphic: url("HTMLEditor-Justify.png"); +} + +.html-editor-outdent { + -fx-graphic: url("HTMLEditor-Outdent.png"); +} + +.html-editor-indent { + -fx-graphic: url("HTMLEditor-Indent.png"); +} + +.html-editor-bullets { + -fx-graphic: url("HTMLEditor-Bullets.png"); +} + +.html-editor-numbers { + -fx-graphic: url("HTMLEditor-Numbered.png"); +} + +.html-editor-bold { + -fx-graphic: url("HTMLEditor-Bold.png"); +} + +.html-editor-italic { + -fx-graphic: url("HTMLEditor-Italic.png"); +} + +.html-editor-underline { + -fx-graphic: url("HTMLEditor-Underline.png"); +} + +.html-editor-strike { + -fx-graphic: url("HTMLEditor-Strikethrough.png"); +} + +.html-editor-hr { + -fx-graphic: url("HTMLEditor-Break.png"); +} + +/******************************************************************************* + * * + * PopupMenu * + * * + ******************************************************************************/ + +.context-menu { + -fx-background-color: linear-gradient(to bottom, + derive(-fx-color, -17%), + derive(-fx-color, -30%) + ), + -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-padding: 0.333333em 0.083333em 0.333333em 0.083333em; /* 4 1 8 1 */ + -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 12, 0.0, 0, 8); +} + +.context-menu .separator:horizontal .line { + -fx-border-color: -fx-box-border transparent transparent transparent; + -fx-border-insets: 1 0 0 0; +} + +.context-menu > .scroll-arrow { + -fx-padding: 0.416667em 0.416667em 0.416667em 0.416667em; /* 5 */ + -fx-background-color: transparent; +} + +.context-menu > .scroll-arrow:hover { + -fx-background: -fx-selection-bar; + -fx-background-color: -fx-background; + -fx-text-fill: -fx-text-background-color; +} + +.context-menu:show-mnemonics > .mnemonic-underline { + -fx-stroke: -fx-text-fill; +} + +/******************************************************************************* + * * + * Menu * + * * + ******************************************************************************/ + +.menu { + -fx-background-color: transparent; + -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */ +} + +.menu:show-mnemonics > .mnemonic-underline { + -fx-stroke: -fx-text-fill; +} + +.menu > .right-container > .arrow { + -fx-padding: 0.458em 0.167em 0.458em 0.167em; /* 4.5 2 4.5 2 */ + -fx-background-color: -fx-mark-color; + -fx-shape: "M0,-4L4,0L0,4Z"; + -fx-scale-shape: false; +} + +.menu:focused > .right-container > .arrow { + -fx-background-color: white; +} + +.menu-up-arrow { + -fx-padding: 0.666667em 0.416667em 0.0em 0.416667em; /* 8 5 0 5 */ + -fx-background-color: derive(-fx-color, -2%); + -fx-shape: "M0 1 L1 1 L.5 0 Z"; + -fx-effect: innershadow(two-pass-box, rgba(0, 0, 0, 0.6), 4, 0.0, 0, 1); +} + +.menu-down-arrow { + -fx-background-color: derive(-fx-color, -2%); + -fx-padding: 0.666667em 0.416667em 0.0em 0.416667em; /* 8 5 0 5 */ + -fx-shape: "M0 0 L1 0 L.5 1 Z"; + -fx-effect: innershadow(two-pass-box, rgba(0, 0, 0, 0.6), 4, 0.0, 0, 1); +} + +/******************************************************************************* + * * + * MenuBar * + * * + ******************************************************************************/ + +.menu-bar { + -fx-padding: 0.0em 0.666667em 0.0em 0.666667em; /* 0 8 0 8 */ + -fx-spacing: 0.166667em; /* 2 */ + -fx-background-color: linear-gradient(to bottom, derive(-fx-base, 75%) 0%, -fx-outer-border 90%), + linear-gradient(to bottom, derive(-fx-base, 46.9%) 2%, derive(-fx-base, -2.1%) 95%); + -fx-background-insets: 0 0 0 0, 1 0 1 0; + -fx-background-radius: 0, 0; +} + +/* Show nothing for background of normal menu button in a menu bar */ +.menu-bar > .container > .menu-button { + -fx-background-radius: 0; + -fx-background-color: transparent; + -fx-background-insets: 0; +} + +/* Change padding of menu buttons when in menu bar */ +.menu-bar > .container > .menu-button > .label { + -fx-padding: 0; +} + +/* Hide the down arrow for a menu placed in a menubar */ +.menu-bar > .container > .menu-button > .arrow-button > .arrow { + -fx-padding: 0.167em 0 0.250em 0; /* 2 0 3 0 */ + -fx-background-color: transparent; + -fx-shape: null; +} + +.menu-bar > .container > .menu > .arrow-button { + -fx-padding: 0.500em 0 0.500em 0; /* 6 0 6 0 */ +} + +.menu-bar > .container > .menu-button:hover, +.menu-bar > .container > .menu-button:focused, +.menu-bar > .container > .menu-button:showing { + -fx-background: -fx-selection-bar; + -fx-background-color: -fx-background; +} + +.menu-bar > .container > .menu-button:hover > .label, +.menu-bar > .container > .menu-button:focused > .label, +.menu-bar > .container > .menu-button:showing > .label { + -fx-text-fill: -fx-text-background-color; +} + +.menu-bar:show-mnemonics > .mnemonic-underline { + -fx-stroke: -fx-text-fill; +} + +/******************************************************************************* + * * + * MenuItem * + * * + ******************************************************************************/ + +.menu-item { + -fx-background-color: transparent; + -fx-padding: 0.333333em 0.41777em 0.333333em 0.41777em; /* 4 5 4 5 */ +} + +.menu-item > .left-container { + -fx-padding: 0.458em 0.791em 0.458em 0.458em; +} + +.menu-item > .graphic-container { + -fx-padding: 0em 0.333em 0em 0em; +} + +.menu-item > .label { + -fx-padding: 0em 0.5em 0em 0em; + -fx-text-fill: -fx-text-base-color; +} + +.menu-item:focused { + -fx-background: -fx-selection-bar; + -fx-background-color: -fx-background; + -fx-text-fill: -fx-text-background-color; +} + +.menu-item:focused > .label { + -fx-text-fill: white; +} + +.menu-item > .right-container { + -fx-padding: 0em 0em 0em 0.5em; +} + +.menu-item:show-mnemonics > .mnemonic-underline { + -fx-stroke: -fx-text-fill; +} + +.radio-menu-item:checked > .left-container > .radio { + -fx-background-color: -fx-mark-color; + -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z"; + -fx-scale-shape: false; +} + +.radio-menu-item:focused:checked > .left-container > .radio { + -fx-background-color: white; +} + +.check-menu-item:checked > .left-container > .check { + -fx-background-color: -fx-mark-color; + -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z"; + -fx-scale-shape: false; +} + +.check-menu-item:focused:checked > .left-container > .check { + -fx-background-color: white; +} + +/******************************************************************************* + * * + * ChoiceBox * + * * + ******************************************************************************/ + +/*.choice-box > .open-button > .arrow { + -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; + -fx-background-insets: 1 0 -1 0, 0; + -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; 2 3.5 2 3.5 + -fx-shape: "M 0 0 h 7 l -3.5 4 z"; +}*/ +.choice-box > .context-menu { + -fx-background-radius: 6, 5, 4; +} + +/******************************************************************************* + * * + * TabPane * + * * + ******************************************************************************/ + +.tab-pane { + -fx-tab-min-height: 1.8333em; /* 22 */ + -fx-tab-max-height: 1.8333em; /* 22 */ +} + +.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label { + -fx-alignment: CENTER; + -fx-text-fill: -fx-text-base-color; +} + +.tab-pane > .tab-header-area > .headers-region > .tab { + -fx-background-insets: 0 1 1 0, 1 2 1 1, 2 3 1 2; + -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0; + -fx-padding: 0.083333em 0.5em 0.0769em 0.5em; /* 1 6 0.99 6 */ +} + +.tab-pane > .tab-header-area > .headers-region > .tab:top { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; +} + +.tab-pane > .tab-header-area > .headers-region > .tab:right { + -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup; +} + +.tab-pane > .tab-header-area > .headers-region > .tab:bottom { + -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup; +} + +.tab-pane > .tab-header-area > .headers-region > .tab:left { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; +} + +.tab-pane > .tab-header-area > .headers-region > .tab:hover { + -fx-color: -fx-hover-base; +} + +.tab-pane > .tab-header-area > .headers-region > .tab:selected { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-background; + -fx-background-insets: 0 1 1 0, 1 2 0 1, 2 3 0 2; +} + +.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator { + -fx-border-width: 1, 1; + -fx-border-color: -fx-focus-color, -fx-faint-focus-color; + -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3; + -fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */ +} + +.tab-pane:focused > .tab-header-area > .headers-region > .tab:bottom:selected .focus-indicator { + -fx-border-insets: -6 -5 -4 -4, -5 -3 -2 -2; +} + +.tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover { + -fx-color: -fx-base; +} + +.tab-pane > .tab-header-area > .tab-header-background { + /* TODO should not be using text-box-border I think? */ + -fx-background-color: -fx-outer-border, + -fx-text-box-border, + linear-gradient(from 0px 0px to 0px 5px, -fx-text-box-border, derive(-fx-text-box-border, 30%)); +} + +.tab-pane:top > .tab-header-area > .tab-header-background { + -fx-background-insets: 0, 0 0 1 0, 1; +} + +.tab-pane:bottom > .tab-header-area > .tab-header-background { + -fx-background-insets: 0, 1 0 0 0, 1; +} + +.tab-pane:left > .tab-header-area > .tab-header-background { + -fx-background-insets: 0, 0 1 0 0, 1; +} + +.tab-pane:right > .tab-header-area > .tab-header-background { + -fx-background-insets: 0, 0 0 0 1, 1; +} + +.tab-pane:top > .tab-header-area { + /*-fx-padding: 0.416667em 0.166667em 0.0em 0.416667em; *//* 5 2 0 5 */ + -fx-padding: 0.416667em 5 0.0em 0.416667em; /* 5 2 0 5 */ +} + +.tab-pane:bottom > .tab-header-area { + -fx-padding: 0 0.166667em 0.416667em 0.416667em; /* 0 2 5 5 */ +} + +.tab-pane:left > .tab-header-area { + -fx-padding: 0.416667em 0.0em 0.166667em 0.416667em; /* 5 0 2 5 */ +} + +.tab-pane:right > .tab-header-area { + -fx-padding: 0.416667em 0.416667em 0.166667em 0.0em; /* 5 5 2 0 */ +} + +/* TODO: scaling the shape seems to make it way too large */ +.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button { + -fx-background-color: -fx-mark-color; + -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"; + -fx-scale-shape: false; + -fx-effect: dropshadow(two-pass-box, rgba(255, 255, 255, 0.4), 1, 0.0, 0, 1); +} + +.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button:hover { + -fx-background-color: derive(-fx-mark-color, -30%); +} + +/* CONTROL BUTTONS */ +.tab-pane > .tab-header-area > .control-buttons-tab > .container { + -fx-padding: 3 0 0 0; +} + +.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-background-insets: -1 0 5 0, 0 1 6 1, 1 2 7 2; + -fx-padding: 4 4 9 4; + -fx-background-radius: 10; +} + +.tab-pane:bottom > .tab-header-area > .control-buttons-tab > .container > .tab-down-button { + -fx-padding: -5 4 4 4; /* TODO convert to ems */ +} + +/* FLOATING TABS CUSTOMISATION */ +.tab-pane.floating > .tab-header-area > .tab-header-background { + -fx-background-color: null; +} + +.tab-pane.floating > .tab-header-area { + -fx-background-color: null; +} + +.tab-pane.floating > .tab-content-area { + -fx-background-color: -fx-outer-border, -fx-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 2, 0; + -fx-padding: 2; +} + +/******************************************************************************* + * * + * ComboBox * + * * + ******************************************************************************/ + +/* Customise the ListCell that appears in the ComboBox button itself */ +.combo-box > .list-cell { + -fx-background: transparent; + -fx-background-color: transparent; + -fx-text-fill: -fx-text-base-color; + -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */ +} + +.combo-box-base > .arrow-button { + -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0; + -fx-padding: 0.5em 0.667em 0.5em 0.833333em; /* 6 8 6 10 */ + -fx-background-color: transparent; +} + +/******************************************************************************* + * * + * Editable ComboBox * + * * + * The editable ComboBox TextBox inherits its properties from the TextBox * + * Control. Only the properties with values that are different from the * + * TextBox are specified here. * + * * + ******************************************************************************/ + +.combo-box-base:editable > .arrow-button, +.date-picker > .arrow-button { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-background-insets: 1 1 1 0, 1, 2; + -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0; +} + +.combo-box-base:editable > .text-field, +.date-picker > .text-field { + -fx-background-color: -fx-control-inner-background; + -fx-background-insets: 1 0 1 1; + -fx-background-radius: 2 0 0 2; +} + +.combo-box-base:editable:contains-focus, +.date-picker:contains-focus { + -fx-background-color: -fx-focus-color; + -fx-background-insets: -0.2; + -fx-background-radius: 3; +} + +.combo-box-base:editable:focused > .text-field, +.combo-box-base:editable > .text-field:focused, +.date-picker:focused > .text-field, +.date-picker > .text-field:focused { + -fx-background-color: -fx-control-inner-background, + -fx-faint-focus-color, + linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background); + -fx-background-insets: 1 0 1 1, 1 0 1 1, 3 2 3 3; + -fx-background-radius: 2 0 0 2, 1 0 0 1, 0; +} + +.combo-box-base:editable:contains-focus > .arrow-button, +.date-picker:contains-focus > .arrow-button { + -fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color; + -fx-background-insets: 1, 2, 1, 2.6; + -fx-background-radius: 0 2 2 0, 0 1 1 0, 0 1 1 0, 0 1 1 0; +} + +/* -------------- STYLES FOR THE DEFAULT LISTVIEW-BASED COMBOBOX ------------- */ + +.combo-box-popup > .list-view { + -fx-background-color: linear-gradient(to bottom, + derive(-fx-color, -17%), + derive(-fx-color, -30%) + ), + -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 12, 0.0, 0, 8); +} + +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell { + -fx-padding: 4 0 4 5; + /* No alternate highlighting */ + -fx-background: -fx-control-inner-background; +} + +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected { + -fx-background: -fx-selection-bar-non-focused; + -fx-background-color: -fx-background; +} + +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover, +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; +} + +.combo-box-popup > .list-view > .placeholder > .label { + -fx-text-fill: derive(-fx-control-inner-background, -30%); +} + +/******************************************************************************* + * * + * TitledPane * + * * + ******************************************************************************/ + +.titled-pane { + -fx-text-fill: -fx-text-base-color; +} + +.titled-pane > .title { + -fx-background-color: linear-gradient(to bottom, + derive(-fx-color, -15%) 95%, + derive(-fx-color, -25%) 100% + ), + -fx-inner-border, -fx-body-color; + -fx-background-insets: 0, 1, 2; + -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0; + -fx-padding: 0.3333em 0.75em 0.3333em 0.75em; /* 4 9 4 9 */ +} + +/* alternative focus using the ring around the entire title area */ +/*.titled-pane:focused > .title { + -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; + -fx-background-insets: 0, 0.7, 2, 3; +}*/ +/* focus purely on the arrow */ +.titled-pane:focused > .title > .arrow-button > .arrow { + -fx-background-color: -fx-focus-color, -fx-mark-color; + -fx-background-insets: -1, 0; + -fx-effect: dropshadow(two-pass-box, -fx-focus-color, 5, 0.2, 0, 0); +} + +.titled-pane > .title > .arrow-button { + -fx-background-color: null; + -fx-background-insets: 0; + -fx-background-radius: 0; + -fx-padding: 0.0em 0.583em 0.0em 0.0em; /* 0 7 0 0 */ +} + +.titled-pane > .title > .arrow-button > .arrow { + -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; + -fx-background-insets: 1 0 -1 0, 0; + -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */ + -fx-shape: "M 0 0 h 7 l -3.5 4 z"; +} + +.titled-pane > .title:hover { + -fx-color: -fx-hover-base; +} + +/* alternative content using a border and a grad to transparent background - why should TitledPane content have a colour? */ +.titled-pane > *.content { + -fx-border-color: -fx-box-border; + -fx-border-insets: -1 0 0 0; + -fx-background-color: linear-gradient(from 0px 0px to 0px 5px, derive(-fx-background, -6%), -fx-background); +} + +/******************************************************************************* + * * + * Accordion * + * * + ******************************************************************************/ + +.accordion > .titled-pane > .title { + -fx-background-color: linear-gradient(to bottom, + derive(-fx-color, -15%) 95%, + derive(-fx-color, -25%) 100% + ), + -fx-inner-border, + -fx-body-color; + -fx-background-insets: -1 0 0 0, 0 1 1 1, 1 2 2 2; + -fx-background-radius: 0, 0, 0; +} + +.accordion > .first-titled-pane > .title { + -fx-background-insets: 0, 1, 2; +} + +/******************************************************************************* + * * + * SplitPane * + * * + ******************************************************************************/ + +.split-pane > .split-pane-divider { + -fx-padding: 0 0.25em 0 0.25em; /* 0 3 0 3 */ +} + +/* horizontal the two nodes are placed to the left/right of each other. */ +.split-pane:horizontal > .split-pane-divider { + -fx-background-color: -fx-box-border, -fx-inner-border-horizontal; + -fx-background-insets: 0, 0 1 0 1; +} + +/* vertical the two nodes are placed on top of each other. */ +.split-pane:vertical > .split-pane-divider { + -fx-background-color: -fx-box-border, -fx-inner-border; + -fx-background-insets: 0, 1 0 1 0; +} + +/******************************************************************************* + * * + * ColorPicker * + * * + ******************************************************************************/ + +.color-picker > .arrow-button { + -fx-background-color: null; + -fx-padding: 0.5em 0.667em 0.5em 0; /* 6 8 6 0 */ +} + +.color-picker.split-button > .arrow-button { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-background-insets: 1 1 1 0, 1, 2; + -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0; +} + +.color-picker.split-button:focused > .arrow-button { + /*-fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color !important;*/ + /*-fx-background-insets: 0, 1, 2;*/ + -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color; + -fx-background-insets: 1 1 1 0, 1, 2, 1, 2.6; + -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0, 0 1 1 0, 0 1 1 0; +} + +.color-picker.split-button > .color-picker-label, +.color-picker.split-button:focused > .color-picker-label { + -fx-background-color: null; +} + +.color-picker.split-button > .arrow-button { + /*-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color !important;*/ + -fx-padding: 0.5em 0.667em 0.5em 0.667em; /* 6 8 6 8 */ +} + +.color-picker > .color-picker-label > .picker-color > .picker-color-rect { + -fx-stroke: -fx-box-border; +} + +.color-palette { + -fx-spacing: 0.833333em; /* 10px */ + -fx-background-color: linear-gradient(to bottom, + derive(-fx-color, -17%), + derive(-fx-color, -30%) + ), + linear-gradient(to bottom, + derive(-fx-background, 10%) 0%, + derive(-fx-background, -5%) 12%, + derive(-fx-background, 15%) 88%, + derive(-fx-background, -10%) 100%); + -fx-background-insets: 0, 1; + -fx-background-radius: 6, 5; + -fx-padding: 1em; /* 12 */ + -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 12, 0.0, 0, 8); +} + +.color-palette > .color-picker-grid { + -fx-padding: 0.5px; + -fx-snap-to-pixel: false; +} + +.color-palette > .color-picker-grid > .color-square { + -fx-background-color: transparent; + -fx-padding: 0.5px; +} + +/* the color over which the user is hovering */ +.color-palette > .color-picker-grid > .color-square:focused, +.color-palette > .color-picker-grid > .color-square:selected:focused { + -fx-background-color: -fx-faint-focus-color, -fx-focus-color; + -fx-background-insets: -2, 0; + -fx-background-radius: 5, 0; + -fx-scale-x: 1.5; + -fx-scale-y: 1.5; +} + +/* the currently selected color */ +.color-palette > .color-picker-grid > .color-square:selected { + -fx-background-color: black; +} + +/* ------- CUSTOM COLOR DIALOG ------- */ +.custom-color-dialog > .color-rect-pane { + -fx-spacing: 0.75em; + -fx-pref-height: 16.666667em; + -fx-alignment: top-left; + -fx-fill-height: true; +} + +.custom-color-dialog .color-rect-pane .color-rect { + -fx-min-width: 16.666667em; + -fx-min-height: 16.666667em; +} + +.custom-color-dialog .color-rect-pane .color-rect-border { + -fx-border-color: derive(-fx-base, -20%); +} + +.custom-color-dialog > .color-rect-pane #color-rect-indicator { + -fx-background-color: null; + -fx-border-color: white; + -fx-border-radius: 0.4166667em; + -fx-translate-x: -0.4166667em; + -fx-translate-y: -0.4166667em; + -fx-pref-width: 0.833333em; + -fx-pref-height: 0.833333em; + -fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1); +} + +.custom-color-dialog > .color-rect-pane > .color-bar { + -fx-min-width: 1.666667em; + -fx-min-height: 16.666667em; + -fx-max-width: 1.666667em; + -fx-border-color: derive(-fx-base, -20%); +} + +.custom-color-dialog > .color-rect-pane > .color-bar > #color-bar-indicator { + -fx-border-radius: 0.333333em; + -fx-border-color: white; + -fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1); + -fx-pref-width: 2em; + -fx-pref-height: 0.833333em; + -fx-translate-x: -0.1666667em; + -fx-translate-y: -0.4166667em; +} + +.custom-color-dialog { + -fx-background-color: -fx-background; + -fx-padding: 1.25em; + -fx-spacing: 1.25em; +} + +.custom-color-dialog .controls-pane .current-new-color-grid #current-new-color-border { + -fx-border-color: derive(-fx-base, -20%); + -fx-border-width: 2px; +} + +.custom-color-dialog .controls-pane .current-new-color-grid .color-rect { + -fx-min-width: 10.666667em; + -fx-min-height: 1.75em; + -fx-pref-width: 10.666667em; + -fx-pref-height: 1.75em; +} + +.custom-color-dialog .transparent-pattern { + -fx-background-image: url("pattern-transparent.png"); + -fx-background-repeat: repeat; + -fx-background-size: auto; +} + +.custom-color-dialog .controls-pane #spacer1 { + -fx-min-height: 0.1666667em; + -fx-max-height: 0.1666667em; + -fx-pref-height: 0.1666667em; +} + +.custom-color-dialog .controls-pane #spacer2 { + -fx-min-height: 1em; + -fx-max-height: 1em; + -fx-pref-height: 1em; +} + +.custom-color-dialog .controls-pane #settings-pane { + -fx-hgap: 0.4166667em; + -fx-vgap: 0.3333333em; +} + +.custom-color-dialog .controls-pane #settings-pane .settings-label { + -fx-min-width: 5.75em; +} + +.custom-color-dialog .controls-pane #settings-pane .settings-unit { + -fx-max-width: 1em; +} + +.custom-color-dialog .controls-pane #settings-pane .slider { + -fx-pref-width: 8.25em; +} + +.custom-color-dialog .controls-pane .color-input-field { + -fx-pref-column-count: 3; + -fx-max-width: 3.25em; + -fx-min-width: 3.25em; + -fx-pref-width: 3.25em; +} + +.custom-color-dialog .controls-pane .web-field { + -fx-pref-column-count: 6; + -fx-pref-width: 8.25em; +} + +.custom-color-dialog .controls-pane #spacer-side { + -fx-min-width: 0.5em; + -fx-pref-width: 0.5em; +} + +.custom-color-dialog .controls-pane #spacer-bottom { + -fx-pref-height: 0.833333em; + -fx-min-height: 0.833333em; +} + +.custom-color-dialog .controls-pane .customcolor-controls-background { + -fx-background-color: -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: 0.8333333em 0 0.4166667em 0, + 1em 0.166667em 0.5833333em 0.166667em; + -fx-background-radius: 0.3333333em, 0.166667em; +} + +.custom-color-dialog .controls-pane .current-new-color-grid .label { + -fx-padding: 0 0 0 0.4166667em; +} + +.custom-color-dialog .controls-pane #buttons-hbox { + -fx-spacing: 0.333333em; + -fx-padding: 1em 0 0 0; + -fx-alignment: bottom-right; +} + +/******************************************************************************* + * * + * Pagination * + * * + ******************************************************************************/ + +.pagination { + -fx-padding: 0; + -fx-arrows-visible: true; + -fx-tooltip-visible: true; + -fx-page-information-visible: true; + -fx-page-information-alignment: bottom; + -fx-arrow-button-gap: 0; +} + +.pagination > .page { + -fx-background-color: transparent; +} + +.pagination > .pagination-control { + -fx-background-color: transparent; + -fx-font-size: 0.82em; +} + +.pagination > .pagination-control > .control-box { + -fx-padding: 5px 0 0 0; + -fx-spacing: 2; + -fx-alignment: center; +} + +.pagination > .pagination-control > .control-box > .left-arrow-button { + -fx-background-radius: 3 0 0 3, 3 0 0 3, 2 0 0 2, 1 0 0 1; + -fx-background-insets: 0 0 -1 5, 0 0 0 5, 1 1 1 6, 2 2 2 7; + -fx-padding: 0em 0.417em 0em 0.833em; /* 0 5 0 10 */ +} + +.pagination > .pagination-control > .control-box > .right-arrow-button { + -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0; + -fx-background-insets: 0 5 -1 0, 0 5 0 0, 1 6 1 1, 2 7 2 2; + -fx-padding: 0em 0.75em 0em 0.417em; /* 0 9 0 5 */ +} + +.pagination > .pagination-control .left-arrow { + -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; + -fx-background-insets: 1 0 -1 0, 0; + -fx-padding: 0.375em 0.291em 0.375em 0.291em; + -fx-shape: "M 0 0 L -13 7 L 0 13 z"; + -fx-scale-shape: true; +} + +.pagination > .pagination-control .right-arrow { + -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; + -fx-background-insets: 1 0 -1 0, 0; + -fx-padding: 0.375em 0.291em 0.375em 0.291em; + -fx-shape: "M 0 0 L 13 7 L 0 13 z"; + -fx-scale-shape: true; +} + +.pagination > .pagination-control > .control-box > .bullet-button { + -fx-background-radius: 0, 4em, 4em, 4em, 4em; + -fx-padding: 0.333em; + -fx-background-color: transparent, -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-background-insets: 0, 5, 6, 7; +} + +.pagination > .pagination-control > .control-box > .bullet-button:selected { + -fx-base: -fx-accent; +} + +.pagination.bullet > .pagination-control > .control-box { + -fx-spacing: 0; + -fx-alignment: center; +} + +.pagination.bullet > .pagination-control > .control-box > .left-arrow-button { + -fx-background-radius: 4em; + -fx-background-insets: 0, 1, 2; + -fx-padding: 0em 0.25em 0em 0.083em; /* 0 3 0 1 */ +} + +.pagination.bullet > .pagination-control > .control-box > .right-arrow-button { + -fx-background-radius: 4em; + -fx-background-insets: 0, 1, 2; + -fx-padding: 0em 0.083em 0em 0.25em; /* 0 1 0 3 */ +} + +.pagination > .pagination-control > .control-box > .number-button { + -fx-background-radius: 0; + -fx-padding: 0.166667em 0.25em 0.25em 0.333em; + -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color; +} + +.pagination > .pagination-control > .control-box > .number-button:selected { + -fx-base: -fx-accent; +} + +.pagination > .pagination-control > .page-information { + -fx-padding: 0.416em 0 0 0; +} + +/******************************************************************************* + * * + * Customised CSS for controls placed directly within cells * + * * + ******************************************************************************/ + +.cell > .choice-box { + -fx-background-color: transparent; + -fx-background-insets: 0; + -fx-background-radius: 0; + -fx-padding: 0.0em 0.5em 0.0em 0.0em; /* 0 6 0 0 */ + -fx-alignment: CENTER_LEFT; + -fx-content-display: LEFT; +} + +.cell > .choice-box > .label { + -fx-padding: 0em 0.333333em 0.0em 0.333333; /* 2 4 3 6 */ +} + +.cell:focused:selected > .choice-box > .label { + -fx-text-fill: white; +} + +.cell:focused:selected > .choice-box > .open-button > .arrow { + -fx-background-color: -fx-mark-highlight-color, white; +} + +/******************************************************************************* + * * + * List, Tree, Table COMMON * + * * + ******************************************************************************/ + +/* remove double borders from scrollbars */ +.list-view > .virtual-flow > .scroll-bar:vertical, +.tree-view > .virtual-flow > .scroll-bar:vertical, +.table-view > .virtual-flow > .scroll-bar:vertical, +.tree-table-view > .virtual-flow > .scroll-bar:vertical { + -fx-background-insets: 0, 0 0 0 1; + -fx-padding: -1 -1 -1 0; +} + +.list-view > .virtual-flow > .scroll-bar:horizontal, +.tree-view > .virtual-flow > .scroll-bar:horizontal, +.table-view > .virtual-flow > .scroll-bar:horizontal, +.tree-table-view > .virtual-flow > .scroll-bar:horizontal { + -fx-background-insets: 0, 1 0 0 0; + -fx-padding: 0 -1 -1 -1; +} + +.list-view > .virtual-flow > .corner, +.tree-view > .virtual-flow > .corner, +.table-view > .virtual-flow > .corner, +.tree-table-view > .virtual-flow > .corner { + -fx-background-color: derive(-fx-base, -1%); +} + +/* standard cell */ +.list-cell, +.tree-cell { + -fx-background: -fx-control-inner-background; + -fx-background-color: -fx-background; + -fx-text-fill: -fx-text-background-color; +} + +/* Selected rows */ +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected, +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected, +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected { + -fx-background: -fx-selection-bar; + -fx-table-cell-border-color: derive(-fx-selection-bar, 20%); +} + +/* Selected when control is not focused */ +.list-cell:filled:selected, +.tree-cell:filled:selected, +.table-row-cell:filled:selected, +.tree-table-row-cell:filled:selected, +.table-row-cell:filled > .table-cell:selected, +.tree-table-row-cell:filled > .tree-table-cell:selected { + -fx-background: -fx-selection-bar-non-focused; + -fx-table-cell-border-color: derive(-fx-selection-bar-non-focused, 20%); +} + +/* focused cell (keyboard navigation) */ +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused, +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:focused, +.table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:focused, +.tree-table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:focused, +.table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused, +.tree-table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused { + -fx-background-color: -fx-background, -fx-cell-focus-inner-border, -fx-background; + -fx-background-insets: 0, 1, 2; +} + +/******************************************************************************* + * * + * ListView and ListCell * + * * + ******************************************************************************/ + +.list-cell { + -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */ +} + +.list-cell:odd { + -fx-background: -fx-control-inner-background-alt; +} + +/******************************************************************************* + * * + * TreeView and TreeCell * + * * + ******************************************************************************/ + +.tree-cell { + -fx-padding: 0.25em; /* 3 */ + -fx-indent: 1em; +} + +.tree-cell .label { + -fx-padding: 0.0em 0.0em 0.0em 0.25em; /* 0 0 0 3 */ +} + +.tree-cell > .tree-disclosure-node, +.tree-table-row-cell > .tree-disclosure-node { + -fx-padding: 4 6 4 8; + -fx-background-color: transparent; +} + +.tree-cell > .tree-disclosure-node > .arrow, +.tree-table-row-cell > .tree-disclosure-node > .arrow { + -fx-background-color: -fx-text-background-color; + -fx-padding: 0.333333em 0.229em 0.333333em 0.229em; /* 4 */ + -fx-shape: "M 0 -3.5 L 4 0 L 0 3.5 z"; +} + +.tree-cell:expanded > .tree-disclosure-node > .arrow, +.tree-table-row-cell:expanded > .tree-disclosure-node > .arrow { + -fx-rotate: 90; +} + +/******************************************************************************* + * * + * TableView * + * * + ******************************************************************************/ + +.table-view, +.tree-table-view { + /* Constants used throughout the tableview. */ + -fx-table-header-border-color: -fx-box-border; + -fx-table-cell-border-color: derive(-fx-color, 5%); +} + +/***** ROW CELLS **************************************************************/ +/* Each row in the table is a table-row-cell. Inside a table-row-cell is any + number of table-cell. */ +.table-row-cell { + -fx-background: -fx-control-inner-background; + -fx-background-color: -fx-table-cell-border-color, -fx-background; + -fx-background-insets: 0, 0 0 1 0; + -fx-padding: 0; + -fx-text-fill: -fx-text-background-color; +} + +.table-row-cell:odd { + -fx-background: -fx-control-inner-background-alt; +} + +/***** INDIVIDUAL CELLS ********************************************************/ +.table-cell { + -fx-padding: 0.166667em; /* 2px, plus border adds 1px */ + -fx-background-color: null; + -fx-border-color: transparent -fx-table-cell-border-color transparent transparent; + -fx-cell-size: 2.0em; /* 24 */ + -fx-text-fill: -fx-text-background-color; +} + +.table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected, +.tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected { + -fx-background-color: -fx-table-cell-border-color, -fx-background; + -fx-background-insets: 0, 0 0 1 0; +} + +/* When in constrained resize mode, the right-most visible cell should not have + a right-border, as it is not possible to get this cleanly out of view without + introducing horizontal scrollbars (see RT-14886). */ +.table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:last-visible, +.tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible { + -fx-border-color: transparent; +} + +/***** HEADER **********************************************************************/ +/* The column-resize-line is shown when the user is attempting to resize a column. */ +.table-view .column-resize-line, +.tree-table-view .column-resize-line { + -fx-background: -fx-accent; + -fx-background-color: -fx-background; + -fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */ +} + +/* This is the area behind the column headers. An ideal place to specify background + and border colors for the whole area (not individual column-header's). */ +.table-view .column-header-background, +.tree-table-view > .column-header-background { + -fx-background-color: -fx-inner-border, -fx-body-color; + -fx-background-insets: 0, 1; +} + +/* The column header row is made up of a number of column-header, one for each + TableColumn, and a 'filler' area that extends from the right-most column + to the edge of the tableview, or up to the 'column control' button. */ +.table-view .column-header, +.tree-table-view .column-header, +.table-view .filler, +.tree-table-view .filler, +.table-view > .column-header-background > .show-hide-columns-button, +.tree-table-view > .column-header-background > .show-hide-columns-button, +.table-view:constrained-resize .filler, +.tree-table-view:constrained-resize .filler { + -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color; + -fx-background-insets: 0, 0 1 1 0, 1 2 2 1; + -fx-font-weight: bold; + -fx-size: 2em; + -fx-text-fill: -fx-selection-bar-text; + -fx-padding: 0.166667em; +} + +.table-view .filler, +.tree-table-view .filler, +.table-view:constrained-resize .filler, +.tree-table-view:constrained-resize .filler { + -fx-background-insets: 0, 0 0 1 0, 1 1 2 1; +} + +.table-view > .column-header-background > .show-hide-columns-button, +.tree-table-view > .column-header-background > .show-hide-columns-button { + -fx-background-insets: 0, 0 0 1 1, 1 1 2 2; +} + +.table-view .column-header .sort-order-dots-container, +.tree-table-view .column-header .sort-order-dots-container { + -fx-padding: 2 0 2 0; +} + +.table-view .column-header .sort-order, +.tree-table-view .column-header .sort-order { + -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */ +} + +.table-view .column-header .sort-order-dot, +.tree-table-view .column-header .sort-order-dot { + -fx-background-color: -fx-mark-color; + -fx-padding: 0.115em; + -fx-background-radius: 0.115em; +} + +.table-view .column-header .label, +.tree-table-view .column-header .label { + -fx-alignment: center; +} + +/* Plus Symbol */ +.table-view .show-hide-column-image, +.tree-table-view .show-hide-column-image { + -fx-background-color: -fx-mark-color; + -fx-padding: 0.25em; /* 3px */ + -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"; +} + +/* When a column is being 'dragged' to be placed in a different position, there + is a region that follows along the column header area to indicate where the + column will be dropped. This region can be styled using the .column-drag-header + name. */ +.table-view .column-drag-header, +.tree-table-view .column-drag-header { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-border-color: transparent; + -fx-opacity: 0.6; +} + +/* Semi-transparent overlay to indicate the column that is currently being moved */ +.table-view .column-overlay, +.tree-table-view .column-overlay { + -fx-background-color: darkgray; + -fx-opacity: 0.3; +} + +/* Header Sort Arrows */ +.table-view /*> column-header-background > nested-column-header >*/ .arrow, +.tree-table-view /*> column-header-background > nested-column-header >*/ .arrow { + -fx-background-color: -fx-mark-color; + -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */ + -fx-shape: "M 0 0 h 7 l -3.5 4 z"; +} + +/* This is shown when the table has no rows and/or no columns. */ +.table-view .empty-table, +.tree-table-view .empty-table { + -fx-background-color: white; + -fx-font-size: 1.166667em; /* 14pt - 2 more than the default font */ +} + +/******************************************************************************* + * * + * Table Cells * + * * + ******************************************************************************/ + +.check-box-table-cell { + -fx-alignment: center; + -fx-padding: 0; +} + +.check-box-table-cell > .check-box { + -fx-font-size: 0.8em; + -fx-opacity: 1; + -fx-padding: 0 0 1 0; +} + +.check-box-table-cell > .check-box > .box { + -fx-background-color: -fx-outer-border, -fx-background; + -fx-background-insets: 0, 1; +} + +.check-box-table-cell > .check-box:selected > .box > .mark { + -fx-background-color: -fx-text-background-color; + -fx-background-insets: 0; +} + +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .check-box-table-cell:selected > .check-box > .box, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .check-box-table-cell:selected > .check-box > .box, +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected > .check-box-table-cell > .check-box > .box, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .check-box-table-cell > .check-box > .box { + -fx-background-color: derive(-fx-accent, 40%), -fx-background; +} + +/******************************************************************************* + * * + * TreeTableView * + * * + * Note: A lot of the CSS for TreeTableView is included with the TreeView and * + * TableView CSS styles elsewhere in modena.css (as they are the same, just * + * targeting different CSS style classes). * + ******************************************************************************/ + +.tree-table-row-cell { + -fx-background: -fx-control-inner-background; + -fx-background-color: -fx-background; + -fx-padding: 0; + -fx-text-fill: -fx-text-background-color; + -fx-indent: 1em; +} + +.tree-table-cell { + /* tree-table-cell needs slightly different padding to make the text sit at + the right height for the arrow */ + -fx-padding: 0.25em 0.166667em 0.083em 0.166667em; /* 3 2 1 2 , plus border adds 1px */ + -fx-background-color: null; + -fx-border-color: transparent -fx-table-cell-border-color transparent transparent; + -fx-cell-size: 2.0em; /* 24 */ + -fx-text-fill: -fx-text-background-color; +} + +/******************************************************************************* + * * + * Tooltip * + * * + ******************************************************************************/ + +.tooltip { + -fx-background: rgba(30, 30, 30); + -fx-text-fill: white; + -fx-background-color: rgba(30, 30, 30, 0.8); + -fx-background-radius: 6px; + -fx-background-insets: 0; + -fx-padding: 0.667em 0.75em 0.667em 0.75em; /* 10px */ + -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.5), 10, 0.0, 0, 3); + -fx-font-size: 0.85em; +} + +/******************************************************************************* + * * + * Charts * + * * + ******************************************************************************/ + +.chart { + -fx-padding: 5px; +} + +.chart-content { + -fx-padding: 10px; +} + +.chart-title { + -fx-font-size: 1.4em; +} + +.chart-legend { + -fx-background-color: -fx-shadow-highlight-color, + linear-gradient(to bottom, derive(-fx-background, -10%), derive(-fx-background, -5%)), + linear-gradient(from 0px 0px to 0px 4px, derive(-fx-background, -4%), derive(-fx-background, 10%)); + -fx-background-insets: 0 0 -1 0, 0, 1; + -fx-background-radius: 4, 4, 3; + -fx-padding: 6px; +} + +/******************************************************************************* + * * + * Axis * + * * + ******************************************************************************/ + +.axis { + AXIS_COLOR: derive(-fx-background, -20%); + -fx-tick-label-font-size: 0.833333em; /* 10px */ + -fx-tick-label-fill: derive(-fx-text-background-color, 30%); +} + +.axis:top { + -fx-border-color: transparent transparent AXIS_COLOR transparent; +} + +.axis:right { + -fx-border-color: transparent transparent transparent AXIS_COLOR; +} + +.axis:bottom { + -fx-border-color: AXIS_COLOR transparent transparent transparent; +} + +.axis:left { + -fx-border-color: transparent AXIS_COLOR transparent transparent; +} + +.axis:top > .axis-label, +.axis:left > .axis-label { + -fx-padding: 0 0 4px 0; +} + +.axis:bottom > .axis-label, +.axis:right > .axis-label { + -fx-padding: 4px 0 0 0; +} + +.axis-tick-mark, +.axis-minor-tick-mark { + -fx-fill: null; + -fx-stroke: AXIS_COLOR; +} + +/******************************************************************************* + * * + * ChartPlot * + * * + ******************************************************************************/ + +.chart-vertical-grid-lines { + -fx-stroke: derive(-fx-background, -10%); + -fx-stroke-dash-array: 0.25em, 0.25em; +} + +.chart-horizontal-grid-lines { + -fx-stroke: derive(-fx-background, -10%); + -fx-stroke-dash-array: 0.25em, 0.25em; +} + +.chart-alternative-column-fill { + -fx-fill: null; + -fx-stroke: null; +} + +.chart-alternative-row-fill { + -fx-fill: null; + -fx-stroke: null; +} + +.chart-vertical-zero-line, +.chart-horizontal-zero-line { + -fx-stroke: derive(-fx-text-background-color, 40%); +} + +/******************************************************************************* + * * + * ScatterChart * + * * + ******************************************************************************/ + +.chart-symbol { + /* solid circle */ + -fx-background-color: CHART_COLOR_1; + -fx-background-radius: 5px; + -fx-padding: 5px; +} + +.default-color1.chart-symbol { + /* solid square */ + -fx-background-color: CHART_COLOR_2; + -fx-background-radius: 0; +} + +.default-color2.chart-symbol { + /* solid diamond */ + -fx-background-color: CHART_COLOR_3; + -fx-background-radius: 0; + -fx-padding: 7px 5px 7px 5px; + -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z"; +} + +.default-color3.chart-symbol { + /* cross */ + -fx-background-color: CHART_COLOR_4; + -fx-background-radius: 0; + -fx-background-insets: 0; + -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"; +} + +.default-color4.chart-symbol { + /* solid triangle */ + -fx-background-color: CHART_COLOR_5; + -fx-background-radius: 0; + -fx-background-insets: 0; + -fx-shape: "M5,0 L10,8 L0,8 Z"; +} + +.default-color5.chart-symbol { + /* hollow circle */ + -fx-background-color: CHART_COLOR_6, white; + -fx-background-insets: 0, 2; + -fx-background-radius: 5px; + -fx-padding: 5px; +} + +.default-color6.chart-symbol { + /* hollow square */ + -fx-background-color: CHART_COLOR_7, white; + -fx-background-insets: 0, 2; + -fx-background-radius: 0; +} + +.default-color7.chart-symbol { + /* hollow diamond */ + -fx-background-color: CHART_COLOR_8, white; + -fx-background-radius: 0; + -fx-background-insets: 0, 2.5; + -fx-padding: 7px 5px 7px 5px; + -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z"; +} + +/******************************************************************************* + * * + * LineChart * + * * + ******************************************************************************/ + +.chart-line-symbol { + -fx-background-color: CHART_COLOR_1, white; + -fx-background-insets: 0, 2; + -fx-background-radius: 5px; + -fx-padding: 5px; +} + +.chart-series-line { + -fx-stroke: CHART_COLOR_1; + -fx-stroke-width: 3px; +} + +.default-color0.chart-line-symbol { + -fx-background-color: CHART_COLOR_1, white; +} + +.default-color1.chart-line-symbol { + -fx-background-color: CHART_COLOR_2, white; +} + +.default-color2.chart-line-symbol { + -fx-background-color: CHART_COLOR_3, white; +} + +.default-color3.chart-line-symbol { + -fx-background-color: CHART_COLOR_4, white; +} + +.default-color4.chart-line-symbol { + -fx-background-color: CHART_COLOR_5, white; +} + +.default-color5.chart-line-symbol { + -fx-background-color: CHART_COLOR_6, white; +} + +.default-color6.chart-line-symbol { + -fx-background-color: CHART_COLOR_7, white; +} + +.default-color7.chart-line-symbol { + -fx-background-color: CHART_COLOR_8, white; +} + +.default-color0.chart-series-line { + -fx-stroke: CHART_COLOR_1; +} + +.default-color1.chart-series-line { + -fx-stroke: CHART_COLOR_2; +} + +.default-color2.chart-series-line { + -fx-stroke: CHART_COLOR_3; +} + +.default-color3.chart-series-line { + -fx-stroke: CHART_COLOR_4; +} + +.default-color4.chart-series-line { + -fx-stroke: CHART_COLOR_5; +} + +.default-color5.chart-series-line { + -fx-stroke: CHART_COLOR_6; +} + +.default-color6.chart-series-line { + -fx-stroke: CHART_COLOR_7; +} + +.default-color7.chart-series-line { + -fx-stroke: CHART_COLOR_8; +} + +/******************************************************************************* + * * + * AreaChart * + * * + ******************************************************************************/ + +.chart-area-symbol { + -fx-background-color: CHART_COLOR_1, white; + -fx-background-insets: 0, 1; + -fx-background-radius: 4px; /* makes sure this remains circular */ + -fx-padding: 3px; +} + +.default-color0.chart-area-symbol { + -fx-background-color: CHART_COLOR_1, white; +} + +.default-color1.chart-area-symbol { + -fx-background-color: CHART_COLOR_2, white; +} + +.default-color2.chart-area-symbol { + -fx-background-color: CHART_COLOR_3, white; +} + +.default-color3.chart-area-symbol { + -fx-background-color: CHART_COLOR_4, white; +} + +.default-color4.chart-area-symbol { + -fx-background-color: CHART_COLOR_5, white; +} + +.default-color5.chart-area-symbol { + -fx-background-color: CHART_COLOR_6, white; +} + +.default-color6.chart-area-symbol { + -fx-background-color: CHART_COLOR_7, white; +} + +.default-color7.chart-area-symbol { + -fx-background-color: CHART_COLOR_8, white; +} + +.chart-series-area-line { + -fx-stroke: CHART_COLOR_1; + -fx-stroke-width: 1px; +} + +.default-color0.chart-series-area-line { + -fx-stroke: CHART_COLOR_1; +} + +.default-color1.chart-series-area-line { + -fx-stroke: CHART_COLOR_2; +} + +.default-color2.chart-series-area-line { + -fx-stroke: CHART_COLOR_3; +} + +.default-color3.chart-series-area-line { + -fx-stroke: CHART_COLOR_4; +} + +.default-color4.chart-series-area-line { + -fx-stroke: CHART_COLOR_5; +} + +.default-color5.chart-series-area-line { + -fx-stroke: CHART_COLOR_6; +} + +.default-color6.chart-series-area-line { + -fx-stroke: CHART_COLOR_7; +} + +.default-color7.chart-series-area-line { + -fx-stroke: CHART_COLOR_8; +} + +.chart-series-area-fill { + -fx-stroke: null; + -fx-fill: CHART_COLOR_1_TRANS_20; +} + +.default-color0.chart-series-area-fill { + -fx-fill: CHART_COLOR_1_TRANS_20; +} + +.default-color1.chart-series-area-fill { + -fx-fill: CHART_COLOR_2_TRANS_20; +} + +.default-color2.chart-series-area-fill { + -fx-fill: CHART_COLOR_3_TRANS_20; +} + +.default-color3.chart-series-area-fill { + -fx-fill: CHART_COLOR_4_TRANS_20; +} + +.default-color4.chart-series-area-fill { + -fx-fill: CHART_COLOR_5_TRANS_20; +} + +.default-color5.chart-series-area-fill { + -fx-fill: CHART_COLOR_6_TRANS_20; +} + +.default-color6.chart-series-area-fill { + -fx-fill: CHART_COLOR_7_TRANS_20; +} + +.default-color7.chart-series-area-fill { + -fx-fill: CHART_COLOR_8_TRANS_20; +} + +.area-legend-symbol { + -fx-padding: 6px; + -fx-background-radius: 6px; /* makes sure this remains circular */ + -fx-background-insets: 0, 3; +} + +/******************************************************************************* + * * + * BubbleChart * + * * + ******************************************************************************/ + +.bubble-legend-symbol { + -fx-background-radius: 8px; + -fx-padding: 8px; +} + +.chart-bubble { + -fx-bubble-fill: CHART_COLOR_1_TRANS_70; + -fx-background-color: radial-gradient(center 50% 50%, radius 80%, derive(-fx-bubble-fill, 20%), derive(-fx-bubble-fill, -30%)); +} + +.default-color0.chart-bubble { + -fx-bubble-fill: CHART_COLOR_1_TRANS_70; +} + +.default-color1.chart-bubble { + -fx-bubble-fill: CHART_COLOR_2_TRANS_70; +} + +.default-color2.chart-bubble { + -fx-bubble-fill: CHART_COLOR_3_TRANS_70; +} + +.default-color3.chart-bubble { + -fx-bubble-fill: CHART_COLOR_4_TRANS_70; +} + +.default-color4.chart-bubble { + -fx-bubble-fill: CHART_COLOR_5_TRANS_70; +} + +.default-color5.chart-bubble { + -fx-bubble-fill: CHART_COLOR_6_TRANS_70; +} + +.default-color6.chart-bubble { + -fx-bubble-fill: CHART_COLOR_7_TRANS_70; +} + +.default-color7.chart-bubble { + -fx-bubble-fill: CHART_COLOR_8_TRANS_70; +} + +/******************************************************************************* + * * + * BarChart * + * * + ******************************************************************************/ + +.chart-bar { + -fx-bar-fill: CHART_COLOR_1; + -fx-background-color: linear-gradient(to right, + derive(-fx-bar-fill, -4%), + derive(-fx-bar-fill, -1%), + derive(-fx-bar-fill, 0%), + derive(-fx-bar-fill, -1%), + derive(-fx-bar-fill, -6%) + ); + -fx-background-insets: 0; +} + +.chart-bar.negative { + -fx-background-insets: 1 0 0 0; +} + +.bar-chart:horizontal .chart-bar { + -fx-background-insets: 0 0 0 1; +} + +.bar-chart:horizontal .chart-bar, +.stacked-bar-chart:horizontal .chart-bar { + -fx-background-color: linear-gradient(to bottom, + derive(-fx-bar-fill, -4%), + derive(-fx-bar-fill, -1%), + derive(-fx-bar-fill, 0%), + derive(-fx-bar-fill, -1%), + derive(-fx-bar-fill, -6%) + ); +} + +.default-color0.chart-bar { + -fx-bar-fill: CHART_COLOR_1; +} + +.default-color1.chart-bar { + -fx-bar-fill: CHART_COLOR_2; +} + +.default-color2.chart-bar { + -fx-bar-fill: CHART_COLOR_3; +} + +.default-color3.chart-bar { + -fx-bar-fill: CHART_COLOR_4; +} + +.default-color4.chart-bar { + -fx-bar-fill: CHART_COLOR_5; +} + +.default-color5.chart-bar { + -fx-bar-fill: CHART_COLOR_6; +} + +.default-color6.chart-bar { + -fx-bar-fill: CHART_COLOR_7; +} + +.default-color7.chart-bar { + -fx-bar-fill: CHART_COLOR_8; +} + +.bar-legend-symbol { + -fx-padding: 8px; +} + +/******************************************************************************* + * * + * PieChart * + * * + ******************************************************************************/ + +.chart-pie { + -fx-pie-color: CHART_COLOR_1; + -fx-background-color: radial-gradient(radius 100%, derive(-fx-pie-color, 20%), derive(-fx-pie-color, -10%)); + -fx-background-insets: 1; + -fx-border-color: -fx-background; +} + +.chart-pie-label { + -fx-padding: 3px; +} + +.chart-pie-label-line { + -fx-stroke: derive(-fx-background, -20%); +} + +.default-color0.chart-pie { + -fx-pie-color: CHART_COLOR_1; +} + +.default-color1.chart-pie { + -fx-pie-color: CHART_COLOR_2; +} + +.default-color2.chart-pie { + -fx-pie-color: CHART_COLOR_3; +} + +.default-color3.chart-pie { + -fx-pie-color: CHART_COLOR_4; +} + +.default-color4.chart-pie { + -fx-pie-color: CHART_COLOR_5; +} + +.default-color5.chart-pie { + -fx-pie-color: CHART_COLOR_6; +} + +.default-color6.chart-pie { + -fx-pie-color: CHART_COLOR_7; +} + +.default-color7.chart-pie { + -fx-pie-color: CHART_COLOR_8; +} + +.negative.chart-pie { + -fx-pie-color: transparent; + -fx-background-color: white; +} + +.pie-legend-symbol.chart-pie { + -fx-background-radius: 8px; + -fx-padding: 8px; + -fx-border-color: null; +} + +/******************************************************************************* + * * + * Combinations * + * * + * This section is for special handling of when one control is nested inside * + * another control. There are many cases where we would end up with ugly * + * double borders that are fixed here. * + * * + ******************************************************************************/ + +.tab-pane > * > .table-view, +.tab-pane > * > .tree-table-view, +.tab-pane > * > .list-view, +.tab-pane > * > .tree-view, +.tab-pane > * > .scroll-pane, +.tab-pane > * > .split-pane, +.tab-pane > * > .text-area, +.tab-pane > * > .html-editor, +.split-pane > * > .tab-pane, +.split-pane > * > .table-view, +.split-pane > * > .tree-table-view, +.split-pane > * > .list-view, +.split-pane > * > .tree-view, +.split-pane > * > .scroll-pane, +.split-pane > * > .split-pane, +.split-pane > * > .text-area, +.split-pane > * > .html-editor { + -fx-background-insets: 0, 0; + -fx-padding: 0; +} + +.tab-pane.floating > * > .table-view, +.tab-pane.floating > * > .tree-table-view, +.tab-pane.floating > * > .list-view, +.tab-pane.floating > * > .tree-view, +.tab-pane.floating > * > .scroll-pane, +.tab-pane.floating > * > .split-pane, +.tab-pane.floating > * > .text-area, +.tab-pane.floating > * > .html-editor { + -fx-background-insets: 0, 0; + -fx-padding: -1; +} + +.split-pane > * > .accordion > .titled-pane > *.content { + -fx-border-color: null; + -fx-border-insets: 0; +} + +.split-pane > * > .accordion > .titled-pane > .title { + -fx-background-insets: 0, 1 0 1 0, 2 1 2 1; +} + +.split-pane > * > .accordion > .first-titled-pane > .title { + -fx-background-insets: 0, 0 0 1 0, 1 1 2 1; +} + +.split-pane > * > .accordion > .titled-pane:collapsed > .title { + -fx-background-insets: 0, 1 0 0 0, 2 1 1 1; +} + +.split-pane > * > .accordion > .first-titled-pane:collapsed > .title { + -fx-background-insets: 0, 0 0 0 0, 1 1 1 1; +} + +.titled-pane > * > * > .split-pane, +.titled-pane > * > * > .text-area, +.titled-pane > * > * > .html-editor, +.titled-pane > * > * > .list-view, +.titled-pane > * > * > .tree-view, +.titled-pane > * > * > .table-view, +.titled-pane > * > * > .tree-table-view, +.titled-pane > * > * > .scroll-pane { + -fx-background-color: null; + -fx-background-insets: 0, 0; + -fx-padding: 0; +} + +.titled-pane > * > * > AnchorPane, +.titled-pane > * > * > BorderPane, +.titled-pane > * > * > FlowPane, +.titled-pane > * > * > GridPane, +.titled-pane > * > * > HBox, +.titled-pane > * > * > Pane, +.titled-pane > * > * > StackPane, +.titled-pane > * > * > TilePane, +.titled-pane > * > * > VBox { + -fx-padding: 0.8em; +} + +/******************************************************************************* + * * + * DatePicker * + * * + ******************************************************************************/ + +.date-picker > .arrow-button > .arrow { + -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"; + -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; + -fx-background-insets: 1 0 -1 0, 0; + -fx-padding: 0.416667em 0.416667em 0.333333em 0.333333em; /* 5 5 4 4 */ + -fx-scale-shape: true; +} + +.date-picker-popup { + -fx-background-color: linear-gradient(to bottom, + derive(-fx-color, -17%), + derive(-fx-color, -30%) + ), + -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 0; + -fx-alignment: CENTER; /* VBox */ + -fx-spacing: 0; /* VBox */ + -fx-padding: 0.083333em; /* 1 1 1 1 */ + -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 12, 0.0, 0, 8); +} + +.date-picker-popup > .month-year-pane { + -fx-padding: 0.588883em 0.5em 0.666667em 0.5em; /* 7 6 8 6 */ + -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%)); + -fx-background-insets: 0 0 0 0, 0 0 1 0; +} + +.date-picker-popup > * > .spinner { + -fx-spacing: 0.25em; /* 3 */ + -fx-alignment: CENTER; + -fx-fill-height: false; +} + +.date-picker-popup > * > .spinner > .button { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-background-insets: 0, 1, 2; + -fx-color: transparent; + -fx-background-radius: 0; +} + +.date-picker-popup > * > .spinner > .button:focused { + -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color; + -fx-color: -fx-hover-base; + -fx-background-insets: -0.2, 1, 2, -1.4, 2.6; +} + +.date-picker-popup > * > .spinner > .button:hover { + -fx-color: -fx-hover-base; +} + +.date-picker-popup > * > .spinner > .button:armed { + -fx-color: -fx-pressed-base; +} + +.date-picker-popup > * > .spinner > .left-button { + -fx-padding: 0 0.333333em 0 0.25em; /* 0 4 0 3 */ +} + +.date-picker-popup > * > .spinner > .right-button { + -fx-padding: 0 0.25em 0 0.333333em; /* 0 3 0 4 */ +} + +.date-picker-popup > * > .spinner > .button > .left-arrow, +.date-picker-popup > * > .spinner > .button > .right-arrow { + -fx-background-color: -fx-mark-highlight-color, derive(-fx-base, -45%); + -fx-background-insets: 1 0 -1 0, 0; + -fx-padding: 0.333333em 0.166667em 0.333333em 0.166667em; /* 4 2 4 2 */ + -fx-effect: dropshadow(two-pass-box, -fx-shadow-highlight-color, 1, 0.0, 0, 1.4); +} + +.date-picker-popup > * > .spinner > .button:hover > .left-arrow, +.date-picker-popup > * > .spinner > .button:hover > .right-arrow { + -fx-background-color: -fx-mark-highlight-color, derive(-fx-base, -50%); +} + +.date-picker-popup > * > .spinner > .button:pressed > .left-arrow, +.date-picker-popup > * > .spinner > .button:pressed > .right-arrow { + -fx-background-color: -fx-mark-highlight-color, derive(-fx-base, -55%); +} + +.date-picker-popup > * > .spinner > .button > .left-arrow { + -fx-padding: 0.333333em 0.25em 0.333333em 0.166667em; /* 4 3 4 2 */ + -fx-shape: "M5.997,5.072L5.995,6.501l-2.998-4l2.998-4l0.002,1.43l-1.976,2.57L5.997,5.072z"; + -fx-scale-shape: true; +} + +.date-picker-popup > * > .spinner > .button > .right-arrow { + -fx-padding: 0.333333em 0.25em 0.333333em 0.166667em; /* 4 3 4 2 */ + -fx-shape: "M2.998-0.07L3-1.499l2.998,4L3,6.501l-0.002-1.43l1.976-2.57L2.998-0.07z"; + -fx-scale-shape: true; +} + +.date-picker-popup > * > .spinner > .label { + -fx-alignment: CENTER; +} + +.date-picker-popup > .month-year-pane > .secondary-label { + -fx-alignment: BASELINE_CENTER; + -fx-padding: 0.5em 0 0 0; /* 6 0 0 0 */ + -fx-text-fill: #f3622d; +} + +.date-picker-popup > .calendar-grid { + -fx-background-color: derive(-fx-selection-bar-non-focused, 60%); + /*-fx-background-insets: 1 0 0 0;*/ + -fx-padding: 0; +} + +.date-picker-popup > * > .date-cell { + -fx-background-color: transparent; + -fx-background-insets: 1, 2; + -fx-padding: 0; + -fx-alignment: BASELINE_CENTER; + -fx-opacity: 1.0; +} + +.date-picker-popup > * > .day-name-cell, +.date-picker-popup > * > .week-number-cell { + -fx-font-size: 0.916667em; +} + +.date-picker-popup > * > .week-number-cell { + -fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */ + -fx-border-color: -fx-control-inner-background; + -fx-border-width: 1px; + -fx-background: -fx-control-inner-background; + -fx-background-color: -fx-background; + -fx-text-fill: -fx-accent; +} + +.date-picker-popup > * > .day-cell { + -fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */ + -fx-border-color: derive(-fx-selection-bar-non-focused, 60%); + -fx-border-width: 1px; + -fx-font-size: 1em; + -fx-background: -fx-control-inner-background; + -fx-background-color: -fx-background; + -fx-text-fill: -fx-text-background-color; +} + +.date-picker-popup > * > .hijrah-day-cell { + -fx-alignment: TOP_LEFT; + -fx-padding: 0.083333em 0.333333em 0.083333em 0.333333em; /* 1 4 1 4 */ + -fx-cell-size: 2.75em; +} + +.date-picker-popup > * > .day-cell > .secondary-text { + -fx-fill: #f3622d; +} + +.date-picker-popup > * > .today { + -fx-background-color: -fx-control-inner-background, derive(-fx-selection-bar-non-focused, -20%), -fx-control-inner-background; + -fx-background-insets: 1, 2, 3; +} + +.date-picker-popup > * > .day-cell:hover, +.date-picker-popup > * > .selected, +.date-picker-popup > * > .previous-month.selected, +.date-picker-popup > * > .next-month.selected { + -fx-background: -fx-selection-bar; +} + +.date-picker-popup > * > .previous-month:hover, +.date-picker-popup > * > .next-month:hover { + -fx-background: -fx-selection-bar-non-focused; +} + +.date-picker-popup > * > .today:hover, +.date-picker-popup > * > .today.selected { + -fx-background-color: -fx-selection-bar, derive(-fx-selection-bar-non-focused, -20%), -fx-selection-bar; +} + +.date-picker-popup > * > .day-cell:focused, +.date-picker-popup > * > .today:focused { + -fx-background-color: -fx-control-inner-background, -fx-cell-focus-inner-border, -fx-control-inner-background; + -fx-background-insets: 1, 2, 3; +} + +.date-picker-popup > * > .day-cell:focused:hover, +.date-picker-popup > * > .today:focused:hover, +.date-picker-popup > * > .selected:focused, +.date-picker-popup > * > .today.selected:focused { + -fx-background-color: -fx-selection-bar, -fx-cell-focus-inner-border, -fx-selection-bar; +} + +.date-picker-popup > * > .previous-month, +.date-picker-popup > * > .next-month { + -fx-background: derive(-fx-control-inner-background, -4%); +} + +.date-picker-popup > * > .day-cell:hover > .secondary-text, +.date-picker-popup > * > .previous-month > .secondary-text, +.date-picker-popup > * > .next-month > .secondary-text, +.date-picker-popup > * > .selected > .secondary-text { + -fx-fill: -fx-text-background-color; +} + +.date-picker-popup > * > .previous-month.today, +.date-picker-popup > * > .next-month.today { + -fx-background-color: derive(-fx-control-inner-background, -4%), derive(-fx-selection-bar-non-focused, -20%), derive(-fx-control-inner-background, -4%); +} + +.date-picker-popup > * > .previous-month.today:hover, +.date-picker-popup > * > .next-month.today:hover { + -fx-background-color: -fx-selection-bar-non-focused, derive(-fx-selection-bar-non-focused, -20%), -fx-selection-bar-non-focused; +} diff --git a/gui/src/main/java/io/bitsquare/gui/popups/SendAlertMessagePopup.java b/gui/src/main/java/io/bitsquare/gui/popups/SendAlertMessagePopup.java index 7f1411540d..68503c2035 100644 --- a/gui/src/main/java/io/bitsquare/gui/popups/SendAlertMessagePopup.java +++ b/gui/src/main/java/io/bitsquare/gui/popups/SendAlertMessagePopup.java @@ -19,10 +19,13 @@ package io.bitsquare.gui.popups; import io.bitsquare.alert.Alert; import io.bitsquare.app.BitsquareApp; +import io.bitsquare.common.util.Tuple2; import io.bitsquare.gui.components.InputTextField; import javafx.geometry.Insets; import javafx.scene.control.Button; import javafx.scene.control.CheckBox; +import javafx.scene.control.Label; +import javafx.scene.control.TextArea; import javafx.scene.layout.GridPane; import javafx.scene.layout.HBox; import org.slf4j.Logger; @@ -30,12 +33,11 @@ import org.slf4j.LoggerFactory; import java.util.Optional; -import static io.bitsquare.gui.util.FormBuilder.addLabelCheckBox; -import static io.bitsquare.gui.util.FormBuilder.addLabelInputTextField; +import static io.bitsquare.gui.util.FormBuilder.*; public class SendAlertMessagePopup extends Popup { private static final Logger log = LoggerFactory.getLogger(SendAlertMessagePopup.class); - private Button openTicketButton; + private Button sendButton; private SendAlertMessageHandler sendAlertMessageHandler; private RemoveAlertMessageHandler removeAlertMessageHandler; @@ -91,20 +93,22 @@ public class SendAlertMessagePopup extends Popup { private void addContent() { InputTextField keyInputTextField = addLabelInputTextField(gridPane, ++rowIndex, "Alert private key:", 10).second; - InputTextField alertMessageInputTextField = addLabelInputTextField(gridPane, ++rowIndex, "Alert message:").second; + + Tuple2 labelTextAreaTuple2 = addLabelTextArea(gridPane, ++rowIndex, "Alert message:", "Enter message"); + TextArea alertMessageTextArea = labelTextAreaTuple2.second; + Label first = labelTextAreaTuple2.first; + first.setMinWidth(150); CheckBox isUpdateCheckBox = addLabelCheckBox(gridPane, ++rowIndex, "Is update notification:", "").second; isUpdateCheckBox.setSelected(true); - if (BitsquareApp.DEV_MODE) { + if (BitsquareApp.DEV_MODE) keyInputTextField.setText("2e41038992f89eef2e4634ff3586e342c68ad9a5a7ffafee866781687f77a9b1"); - alertMessageInputTextField.setText("m1"); - } - openTicketButton = new Button("Send notification"); - openTicketButton.setOnAction(e -> { - if (alertMessageInputTextField.getText().length() > 0 && keyInputTextField.getText().length() > 0) { + sendButton = new Button("Send notification"); + sendButton.setOnAction(e -> { + if (alertMessageTextArea.getText().length() > 0 && keyInputTextField.getText().length() > 0) { if (sendAlertMessageHandler.handle( - new Alert(alertMessageInputTextField.getText(), isUpdateCheckBox.isSelected()), + new Alert(alertMessageTextArea.getText(), isUpdateCheckBox.isSelected()), keyInputTextField.getText())) hide(); else @@ -132,7 +136,7 @@ public class SendAlertMessagePopup extends Popup { hBox.setSpacing(10); GridPane.setRowIndex(hBox, ++rowIndex); GridPane.setColumnIndex(hBox, 1); - hBox.getChildren().addAll(openTicketButton, removeAlertMessageButton, closeButton); + hBox.getChildren().addAll(sendButton, removeAlertMessageButton, closeButton); gridPane.getChildren().add(hBox); GridPane.setMargin(hBox, new Insets(10, 0, 0, 0)); } diff --git a/gui/src/main/java/io/bitsquare/gui/util/FormBuilder.java b/gui/src/main/java/io/bitsquare/gui/util/FormBuilder.java index 5559d2b69e..b518e1bf29 100644 --- a/gui/src/main/java/io/bitsquare/gui/util/FormBuilder.java +++ b/gui/src/main/java/io/bitsquare/gui/util/FormBuilder.java @@ -191,6 +191,7 @@ public class FormBuilder { public static Tuple2 addLabelTextArea(GridPane gridPane, int rowIndex, String title, String prompt, double top) { Label label = addLabel(gridPane, rowIndex, title, 0); + label.setAlignment(Pos.TOP_RIGHT); GridPane.setMargin(label, new Insets(top + 4, 0, 0, 0)); GridPane.setValignment(label, VPos.TOP); @@ -295,7 +296,7 @@ public class FormBuilder { InputTextField inputTextField = new InputTextField(); CheckBox checkBox = new CheckBox(checkBoxTitle); HBox.setMargin(checkBox, new Insets(4, 0, 0, 0)); - + HBox hBox = new HBox(); hBox.setSpacing(10); hBox.getChildren().addAll(inputTextField, checkBox);