diff --git a/main/ui/src/main/resources/css/linux_theme.css b/main/ui/src/main/resources/css/linux_theme.css index f491b11a2..c52a4bb21 100644 --- a/main/ui/src/main/resources/css/linux_theme.css +++ b/main/ui/src/main/resources/css/linux_theme.css @@ -1,20 +1,63 @@ -.root { +/* + * Copyright (c) 2015 Sebastian Stenzel + * This file is licensed under the terms of the MIT license. + * See the LICENSE.txt file for more info. + * + * Contributors: + * Sebastian Stenzel - initial API and implementation + * + */ + + .root { -fx-font-family: 'Cantarell'; -fx-font-smoothing-type: lcd; - -fx-font-size: 12.0px; + -fx-font-size: 12px; - -fx-background-color: #F0F0F0; - -fx-text-fill: #444; + COLOR_TEXT: #444; + COLOR_TEXT_DISABLED: #BBB; + COLOR_HYPERLINK: #0069D9; + COLOR_BORDER: #D3D3D3; + COLOR_BORDER_DARK: #AAA; + COLOR_BACKGROUND: #F0F0F0; + + COLOR_VGRAD_LIGHT: linear-gradient(to bottom, #FEFEFE 0%, #F5F5F5 100%); + COLOR_VGRAD_MEDIUM: linear-gradient(to bottom, #F5F5F5 0%, #F1F1F1 100%); + COLOR_VGRAD_DARK: linear-gradient(to bottom, #F1F1F1 0%, #E9E9E9 100%); + COLOR_HGRAD_LIGHT: linear-gradient(to right, #FEFEFE 0%, #F5F5F5 100%); + COLOR_HGRAD_MEDIUM: linear-gradient(to right, #F5F5F5 0%, #FEFEFE 100%); + COLOR_HGRAD_DARK: linear-gradient(to right, #F1F1F1 0%, #E9E9E9 100%); + + COLOR_CHART_GREEN: #28CA40; + COLOR_CHART_RED: #FD4943; + + + -fx-background-color: COLOR_BACKGROUND; + -fx-text-fill: COLOR_TEXT; } /**************************************************************************** * * - * Label * + * Labels * * * ****************************************************************************/ .label { - -fx-text-fill: #444; + -fx-text-fill: COLOR_TEXT; +} + +/**************************************************************************** + * * + * Hyperlinks * + * * + ****************************************************************************/ + +.hyperlink { + -fx-cursor: hand; + -fx-text-fill: COLOR_HYPERLINK; +} + +.hyperlink:hover { + -fx-underline: true; } /**************************************************************************** @@ -24,27 +67,44 @@ ****************************************************************************/ .button { - -fx-background-color: #D3D3D3, linear-gradient(to bottom, #FEFEFE 0%, #F5F5F5 100%); + -fx-background-color: COLOR_BORDER, COLOR_VGRAD_LIGHT; -fx-background-insets: 0, 1; -fx-padding: 0.4em 0.8em 0.4em 0.8em; - -fx-text-fill: #444; + -fx-text-fill: COLOR_TEXT; -fx-alignment: CENTER; } .button:hover, .button:default:hover { - -fx-background-color: #D3D3D3, linear-gradient(to bottom, #F5F5F5 0%, #F1F1F1 100%); + -fx-background-color: COLOR_BORDER, COLOR_VGRAD_MEDIUM; } .button:armed, .button:default:armed { - -fx-background-color: #AAA, linear-gradient(to bottom, #F1F1F1 0%, #E9E9E9 100%); + -fx-background-color: COLOR_BORDER_DARK, COLOR_VGRAD_DARK; } .button:disabled, .button:default:disabled { - -fx-background-color: #D3D3D3, linear-gradient(to bottom, #FEFEFE 0%, #F5F5F5 100%); - -fx-text-fill: #BBB; + -fx-background-color: COLOR_BORDER, COLOR_VGRAD_LIGHT; + -fx-text-fill: COLOR_TEXT_DISABLED; +} + +/**************************************************************************** + * * + * Text Fields * + * * + ****************************************************************************/ + +.text-input { + -fx-background-color: COLOR_BORDER, #FFF; + -fx-background-insets: 0, 1; + -fx-text-fill: COLOR_TEXT; + -fx-padding: 0.4em; + -fx-cursor: text; +} +.text-input:focused { + -fx-background-color: COLOR_BORDER_DARK, #FFF; } /**************************************************************************** @@ -54,18 +114,18 @@ ****************************************************************************/ .list-view { - -fx-background-color: #D3D3D3, #FFF; + -fx-background-color: COLOR_BORDER, #FFF; -fx-background-insets: 0, 1; -fx-padding: 1; } .list-cell { -fx-padding: 0.8em 0.5em 0.8em 0.5em; - -fx-text-fill: #444; + -fx-text-fill: COLOR_TEXT; } .list-cell:selected { - -fx-background-color: linear-gradient(to bottom, #F1F1F1 0%, #E9E9E9 100%); + -fx-background-color: COLOR_VGRAD_DARK; } /******************************************************************************* @@ -74,18 +134,18 @@ * * ******************************************************************************/ .scroll-bar:vertical { - -fx-background-color: linear-gradient(to right, #F5F5F5 0%, #FEFEFE 100%); - -fx-border-color: transparent transparent transparent #D3D3D3; + -fx-background-color: COLOR_HGRAD_MEDIUM; + -fx-border-color: transparent transparent transparent COLOR_BORDER; -fx-padding: 2px; } .scroll-bar > .thumb { - -fx-background-color: #D3D3D3, linear-gradient(to right, #FEFEFE 0%, #F5F5F5 100%); + -fx-background-color: COLOR_BORDER, COLOR_HGRAD_LIGHT; -fx-background-insets: 0, 1; -fx-background-radius: 5; } .scroll-bar > .thumb:hover, .scroll-bar > .thumb:pressed { - -fx-background-color: #D3D3D3, linear-gradient(to right, #F1F1F1 0%, #E9E9E9 100%); + -fx-background-color: COLOR_BORDER, COLOR_HGRAD_DARK; } .scroll-bar:vertical > .increment-button, .scroll-bar:vertical > .decrement-button { @@ -99,7 +159,7 @@ ****************************************************************************/ .tool-bar.list-related-toolbar { - -fx-background-color: #D3D3D3, linear-gradient(to bottom, #FEFEFE 0%, #F5F5F5 100%); + -fx-background-color: COLOR_BORDER, COLOR_VGRAD_LIGHT; -fx-background-insets: 0, 0 1 1 1; -fx-padding: 0; -fx-spacing: 0; @@ -110,17 +170,17 @@ -fx-padding: 0.4em 0.8em 0.4em 0.8em; -fx-background-color: transparent; -fx-background-insets: 1; - -fx-border-color: transparent #D3D3D3 transparent transparent; + -fx-border-color: transparent COLOR_BORDER transparent transparent; -fx-border-width: 1; } .tool-bar.list-related-toolbar .toggle-button:hover { - -fx-background-color: linear-gradient(to bottom, #F5F5F5 0%, #F1F1F1 100%); + -fx-background-color: COLOR_VGRAD_MEDIUM; } .tool-bar.list-related-toolbar .toggle-button:armed, .tool-bar.list-related-toolbar .toggle-button:selected { - -fx-background-color: linear-gradient(to bottom, #F1F1F1 0%, #E9E9E9 100%); + -fx-background-color: COLOR_VGRAD_DARK; } /******************************************************************************* @@ -130,10 +190,10 @@ ******************************************************************************/ .context-menu { - -fx-background-color: #D3D3D3, #F7F7F7; + -fx-background-color: COLOR_BORDER, COLOR_BACKGROUND; -fx-background-insets: 0, 1; -fx-padding: 1; - -fx-effect: dropshadow(three-pass-box, rgba(0.0,0.0,0.0,0.2), 3, 0, 0, 2); + -fx-effect: dropshadow(three-pass-box, rgba(0.0, 0.0, 0.0, 0.2), 3, 0, 0, 2); } .context-menu > .separator { -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */ @@ -143,31 +203,13 @@ -fx-padding: 0.4em; } .menu-item:focused { - -fx-background-color: linear-gradient(to bottom, #F1F1F1 0%, #E9E9E9 100%); + -fx-background-color: COLOR_VGRAD_DARK; } .menu-item > .label { - -fx-text-fill: #444; + -fx-text-fill: COLOR_TEXT; } .menu-item:disabled > .label { - -fx-text-fill: #BBB; -} - - -/**************************************************************************** - * * - * Text Fields * - * * - ****************************************************************************/ - -.text-input { - -fx-background-color: #D3D3D3, #FFF; - -fx-background-insets: 0, 1; - -fx-text-fill: #444; - -fx-padding: 0.4em; - -fx-cursor: text; -} -.text-input:focused { - -fx-background-color: #AAA, #FFF; + -fx-text-fill: COLOR_TEXT_DISABLED; } /**************************************************************************** @@ -177,7 +219,7 @@ ****************************************************************************/ .tooltip { - -fx-background-color: #AAA, #FE9; + -fx-background-color: COLOR_BORDER_DARK, #FE9; -fx-background-insets: 0, 1; -fx-padding: 0.4em 0.3em 0.4em 0.3em; -fx-font-size: 0.8em; @@ -191,11 +233,11 @@ .check-box { -fx-label-padding: 0 0 0 3; - -fx-text-fill: #444; + -fx-text-fill: COLOR_TEXT; } .check-box > .box { -fx-padding: 3; - -fx-background-color: #AAA, #FFF; + -fx-background-color: COLOR_BORDER_DARK, #FFF; -fx-background-insets: 0, 1; } .check-box > .box > .mark { @@ -204,10 +246,10 @@ -fx-shape: "M-1,4, L-1,5.5 L3.5,8.5 L9,0 L9,-1 L7,-1 L3,6 L1,4 Z"; } .check-box:selected > .box { - -fx-background-color: #AAA, #EEE; + -fx-background-color: COLOR_BORDER_DARK, COLOR_BACKGROUND; } .check-box:selected > .box > .mark { - -fx-background-color: #444; + -fx-background-color: COLOR_TEXT; } /**************************************************************************** @@ -217,41 +259,8 @@ ****************************************************************************/ .progress-indicator { - -fx-indeterminate-segment-count: 12.0; -} - -.progress-indicator > .determinate-indicator > .indicator { - -fx-background-color: - rgb(208.0, 208.0, 208.0), - linear-gradient(rgb(176.0, 176.0, 176.0), rgb(207.0, 207.0, 207.0)), - linear-gradient(rgb(190.0, 190.0, 190.0) 0.0%, rgb(213.0, 213.0, 213.0) 15.0%, rgb(230.0, 230.0, 230.0) 50.0%, rgb(235.0, 235.0, 235.0) 100.0%), - linear-gradient(to left, rgb(196.0, 196.0, 196.0, 0.5) 0.0%, rgb(220.0, 220.0, 220.0, 0.2) 2.0% , transparent); - -fx-background-insets: 0.5 0.0 -0.5 0.0, 0.0, 0.5, 1.0; - -fx-padding: 0.083333em; -} - -.progress-indicator > .determinate-indicator > .progress { - -fx-background-color: - rgb(208.0, 208.0, 208.0), - radial-gradient(center 50.0% 50.0%, radius 50.0%, rgb(84.0, 170.0, 240.0), rgb(90.0, 192.0, 246.0)); - -fx-background-insets: 0.0, 0.5; - -fx-padding: 0.166667em; -} - -.progress-indicator > .determinate-indicator > .tick { - -fx-background-color: rgb(208.0, 208.0, 208.0), white; - -fx-background-insets: 1.0 0.0 -1.0 0.0, 0.0; - -fx-padding: 0.416667em; - -fx-shape: "m 18.174523,1027.137 c -0.18077,-0.4575 -0.184364,-0.8913 0.115901,-1.1721 0.300265,-0.2809 0.836622,-0.3601 1.288422,-0.041 0.4518,0.3191 2.020453,2.9316 2.020453,2.9316 l 5.41194,-8.0232 c -4e-6,0 0.516257,-0.6671 1.248682,-0.3099 0.648831,0.3165 0.559153,1.0373 0.559153,1.0373 0,0 -5.940433,9.3556 -6.15501,9.6287 -0.214577,0.273 -1.595078,0.2481 -1.817995,-0.027 -0.222917,-0.2751 -2.490777,-3.567 -2.671546,-4.0244 z"; - -fx-scale-shape: false; -} - -.progress-indicator > .percentage { - -fx-font-size: 0.916667em; -} - -.progress-indicator:disabled { - -fx-opacity: -fx-disabled-opacity; + -fx-indeterminate-segment-count: 12; + -fx-spin-enabled: true; } .progress-indicator:indeterminate > .spinner { @@ -312,7 +321,7 @@ /* legend */ .chart-legend { - -fx-text-fill: #444; + -fx-text-fill: COLOR_TEXT; -fx-background-color: transparent; -fx-padding: 0.4em; } @@ -320,21 +329,21 @@ -fx-background-radius: 5px; -fx-padding: 5px; } -.default-color0.chart-line-symbol { -fx-background-color: #28CA40; } -.default-color1.chart-line-symbol { -fx-background-color: #FD4943; } +.default-color0.chart-line-symbol { -fx-background-color: COLOR_CHART_GREEN; } +.default-color1.chart-line-symbol { -fx-background-color: COLOR_CHART_RED; } /* axis */ .axis { -fx-tick-label-font-size: 0.8em; - -fx-tick-label-fill: #444; + -fx-tick-label-fill: COLOR_TEXT; } .axis-label { - -fx-text-fill: #444; + -fx-text-fill: COLOR_TEXT; -fx-padding: 0 0 0.8em 0; } .axis:left { - -fx-border-color: transparent #CCC transparent transparent; + -fx-border-color: transparent COLOR_BORDER transparent transparent; } .axis-tick-mark, .axis-minor-tick-mark { @@ -348,7 +357,7 @@ -fx-padding: 10px; } .chart-horizontal-grid-lines { - -fx-stroke: #CCC; + -fx-stroke: COLOR_BORDER; } .chart-alternative-column-fill { -fx-fill: null; @@ -360,10 +369,10 @@ } .chart-vertical-zero-line, .chart-horizontal-zero-line { - -fx-stroke: #CCC; + -fx-stroke: COLOR_BORDER; } .chart-series-line { -fx-stroke-width: 2px; } -.default-color0.chart-series-line { -fx-stroke: #28CA40; } -.default-color1.chart-series-line { -fx-stroke: #FD4943; } \ No newline at end of file +.default-color0.chart-series-line { -fx-stroke: COLOR_CHART_GREEN; } +.default-color1.chart-series-line { -fx-stroke: COLOR_CHART_RED; } \ No newline at end of file diff --git a/main/ui/src/main/resources/css/mac_theme.css b/main/ui/src/main/resources/css/mac_theme.css index 956ddbb17..6e5d61148 100644 --- a/main/ui/src/main/resources/css/mac_theme.css +++ b/main/ui/src/main/resources/css/mac_theme.css @@ -1,5 +1,5 @@ /* - * Copyright (c) 2014 Sebastian Stenzel + * Copyright (c) 2015 Sebastian Stenzel * This file is licensed under the terms of the MIT license. * See the LICENSE.txt file for more info. * @@ -7,323 +7,288 @@ * Sebastian Stenzel - initial API and implementation * */ - + .root { -fx-font-family: 'lucida-grande'; -fx-font-smoothing-type: lcd; - -fx-font-size: 13.0; - - /*************************************************************************** - * * - * The main color palette from which the rest of the colors are derived. * - * * - **************************************************************************/ - - -fx-base: #FFFFFF; - -fx-background: #ECECEC; - - /* Used for the inside of text boxes, password boxes, lists, trees, and - * tables. See also -fx-text-inner-color, which should be used as the - * -fx-text-fill value for text painted on top of backgrounds colored - * with -fx-control-inner-background. - */ - -fx-control-inner-background: #FFFFFF; - - /* One of these colors will be chosen based upon a ladder calculation - * that uses the brightness of a background color. Instead of using these - * colors directly as -fx-text-fill values, the sections in this file should - * use a derived color to match the background in use. See also: - * - * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color - * -fx-text-background-color for text on top of -fx-background - * -fx-text-inner-color for text on top of -fx-control-inner-color - * -fx-selection-bar-text for text on top of -fx-selection-bar - */ - -fx-dark-text-color: black; - -fx-mid-text-color: #B5B5B5; - -fx-light-text-color: white; - - /* A bright blue for highlighting/accenting objects. For example: selected - * text; selected items in menus, lists, trees, and tables; progress bars */ - -fx-accent: #B2D7FF; - - /* A bright blue for the focus indicator of objects. Typically used as the - * first color in -fx-background-color for the "focused" pseudo-class. Also - * typically used with insets of -1.4 to provide a glowing effect. - */ - -fx-focus-color: #78A6D7; - -fx-faint-focus-color: #8FBDEE; - - /* The color that is used in styling controls. The default value is based - * on -fx-base, but is changed by pseudoclasses to change the base color. - * For example, the "hover" pseudoclass will typically set -fx-color to - * -fx-hover-base (see below) and the "armed" pseudoclass will typically - * set -fx-color to -fx-pressed-base. - */ - -fx-color: -fx-base; - - /* The opacity level to use for the "disabled" pseudoclass. - */ - -fx-disabled-opacity: 0.6; - - /* Chart Color Palette */ - CHART_COLOR_1: #28CA40; - CHART_COLOR_2: #FD4943; - CHART_COLOR_3: #2283FB; - CHART_COLOR_4: #FAEA77; - CHART_COLOR_5: #FA9E78; - CHART_COLOR_6: #F47BF8; - CHART_COLOR_7: #c84164; - CHART_COLOR_8: #888888; - - /*************************************************************************** - * * - * Colors that are derived from the main color palette. * - * * - **************************************************************************/ - - /* The color to use for -fx-text-fill when text is to be painted on top of - * a background filled with the -fx-background color. - */ - -fx-text-background-color: -fx-dark-text-color; - - /* A little darker than -fx-color and used to draw boxes around objects such - * as progress bars, scroll bars, scroll panes, trees, tables, and lists. - */ - -fx-box-border: #C8C8C8; - - /* Darker than -fx-background and used to draw boxes around text boxes and - * password boxes. - */ - -fx-text-box-border: #B5B5B5; - - /* A gradient that goes from a little darker than -fx-color on the top to - * even more darker than -fx-color on the bottom. Typically is the second - * color in the -fx-background-color list as the small thin border around - * a control. It is typically the same size as the control (i.e., insets - * are 0). - */ - -fx-outer-border: derive(-fx-color,-23%); - - /* A gradient that goes from a bit lighter than -fx-color on the top to - * a little darker at the bottom. Typically is the third color in the - * -fx-background-color list as a thin highlight inside the outer border. - * Insets are typically 1. - */ - -fx-inner-border: linear-gradient(to bottom, derive(-fx-color,75%), derive(-fx-color,2%)); - - /* A gradient that goes from a little lighter than -fx-color at the top to - * a little darker than -fx-color at the bottom and is used to fill the - * body of many controls such as buttons. Typically is the fourth color - * in the -fx-background-color list and represents main body of the control. - * Insets are typically 2. - */ - -fx-body-color: linear-gradient(to bottom, derive(-fx-color,10%) ,derive(-fx-color,-6%)); - - /* The color to use as -fx-text-fill when painting text on top of - * backgrounds filled with -fx-base, -fx-color, and -fx-body-color. - */ - -fx-text-base-color: -fx-dark-text-color; - - /* The color to use as -fx-text-fill when painting text on top of - * backgrounds filled with -fx-control-inner-background. - */ - -fx-text-inner-color: -fx-dark-text-color; - - /* Background for items in list like things such as menus, lists, trees, - * and tables. - * - * TODO: it seems like this should be based upon -fx-accent and we should - * remove the setting -fx-background in all the sections that use - * -fx-selection-bar. - */ - -fx-selection-bar: #0069D9; - - /* The color to use as -fx-text-fill when painting text on top of - * backgrounds filled with -fx-selection-bar. - * - * TODO: it seems like this should be derived from -fx-selection-bar. - */ - -fx-selection-bar-text: -fx-light-text-color; - - /* These are needed for Popup */ - -fx-background-color: inherit; - -fx-background-radius: inherit; - -fx-background-insets: inherit; - -fx-padding: inherit; - - /*************************************************************************** - * * - * Set the default background color for the scene * - * * - **************************************************************************/ - - -fx-background-color: -fx-background; + -fx-font-size: 13px; + + COLOR_TEXT: #000; + COLOR_TEXT_DISABLED: #B5B5B5; + COLOR_HYPERLINK: #0069D9; + COLOR_BORDER: #C8C8C8; + COLOR_BORDER_DARK: #B5B5B5; + COLOR_BACKGROUND: #ECECEC; + + COLOR_HGRAD_BTN_BORDER: linear-gradient(to bottom, #C1C1C1 0%, #A6A6A6 100%); + COLOR_HGRAD_BTN_BORDER_DIS: linear-gradient(to bottom, #D2D2D2 0%, #C4C4C4 100%); + COLOR_HGRAD_BTN_DEF_BORDER: linear-gradient(to bottom, #4AA0F9 0%, #045FFF 100%); + COLOR_HGRAD_BTN_DEF_BACKGROUND: linear-gradient(to bottom, #69B2FA 0%, #0D81FF 100%); + COLOR_HGRAD_BTN_ARMED_BORDER: linear-gradient(to bottom, #237FFE 0%, #023FDD 100%); + COLOR_HGRAD_BTN_ARMED_BACKGROUND: linear-gradient(to bottom, #4A97FD 0%, #0867E4 100%); + + COLOR_CHART_GREEN: #28CA40; + COLOR_CHART_RED: #FD4943; + + -fx-background-color: COLOR_BACKGROUND; + -fx-text-fill: COLOR_TEXT; } -/******************************************************************************* - * * - * Common Styles * - * * - * These are styles that give a standard look to a whole range of controls * - * * - ******************************************************************************/ - -/* ==== BUTTON LIKE THINGS ============================================== */ - -.button, -.toggle-button, -.menu-button, -.choice-box, -.color-picker.split-button > .color-picker-label, -.combo-box-base, -.combo-box-base > .arrow-button { - -fx-background-color: linear-gradient(to bottom, #C1C1C1 0%, #A6A6A6 100%), -fx-base; - -fx-background-insets: 0, 1; - -fx-background-radius: 4; - -fx-padding: 0.2em 0.8em 0.2em 0.8em; - -fx-text-fill: -fx-dark-text-color; - -fx-alignment: CENTER; - -fx-focus-traversable: false; - -fx-effect: dropshadow(one-pass-box, #DCDCDC, 0.0, 0.0, 0.0, 1.0); -} -.button:hover, -.toggle-button:hover, -.radio-button:hover > .radio, -.menu-button:hover, -.split-menu-button > .label:hover, -.split-menu-button > .arrow-button:hover, -.slider .thumb:hover, -.scroll-bar > .thumb:hover, -.scroll-bar > .increment-button:hover, -.scroll-bar > .decrement-button:hover, -.choice-box:hover, -.color-picker.split-button > .arrow-button:hover, -.color-picker.split-button > .color-picker-label:hover, -.combo-box-base:hover, -.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover { - -fx-color: -fx-base; -} -.button:armed, -.button:default:armed, -.menu-button:armed, -.split-menu-button:armed > .label, -.split-menu-button > .arrow-button:pressed, -.split-menu-button:showing > .arrow-button, -.slider .thumb:pressed, -.scroll-bar > .thumb:pressed, -.scroll-bar > .increment-button:pressed, -.scroll-bar > .decrement-button:pressed, -.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:pressed { - -fx-background-color: linear-gradient(to bottom, #237FFE 0%, #023FDD 100%), linear-gradient(to bottom, #4A97FD 0%, #0867E4 100%); - -fx-text-fill: -fx-light-text-color; -} -.button:focused, -.toggle-button:focused, -.menu-button:focused, -.choice-box:focused, -.color-picker.split-button:focused > .color-picker-label { - -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; - -fx-background-insets: -2, -0.3, 1, 2; - -fx-background-radius: 7, 6, 4, 3; -} - -/* ==== DISABLED THINGS ================================================= */ - -.button:disabled, -.toggle-button:disabled, -.hyperlink:disabled, -.menu-button:disabled, -.split-menu-button:disabled, -.slider:disabled, -.scroll-pane:disabled, -.progress-bar:disabled, -.progress-indicator:disabled, -.text-input:disabled, -.choice-box:disabled, -.combo-box-base:disabled, -.list-view:disabled, -.tree-view:disabled, -.table-view:disabled, -.tree-table-view:disabled, -.tab-pane:disabled, -.tab-pane > .tab-header-area > .headers-region > .tab:disabled { - -fx-background-color: linear-gradient(to bottom, #D2D2D2 0%, #C4C4C4 100%), #F2F2F2; - -fx-background-insets: 0, 1; - -fx-text-fill: -fx-mid-text-color; - -fx-effect: dropshadow(one-pass-box, #E0E0E0, 0.0, 0.0, 0.0, 0.5); -} - -/* ==== MNEMONIC THINGS ================================================= */ - -.button:show-mnemonics .mnemonic-underline, -.toggle-button:show-mnemonics .mnemonic-underline, -.hyperlink:show-mnemonics > .mnemonic-underline, -.split-menu-button:show-mnemonics > .mnemonic-underline, -.menu-button:show-mnemonics > .mnemonic-underline { - -fx-stroke: -fx-text-base-color; -} - -/* ==== CHOICE BOX LIKE THINGS ========================================== */ - -.combo-box-base { - -fx-padding: 0; -} - -/* ==== BOX LIKE THINGS ================================================= */ - -.scroll-pane, -.split-pane, -.list-view, -.tree-view, -.table-view, -.tree-table-view { - -fx-background-color: -fx-box-border, -fx-control-inner-background; - -fx-background-insets: 0, 1; - -fx-padding: 1; -} - -/******************************************************************************* - * * - * Label * - * * - ******************************************************************************/ +/**************************************************************************** + * * + * Labels * + * * + ****************************************************************************/ .label { - -fx-text-fill: -fx-text-background-color; + -fx-text-fill: COLOR_TEXT; } -/******************************************************************************* - * * - * Hyperlink * - * * - ******************************************************************************/ +/**************************************************************************** + * * + * Hyperlinks * + * * + ****************************************************************************/ .hyperlink { -fx-cursor: hand; - -fx-text-fill: #0069D9; + -fx-text-fill: COLOR_HYPERLINK; } + .hyperlink:hover { -fx-underline: true; } +/**************************************************************************** + * * + * Buttons * + * * + ****************************************************************************/ + +.button { + -fx-background-color: COLOR_HGRAD_BTN_BORDER, #FFF; + -fx-background-insets: 0, 1; + -fx-background-radius: 4; + -fx-padding: 0.2em 0.8em 0.2em 0.8em; + -fx-text-fill: COLOR_TEXT; + -fx-alignment: CENTER; + -fx-focus-traversable: false; + -fx-effect: dropshadow(one-pass-box, #DCDCDC, 0.0, 0.0, 0.0, 1.0); +} + +.root.active-window .button:default { + -fx-background-color: COLOR_HGRAD_BTN_DEF_BORDER, COLOR_HGRAD_BTN_DEF_BACKGROUND; + -fx-text-fill: #FFF; +} + +.button:disabled, +.button:default:disabled, +.root.active-window .button:default:disabled { + -fx-background-color: COLOR_HGRAD_BTN_BORDER_DIS, #F2F2F2; + -fx-background-insets: 0, 1; + -fx-text-fill: COLOR_TEXT_DISABLED; + -fx-effect: dropshadow(one-pass-box, #E0E0E0, 0.0, 0.0, 0.0, 0.5); +} + +.button:armed, +.root.active-window .button:default:armed { + -fx-background-color: COLOR_HGRAD_BTN_ARMED_BORDER, COLOR_HGRAD_BTN_ARMED_BACKGROUND; + -fx-text-fill: #FFF; +} + +/**************************************************************************** + * * + * Text Fields * + * * + ****************************************************************************/ + +.text-input { + -fx-text-fill: COLOR_TEXT; + -fx-highlight-fill: derive(#FFF,-20%); + -fx-highlight-text-fill: COLOR_TEXT; + -fx-prompt-text-fill: derive(#FFF,-30%); + -fx-border-color: COLOR_BORDER_DARK; + -fx-border-width: 1px; + -fx-background-color: #FFFFFF; + -fx-background-insets: 0; + -fx-background-radius: 0; + -fx-cursor: text; + -fx-padding: 2px; +} +.text-input:focused { + -fx-highlight-fill: #B2D7FF; + -fx-border-color: #78A6D7; + -fx-border-width: 1px; + -fx-background-color: #8FBDEE, #FFFFFF; + -fx-background-insets: -3, 0; + -fx-background-radius: 3, 0; + -fx-prompt-text-fill: transparent; +} + +/**************************************************************************** + * * + * Vault List * + * * + ****************************************************************************/ + +.list-view { + -fx-background-color: COLOR_BORDER, #FFF; + -fx-background-insets: 0, 1; + -fx-padding: 1; +} + +.list-view > .virtual-flow > .scroll-bar:vertical { + -fx-background-insets: 0, 0 0 0 1; + -fx-padding: -1 -1 -1 0; +} +.list-view > .virtual-flow > .scroll-bar:horizontal { + -fx-background-insets: 0, 1 0 0 0; + -fx-padding: 0 -1 -1 -1; +} +.list-view > .virtual-flow > .corner { + -fx-background-color: COLOR_BORDER, #FFF; + -fx-background-insets: 0, 1 0 0 1; +} +.list-cell { + -fx-background-color: #FFF; + -fx-padding: 0.8em 0.5em 0.8em 0.5em; + -fx-text-fill: COLOR_TEXT; + -fx-opacity: 1; +} + +.root.active-window .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused, +.root.active-window .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, +.root.active-window .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { + -fx-background-color: #0069D9; + -fx-text-fill: #FFF; +} + +.root.inactive-window .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused, +.root.inactive-window .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, +.root.inactive-window .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { + -fx-background-color: #DCDCDC; + -fx-text-fill: #FFF; +} + /******************************************************************************* * * - * Button & ToggleButton * + * ScrollBar * + * * + ******************************************************************************/ +.scroll-bar:horizontal, +.scroll-bar:vertical { + -fx-background-color: #E8E8E8, #FAFAFA; +} + +.scroll-bar:disabled { + -fx-opacity: 0.6; +} +.scroll-bar > .thumb { + -fx-background-color: #C1C1C1; + -fx-background-insets: 2px; + -fx-background-radius: 4px; +} +.scroll-bar > .thumb:hover { + -fx-background-color: #7D7D7D; +} + +.scroll-bar > .increment-button, +.scroll-bar > .decrement-button { + -fx-background-color: transparent; + -fx-color: transparent; +} + +.scroll-bar:horizontal > .increment-button, +.scroll-bar:horizontal > .decrement-button { + -fx-padding: 6 0 6 0; +} + +.scroll-bar:vertical > .increment-button, +.scroll-bar:vertical > .decrement-button { + -fx-padding: 0 6 0 6; +} + +/**************************************************************************** + * * + * Vault List Toolbar * + * * + ****************************************************************************/ + +.tool-bar.list-related-toolbar { + -fx-background-color: COLOR_BORDER, #F7F7F7; + -fx-background-insets: 0, 0 1 1 1; + -fx-padding: 0; + -fx-spacing: 0; + -fx-alignment: CENTER_LEFT; +} + +.tool-bar.list-related-toolbar .toggle-button { + -fx-background-color: transparent; + -fx-padding: 0.2em 0.8em 0.2em 0.8em; + -fx-background-insets: 0; + -fx-background-radius: 0; + -fx-border-color: transparent COLOR_BORDER transparent transparent; + -fx-border-width: 1; +} + +.tool-bar.list-related-toolbar .toggle-button:armed, +.tool-bar.list-related-toolbar .toggle-button:selected { + -fx-background-color: linear-gradient(to bottom, #C0C0C0 0%, #ADADAD 100%); +} + +/******************************************************************************* + * * + * PopupMenu * * * ******************************************************************************/ -/* ==== DEFAULT ========================================================= */ - -.root.active-window .button:default { - -fx-background-color: linear-gradient(to bottom, #4AA0F9 0%, #045FFF 100%), linear-gradient(to bottom, #69B2FA 0%, #0D81FF 100%); - -fx-text-fill: -fx-light-text-color; +.context-menu { + -fx-background-color: rgba(255.0, 255.0, 255.0, 0.9); + -fx-background-insets: 0; + -fx-background-radius: 4.0; + -fx-padding: 4px 0 4px 0; + -fx-effect: dropshadow(three-pass-box, rgba(0.0,0.0,0.0,0.6), 8.0, 0.0, 0.0, 0.0 ); } -.button:default:disabled, -.root.active-window .button:default:disabled { - -fx-background-color: linear-gradient(to bottom, #D2D2D2 0%, #C4C4C4 100%), #F2F2F2; - -fx-background-insets: 0, 1; - -fx-text-fill: -fx-mid-text-color; +.context-menu > .separator { + -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */ +} +.menu-item { + -fx-background-color: transparent; + -fx-background-insets:0.0; + -fx-padding:0.2em 1em 0.2em 1em; + -fx-border-width: 0.0 0.0 0.0 0.0; + -fx-border-color:transparent; +} +.menu-item >.label { + -fx-padding: 0em 0.5em 0em 0em; + -fx-text-fill: COLOR_TEXT; +} +.menu-item:disabled > .label { + -fx-opacity: 0.6; +} +.menu-item:focused { + -fx-background: #B2D7FF; + -fx-background-color: #2283FB; + -fx-text-fill: #FFF; +} +.menu-item:focused > .label { + -fx-text-fill: white; +} +.menu-item:disabled { + -fx-opacity: 0.6; +} + +/******************************************************************************* + * * + * Tooltip * + * * + ******************************************************************************/ + +.tooltip { + -fx-background-color: COLOR_BORDER; + -fx-padding: 0.2em 0.4em 0.2em 0.4em; + -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 2, 0, 0, 0); + -fx-font-size: 0.8em; } /******************************************************************************* @@ -358,587 +323,129 @@ -fx-background-color: #444444; } -/******************************************************************************* - * * - * ToolBar * - * * - ******************************************************************************/ - -.tool-bar:horizontal { - -fx-background-color: -fx-box-border, -fx-background; - -fx-background-insets: 0; - -fx-padding: 0.4em; - -fx-spacing: 0.2em; - -fx-alignment: CENTER_LEFT; -} - -.tool-bar:horizontal > .container > .separator { - -fx-orientation: vertical; -} - -.tool-bar.list-related-toolbar { - -fx-background-color: #B4B4B4, #F7F7F7; - -fx-background-insets: 0, 0 1 1 1; - -fx-padding: 0; - -fx-spacing: 0; - -fx-alignment: CENTER_LEFT; -} - -.tool-bar.list-related-toolbar .button, -.tool-bar.list-related-toolbar .toggle-button { - -fx-background-color: transparent; - -fx-background-insets: 0; - -fx-background-radius: 0; - -fx-border-color: transparent #B4B4B4 transparent transparent; - -fx-border-width: 1; -} - -.tool-bar.list-related-toolbar .button:armed, -.tool-bar.list-related-toolbar .toggle-button:armed, -.tool-bar.list-related-toolbar .toggle-button:selected { - -fx-background-color: linear-gradient(to bottom, #C0C0C0 0%, #ADADAD 100%); -} - - -/******************************************************************************* - * * - * ScrollBar * - * * - ******************************************************************************/ -.scroll-bar:horizontal, -.scroll-bar:vertical { - -fx-background-color: #E8E8E8, #FAFAFA; -} - -.scroll-bar:disabled { - -fx-opacity: -fx-disabled-opacity; -} -.scroll-bar > .thumb { - -fx-background-color: #C1C1C1; - -fx-background-insets: 2px; - -fx-background-radius: 4px; -} -.scroll-bar > .thumb:hover { - -fx-background-color: #7D7D7D; -} - -.scroll-bar > .increment-button, -.scroll-bar > .decrement-button { - -fx-background-color: transparent; - -fx-color: transparent; -} - -.scroll-bar:horizontal > .increment-button, -.scroll-bar:horizontal > .decrement-button { - -fx-padding: 6px 0px; -} - -.scroll-bar:vertical > .increment-button, -.scroll-bar:vertical > .decrement-button { - -fx-padding: 0px 6px; -} - -/******************************************************************************* - * * - * Separator * - * * - ******************************************************************************/ - -.separator:horizontal .line { - -fx-border-color: -fx-text-box-border transparent transparent transparent; - -fx-border-insets: 0, 1 0 0 0; -} -.separator:vertical .line { - -fx-border-color: transparent transparent transparent -fx-text-box-border; - -fx-border-width: 3, 1; - -fx-border-insets: 0, 0 0 0 1; -} - -/******************************************************************************* - * * - * ProgressIndicator * - * * - ******************************************************************************/ +/**************************************************************************** + * * + * ProgressIndicator * + * * + ****************************************************************************/ .progress-indicator { - -fx-indeterminate-segment-count: 12.0; -} - -.progress-indicator > .determinate-indicator > .indicator { - -fx-background-color: - rgb(208.0, 208.0, 208.0), - linear-gradient(rgb(176.0, 176.0, 176.0), rgb(207.0, 207.0, 207.0)), - linear-gradient(rgb(190.0, 190.0, 190.0) 0.0%, rgb(213.0, 213.0, 213.0) 15.0%, rgb(230.0, 230.0, 230.0) 50.0%, rgb(235.0, 235.0, 235.0) 100.0%), - linear-gradient(to left, rgb(196.0, 196.0, 196.0, 0.5) 0.0%, rgb(220.0, 220.0, 220.0, 0.2) 2.0% , transparent); - -fx-background-insets: 0.5 0.0 -0.5 0.0, 0.0, 0.5, 1.0; - -fx-padding: 0.083333em; -} - -.progress-indicator > .determinate-indicator > .progress { - -fx-background-color: - rgb(208.0, 208.0, 208.0), - radial-gradient(center 50.0% 50.0%, radius 50.0%, rgb(84.0, 170.0, 240.0), rgb(90.0, 192.0, 246.0)); - -fx-background-insets: 0.0, 0.5; - -fx-padding: 0.166667em; -} - -.progress-indicator > .determinate-indicator > .tick { - -fx-background-color: rgb(208.0, 208.0, 208.0), white; - -fx-background-insets: 1.0 0.0 -1.0 0.0, 0.0; - -fx-padding: 0.416667em; - -fx-shape: "m 18.174523,1027.137 c -0.18077,-0.4575 -0.184364,-0.8913 0.115901,-1.1721 0.300265,-0.2809 0.836622,-0.3601 1.288422,-0.041 0.4518,0.3191 2.020453,2.9316 2.020453,2.9316 l 5.41194,-8.0232 c -4e-6,0 0.516257,-0.6671 1.248682,-0.3099 0.648831,0.3165 0.559153,1.0373 0.559153,1.0373 0,0 -5.940433,9.3556 -6.15501,9.6287 -0.214577,0.273 -1.595078,0.2481 -1.817995,-0.027 -0.222917,-0.2751 -2.490777,-3.567 -2.671546,-4.0244 z"; - -fx-scale-shape: false; -} - -.progress-indicator > .percentage { - -fx-font-size: 0.916667em; -} - -.progress-indicator:disabled { - -fx-opacity: -fx-disabled-opacity; + -fx-indeterminate-segment-count: 12; + -fx-spin-enabled: true; } .progress-indicator:indeterminate > .spinner { - -fx-padding: 0.083333em; + -fx-padding: 0.083333em; } .progress-indicator:indeterminate .segment { - -fx-background-color: rgb(95.0, 95.0, 98.0), rgb(122.0, 122.0, 125.0); - -fx-background-insets:0.0, 0.5; + -fx-background-color: rgb(95.0, 95.0, 98.0), rgb(122.0, 122.0, 125.0); + -fx-background-insets:0.0, 0.5; } .progress-indicator:indeterminate .segment0 { - -fx-shape:"m 14.321262,6.5816808 c -0.824944,0.3797564 -0.10368,1.8484772 0.718513,1.3544717 L 18.786514,5.9486042 C 19.644992,5.4932031 18.92648,4.1387308 18.068001,4.5941315 z"; + -fx-shape:"m 14.321262,6.5816808 c -0.824944,0.3797564 -0.10368,1.8484772 0.718513,1.3544717 L 18.786514,5.9486042 C 19.644992,5.4932031 18.92648,4.1387308 18.068001,4.5941315 z"; } .progress-indicator:indeterminate .segment1 { - -fx-shape:"m 15.372451,9.2445322 c -0.906719,-0.051108 -0.957826,1.5843588 0,1.5332498 l 4.241273,0 c 0.97179,0 0.97179,-1.5332498 0,-1.5332498 z"; + -fx-shape:"m 15.372451,9.2445322 c -0.906719,-0.051108 -0.957826,1.5843588 0,1.5332498 l 4.241273,0 c 0.97179,0 0.97179,-1.5332498 0,-1.5332498 z"; } .progress-indicator:indeterminate .segment2 { - -fx-shape:"m 14.423504,13.443113 c -0.824945,-0.379757 -0.10368,-1.848478 0.718512,-1.354472 l 3.746739,1.987548 c 0.858478,0.455401 0.139967,1.809873 -0.718512,1.354473 z"; + -fx-shape:"m 14.423504,13.443113 c -0.824945,-0.379757 -0.10368,-1.848478 0.718512,-1.354472 l 3.746739,1.987548 c 0.858478,0.455401 0.139967,1.809873 -0.718512,1.354473 z"; } .progress-indicator:indeterminate .segment3 { - -fx-shape:"m 12.10997,15.070611 c -0.49762,-0.759687 0.893182,-1.621681 1.327834,-0.766626 l 2.120636,3.673051 c 0.485895,0.841595 -0.841938,1.60822 -1.327833,0.766625 z"; + -fx-shape:"m 12.10997,15.070611 c -0.49762,-0.759687 0.893182,-1.621681 1.327834,-0.766626 l 2.120636,3.673051 c 0.485895,0.841595 -0.841938,1.60822 -1.327833,0.766625 z"; } .progress-indicator:indeterminate .segment4 { - -fx-shape:"m 9.2224559,19.539943 c -0.051108,0.906718 1.5843581,0.957826 1.5332501,0 l 0,-4.241273 c 0,-0.97179 -1.5332501,-0.97179 -1.5332501,0 z"; + -fx-shape:"m 9.2224559,19.539943 c -0.051108,0.906718 1.5843581,0.957826 1.5332501,0 l 0,-4.241273 c 0,-0.97179 -1.5332501,-0.97179 -1.5332501,0 z"; } .progress-indicator:indeterminate .segment5 { - -fx-shape:"M 8.0465401,15.070611 C 8.5441601,14.310924 7.1533584,13.44893 6.7187068,14.303985 l -2.1206366,3.673051 c -0.485895,0.841595 0.8419383,1.60822 1.3278333,0.766625 z"; + -fx-shape:"M 8.0465401,15.070611 C 8.5441601,14.310924 7.1533584,13.44893 6.7187068,14.303985 l -2.1206366,3.673051 c -0.485895,0.841595 0.8419383,1.60822 1.3278333,0.766625 z"; } .progress-indicator:indeterminate .segment6 { - -fx-shape:"M 5.7330066,13.443113 C 6.5579512,13.063356 5.8366865,11.594635 5.0144939,12.088641 L 1.2677551,14.076189 C 0.409277,14.53159 1.1277888,15.886062 1.9862674,15.430662 z"; + -fx-shape:"M 5.7330066,13.443113 C 6.5579512,13.063356 5.8366865,11.594635 5.0144939,12.088641 L 1.2677551,14.076189 C 0.409277,14.53159 1.1277888,15.886062 1.9862674,15.430662 z"; } .progress-indicator:indeterminate .segment7 { - -fx-shape:"m 0.42171041,9.2083842 c -0.90671825,-0.051108 -0.95782608,1.5843588 0,1.5332498 l 4.24127319,0 c 0.9717899,0 0.9717899,-1.5332498 0,-1.5332498 z"; + -fx-shape:"m 0.42171041,9.2083842 c -0.90671825,-0.051108 -0.95782608,1.5843588 0,1.5332498 l 4.24127319,0 c 0.9717899,0 0.9717899,-1.5332498 0,-1.5332498 z"; } .progress-indicator:indeterminate .segment8 { - -fx-shape:"M 5.7330066,6.5305598 C 6.5579512,6.9103162 5.8366865,8.3790371 5.0144939,7.8850315 L 1.2677551,5.8974832 C 0.409277,5.4420823 1.1277888,4.0876101 1.9862674,4.5430105 z"; + -fx-shape:"M 5.7330066,6.5305598 C 6.5579512,6.9103162 5.8366865,8.3790371 5.0144939,7.8850315 L 1.2677551,5.8974832 C 0.409277,5.4420823 1.1277888,4.0876101 1.9862674,4.5430105 z"; } .progress-indicator:indeterminate .segment9 { - -fx-shape:"M 8.0465401,4.9030617 C 8.5441601,5.6627485 7.1533584,6.5247425 6.7187068,5.6696872 L 4.5980702,1.9966363 C 4.1121752,1.1550418 5.4400085,0.38841683 5.9259035,1.2300114 z"; + -fx-shape:"M 8.0465401,4.9030617 C 8.5441601,5.6627485 7.1533584,6.5247425 6.7187068,5.6696872 L 4.5980702,1.9966363 C 4.1121752,1.1550418 5.4400085,0.38841683 5.9259035,1.2300114 z"; } .progress-indicator:indeterminate .segment10 { - -fx-shape:"m 9.2224559,4.62535 c -0.051108,0.9067177 1.5843581,0.957826 1.5332501,0 l 0,-4.24127319 c 0,-0.9717899 -1.5332501,-0.9717899 -1.5332501,0 z"; + -fx-shape:"m 9.2224559,4.62535 c -0.051108,0.9067177 1.5843581,0.957826 1.5332501,0 l 0,-4.24127319 c 0,-0.9717899 -1.5332501,-0.9717899 -1.5332501,0 z"; } .progress-indicator:indeterminate .segment11 { - -fx-shape:"m 12.007729,4.9541827 c -0.49762,0.7596865 0.893181,1.6216808 1.327833,0.7666252 L 15.456199,2.0477574 C 15.942094,1.2061627 14.61426,0.43953765 14.128365,1.2811324 z"; + -fx-shape:"m 12.007729,4.9541827 c -0.49762,0.7596865 0.893181,1.6216808 1.327833,0.7666252 L 15.456199,2.0477574 C 15.942094,1.2061627 14.61426,0.43953765 14.128365,1.2811324 z"; } -/******************************************************************************* - * * - * Text COMMON * - * * - ******************************************************************************/ - -.text-input { - -fx-text-fill: -fx-dark-text-color; - -fx-highlight-fill: derive(-fx-control-inner-background,-20%); - -fx-highlight-text-fill: -fx-text-inner-color; - -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%); - -fx-border-color: -fx-text-box-border; - -fx-border-width: 1px; - -fx-background-color: #FFFFFF; - -fx-background-insets: 0; - -fx-background-radius: 0; - -fx-cursor: text; - -fx-padding: 2px; -} -.text-input:focused { - -fx-highlight-fill: -fx-accent; - -fx-border-color: -fx-focus-color; - -fx-border-width: 1px; - -fx-background-color: -fx-faint-focus-color, #FFFFFF; - -fx-background-insets: -3, 0; - -fx-background-radius: 3, 0; - -fx-prompt-text-fill: transparent; +/***************************************************************************** + * * + * I/O Chart * + * * + *****************************************************************************/ + + .chart { + -fx-padding: 5px; } -/******************************************************************************* - * * - * PopupMenu * - * * - ******************************************************************************/ +/* legend */ -.context-menu { - -fx-background-color: rgba(255.0, 255.0, 255.0, 0.9); - -fx-background-insets: 0; - -fx-background-radius: 4.0; - -fx-padding: 4px 0 4px 0; - -fx-effect: dropshadow(three-pass-box, rgba(0.0,0.0,0.0,0.6), 8.0, 0.0, 0.0, 0.0 ); -} -.context-menu > .separator { - -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */ -} - -/******************************************************************************* - * * - * MenuItem * - * * - ******************************************************************************/ - -.menu-item { - -fx-background-color: transparent; - -fx-background-insets:0.0; - -fx-padding:0.2em 1em 0.2em 1em; - -fx-border-width: 0.0 0.0 0.0 0.0; - -fx-border-color:transparent; -} -.menu-item > .left-container { - -fx-padding: 0.458em 0.791em 0.458em 0.458em; -} -.menu-item > .graphic-container { - -fx-padding: 0em 0.333em 0em 0em; -} -.menu-item >.label { - -fx-padding: 0em 0.5em 0em 0em; - -fx-text-fill: -fx-text-base-color; -} -.menu-item:disabled > .label { - -fx-opacity: -fx-disabled-opacity; -} -.menu-item:focused { - -fx-background: -fx-accent; - -fx-background-color: #2283FB; - -fx-text-fill: -fx-selection-bar-text; -} -.menu-item:focused > .label { - -fx-text-fill: white; -} -.menu-item > .right-container { - -fx-padding: 0em 0em 0em 0.5em; -} -.menu-item:show-mnemonics > .mnemonic-underline { - -fx-stroke: -fx-text-fill; -} -.menu > .right-container > .arrow { - -fx-padding: 0.458em 0.167em 0.458em 0.167em; /* 4.5 2 4.5 2 */ - -fx-background-color: -fx-color; - -fx-shape: "M0,-4L4,0L0,4Z"; - -fx-scale-shape: false; -} -.menu:selected > .right-container > .arrow { - -fx-background-color: white; -} -.menu-item:disabled { - -fx-opacity: -fx-disabled-opacity; -} - -/******************************************************************************* - * * - * ListView and ListCell * - * * - ******************************************************************************/ - -.list-view > .virtual-flow > .scroll-bar:vertical { - -fx-background-insets: 0, 0 0 0 1; - -fx-padding: -1 -1 -1 0; -} -.list-view > .virtual-flow > .scroll-bar:horizontal { - -fx-background-insets: 0, 1 0 0 0; - -fx-padding: 0 -1 -1 -1; -} -.list-view > .virtual-flow > .corner { - -fx-background-color: -fx-box-border, -fx-base; - -fx-background-insets: 0, 1 0 0 1; -} -.list-cell { - -fx-background-color: -fx-control-inner-background; - -fx-padding: 0.8em 0.5em 0.8em 0.5em; - -fx-text-fill: -fx-text-inner-color; - -fx-opacity: 1; -} - -.root.active-window .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused, -.root.active-window .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, -.root.active-window .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { - -fx-background-color: -fx-selection-bar; - -fx-text-fill: -fx-selection-bar-text; -} - -.root.inactive-window .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused, -.root.inactive-window .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, -.root.inactive-window .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { - -fx-background-color: #DCDCDC; - -fx-text-fill: -fx-selection-bar-text; -} - -/******************************************************************************* - * * - * ComboBox * - * * - ******************************************************************************/ - -/* Customie the ListCell that appears in the ComboBox button itself */ -.combo-box > .list-cell { - -fx-background: transparent; - -fx-background-color: transparent; - -fx-text-fill: -fx-text-base-color; - -fx-padding: 0.2em 0.5em 0.2em 0.5em; -} -.combo-box-popup > .list-view { - -fx-background-color: rgba(255.0, 255.0, 255.0, 0.9); - -fx-background-insets: 0; - -fx-background-radius: 4.0; - -fx-padding: 4px 0 4px 0; - -fx-effect: dropshadow(three-pass-box, rgba(0.0,0.0,0.0,0.6), 8.0, 0.0, 0.0, 0.0); -} -.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell { - -fx-background-color: transparent; - -fx-padding: 0.2em 1em 0.2em 1em; - -fx-border-color: transparent; -} - -.root.active-window .combo-box-popup > .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused:filled:selected, -.root.active-window .combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, -.root.active-window .combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { - -fx-background: -fx-accent; - -fx-background-color: #2283FB; - -fx-text-fill: -fx-selection-bar-text; -} - -/* Arrow-Button */ -.combo-box-base > .arrow-button { - -fx-background-radius: 0 5 5 0, 0 4 4 0; - -fx-padding: 0.2em 0.5em 0.2em 0.5em; - -fx-background-insets: 0 0 0 1, 1; -} -.combo-box-base > .arrow-button > .arrow { - -fx-background-insets: 0 0 -1 0, 0; - -fx-padding: 9px 6px 0 0; - -fx-shape: "M 0 3 l 3 -3 l 3 3 m 0 3 l -3 3 l -3 -3"; -} -.root.active-window .combo-box-base > .arrow-button { - -fx-background-color: linear-gradient(to bottom, #4AA0F9 0%, #045FFF 100%), linear-gradient(to bottom, #69B2FA 0%, #0D81FF 100%); -} -.root.active-window .combo-box-base > .arrow-button > .arrow { - -fx-background-color: -fx-light-text-color; -} -.root.inactive-window .combo-box-base > .arrow-button { - -fx-background-color: transparent; -} -.root.inactive-window .combo-box-base > .arrow-button > .arrow { - -fx-background-color: #444444; -} - -/******************************************************************************* - * * - * SplitPane * - * * - ******************************************************************************/ - -.split-pane > .split-pane-divider { - -fx-padding: 0 0.25em 0 0.25em; /* 0 3 0 3 */ -} - -/******************************************************************************* - * * - * Tooltip * - * * - ******************************************************************************/ - -.tooltip { - -fx-background-color: -fx-background; - -fx-padding: 0.2em 0.4em 0.2em 0.4em; - -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 2, 0, 0, 0); - -fx-font-size: 0.8em; -} - -/******************************************************************************* - * * - * Charts * - * * - ******************************************************************************/ - -.chart { - -fx-padding: 5px; -} -.chart-content { - -fx-padding: 10px; -} -.chart-title { - -fx-font-size: 1.4em; -} .chart-legend { - -fx-background-color: linear-gradient(to bottom, derive(-fx-background, -10%), derive(-fx-background, -5%)), - linear-gradient(from 0px 0px to 0px 5px, derive(-fx-background, -5%), derive(-fx-background, 20%)); - -fx-background-insets: 0,1; - -fx-background-radius: 6,5; - -fx-padding: 6px; + -fx-text-fill: COLOR_TEXT; + -fx-background-color: transparent; + -fx-padding: 0.4em; } +.chart-line-symbol { + -fx-background-color: #000, #FFF; + -fx-background-insets: 0, 2; + -fx-background-radius: 5px; + -fx-padding: 5px; +} +.default-color0.chart-line-symbol { -fx-background-color: COLOR_CHART_GREEN, #FFF; } +.default-color1.chart-line-symbol { -fx-background-color: COLOR_CHART_RED, #FFF; } -/******************************************************************************* - * * - * Axis * - * * - ******************************************************************************/ +/* 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%); + -fx-tick-label-font-size: 0.8em; + -fx-tick-label-fill: COLOR_TEXT; } -.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-label { + -fx-text-fill: COLOR_TEXT; + -fx-padding: 0 0 0.8em 0; } .axis:left { - -fx-border-color: transparent AXIS_COLOR transparent transparent; + -fx-border-color: transparent COLOR_BORDER transparent transparent; } .axis-tick-mark, .axis-minor-tick-mark { - -fx-fill: null; - -fx-stroke: AXIS_COLOR; + -fx-fill: null; + -fx-stroke: #CCC; } -/******************************************************************************* - * * - * ChartPlot * - * * - ******************************************************************************/ +/* content */ -.chart-vertical-grid-lines { - -fx-stroke: derive(-fx-background,-10%); - -fx-stroke-dash-array: 0.25em, 0.25em; +.chart-content { + -fx-padding: 10px; } .chart-horizontal-grid-lines { - -fx-stroke: derive(-fx-background,-10%); + -fx-stroke: COLOR_BORDER; } .chart-alternative-column-fill { - -fx-fill: null; - -fx-stroke: null; + -fx-fill: null; + -fx-stroke: null; } .chart-alternative-row-fill { - -fx-fill: null; - -fx-stroke: null; + -fx-fill: null; + -fx-stroke: null; } .chart-vertical-zero-line, .chart-horizontal-zero-line { - -fx-stroke: derive(-fx-text-background-color, 40%); -} - -/******************************************************************************* - * * - * LineChart * - * * - ******************************************************************************/ - -.chart-line-symbol { - -fx-background-color: #f9d900, white; - -fx-background-insets: 0, 2; - -fx-background-radius: 5px; - -fx-padding: 5px; + -fx-stroke: COLOR_BORDER; } .chart-series-line { - -fx-stroke: #f9d900; - -fx-stroke-width: 3px; - /*-fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.3) , 8, 0.0 , 0 , 3 );*/ + -fx-stroke-width: 2px; } -.default-color0.chart-line-symbol { -fx-background-color: CHART_COLOR_1, white; } -.default-color1.chart-line-symbol { -fx-background-color: CHART_COLOR_2, white; } -.default-color2.chart-line-symbol { -fx-background-color: CHART_COLOR_3, white; } -.default-color3.chart-line-symbol { -fx-background-color: CHART_COLOR_4, white; } -.default-color4.chart-line-symbol { -fx-background-color: CHART_COLOR_5, white; } -.default-color5.chart-line-symbol { -fx-background-color: CHART_COLOR_6, white; } -.default-color6.chart-line-symbol { -fx-background-color: CHART_COLOR_7, white; } -.default-color7.chart-line-symbol { -fx-background-color: CHART_COLOR_8, white; } -.default-color0.chart-series-line { -fx-stroke: CHART_COLOR_1; } -.default-color1.chart-series-line { -fx-stroke: CHART_COLOR_2; } -.default-color2.chart-series-line { -fx-stroke: CHART_COLOR_3; } -.default-color3.chart-series-line { -fx-stroke: CHART_COLOR_4; } -.default-color4.chart-series-line { -fx-stroke: CHART_COLOR_5; } -.default-color5.chart-series-line { -fx-stroke: CHART_COLOR_6; } -.default-color6.chart-series-line { -fx-stroke: CHART_COLOR_7; } -.default-color7.chart-series-line { -fx-stroke: CHART_COLOR_8; } - -/******************************************************************************* - * * - * Combinations * - * * - * This section is for special handling of when one control is nested inside * - * another control. There are many cases where we would end up with ugly * - * double borders that are fixed here. * - * * - ******************************************************************************/ - -.split-pane > * > .table-view { -fx-padding: 0px; } -.split-pane > * > .list-view { -fx-padding: 0px; } -.split-pane > * > .tree-view { -fx-padding: 0px; } -.split-pane > * > .scroll-pane { -fx-padding: 0px; } -.split-pane > * > .split-pane { - -fx-background-insets: 0, 0; - -fx-padding: 0; - } - - /* ############################################################################ - # Workaround for RT-27627 # - ############################################################################ */ - -.choice-box > .open-button > .arrow { doh: true; } -.split-menu-button:openvertically > .arrow-button > .arrow { doh: true; } -.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow { doh: true; } -.tree-table-view { doh: true; } -.tree-table-view:focused { doh: true; } -.tree-table-view > .virtual-flow > .scroll-bar:vertical { doh: true; } -.tree-table-view > .virtual-flow > .scroll-bar:horizontal { doh: true; } -.tree-table-view > .virtual-flow > .corner { doh: true; } -.tree-table-row-cell:focused { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected { doh: true; } -.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover{ doh: true; } -.tree-table-row-cell:filled:selected:focused { doh: true; } -.tree-table-row-cell:filled:selected { doh: true; } -.tree-table-row-cell:selected:disabled { doh: true; } -.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover { doh: true; } -.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { doh: true; } -.tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible { doh: true; } -.tree-table-view:constrained-resize > .column-header:last-visible { doh: true; } -.tree-table-view:constrained-resize .filler { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled .tree-table-cell:focused:selected { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; } -.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover:selected { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:selected:hover{ doh: true; } -.tree-table-row-cell:filled > .tree-table-cell:selected:focused { doh: true; } -.tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; } -.tree-table-cell:selected:disabled { doh: true; } -.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover { doh: true; } -.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover { doh: true; } -.tree-table-view .column-resize-line { doh: true; } -.tree-table-view > .column-header-background { doh: true; } -.tree-table-view .column-header { doh: true; } -.tree-table-view .filler { doh: true; } -.tree-table-view .column-header .sort-order{ doh: true; } -.tree-table-view > .column-header-background > .show-hide-columns-button{ doh: true; } -.tree-table-view .show-hide-column-image { doh: true; } -.tree-table-view .column-drag-header { doh: true; } -.tree-table-view .column-overlay { doh: true; } -.tree-table-view /*> column-header-background > nested-column-header >*/ .arrow { doh: true; } -.tree-table-view .empty-table { doh: true; } -.axis-minor-tick-mark { doh: true; } -.chart-horizontal-zero-line { doh: true; } -.stacked-bar-chart:horizontal .chart-bar { doh: true; } \ No newline at end of file +.default-color0.chart-series-line { -fx-stroke: COLOR_CHART_GREEN; } +.default-color1.chart-series-line { -fx-stroke: COLOR_CHART_RED; } \ No newline at end of file diff --git a/main/ui/src/main/resources/css/win_theme.css b/main/ui/src/main/resources/css/win_theme.css index 8f073556c..9c2af8f17 100644 --- a/main/ui/src/main/resources/css/win_theme.css +++ b/main/ui/src/main/resources/css/win_theme.css @@ -1,5 +1,5 @@ /* - * Copyright (c) 2014 Sebastian Stenzel + * Copyright (c) 2015 Sebastian Stenzel * This file is licensed under the terms of the MIT license. * See the LICENSE.txt file for more info. * @@ -7,376 +7,150 @@ * Sebastian Stenzel - initial API and implementation * */ - + .root { -fx-font-family: 'Segoe UI Semibold'; -fx-font-smoothing-type: lcd; - -fx-font-size: 12.0; - - /*************************************************************************** - * * - * The main color palette from which the rest of the colors are derived. * - * * - **************************************************************************/ - - -fx-base: #EAEAEA; - -fx-background: #F0F0F0; - - /* Used for the inside of text boxes, password boxes, lists, trees, and - * tables. See also -fx-text-inner-color, which should be used as the - * -fx-text-fill value for text painted on top of backgrounds colored - * with -fx-control-inner-background. - */ - -fx-control-inner-background: #FFFFFF; - - /* One of these colors will be chosen based upon a ladder calculation - * that uses the brightness of a background color. Instead of using these - * colors directly as -fx-text-fill values, the sections in this file should - * use a derived color to match the background in use. See also: - * - * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color - * -fx-text-background-color for text on top of -fx-background - * -fx-text-inner-color for text on top of -fx-control-inner-color - * -fx-selection-bar-text for text on top of -fx-selection-bar - */ - -fx-dark-text-color: black; - -fx-mid-text-color: #8B8B8B; - -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: #3399FF; - - /* 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: #3399FF; - - /* The color that is used in styling controls. The default value is based - * on -fx-base, but is changed by pseudoclasses to change the base color. - * For example, the "hover" pseudoclass will typically set -fx-color to - * -fx-hover-base (see below) and the "armed" pseudoclass will typically - * set -fx-color to -fx-pressed-base. - */ - -fx-color: -fx-base; - - /* The opacity level to use for the "disabled" pseudoclass. - */ - -fx-disabled-opacity: 0.6; - - /* Chart Color Palette */ - CHART_COLOR_1: #A1CD5f; - CHART_COLOR_2: #C75050; - CHART_COLOR_3: #3399FF; - CHART_COLOR_4: #FAEA77; - CHART_COLOR_5: #FA9E78; - CHART_COLOR_6: #F47BF8; - CHART_COLOR_7: #c84164; - CHART_COLOR_8: #888888; - - /*************************************************************************** - * * - * Colors that are derived from the main color palette. * - * * - **************************************************************************/ - - /* The color to use for -fx-text-fill when text is to be painted on top of - * a background filled with the -fx-background color. - */ - -fx-text-background-color: -fx-dark-text-color; - - /* A little darker than -fx-color and used to draw boxes around objects such - * as progress bars, scroll bars, scroll panes, trees, tables, and lists. - */ - -fx-box-border: #ACACAC; - - /* Darker than -fx-background and used to draw boxes around text boxes and - * password boxes. - */ - -fx-text-box-border: #ACACAC; - - /* A gradient that goes from a little darker than -fx-color on the top to - * even more darker than -fx-color on the bottom. Typically is the second - * color in the -fx-background-color list as the small thin border around - * a control. It is typically the same size as the control (i.e., insets - * are 0). - */ - -fx-outer-border: derive(-fx-color,-23%); - - /* A gradient that goes from a bit lighter than -fx-color on the top to - * a little darker at the bottom. Typically is the third color in the - * -fx-background-color list as a thin highlight inside the outer border. - * Insets are typically 1. - */ - -fx-inner-border: linear-gradient(to bottom, derive(-fx-color,75%), derive(-fx-color,2%)); - - /* A gradient that goes from a little lighter than -fx-color at the top to - * a little darker than -fx-color at the bottom and is used to fill the - * body of many controls such as buttons. Typically is the fourth color - * in the -fx-background-color list and represents main body of the control. - * Insets are typically 2. - */ - -fx-body-color: linear-gradient(to bottom, derive(-fx-color,10%) ,derive(-fx-color,-6%)); - - /* The color to use as -fx-text-fill when painting text on top of - * backgrounds filled with -fx-base, -fx-color, and -fx-body-color. - */ - -fx-text-base-color: -fx-dark-text-color; - - /* The color to use as -fx-text-fill when painting text on top of - * backgrounds filled with -fx-control-inner-background. - */ - -fx-text-inner-color: -fx-dark-text-color; - - /* Background for items in list like things such as menus, lists, trees, - * and tables. - * - * TODO: it seems like this should be based upon -fx-accent and we should - * remove the setting -fx-background in all the sections that use - * -fx-selection-bar. - */ - -fx-selection-bar: #3399FF; - - /* The color to use as -fx-text-fill when painting text on top of - * backgrounds filled with -fx-selection-bar. - * - * TODO: it seems like this should be derived from -fx-selection-bar. - */ - -fx-selection-bar-text: -fx-light-text-color; - - /* These are needed for Popup */ - -fx-background-color: inherit; - -fx-background-radius: inherit; - -fx-background-insets: inherit; - -fx-padding: inherit; - - -fx-cell-focus-inner-border: -fx-selection-bar; - - /*************************************************************************** - * * - * Set the default background color for the scene * - * * - **************************************************************************/ - - -fx-background-color: -fx-background; + -fx-font-size: 12px; + + COLOR_TEXT: #000; + COLOR_HYPERLINK: #3399FF; + COLOR_BORDER: #ACACAC; + COLOR_BORDER_FOCUS: #3399FF; + COLOR_CONTROL_BASE: #EAEAEA; + COLOR_BACKGROUND: #F0F0F0; + + COLOR_CHART_GREEN: #A1CD5f; + COLOR_CHART_RED: #C75050; + + -fx-background-color: COLOR_BACKGROUND; + -fx-text-fill: COLOR_TEXT; } -/******************************************************************************* - * * - * Common Styles * - * * - * These are styles that give a standard look to a whole range of controls * - * * - ******************************************************************************/ +/**************************************************************************** + * * + * Labels * + * * + ****************************************************************************/ -/* ==== BUTTON LIKE THINGS ============================================== */ +.label { + -fx-text-fill: COLOR_TEXT; +} + +/**************************************************************************** + * * + * Hyperlinks * + * * + ****************************************************************************/ + +.hyperlink { + -fx-cursor: hand; + -fx-text-fill: COLOR_HYPERLINK; +} + +.hyperlink:hover { + -fx-underline: true; +} + +/**************************************************************************** + * * + * Buttons * + * * + ****************************************************************************/ .button, -.toggle-button, -.menu-button, -.choice-box, -.color-picker.split-button > .color-picker-label, -.combo-box-base, -.combo-box-base > .arrow-button { - -fx-background-color: -fx-box-border, linear-gradient(to bottom, #F0F0F0 0%, #E5E5E5 100%); +.toggle-button { + -fx-background-color: COLOR_BORDER, linear-gradient(to bottom, #F0F0F0 0%, #E5E5E5 100%); -fx-background-insets: 0, 1; -fx-background-radius: 0, 0; -fx-padding: 0.1em 0.6em 0.1em 0.6em; - -fx-text-fill: -fx-dark-text-color; + -fx-text-fill: COLOR_TEXT; -fx-alignment: CENTER; -fx-border-color: transparent; -fx-border-insets: 2px; } -.button:hover, -.toggle-button:hover, -.menu-button:hover, -.split-menu-button > .label:hover, -.split-menu-button > .arrow-button:hover, -.slider .thumb:hover, -.choice-box:hover, -.color-picker.split-button > .arrow-button:hover, -.color-picker.split-button > .color-picker-label:hover, -.combo-box-base:hover, -.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover { - -fx-color: -fx-base; + +.button:default { + -fx-background-color: COLOR_BORDER_FOCUS, linear-gradient(to bottom, #F0F0F0 0%, #E5E5E5 100%); } + +.button:disabled, +.button:default:disabled { + -fx-background-color: linear-gradient(to bottom, #D2D2D2 0%, #C4C4C4 100%), #F2F2F2; + -fx-text-fill: #8B8B8B; +} + .button:armed, .button:default:armed, -.toggle-button:armed, -.menu-button:armed, -.split-menu-button:armed > .label, -.split-menu-button > .arrow-button:pressed, -.split-menu-button:showing > .arrow-button, -.slider .thumb:pressed, -.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:pressed { - -fx-background-color: -fx-focus-color, linear-gradient(to bottom, #DAECFC 0%, #C4E0FC 100%); - +.toggle-button:armed { + -fx-background-color: COLOR_BORDER_FOCUS, linear-gradient(to bottom, #DAECFC 0%, #C4E0FC 100%); } + .button:focused, .toggle-button:focused, -.menu-button:focused, -.choice-box:focused, -.color-picker.split-button:focused > .color-picker-label { +.toggle-button:focused { -fx-border-color: black; -fx-border-insets: 2px; -fx-border-style: dotted inside; } -/* ==== DISABLED THINGS ================================================= */ +/**************************************************************************** + * * + * Text Fields * + * * + ****************************************************************************/ -.button:disabled, -.toggle-button:disabled, -.hyperlink:disabled, -.menu-button:disabled, -.split-menu-button:disabled, -.slider:disabled, -.scroll-pane:disabled, -.progress-bar:disabled, -.progress-indicator:disabled, -.text-input:disabled, -.choice-box:disabled, -.combo-box-base:disabled, -.list-view:disabled, -.tree-view:disabled, -.table-view:disabled, -.tree-table-view:disabled, -.tab-pane:disabled, -.tab-pane > .tab-header-area > .headers-region > .tab:disabled { - -fx-background-color: linear-gradient(to bottom, #D2D2D2 0%, #C4C4C4 100%), #F2F2F2; - -fx-text-fill: -fx-mid-text-color; +.text-input { + -fx-background-color: COLOR_BORDER, #FFF; + -fx-background-insets: 0, 1; + -fx-text-fill: COLOR_TEXT; + -fx-padding: 0.4em; + -fx-cursor: text; +} +.text-input:focused { + -fx-background-color: COLOR_BORDER_FOCUS, #FFF; } -/* ==== MNEMONIC THINGS ================================================= */ - -.button:show-mnemonics .mnemonic-underline, -.toggle-button:show-mnemonics .mnemonic-underline, -.hyperlink:show-mnemonics > .mnemonic-underline, -.split-menu-button:show-mnemonics > .mnemonic-underline, -.menu-button:show-mnemonics > .mnemonic-underline { - -fx-stroke: -fx-text-base-color; -} - -/* ==== ARROWS ========================================================== */ - -.combo-box-base > .arrow-button > .arrow { - -fx-background-color: #606060; - -fx-background-insets: 0; - -fx-padding: 2px 4px 2px 4px; - -fx-shape: "M 0 0 h 7 l -3.5 4 z"; -} - -/* ==== CHOICE BOX LIKE THINGS ========================================== */ - -.combo-box-base { - -fx-padding: 0; -} - -/* ==== BOX LIKE THINGS ================================================= */ - -.scroll-pane, -.split-pane, -.list-view, -.tree-view, -.table-view, -.tree-table-view { - -fx-background-color: -fx-box-border, -fx-control-inner-background; +/**************************************************************************** + * * + * Vault List * + * * + ****************************************************************************/ + +.list-view { + -fx-background-color: COLOR_BORDER, #FFF; -fx-background-insets: 0, 1; -fx-padding: 1; } -/******************************************************************************* - * * - * Label * - * * - ******************************************************************************/ - -.label { - -fx-text-fill: -fx-text-background-color; +.list-view > .virtual-flow > .scroll-bar:vertical{ + -fx-background-insets: 0, 0 0 0 1; + -fx-padding: -1 -1 -1 0; } - -/******************************************************************************* - * * - * Hyperlink * - * * - ******************************************************************************/ - -.hyperlink { - -fx-cursor: hand; - -fx-text-fill: #3399FF; +.list-view > .virtual-flow > .scroll-bar:horizontal{ + -fx-background-insets: 0, 1 0 0 0; + -fx-padding: 0 -1 -1 -1; } -.hyperlink:hover { - -fx-underline: true; +.list-view > .virtual-flow > .corner { + -fx-background-color: COLOR_BORDER, COLOR_CONTROL_BASE; + -fx-background-insets: 0, 1 0 0 1; } - -/******************************************************************************* - * * - * Button & ToggleButton * - * * - ******************************************************************************/ - -/* ==== DEFAULT ========================================================= */ - -.button:default { - -fx-background-color: -fx-focus-color, linear-gradient(to bottom, #F0F0F0 0%, #E5E5E5 100%); +.list-cell { + -fx-background-color: #FFF; + -fx-padding: 0.8em 0.5em 0.8em 0.5em; + -fx-text-fill: COLOR_TEXT; + -fx-opacity: 1; } -.button:default:disabled { - -fx-background-color: linear-gradient(to bottom, #D2D2D2 0%, #C4C4C4 100%), #F2F2F2; - -fx-text-fill: -fx-mid-text-color; +.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused { + -fx-background-color: COLOR_BORDER_FOCUS, #FFF; + -fx-background-insets: 0, 1; } - -/******************************************************************************* - * * - * CheckBox * - * * - ******************************************************************************/ - -/* TODO win L&F */ -.check-box { - -fx-label-padding: 0 0 0 3px; - -fx-text-fill: -fx-text-background-color; +.list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected { + -fx-background-color: #DEDEDE, #F7F7F7; + -fx-background-insets: 0, 1; } -.check-box > .box { - -fx-padding: 1px; - -fx-border-color: -fx-box-border; - -fx-background-color: -fx-control-inner-background; -} -.check-box:hover > .box, -.check-box:armed > .box { - -fx-border-color: -fx-focus-color; -} -.check-box > .box > .mark { - -fx-background-color: transparent; - -fx-padding: 4px; - -fx-shape: "M-1,4, L-1,5.5 L3.5,8.5 L9,0 L9,-1 L7,-1 L3,6 L1,4 Z"; -} -.check-box:selected > .box > .mark { - -fx-background-color: black; -} - -/******************************************************************************* - * * - * ToolBar * - * * - ******************************************************************************/ - -.tool-bar:horizontal { - -fx-background-color: -fx-box-border, -fx-background; - -fx-background-insets: 0; - -fx-padding: 0.4em; - -fx-spacing: 0.2em; - -fx-alignment: CENTER_LEFT; -} - -.tool-bar:horizontal > .container > .separator { - -fx-orientation: vertical; -} - -.tool-bar.list-related-toolbar { - -fx-background-color: transparent; - -fx-padding: 0.1em 0; - -fx-spacing: 0; - -fx-alignment: CENTER_LEFT; +.list-cell:filled:hover { + -fx-background-color: #F7F7F7; } /******************************************************************************* @@ -386,11 +160,11 @@ ******************************************************************************/ .scroll-bar:horizontal, .scroll-bar:vertical { - -fx-background-color: -fx-base; + -fx-background-color: COLOR_CONTROL_BASE; } .scroll-bar:disabled { - -fx-opacity: -fx-disabled-opacity; + -fx-opacity: 0.6; } .scroll-bar > .thumb { -fx-background-color: #CDCDCD; @@ -406,10 +180,7 @@ } .scroll-bar:horizontal > .increment-button, -.scroll-bar:horizontal > .decrement-button { - -fx-padding: 5px 5px; -} - +.scroll-bar:horizontal > .decrement-button, .scroll-bar:vertical > .increment-button, .scroll-bar:vertical > .decrement-button { -fx-padding: 5px 5px; @@ -417,19 +188,15 @@ .scroll-bar > .increment-button, .scroll-bar > .decrement-button { - -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; + -fx-background-color: derive(COLOR_CONTROL_BASE,-23%), linear-gradient(to bottom, derive(COLOR_CONTROL_BASE,75%), derive(COLOR_CONTROL_BASE,2%)), linear-gradient(to bottom, derive(COLOR_CONTROL_BASE,10%) ,derive(COLOR_CONTROL_BASE,-6%)); -fx-background-insets: 0, 1, 2; -fx-color: transparent; -fx-padding: 3px; } .scroll-bar > .increment-button > .increment-arrow, -.scroll-bar > .decrement-button > .decrement-arrow { - -fx-background-color: #606060; -} +.scroll-bar > .decrement-button > .decrement-arrow, .scroll-bar > .increment-button:hover > .increment-arrow, -.scroll-bar > .decrement-button:hover > .decrement-arrow { - -fx-background-color: #606060; -} +.scroll-bar > .decrement-button:hover > .decrement-arrow, .scroll-bar > .increment-button:pressed > .increment-arrow, .scroll-bar > .decrement-button:pressed > .decrement-arrow { -fx-background-color: #606060; @@ -451,124 +218,17 @@ -fx-shape: "M1.457,5.563L0.042,4.149L4,0.193l3.957,3.957L6.543,5.563L4,3.021L1.457,5.563z"; } -/******************************************************************************* - * * - * Separator * - * * - ******************************************************************************/ +/**************************************************************************** + * * + * Vault List Toolbar * + * * + ****************************************************************************/ -.separator:horizontal .line { - -fx-border-color: -fx-text-box-border transparent transparent transparent; - -fx-border-insets: 0, 1 0 0 0; -} -.separator:vertical .line { - -fx-border-color: transparent transparent transparent -fx-text-box-border; - -fx-border-width: 3, 1; - -fx-border-insets: 0, 0 0 0 1; -} - -/******************************************************************************* - * * - * ProgressIndicator * - * * - ******************************************************************************/ -.progress-indicator { - -fx-indeterminate-segment-count: 12; - -fx-spin-enabled: true; -} -.progress-indicator > .determinate-indicator > .indicator { - -fx-background-color: -fx-box-border, - radial-gradient(center 50% 50%, radius 50%, -fx-control-inner-background 70%, derive(-fx-control-inner-background, -9%) 100%), - -fx-control-inner-background; - -fx-background-insets: 0, 1, 5 2 1 2; - -fx-padding: 1; -} -.progress-indicator > .determinate-indicator > .progress { - -fx-background-color: -fx-accent; - -fx-background-insets: 2; - -fx-padding: 1em; /* 9 */ -} -/* TODO: scaling the shape seems to make it disappear */ -.progress-indicator > .determinate-indicator > .tick { - -fx-background-color: white; - -fx-background-insets: 0; - -fx-padding: 0.416667em; /* 5 */ - -fx-shape: "M-0.25,6.083c0.843-0.758,4.583,4.833,5.75,4.833S14.5-1.5,15.917-0.917c1.292,0.532-8.75,17.083-10.5,17.083C3,16.167-1.083,6.833-0.25,6.083z"; - -fx-scale-shape: false; -} -.progress-indicator:indeterminate > .spinner { - -fx-padding: 0.833333em; /* 10 */ -} -.progress-indicator > .percentage { - -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */ - -fx-fill: -fx-text-background-color; -} -.progress-indicator:indeterminate .segment { - -fx-background-color: -fx-accent; -} -.progress-indicator:indeterminate .segment0 { - -fx-shape:"M10,0C9.998,0,9.995,0,9.992,0C9.991,0,9.991,0,9.99,0C9.988,0,9.986,0,9.985,0S9.982,0,9.981,0S9.979,0,9.978,0S9.975,0,9.974,0S9.972,0,9.971,0C9.969,0,9.968,0,9.966,0H9.965c-0.007,0-0.014,0-0.02,0C9.944,0,9.944,0,9.944,0C9.941,0,9.939,0,9.937,0c-0.77,0.007-1.389,0.634-1.384,1.404C8.557,2.176,9.185,2.8,9.956,2.8c0.001,0,0.003,0,0.004,0H10c0.773-0.002,1.4-0.63,1.4-1.404c0-0.77-0.622-1.393-1.392-1.396C10.006,0,10.003,0,10,0L10,0z"; -} -.progress-indicator:indeterminate .segment1 { - -fx-shape:"M5.688,1.156c-0.236,0-0.476,0.06-0.696,0.187C4.98,1.349,4.969,1.356,4.958,1.363c0,0-0.001,0-0.001,0C4.955,1.364,4.954,1.365,4.952,1.366c-0.001,0-0.002,0.001-0.004,0.002c0,0,0,0-0.001,0C4.944,1.371,4.94,1.373,4.936,1.375c0,0,0,0-0.001,0C4.933,1.377,4.931,1.378,4.929,1.38C4.267,1.772,4.046,2.624,4.438,3.288c0.261,0.444,0.73,0.692,1.212,0.692c0.24,0,0.484-0.062,0.706-0.192l0.034-0.02C7.058,3.378,7.283,2.52,6.896,1.851C6.636,1.405,6.168,1.156,5.688,1.156L5.688,1.156z"; -} -.progress-indicator:indeterminate .segment2 { - -fx-shape:"M2.534,4.326c-0.482,0-0.951,0.25-1.209,0.697C1.323,5.027,1.321,5.029,1.32,5.031l0,0C1.319,5.033,1.318,5.034,1.317,5.036S1.315,5.039,1.314,5.04c0,0.001,0,0.002-0.001,0.002C1.312,5.044,1.311,5.046,1.31,5.048c0,0,0,0,0,0.001C1.309,5.051,1.308,5.053,1.307,5.055C1.302,5.063,1.297,5.071,1.292,5.079l0,0C1.291,5.082,1.29,5.084,1.288,5.087c-0.376,0.67-0.141,1.519,0.529,1.898c0.218,0.123,0.456,0.182,0.69,0.182c0.488,0,0.963-0.255,1.222-0.708l0.02-0.035c0.383-0.671,0.149-1.527-0.521-1.912C3.008,4.386,2.769,4.326,2.534,4.326L2.534,4.326z"; -} -.progress-indicator:indeterminate .segment3 { - -fx-shape:"M1.396,8.648c-0.002,0-0.005,0-0.008,0C0.619,8.652-0.001,9.278,0,10.047c0,0.002,0,0.006,0,0.008l0,0c0,0.019,0,0.037,0,0.056c0,0.001,0,0.002,0,0.003s0,0.003,0,0.004c0.01,0.765,0.632,1.378,1.396,1.378c0.005,0,0.01,0,0.015,0c0.773-0.009,1.395-0.642,1.389-1.415v-0.04C2.794,9.27,2.166,8.648,1.396,8.648L1.396,8.648z"; -} -.progress-indicator:indeterminate .segment4 { - -fx-shape:"M2.579,12.955c-0.242,0-0.487,0.062-0.71,0.194c-0.664,0.391-0.885,1.242-0.499,1.906c0.013,0.021,0.025,0.043,0.038,0.063c0.262,0.436,0.724,0.678,1.197,0.678c0.243,0,0.49-0.063,0.714-0.197c0.665-0.396,0.883-1.257,0.489-1.922l-0.02-0.034C3.526,13.201,3.059,12.955,2.579,12.955L2.579,12.955z"; -} -.progress-indicator:indeterminate .segment5 { - -fx-shape:"M5.772,16.09c-0.489,0-0.965,0.257-1.223,0.712c-0.38,0.671-0.146,1.52,0.523,1.901c0.002,0.001,0.004,0.002,0.007,0.004h0c0.004,0.002,0.008,0.004,0.012,0.007c0,0,0,0,0.001,0c0.001,0.001,0.002,0.002,0.004,0.002c0.001,0.001,0.003,0.002,0.004,0.003c0,0,0.001,0,0.001,0.001c0.012,0.006,0.023,0.013,0.035,0.019c0.214,0.119,0.446,0.176,0.675,0.176c0.489,0,0.963-0.258,1.22-0.716c0.377-0.675,0.137-1.529-0.537-1.908l-0.035-0.02C6.242,16.149,6.006,16.09,5.772,16.09L5.772,16.09z"; -} -.progress-indicator:indeterminate .segment6 { - -fx-shape:"M10.14,17.198c-0.006,0-0.013,0-0.02,0h-0.039c-0.773,0.011-1.394,0.646-1.385,1.419c0.008,0.767,0.631,1.382,1.396,1.382c0.003,0,0.006,0,0.009-0.001c0.024,0,0.051,0,0.075-0.001c0.769-0.016,1.38-0.648,1.367-1.418C11.53,17.813,10.904,17.198,10.14,17.198L10.14,17.198z"; -} -.progress-indicator:indeterminate .segment7 { - -fx-shape:"M14.433,15.97c-0.245,0-0.494,0.064-0.72,0.2l-0.034,0.021c-0.663,0.397-0.88,1.258-0.483,1.922c0.261,0.439,0.725,0.683,1.2,0.683c0.24,0,0.484-0.062,0.707-0.194c0.022-0.013,0.044-0.025,0.065-0.039c0.656-0.399,0.866-1.254,0.469-1.913C15.373,16.212,14.909,15.97,14.433,15.97L14.433,15.97z"; -} -.progress-indicator:indeterminate .segment8 { - -fx-shape:"M17.539,12.748c-0.493,0-0.973,0.261-1.229,0.723l-0.02,0.034c-0.376,0.676-0.133,1.53,0.542,1.907c0.216,0.121,0.45,0.178,0.681,0.178c0.487,0,0.96-0.256,1.217-0.71c0.003-0.006,0.007-0.012,0.01-0.019c0.007-0.013,0.015-0.025,0.021-0.038l0,0c0.002-0.003,0.003-0.005,0.004-0.008c0.369-0.675,0.124-1.521-0.55-1.893C18.001,12.805,17.769,12.748,17.539,12.748L17.539,12.748z"; -} -.progress-indicator:indeterminate .segment9 { - -fx-shape:"M18.603,8.408c-0.011,0-0.021,0-0.031,0c-0.773,0.018-1.388,0.657-1.373,1.431l0.001,0.04c0.015,0.765,0.641,1.377,1.403,1.377c0.008,0,0.016,0,0.023,0c0.77-0.013,1.383-0.646,1.373-1.414c0-0.003,0-0.006,0-0.009l0,0c-0.001-0.019-0.001-0.037-0.001-0.055c0-0.001,0-0.001-0.001-0.002c0-0.002,0-0.004,0-0.006C19.979,9.012,19.358,8.408,18.603,8.408L18.603,8.408z"; -} -.progress-indicator:indeterminate .segment10 { - -fx-shape:"M17.345,4.121c-0.248,0-0.5,0.066-0.728,0.205c-0.659,0.403-0.869,1.266-0.468,1.927l0.021,0.034c0.265,0.435,0.728,0.675,1.202,0.675c0.247,0,0.497-0.065,0.724-0.202c0.659-0.397,0.871-1.252,0.477-1.912c-0.007-0.011-0.013-0.021-0.02-0.032c-0.001-0.002-0.002-0.003-0.002-0.004c-0.001,0-0.001-0.001-0.001-0.002c-0.004-0.005-0.008-0.011-0.011-0.017c0-0.001,0-0.001-0.001-0.001c-0.001-0.002-0.002-0.004-0.004-0.007C18.271,4.358,17.813,4.121,17.345,4.121L17.345,4.121z"; -} -.progress-indicator:indeterminate .segment11 { - -fx-shape:"M14.104,1.039c-0.494,0-0.974,0.264-1.227,0.729c-0.37,0.679-0.12,1.531,0.559,1.903l0.034,0.019c0.214,0.117,0.445,0.173,0.673,0.173c0.495,0,0.976-0.262,1.231-0.726c0.371-0.674,0.129-1.519-0.542-1.894c-0.012-0.006-0.024-0.013-0.036-0.02c-0.007-0.004-0.014-0.008-0.021-0.012c-0.003-0.001-0.006-0.003-0.009-0.005C14.556,1.094,14.329,1.039,14.104,1.039L14.104,1.039z"; -} - -/******************************************************************************* - * * - * Text COMMON * - * * - ******************************************************************************/ - -.text-input { - -fx-text-fill: -fx-dark-text-color; - -fx-highlight-fill: derive(-fx-control-inner-background,-20%); - -fx-highlight-text-fill: -fx-text-inner-color; - -fx-prompt-text-fill: -fx-control-inner-background; - -fx-border-color: -fx-text-box-border; - -fx-border-width: 1px; - -fx-background-color: #FFFFFF; - -fx-background-insets: 0; - -fx-background-radius: 0; - -fx-cursor: text; - -fx-padding: 2px; -} -.text-input:focused { - -fx-highlight-fill: -fx-accent; - -fx-border-color: -fx-focus-color; - -fx-border-width: 1px; - -fx-background-color: -fx-focus-color, #FFFFFF; - -fx-background-insets: 0, 1; - -fx-prompt-text-fill: -fx-control-inner-background; +.tool-bar.list-related-toolbar { + -fx-background-color: transparent; + -fx-padding: 0.1em 0 0.1em 0; + -fx-spacing: 0; + -fx-alignment: CENTER_LEFT; } /******************************************************************************* @@ -578,7 +238,7 @@ ******************************************************************************/ .context-menu { - -fx-background-color: derive(-fx-background, -30%), -fx-background; + -fx-background-color: derive(COLOR_BACKGROUND, -30%), COLOR_BACKGROUND; -fx-background-insets: 0, 1; -fx-padding: 1px; -fx-effect: dropshadow(three-pass-box, rgba(0.0,0.0,0.0,0.2), 2.0, 0.0, 3.0, 3.0); @@ -586,13 +246,6 @@ .context-menu > .separator { -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */ } - -/******************************************************************************* - * * - * MenuItem * - * * - ******************************************************************************/ - .menu-item { -fx-background-color: transparent; -fx-background-insets:0.0; @@ -600,121 +253,19 @@ -fx-border-width: 0.0 0.0 0.0 0.0; -fx-border-color:transparent; } -.menu-item > .left-container { - -fx-padding: 0.458em 0.791em 0.458em 0.458em; -} -.menu-item > .graphic-container { - -fx-padding: 0em 0.333em 0em 0em; -} .menu-item >.label { -fx-padding: 0em 0.5em 0em 0em; - -fx-text-fill: -fx-text-base-color; + -fx-text-fill: COLOR_TEXT; } .menu-item:disabled > .label { - -fx-opacity: -fx-disabled-opacity; + -fx-opacity: 0.6; } .menu-item:focused { - -fx-background-color: -fx-focus-color, linear-gradient(to bottom, #DAECFC 0%, #C4E0FC 100%); + -fx-background-color: COLOR_BORDER_FOCUS, linear-gradient(to bottom, #DAECFC 0%, #C4E0FC 100%); -fx-background-insets: 0, 1; } -.menu-item > .right-container { - -fx-padding: 0em 0em 0em 0.5em; -} -.menu-item:show-mnemonics > .mnemonic-underline { - -fx-stroke: -fx-text-fill; -} -.menu > .right-container > .arrow { - -fx-padding: 0.458em 0.167em 0.458em 0.167em; /* 4.5 2 4.5 2 */ - -fx-background-color: -fx-color; - -fx-shape: "M0,-4L4,0L0,4Z"; - -fx-scale-shape: false; -} -.menu:selected > .right-container > .arrow { - -fx-background-color: white; -} .menu-item:disabled { - -fx-opacity: -fx-disabled-opacity; -} - -/******************************************************************************* - * * - * ComboBox * - * * - ******************************************************************************/ - -/* Customie the ListCell that appears in the ComboBox button itself */ -.combo-box > .list-cell { - -fx-background: transparent; - -fx-background-color: transparent; - -fx-text-fill: -fx-text-base-color; - -fx-padding: 0.1em; -} -.combo-box-base > .arrow-button { - -fx-background-color: transparent; - -fx-padding: 0 0.1em 0 0.1em; -} - -.combo-box-popup > .list-view { - -fx-background-color: #606060, white; - -fx-background-insets: 0, 1; - -fx-effect: dropshadow(three-pass-box, rgba(0.0,0.0,0.0,0.2), 2.0, 0.0, 3.0, 3.0); -} -.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell { - -fx-background-color: transparent; - -fx-padding:0.1em; - -fx-border-color:transparent; -} - -.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, -.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { - -fx-background-color: -fx-focus-color, linear-gradient(to bottom, #DAECFC 0%, #C4E0FC 100%); - -fx-background-insets: 0, 1; -} - -/******************************************************************************* - * * - * SplitPane * - * * - ******************************************************************************/ - -.split-pane > .split-pane-divider { - -fx-padding: 0 0.25em 0 0.25em; /* 0 3 0 3 */ -} - -/******************************************************************************* - * * - * ListView and ListCell * - * * - ******************************************************************************/ - -.list-view > .virtual-flow > .scroll-bar:vertical{ - -fx-background-insets: 0, 0 0 0 1; - -fx-padding: -1 -1 -1 0; -} -.list-view > .virtual-flow > .scroll-bar:horizontal{ - -fx-background-insets: 0, 1 0 0 0; - -fx-padding: 0 -1 -1 -1; -} -.list-view > .virtual-flow > .corner { - -fx-background-color: -fx-box-border, -fx-base; - -fx-background-insets: 0, 1 0 0 1; -} -.list-cell { - -fx-background-color: -fx-control-inner-background; - -fx-padding: 0.8em 0.5em 0.8em 0.5em; - -fx-text-fill: -fx-text-inner-color; - -fx-opacity: 1; -} -.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused { - -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background; - -fx-background-insets: 0, 1, 2; -} -.list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected { - -fx-background-color: #DEDEDE, #F7F7F7; - -fx-background-insets: 0, 1; -} -.list-cell:filled:hover { - -fx-background-color: #F7F7F7; + -fx-opacity: 0.6; } /******************************************************************************* @@ -724,189 +275,161 @@ ******************************************************************************/ .tooltip { - -fx-background-color: -fx-background; + -fx-background-color: COLOR_BACKGROUND; -fx-padding: 0.2em 0.4em 0.2em 0.4em; -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 2, 0, 0, 0); - -fx-font-size: 0.8em; + -fx-font-size: 0.9em; } /******************************************************************************* * * - * Charts * + * CheckBox * * * ******************************************************************************/ -.chart { - -fx-padding: 5px; +.check-box { + -fx-label-padding: 0 0 0 3px; + -fx-text-fill: COLOR_TEXT; } -.chart-content { - -fx-padding: 10px; +.check-box > .box { + -fx-padding: 1px; + -fx-border-color: COLOR_BORDER; + -fx-background-color: #FFF; } -.chart-title { - -fx-font-size: 1.4em; +.check-box:hover > .box, +.check-box:armed > .box { + -fx-border-color: COLOR_BORDER_FOCUS; } +.check-box > .box > .mark { + -fx-background-color: transparent; + -fx-padding: 4px; + -fx-shape: "M-1,4, L-1,5.5 L3.5,8.5 L9,0 L9,-1 L7,-1 L3,6 L1,4 Z"; +} +.check-box:selected > .box > .mark { + -fx-background-color: black; +} + +/**************************************************************************** + * * + * ProgressIndicator * + * * + ****************************************************************************/ + +.progress-indicator { + -fx-indeterminate-segment-count: 12; + -fx-spin-enabled: true; +} + +.progress-indicator:indeterminate > .spinner { + -fx-padding: 0.083333em; +} + +.progress-indicator:indeterminate .segment { + -fx-background-color: rgb(95.0, 95.0, 98.0), rgb(122.0, 122.0, 125.0); + -fx-background-insets:0.0, 0.5; +} +.progress-indicator:indeterminate .segment0 { + -fx-shape:"m 14.321262,6.5816808 c -0.824944,0.3797564 -0.10368,1.8484772 0.718513,1.3544717 L 18.786514,5.9486042 C 19.644992,5.4932031 18.92648,4.1387308 18.068001,4.5941315 z"; +} +.progress-indicator:indeterminate .segment1 { + -fx-shape:"m 15.372451,9.2445322 c -0.906719,-0.051108 -0.957826,1.5843588 0,1.5332498 l 4.241273,0 c 0.97179,0 0.97179,-1.5332498 0,-1.5332498 z"; +} +.progress-indicator:indeterminate .segment2 { + -fx-shape:"m 14.423504,13.443113 c -0.824945,-0.379757 -0.10368,-1.848478 0.718512,-1.354472 l 3.746739,1.987548 c 0.858478,0.455401 0.139967,1.809873 -0.718512,1.354473 z"; +} +.progress-indicator:indeterminate .segment3 { + -fx-shape:"m 12.10997,15.070611 c -0.49762,-0.759687 0.893182,-1.621681 1.327834,-0.766626 l 2.120636,3.673051 c 0.485895,0.841595 -0.841938,1.60822 -1.327833,0.766625 z"; +} +.progress-indicator:indeterminate .segment4 { + -fx-shape:"m 9.2224559,19.539943 c -0.051108,0.906718 1.5843581,0.957826 1.5332501,0 l 0,-4.241273 c 0,-0.97179 -1.5332501,-0.97179 -1.5332501,0 z"; +} +.progress-indicator:indeterminate .segment5 { + -fx-shape:"M 8.0465401,15.070611 C 8.5441601,14.310924 7.1533584,13.44893 6.7187068,14.303985 l -2.1206366,3.673051 c -0.485895,0.841595 0.8419383,1.60822 1.3278333,0.766625 z"; +} +.progress-indicator:indeterminate .segment6 { + -fx-shape:"M 5.7330066,13.443113 C 6.5579512,13.063356 5.8366865,11.594635 5.0144939,12.088641 L 1.2677551,14.076189 C 0.409277,14.53159 1.1277888,15.886062 1.9862674,15.430662 z"; +} +.progress-indicator:indeterminate .segment7 { + -fx-shape:"m 0.42171041,9.2083842 c -0.90671825,-0.051108 -0.95782608,1.5843588 0,1.5332498 l 4.24127319,0 c 0.9717899,0 0.9717899,-1.5332498 0,-1.5332498 z"; +} +.progress-indicator:indeterminate .segment8 { + -fx-shape:"M 5.7330066,6.5305598 C 6.5579512,6.9103162 5.8366865,8.3790371 5.0144939,7.8850315 L 1.2677551,5.8974832 C 0.409277,5.4420823 1.1277888,4.0876101 1.9862674,4.5430105 z"; +} +.progress-indicator:indeterminate .segment9 { + -fx-shape:"M 8.0465401,4.9030617 C 8.5441601,5.6627485 7.1533584,6.5247425 6.7187068,5.6696872 L 4.5980702,1.9966363 C 4.1121752,1.1550418 5.4400085,0.38841683 5.9259035,1.2300114 z"; +} +.progress-indicator:indeterminate .segment10 { + -fx-shape:"m 9.2224559,4.62535 c -0.051108,0.9067177 1.5843581,0.957826 1.5332501,0 l 0,-4.24127319 c 0,-0.9717899 -1.5332501,-0.9717899 -1.5332501,0 z"; +} +.progress-indicator:indeterminate .segment11 { + -fx-shape:"m 12.007729,4.9541827 c -0.49762,0.7596865 0.893181,1.6216808 1.327833,0.7666252 L 15.456199,2.0477574 C 15.942094,1.2061627 14.61426,0.43953765 14.128365,1.2811324 z"; +} + +/***************************************************************************** + * * + * I/O Chart * + * * + *****************************************************************************/ + + .chart { + -fx-padding: 5px; +} + +/* legend */ + .chart-legend { - -fx-background-color: linear-gradient(to bottom, derive(-fx-background, -10%), derive(-fx-background, -5%)), - linear-gradient(from 0px 0px to 0px 5px, derive(-fx-background, -5%), derive(-fx-background, 20%)); - -fx-background-insets: 0,1; - -fx-background-radius: 6,5; - -fx-padding: 6px; + -fx-text-fill: COLOR_TEXT; + -fx-background-color: transparent; + -fx-padding: 0.4em; } +.chart-line-symbol { + -fx-background-radius: 5px; + -fx-padding: 5px; +} +.default-color0.chart-line-symbol { -fx-background-color: COLOR_CHART_GREEN; } +.default-color1.chart-line-symbol { -fx-background-color: COLOR_CHART_RED; } -/******************************************************************************* - * * - * Axis * - * * - ******************************************************************************/ +/* 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%); + -fx-tick-label-font-size: 0.8em; + -fx-tick-label-fill: COLOR_TEXT; } -.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-label { + -fx-text-fill: COLOR_TEXT; + -fx-padding: 0 0 0.8em 0; } .axis:left { - -fx-border-color: transparent AXIS_COLOR transparent transparent; + -fx-border-color: transparent COLOR_BORDER transparent transparent; } .axis-tick-mark, .axis-minor-tick-mark { - -fx-fill: null; - -fx-stroke: AXIS_COLOR; + -fx-fill: null; + -fx-stroke: #CCC; } -/******************************************************************************* - * * - * ChartPlot * - * * - ******************************************************************************/ +/* content */ -.chart-vertical-grid-lines { - -fx-stroke: derive(-fx-background,-10%); - -fx-stroke-dash-array: 0.25em, 0.25em; +.chart-content { + -fx-padding: 10px; } .chart-horizontal-grid-lines { - -fx-stroke: derive(-fx-background,-10%); + -fx-stroke: COLOR_BORDER; } .chart-alternative-column-fill { - -fx-fill: null; - -fx-stroke: null; + -fx-fill: null; + -fx-stroke: null; } .chart-alternative-row-fill { - -fx-fill: null; - -fx-stroke: null; + -fx-fill: null; + -fx-stroke: null; } .chart-vertical-zero-line, .chart-horizontal-zero-line { - -fx-stroke: derive(-fx-text-background-color, 40%); -} - -/******************************************************************************* - * * - * LineChart * - * * - ******************************************************************************/ - -.chart-line-symbol { - -fx-background-color: #f9d900, white; - -fx-background-insets: 0, 2; - -fx-background-radius: 5px; - -fx-padding: 5px; + -fx-stroke: COLOR_BORDER; } .chart-series-line { - -fx-stroke: #f9d900; - -fx-stroke-width: 3px; - /*-fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.3) , 8, 0.0 , 0 , 3 );*/ + -fx-stroke-width: 2px; } -.default-color0.chart-line-symbol { -fx-background-color: CHART_COLOR_1, white; } -.default-color1.chart-line-symbol { -fx-background-color: CHART_COLOR_2, white; } -.default-color2.chart-line-symbol { -fx-background-color: CHART_COLOR_3, white; } -.default-color3.chart-line-symbol { -fx-background-color: CHART_COLOR_4, white; } -.default-color4.chart-line-symbol { -fx-background-color: CHART_COLOR_5, white; } -.default-color5.chart-line-symbol { -fx-background-color: CHART_COLOR_6, white; } -.default-color6.chart-line-symbol { -fx-background-color: CHART_COLOR_7, white; } -.default-color7.chart-line-symbol { -fx-background-color: CHART_COLOR_8, white; } -.default-color0.chart-series-line { -fx-stroke: CHART_COLOR_1; } -.default-color1.chart-series-line { -fx-stroke: CHART_COLOR_2; } -.default-color2.chart-series-line { -fx-stroke: CHART_COLOR_3; } -.default-color3.chart-series-line { -fx-stroke: CHART_COLOR_4; } -.default-color4.chart-series-line { -fx-stroke: CHART_COLOR_5; } -.default-color5.chart-series-line { -fx-stroke: CHART_COLOR_6; } -.default-color6.chart-series-line { -fx-stroke: CHART_COLOR_7; } -.default-color7.chart-series-line { -fx-stroke: CHART_COLOR_8; } - -/******************************************************************************* - * * - * Combinations * - * * - * This section is for special handling of when one control is nested inside * - * another control. There are many cases where we would end up with ugly * - * double borders that are fixed here. * - * * - ******************************************************************************/ - -.split-pane > * > .table-view { -fx-padding: 0px; } -.split-pane > * > .list-view { -fx-padding: 0px; } -.split-pane > * > .tree-view { -fx-padding: 0px; } -.split-pane > * > .scroll-pane { -fx-padding: 0px; } -.split-pane > * > .split-pane { - -fx-background-insets: 0, 0; - -fx-padding: 0; - } - - /* ############################################################################ - # Workaround for RT-27627 # - ############################################################################ */ - -.choice-box > .open-button > .arrow { doh: true; } -.split-menu-button:openvertically > .arrow-button > .arrow { doh: true; } -.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow { doh: true; } -.tree-table-view { doh: true; } -.tree-table-view:focused { doh: true; } -.tree-table-view > .virtual-flow > .scroll-bar:vertical { doh: true; } -.tree-table-view > .virtual-flow > .scroll-bar:horizontal { doh: true; } -.tree-table-view > .virtual-flow > .corner { doh: true; } -.tree-table-row-cell:focused { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected { doh: true; } -.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover{ doh: true; } -.tree-table-row-cell:filled:selected:focused { doh: true; } -.tree-table-row-cell:filled:selected { doh: true; } -.tree-table-row-cell:selected:disabled { doh: true; } -.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover { doh: true; } -.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { doh: true; } -.tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible { doh: true; } -.tree-table-view:constrained-resize > .column-header:last-visible { doh: true; } -.tree-table-view:constrained-resize .filler { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled .tree-table-cell:focused:selected { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; } -.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover:selected { doh: true; } -.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:selected:hover{ doh: true; } -.tree-table-row-cell:filled > .tree-table-cell:selected:focused { doh: true; } -.tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; } -.tree-table-cell:selected:disabled { doh: true; } -.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover { doh: true; } -.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover { doh: true; } -.tree-table-view .column-resize-line { doh: true; } -.tree-table-view > .column-header-background { doh: true; } -.tree-table-view .column-header { doh: true; } -.tree-table-view .filler { doh: true; } -.tree-table-view .column-header .sort-order{ doh: true; } -.tree-table-view > .column-header-background > .show-hide-columns-button{ doh: true; } -.tree-table-view .show-hide-column-image { doh: true; } -.tree-table-view .column-drag-header { doh: true; } -.tree-table-view .column-overlay { doh: true; } -.tree-table-view /*> column-header-background > nested-column-header >*/ .arrow { doh: true; } -.tree-table-view .empty-table { doh: true; } -.axis-minor-tick-mark { doh: true; } -.chart-horizontal-zero-line { doh: true; } -.stacked-bar-chart:horizontal .chart-bar { doh: true; } \ No newline at end of file +.default-color0.chart-series-line { -fx-stroke: COLOR_CHART_GREEN; } +.default-color1.chart-series-line { -fx-stroke: COLOR_CHART_RED; } \ No newline at end of file