transit/src/main/resources/com/pixelduke/transit/base_extras.css
/*
 *  Copyright (c) 2023 Pixel Duke (Pedro Duque Vieira - www.pixelduke.com)
 *  All rights reserved.
 *
 *  Redistribution and use in source and binary forms, with or without
 *  modification, are permitted provided that the following conditions are met:
 *    * Redistributions of source code must retain the above copyright
 *  notice, this list of conditions and the following disclaimer.
 *    * Redistributions in binary form must reproduce the above copyright
 *  notice, this list of conditions and the following disclaimer in the
 *  documentation and/or other materials provided with the distribution.
 *    * Neither the name of Pixel Duke, any associated website, nor the
 *  names of its contributors may be used to endorse or promote products
 *  derived from this software without specific prior written permission.
 *
 *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 *  ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 *  WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 *  DISCLAIMED. IN NO EVENT SHALL PIXEL DUKE BE LIABLE FOR ANY
 *  DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 *  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 *  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 *  ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 *  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 *  SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

/***************************************************************************************/
/*  This stylesheet is about other useful styles not exactly defined by Fluent Design  */
/*  but could be inspired by it and also styles not defined in JavaFX                  */
/***************************************************************************************/


/*******************************************************************************
 *                                                                             *
 * Light style for Buttons, ToggleButtons and PillButtons inside Toolbar       *
 *                                                                             *
 ******************************************************************************/

 /*==================== Light Button, ToggleButton ========================*/
.button.light,
.toggle-button.light,
.menu-button.light,
.split-menu-button.light, .split-menu-button.light > .label, .split-menu-button.light > .arrow-button {
    -fx-background-color: transparent;
}

/* - hover */
.button:hover.light,
.toggle-button:hover.light,
.menu-button.light:hover,
.split-menu-button.light:hover > .label, .split-menu-button.light:hover > .arrow-button {
    -fx-background-color: button_hover_color;
}

.button.light:hover,
.toggle-button.light:hover {
    -fx-border-color: transparent;
}

/* - pressed */
.button:pressed.light,
.toggle-button:pressed.light,
.menu-button.light:pressed {
    -fx-background-color: button_pressed_color;
}

/* - focused */
.button:focused.light,
.toggle-button:focused.light {
    -fx-border-color: border_hover_color;
    -fx-border-style: solid;
    -fx-border-width: 2;
    -fx-border-insets: 0;
}

/* Menu Button */
.menu-button.light {
    -fx-border-color: transparent;
}

.menu-button.light:showing {
    -fx-background-color: button_pressed_color;
}

/* Split Menu Button */

.split-menu-button.light > .label {
    -fx-padding: 0.333333em 0.333333em 0.333333em 0.5em; /* 4 4 4 6 */
}

.split-menu-button.light > .arrow-button {
    -fx-padding: 0.5em 0.583333em 0.5em 0.333333em; /* 6 7 6 4 */
}

.split-menu-button.light:showing > .arrow-button {
    -fx-background-color: button_pressed_color;
}

.split-menu-button.light:showing > .label {
    -fx-background-color: button_pressed_color;
}

 /*===================== Pill button inside Toolbar ==========================*/

.tool-bar .button.left-pill,
.tool-bar .button.center-pill,
.tool-bar .button.right-pill,
.tool-bar .toggle-button.left-pill,
.tool-bar .toggle-button.center-pill,
.tool-bar .toggle-button.right-pill {
    -fx-border-color: transparent;
    -fx-border-width: 2;

    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-background-color: button_background_color;

    -fx-font-family: "Segoe UI";
    -fx-font-size: 1em; /* 12 */
    -fx-text-fill: text_color;
}

/* hover */
.tool-bar .button:hover.left-pill,
.tool-bar .button:hover.center-pill,
.tool-bar .button:hover.right-pill,
.tool-bar .toggle-button:hover.left-pill,
.tool-bar .toggle-button:hover.center-pill,
.tool-bar .toggle-button:hover.right-pill {
    -fx-border-color: border_hover_color;
}

/* pressed */
.tool-bar .button:pressed.left-pill,
.tool-bar .button:pressed.center-pill,
.tool-bar .button:pressed.right-pill,
.tool-bar .toggle-button:pressed.left-pill,
.tool-bar .toggle-button:pressed.center-pill,
.tool-bar .toggle-button:pressed.right-pill {
    -fx-border-color: background_pressed_color;
    -fx-background-color: background_pressed_color;
}

/* focused */
.tool-bar .button:focused.left-pill,
.tool-bar .button:focused.center-pill,
.tool-bar .button:focused.right-pill,
.tool-bar .toggle-button:focused.left-pill,
.tool-bar .toggle-button:focused.center-pill,
.tool-bar .toggle-button:focused.right-pill {
    -fx-border-color: transparent, focus_ring_border_color;
    -fx-border-width: 1, 1;
    /*noinspection CssInvalidFunction*/
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

/* disabled */
.tool-bar .button:disabled.left-pill,
.tool-bar .button:disabled.center-pill,
.tool-bar .button:disabled.right-pill,
.tool-bar .toggle-button:disabled.left-pill,
.tool-bar .toggle-button:disabled.center-pill,
.tool-bar .toggle-button:disabled.right-pill {
    -fx-opacity: 0.4;
    -fx-background-color: button_background_color;
    -fx-text-fill: text_color;
}

/* selected */
.tool-bar .button:selected.left-pill,
.tool-bar .button:selected.center-pill,
.tool-bar .button:selected.right-pill,
.tool-bar .toggle-button:selected.left-pill,
.tool-bar .toggle-button:selected.center-pill,
.tool-bar .toggle-button:selected.right-pill {
    -fx-background-color: accent_color;
    -fx-text-fill: white;
}

/* selected - hover */
.tool-bar .button:selected:hover.left-pill,
.tool-bar .button:selected:hover.center-pill,
.tool-bar .button:selected:hover.right-pill,
.tool-bar .toggle-button:selected:hover.left-pill,
.tool-bar .toggle-button:selected:hover.center-pill,
.tool-bar .toggle-button:selected:hover.right-pill {
    -fx-border-color: border_hover_selected_color;
}

/* selected - pressed */
.tool-bar .button:selected:pressed.left-pill,
.tool-bar .button:selected:pressed.center-pill,
.tool-bar .button:selected:pressed.right-pill,
.tool-bar .toggle-button:selected:pressed.left-pill,
.tool-bar .toggle-button:selected:pressed.center-pill,
.tool-bar .toggle-button:selected:pressed.right-pill {
    -fx-background-color: derive(accent_color, -40%);
}

/*******************************************************************************
 *                                                                             *
 * TabPane With Underline                                                      *
 *                                                                             *
 ******************************************************************************/

.tab-pane.underlined > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-color: transparent, transparent, transparent;
    -fx-background-radius: 0 0 0 0, 0 0 0 0, 0 0 0 0;
}

.tab-pane.underlined > .tab-header-area > .tab-header-background {
    -fx-background-color:
            transparent,
            transparent,
            tab_pane_background_color;
    -fx-background-insets: 1 1 0 1, 0 0 1 0, 1;
}

/*=========================== Tab ========================================*/

.tab-pane.underlined > .tab-header-area > .headers-region > .tab {
    -fx-padding: 0.083333em 1em 0.0769em 1em; /* 1 12 0.99 12 */
}

.tab-pane.underlined > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
    -fx-text-fill: tab_not_selected_text_color;

    -fx-padding: 0 0.083333em 0.25em 0; /* 0 1 3 0 */

    -fx-border-color: transparent transparent transparent transparent;
    -fx-border-width: 0 0 2px 0;
}

.tab-pane.underlined > .tab-header-area > .headers-region > .tab:hover > .tab-container > .tab-label {
    -fx-text-fill: tab_hover_text_color;
}

.tab-pane.underlined > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-label {
    -fx-text-fill: text_color;
    -fx-font-size: 1em; /* 12 */

    -fx-border-color: transparent transparent accent_color transparent;
}

.tab-pane.underlined > .tab-header-area > .headers-region > .tab:disabled > .tab-container > .tab-label,
.tab-pane.underlined > .tab-header-area > .headers-region > .tab:disabled:hover > .tab-container > .tab-label {
    -fx-text-fill: text_color;
    -fx-opacity: 0.4;
}

/*******************************************************************************
 *                                                                             *
 * Segoe MDL2 Icon Font                                                        *
 *                                                                             *
 ******************************************************************************/

.mdl2-assets > .text {
    -fx-font-family: "Segoe MDL2 Assets";
}

.mdl2-assets {
    -fx-text-fill: text_color;
}