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