FXSkins/src/main/resources/com/pixelduke/control/skin/fx-skins.css
/*
 * FXSkins,
 * Copyright (C) 2021 PixelDuke (Pedro Duque Vieira - www.pixelduke.com)
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */


/*******************************************************************************
 *                                                                             *
 * Button                                                                      *
 *                                                                             *
 ******************************************************************************/

.button {
    -fx-skin: "com.pixelduke.control.skin.FXButtonSkin";
}

/*******************************************************************************
 *                                                                             *
 * Toggle Button                                                               *
 *                                                                             *
 ******************************************************************************/

.toggle-button {
    -fx-skin: "com.pixelduke.control.skin.FXToggleButtonSkin";
}

/*******************************************************************************
 *                                                                             *
 * Text Field                                                                  *
 *                                                                             *
 ******************************************************************************/

/* Issue #149 (JMetro): Need to use TextField because ColorPicker has custom textfields with "text-field" styleclass that aren't actually of type
   TextField which will cause an IllegalArgumentException when creating the impl.jfxtras.styles.jmetro.TextFieldSkin object and passing it,
   for instance, the WebColorField */

TextField {
    -fx-skin: "com.pixelduke.control.skin.FXTextFieldSkin";
    -right-button-visible: true;

    -fx-padding: 0.3333333em 0.5833333em 0.3333333em 0.5833333em;
}

TextField:focused {
    -fx-padding: 0.3333333em 3em 0.3333333em 0.5833333em;
}

TextField:readonly {
    -right-button-visible: false;
}

TextField > .right-button > .right-button-graphic {
    -fx-shape: "M221.738,305.873l6.135,6.16l-2.875,2.863l-6.135-6.159l-6.263,6.237l-2.864-2.875l6.263-6.238l-6.177-6.202l2.875-2.863l6.177,6.201l6.244-6.22l2.864,2.876L221.738,305.873z";

    -fx-padding: 0.416667em;
    -fx-background-color: #111;
}

TextField > .right-button:hover > .right-button-graphic {
	-fx-background-color: #666666;
}

TextField > .right-button {
    -fx-cursor: default;

    -fx-background-radius: 0 3 3 0, 2, 2;
    -fx-padding: 0.583333em;
}

TextField > .right-button:pressed {
    -fx-background-color: -fx-accent;
}

TextField > .right-button:pressed > .right-button-graphic {
    -fx-background-color: white;
}

/*******************************************************************************
 *                                                                             *
 * Password Field                                                              *
 *                                                                             *
 ******************************************************************************/

.password-field {
    -fx-skin: "com.pixelduke.control.skin.FXPasswordFieldSkin";
}

.password-field {
    -right-button-visible: true;

    -fx-padding: 0.3333333em 0.5833333em 0.3333333em 0.5833333em;
}

.password-field > .right-button:hover > .right-button-graphic {
	-fx-background-color: #666666;
}

.password-field:focused {
    -fx-padding: 0.3333333em 3em 0.3333333em 0.5833333em;
}

.password-field > .right-button {
    -fx-cursor: default;

    -fx-background-radius: 0 3 3 0, 2, 2;
    -fx-padding: 0.583333em;
}

.password-field > .right-button > .right-button-graphic {
    -fx-shape: "M307.688,399.564c0,1.484-1.203,2.688-2.688,2.688c-1.484,0-2.688-1.203-2.688-2.688s1.203-2.688,2.688-2.688C306.484,396.876,307.688,398.08,307.688,399.564z M297.5,399h2.5c0,0,1.063-4,5-4c3.688,0,5,4,5,4h2.5c0,0-2.063-6.5-7.5-6.5C299,392.5,297.5,399,297.5,399z";

    -fx-padding: 0.416667em;
    -fx-background-color: #111;
    -fx-scale-shape: false;
}

.password-field > .right-button:pressed {
    -fx-background-color: -fx-accent;
}

.password-field > .right-button:pressed > .right-button-graphic {
    -fx-background-color: white;
}

/*******************************************************************************
 *                                                                             *
 * Slider                                                                      *
 *                                                                             *
 ******************************************************************************/

.slider {
    -fx-skin: "com.pixelduke.control.skin.FXSliderSkin";
}

.slider {
    -show-value-on-interaction: true;
}

.slider .fill {
    -fx-background-color: -fx-accent;
    -fx-background-insets: 1;
    -fx-background-radius: 0.25em; /* 3 */
}

/* Slider popup showing its value */
.slider-popup .label {
    -fx-background: rgba(30,30,30);
    -fx-text-fill: white;
    -fx-background-color: rgba(30,30,30,0.8);
    -fx-background-radius: 6px;
    -fx-background-insets: 0;
    -fx-padding: 0.667em 0.75em 0.667em 0.75em;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5) , 10, 0.0 , 0 , 3 );
    -fx-font-size: 1em;
}

/* Using Modena style (default style) the popup is slightly misplaced so need to translate it a bit */
.slider-popup:horizontal .label {
    -fx-translate-x: 18;
}

.slider-popup:vertical .label {
    -fx-translate-y: 13;
}

/*******************************************************************************
 *                                                                             *
 * Toggle Switch                                                               *
 *                                                                             *
 ******************************************************************************/

.toggle-switch {
    -fx-skin: "com.pixelduke.control.skin.FXToggleSwitchSkin";
}

.toggle-switch {
    -thumb-move-animation-time: 200;
    -toggle-display: left;

    -fx-pref-height: 1.666666em; /* 20 */
    -fx-max-height: 1.666666em; /* 20 */
    -fx-min-height: 1.666666em; /* 20 */
}

.toggle-switch > .main-container {
    -fx-spacing: 10;
}

.toggle-switch .text {
    -fx-font-size: 1em;
    -fx-text-fill: -fx-text-base-color;
}

.toggle-switch .thumb {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
                            -fx-inner-border,
                            -fx-body-color;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
    -fx-padding: 0.75em;
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
}

.toggle-switch > .main-container > .thumb-area {
    -fx-background-radius: 1em;
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)), #f5f5f5;
    -fx-background-insets: 0, 1;

    -fx-pref-width: 34px;
    -fx-max-width: 34px;
    -fx-min-width: 34px;

    -fx-padding: 0.416667em 0em 0.416667em 0em; /* 5 0 5 0 */
}

.toggle-switch:hover .thumb {
    -fx-color: -fx-hover-base;
}

.toggle-switch:selected > .main-container > .thumb-area {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
                          linear-gradient(to bottom, derive(-fx-accent, 30%), -fx-accent);
    -fx-background-insets: 0, 1;
}

.toggle-switch:disabled {
    -fx-opacity: 0.4;
}

/*******************************************************************************
 *                                                                             *
 * Progress Bar                                                                *
 *                                                                             *
 ******************************************************************************/

.progress-bar {
    -fx-skin: "com.pixelduke.control.skin.PointsProgressBarSkin";
}

.progress-bar > .bar {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-accent, -7%), derive(-fx-accent, 0%), derive(-fx-accent, -3%), derive(-fx-accent, -9%) );
    -fx-background-insets: 3 3 4 3;
    -fx-background-radius: 2;
    -fx-padding: 0.75em;
}

.progress-bar > .track {
      -fx-background-color:
          -fx-shadow-highlight-color,
          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
          linear-gradient(to bottom,
            derive(-fx-control-inner-background, -7%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -3%),
            derive(-fx-control-inner-background, -9%)
          );
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
    -fx-background-radius: 4, 3, 2; /* 10, 9, 8 */

    -fx-pref-height: 10px;
    -fx-min-height: 10px;
    -fx-max-height: 10px;
}

/* Indeterminate */
.progress-bar:indeterminate > .track {
    -fx-background-color: transparent;
}

.progress-bar:indeterminate .dot {
    -fx-background-radius: 1em;
    -fx-padding: 0.166667em;

    -fx-background-color: -fx-accent;
}

/*******************************************************************************
 *                                                                             *
 * Scroll Pane                                                                 *
 *                                                                             *
 ******************************************************************************/

.scroll-pane {
    -fx-skin: "com.pixelduke.control.skin.ConsciousScrollPaneSkin";
}

.scroll-pane > .scroll-bar,
.scroll-pane > .scroll-bar .decrement-arrow,
.scroll-pane > .scroll-bar .increment-arrow,
.scroll-pane > .scroll-bar .decrement-button,
.scroll-pane > .scroll-bar .increment-button {
    -fx-padding: 0;
}

/************************   Minimal ScrollBar   ********************************/

.scroll-pane > .minimal-scroll-bar .decrement-arrow,
.scroll-pane > .minimal-scroll-bar .increment-arrow {
    -fx-pref-width: 0;
    -fx-pref-height: 0;
}

.scroll-pane > .minimal-scroll-bar {
    -fx-background-color: transparent;
    -fx-pref-width: 8;
    -fx-pref-height: 8;
    -fx-padding: 0;
}

.scroll-pane > .minimal-scroll-bar > .track-background {
    -fx-background-color: transparent;
}

.scroll-pane > .minimal-scroll-bar:vertical .thumb {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color-to-right;
}

.scroll-pane > .minimal-scroll-bar:horizontal .thumb {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
}

/************************   Normal ScrollBar   *********************************/

/* vertical */

.scroll-pane > .normal-scroll-bar:vertical > .increment-button,
.scroll-pane > .normal-scroll-bar:vertical > .decrement-button {
    -fx-padding: 0.25em 0.25em 0.25em 0.166667em; /* 3 3 3 2 */
}
.scroll-pane > .normal-scroll-bar:vertical {
    -fx-padding: 1 0 1 0;
}

.normal-scroll-bar:vertical > .decrement-button > .decrement-arrow {
    -fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */
}
.normal-scroll-bar:vertical > .increment-button > .increment-arrow {
    -fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */
}

/* horizontal */

.scroll-pane > .normal-scroll-bar:horizontal > .increment-button,
.scroll-pane > .normal-scroll-bar:horizontal > .decrement-button {
    -fx-padding: 0.166667em 0.25em 0.25em  0.25em; /* 2 3 3 3 */
}
.scroll-pane > .normal-scroll-bar:horizontal {
    -fx-padding: 0 1 0 1;
}

.normal-scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    -fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */
}
.normal-scroll-bar:horizontal > .increment-button > .increment-arrow {
    -fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */
}




