801 lines
24 KiB
CSS
801 lines
24 KiB
CSS
/*
|
|
* The MIT License (MIT)
|
|
*
|
|
* Copyright (c) 2015 - AGIX | Innovative Engineering
|
|
*
|
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
* of this software and associated documentation files (the "Software"), to deal
|
|
* in the Software without restriction, including without limitation the rights
|
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
* copies of the Software, and to permit persons to whom the Software is
|
|
* furnished to do so, subject to the following conditions:
|
|
*
|
|
* The above copyright notice and this permission notice shall be included in all
|
|
* copies or substantial portions of the Software.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
* SOFTWARE.
|
|
*
|
|
*/
|
|
|
|
/*
|
|
* This is a Material Design CSS for JavaFX
|
|
*/
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Root *
|
|
* *
|
|
******************************************************************************/
|
|
.root {
|
|
/* Swatch Colors - Blue*/
|
|
-swatch-100: #BBDEFB;
|
|
-swatch-200: #90CAF9;
|
|
-swatch-300: #64BEF6;
|
|
-swatch-400: #42A5F5;
|
|
-swatch-500: #2196F3;
|
|
/*default text */
|
|
-fx-text-base-color: rgb(100.0, 100.0, 100.0);
|
|
-fx-text-button-normal: -swatch-500;
|
|
-fx-text-button-colored: rgb(255.0, 255.0, 255.0);
|
|
-fx-text-button-text: rgb(100.0, 100.0, 100.0);
|
|
-fx-text-title-color: rgb(45.0, 45.0, 45.0);
|
|
-fx-text-subtitle-color: rgb(65.0, 65.0, 65.0);
|
|
-fx-text-control-title-color: rgb(130.0, 130.0, 130.0);
|
|
-fx-text-fill: -fx-text-base-color;
|
|
-dark: rgb(47.0, 52.0, 57.0);
|
|
-fx-background-color: -dark;
|
|
/*default font */
|
|
-fx-font-family: 'Roboto Medium';
|
|
-fx-font-size: 14.0px;
|
|
-fx-disabled-opacity: 0.6;
|
|
/*default colors */
|
|
-swatch-grey: rgb(200.0, 200.0, 200.0);
|
|
-swatch-dark-grey: rgb(150.0, 150.0, 150.0);
|
|
-swatch-light-grey: rgb(230.0, 230.0, 230.0);
|
|
-swatch-toolbar: rgb(245.0, 245.0, 245.0);
|
|
-swatch-toolbar-selected: rgb(215.0, 215.0, 215.0);
|
|
/*
|
|
Modena colors
|
|
*/
|
|
-fx-dark-text-color: white; /* Text color when selected*/
|
|
-fx-mid-text-color: -fx-text-base-color;
|
|
-fx-light-text-color: -swatch-light-grey;
|
|
-fx-body-color: white;
|
|
/* 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: -swatch-400;
|
|
-fx-faint-focus-color: -swatch-200;
|
|
/* A bright blue for highlighting/accenting objects. For example: selected
|
|
* text; selected items in menus, lists, trees, and tables; progress bars */
|
|
-fx-accent: -swatch-400;
|
|
-fx-dark-text-color: white;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Material Design - Cards *
|
|
* *
|
|
******************************************************************************/
|
|
.card {
|
|
-fx-background-color: rgb(255.0, 255.0, 255.0);
|
|
-fx-background-radius: 4.0;
|
|
-fx-effect: dropshadow(gaussian, rgb(0.0, 0.0, 0.0, 0.15), 6.0, 0.7, 0.0,
|
|
1.5);
|
|
-fx-padding: 16 16 16 16;
|
|
}
|
|
|
|
.card-title {
|
|
-fx-font-size: 20.0px;
|
|
-fx-padding: 5 0 5 0;
|
|
}
|
|
|
|
.card-title .text {
|
|
-fx-fill: -fx-text-title-color;
|
|
}
|
|
|
|
.card-subtitle {
|
|
-fx-font-size: 16.0px;
|
|
-fx-padding: 5 0 5 0;
|
|
}
|
|
|
|
.card-subtitle .text {
|
|
-fx-fill: -fx-text-subtitle-color;
|
|
}
|
|
|
|
.control-label {
|
|
-fx-font-size: 12.0px;
|
|
-fx-padding: 16 0 0 0;
|
|
}
|
|
|
|
.control-label .text {
|
|
-fx-fill: -fx-text-control-title-color;
|
|
}
|
|
|
|
.card-button {
|
|
-fx-effect: null;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Button & ToggleButton *
|
|
* *
|
|
******************************************************************************/
|
|
.button-raised {
|
|
-fx-effect: dropshadow(gaussian, rgb(0.0, 0.0, 0.0, 0.30), 6.0, 0.3, 0,
|
|
1);
|
|
-fx-background-color: rgb(250, 250, 250);
|
|
}
|
|
|
|
.button-flat {
|
|
-fx-effect: null;
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
.toggle-button, .button {
|
|
-fx-text-fill: -fx-text-button-normal;
|
|
-fx-font-family: 'Roboto';
|
|
-fx-font-weight: bold;
|
|
-fx-background-insets: 0.0;
|
|
-fx-background-radius: 4.0;
|
|
-fx-padding: 0.7em;
|
|
-fx-alignment: CENTER;
|
|
}
|
|
|
|
.button-raised .button .text, .button-flat .button .text {
|
|
-fx-text-weight: Bold;
|
|
}
|
|
|
|
.button:default {
|
|
-fx-background-color: -swatch-500;
|
|
-fx-text-fill: -fx-text-button-colored;
|
|
}
|
|
|
|
.toggle-button:focused, .button:focused, .button:default:focused {
|
|
-fx-background-color: -swatch-light-grey;
|
|
}
|
|
|
|
.toggle-button:focused:selected {
|
|
-fx-background-color: derive(-swatch-500, 50.0%),
|
|
derive(-swatch-500, -20.0%);
|
|
-fx-background-insets: 0.0, 0.2em;
|
|
-fx-text-fill: -fx-text-button-colored;
|
|
}
|
|
|
|
.toggle-button:armed, .toggle-button:selected, .button:armed, .button:default:armed
|
|
{
|
|
-fx-background-color: -swatch-grey;
|
|
-fx-text-fill: -fx-text-button-colored;
|
|
}
|
|
|
|
.icon-button {
|
|
-fx-background-color: transparent;
|
|
-fx-pref-height: 42;
|
|
-fx-pref-width: 42;
|
|
-fx-min-height: 42;
|
|
-fx-min-width: 42;
|
|
-fx-padding: 0;
|
|
}
|
|
|
|
.icon-button .text {
|
|
-fx-font-family: 'MaterialDesignIconicFont';
|
|
-fx-font-size: 24px;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* ComboBox, ChoiceBox COMMON *
|
|
* *
|
|
******************************************************************************/
|
|
.combo-box-base, .choice-box {
|
|
-fx-background-color: transparent;
|
|
-fx-border-color: -swatch-grey;
|
|
-fx-border-width: 0 0 2 0;
|
|
-fx-background-radius: 0;
|
|
-fx-border-radius: 0;
|
|
}
|
|
|
|
.combo-box:focused, .choice-box:focused {
|
|
-fx-border-color: -swatch-500;
|
|
}
|
|
|
|
.combo-box-base>.label, .choice-box>.label {
|
|
-fx-padding: 0.7em 0.7em 0.7em 0em;
|
|
}
|
|
|
|
.combo-box-base>.arrow-button, .choice-box>.open-button {
|
|
-fx-padding: 1.2em 0.7em 1.2em 0.5em;
|
|
-fx-background-radius: 0.0 2.0 2.0 0.0;
|
|
}
|
|
|
|
.combo-box-base>.arrow-button>.arrow, .choice-box>.open-button>.arrow {
|
|
-fx-background-color: -swatch-grey;
|
|
}
|
|
|
|
.combo-box-base .arrow-button:hover .arrow, .spinner .increment-arrow-button:hover .increment-arrow,
|
|
.spinner .decrement-arrow-button:hover .decrement-arrow {
|
|
-fx-background-color: -swatch-dark-grey;
|
|
}
|
|
|
|
.menu-item:focused {
|
|
-fx-background-color: -swatch-light-grey;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* CheckBox *
|
|
* *
|
|
******************************************************************************/
|
|
.check-box {
|
|
-fx-padding: 10;
|
|
}
|
|
|
|
.check-box .text {
|
|
-fx-fill: -fx-text-base-color;
|
|
}
|
|
|
|
.check-box>.box, .check-box>.box.unfocused, .check-box:disabled>.box,
|
|
.check-box:indeterminate>.box {
|
|
-fx-border-radius: 4.0;
|
|
-fx-border-color: -swatch-grey;
|
|
-fx-border-width: 2;
|
|
-fx-background-radius: 4;
|
|
-fx-background-color: transparent;
|
|
-fx-padding: 1;
|
|
}
|
|
|
|
.check-box:selected>.box {
|
|
-fx-border-color: -swatch-500;
|
|
-fx-background-color: -swatch-500;
|
|
}
|
|
|
|
.check-box:focused>.box {
|
|
-fx-effect: dropshadow(gaussian, rgb(0.0, 0.0, 0.0, 0.30), 6.0, 0.3, 0,
|
|
0);
|
|
}
|
|
|
|
.check-box:selected>.box>.mark {
|
|
-fx-background-color: white;
|
|
}
|
|
|
|
.check-box:indeterminate>.box>.mark {
|
|
-fx-background-color: -swatch-grey;
|
|
-fx-padding: 0.45em;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* ChoiceBox *
|
|
* *
|
|
******************************************************************************/
|
|
.context-menu {
|
|
-fx-background-color: rgb(255.0, 255.0, 255.0, 0.95);
|
|
-fx-background-radius: 2.0;
|
|
}
|
|
|
|
.radio-menu-item, .check-menu-item {
|
|
-fx-padding: 0.7em 0.7em 0.7em 0em;
|
|
}
|
|
|
|
.radio-menu-item:checked .label, .check-menu-item:checked .label {
|
|
-fx-text-fill: -swatch-500;
|
|
}
|
|
|
|
.radio-menu-item:checked>.left-container>.radio, .check-menu-item:checked>.left-container>.check
|
|
{
|
|
-fx-background-color: -swatch-dark-grey;
|
|
-fx-padding: 0.68em 0.5em 0.0em 0.0em;
|
|
-fx-effect: dropshadow(gaussian, rgb(0.0, 0.0, 0.0, 0.2), 0.0, 0.0, 0.0,
|
|
1.0);
|
|
}
|
|
|
|
.radio-menu-item>.left-container>.radio, .check-menu-item>.left-container>.check
|
|
{
|
|
-fx-background-color: transparent;
|
|
-fx-padding: 0.68em 0.68em 0.0em 0.0em;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* ComboBox *
|
|
* *
|
|
******************************************************************************/
|
|
.combo-box .list-cell {
|
|
-fx-padding: 0.7em 0.7em 0.7em 0em;
|
|
}
|
|
|
|
.popup-overlay {
|
|
-fx-background-color: white;
|
|
-fx-border-color: -swatch-grey;
|
|
-fx-border-width: 0 0 2 0;
|
|
-fx-background-radius: 0;
|
|
-fx-border-radius: 0;
|
|
}
|
|
|
|
.title-bar {
|
|
-fx-padding: 10;
|
|
}
|
|
|
|
.title-bar .icon {
|
|
-fx-alignment: center-left;
|
|
-fx-effect: dropshadow(gaussian, rgb(0.0, 0.0, 0.0, 0.2), 0.0, 0.0, 0.0,
|
|
1.0);
|
|
}
|
|
|
|
.title-bar .title-label {
|
|
-fx-padding: 0 10 0 10;
|
|
-fx-alignment: center;
|
|
-fx-font-size: 36;
|
|
-fx-font-weight: bolder;
|
|
}
|
|
|
|
.content-area {
|
|
-fx-background-color: -dark;
|
|
}
|
|
|
|
.content-background {
|
|
-fx-background-color: white;
|
|
-fx-background-radius: 0.0 0.0 11.0 11.0;
|
|
-fx-padding: 0 10 10 10;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Date Picker *
|
|
* *
|
|
******************************************************************************/
|
|
.date-picker-popup .button {
|
|
-fx-background-color: -swatch-500;
|
|
}
|
|
|
|
.date-picker-popup>.month-year-pane {
|
|
-fx-background-color: -swatch-500;
|
|
}
|
|
|
|
.date-picker-popup>*>.spinner>.button>.left-arrow, .date-picker-popup>*>.spinner>.button>.right-arrow
|
|
{
|
|
-fx-background-color: white;
|
|
}
|
|
|
|
.date-picker-popup>*>.spinner {
|
|
-fx-border-width: 0;
|
|
}
|
|
|
|
.date-picker-popup>*>.spinner>.label {
|
|
-fx-text-fill: white;
|
|
-fx-font-weight: bold;
|
|
}
|
|
|
|
.date-picker-popup>*>.day-name-cell, .date-picker-popup>*>.week-number-cell
|
|
{
|
|
-fx-font-weight: normal;
|
|
-fx-text-fill: -swatch-dark-grey;
|
|
-fx-font-size: 1em;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Date picker *
|
|
* *
|
|
******************************************************************************/
|
|
.date-picker .arrow-button {
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
.date-picker .arrow-button .arrow {
|
|
-fx-background-insets: -4;
|
|
}
|
|
|
|
.date-picker .date-picker-display-node {
|
|
-fx-border-width: 0;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* HTML Editor *
|
|
* *
|
|
******************************************************************************/
|
|
.html-editor {
|
|
-fx-background-color: white;
|
|
-fx-border-width: 2 0 2 0;
|
|
-fx-border-color: -swatch-grey;
|
|
}
|
|
|
|
.html-editor .web-view {
|
|
-fx-border-color: grey;
|
|
-fx-border-width: grey;
|
|
}
|
|
|
|
.web-view {
|
|
-fx-font-smoothing-type: gray;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Label *
|
|
* *
|
|
******************************************************************************/
|
|
.label {
|
|
-fx-text-fill: -fx-text-base-color;
|
|
}
|
|
|
|
.label:disabled {
|
|
-fx-opacity: -fx-disabled-opacity;
|
|
}
|
|
|
|
.label:show-mnemonics>.mnemonic-underline {
|
|
-fx-stroke: -fx-text-base-color;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* List, Tree, Table COMMON *
|
|
* *
|
|
******************************************************************************/
|
|
.list-view:focused .list-cell:filled:focused:selected {
|
|
-fx-background-color: -swatch-light-grey;
|
|
-fx-text-fill: -swatch-500;
|
|
}
|
|
|
|
.list-view:hover .list-cell:hover {
|
|
-fx-background-color: -swatch-light-grey;
|
|
-fx-text-fill: -fx-text-base-color;
|
|
}
|
|
|
|
.list-cell {
|
|
-fx-cell-size: 40;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* ProgressBar *
|
|
* *
|
|
******************************************************************************/
|
|
.progress-bar>.track {
|
|
-fx-background-color: derive(-swatch-grey, 50.0%);
|
|
-fx-background-radius: 2.0;
|
|
-fx-padding: 0.0;
|
|
}
|
|
|
|
.progress-bar>.bar {
|
|
-fx-background-color: -swatch-500;
|
|
-fx-background-radius: 2.0;
|
|
-fx-background-insets: 0.0;
|
|
-fx-border-width: 0.0;
|
|
-fx-effect: null;
|
|
}
|
|
|
|
.progress-bar:indeterminate>.bar {
|
|
-fx-background-color: derive(-swatch-500, 50.0%);
|
|
-fx-background-radius: 2.0;
|
|
-fx-background-insets: 0.0;
|
|
-fx-border-width: 0.0;
|
|
-fx-effect: null;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* ProgressIndicator *
|
|
* *
|
|
******************************************************************************/
|
|
.progress-indicator>.spinner {
|
|
-fx-border-width: 0;
|
|
}
|
|
|
|
.progress-indicator>.determinate-indicator>.indicator {
|
|
-fx-background-color: rgb(255.0, 255.0, 255.0, 0.5);
|
|
-fx-padding: 0.0;
|
|
}
|
|
|
|
.progress-indicator>.determinate-indicator>.progress {
|
|
-fx-background-color: -swatch-500;
|
|
}
|
|
|
|
.progress-indicator>.determinate-indicator>.percentage {
|
|
-fx-fill: -fx-text-base-color;
|
|
-fx-translate-y: 0em;
|
|
-fx-padding: 0.0;
|
|
-fx-font-size: 11px;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* RadioButton *
|
|
* *
|
|
******************************************************************************/
|
|
.radio-button {
|
|
-fx-padding: 10;
|
|
}
|
|
|
|
.radio-button .text {
|
|
-fx-fill: -fx-text-base-color;
|
|
}
|
|
|
|
.radio-button>.radio, .radio-button>.radio.unfocused, .radio-button:disabled>.radio,
|
|
.radio-button:selected>.radio {
|
|
-fx-border-radius: 100.0;
|
|
-fx-border-color: -swatch-grey;
|
|
-fx-border-width: 2;
|
|
-fx-background-radius: 100;
|
|
-fx-background-color: transparent;
|
|
-fx-padding: 3 3 3 3;
|
|
}
|
|
|
|
.radio-button:focused>.radio {
|
|
-fx-background-color: -swatch-100;
|
|
}
|
|
|
|
.radio-button:focused:armed>.radio {
|
|
-fx-background-color: -swatch-100;
|
|
}
|
|
|
|
.radio-button:selected>.radio>.dot {
|
|
-fx-background-color: -swatch-500;
|
|
-fx-background-insets: 0;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Separators *
|
|
* *
|
|
******************************************************************************/
|
|
.separator {
|
|
-fx-padding: 16 -16 16 -16;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Scroll Bar *
|
|
* *
|
|
******************************************************************************/
|
|
.scroll-bar:vertical>.track-background, .scroll-bar:horizontal>.track-background
|
|
{
|
|
-fx-background-color: -swatch-light-grey;
|
|
-fx-background-insets: 0.0;
|
|
}
|
|
|
|
.scroll-bar:vertical>.thumb, .scroll-bar:horizontal>.thumb {
|
|
-fx-background-color: -swatch-grey;
|
|
-fx-background-insets: 0.0;
|
|
-fx-background-radius: 4.0;
|
|
}
|
|
|
|
.scroll-bar>.increment-button, .scroll-bar>.decrement-button,
|
|
.scroll-bar:hover>.increment-button, .scroll-bar:hover>.decrement-button
|
|
{
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
.scroll-bar>.increment-button>.increment-arrow, .scroll-bar>.decrement-button>.decrement-arrow
|
|
{
|
|
-fx-background-color: -swatch-dark-grey;
|
|
}
|
|
|
|
.scroll-bar>.track-background {
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Slider *
|
|
* *
|
|
******************************************************************************/
|
|
.slider {
|
|
-fx-padding: 10 0 10 0;
|
|
}
|
|
|
|
.slider:vertical {
|
|
-fx-padding: 0 10 0 10;
|
|
}
|
|
|
|
.slider>.track {
|
|
-fx-background-color: -swatch-grey;
|
|
-fx-background-insets: 1.5;
|
|
}
|
|
|
|
.slider>.thumb {
|
|
-fx-background-color: -swatch-500;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Spinner *
|
|
* *
|
|
******************************************************************************/
|
|
.spinner {
|
|
-fx-background-color: transparent;
|
|
-fx-border-width: 0 0 2 0;
|
|
-fx-border-color: -swatch-grey;
|
|
}
|
|
|
|
.spinner:focused {
|
|
-fx-border-color: -swatch-500;
|
|
}
|
|
|
|
.spinner .text-field {
|
|
-fx-background-color: transparent;
|
|
-fx-background-radius: 0;
|
|
-fx-border-width: 0;
|
|
-fx-padding: 0.5em 0.5em 0.5em 0.1em;
|
|
-fx-prompt-text-fill: derive(-dark, 50.0%);
|
|
-fx-highlight-fill: rgb(94.0, 203.0, 234.0);
|
|
}
|
|
|
|
.spinner .increment-arrow-button, .spinner .decrement-arrow-button {
|
|
-fx-background-color: transparent;
|
|
-fx-fill: swatch-500;
|
|
}
|
|
|
|
.spinner .increment-arrow-button .increment-arrow, .spinner .decrement-arrow-button .decrement-arrow
|
|
{
|
|
-fx-background-color: -swatch-grey;
|
|
}
|
|
|
|
.spinner .increment-arrow-button, .spinner .decrement-arrow-button {
|
|
-fx-background-color: transparent;
|
|
-fx-fill: swatch-500;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Tables *
|
|
* *
|
|
******************************************************************************/
|
|
.table-view, .tree-table-view {
|
|
/* Constants used throughout the tableview. */
|
|
-fx-table-header-border-color: transparent;
|
|
-fx-table-cell-border-color: -fx-box-border; /* Horizontal Lines*/
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
/* The column header row is made up of a number of column-header, one for each
|
|
TableColumn, and a 'filler' area that extends from the right-most column
|
|
to the edge of the tableview, or up to the 'column control' button. */
|
|
.table-view .filler, .tree-table-view .filler, .table-view .column-header,
|
|
.tree-table-view .column-header {
|
|
-fx-size: 65;
|
|
-fx-border-style: null;
|
|
-fx-border-color: -swatch-grey;
|
|
-fx-border-width: 0 0 2 0;
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
.table-view .show-hide-columns-button, .tree-table-view .show-hide-columns-button
|
|
{
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
.table-view .column-header .label, .table-view .filler .label,
|
|
.table-view .column-drag-header .label, .tree-table-view .column-header .label,
|
|
.tree-table-view .filler .label, .tree-table-view .column-drag-header .label
|
|
{
|
|
-fx-alignment: CENTER_LEFT;
|
|
}
|
|
|
|
.table-view .column-header-background, .tree-table-view .column-header-background
|
|
{
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
.table-row-cell, .tree-table-row-cell {
|
|
-fx-cell-size: 40px;
|
|
}
|
|
|
|
.table-cell {
|
|
-fx-border-color: transparent; /* Vertical Lines*/
|
|
-fx-border-width: 1;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Text, Text field & Text area *
|
|
* *
|
|
******************************************************************************/
|
|
.text {
|
|
-fx-font-smoothing-type: gray;
|
|
}
|
|
|
|
.text-area, .text-field {
|
|
-fx-background-color: transparent;
|
|
-fx-background-radius: 2.0;
|
|
-fx-padding: 0.5em 0.5em 0.5em 0.1em;
|
|
-fx-border-color: -swatch-grey;
|
|
-fx-border-width: 0 0 2 0;
|
|
-fx-prompt-text-fill: derive(-dark, 50.0%);
|
|
-fx-highlight-fill: rgb(94.0, 203.0, 234.0);
|
|
}
|
|
|
|
.text-area .text, .text-field>*>.text {
|
|
-fx-effect: null;
|
|
-fx-fill: -dark;
|
|
}
|
|
|
|
.text-area {
|
|
-fx-padding: 0.15em;
|
|
}
|
|
|
|
.text-area .content {
|
|
-fx-padding: 0.7em;
|
|
-fx-border-width: 0.0;
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
.text-area:focused .content {
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
.text-area:focused, .text-field:focused {
|
|
-fx-border-color: -swatch-500;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Tool bar & Menu bar *
|
|
* *
|
|
******************************************************************************/
|
|
.tool-bar, .menu-bar { /* top */
|
|
-fx-background-color: -swatch-toolbar;
|
|
-fx-border-width: 0 0 2 0;
|
|
-fx-border-color: -swatch-grey;
|
|
-fx-min-height: 48;
|
|
-fx-alignment: CENTER_LEFT;
|
|
}
|
|
|
|
.tool-bar .label {
|
|
-fx-font-size: 18;
|
|
}
|
|
|
|
.tool-bar .combo-box-base, .menu-bar .combo-base {
|
|
-fx-border-width: 0;
|
|
}
|
|
|
|
.tool-bar .button, .tool-bar .toggle-button {
|
|
-fx-background-color: -swatch-toolbar;
|
|
-fx-text-fill: -fx-text-base-color;
|
|
-fx-pref-height: 42;
|
|
-fx-pref-width: 42;
|
|
-fx-min-height: 42;
|
|
-fx-min-width: 42;
|
|
-fx-padding: 0;
|
|
-fx-background-radius: 0;
|
|
}
|
|
|
|
.tool-bar .button:pressed, .tool-bar .toggle-button:pressed, .tool-bar .toggle-button:selected
|
|
{
|
|
-fx-background-color: -swatch-grey;
|
|
}
|
|
|
|
.tool-bar .toggle-button {
|
|
-fx-background-color: -swatch-toolbar;
|
|
}
|
|
|
|
.tool-bar .separator {
|
|
-fx-padding: 5 10 5 10;
|
|
}
|
|
|
|
.toolbar-colored {
|
|
-fx-background-color: -swatch-500;
|
|
-fx-border-width: 0 0 2 0;
|
|
-fx-border-color: -swatch-grey;
|
|
}
|
|
|
|
.toolbar-colored .button, .toolbar-colored .toggle-button {
|
|
-fx-background-color: -swatch-500;
|
|
-fx-text-fill: white;
|
|
}
|
|
|
|
.toolbar-colored .button:pressed, .toolbar-colored .toggle-button:pressed,
|
|
.toolbar-colored .toggle-button:selected {
|
|
-fx-background-color: -swatch-200;
|
|
}
|
|
|
|
.toolbar-colored .text {
|
|
-fx-fill: white;
|
|
} |