diff --git a/main/ui/src/main/java/org/cryptomator/ui/MainApplication.java b/main/ui/src/main/java/org/cryptomator/ui/MainApplication.java index aad82c792..2aa90d716 100644 --- a/main/ui/src/main/java/org/cryptomator/ui/MainApplication.java +++ b/main/ui/src/main/java/org/cryptomator/ui/MainApplication.java @@ -19,6 +19,7 @@ import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage; +import org.apache.commons.lang3.SystemUtils; import org.cryptomator.ui.settings.Settings; import org.cryptomator.ui.util.TrayIconUtil; import org.eclipse.jetty.util.ConcurrentHashSet; @@ -35,8 +36,9 @@ public class MainApplication extends Application { @Override public void start(final Stage primaryStage) throws IOException { + chooseNativeStylesheet(); final ResourceBundle rb = ResourceBundle.getBundle("localization"); - final FXMLLoader loader = new FXMLLoader(getClass().getResource("/main.fxml"), rb); + final FXMLLoader loader = new FXMLLoader(getClass().getResource("/fxml/main.fxml"), rb); final Parent root = loader.load(); final MainController ctrl = loader.getController(); ctrl.setStage(primaryStage); @@ -51,6 +53,16 @@ public class MainApplication extends Application { }); } + private void chooseNativeStylesheet() { + if (SystemUtils.IS_OS_MAC_OSX) { + setUserAgentStylesheet(getClass().getResource("/css/mac_theme.css").toString()); + } else if (SystemUtils.IS_OS_LINUX) { + setUserAgentStylesheet(getClass().getResource("/css/linux_theme.css").toString()); + } else if (SystemUtils.IS_OS_WINDOWS) { + setUserAgentStylesheet(getClass().getResource("/css/win_theme.css").toString()); + } + } + private void quit() { Platform.runLater(() -> { CLEAN_SHUTDOWN_PERFORMER.run(); diff --git a/main/ui/src/main/java/org/cryptomator/ui/MainController.java b/main/ui/src/main/java/org/cryptomator/ui/MainController.java index 16b93508b..f55c5a224 100644 --- a/main/ui/src/main/java/org/cryptomator/ui/MainController.java +++ b/main/ui/src/main/java/org/cryptomator/ui/MainController.java @@ -137,11 +137,11 @@ public class MainController implements Initializable, InitializationListener, Un } private void showWelcomeView() { - this.showView("/welcome.fxml"); + this.showView("/fxml/welcome.fxml"); } private void showInitializeView(Directory directory) { - final InitializeController ctrl = showView("/initialize.fxml"); + final InitializeController ctrl = showView("/fxml/initialize.fxml"); ctrl.setDirectory(directory); ctrl.setListener(this); } @@ -152,7 +152,7 @@ public class MainController implements Initializable, InitializationListener, Un } private void showUnlockView(Directory directory) { - final UnlockController ctrl = showView("/unlock.fxml"); + final UnlockController ctrl = showView("/fxml/unlock.fxml"); ctrl.setDirectory(directory); ctrl.setListener(this); } @@ -164,7 +164,7 @@ public class MainController implements Initializable, InitializationListener, Un } private void showUnlockedView(Directory directory) { - final UnlockedController ctrl = showView("/unlocked.fxml"); + final UnlockedController ctrl = showView("/fxml/unlocked.fxml"); ctrl.setDirectory(directory); ctrl.setListener(this); } diff --git a/main/ui/src/main/java/org/cryptomator/ui/controls/DirectoryListCell.java b/main/ui/src/main/java/org/cryptomator/ui/controls/DirectoryListCell.java index 94cbc4f0a..a55c5d1a4 100644 --- a/main/ui/src/main/java/org/cryptomator/ui/controls/DirectoryListCell.java +++ b/main/ui/src/main/java/org/cryptomator/ui/controls/DirectoryListCell.java @@ -13,8 +13,15 @@ import org.cryptomator.ui.model.Directory; public class DirectoryListCell extends ListCell implements ChangeListener { - // TODO: fancy graphics instead of circles ;-) - private final Circle statusIndicator = new Circle(3.0); + // fill: #FD4943, stroke: #E1443F + private static final Color RED_FILL = Color.rgb(253, 73, 67); + private static final Color RED_STROKE = Color.rgb(225, 68, 63); + + // fill: #28CA40, stroke: #30B740 + private static final Color GREEN_FILL = Color.rgb(40, 202, 64); + private static final Color GREEN_STROKE = Color.rgb(48, 183, 64); + + private final Circle statusIndicator = new Circle(4.5); public DirectoryListCell() { setGraphic(statusIndicator); @@ -48,8 +55,10 @@ public class DirectoryListCell extends ListCell implements ChangeList } private void updateStatusIndicator() { - final Paint statusColor = getItem().isUnlocked() ? Color.LIME : Color.RED; - statusIndicator.setFill(statusColor); + final Paint fillColor = getItem().isUnlocked() ? GREEN_FILL : RED_FILL; + final Paint strokeColor = getItem().isUnlocked() ? GREEN_STROKE : RED_STROKE; + statusIndicator.setFill(fillColor); + statusIndicator.setStroke(strokeColor); } } diff --git a/main/ui/src/main/resources/css/linux_theme.css b/main/ui/src/main/resources/css/linux_theme.css new file mode 100644 index 000000000..3df5fb42d --- /dev/null +++ b/main/ui/src/main/resources/css/linux_theme.css @@ -0,0 +1,2977 @@ +/* + Modena + + This is the second generation theme for JavaFX after Caspian. +*/ + +/* + * Copyright (c) 2009, 2011, 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. + * + */ + +/******************************************************************************* + * * + * THEMEING INSTRUCTIONS * + * * + ******************************************************************************* + +TODO: Explain here how themeing 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 DIFFERNT SCEEN DPI +------------------------------- + +When the screen DPI changes Windows will use a differnt font size be default. +The default is 12px and the can change to 15px or 18px depending on user +preference or screen DPI. On Mac the default is 13px and embbeded will depend +on hardware. To make UI controls scale and be the right proportions of each of +these font sizes we base the padding (which controls size of control) on the +font size. This is done using the CSS measument 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: #292929; + -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: #4fb6d6; + + /* 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: #f25f29; + -fx-faint-focus-color: #f25f2933; + + /* 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; + + /* The opacity level to use for the "disabled" pseudoclass. + */ + -fx-disabled-opacity: 0.4; + + /* 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; + + /*************************************************************************** + * * + * 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 ontop of -fx-background. This is never a shadow in Modena but + * keep -fx-shadow-highlight-color name to be compatable with Caspian. + */ + -fx-shadow-highlight-color: ladder( + -fx-background, + rgba(255,255,255,0.2) 0%, + rgba(255,255,255,0.2) 20%, + rgba(255,255,255,0.2) 70%, + rgba(255,255,255,1) 90%, + rgba(255,255,255,1) 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, derive(-fx-color,75%), derive(-fx-color,2%)); + + -fx-inner-border-horizontal: linear-gradient(to right, derive(-fx-color,75%), derive(-fx-color,2%)); +/* -fx-inner-border-horizontal: linear-gradient( + to right, + ladder(-fx-color, + derive(-fx-color,80%) 60%, + white 82%) 0%, + ladder(-fx-color, + derive(-fx-color,20%) 10%, + derive(-fx-color,-10%) 80%) 100% + );*/ + + -fx-inner-border-bottomup: linear-gradient( + to top, + ladder(-fx-color, + derive(-fx-color,80%) 60%, + white 82%) 0%, + ladder(-fx-color, + derive(-fx-color,20%) 10%, + derive(-fx-color,-10%) 80%) 100%); + + /* 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. Typically is the fourth color + * in the -fx-background-color list and represents main body of the control. + * Insets are typically 2. + */ + -fx-body-color: linear-gradient(to bottom, derive(-fx-color,10%) ,derive(-fx-color,-6%)); + -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. + * + * TODO: it seems like this should be based upon -fx-accent and we should + * remove the setting -fx-background in all the sections that use + * -fx-selection-bar. + */ + -fx-selection-bar: -fx-accent; + + /* The color to use as -fx-text-fill when painting text on top of + * backgrounds filled with -fx-selection-bar. + * + * TODO: it seems like this should be derived from -fx-selection-bar. + */ + -fx-selection-bar-text: ladder( + -fx-background, + -fx-light-text-color 50%, + -fx-mid-text-color 51% + ); + + /* 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; + + -fx-cell-focus-inner-border: #85b9de; + + /* 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; +} + +/******************************************************************************* + * * + * Common Styles * + * * + * These are styles that give a standard look to a whole range of controls * + * * + ******************************************************************************/ + +/* ==== 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 > .arrow-button { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-background-insets: 0, 1, 2; + -fx-background-radius: 5, 4, 3; + -fx-padding: 0.333333em 0.666667em 0.416667em 0.666667em; /* 4 8 5 8 */ + -fx-text-fill: -fx-text-base-color; +} +.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, +.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, +.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 { + -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; + -fx-background-insets: -2, -0.3, 1, 2; + -fx-background-radius: 7, 6, 4, 3; +} + +/* ==== DISABLED THINGS ================================================= */ + +.button:disabled, +.toggle-button:disabled, +.radio-button:disabled, +.check-box:disabled, +.hyperlink:disabled, +.menu-button:disabled, +.split-menu-button:disabled, +.slider:disabled, +.scroll-pane:disabled, +.progress-bar:disabled, +.progress-indicator:disabled, +.text-input:disabled, +.choice-box:disabled, +.combo-box-base:disabled, +.list-view:disabled, +.tree-view:disabled, +.table-view:disabled, +.tree-table-view:disabled, +.tab-pane:disabled, +.tab-pane > .tab-header-area > .headers-region > .tab:disabled { + -fx-opacity: -fx-disabled-opacity; +} + +/* ==== MNEMONIC THINGS ================================================= */ + +.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 !important; + -fx-background-insets: 0 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.416667em 0.666667em; /* 4 8 5 8 */ + -fx-text-fill: -fx-text-base-color; +} +.choice-box > .open-button, +.menu-button > .arrow-button { + -fx-padding: 0.5em 0.833333em 0.5em 0.0em; /* 6 10 6 0 */ +} + +/* ==== BOX LIKE THINGS ================================================= */ + +.scroll-pane, +.split-pane, +.list-view, +.tree-view, +.table-view, +.tree-table-view { + -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, +.tree-table-view:focused { + -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background; + -fx-background-insets: -2, -0.3, 1; +} +/* 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: 5 0 0 5, 4 0 0 4, 3 0 0 3; + -fx-background-insets: 0, 1 0 1 1, 2 1 2 2; +} +.button.center-pill, +.toggle-button.center-pill { + -fx-background-radius: 0; + -fx-background-insets: 0, 1 0 1 1, 2 1 2 2; +} +.button.right-pill, +.toggle-button.right-pill { + -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0; +} +.button.left-pill:focused, +.toggle-button.left-pill:focused { + -fx-background-radius: 7 0 0 7, 6 0 0 6, 4 0 0 4, 3 0 0 3; + -fx-background-insets: -2 0 -2 -2, -0.3 0 -0.3 -0.3, 1, 2; +} +.button.center-pill:focused, +.toggle-button.center-pill:focused { + -fx-background-radius: 0; + -fx-background-insets: -2 0 -1 0, -0.3 0 -0.3 0, 1, 2; +} +.button.right-pill:focused, +.toggle-button.right-pill:focused { + -fx-background-radius: 0 7 7 0, 0 6 6 0, 0 4 4 0, 0 3 3 0; + -fx-background-insets: -2 -2 -2 0, -0.3 -0.3 -0.3 0, 1, 2; +} + +/* ==== SELECTED TOGGLE ================================================= */ + +.toggle-button:selected { + -fx-background-color: + linear-gradient(to bottom, derive(-fx-outer-border, -20%), -fx-outer-border), + linear-gradient(to bottom, + derive(-fx-text-box-border, -10%) 0%, + derive(-fx-text-box-border, -2%) 20%, + derive(-fx-text-box-border, 5%) 50%); + -fx-background-insets: 0, 1; +} +.toggle-button:selected:focused { + -fx-background-color: + -fx-faint-focus-color, -fx-focus-color, + linear-gradient(to bottom, + derive(-fx-text-box-border, -10%) 0%, + derive(-fx-text-box-border, -2%) 20%, + derive(-fx-text-box-border, 5%) 50%); + -fx-background-insets: -2, -0.3, 1; + -fx-background-radius: 7, 6, 4; +} + +/******************************************************************************* + * * + * 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 { + -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.666667em; /* 16x16 = 8+8 */ +} +.check-box:focused > .box { + -fx-background-radius: 5, 3, 2, 1; +} +.check-box:selected > .box { + /* Carefully picked numbers to remain square as scalling */ +/**/ -fx-padding: -0.208333em 0 0.208333em 0.23em; /* -2.5 0 2.5 2.76 */ +/**/ -fx-padding: -0.208333em 0.083333em 0.208333em 0.23em; /* -1.5 0 2.5 2.76 */ + -fx-padding: 0.166667em 0.166667em 0.25em 0.25em; /* 2 2 3 3 */ +} +.check-box:selected > .box > .mark { + -fx-background-color: transparent; +/**/ -fx-padding: 0.666667em 0.583333em 0.666667em 0.5em; /* 7 7 6 5 */ + -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; /* 2 */ + -fx-cursor: hand; + -fx-content-display: LEFT; + -fx-text-fill: -fx-text-background-color; + -fx-border-color: transparent; + -fx-border-width: 1px; +} +.hyperlink:visited { + -fx-text-fill: -fx-accent; +} +.hyperlink:focused { + -fx-border-color: -fx-focus-color; + -fx-border-style: segments(0.166667em, 0.166667em); + -fx-border-width: 1px; +} +.hyperlink:hover { + -fx-underline: true; +} +.hyperlink:show-mnemonics > .mnemonic-underline { + -fx-stroke: -fx-text-fill; +} + +/******************************************************************************* + * * + * SplitMenuButton * + * * + ******************************************************************************/ + +.split-menu-button { + -fx-background-color: -fx-outer-border; + -fx-background-insets: 0; + -fx-background-radius: 5; + -fx-padding: 0; +} +.split-menu-button:focused { + -fx-background-color: -fx-faint-focus-color, -fx-focus-color; + -fx-background-insets: -2, -0.3; + -fx-background-radius: 7, 6; +} +.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: 4 0 0 4, 3 0 0 3; + -fx-padding: 0.333333em 0.667em 0.416667em 0.667em; /* 4 8 5 8 */ +} +.split-menu-button > .arrow-button { + -fx-background-color: -fx-inner-border, -fx-body-color; + -fx-background-insets: 1, 2; + -fx-background-radius: 4, 3; + -fx-background-radius: 0 4 4 0, 0 3 3 0; + -fx-padding: 0.5em 0.833333em 0.5em 0.833333em; /* 6 10 6 10 */ +} + +/******************************************************************************* + * * + * ToolBar * + * * + ******************************************************************************/ + +.tool-bar:vertical { + -fx-background: derive(-fx-base,-20%); + -fx-background-color: + linear-gradient(to right, derive(-fx-base,0%) 0%, derive(-fx-base,10%) 50%, derive(-fx-base,0%) 100%); + -fx-background-insets: 0; + -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */ + -fx-spacing: 0.333em; /* 4 */ + -fx-alignment: CENTER-LEFT; +} +.tool-bar:horizontal { + -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-padding: 0.416667em 0.5em 0.416667em 0.5em; /* 5 6 5 6 */ + -fx-spacing: 0.333em; /* 4 */ + -fx-alignment: CENTER_LEFT; +} +.tool-bar:horizontal > .container > .separator { + -fx-orientation: vertical; +} +.tool-bar:vertical > .container > .separator { + -fx-orientation: horizontal; +} + +/******************************************************************************* + * * + * 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-color: + -fx-focus-color, + derive(-fx-color,-36%), + derive(-fx-color,73%), + linear-gradient(to top, derive(-fx-color, -19%),derive(-fx-color, -5%)); + -fx-background-insets: -1.4, 0, 1, 2; + -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: 5, 4, 3; + -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: linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%)); +} +.scroll-bar:vertical { + -fx-background-color: linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%)); +} +.scroll-bar:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.scroll-bar > .thumb { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-background-insets: 1, 2, 3; + -fx-background-radius: 5, 4, 3; +} +.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-background-insets: 0, 1, 2; + -fx-color: transparent; + -fx-padding: 3px; +} +.scroll-bar > .increment-button > .increment-arrow, +.scroll-bar > .decrement-button > .decrement-arrow { + -fx-background-color: derive(-fx-base,-35%); +} +.scroll-bar > .increment-button:hover > .increment-arrow, +.scroll-bar > .decrement-button:hover > .decrement-arrow { + -fx-background-color: derive(-fx-base,-40%); +} +.scroll-bar > .increment-button:pressed > .increment-arrow, +.scroll-bar > .decrement-button:pressed > .decrement-arrow { + -fx-background-color: derive(-fx-base,-45%); +} +.scroll-bar:horizontal > .increment-button > .increment-arrow { + -fx-padding: 7 5 0 0; + -fx-shape: "M0.315,1.457l1.414-1.414L5.686,4L1.729,7.957L0.315,6.543L2.857,4L0.315,1.457z"; +} +.scroll-bar:vertical > .increment-button > .increment-arrow { + -fx-padding: 5 7 0 0 ; + -fx-shape: "M6.543,0.315l1.414,1.414L4,5.686L0.043,1.729l1.414-1.414L4,2.858L6.543,0.315z"; +} +.scroll-bar:horizontal > .decrement-button > .decrement-arrow { + -fx-padding: 7 5 0 0; + -fx-shape: "M5.686,6.543L4.271,7.957L0.314,4l3.957-3.957l1.414,1.414L3.143,4L5.686,6.543z"; +} +.scroll-bar:vertical > .decrement-button > .decrement-arrow { + -fx-padding: 5 7 0 0; + -fx-shape: "M1.457,5.563L0.042,4.149L4,0.193l3.957,3.957L6.543,5.563L4,3.021L1.457,5.563z"; +} + +/******************************************************************************* + * * + * ScrollPane * + * * + ******************************************************************************/ + +.scroll-pane > .scroll-bar:horizontal { + -fx-background-insets: 0 1 1 1; + -fx-padding: 0 1 1 1; +} +.scroll-pane > .scroll-bar:horizontal > .increment-button, +.scroll-pane > .scroll-bar:horizontal > .decrement-button { + -fx-padding: 3 3 2 3; +} +.scroll-pane > .scroll-bar:vertical > .increment-button, +.scroll-pane > .scroll-bar:vertical > .decrement-button { + -fx-padding: 3 2 3 3; +} +.scroll-pane > .scroll-bar:vertical { + -fx-background-insets: 1 1 1 0; + -fx-padding: 1 1 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 { + -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 { + -fx-padding: 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: -fx-box-border,-fx-accent; + -fx-background-insets: 2, 3; + -fx-background-radius: 0.25em, 0.166667em; 3 , 2 + -fx-padding: 0.416667em; 5 +}*/ +/*.progress-bar > .bar { + -fx-background-color: -fx-accent; + -fx-background-insets: 3 3 4 3; + -fx-background-radius: 0.167em; 2 + -fx-padding: 0.416667em; 5 +}*/ +.progress-bar > .bar { + /*-fx-background-color: -fx-accent;*/ + -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.25em; /* 3px */ + -fx-padding: 1em; /* 12 */ +} +.progress-bar:indeterminate > .bar { + -fx-background-color: linear-gradient(to left, transparent, -fx-accent); +} +/*.progress-bar > .track { + -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: 0.416667em, 0.416667em; 5 +}*/ +/*.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, -9%), + derive(-fx-control-inner-background, 0%), + derive(-fx-control-inner-background, -5%), + derive(-fx-control-inner-background, -12%) + ); + -fx-background-insets: 0, 0 0 1 0, 1 1 2 1; + -fx-background-radius: 0.417em, 0.333em, 0.25em; 5, 4, 3 +}*/ +.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: 0.417em, 0.333em, 0.25em; /* 5, 4, 3 */ +} + +/******************************************************************************* + * * + * 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: 1; +} +.progress-indicator > .determinate-indicator > .progress { + -fx-background-color: -fx-accent; + -fx-background-insets: 2; + -fx-padding: 1em; /* 9 */ +} +/* TODO: scaling the shape seems to make it disappear */ +.progress-indicator > .determinate-indicator > .tick { + -fx-background-color: white; + -fx-background-insets: 0; + -fx-padding: 0.416667em; /* 5 */ + -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"; + -fx-scale-shape: false; +} +.progress-indicator:indeterminate > .spinner { + -fx-padding: 0.833333em; /* 10 */ +} +.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:"M10,0C9.998,0,9.995,0,9.992,0C9.991,0,9.991,0,9.99,0C9.988,0,9.986,0,9.985,0S9.982,0,9.981,0S9.979,0,9.978,0S9.975,0,9.974,0S9.972,0,9.971,0C9.969,0,9.968,0,9.966,0H9.965c-0.007,0-0.014,0-0.02,0C9.944,0,9.944,0,9.944,0C9.941,0,9.939,0,9.937,0c-0.77,0.007-1.389,0.634-1.384,1.404C8.557,2.176,9.185,2.8,9.956,2.8c0.001,0,0.003,0,0.004,0H10c0.773-0.002,1.4-0.63,1.4-1.404c0-0.77-0.622-1.393-1.392-1.396C10.006,0,10.003,0,10,0L10,0z"; +} +.progress-indicator:indeterminate .segment1 { + -fx-shape:"M5.688,1.156c-0.236,0-0.476,0.06-0.696,0.187C4.98,1.349,4.969,1.356,4.958,1.363c0,0-0.001,0-0.001,0C4.955,1.364,4.954,1.365,4.952,1.366c-0.001,0-0.002,0.001-0.004,0.002c0,0,0,0-0.001,0C4.944,1.371,4.94,1.373,4.936,1.375c0,0,0,0-0.001,0C4.933,1.377,4.931,1.378,4.929,1.38C4.267,1.772,4.046,2.624,4.438,3.288c0.261,0.444,0.73,0.692,1.212,0.692c0.24,0,0.484-0.062,0.706-0.192l0.034-0.02C7.058,3.378,7.283,2.52,6.896,1.851C6.636,1.405,6.168,1.156,5.688,1.156L5.688,1.156z"; +} +.progress-indicator:indeterminate .segment2 { + -fx-shape:"M2.534,4.326c-0.482,0-0.951,0.25-1.209,0.697C1.323,5.027,1.321,5.029,1.32,5.031l0,0C1.319,5.033,1.318,5.034,1.317,5.036S1.315,5.039,1.314,5.04c0,0.001,0,0.002-0.001,0.002C1.312,5.044,1.311,5.046,1.31,5.048c0,0,0,0,0,0.001C1.309,5.051,1.308,5.053,1.307,5.055C1.302,5.063,1.297,5.071,1.292,5.079l0,0C1.291,5.082,1.29,5.084,1.288,5.087c-0.376,0.67-0.141,1.519,0.529,1.898c0.218,0.123,0.456,0.182,0.69,0.182c0.488,0,0.963-0.255,1.222-0.708l0.02-0.035c0.383-0.671,0.149-1.527-0.521-1.912C3.008,4.386,2.769,4.326,2.534,4.326L2.534,4.326z"; +} +.progress-indicator:indeterminate .segment3 { + -fx-shape:"M1.396,8.648c-0.002,0-0.005,0-0.008,0C0.619,8.652-0.001,9.278,0,10.047c0,0.002,0,0.006,0,0.008l0,0c0,0.019,0,0.037,0,0.056c0,0.001,0,0.002,0,0.003s0,0.003,0,0.004c0.01,0.765,0.632,1.378,1.396,1.378c0.005,0,0.01,0,0.015,0c0.773-0.009,1.395-0.642,1.389-1.415v-0.04C2.794,9.27,2.166,8.648,1.396,8.648L1.396,8.648z"; +} +.progress-indicator:indeterminate .segment4 { + -fx-shape:"M2.579,12.955c-0.242,0-0.487,0.062-0.71,0.194c-0.664,0.391-0.885,1.242-0.499,1.906c0.013,0.021,0.025,0.043,0.038,0.063c0.262,0.436,0.724,0.678,1.197,0.678c0.243,0,0.49-0.063,0.714-0.197c0.665-0.396,0.883-1.257,0.489-1.922l-0.02-0.034C3.526,13.201,3.059,12.955,2.579,12.955L2.579,12.955z"; +} +.progress-indicator:indeterminate .segment5 { + -fx-shape:"M5.772,16.09c-0.489,0-0.965,0.257-1.223,0.712c-0.38,0.671-0.146,1.52,0.523,1.901c0.002,0.001,0.004,0.002,0.007,0.004h0c0.004,0.002,0.008,0.004,0.012,0.007c0,0,0,0,0.001,0c0.001,0.001,0.002,0.002,0.004,0.002c0.001,0.001,0.003,0.002,0.004,0.003c0,0,0.001,0,0.001,0.001c0.012,0.006,0.023,0.013,0.035,0.019c0.214,0.119,0.446,0.176,0.675,0.176c0.489,0,0.963-0.258,1.22-0.716c0.377-0.675,0.137-1.529-0.537-1.908l-0.035-0.02C6.242,16.149,6.006,16.09,5.772,16.09L5.772,16.09z"; +} +.progress-indicator:indeterminate .segment6 { + -fx-shape:"M10.14,17.198c-0.006,0-0.013,0-0.02,0h-0.039c-0.773,0.011-1.394,0.646-1.385,1.419c0.008,0.767,0.631,1.382,1.396,1.382c0.003,0,0.006,0,0.009-0.001c0.024,0,0.051,0,0.075-0.001c0.769-0.016,1.38-0.648,1.367-1.418C11.53,17.813,10.904,17.198,10.14,17.198L10.14,17.198z"; +} +.progress-indicator:indeterminate .segment7 { + -fx-shape:"M14.433,15.97c-0.245,0-0.494,0.064-0.72,0.2l-0.034,0.021c-0.663,0.397-0.88,1.258-0.483,1.922c0.261,0.439,0.725,0.683,1.2,0.683c0.24,0,0.484-0.062,0.707-0.194c0.022-0.013,0.044-0.025,0.065-0.039c0.656-0.399,0.866-1.254,0.469-1.913C15.373,16.212,14.909,15.97,14.433,15.97L14.433,15.97z"; +} +.progress-indicator:indeterminate .segment8 { + -fx-shape:"M17.539,12.748c-0.493,0-0.973,0.261-1.229,0.723l-0.02,0.034c-0.376,0.676-0.133,1.53,0.542,1.907c0.216,0.121,0.45,0.178,0.681,0.178c0.487,0,0.96-0.256,1.217-0.71c0.003-0.006,0.007-0.012,0.01-0.019c0.007-0.013,0.015-0.025,0.021-0.038l0,0c0.002-0.003,0.003-0.005,0.004-0.008c0.369-0.675,0.124-1.521-0.55-1.893C18.001,12.805,17.769,12.748,17.539,12.748L17.539,12.748z"; +} +.progress-indicator:indeterminate .segment9 { + -fx-shape:"M18.603,8.408c-0.011,0-0.021,0-0.031,0c-0.773,0.018-1.388,0.657-1.373,1.431l0.001,0.04c0.015,0.765,0.641,1.377,1.403,1.377c0.008,0,0.016,0,0.023,0c0.77-0.013,1.383-0.646,1.373-1.414c0-0.003,0-0.006,0-0.009l0,0c-0.001-0.019-0.001-0.037-0.001-0.055c0-0.001,0-0.001-0.001-0.002c0-0.002,0-0.004,0-0.006C19.979,9.012,19.358,8.408,18.603,8.408L18.603,8.408z"; +} +.progress-indicator:indeterminate .segment10 { + -fx-shape:"M17.345,4.121c-0.248,0-0.5,0.066-0.728,0.205c-0.659,0.403-0.869,1.266-0.468,1.927l0.021,0.034c0.265,0.435,0.728,0.675,1.202,0.675c0.247,0,0.497-0.065,0.724-0.202c0.659-0.397,0.871-1.252,0.477-1.912c-0.007-0.011-0.013-0.021-0.02-0.032c-0.001-0.002-0.002-0.003-0.002-0.004c-0.001,0-0.001-0.001-0.001-0.002c-0.004-0.005-0.008-0.011-0.011-0.017c0-0.001,0-0.001-0.001-0.001c-0.001-0.002-0.002-0.004-0.004-0.007C18.271,4.358,17.813,4.121,17.345,4.121L17.345,4.121z"; +} +.progress-indicator:indeterminate .segment11 { + -fx-shape:"M14.104,1.039c-0.494,0-0.974,0.264-1.227,0.729c-0.37,0.679-0.12,1.531,0.559,1.903l0.034,0.019c0.214,0.117,0.445,0.173,0.673,0.173c0.495,0,0.976-0.262,1.231-0.726c0.371-0.674,0.129-1.519-0.542-1.894c-0.012-0.006-0.024-0.013-0.036-0.02c-0.007-0.004-0.014-0.008-0.021-0.012c-0.003-0.001-0.006-0.003-0.009-0.005C14.556,1.094,14.329,1.039,14.104,1.039L14.104,1.039z"; +} + +/******************************************************************************* + * * + * 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: 4, 3; + -fx-cursor: text; + -fx-padding: 0.416667em 0.583em 0.416667em 0.583em; /* 5 7 5 7 */ +} +.text-input:focused { + -fx-highlight-fill: -fx-accent; + -fx-highlight-text-fill: white; + -fx-background-color: -fx-faint-focus-color, -fx-focus-color, + linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background); + -fx-background-insets: -2, -0.3, 1; + -fx-background-radius: 6, 3.4, 2, 2; + -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 3 3; +} +.text-area > .scroll-pane > .scroll-bar:vertical { + -fx-background-radius: 0 3 3 0; +} +.text-area > .scroll-pane > .corner { + -fx-background-radius: 0 0 3 0; +} +.text-area .content { + -fx-padding: 0.333em 0.583em 0.333em 0.583em; /* 4 7 4 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: 3; +} + +/******************************************************************************* + * * + * PopupMenu * + * * + ******************************************************************************/ + +.context-menu { + -fx-background-color: + -fx-box-border, + -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( three-pass-box , rgba(0,0,0,0.5) , 8, 0.0 , 0 , 8 );*/ +} +.context-menu > .separator { + -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */ +} +.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-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.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:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.menu:show-mnemonics > .mnemonic-underline { + -fx-stroke: -fx-text-fill; +} +/* This hides the down arrow that would show on a menu placed in a menubar */ +.menu-bar > .container > .menu > .arrow-button > .arrow { + -fx-padding: 0; + -fx-background-color: transparent; + -fx-shape: null; +} +.menu-bar > .container > .menu > .arrow-button { + -fx-padding: 0; +} +.menu > .arrow { + -fx-background-color: -fx-mark-color; + -fx-shape: "M0,-4L4,0L0,4Z"; + -fx-scale-shape: false; +} +.menu:focused:showing > .arrow, .menu:hover:showing > .arrow, .menu:focused > .arrow, .menu:showing > .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-base: derive(#d0d0d0,-70%); + -fx-background-color: linear-gradient(to bottom, derive(-fx-color,50%), derive(-fx-color,-30%)), -fx-body-color; + -fx-background-insets: 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; +} +.menu-bar > .container > .menu-button:hover, .menu-bar > .container > .menu-button:focused, .menu-bar > .container > .menu-button:showing { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.menu-bar > .container > .menu-button:hover { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.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:disabled > .label { + -fx-opacity: -fx-disabled-opacity; +} +.menu-item:focused { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.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; +} +.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:selected > .right-container > .arrow { + -fx-background-color: white; +} +.menu-item:disabled { + -fx-opacity: -fx-disabled-opacity; +} + +/******************************************************************************* + * * + * 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: 5 5 0 0, 4 4 0 0, 3 3 0 0; + -fx-padding: 0.083333em 0.5em 0.083333em 0.5em; /* 1 6 1 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-style: segments(0.166667em, 0.166667em); + -fx-border-width: 1; + -fx-border-color: -fx-focus-color; +} +.tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover { + -fx-color: -fx-base; + -fx-opacity: -fx-disabled-opacity; +} +.tab-pane > .tab-header-area > .tab-header-background { + /* TODO should not be using text-box-border I tink? */ + -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; /* TODO convert to ems */ + /*-fx-padding: 0.416667em 0.416667em 0.833333em 0.416667em;*/ + -fx-background-radius: 10; +} +/* 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: 3, 2; + -fx-padding: 2; +} + +/******************************************************************************* + * * + * ComboBox * + * * + ******************************************************************************/ + +/* Customie 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.416667em 0.666667em; /* 4 8 5 8 */ +} +.combo-box-base > .arrow-button { + -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0; + -fx-padding: 0.5em 0.833333em 0.5em 0.833333em; /* 6 10 6 10 */ + -fx-background-insets: 1 1 1 0, 1, 2; +} +.combo-box-base:focused > .arrow-button { + -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color; +} + +/******************************************************************************* + * * + * 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 > .text-field { + -fx-background-radius: 3 4 4 3, 2 3 3 2; +} +.combo-box-base:editable:focused > .text-field { + -fx-background-color: -fx-focus-color, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 3 4 4 3, 2 3 3 2; +} +.combo-box-base:editable > .text-field:focused { + -fx-background-radius: 7, 3 4 4 3, 2 3 3 2; +} + +/* -------------- STYLES FOR THE DEFAULT LISTVIEW-BASED COMBOBOX ------------- */ + +.combo-box-popup > .list-view { + -fx-background-color: -fx-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 ); +} +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell { + -fx-padding: 4 0 4 5; + /* No alternate highlighting */ + -fx-background-color: -fx-control-inner-background; +} +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, +.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; + -fx-text-fill: -fx-selection-bar-text; +} +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover { + -fx-background-color: -fx-cell-hover-color; + -fx-text-fill: -fx-text-inner-color; +} + +/******************************************************************************* + * * + * TitledPane * + * * + ******************************************************************************/ + +.titled-pane { + -fx-text-fill: -fx-text-base-color; +} +.titled-pane:focused { + -fx-text-fill: white; +} +.titled-pane > .title { + -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color; + -fx-background-insets: 0, 1, 2; + -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0; + -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */ +} +.titled-pane:focused > .title { + -fx-color: -fx-focus-color; +} +.titled-pane > .title > .arrow-button { + -fx-background-color: null; + -fx-background-insets: 0; + -fx-background-radius: 0; + -fx-padding: 0.0em 0.25em 0.0em 0.0em; /* 0 3 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:collapsed > .title > .arrow-button > .arrow { + -fx-rotate: -90; +} +.titled-pane > *.content { + -fx-background-color: + -fx-box-border, + linear-gradient(to bottom, derive(-fx-color,-02%), derive(-fx-color,65%) 12%, derive(-fx-color,23%) 88%, derive(-fx-color,50%) 99%, -fx-box-border); + -fx-background-insets: 0, 0 1 1 1; + -fx-padding: 0.167em; +} +.titled-pane:focused > .title > .arrow-button > .arrow { + -fx-background-color: white; +} + +/******************************************************************************* + * * + * Accordion * + * * + ******************************************************************************/ + +.accordion > .titled-pane > .title { + -fx-background-color: + -fx-box-border, + -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; +} +.accordion > .titled-pane:focused > .title { + -fx-color: -fx-focus-color; +} +.accordion > .titled-pane:focused { + -fx-text-fill: white; +} +.accordion > .titled-pane:focused > .title > .arrow-button > .arrow { + -fx-background-color: white; +} +.accordion > .titled-pane:focused > .titled-pane:collapsed > .title > .arrow-button > .arrow { + -fx-background-color: white; +} +.accordion > .titled-pane:collapsed:focused > .title { + -fx-color: -fx-focus-color; +} +.accordion > .titled-pane:expanded:focused > .title { + -fx-color: -fx-focus-color; +} +.accordion > .titled-pane:hover > .title { + -fx-color: -fx-hover-base; +} + +/******************************************************************************* + * * + * 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.833333em 0.5em 0; /* 6 10 6 0 */ +} +.color-picker.split-button { + -fx-background-color: null; +} +.color-picker.split-button > .arrow-button { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-padding: 0.5em 0.833333em 0.5em 0.833333em; /* 6 10 6 10 */ +} +.color-picker > .color-picker-label > .picker-color > .picker-color-rect { + -fx-stroke: -fx-box-border; +} + +.color-palette { + -fx-background-color: + derive(-fx-color,-40%), + derive(-fx-color,100%), + linear-gradient(to bottom, + derive(-fx-color,100%) 0%, + derive(-fx-color,50%) 12%, + derive(-fx-color,65%) 88%, + derive(-fx-color,23%) 100%); + -fx-background-insets: 0, 1, 2; + -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4; + -fx-padding: 15 15 15 15; + -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 ); +} +.color-palette > .color-picker-grid > .color-square > .color-rect { + -fx-stroke: black; + -fx-stroke-width: 0.4; + -fx-border-color: black; +} +.color-palette > .color-picker-grid { + -fx-border-color: black; +} +.color-palette > .color-picker-grid > .color-square { + -fx-background-color: transparent; + -fx-background-insets: -1, 0; + -fx-padding: 0.5; + -fx-border: black; +} +/* 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-focus-color; +} +/* the currently selected color */ +.color-palette > .color-picker-grid > .color-square:selected { +/* -fx-background-color: derive(-fx-base, -27%) #989898 , white, derive(-fx-base, -59%) #555555 ;*/ + -fx-background-color: black; +} +.color-palette > .separator > .line { + -fx-background-color: -fx-pressed-base; +/* -fx-background-color: white;*/ + -fx-padding: 6 0 0 0; + -fx-background-insets: 4 -10 0 -10,5 -10 0 -10; + -fx-border-style: none; + -fx-border-color: null; +} +.custom-color-dialog > .color-rect-pane { + -fx-padding: 15 8 15 15; +/* -fx-background-color: -fx-background;*/ +} +.custom-color-dialog > .controls-pane { + -fx-padding: 15 15 15 0; +/* -fx-background-color: -fx-background;*/ +} +.custom-color-dialog { + -fx-background-color: -fx-background; +} +/* -------- Toggle Button ---------------- */ +.custom-color-dialog .controls-pane .toggle-button { + -fx-background-radius: 4, 4, 3, 2; + -fx-padding: 3 6 3 6; +} +.custom-color-dialog .controls-pane .toggle-button:focused { + -fx-background-color: + rgba(23,134,248,0.2), + -fx-focus-color, + -fx-inner-border, + -fx-body-color; +} +.custom-color-dialog .controls-pane .toggle-button:selected Text { + -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.9) , 2, 0.0 , 0 , 1 ); +} +.custom-color-dialog .controls-pane .toggle-button:selected { + -fx-background-color: + linear-gradient( to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100% ), + linear-gradient( to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100% ), + linear-gradient( to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100% ); + -fx-background-insets: 0, 1, 1; + -fx-text-fill: -fx-light-text-color; +} +.custom-color-dialog .controls-pane #toggle-button-left { + -fx-background-radius: 3 0 0 3; + -fx-background-insets: 0 0 -1 0, 0, 1 0 1 1, 2 0 2 2; + -fx-border-color: transparent -fx-outer-border transparent transparent; + -fx-border-insets: 4 0 4 0; + -fx-padding: -2 8 -2 8; +} +.custom-color-dialog .controls-pane #toggle-button-left:focused { + -fx-background-radius: 3 0 0 3; + -fx-background-insets: -1.4 0 -1.4 -1.4, 0 0 0 0, 1, 2; + -fx-border-color: transparent; +} +.custom-color-dialog .controls-pane #toggle-button-left:selected, .controls-pane #toggle-button-left:selected:focused { + -fx-background-insets: 0 0 -1 0, 0, 1 0 1 1, 1 0 1 1; + -fx-border-color: transparent; +} +.custom-color-dialog .controls-pane #toggle-button-center { + -fx-background-radius: 0; + -fx-background-insets: 0; + -fx-background-insets: 0 0 -1 0, 0, 1 0 1 0, 2 0 2 0; + -fx-border-color: transparent -fx-outer-border transparent transparent; + -fx-border-insets: 4 0 4 0; + -fx-padding: -2 8 -2 8; +} +.custom-color-dialog .controls-pane #toggle-button-center:focused { + -fx-background-radius: 0; + -fx-background-insets: -1.4 0 -1.4 -1, 0 0 0 -1, 1 1 1 0, 2 2 2 1; + -fx-border-color: transparent; +} +.custom-color-dialog .controls-pane #toggle-button-center:selected, .controls-pane #toggle-button-center:selected:focused { + -fx-background-insets: -1.4 0 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0; + -fx-border-color: transparent; +} +.custom-color-dialog .controls-pane #toggle-button-right { + -fx-background-radius: 0 3 3 0; + -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 0; + -fx-padding: 3 8 3 8; +} +.custom-color-dialog .controls-pane #toggle-button-right:focused { + -fx-background-radius: 0 3 3 0; + -fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 2 2 2 1; +} +.custom-color-dialog .controls-pane #toggle-button-right:selected, .controls-pane #toggle-button-right:selected:focused { + -fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0; +} +.custom-color-dialog .controls-pane .current-new-color-grid #transparent-current, .controls-pane .current-new-color-grid #transparent-new { + -fx-background-image: url("pattern-transparent.png"); + -fx-background-repeat: repeat; + -fx-background-size: auto; + -fx-padding: 9 64 9 64; +} +.custom-color-dialog .controls-pane .customcolor-controls-background { + -fx-background-color: -fx-text-box-border, -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1, 2; + -fx-background-radius: 3, 2, 2; + -fx-padding: 3 5 3 5; +} +.custom-color-dialog .controls-pane .alpha-settings .text-field { + -fx-background-color: -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 3, 2; + -fx-padding: 3 5 3 5; + -fx-text-fill: -fx-text-inner-color; + -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); + -fx-cursor: text; +} +.custom-color-dialog .controls-pane .current-new-color-grid .label { + -fx-padding: 0 0 0 5; +} +.custom-color-dialog .input-field { + -fx-background-color: -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 2, 2; + -fx-padding: 3 5 3 5; + -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); + -fx-cursor: text; +} +.custom-color-dialog .input-field:focused { + -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: -0.4, 1, 2; + -fx-background-radius: 3.4, 2, 2; +} +.custom-color-dialog .input-field:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.custom-color-dialog .integer-field { + -fx-background-color: -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 2, 2; + -fx-padding: 3 5 3 5; + -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); + -fx-cursor: text; +} +.custom-color-dialog .integer-field:focused { + -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: -0.4, 1, 2; + -fx-background-radius: 3.4, 2, 2; +} +.custom-color-dialog .double-field { + -fx-background-color: -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 2, 2; + -fx-padding: 3 5 3 5; + -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); + -fx-cursor: text; +} +.custom-color-dialog .double-field:focused { + -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: -0.4, 1, 2; + -fx-background-radius: 3.4, 2, 2; +} +.custom-color-dialog .double-field:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.custom-color-dialog .webcolor-field { + -fx-background-color: -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 2, 2; + -fx-padding: 3 5 3 5; + -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); + -fx-cursor: text; +} +.custom-color-dialog .webcolor-field:focused { + -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: -0.4, 1, 2; + -fx-background-radius: 3.4, 2, 2; +} +.custom-color-dialog .webcolor-field:disabled { + -fx-opacity: -fx-disabled-opacity; +} + +/******************************************************************************* + * * + * Pagination * + * * + ******************************************************************************/ + +.pagination { + -fx-padding: 0; + -fx-arrows-visible: true; + -fx-tooltip-visible: true; + -fx-page-information-visible: true; + -fx-page-information-alignment: bottom; +} +.pagination > .page { + -fx-background-color: transparent; +} +.pagination > .pagination-control { + -fx-background-color: transparent; + -fx-padding: 0.833333em 0em 0.833333em 0em; +} +.pagination > .pagination-control > .control-box { + -fx-spacing: 4; + -fx-alignment: center; +} +.pagination > .pagination-control > .control-box > .left-arrow-button{ + -fx-background-radius: 0; + -fx-padding: 0.166667em 0.416em 0.25em 0.333em; +} +.pagination > .pagination-control > .control-box > .right-arrow-button { + -fx-background-radius: 0; + -fx-padding: 0.166667em 0.333em 0.25em 0.416em; +} +.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 > .left-arrow-button, +.pagination.bullet > .pagination-control > .control-box > .right-arrow-button { + -fx-background-radius: 4em; +} +.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-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; +} + +/******************************************************************************* + * * + * ListView and ListCell * + * * + ******************************************************************************/ + +.list-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{ + -fx-background-insets: 0, 1 0 0 0; + -fx-padding: 0 -1 -1 -1; +} +.list-view > .virtual-flow > .corner { + -fx-background-color: -fx-box-border, -fx-base; + -fx-background-insets: 0, 1 0 0 1; +} +.list-cell { + -fx-background-color: -fx-control-inner-background; + -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */ + -fx-text-fill: -fx-text-inner-color; + -fx-opacity: 1; +} +.list-cell:odd { + -fx-background-color: -fx-control-inner-background-alt; +} +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; + -fx-background-insets: 0, 1, 2; +} +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused:odd { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background-alt; + -fx-background-insets: 0, 1, 2; +} +/* When the list-cell is selected and focused */ +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-background: -fx-accent; + -fx-text-fill: -fx-selection-bar-text; +} +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected:hover { + -fx-background: -fx-accent; + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-text-fill: -fx-selection-bar-text; +} +/* When the ListView is _not_ focused, we show alternate selection colors */ +.list-cell:filled:selected:focused, +.list-cell:filled:selected, +.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected { + -fx-background-color: lightgray; + -fx-text-fill: -fx-selection-bar-text; +} +.list-cell:filled:selected:focused:disabled, +.list-cell:filled:selected:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.list-cell:filled:hover { + -fx-background-color: -fx-cell-hover-color; + -fx-text-fill: -fx-text-inner-color; +} +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:hover { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; + -fx-background-insets: 0, 1, 2; + -fx-text-fill: -fx-text-inner-color; +} +.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, +.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { + -fx-background-color: -fx-selection-bar; +} + +/******************************************************************************* + * * + * TreeView and TreeCell * + * * + ******************************************************************************/ + +.tree-view > .virtual-flow > .scroll-bar:vertical{ + -fx-background-insets: 0, 0 0 0 1; + -fx-padding: -1 -1 -1 0; +} +.tree-view > .virtual-flow > .scroll-bar:horizontal{ + -fx-background-insets: 0, 1 0 0 0; + -fx-padding: 0 -1 -1 -1; +} +.tree-view > .virtual-flow > .corner { + -fx-background-color: -fx-box-border, -fx-base; + -fx-background-insets: 0, 1 0 0 1; +} +.tree-cell { + -fx-background-color: -fx-control-inner-background; + -fx-padding: 0.25em; /* 3 */ + -fx-text-fill: -fx-text-inner-color; + -fx-indent: 80; +} +.tree-cell .label { + -fx-padding: 0.0em 0.0em 0.0em 0.25em; /* 0 0 0 3 */ +} +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:focused { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; + -fx-background-insets: 0, 1, 2; +} +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-background: -fx-accent; + -fx-text-fill: -fx-selection-bar-text; +} +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected, +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected:hover { + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected:hover { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-text-fill: -fx-selection-bar-text; +} +/* When the TreeView is _not_ focused, we show alternate selection colors */ +.tree-cell:filled:selected:focused, +.tree-cell:filled:selected { + -fx-background-color: lightgray; + -fx-text-fill: -fx-selection-bar-text; +} +.tree-cell:filled:selected:focused:disabled, +.tree-cell:filled:selected:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.tree-cell > .tree-disclosure-node, +.tree-table-row-cell > .tree-disclosure-node { + /** put a bit of padding around the disclosure node to make the clicking region larger */ + -fx-padding: 4 2 4 8; + -fx-background-color: transparent; +} +.tree-cell > .tree-disclosure-node:disabled, +.tree-table-row-cell > .tree-disclosure-node:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.tree-cell > .tree-disclosure-node > .arrow, +.tree-table-row-cell > .tree-disclosure-node > .arrow { + -fx-background-color: -fx-mark-color; + -fx-padding: 0.333333em; /* 4 */ + -fx-shape: "M 0 -4 L 8 0 L 0 4 z"; +} +.tree-cell:expanded > .tree-disclosure-node > .arrow, +.tree-table-row-cell:expanded > .tree-disclosure-node > .arrow { + -fx-rotate: 90; +} +.tree-cell:filled:selected > .tree-disclosure-node > .arrow, +.tree-table-row-cell:filled:selected > .tree-disclosure-node > .arrow { + -fx-background-color: -fx-selection-bar-text; +} +.tree-cell:filled:hover, +.tree-table-row-cell:filled:hover { + -fx-background-color: -fx-cell-hover-color; + -fx-text-fill: -fx-text-inner-color; +} +.tree-cell:filled:hover > .tree-disclosure-node > .arrow, +.tree-table-row-cell:filled:hover > .tree-disclosure-node > .arrow { + -fx-background-color: -fx-mark-color; +} +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:hover, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; + -fx-background-insets: 0, 1, 2; + -fx-text-fill: -fx-text-inner-color; +} +.tree-cell:filled:selected:hover > .tree-disclosure-node > .arrow, +.tree-table-row-cell:filled:selected:hover > .tree-disclosure-node > .arrow { + -fx-background-color: -fx-selection-bar-text; +} + +/******************************************************************************* + * * + * TableView * + * * + ******************************************************************************/ + +.table-view, +.tree-table-view { + /* Constants used throughout the tableview. */ + -fx-table-header-border-color: -fx-box-border; + -fx-table-cell-border-color: -fx-box-border; +} +/** Draws focus border around tableview */ +.table-view:focused, +.tree-table-view:focused { + -fx-background-color: -fx-faint-focus-color, -fx-focus-color,-fx-control-inner-background; + -fx-background-insets: -2, -0.3, 1; + -fx-background-radius: 2, 0, 0; +} +.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; +} +.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; +} +.table-view > .virtual-flow > .corner, +.tree-table-view > .virtual-flow > .corner { + -fx-background-color: -fx-box-border, -fx-base; + -fx-background-insets: 0, 1 0 0 1; +} +/* 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-color: -fx-table-cell-border-color, -fx-control-inner-background; + -fx-background-insets: 0, 0 0 1 0; + -fx-padding: 0.0em; /* 0 */ + -fx-text-fill: -fx-text-inner-color; +} +.table-row-cell:odd { + -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background-alt; + -fx-background-insets: 0, 0 0 1 0; +} +.table-row-cell:focused, +.tree-table-row-cell:focused { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; + -fx-background-insets: 0, 1, 2; +} +.table-row-cell:focused:odd { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background-alt; + -fx-background-insets: 0, 1, 2; +} +/* When the table-row-cell is selected and focused */ +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:selected, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-background: -fx-accent; + -fx-text-fill: -fx-selection-bar-text; +} +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected > .table-cell, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell { + -fx-text-fill: -fx-selection-bar-text; +} +.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 { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:selected:hover, +.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover{ + -fx-background: -fx-accent; + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-text-fill: -fx-selection-bar-text; +} +/* When the TableView is _not_ focused, we show alternate selection colors */ +.table-row-cell:filled:selected:focused, +.table-row-cell:filled:selected, +.tree-table-row-cell:filled:selected:focused, +.tree-table-row-cell:filled:selected { + -fx-background-color: lightgray; + -fx-text-fill: -fx-selection-bar-text; +} +.table-row-cell:selected:disabled, +.tree-table-row-cell:selected:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:hover { + -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color; + -fx-background-insets: 0, 0 0 1 0; + -fx-text-fill: -fx-text-inner-color; +} +.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover { + /* No 1-pixel bottom border for the TreeTableView (unlike the TableView above) */ + -fx-background-color: -fx-cell-hover-color; + -fx-background-insets: 0; + -fx-text-fill: -fx-text-inner-color; +} +.table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:hover, +.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { + -fx-background-color: -fx-table-cell-border-color, -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; + -fx-background-insets: 0, 0 0 1 0, 1 1 2 1, 2 2 3 2, 3 3 4 3; + -fx-text-fill: -fx-text-inner-color; +} +.table-cell { + -fx-padding: 0.166667em; /* 2px, plus border adds 1px */ + -fx-background-color: transparent; + -fx-border-color: transparent -fx-table-cell-border-color transparent transparent; + -fx-border-width: 0.083333em; /* 1 */ + -fx-cell-size: 2.0em; /* 24 */ + -fx-text-fill: -fx-text-inner-color; +} +/* 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; +} +.table-view:constrained-resize > .column-header:last-visible, +.tree-table-view:constrained-resize > .column-header:last-visible { + -fx-border-width: 0.083333em 0.0em 0.083333em 0.083333em, 0.083333em 0.0em 0.083333em 0.083333em; +} +.table-view:constrained-resize .filler, +.tree-table-view:constrained-resize .filler { + -fx-border-color: + derive(-fx-base, 80%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%) + derive(-fx-base, 10%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), + /* Outer border: */ + transparent -fx-table-header-border-color -fx-table-header-border-color -fx-table-header-border-color; + -fx-border-insets: 0 1 1 1, 0 0 0 0; +} +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; + -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; +} +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled .table-cell:focused:selected, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled .tree-table-cell:focused:selected { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; + -fx-background: -fx-accent; + -fx-text-fill: -fx-selection-bar-text; +} +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:selected, +.table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:hover:selected, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:selected, +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover:selected { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; + -fx-background-insets: 0 0 1 0; +} +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:focused:selected:hover, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:selected:hover{ + -fx-background: -fx-accent; + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; + -fx-text-fill: -fx-selection-bar-text; +} +/* When the TableView is _not_ focused, we show alternate selection colors */ +.table-row-cell:filled > .table-cell:selected:focused, +.table-row-cell:filled > .table-cell:selected, +.tree-table-row-cell:filled > .tree-table-cell:selected:focused, +.tree-table-row-cell:filled > .tree-table-cell:selected { + -fx-background-color: lightgray; + -fx-text-fill: -fx-selection-bar-text; +} +.table-cell:selected:disabled, +.tree-table-cell:selected:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:hover, +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover { + -fx-background-color: -fx-cell-hover-color; + -fx-text-fill: -fx-text-inner-color; + -fx-background-insets: 0 0 1 0; +} +.table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:focused:hover, +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; + -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; + -fx-text-fill: -fx-text-inner-color; +} +/* 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-selection-bar; + -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-body-color; + -fx-padding: 0; +} +/*.tree-table-view > .column-header-background { + -fx-background-color: -fx-body-color; + -fx-padding: 0; +}*/ +/* 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 { + -fx-text-fill: -fx-selection-bar-text; + /* TODO: for some reason, this doesn't scale. */ + -fx-font-size: 1.083333em; /* 13pt - 1 more than the default font */ + -fx-size: 25; + -fx-border-style: solid; + -fx-border-color: + /* + Inner border: we have different colours along the top, right, bottom and left. + Refer to RT-12298 for the spec. + */ + derive(-fx-base, 80%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%) + derive(-fx-base, 10%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), + /* Outer border: */ + transparent -fx-table-header-border-color -fx-table-header-border-color transparent; + -fx-border-insets: 0 1 1 0, 0 0 0 0; + -fx-border-width: 0.083333em, 0.083333em; +} +.table-view .filler, +.tree-table-view .filler { + -fx-size: 25; + -fx-border-style: solid; + -fx-border-color: + /* + Inner border: we have different colours along the top, right, bottom and left. + Refer to RT-12298 for the spec. + */ + derive(-fx-base, 80%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%) + derive(-fx-base, 10%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), + /* Outer border: */ + transparent transparent -fx-table-header-border-color transparent; + -fx-border-insets: 0 0 1 0, 0 0 0 0; + -fx-border-width: 0.083333em, 0.083333em 0 0.083333em 0.083333em; +} +.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-background > .show-hide-columns-button, +.tree-table-view > .column-header-background > .show-hide-columns-button{ + -fx-background-color: -fx-body-color; + + -fx-border-color: + /* inner border: A copy of the inner border used above in the general column header area. */ + derive(-fx-base, 80%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), + derive(-fx-base, 10%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), + /* outer border: Slightly different to the above*/ + transparent transparent -fx-table-header-border-color -fx-table-header-border-color; + -fx-border-insets: 0 0 0 1, 0 0 0 0; +} +.table-view .show-hide-column-image, +.tree-table-view .show-hide-column-image { + -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; + -fx-background-insets: 1 0 -1 0, 0; + + -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"; +} +/*.nested-column-header .column-header { + -fx-background-color: transparent; +}*/ +/* 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; +} +.table-view /*> column-header-background > nested-column-header >*/ .arrow, +.tree-table-view /*> column-header-background > nested-column-header >*/ .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"; +} +/* 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; +} +.check-box-table-cell > .check-box { + -fx-opacity: 1; +} +.check-box-table-cell > .check-box > .box { + -fx-background-color: null; + -fx-background-insets: 0; + -fx-border-color: -fx-outer-border; + -fx-border-radius: 3; +} +.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-border-color: derive(-fx-accent,20%); +} +/******************************************************************************* + * * + * TreeTableView * + * * + * Note: A lot of the CSS for TreeTableView is included with the TreeView and * + * TableView CSS styles elsewhere in caspian.css (as they are the same, just * + * targeting different CSS style classes). * + ******************************************************************************/ + +.tree-table-row-cell { + -fx-background-color: -fx-control-inner-background; + -fx-padding: 0.0em; /* 0 */ + -fx-text-fill: -fx-text-inner-color; +} +.tree-table-cell { + -fx-padding: 0.166667em; /* 2px, plus border adds 1px */ + -fx-background-color: transparent; + -fx-border-color: transparent -fx-table-cell-border-color transparent transparent; + -fx-border-width: 0.083333em; /* 1 */ + -fx-cell-size: 2.0em; /* 24 */ + -fx-text-fill: -fx-text-inner-color; +} + +/******************************************************************************* + * * + * TreeTableView cell spanning * + * * + ******************************************************************************/ + +.cell-span-tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell { + -fx-background-color: transparent; +} +/* All table-row-cells - we don't care if they are even or odd */ +.cell-span-tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell { + -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background; + -fx-background-insets: 0, 0 1 0 0; + -fx-alignment: center; +} +/** Selection styles */ +/*.cell-span-table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused:selected, */ +.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell, +.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected > .tree-table-cell, +.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover > .tree-table-cell, +.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:filled:selected, +.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:filled:focused:selected, +.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:filled:focused:selected:hover{ + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; + -fx-background: -fx-accent; + -fx-text-fill: -fx-selection-bar-text; +} +/** Hover styles */ +/** --- Row selection mode hover */ +.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover > .tree-table-cell { + -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color; + -fx-background-insets: 0, 0 0 1 0; + -fx-text-fill: -fx-text-inner-color; +} +.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover > .tree-table-cell { + -fx-background-color: -fx-table-cell-border-color, -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; + -fx-background-insets: 0, 0 0 1 0, 1 1 2 1, 2 2 3 2, 3 3 4 3; + -fx-text-fill: -fx-text-inner-color; +} +/** --- Cell selection mode hover */ +.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover{ + -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color; + -fx-text-fill: -fx-text-inner-color; + -fx-background-insets: 0, 0 0 1 0; +} +.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover{ + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; + -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; + -fx-text-fill: -fx-text-inner-color; +} +/** End of hover styles */ + +/******************************************************************************* + * * + * 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.833333em; /* 10px */ + -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5) , 10, 0.0 , 0 , 0 ); + -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: linear-gradient(to bottom, derive(-fx-background, -10%), derive(-fx-background, -5%)), + linear-gradient(from 0px 0px to 0px 5px, derive(-fx-background, -5%), derive(-fx-background, 20%)); + -fx-background-insets: 0,1; + -fx-background-radius: 6,5; + -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-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%); +} +.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: #f9d900, white; + -fx-background-insets: 0, 2; + -fx-background-radius: 5px; + -fx-padding: 5px; +} +.chart-series-line { + -fx-stroke: #f9d900; + -fx-stroke-width: 3px; + /*-fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.3) , 8, 0.0 , 0 , 3 );*/ +} +.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: #f9d900, 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: #f9d900; + -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: #f9d90044; +} +.default-color0.chart-series-area-fill { -fx-fill: CHART_COLOR_1; -fx-opacity: 0.2; } +.default-color1.chart-series-area-fill { -fx-fill: CHART_COLOR_2; -fx-opacity: 0.2; } +.default-color2.chart-series-area-fill { -fx-fill: CHART_COLOR_3; -fx-opacity: 0.2; } +.default-color3.chart-series-area-fill { -fx-fill: CHART_COLOR_4; -fx-opacity: 0.2; } +.default-color4.chart-series-area-fill { -fx-fill: CHART_COLOR_5; -fx-opacity: 0.2; } +.default-color5.chart-series-area-fill { -fx-fill: CHART_COLOR_6; -fx-opacity: 0.2; } +.default-color6.chart-series-area-fill { -fx-fill: CHART_COLOR_7; -fx-opacity: 0.2; } +.default-color7.chart-series-area-fill { -fx-fill: CHART_COLOR_8; -fx-opacity: 0.2; } +.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: #f9d900; + -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; -fx-opacity: 0.7; } +.default-color1.chart-bubble { -fx-bubble-fill: CHART_COLOR_2; -fx-opacity: 0.7; } +.default-color2.chart-bubble { -fx-bubble-fill: CHART_COLOR_3; -fx-opacity: 0.7; } +.default-color3.chart-bubble { -fx-bubble-fill: CHART_COLOR_4; -fx-opacity: 0.7; } +.default-color4.chart-bubble { -fx-bubble-fill: CHART_COLOR_5; -fx-opacity: 0.7; } +.default-color5.chart-bubble { -fx-bubble-fill: CHART_COLOR_6; -fx-opacity: 0.7; } +.default-color6.chart-bubble { -fx-bubble-fill: CHART_COLOR_7; -fx-opacity: 0.7; } +.default-color7.chart-bubble { -fx-bubble-fill: CHART_COLOR_8; -fx-opacity: 0.7; } + +/******************************************************************************* + * * + * BarChart * + * * + ******************************************************************************/ + +/* TODO flip gradient vertical for negative bars */ +/*.chart-bar { + -fx-bar-fill: #22bad9; + -fx-background-color: derive(-fx-bar-fill,-30%), + linear-gradient(to bottom, derive(-fx-bar-fill,40%), derive(-fx-bar-fill,10%)), + linear-gradient(to bottom, derive(-fx-bar-fill,10%) ,derive(-fx-bar-fill,-6%)); + -fx-background-insets: 0,1 1 0 1,2 2 1 2; +} +.chart-bar.negative { + -fx-background-color: derive(-fx-bar-fill,-30%), + linear-gradient(to top, derive(-fx-bar-fill,40%), derive(-fx-bar-fill,10%)), + linear-gradient(to top, derive(-fx-bar-fill,10%) ,derive(-fx-bar-fill,-6%)); + -fx-background-insets: 1 0 0 0,1,2; +}*/ +.chart-bar { + -fx-bar-fill: #22bad9; + -fx-background-color: linear-gradient(to right, + derive(-fx-bar-fill, -7%), + derive(-fx-bar-fill, 0%), + derive(-fx-bar-fill, -3%), + derive(-fx-bar-fill, -9%) + ); + -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, -7%), + derive(-fx-bar-fill, 0%), + derive(-fx-bar-fill, -3%), + derive(-fx-bar-fill, -9%) + ); +} +.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: #2f357f; + -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. * + * * + ******************************************************************************/ + +.split-pane > * > .table-view { -fx-padding: 0px; } +.split-pane > * > .list-view { -fx-padding: 0px; } +.split-pane > * > .tree-view { -fx-padding: 0px; } +.split-pane > * > .scroll-pane { -fx-padding: 0px; } +.split-pane > * > .split-pane { + -fx-background-insets: 0, 0; + -fx-padding: 0; + } + + /* ############################################################################ + # Workaround for RT-27627 # + ############################################################################ */ + +.choice-box > .open-button > .arrow { doh: true; } +.split-menu-button:openvertically > .arrow-button > .arrow { doh: true; } +.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow { doh: true; } +.tree-table-view { doh: true; } +.tree-table-view:focused { doh: true; } +.tree-table-view > .virtual-flow > .scroll-bar:vertical { doh: true; } +.tree-table-view > .virtual-flow > .scroll-bar:horizontal { doh: true; } +.tree-table-view > .virtual-flow > .corner { doh: true; } +.tree-table-row-cell:focused { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected { doh: true; } +.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover{ doh: true; } +.tree-table-row-cell:filled:selected:focused { doh: true; } +.tree-table-row-cell:filled:selected { doh: true; } +.tree-table-row-cell:selected:disabled { doh: true; } +.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover { doh: true; } +.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { doh: true; } +.tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible { doh: true; } +.tree-table-view:constrained-resize > .column-header:last-visible { doh: true; } +.tree-table-view:constrained-resize .filler { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled .tree-table-cell:focused:selected { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; } +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover:selected { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:selected:hover{ doh: true; } +.tree-table-row-cell:filled > .tree-table-cell:selected:focused { doh: true; } +.tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; } +.tree-table-cell:selected:disabled { doh: true; } +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover { doh: true; } +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover { doh: true; } +.tree-table-view .column-resize-line { doh: true; } +.tree-table-view > .column-header-background { doh: true; } +.tree-table-view .column-header { doh: true; } +.tree-table-view .filler { doh: true; } +.tree-table-view .column-header .sort-order{ doh: true; } +.tree-table-view > .column-header-background > .show-hide-columns-button{ doh: true; } +.tree-table-view .show-hide-column-image { doh: true; } +.tree-table-view .column-drag-header { doh: true; } +.tree-table-view .column-overlay { doh: true; } +.tree-table-view /*> column-header-background > nested-column-header >*/ .arrow { doh: true; } +.tree-table-view .empty-table { doh: true; } +.axis-minor-tick-mark { doh: true; } +.chart-horizontal-zero-line { doh: true; } +.stacked-bar-chart:horizontal .chart-bar { doh: true; } \ No newline at end of file diff --git a/main/ui/src/main/resources/css/mac_theme.css b/main/ui/src/main/resources/css/mac_theme.css new file mode 100644 index 000000000..594c9196d --- /dev/null +++ b/main/ui/src/main/resources/css/mac_theme.css @@ -0,0 +1,904 @@ + /* + * Copyright (c) 2014 Sebastian Stenzel + * This file is licensed under the terms of the MIT license. + * See the LICENSE.txt file for more info. + * + * Contributors: + * Sebastian Stenzel - initial API and implementation + * + */ + +.root { + -fx-font-family: 'lucida-grande'; + -fx-font-smoothing-type: lcd; + -fx-font-size: 13.0; + + /*************************************************************************** + * * + * The main color palette from which the rest of the colors are derived. * + * * + **************************************************************************/ + + -fx-base: #FFFFFF; + -fx-background: #ECECEC; + + /* 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: #FFFFFF; + + /* 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: #B5B5B5; + -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: #B2D7FF; + + /* 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: #78A6D7; + -fx-faint-focus-color: #8FBDEE; + + /* 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; + + /* The opacity level to use for the "disabled" pseudoclass. + */ + -fx-disabled-opacity: 0.6; + + /* Chart Color Palette */ + CHART_COLOR_1: #28CA40; + CHART_COLOR_2: #FD4943; + CHART_COLOR_3: #2283FB; + CHART_COLOR_4: #FAEA77; + CHART_COLOR_5: #FA9E78; + CHART_COLOR_6: #F47BF8; + CHART_COLOR_7: #c84164; + CHART_COLOR_8: #888888; + + /*************************************************************************** + * * + * Colors that are derived from the main color palette. * + * * + **************************************************************************/ + + /* 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: -fx-dark-text-color; + + /* 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: #C8C8C8; + + /* Darker than -fx-background and used to draw boxes around text boxes and + * password boxes. + */ + -fx-text-box-border: #B5B5B5; + + /* 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, derive(-fx-color,75%), derive(-fx-color,2%)); + + /* 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. Typically is the fourth color + * in the -fx-background-color list and represents main body of the control. + * Insets are typically 2. + */ + -fx-body-color: linear-gradient(to bottom, 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: -fx-dark-text-color; + + /* 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: -fx-dark-text-color; + + /* Background for items in list like things such as menus, lists, trees, + * and tables. + * + * TODO: it seems like this should be based upon -fx-accent and we should + * remove the setting -fx-background in all the sections that use + * -fx-selection-bar. + */ + -fx-selection-bar: #2283FB; + + /* The color to use as -fx-text-fill when painting text on top of + * backgrounds filled with -fx-selection-bar. + * + * TODO: it seems like this should be derived from -fx-selection-bar. + */ + -fx-selection-bar-text: -fx-light-text-color; + + /* These are needed for Popup */ + -fx-background-color: inherit; + -fx-background-radius: inherit; + -fx-background-insets: inherit; + -fx-padding: inherit; + + -fx-cell-focus-inner-border: -fx-selection-bar; + + /*************************************************************************** + * * + * Set the default background color for the scene * + * * + **************************************************************************/ + + -fx-background-color: -fx-background; +} + +/******************************************************************************* + * * + * Common Styles * + * * + * These are styles that give a standard look to a whole range of controls * + * * + ******************************************************************************/ + +/* ==== 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 > .arrow-button { + -fx-background-color: linear-gradient(to bottom, #C1C1C1 0%, #A6A6A6 100%), -fx-base; + -fx-background-insets: 0, 1; + -fx-background-radius: 4; + -fx-padding: 0.2em 0.8em 0.2em 0.8em; + -fx-text-fill: -fx-dark-text-color; + -fx-alignment: CENTER; + -fx-focus-traversable: false; + -fx-effect: dropshadow(one-pass-box, #DCDCDC, 0.0, 0.0, 0.0, 1.0); +} +.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, +.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover { + -fx-color: -fx-base; +} +.button:armed, +.button:default: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, +.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:pressed { + -fx-background-color: linear-gradient(to bottom, #237FFE 0%, #023FDD 100%), linear-gradient(to bottom, #4A97FD 0%, #0867E4 100%); + -fx-text-fill: -fx-light-text-color; +} +.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 { + -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; + -fx-background-insets: -2, -0.3, 1, 2; + -fx-background-radius: 7, 6, 4, 3; +} + +/* ==== DISABLED THINGS ================================================= */ + +.button:disabled, +.toggle-button:disabled, +.radio-button:disabled, +.check-box:disabled, +.hyperlink:disabled, +.menu-button:disabled, +.split-menu-button:disabled, +.slider:disabled, +.scroll-pane:disabled, +.progress-bar:disabled, +.progress-indicator:disabled, +.text-input:disabled, +.choice-box:disabled, +.combo-box-base:disabled, +.list-view:disabled, +.tree-view:disabled, +.table-view:disabled, +.tree-table-view:disabled, +.tab-pane:disabled, +.tab-pane > .tab-header-area > .headers-region > .tab:disabled { + -fx-background-color: linear-gradient(to bottom, #D2D2D2 0%, #C4C4C4 100%), #F2F2F2; + -fx-background-insets: 0, 1; + -fx-text-fill: -fx-mid-text-color; + -fx-effect: dropshadow(one-pass-box, #E0E0E0, 0.0, 0.0, 0.0, 0.5); +} + +/* ==== MNEMONIC THINGS ================================================= */ + +.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; +} + +/* ==== ARROWS ========================================================== */ + +.combo-box-base > .arrow-button > .arrow { + -fx-background-color: -fx-light-text-color; + -fx-background-insets: 0 0 -1 0, 0; + -fx-padding: 9px 6px 0 0; + -fx-shape: "M 0 3 l 3 -3 l 3 3 m 0 3 l -3 3 l -3 -3"; +} + +/* ==== CHOICE BOX LIKE THINGS ========================================== */ + +.combo-box-base { + -fx-padding: 0; +} + +/* ==== BOX LIKE THINGS ================================================= */ + +.scroll-pane, +.split-pane, +.list-view, +.tree-view, +.table-view, +.tree-table-view { + -fx-background-color: -fx-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-padding: 1; +} + +/******************************************************************************* + * * + * Label * + * * + ******************************************************************************/ + +.label { + -fx-text-fill: -fx-text-background-color; +} + +/******************************************************************************* + * * + * Button & ToggleButton * + * * + ******************************************************************************/ + +/* ==== DEFAULT ========================================================= */ + +.button:default { + -fx-background-color: linear-gradient(to bottom, #4AA0F9 0%, #045FFF 100%), linear-gradient(to bottom, #69B2FA 0%, #0D81FF 100%); + -fx-text-fill: -fx-light-text-color; +} +.button:default:disabled { + -fx-background-color: linear-gradient(to bottom, #D2D2D2 0%, #C4C4C4 100%), #F2F2F2; + -fx-background-insets: 0, 1; + -fx-text-fill: -fx-mid-text-color; +} + +/******************************************************************************* + * * + * ToolBar * + * * + ******************************************************************************/ + +.tool-bar:horizontal { + -fx-background-color: -fx-box-border, -fx-background; + -fx-background-insets: 0; + -fx-padding: 0.4em; + -fx-spacing: 0.2em; + -fx-alignment: CENTER_LEFT; +} + +.tool-bar:horizontal > .container > .separator { + -fx-orientation: vertical; +} + +/******************************************************************************* + * * + * ScrollBar * + * * + ******************************************************************************/ +.scroll-bar:horizontal, +.scroll-bar:vertical { + -fx-background-color: #E8E8E8, #FAFAFA; +} + +.scroll-bar:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.scroll-bar > .thumb { + -fx-background-color: #C1C1C1; + -fx-background-insets: 2px; + -fx-background-radius: 4px; +} +.scroll-bar > .thumb:hover { + -fx-background-color: #7D7D7D; +} + +.scroll-bar > .increment-button, +.scroll-bar > .decrement-button { + -fx-background-color: transparent; + -fx-color: transparent; +} + +.scroll-bar:horizontal > .increment-button, +.scroll-bar:horizontal > .decrement-button { + -fx-padding: 6px 0px; +} + +.scroll-bar:vertical > .increment-button, +.scroll-bar:vertical > .decrement-button { + -fx-padding: 0px 6px; +} + +/******************************************************************************* + * * + * Separator * + * * + ******************************************************************************/ + +.separator:horizontal .line { + -fx-border-color: -fx-text-box-border transparent transparent transparent; + -fx-border-insets: 0, 1 0 0 0; +} +.separator:vertical .line { + -fx-border-color: transparent transparent transparent -fx-text-box-border; + -fx-border-width: 3, 1; + -fx-border-insets: 0, 0 0 0 1; +} + +/******************************************************************************* + * * + * ProgressIndicator * + * * + ******************************************************************************/ + +.progress-indicator { + -fx-indeterminate-segment-count: 12.0; +} + +.progress-indicator > .determinate-indicator > .indicator { + -fx-background-color: + rgb(208.0, 208.0, 208.0), + linear-gradient(rgb(176.0, 176.0, 176.0), rgb(207.0, 207.0, 207.0)), + linear-gradient(rgb(190.0, 190.0, 190.0) 0.0%, rgb(213.0, 213.0, 213.0) 15.0%, rgb(230.0, 230.0, 230.0) 50.0%, rgb(235.0, 235.0, 235.0) 100.0%), + linear-gradient(to left, rgb(196.0, 196.0, 196.0, 0.5) 0.0%, rgb(220.0, 220.0, 220.0, 0.2) 2.0% , transparent); + -fx-background-insets: 0.5 0.0 -0.5 0.0, 0.0, 0.5, 1.0; + -fx-padding: 0.083333em; +} + +.progress-indicator > .determinate-indicator > .progress { + -fx-background-color: + rgb(208.0, 208.0, 208.0), + radial-gradient(center 50.0% 50.0%, radius 50.0%, rgb(84.0, 170.0, 240.0), rgb(90.0, 192.0, 246.0)); + -fx-background-insets: 0.0, 0.5; + -fx-padding: 0.166667em; +} + +.progress-indicator > .determinate-indicator > .tick { + -fx-background-color: rgb(208.0, 208.0, 208.0), white; + -fx-background-insets: 1.0 0.0 -1.0 0.0, 0.0; + -fx-padding: 0.416667em; + -fx-shape: "m 18.174523,1027.137 c -0.18077,-0.4575 -0.184364,-0.8913 0.115901,-1.1721 0.300265,-0.2809 0.836622,-0.3601 1.288422,-0.041 0.4518,0.3191 2.020453,2.9316 2.020453,2.9316 l 5.41194,-8.0232 c -4e-6,0 0.516257,-0.6671 1.248682,-0.3099 0.648831,0.3165 0.559153,1.0373 0.559153,1.0373 0,0 -5.940433,9.3556 -6.15501,9.6287 -0.214577,0.273 -1.595078,0.2481 -1.817995,-0.027 -0.222917,-0.2751 -2.490777,-3.567 -2.671546,-4.0244 z"; + -fx-scale-shape: false; +} + +.progress-indicator > .percentage { + -fx-font-size: 0.916667em; +} + +.progress-indicator:disabled { + -fx-opacity: -fx-disabled-opacity; +} + +.progress-indicator:indeterminate > .spinner { + -fx-padding: 0.083333em; +} + +.progress-indicator:indeterminate .segment { + -fx-background-color: rgb(95.0, 95.0, 98.0), rgb(122.0, 122.0, 125.0); + -fx-background-insets:0.0, 0.5; +} +.progress-indicator:indeterminate .segment0 { + -fx-shape:"m 14.321262,6.5816808 c -0.824944,0.3797564 -0.10368,1.8484772 0.718513,1.3544717 L 18.786514,5.9486042 C 19.644992,5.4932031 18.92648,4.1387308 18.068001,4.5941315 z"; +} +.progress-indicator:indeterminate .segment1 { + -fx-shape:"m 15.372451,9.2445322 c -0.906719,-0.051108 -0.957826,1.5843588 0,1.5332498 l 4.241273,0 c 0.97179,0 0.97179,-1.5332498 0,-1.5332498 z"; +} +.progress-indicator:indeterminate .segment2 { + -fx-shape:"m 14.423504,13.443113 c -0.824945,-0.379757 -0.10368,-1.848478 0.718512,-1.354472 l 3.746739,1.987548 c 0.858478,0.455401 0.139967,1.809873 -0.718512,1.354473 z"; +} +.progress-indicator:indeterminate .segment3 { + -fx-shape:"m 12.10997,15.070611 c -0.49762,-0.759687 0.893182,-1.621681 1.327834,-0.766626 l 2.120636,3.673051 c 0.485895,0.841595 -0.841938,1.60822 -1.327833,0.766625 z"; +} +.progress-indicator:indeterminate .segment4 { + -fx-shape:"m 9.2224559,19.539943 c -0.051108,0.906718 1.5843581,0.957826 1.5332501,0 l 0,-4.241273 c 0,-0.97179 -1.5332501,-0.97179 -1.5332501,0 z"; +} +.progress-indicator:indeterminate .segment5 { + -fx-shape:"M 8.0465401,15.070611 C 8.5441601,14.310924 7.1533584,13.44893 6.7187068,14.303985 l -2.1206366,3.673051 c -0.485895,0.841595 0.8419383,1.60822 1.3278333,0.766625 z"; +} +.progress-indicator:indeterminate .segment6 { + -fx-shape:"M 5.7330066,13.443113 C 6.5579512,13.063356 5.8366865,11.594635 5.0144939,12.088641 L 1.2677551,14.076189 C 0.409277,14.53159 1.1277888,15.886062 1.9862674,15.430662 z"; +} +.progress-indicator:indeterminate .segment7 { + -fx-shape:"m 0.42171041,9.2083842 c -0.90671825,-0.051108 -0.95782608,1.5843588 0,1.5332498 l 4.24127319,0 c 0.9717899,0 0.9717899,-1.5332498 0,-1.5332498 z"; +} +.progress-indicator:indeterminate .segment8 { + -fx-shape:"M 5.7330066,6.5305598 C 6.5579512,6.9103162 5.8366865,8.3790371 5.0144939,7.8850315 L 1.2677551,5.8974832 C 0.409277,5.4420823 1.1277888,4.0876101 1.9862674,4.5430105 z"; +} +.progress-indicator:indeterminate .segment9 { + -fx-shape:"M 8.0465401,4.9030617 C 8.5441601,5.6627485 7.1533584,6.5247425 6.7187068,5.6696872 L 4.5980702,1.9966363 C 4.1121752,1.1550418 5.4400085,0.38841683 5.9259035,1.2300114 z"; +} +.progress-indicator:indeterminate .segment10 { + -fx-shape:"m 9.2224559,4.62535 c -0.051108,0.9067177 1.5843581,0.957826 1.5332501,0 l 0,-4.24127319 c 0,-0.9717899 -1.5332501,-0.9717899 -1.5332501,0 z"; +} +.progress-indicator:indeterminate .segment11 { + -fx-shape:"m 12.007729,4.9541827 c -0.49762,0.7596865 0.893181,1.6216808 1.327833,0.7666252 L 15.456199,2.0477574 C 15.942094,1.2061627 14.61426,0.43953765 14.128365,1.2811324 z"; +} + +/******************************************************************************* + * * + * Text COMMON * + * * + ******************************************************************************/ + +.text-input { + -fx-text-fill: -fx-dark-text-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-border-color: -fx-text-box-border; + -fx-border-width: 1px; + -fx-background-color: #FFFFFF; + -fx-background-insets: 0; + -fx-background-radius: 0; + -fx-cursor: text; + -fx-padding: 2px; +} +.text-input:focused { + -fx-highlight-fill: -fx-accent; + -fx-border-color: -fx-focus-color; + -fx-border-width: 1px; + -fx-background-color: -fx-faint-focus-color, #FFFFFF; + -fx-background-insets: -3, 0; + -fx-background-radius: 3, 0; + -fx-prompt-text-fill: transparent; +} + +/******************************************************************************* + * * + * PopupMenu * + * * + ******************************************************************************/ + +.context-menu { + -fx-background-color: rgba(255.0, 255.0, 255.0, 0.9); + -fx-background-insets: 0; + -fx-background-radius: 4.0; + -fx-padding: 4px 0 4px 0; + -fx-effect: dropshadow(three-pass-box, rgba(0.0,0.0,0.0,0.6), 8.0, 0.0, 0.0, 0.0 ); +} +.context-menu > .separator { + -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */ +} + +/******************************************************************************* + * * + * MenuItem * + * * + ******************************************************************************/ + +.menu-item { + -fx-background-color: transparent; + -fx-background-insets:0.0; + -fx-padding:0.2em 1em 0.2em 1em; + -fx-border-width: 0.0 0.0 0.0 0.0; + -fx-border-color:transparent; +} +.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:disabled > .label { + -fx-opacity: -fx-disabled-opacity; +} +.menu-item:focused { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.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; +} +.menu > .right-container > .arrow { + -fx-padding: 0.458em 0.167em 0.458em 0.167em; /* 4.5 2 4.5 2 */ + -fx-background-color: -fx-color; + -fx-shape: "M0,-4L4,0L0,4Z"; + -fx-scale-shape: false; +} +.menu:selected > .right-container > .arrow { + -fx-background-color: white; +} +.menu-item:disabled { + -fx-opacity: -fx-disabled-opacity; +} + +/******************************************************************************* + * * + * ComboBox * + * * + ******************************************************************************/ + +/* Customie 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.2em 0.5em 0.2em 0.5em; +} +.combo-box-base > .arrow-button { + -fx-background-color: linear-gradient(to bottom, #4AA0F9 0%, #045FFF 100%), linear-gradient(to bottom, #69B2FA 0%, #0D81FF 100%); + -fx-background-radius: 0 5 5 0, 0 4 4 0; + -fx-padding: 0.2em 0.5em 0.2em 0.5em; + -fx-background-insets: 0 0 0 1, 1; +} + +.combo-box-popup > .list-view { + -fx-background-color: rgba(255.0, 255.0, 255.0, 0.9); + -fx-background-insets: 0; + -fx-background-radius: 4.0; + -fx-padding: 4px 0 4px 0; + -fx-effect: dropshadow(three-pass-box, rgba(0.0,0.0,0.0,0.6), 8.0, 0.0, 0.0, 0.0); +} +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell { + -fx-background-color: transparent; + -fx-background-insets:0.0; + -fx-padding:0.2em 1em 0.2em 1em; + -fx-border-width: 0.0 0.0 0.0 0.0; + -fx-border-color:transparent; +} + +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, +.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; + -fx-text-fill: -fx-selection-bar-text; +} + +/******************************************************************************* + * * + * SplitPane * + * * + ******************************************************************************/ + +.split-pane > .split-pane-divider { + -fx-padding: 0 0.25em 0 0.25em; /* 0 3 0 3 */ +} + +/******************************************************************************* + * * + * ListView and ListCell * + * * + ******************************************************************************/ + +.list-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{ + -fx-background-insets: 0, 1 0 0 0; + -fx-padding: 0 -1 -1 -1; +} +.list-view > .virtual-flow > .corner { + -fx-background-color: -fx-box-border, -fx-base; + -fx-background-insets: 0, 1 0 0 1; +} +.list-cell { + -fx-background-color: -fx-control-inner-background; + -fx-padding: 0.8em 0.5em 0.8em 0.5em; + -fx-text-fill: -fx-text-inner-color; + -fx-opacity: 1; +} +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; + -fx-background-insets: 0, 1, 2; +} +/* When the list-cell is selected and focused */ +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-background: -fx-accent; + -fx-text-fill: -fx-selection-bar-text; +} +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected:hover { + -fx-background: -fx-accent; + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-text-fill: -fx-selection-bar-text; +} +/* When the ListView is _not_ focused, we show alternate selection colors */ +.list-cell:filled:selected:focused, +.list-cell:filled:selected, +.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected { + -fx-background-color: lightgray; + -fx-text-fill: -fx-selection-bar-text; +} +.list-cell:filled:selected:focused:disabled, +.list-cell:filled:selected:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, +.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { + -fx-background-color: -fx-selection-bar; +} + +/******************************************************************************* + * * + * Tooltip * + * * + ******************************************************************************/ + +.tooltip { + -fx-background-color: -fx-background; + -fx-padding: 0.2em 0.4em 0.2em 0.4em; + -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 2, 0, 0, 0); + -fx-font-size: 0.8em; +} + +/******************************************************************************* + * * + * Charts * + * * + ******************************************************************************/ + +.chart { + -fx-padding: 5px; +} +.chart-content { + -fx-padding: 10px; +} +.chart-title { + -fx-font-size: 1.4em; +} +.chart-legend { + -fx-background-color: linear-gradient(to bottom, derive(-fx-background, -10%), derive(-fx-background, -5%)), + linear-gradient(from 0px 0px to 0px 5px, derive(-fx-background, -5%), derive(-fx-background, 20%)); + -fx-background-insets: 0,1; + -fx-background-radius: 6,5; + -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-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%); +} +.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%); +} + +/******************************************************************************* + * * + * LineChart * + * * + ******************************************************************************/ + +.chart-line-symbol { + -fx-background-color: #f9d900, white; + -fx-background-insets: 0, 2; + -fx-background-radius: 5px; + -fx-padding: 5px; +} +.chart-series-line { + -fx-stroke: #f9d900; + -fx-stroke-width: 3px; + /*-fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.3) , 8, 0.0 , 0 , 3 );*/ +} +.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; } + +/******************************************************************************* + * * + * 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. * + * * + ******************************************************************************/ + +.split-pane > * > .table-view { -fx-padding: 0px; } +.split-pane > * > .list-view { -fx-padding: 0px; } +.split-pane > * > .tree-view { -fx-padding: 0px; } +.split-pane > * > .scroll-pane { -fx-padding: 0px; } +.split-pane > * > .split-pane { + -fx-background-insets: 0, 0; + -fx-padding: 0; + } + + /* ############################################################################ + # Workaround for RT-27627 # + ############################################################################ */ + +.choice-box > .open-button > .arrow { doh: true; } +.split-menu-button:openvertically > .arrow-button > .arrow { doh: true; } +.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow { doh: true; } +.tree-table-view { doh: true; } +.tree-table-view:focused { doh: true; } +.tree-table-view > .virtual-flow > .scroll-bar:vertical { doh: true; } +.tree-table-view > .virtual-flow > .scroll-bar:horizontal { doh: true; } +.tree-table-view > .virtual-flow > .corner { doh: true; } +.tree-table-row-cell:focused { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected { doh: true; } +.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover{ doh: true; } +.tree-table-row-cell:filled:selected:focused { doh: true; } +.tree-table-row-cell:filled:selected { doh: true; } +.tree-table-row-cell:selected:disabled { doh: true; } +.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover { doh: true; } +.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { doh: true; } +.tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible { doh: true; } +.tree-table-view:constrained-resize > .column-header:last-visible { doh: true; } +.tree-table-view:constrained-resize .filler { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled .tree-table-cell:focused:selected { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; } +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover:selected { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:selected:hover{ doh: true; } +.tree-table-row-cell:filled > .tree-table-cell:selected:focused { doh: true; } +.tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; } +.tree-table-cell:selected:disabled { doh: true; } +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover { doh: true; } +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover { doh: true; } +.tree-table-view .column-resize-line { doh: true; } +.tree-table-view > .column-header-background { doh: true; } +.tree-table-view .column-header { doh: true; } +.tree-table-view .filler { doh: true; } +.tree-table-view .column-header .sort-order{ doh: true; } +.tree-table-view > .column-header-background > .show-hide-columns-button{ doh: true; } +.tree-table-view .show-hide-column-image { doh: true; } +.tree-table-view .column-drag-header { doh: true; } +.tree-table-view .column-overlay { doh: true; } +.tree-table-view /*> column-header-background > nested-column-header >*/ .arrow { doh: true; } +.tree-table-view .empty-table { doh: true; } +.axis-minor-tick-mark { doh: true; } +.chart-horizontal-zero-line { doh: true; } +.stacked-bar-chart:horizontal .chart-bar { doh: true; } \ No newline at end of file diff --git a/main/ui/src/main/resources/css/win_theme.css b/main/ui/src/main/resources/css/win_theme.css new file mode 100644 index 000000000..3df5fb42d --- /dev/null +++ b/main/ui/src/main/resources/css/win_theme.css @@ -0,0 +1,2977 @@ +/* + Modena + + This is the second generation theme for JavaFX after Caspian. +*/ + +/* + * Copyright (c) 2009, 2011, 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. + * + */ + +/******************************************************************************* + * * + * THEMEING INSTRUCTIONS * + * * + ******************************************************************************* + +TODO: Explain here how themeing 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 DIFFERNT SCEEN DPI +------------------------------- + +When the screen DPI changes Windows will use a differnt font size be default. +The default is 12px and the can change to 15px or 18px depending on user +preference or screen DPI. On Mac the default is 13px and embbeded will depend +on hardware. To make UI controls scale and be the right proportions of each of +these font sizes we base the padding (which controls size of control) on the +font size. This is done using the CSS measument 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: #292929; + -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: #4fb6d6; + + /* 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: #f25f29; + -fx-faint-focus-color: #f25f2933; + + /* 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; + + /* The opacity level to use for the "disabled" pseudoclass. + */ + -fx-disabled-opacity: 0.4; + + /* 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; + + /*************************************************************************** + * * + * 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 ontop of -fx-background. This is never a shadow in Modena but + * keep -fx-shadow-highlight-color name to be compatable with Caspian. + */ + -fx-shadow-highlight-color: ladder( + -fx-background, + rgba(255,255,255,0.2) 0%, + rgba(255,255,255,0.2) 20%, + rgba(255,255,255,0.2) 70%, + rgba(255,255,255,1) 90%, + rgba(255,255,255,1) 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, derive(-fx-color,75%), derive(-fx-color,2%)); + + -fx-inner-border-horizontal: linear-gradient(to right, derive(-fx-color,75%), derive(-fx-color,2%)); +/* -fx-inner-border-horizontal: linear-gradient( + to right, + ladder(-fx-color, + derive(-fx-color,80%) 60%, + white 82%) 0%, + ladder(-fx-color, + derive(-fx-color,20%) 10%, + derive(-fx-color,-10%) 80%) 100% + );*/ + + -fx-inner-border-bottomup: linear-gradient( + to top, + ladder(-fx-color, + derive(-fx-color,80%) 60%, + white 82%) 0%, + ladder(-fx-color, + derive(-fx-color,20%) 10%, + derive(-fx-color,-10%) 80%) 100%); + + /* 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. Typically is the fourth color + * in the -fx-background-color list and represents main body of the control. + * Insets are typically 2. + */ + -fx-body-color: linear-gradient(to bottom, derive(-fx-color,10%) ,derive(-fx-color,-6%)); + -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. + * + * TODO: it seems like this should be based upon -fx-accent and we should + * remove the setting -fx-background in all the sections that use + * -fx-selection-bar. + */ + -fx-selection-bar: -fx-accent; + + /* The color to use as -fx-text-fill when painting text on top of + * backgrounds filled with -fx-selection-bar. + * + * TODO: it seems like this should be derived from -fx-selection-bar. + */ + -fx-selection-bar-text: ladder( + -fx-background, + -fx-light-text-color 50%, + -fx-mid-text-color 51% + ); + + /* 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; + + -fx-cell-focus-inner-border: #85b9de; + + /* 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; +} + +/******************************************************************************* + * * + * Common Styles * + * * + * These are styles that give a standard look to a whole range of controls * + * * + ******************************************************************************/ + +/* ==== 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 > .arrow-button { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-background-insets: 0, 1, 2; + -fx-background-radius: 5, 4, 3; + -fx-padding: 0.333333em 0.666667em 0.416667em 0.666667em; /* 4 8 5 8 */ + -fx-text-fill: -fx-text-base-color; +} +.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, +.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, +.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 { + -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; + -fx-background-insets: -2, -0.3, 1, 2; + -fx-background-radius: 7, 6, 4, 3; +} + +/* ==== DISABLED THINGS ================================================= */ + +.button:disabled, +.toggle-button:disabled, +.radio-button:disabled, +.check-box:disabled, +.hyperlink:disabled, +.menu-button:disabled, +.split-menu-button:disabled, +.slider:disabled, +.scroll-pane:disabled, +.progress-bar:disabled, +.progress-indicator:disabled, +.text-input:disabled, +.choice-box:disabled, +.combo-box-base:disabled, +.list-view:disabled, +.tree-view:disabled, +.table-view:disabled, +.tree-table-view:disabled, +.tab-pane:disabled, +.tab-pane > .tab-header-area > .headers-region > .tab:disabled { + -fx-opacity: -fx-disabled-opacity; +} + +/* ==== MNEMONIC THINGS ================================================= */ + +.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 !important; + -fx-background-insets: 0 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.416667em 0.666667em; /* 4 8 5 8 */ + -fx-text-fill: -fx-text-base-color; +} +.choice-box > .open-button, +.menu-button > .arrow-button { + -fx-padding: 0.5em 0.833333em 0.5em 0.0em; /* 6 10 6 0 */ +} + +/* ==== BOX LIKE THINGS ================================================= */ + +.scroll-pane, +.split-pane, +.list-view, +.tree-view, +.table-view, +.tree-table-view { + -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, +.tree-table-view:focused { + -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background; + -fx-background-insets: -2, -0.3, 1; +} +/* 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: 5 0 0 5, 4 0 0 4, 3 0 0 3; + -fx-background-insets: 0, 1 0 1 1, 2 1 2 2; +} +.button.center-pill, +.toggle-button.center-pill { + -fx-background-radius: 0; + -fx-background-insets: 0, 1 0 1 1, 2 1 2 2; +} +.button.right-pill, +.toggle-button.right-pill { + -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0; +} +.button.left-pill:focused, +.toggle-button.left-pill:focused { + -fx-background-radius: 7 0 0 7, 6 0 0 6, 4 0 0 4, 3 0 0 3; + -fx-background-insets: -2 0 -2 -2, -0.3 0 -0.3 -0.3, 1, 2; +} +.button.center-pill:focused, +.toggle-button.center-pill:focused { + -fx-background-radius: 0; + -fx-background-insets: -2 0 -1 0, -0.3 0 -0.3 0, 1, 2; +} +.button.right-pill:focused, +.toggle-button.right-pill:focused { + -fx-background-radius: 0 7 7 0, 0 6 6 0, 0 4 4 0, 0 3 3 0; + -fx-background-insets: -2 -2 -2 0, -0.3 -0.3 -0.3 0, 1, 2; +} + +/* ==== SELECTED TOGGLE ================================================= */ + +.toggle-button:selected { + -fx-background-color: + linear-gradient(to bottom, derive(-fx-outer-border, -20%), -fx-outer-border), + linear-gradient(to bottom, + derive(-fx-text-box-border, -10%) 0%, + derive(-fx-text-box-border, -2%) 20%, + derive(-fx-text-box-border, 5%) 50%); + -fx-background-insets: 0, 1; +} +.toggle-button:selected:focused { + -fx-background-color: + -fx-faint-focus-color, -fx-focus-color, + linear-gradient(to bottom, + derive(-fx-text-box-border, -10%) 0%, + derive(-fx-text-box-border, -2%) 20%, + derive(-fx-text-box-border, 5%) 50%); + -fx-background-insets: -2, -0.3, 1; + -fx-background-radius: 7, 6, 4; +} + +/******************************************************************************* + * * + * 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 { + -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.666667em; /* 16x16 = 8+8 */ +} +.check-box:focused > .box { + -fx-background-radius: 5, 3, 2, 1; +} +.check-box:selected > .box { + /* Carefully picked numbers to remain square as scalling */ +/**/ -fx-padding: -0.208333em 0 0.208333em 0.23em; /* -2.5 0 2.5 2.76 */ +/**/ -fx-padding: -0.208333em 0.083333em 0.208333em 0.23em; /* -1.5 0 2.5 2.76 */ + -fx-padding: 0.166667em 0.166667em 0.25em 0.25em; /* 2 2 3 3 */ +} +.check-box:selected > .box > .mark { + -fx-background-color: transparent; +/**/ -fx-padding: 0.666667em 0.583333em 0.666667em 0.5em; /* 7 7 6 5 */ + -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; /* 2 */ + -fx-cursor: hand; + -fx-content-display: LEFT; + -fx-text-fill: -fx-text-background-color; + -fx-border-color: transparent; + -fx-border-width: 1px; +} +.hyperlink:visited { + -fx-text-fill: -fx-accent; +} +.hyperlink:focused { + -fx-border-color: -fx-focus-color; + -fx-border-style: segments(0.166667em, 0.166667em); + -fx-border-width: 1px; +} +.hyperlink:hover { + -fx-underline: true; +} +.hyperlink:show-mnemonics > .mnemonic-underline { + -fx-stroke: -fx-text-fill; +} + +/******************************************************************************* + * * + * SplitMenuButton * + * * + ******************************************************************************/ + +.split-menu-button { + -fx-background-color: -fx-outer-border; + -fx-background-insets: 0; + -fx-background-radius: 5; + -fx-padding: 0; +} +.split-menu-button:focused { + -fx-background-color: -fx-faint-focus-color, -fx-focus-color; + -fx-background-insets: -2, -0.3; + -fx-background-radius: 7, 6; +} +.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: 4 0 0 4, 3 0 0 3; + -fx-padding: 0.333333em 0.667em 0.416667em 0.667em; /* 4 8 5 8 */ +} +.split-menu-button > .arrow-button { + -fx-background-color: -fx-inner-border, -fx-body-color; + -fx-background-insets: 1, 2; + -fx-background-radius: 4, 3; + -fx-background-radius: 0 4 4 0, 0 3 3 0; + -fx-padding: 0.5em 0.833333em 0.5em 0.833333em; /* 6 10 6 10 */ +} + +/******************************************************************************* + * * + * ToolBar * + * * + ******************************************************************************/ + +.tool-bar:vertical { + -fx-background: derive(-fx-base,-20%); + -fx-background-color: + linear-gradient(to right, derive(-fx-base,0%) 0%, derive(-fx-base,10%) 50%, derive(-fx-base,0%) 100%); + -fx-background-insets: 0; + -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */ + -fx-spacing: 0.333em; /* 4 */ + -fx-alignment: CENTER-LEFT; +} +.tool-bar:horizontal { + -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-padding: 0.416667em 0.5em 0.416667em 0.5em; /* 5 6 5 6 */ + -fx-spacing: 0.333em; /* 4 */ + -fx-alignment: CENTER_LEFT; +} +.tool-bar:horizontal > .container > .separator { + -fx-orientation: vertical; +} +.tool-bar:vertical > .container > .separator { + -fx-orientation: horizontal; +} + +/******************************************************************************* + * * + * 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-color: + -fx-focus-color, + derive(-fx-color,-36%), + derive(-fx-color,73%), + linear-gradient(to top, derive(-fx-color, -19%),derive(-fx-color, -5%)); + -fx-background-insets: -1.4, 0, 1, 2; + -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: 5, 4, 3; + -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: linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%)); +} +.scroll-bar:vertical { + -fx-background-color: linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%)); +} +.scroll-bar:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.scroll-bar > .thumb { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-background-insets: 1, 2, 3; + -fx-background-radius: 5, 4, 3; +} +.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-background-insets: 0, 1, 2; + -fx-color: transparent; + -fx-padding: 3px; +} +.scroll-bar > .increment-button > .increment-arrow, +.scroll-bar > .decrement-button > .decrement-arrow { + -fx-background-color: derive(-fx-base,-35%); +} +.scroll-bar > .increment-button:hover > .increment-arrow, +.scroll-bar > .decrement-button:hover > .decrement-arrow { + -fx-background-color: derive(-fx-base,-40%); +} +.scroll-bar > .increment-button:pressed > .increment-arrow, +.scroll-bar > .decrement-button:pressed > .decrement-arrow { + -fx-background-color: derive(-fx-base,-45%); +} +.scroll-bar:horizontal > .increment-button > .increment-arrow { + -fx-padding: 7 5 0 0; + -fx-shape: "M0.315,1.457l1.414-1.414L5.686,4L1.729,7.957L0.315,6.543L2.857,4L0.315,1.457z"; +} +.scroll-bar:vertical > .increment-button > .increment-arrow { + -fx-padding: 5 7 0 0 ; + -fx-shape: "M6.543,0.315l1.414,1.414L4,5.686L0.043,1.729l1.414-1.414L4,2.858L6.543,0.315z"; +} +.scroll-bar:horizontal > .decrement-button > .decrement-arrow { + -fx-padding: 7 5 0 0; + -fx-shape: "M5.686,6.543L4.271,7.957L0.314,4l3.957-3.957l1.414,1.414L3.143,4L5.686,6.543z"; +} +.scroll-bar:vertical > .decrement-button > .decrement-arrow { + -fx-padding: 5 7 0 0; + -fx-shape: "M1.457,5.563L0.042,4.149L4,0.193l3.957,3.957L6.543,5.563L4,3.021L1.457,5.563z"; +} + +/******************************************************************************* + * * + * ScrollPane * + * * + ******************************************************************************/ + +.scroll-pane > .scroll-bar:horizontal { + -fx-background-insets: 0 1 1 1; + -fx-padding: 0 1 1 1; +} +.scroll-pane > .scroll-bar:horizontal > .increment-button, +.scroll-pane > .scroll-bar:horizontal > .decrement-button { + -fx-padding: 3 3 2 3; +} +.scroll-pane > .scroll-bar:vertical > .increment-button, +.scroll-pane > .scroll-bar:vertical > .decrement-button { + -fx-padding: 3 2 3 3; +} +.scroll-pane > .scroll-bar:vertical { + -fx-background-insets: 1 1 1 0; + -fx-padding: 1 1 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 { + -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 { + -fx-padding: 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: -fx-box-border,-fx-accent; + -fx-background-insets: 2, 3; + -fx-background-radius: 0.25em, 0.166667em; 3 , 2 + -fx-padding: 0.416667em; 5 +}*/ +/*.progress-bar > .bar { + -fx-background-color: -fx-accent; + -fx-background-insets: 3 3 4 3; + -fx-background-radius: 0.167em; 2 + -fx-padding: 0.416667em; 5 +}*/ +.progress-bar > .bar { + /*-fx-background-color: -fx-accent;*/ + -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.25em; /* 3px */ + -fx-padding: 1em; /* 12 */ +} +.progress-bar:indeterminate > .bar { + -fx-background-color: linear-gradient(to left, transparent, -fx-accent); +} +/*.progress-bar > .track { + -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: 0.416667em, 0.416667em; 5 +}*/ +/*.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, -9%), + derive(-fx-control-inner-background, 0%), + derive(-fx-control-inner-background, -5%), + derive(-fx-control-inner-background, -12%) + ); + -fx-background-insets: 0, 0 0 1 0, 1 1 2 1; + -fx-background-radius: 0.417em, 0.333em, 0.25em; 5, 4, 3 +}*/ +.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: 0.417em, 0.333em, 0.25em; /* 5, 4, 3 */ +} + +/******************************************************************************* + * * + * 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: 1; +} +.progress-indicator > .determinate-indicator > .progress { + -fx-background-color: -fx-accent; + -fx-background-insets: 2; + -fx-padding: 1em; /* 9 */ +} +/* TODO: scaling the shape seems to make it disappear */ +.progress-indicator > .determinate-indicator > .tick { + -fx-background-color: white; + -fx-background-insets: 0; + -fx-padding: 0.416667em; /* 5 */ + -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"; + -fx-scale-shape: false; +} +.progress-indicator:indeterminate > .spinner { + -fx-padding: 0.833333em; /* 10 */ +} +.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:"M10,0C9.998,0,9.995,0,9.992,0C9.991,0,9.991,0,9.99,0C9.988,0,9.986,0,9.985,0S9.982,0,9.981,0S9.979,0,9.978,0S9.975,0,9.974,0S9.972,0,9.971,0C9.969,0,9.968,0,9.966,0H9.965c-0.007,0-0.014,0-0.02,0C9.944,0,9.944,0,9.944,0C9.941,0,9.939,0,9.937,0c-0.77,0.007-1.389,0.634-1.384,1.404C8.557,2.176,9.185,2.8,9.956,2.8c0.001,0,0.003,0,0.004,0H10c0.773-0.002,1.4-0.63,1.4-1.404c0-0.77-0.622-1.393-1.392-1.396C10.006,0,10.003,0,10,0L10,0z"; +} +.progress-indicator:indeterminate .segment1 { + -fx-shape:"M5.688,1.156c-0.236,0-0.476,0.06-0.696,0.187C4.98,1.349,4.969,1.356,4.958,1.363c0,0-0.001,0-0.001,0C4.955,1.364,4.954,1.365,4.952,1.366c-0.001,0-0.002,0.001-0.004,0.002c0,0,0,0-0.001,0C4.944,1.371,4.94,1.373,4.936,1.375c0,0,0,0-0.001,0C4.933,1.377,4.931,1.378,4.929,1.38C4.267,1.772,4.046,2.624,4.438,3.288c0.261,0.444,0.73,0.692,1.212,0.692c0.24,0,0.484-0.062,0.706-0.192l0.034-0.02C7.058,3.378,7.283,2.52,6.896,1.851C6.636,1.405,6.168,1.156,5.688,1.156L5.688,1.156z"; +} +.progress-indicator:indeterminate .segment2 { + -fx-shape:"M2.534,4.326c-0.482,0-0.951,0.25-1.209,0.697C1.323,5.027,1.321,5.029,1.32,5.031l0,0C1.319,5.033,1.318,5.034,1.317,5.036S1.315,5.039,1.314,5.04c0,0.001,0,0.002-0.001,0.002C1.312,5.044,1.311,5.046,1.31,5.048c0,0,0,0,0,0.001C1.309,5.051,1.308,5.053,1.307,5.055C1.302,5.063,1.297,5.071,1.292,5.079l0,0C1.291,5.082,1.29,5.084,1.288,5.087c-0.376,0.67-0.141,1.519,0.529,1.898c0.218,0.123,0.456,0.182,0.69,0.182c0.488,0,0.963-0.255,1.222-0.708l0.02-0.035c0.383-0.671,0.149-1.527-0.521-1.912C3.008,4.386,2.769,4.326,2.534,4.326L2.534,4.326z"; +} +.progress-indicator:indeterminate .segment3 { + -fx-shape:"M1.396,8.648c-0.002,0-0.005,0-0.008,0C0.619,8.652-0.001,9.278,0,10.047c0,0.002,0,0.006,0,0.008l0,0c0,0.019,0,0.037,0,0.056c0,0.001,0,0.002,0,0.003s0,0.003,0,0.004c0.01,0.765,0.632,1.378,1.396,1.378c0.005,0,0.01,0,0.015,0c0.773-0.009,1.395-0.642,1.389-1.415v-0.04C2.794,9.27,2.166,8.648,1.396,8.648L1.396,8.648z"; +} +.progress-indicator:indeterminate .segment4 { + -fx-shape:"M2.579,12.955c-0.242,0-0.487,0.062-0.71,0.194c-0.664,0.391-0.885,1.242-0.499,1.906c0.013,0.021,0.025,0.043,0.038,0.063c0.262,0.436,0.724,0.678,1.197,0.678c0.243,0,0.49-0.063,0.714-0.197c0.665-0.396,0.883-1.257,0.489-1.922l-0.02-0.034C3.526,13.201,3.059,12.955,2.579,12.955L2.579,12.955z"; +} +.progress-indicator:indeterminate .segment5 { + -fx-shape:"M5.772,16.09c-0.489,0-0.965,0.257-1.223,0.712c-0.38,0.671-0.146,1.52,0.523,1.901c0.002,0.001,0.004,0.002,0.007,0.004h0c0.004,0.002,0.008,0.004,0.012,0.007c0,0,0,0,0.001,0c0.001,0.001,0.002,0.002,0.004,0.002c0.001,0.001,0.003,0.002,0.004,0.003c0,0,0.001,0,0.001,0.001c0.012,0.006,0.023,0.013,0.035,0.019c0.214,0.119,0.446,0.176,0.675,0.176c0.489,0,0.963-0.258,1.22-0.716c0.377-0.675,0.137-1.529-0.537-1.908l-0.035-0.02C6.242,16.149,6.006,16.09,5.772,16.09L5.772,16.09z"; +} +.progress-indicator:indeterminate .segment6 { + -fx-shape:"M10.14,17.198c-0.006,0-0.013,0-0.02,0h-0.039c-0.773,0.011-1.394,0.646-1.385,1.419c0.008,0.767,0.631,1.382,1.396,1.382c0.003,0,0.006,0,0.009-0.001c0.024,0,0.051,0,0.075-0.001c0.769-0.016,1.38-0.648,1.367-1.418C11.53,17.813,10.904,17.198,10.14,17.198L10.14,17.198z"; +} +.progress-indicator:indeterminate .segment7 { + -fx-shape:"M14.433,15.97c-0.245,0-0.494,0.064-0.72,0.2l-0.034,0.021c-0.663,0.397-0.88,1.258-0.483,1.922c0.261,0.439,0.725,0.683,1.2,0.683c0.24,0,0.484-0.062,0.707-0.194c0.022-0.013,0.044-0.025,0.065-0.039c0.656-0.399,0.866-1.254,0.469-1.913C15.373,16.212,14.909,15.97,14.433,15.97L14.433,15.97z"; +} +.progress-indicator:indeterminate .segment8 { + -fx-shape:"M17.539,12.748c-0.493,0-0.973,0.261-1.229,0.723l-0.02,0.034c-0.376,0.676-0.133,1.53,0.542,1.907c0.216,0.121,0.45,0.178,0.681,0.178c0.487,0,0.96-0.256,1.217-0.71c0.003-0.006,0.007-0.012,0.01-0.019c0.007-0.013,0.015-0.025,0.021-0.038l0,0c0.002-0.003,0.003-0.005,0.004-0.008c0.369-0.675,0.124-1.521-0.55-1.893C18.001,12.805,17.769,12.748,17.539,12.748L17.539,12.748z"; +} +.progress-indicator:indeterminate .segment9 { + -fx-shape:"M18.603,8.408c-0.011,0-0.021,0-0.031,0c-0.773,0.018-1.388,0.657-1.373,1.431l0.001,0.04c0.015,0.765,0.641,1.377,1.403,1.377c0.008,0,0.016,0,0.023,0c0.77-0.013,1.383-0.646,1.373-1.414c0-0.003,0-0.006,0-0.009l0,0c-0.001-0.019-0.001-0.037-0.001-0.055c0-0.001,0-0.001-0.001-0.002c0-0.002,0-0.004,0-0.006C19.979,9.012,19.358,8.408,18.603,8.408L18.603,8.408z"; +} +.progress-indicator:indeterminate .segment10 { + -fx-shape:"M17.345,4.121c-0.248,0-0.5,0.066-0.728,0.205c-0.659,0.403-0.869,1.266-0.468,1.927l0.021,0.034c0.265,0.435,0.728,0.675,1.202,0.675c0.247,0,0.497-0.065,0.724-0.202c0.659-0.397,0.871-1.252,0.477-1.912c-0.007-0.011-0.013-0.021-0.02-0.032c-0.001-0.002-0.002-0.003-0.002-0.004c-0.001,0-0.001-0.001-0.001-0.002c-0.004-0.005-0.008-0.011-0.011-0.017c0-0.001,0-0.001-0.001-0.001c-0.001-0.002-0.002-0.004-0.004-0.007C18.271,4.358,17.813,4.121,17.345,4.121L17.345,4.121z"; +} +.progress-indicator:indeterminate .segment11 { + -fx-shape:"M14.104,1.039c-0.494,0-0.974,0.264-1.227,0.729c-0.37,0.679-0.12,1.531,0.559,1.903l0.034,0.019c0.214,0.117,0.445,0.173,0.673,0.173c0.495,0,0.976-0.262,1.231-0.726c0.371-0.674,0.129-1.519-0.542-1.894c-0.012-0.006-0.024-0.013-0.036-0.02c-0.007-0.004-0.014-0.008-0.021-0.012c-0.003-0.001-0.006-0.003-0.009-0.005C14.556,1.094,14.329,1.039,14.104,1.039L14.104,1.039z"; +} + +/******************************************************************************* + * * + * 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: 4, 3; + -fx-cursor: text; + -fx-padding: 0.416667em 0.583em 0.416667em 0.583em; /* 5 7 5 7 */ +} +.text-input:focused { + -fx-highlight-fill: -fx-accent; + -fx-highlight-text-fill: white; + -fx-background-color: -fx-faint-focus-color, -fx-focus-color, + linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background); + -fx-background-insets: -2, -0.3, 1; + -fx-background-radius: 6, 3.4, 2, 2; + -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 3 3; +} +.text-area > .scroll-pane > .scroll-bar:vertical { + -fx-background-radius: 0 3 3 0; +} +.text-area > .scroll-pane > .corner { + -fx-background-radius: 0 0 3 0; +} +.text-area .content { + -fx-padding: 0.333em 0.583em 0.333em 0.583em; /* 4 7 4 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: 3; +} + +/******************************************************************************* + * * + * PopupMenu * + * * + ******************************************************************************/ + +.context-menu { + -fx-background-color: + -fx-box-border, + -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( three-pass-box , rgba(0,0,0,0.5) , 8, 0.0 , 0 , 8 );*/ +} +.context-menu > .separator { + -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */ +} +.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-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.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:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.menu:show-mnemonics > .mnemonic-underline { + -fx-stroke: -fx-text-fill; +} +/* This hides the down arrow that would show on a menu placed in a menubar */ +.menu-bar > .container > .menu > .arrow-button > .arrow { + -fx-padding: 0; + -fx-background-color: transparent; + -fx-shape: null; +} +.menu-bar > .container > .menu > .arrow-button { + -fx-padding: 0; +} +.menu > .arrow { + -fx-background-color: -fx-mark-color; + -fx-shape: "M0,-4L4,0L0,4Z"; + -fx-scale-shape: false; +} +.menu:focused:showing > .arrow, .menu:hover:showing > .arrow, .menu:focused > .arrow, .menu:showing > .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-base: derive(#d0d0d0,-70%); + -fx-background-color: linear-gradient(to bottom, derive(-fx-color,50%), derive(-fx-color,-30%)), -fx-body-color; + -fx-background-insets: 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; +} +.menu-bar > .container > .menu-button:hover, .menu-bar > .container > .menu-button:focused, .menu-bar > .container > .menu-button:showing { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.menu-bar > .container > .menu-button:hover { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.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:disabled > .label { + -fx-opacity: -fx-disabled-opacity; +} +.menu-item:focused { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.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; +} +.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:selected > .right-container > .arrow { + -fx-background-color: white; +} +.menu-item:disabled { + -fx-opacity: -fx-disabled-opacity; +} + +/******************************************************************************* + * * + * 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: 5 5 0 0, 4 4 0 0, 3 3 0 0; + -fx-padding: 0.083333em 0.5em 0.083333em 0.5em; /* 1 6 1 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-style: segments(0.166667em, 0.166667em); + -fx-border-width: 1; + -fx-border-color: -fx-focus-color; +} +.tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover { + -fx-color: -fx-base; + -fx-opacity: -fx-disabled-opacity; +} +.tab-pane > .tab-header-area > .tab-header-background { + /* TODO should not be using text-box-border I tink? */ + -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; /* TODO convert to ems */ + /*-fx-padding: 0.416667em 0.416667em 0.833333em 0.416667em;*/ + -fx-background-radius: 10; +} +/* 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: 3, 2; + -fx-padding: 2; +} + +/******************************************************************************* + * * + * ComboBox * + * * + ******************************************************************************/ + +/* Customie 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.416667em 0.666667em; /* 4 8 5 8 */ +} +.combo-box-base > .arrow-button { + -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0; + -fx-padding: 0.5em 0.833333em 0.5em 0.833333em; /* 6 10 6 10 */ + -fx-background-insets: 1 1 1 0, 1, 2; +} +.combo-box-base:focused > .arrow-button { + -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color; +} + +/******************************************************************************* + * * + * 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 > .text-field { + -fx-background-radius: 3 4 4 3, 2 3 3 2; +} +.combo-box-base:editable:focused > .text-field { + -fx-background-color: -fx-focus-color, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 3 4 4 3, 2 3 3 2; +} +.combo-box-base:editable > .text-field:focused { + -fx-background-radius: 7, 3 4 4 3, 2 3 3 2; +} + +/* -------------- STYLES FOR THE DEFAULT LISTVIEW-BASED COMBOBOX ------------- */ + +.combo-box-popup > .list-view { + -fx-background-color: -fx-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 ); +} +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell { + -fx-padding: 4 0 4 5; + /* No alternate highlighting */ + -fx-background-color: -fx-control-inner-background; +} +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, +.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; + -fx-text-fill: -fx-selection-bar-text; +} +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover { + -fx-background-color: -fx-cell-hover-color; + -fx-text-fill: -fx-text-inner-color; +} + +/******************************************************************************* + * * + * TitledPane * + * * + ******************************************************************************/ + +.titled-pane { + -fx-text-fill: -fx-text-base-color; +} +.titled-pane:focused { + -fx-text-fill: white; +} +.titled-pane > .title { + -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color; + -fx-background-insets: 0, 1, 2; + -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0; + -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */ +} +.titled-pane:focused > .title { + -fx-color: -fx-focus-color; +} +.titled-pane > .title > .arrow-button { + -fx-background-color: null; + -fx-background-insets: 0; + -fx-background-radius: 0; + -fx-padding: 0.0em 0.25em 0.0em 0.0em; /* 0 3 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:collapsed > .title > .arrow-button > .arrow { + -fx-rotate: -90; +} +.titled-pane > *.content { + -fx-background-color: + -fx-box-border, + linear-gradient(to bottom, derive(-fx-color,-02%), derive(-fx-color,65%) 12%, derive(-fx-color,23%) 88%, derive(-fx-color,50%) 99%, -fx-box-border); + -fx-background-insets: 0, 0 1 1 1; + -fx-padding: 0.167em; +} +.titled-pane:focused > .title > .arrow-button > .arrow { + -fx-background-color: white; +} + +/******************************************************************************* + * * + * Accordion * + * * + ******************************************************************************/ + +.accordion > .titled-pane > .title { + -fx-background-color: + -fx-box-border, + -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; +} +.accordion > .titled-pane:focused > .title { + -fx-color: -fx-focus-color; +} +.accordion > .titled-pane:focused { + -fx-text-fill: white; +} +.accordion > .titled-pane:focused > .title > .arrow-button > .arrow { + -fx-background-color: white; +} +.accordion > .titled-pane:focused > .titled-pane:collapsed > .title > .arrow-button > .arrow { + -fx-background-color: white; +} +.accordion > .titled-pane:collapsed:focused > .title { + -fx-color: -fx-focus-color; +} +.accordion > .titled-pane:expanded:focused > .title { + -fx-color: -fx-focus-color; +} +.accordion > .titled-pane:hover > .title { + -fx-color: -fx-hover-base; +} + +/******************************************************************************* + * * + * 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.833333em 0.5em 0; /* 6 10 6 0 */ +} +.color-picker.split-button { + -fx-background-color: null; +} +.color-picker.split-button > .arrow-button { + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-padding: 0.5em 0.833333em 0.5em 0.833333em; /* 6 10 6 10 */ +} +.color-picker > .color-picker-label > .picker-color > .picker-color-rect { + -fx-stroke: -fx-box-border; +} + +.color-palette { + -fx-background-color: + derive(-fx-color,-40%), + derive(-fx-color,100%), + linear-gradient(to bottom, + derive(-fx-color,100%) 0%, + derive(-fx-color,50%) 12%, + derive(-fx-color,65%) 88%, + derive(-fx-color,23%) 100%); + -fx-background-insets: 0, 1, 2; + -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4; + -fx-padding: 15 15 15 15; + -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 ); +} +.color-palette > .color-picker-grid > .color-square > .color-rect { + -fx-stroke: black; + -fx-stroke-width: 0.4; + -fx-border-color: black; +} +.color-palette > .color-picker-grid { + -fx-border-color: black; +} +.color-palette > .color-picker-grid > .color-square { + -fx-background-color: transparent; + -fx-background-insets: -1, 0; + -fx-padding: 0.5; + -fx-border: black; +} +/* 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-focus-color; +} +/* the currently selected color */ +.color-palette > .color-picker-grid > .color-square:selected { +/* -fx-background-color: derive(-fx-base, -27%) #989898 , white, derive(-fx-base, -59%) #555555 ;*/ + -fx-background-color: black; +} +.color-palette > .separator > .line { + -fx-background-color: -fx-pressed-base; +/* -fx-background-color: white;*/ + -fx-padding: 6 0 0 0; + -fx-background-insets: 4 -10 0 -10,5 -10 0 -10; + -fx-border-style: none; + -fx-border-color: null; +} +.custom-color-dialog > .color-rect-pane { + -fx-padding: 15 8 15 15; +/* -fx-background-color: -fx-background;*/ +} +.custom-color-dialog > .controls-pane { + -fx-padding: 15 15 15 0; +/* -fx-background-color: -fx-background;*/ +} +.custom-color-dialog { + -fx-background-color: -fx-background; +} +/* -------- Toggle Button ---------------- */ +.custom-color-dialog .controls-pane .toggle-button { + -fx-background-radius: 4, 4, 3, 2; + -fx-padding: 3 6 3 6; +} +.custom-color-dialog .controls-pane .toggle-button:focused { + -fx-background-color: + rgba(23,134,248,0.2), + -fx-focus-color, + -fx-inner-border, + -fx-body-color; +} +.custom-color-dialog .controls-pane .toggle-button:selected Text { + -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.9) , 2, 0.0 , 0 , 1 ); +} +.custom-color-dialog .controls-pane .toggle-button:selected { + -fx-background-color: + linear-gradient( to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100% ), + linear-gradient( to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100% ), + linear-gradient( to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100% ); + -fx-background-insets: 0, 1, 1; + -fx-text-fill: -fx-light-text-color; +} +.custom-color-dialog .controls-pane #toggle-button-left { + -fx-background-radius: 3 0 0 3; + -fx-background-insets: 0 0 -1 0, 0, 1 0 1 1, 2 0 2 2; + -fx-border-color: transparent -fx-outer-border transparent transparent; + -fx-border-insets: 4 0 4 0; + -fx-padding: -2 8 -2 8; +} +.custom-color-dialog .controls-pane #toggle-button-left:focused { + -fx-background-radius: 3 0 0 3; + -fx-background-insets: -1.4 0 -1.4 -1.4, 0 0 0 0, 1, 2; + -fx-border-color: transparent; +} +.custom-color-dialog .controls-pane #toggle-button-left:selected, .controls-pane #toggle-button-left:selected:focused { + -fx-background-insets: 0 0 -1 0, 0, 1 0 1 1, 1 0 1 1; + -fx-border-color: transparent; +} +.custom-color-dialog .controls-pane #toggle-button-center { + -fx-background-radius: 0; + -fx-background-insets: 0; + -fx-background-insets: 0 0 -1 0, 0, 1 0 1 0, 2 0 2 0; + -fx-border-color: transparent -fx-outer-border transparent transparent; + -fx-border-insets: 4 0 4 0; + -fx-padding: -2 8 -2 8; +} +.custom-color-dialog .controls-pane #toggle-button-center:focused { + -fx-background-radius: 0; + -fx-background-insets: -1.4 0 -1.4 -1, 0 0 0 -1, 1 1 1 0, 2 2 2 1; + -fx-border-color: transparent; +} +.custom-color-dialog .controls-pane #toggle-button-center:selected, .controls-pane #toggle-button-center:selected:focused { + -fx-background-insets: -1.4 0 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0; + -fx-border-color: transparent; +} +.custom-color-dialog .controls-pane #toggle-button-right { + -fx-background-radius: 0 3 3 0; + -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 0; + -fx-padding: 3 8 3 8; +} +.custom-color-dialog .controls-pane #toggle-button-right:focused { + -fx-background-radius: 0 3 3 0; + -fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 2 2 2 1; +} +.custom-color-dialog .controls-pane #toggle-button-right:selected, .controls-pane #toggle-button-right:selected:focused { + -fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0; +} +.custom-color-dialog .controls-pane .current-new-color-grid #transparent-current, .controls-pane .current-new-color-grid #transparent-new { + -fx-background-image: url("pattern-transparent.png"); + -fx-background-repeat: repeat; + -fx-background-size: auto; + -fx-padding: 9 64 9 64; +} +.custom-color-dialog .controls-pane .customcolor-controls-background { + -fx-background-color: -fx-text-box-border, -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1, 2; + -fx-background-radius: 3, 2, 2; + -fx-padding: 3 5 3 5; +} +.custom-color-dialog .controls-pane .alpha-settings .text-field { + -fx-background-color: -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 3, 2; + -fx-padding: 3 5 3 5; + -fx-text-fill: -fx-text-inner-color; + -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); + -fx-cursor: text; +} +.custom-color-dialog .controls-pane .current-new-color-grid .label { + -fx-padding: 0 0 0 5; +} +.custom-color-dialog .input-field { + -fx-background-color: -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 2, 2; + -fx-padding: 3 5 3 5; + -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); + -fx-cursor: text; +} +.custom-color-dialog .input-field:focused { + -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: -0.4, 1, 2; + -fx-background-radius: 3.4, 2, 2; +} +.custom-color-dialog .input-field:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.custom-color-dialog .integer-field { + -fx-background-color: -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 2, 2; + -fx-padding: 3 5 3 5; + -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); + -fx-cursor: text; +} +.custom-color-dialog .integer-field:focused { + -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: -0.4, 1, 2; + -fx-background-radius: 3.4, 2, 2; +} +.custom-color-dialog .double-field { + -fx-background-color: -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 2, 2; + -fx-padding: 3 5 3 5; + -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); + -fx-cursor: text; +} +.custom-color-dialog .double-field:focused { + -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: -0.4, 1, 2; + -fx-background-radius: 3.4, 2, 2; +} +.custom-color-dialog .double-field:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.custom-color-dialog .webcolor-field { + -fx-background-color: -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: 0, 1; + -fx-background-radius: 2, 2; + -fx-padding: 3 5 3 5; + -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); + -fx-cursor: text; +} +.custom-color-dialog .webcolor-field:focused { + -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background; + -fx-background-insets: -0.4, 1, 2; + -fx-background-radius: 3.4, 2, 2; +} +.custom-color-dialog .webcolor-field:disabled { + -fx-opacity: -fx-disabled-opacity; +} + +/******************************************************************************* + * * + * Pagination * + * * + ******************************************************************************/ + +.pagination { + -fx-padding: 0; + -fx-arrows-visible: true; + -fx-tooltip-visible: true; + -fx-page-information-visible: true; + -fx-page-information-alignment: bottom; +} +.pagination > .page { + -fx-background-color: transparent; +} +.pagination > .pagination-control { + -fx-background-color: transparent; + -fx-padding: 0.833333em 0em 0.833333em 0em; +} +.pagination > .pagination-control > .control-box { + -fx-spacing: 4; + -fx-alignment: center; +} +.pagination > .pagination-control > .control-box > .left-arrow-button{ + -fx-background-radius: 0; + -fx-padding: 0.166667em 0.416em 0.25em 0.333em; +} +.pagination > .pagination-control > .control-box > .right-arrow-button { + -fx-background-radius: 0; + -fx-padding: 0.166667em 0.333em 0.25em 0.416em; +} +.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 > .left-arrow-button, +.pagination.bullet > .pagination-control > .control-box > .right-arrow-button { + -fx-background-radius: 4em; +} +.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-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; +} + +/******************************************************************************* + * * + * ListView and ListCell * + * * + ******************************************************************************/ + +.list-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{ + -fx-background-insets: 0, 1 0 0 0; + -fx-padding: 0 -1 -1 -1; +} +.list-view > .virtual-flow > .corner { + -fx-background-color: -fx-box-border, -fx-base; + -fx-background-insets: 0, 1 0 0 1; +} +.list-cell { + -fx-background-color: -fx-control-inner-background; + -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */ + -fx-text-fill: -fx-text-inner-color; + -fx-opacity: 1; +} +.list-cell:odd { + -fx-background-color: -fx-control-inner-background-alt; +} +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; + -fx-background-insets: 0, 1, 2; +} +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused:odd { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background-alt; + -fx-background-insets: 0, 1, 2; +} +/* When the list-cell is selected and focused */ +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-background: -fx-accent; + -fx-text-fill: -fx-selection-bar-text; +} +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected:hover { + -fx-background: -fx-accent; + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-text-fill: -fx-selection-bar-text; +} +/* When the ListView is _not_ focused, we show alternate selection colors */ +.list-cell:filled:selected:focused, +.list-cell:filled:selected, +.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected { + -fx-background-color: lightgray; + -fx-text-fill: -fx-selection-bar-text; +} +.list-cell:filled:selected:focused:disabled, +.list-cell:filled:selected:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.list-cell:filled:hover { + -fx-background-color: -fx-cell-hover-color; + -fx-text-fill: -fx-text-inner-color; +} +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:hover { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; + -fx-background-insets: 0, 1, 2; + -fx-text-fill: -fx-text-inner-color; +} +.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, +.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { + -fx-background-color: -fx-selection-bar; +} + +/******************************************************************************* + * * + * TreeView and TreeCell * + * * + ******************************************************************************/ + +.tree-view > .virtual-flow > .scroll-bar:vertical{ + -fx-background-insets: 0, 0 0 0 1; + -fx-padding: -1 -1 -1 0; +} +.tree-view > .virtual-flow > .scroll-bar:horizontal{ + -fx-background-insets: 0, 1 0 0 0; + -fx-padding: 0 -1 -1 -1; +} +.tree-view > .virtual-flow > .corner { + -fx-background-color: -fx-box-border, -fx-base; + -fx-background-insets: 0, 1 0 0 1; +} +.tree-cell { + -fx-background-color: -fx-control-inner-background; + -fx-padding: 0.25em; /* 3 */ + -fx-text-fill: -fx-text-inner-color; + -fx-indent: 80; +} +.tree-cell .label { + -fx-padding: 0.0em 0.0em 0.0em 0.25em; /* 0 0 0 3 */ +} +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:focused { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; + -fx-background-insets: 0, 1, 2; +} +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-background: -fx-accent; + -fx-text-fill: -fx-selection-bar-text; +} +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected, +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected:hover { + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected:hover { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-text-fill: -fx-selection-bar-text; +} +/* When the TreeView is _not_ focused, we show alternate selection colors */ +.tree-cell:filled:selected:focused, +.tree-cell:filled:selected { + -fx-background-color: lightgray; + -fx-text-fill: -fx-selection-bar-text; +} +.tree-cell:filled:selected:focused:disabled, +.tree-cell:filled:selected:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.tree-cell > .tree-disclosure-node, +.tree-table-row-cell > .tree-disclosure-node { + /** put a bit of padding around the disclosure node to make the clicking region larger */ + -fx-padding: 4 2 4 8; + -fx-background-color: transparent; +} +.tree-cell > .tree-disclosure-node:disabled, +.tree-table-row-cell > .tree-disclosure-node:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.tree-cell > .tree-disclosure-node > .arrow, +.tree-table-row-cell > .tree-disclosure-node > .arrow { + -fx-background-color: -fx-mark-color; + -fx-padding: 0.333333em; /* 4 */ + -fx-shape: "M 0 -4 L 8 0 L 0 4 z"; +} +.tree-cell:expanded > .tree-disclosure-node > .arrow, +.tree-table-row-cell:expanded > .tree-disclosure-node > .arrow { + -fx-rotate: 90; +} +.tree-cell:filled:selected > .tree-disclosure-node > .arrow, +.tree-table-row-cell:filled:selected > .tree-disclosure-node > .arrow { + -fx-background-color: -fx-selection-bar-text; +} +.tree-cell:filled:hover, +.tree-table-row-cell:filled:hover { + -fx-background-color: -fx-cell-hover-color; + -fx-text-fill: -fx-text-inner-color; +} +.tree-cell:filled:hover > .tree-disclosure-node > .arrow, +.tree-table-row-cell:filled:hover > .tree-disclosure-node > .arrow { + -fx-background-color: -fx-mark-color; +} +.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:hover, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; + -fx-background-insets: 0, 1, 2; + -fx-text-fill: -fx-text-inner-color; +} +.tree-cell:filled:selected:hover > .tree-disclosure-node > .arrow, +.tree-table-row-cell:filled:selected:hover > .tree-disclosure-node > .arrow { + -fx-background-color: -fx-selection-bar-text; +} + +/******************************************************************************* + * * + * TableView * + * * + ******************************************************************************/ + +.table-view, +.tree-table-view { + /* Constants used throughout the tableview. */ + -fx-table-header-border-color: -fx-box-border; + -fx-table-cell-border-color: -fx-box-border; +} +/** Draws focus border around tableview */ +.table-view:focused, +.tree-table-view:focused { + -fx-background-color: -fx-faint-focus-color, -fx-focus-color,-fx-control-inner-background; + -fx-background-insets: -2, -0.3, 1; + -fx-background-radius: 2, 0, 0; +} +.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; +} +.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; +} +.table-view > .virtual-flow > .corner, +.tree-table-view > .virtual-flow > .corner { + -fx-background-color: -fx-box-border, -fx-base; + -fx-background-insets: 0, 1 0 0 1; +} +/* 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-color: -fx-table-cell-border-color, -fx-control-inner-background; + -fx-background-insets: 0, 0 0 1 0; + -fx-padding: 0.0em; /* 0 */ + -fx-text-fill: -fx-text-inner-color; +} +.table-row-cell:odd { + -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background-alt; + -fx-background-insets: 0, 0 0 1 0; +} +.table-row-cell:focused, +.tree-table-row-cell:focused { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; + -fx-background-insets: 0, 1, 2; +} +.table-row-cell:focused:odd { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background-alt; + -fx-background-insets: 0, 1, 2; +} +/* When the table-row-cell is selected and focused */ +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:selected, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-background: -fx-accent; + -fx-text-fill: -fx-selection-bar-text; +} +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected > .table-cell, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell { + -fx-text-fill: -fx-selection-bar-text; +} +.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 { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; +} +.table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:selected:hover, +.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover{ + -fx-background: -fx-accent; + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0, 1, 2; + -fx-text-fill: -fx-selection-bar-text; +} +/* When the TableView is _not_ focused, we show alternate selection colors */ +.table-row-cell:filled:selected:focused, +.table-row-cell:filled:selected, +.tree-table-row-cell:filled:selected:focused, +.tree-table-row-cell:filled:selected { + -fx-background-color: lightgray; + -fx-text-fill: -fx-selection-bar-text; +} +.table-row-cell:selected:disabled, +.tree-table-row-cell:selected:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:hover { + -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color; + -fx-background-insets: 0, 0 0 1 0; + -fx-text-fill: -fx-text-inner-color; +} +.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover { + /* No 1-pixel bottom border for the TreeTableView (unlike the TableView above) */ + -fx-background-color: -fx-cell-hover-color; + -fx-background-insets: 0; + -fx-text-fill: -fx-text-inner-color; +} +.table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:hover, +.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { + -fx-background-color: -fx-table-cell-border-color, -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; + -fx-background-insets: 0, 0 0 1 0, 1 1 2 1, 2 2 3 2, 3 3 4 3; + -fx-text-fill: -fx-text-inner-color; +} +.table-cell { + -fx-padding: 0.166667em; /* 2px, plus border adds 1px */ + -fx-background-color: transparent; + -fx-border-color: transparent -fx-table-cell-border-color transparent transparent; + -fx-border-width: 0.083333em; /* 1 */ + -fx-cell-size: 2.0em; /* 24 */ + -fx-text-fill: -fx-text-inner-color; +} +/* 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; +} +.table-view:constrained-resize > .column-header:last-visible, +.tree-table-view:constrained-resize > .column-header:last-visible { + -fx-border-width: 0.083333em 0.0em 0.083333em 0.083333em, 0.083333em 0.0em 0.083333em 0.083333em; +} +.table-view:constrained-resize .filler, +.tree-table-view:constrained-resize .filler { + -fx-border-color: + derive(-fx-base, 80%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%) + derive(-fx-base, 10%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), + /* Outer border: */ + transparent -fx-table-header-border-color -fx-table-header-border-color -fx-table-header-border-color; + -fx-border-insets: 0 1 1 1, 0 0 0 0; +} +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; + -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; +} +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled .table-cell:focused:selected, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled .tree-table-cell:focused:selected { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; + -fx-background: -fx-accent; + -fx-text-fill: -fx-selection-bar-text; +} +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:selected, +.table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:hover:selected, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:selected, +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover:selected { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-text-fill: -fx-selection-bar-text; + -fx-background-insets: 0 0 1 0; +} +.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:focused:selected:hover, +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:selected:hover{ + -fx-background: -fx-accent; + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; + -fx-text-fill: -fx-selection-bar-text; +} +/* When the TableView is _not_ focused, we show alternate selection colors */ +.table-row-cell:filled > .table-cell:selected:focused, +.table-row-cell:filled > .table-cell:selected, +.tree-table-row-cell:filled > .tree-table-cell:selected:focused, +.tree-table-row-cell:filled > .tree-table-cell:selected { + -fx-background-color: lightgray; + -fx-text-fill: -fx-selection-bar-text; +} +.table-cell:selected:disabled, +.tree-table-cell:selected:disabled { + -fx-opacity: -fx-disabled-opacity; +} +.table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:hover, +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover { + -fx-background-color: -fx-cell-hover-color; + -fx-text-fill: -fx-text-inner-color; + -fx-background-insets: 0 0 1 0; +} +.table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:focused:hover, +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover { + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; + -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; + -fx-text-fill: -fx-text-inner-color; +} +/* 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-selection-bar; + -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-body-color; + -fx-padding: 0; +} +/*.tree-table-view > .column-header-background { + -fx-background-color: -fx-body-color; + -fx-padding: 0; +}*/ +/* 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 { + -fx-text-fill: -fx-selection-bar-text; + /* TODO: for some reason, this doesn't scale. */ + -fx-font-size: 1.083333em; /* 13pt - 1 more than the default font */ + -fx-size: 25; + -fx-border-style: solid; + -fx-border-color: + /* + Inner border: we have different colours along the top, right, bottom and left. + Refer to RT-12298 for the spec. + */ + derive(-fx-base, 80%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%) + derive(-fx-base, 10%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), + /* Outer border: */ + transparent -fx-table-header-border-color -fx-table-header-border-color transparent; + -fx-border-insets: 0 1 1 0, 0 0 0 0; + -fx-border-width: 0.083333em, 0.083333em; +} +.table-view .filler, +.tree-table-view .filler { + -fx-size: 25; + -fx-border-style: solid; + -fx-border-color: + /* + Inner border: we have different colours along the top, right, bottom and left. + Refer to RT-12298 for the spec. + */ + derive(-fx-base, 80%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%) + derive(-fx-base, 10%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), + /* Outer border: */ + transparent transparent -fx-table-header-border-color transparent; + -fx-border-insets: 0 0 1 0, 0 0 0 0; + -fx-border-width: 0.083333em, 0.083333em 0 0.083333em 0.083333em; +} +.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-background > .show-hide-columns-button, +.tree-table-view > .column-header-background > .show-hide-columns-button{ + -fx-background-color: -fx-body-color; + + -fx-border-color: + /* inner border: A copy of the inner border used above in the general column header area. */ + derive(-fx-base, 80%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), + derive(-fx-base, 10%) + linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%), + /* outer border: Slightly different to the above*/ + transparent transparent -fx-table-header-border-color -fx-table-header-border-color; + -fx-border-insets: 0 0 0 1, 0 0 0 0; +} +.table-view .show-hide-column-image, +.tree-table-view .show-hide-column-image { + -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; + -fx-background-insets: 1 0 -1 0, 0; + + -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"; +} +/*.nested-column-header .column-header { + -fx-background-color: transparent; +}*/ +/* 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; +} +.table-view /*> column-header-background > nested-column-header >*/ .arrow, +.tree-table-view /*> column-header-background > nested-column-header >*/ .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"; +} +/* 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; +} +.check-box-table-cell > .check-box { + -fx-opacity: 1; +} +.check-box-table-cell > .check-box > .box { + -fx-background-color: null; + -fx-background-insets: 0; + -fx-border-color: -fx-outer-border; + -fx-border-radius: 3; +} +.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-border-color: derive(-fx-accent,20%); +} +/******************************************************************************* + * * + * TreeTableView * + * * + * Note: A lot of the CSS for TreeTableView is included with the TreeView and * + * TableView CSS styles elsewhere in caspian.css (as they are the same, just * + * targeting different CSS style classes). * + ******************************************************************************/ + +.tree-table-row-cell { + -fx-background-color: -fx-control-inner-background; + -fx-padding: 0.0em; /* 0 */ + -fx-text-fill: -fx-text-inner-color; +} +.tree-table-cell { + -fx-padding: 0.166667em; /* 2px, plus border adds 1px */ + -fx-background-color: transparent; + -fx-border-color: transparent -fx-table-cell-border-color transparent transparent; + -fx-border-width: 0.083333em; /* 1 */ + -fx-cell-size: 2.0em; /* 24 */ + -fx-text-fill: -fx-text-inner-color; +} + +/******************************************************************************* + * * + * TreeTableView cell spanning * + * * + ******************************************************************************/ + +.cell-span-tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell { + -fx-background-color: transparent; +} +/* All table-row-cells - we don't care if they are even or odd */ +.cell-span-tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell { + -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background; + -fx-background-insets: 0, 0 1 0 0; + -fx-alignment: center; +} +/** Selection styles */ +/*.cell-span-table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused:selected, */ +.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell, +.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected > .tree-table-cell, +.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover > .tree-table-cell, +.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:filled:selected, +.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:filled:focused:selected, +.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:filled:focused:selected:hover{ + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar; + -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; + -fx-background: -fx-accent; + -fx-text-fill: -fx-selection-bar-text; +} +/** Hover styles */ +/** --- Row selection mode hover */ +.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover > .tree-table-cell { + -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color; + -fx-background-insets: 0, 0 0 1 0; + -fx-text-fill: -fx-text-inner-color; +} +.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover > .tree-table-cell { + -fx-background-color: -fx-table-cell-border-color, -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; + -fx-background-insets: 0, 0 0 1 0, 1 1 2 1, 2 2 3 2, 3 3 4 3; + -fx-text-fill: -fx-text-inner-color; +} +/** --- Cell selection mode hover */ +.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover{ + -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color; + -fx-text-fill: -fx-text-inner-color; + -fx-background-insets: 0, 0 0 1 0; +} +.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover{ + -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color; + -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2; + -fx-text-fill: -fx-text-inner-color; +} +/** End of hover styles */ + +/******************************************************************************* + * * + * 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.833333em; /* 10px */ + -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5) , 10, 0.0 , 0 , 0 ); + -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: linear-gradient(to bottom, derive(-fx-background, -10%), derive(-fx-background, -5%)), + linear-gradient(from 0px 0px to 0px 5px, derive(-fx-background, -5%), derive(-fx-background, 20%)); + -fx-background-insets: 0,1; + -fx-background-radius: 6,5; + -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-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%); +} +.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: #f9d900, white; + -fx-background-insets: 0, 2; + -fx-background-radius: 5px; + -fx-padding: 5px; +} +.chart-series-line { + -fx-stroke: #f9d900; + -fx-stroke-width: 3px; + /*-fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.3) , 8, 0.0 , 0 , 3 );*/ +} +.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: #f9d900, 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: #f9d900; + -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: #f9d90044; +} +.default-color0.chart-series-area-fill { -fx-fill: CHART_COLOR_1; -fx-opacity: 0.2; } +.default-color1.chart-series-area-fill { -fx-fill: CHART_COLOR_2; -fx-opacity: 0.2; } +.default-color2.chart-series-area-fill { -fx-fill: CHART_COLOR_3; -fx-opacity: 0.2; } +.default-color3.chart-series-area-fill { -fx-fill: CHART_COLOR_4; -fx-opacity: 0.2; } +.default-color4.chart-series-area-fill { -fx-fill: CHART_COLOR_5; -fx-opacity: 0.2; } +.default-color5.chart-series-area-fill { -fx-fill: CHART_COLOR_6; -fx-opacity: 0.2; } +.default-color6.chart-series-area-fill { -fx-fill: CHART_COLOR_7; -fx-opacity: 0.2; } +.default-color7.chart-series-area-fill { -fx-fill: CHART_COLOR_8; -fx-opacity: 0.2; } +.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: #f9d900; + -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; -fx-opacity: 0.7; } +.default-color1.chart-bubble { -fx-bubble-fill: CHART_COLOR_2; -fx-opacity: 0.7; } +.default-color2.chart-bubble { -fx-bubble-fill: CHART_COLOR_3; -fx-opacity: 0.7; } +.default-color3.chart-bubble { -fx-bubble-fill: CHART_COLOR_4; -fx-opacity: 0.7; } +.default-color4.chart-bubble { -fx-bubble-fill: CHART_COLOR_5; -fx-opacity: 0.7; } +.default-color5.chart-bubble { -fx-bubble-fill: CHART_COLOR_6; -fx-opacity: 0.7; } +.default-color6.chart-bubble { -fx-bubble-fill: CHART_COLOR_7; -fx-opacity: 0.7; } +.default-color7.chart-bubble { -fx-bubble-fill: CHART_COLOR_8; -fx-opacity: 0.7; } + +/******************************************************************************* + * * + * BarChart * + * * + ******************************************************************************/ + +/* TODO flip gradient vertical for negative bars */ +/*.chart-bar { + -fx-bar-fill: #22bad9; + -fx-background-color: derive(-fx-bar-fill,-30%), + linear-gradient(to bottom, derive(-fx-bar-fill,40%), derive(-fx-bar-fill,10%)), + linear-gradient(to bottom, derive(-fx-bar-fill,10%) ,derive(-fx-bar-fill,-6%)); + -fx-background-insets: 0,1 1 0 1,2 2 1 2; +} +.chart-bar.negative { + -fx-background-color: derive(-fx-bar-fill,-30%), + linear-gradient(to top, derive(-fx-bar-fill,40%), derive(-fx-bar-fill,10%)), + linear-gradient(to top, derive(-fx-bar-fill,10%) ,derive(-fx-bar-fill,-6%)); + -fx-background-insets: 1 0 0 0,1,2; +}*/ +.chart-bar { + -fx-bar-fill: #22bad9; + -fx-background-color: linear-gradient(to right, + derive(-fx-bar-fill, -7%), + derive(-fx-bar-fill, 0%), + derive(-fx-bar-fill, -3%), + derive(-fx-bar-fill, -9%) + ); + -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, -7%), + derive(-fx-bar-fill, 0%), + derive(-fx-bar-fill, -3%), + derive(-fx-bar-fill, -9%) + ); +} +.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: #2f357f; + -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. * + * * + ******************************************************************************/ + +.split-pane > * > .table-view { -fx-padding: 0px; } +.split-pane > * > .list-view { -fx-padding: 0px; } +.split-pane > * > .tree-view { -fx-padding: 0px; } +.split-pane > * > .scroll-pane { -fx-padding: 0px; } +.split-pane > * > .split-pane { + -fx-background-insets: 0, 0; + -fx-padding: 0; + } + + /* ############################################################################ + # Workaround for RT-27627 # + ############################################################################ */ + +.choice-box > .open-button > .arrow { doh: true; } +.split-menu-button:openvertically > .arrow-button > .arrow { doh: true; } +.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow { doh: true; } +.tree-table-view { doh: true; } +.tree-table-view:focused { doh: true; } +.tree-table-view > .virtual-flow > .scroll-bar:vertical { doh: true; } +.tree-table-view > .virtual-flow > .scroll-bar:horizontal { doh: true; } +.tree-table-view > .virtual-flow > .corner { doh: true; } +.tree-table-row-cell:focused { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected { doh: true; } +.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover{ doh: true; } +.tree-table-row-cell:filled:selected:focused { doh: true; } +.tree-table-row-cell:filled:selected { doh: true; } +.tree-table-row-cell:selected:disabled { doh: true; } +.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover { doh: true; } +.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { doh: true; } +.tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible { doh: true; } +.tree-table-view:constrained-resize > .column-header:last-visible { doh: true; } +.tree-table-view:constrained-resize .filler { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled .tree-table-cell:focused:selected { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; } +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover:selected { doh: true; } +.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:selected:hover{ doh: true; } +.tree-table-row-cell:filled > .tree-table-cell:selected:focused { doh: true; } +.tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; } +.tree-table-cell:selected:disabled { doh: true; } +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover { doh: true; } +.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover { doh: true; } +.tree-table-view .column-resize-line { doh: true; } +.tree-table-view > .column-header-background { doh: true; } +.tree-table-view .column-header { doh: true; } +.tree-table-view .filler { doh: true; } +.tree-table-view .column-header .sort-order{ doh: true; } +.tree-table-view > .column-header-background > .show-hide-columns-button{ doh: true; } +.tree-table-view .show-hide-column-image { doh: true; } +.tree-table-view .column-drag-header { doh: true; } +.tree-table-view .column-overlay { doh: true; } +.tree-table-view /*> column-header-background > nested-column-header >*/ .arrow { doh: true; } +.tree-table-view .empty-table { doh: true; } +.axis-minor-tick-mark { doh: true; } +.chart-horizontal-zero-line { doh: true; } +.stacked-bar-chart:horizontal .chart-bar { doh: true; } \ No newline at end of file diff --git a/main/ui/src/main/resources/initialize.fxml b/main/ui/src/main/resources/fxml/initialize.fxml similarity index 100% rename from main/ui/src/main/resources/initialize.fxml rename to main/ui/src/main/resources/fxml/initialize.fxml diff --git a/main/ui/src/main/resources/main.fxml b/main/ui/src/main/resources/fxml/main.fxml similarity index 94% rename from main/ui/src/main/resources/main.fxml rename to main/ui/src/main/resources/fxml/main.fxml index 9eb6ded1e..6921629f5 100644 --- a/main/ui/src/main/resources/main.fxml +++ b/main/ui/src/main/resources/fxml/main.fxml @@ -34,7 +34,7 @@ - +