EVOLUTION-NINJA

Edit File: custom.less

/**
 * @package         Tabs
 * @version         8.4.0
 * 
 * @author          Peter van Westen <info@regularlabs.com>
 * @link            https://regularlabs.com
 * @copyright       Copyright © 2023 Regular Labs All Rights Reserved
 * @license         GNU General Public License version 2 or later
 */
/*
 * This is an example of how you can create custom styles
 * Do not edit this file, as it will not be loaded by default and will get overwritten if you update Tabs
 * Place your own custom styles in your templates stylesheet
 * or copy the style.css file to /templates/[YOUR TEMPLATE]/css/tabs/style.min.css and customise that
 */
@import "../../regularlabs/less/init.less";

/* Custom Style: mystyle1 */
.rl_tabs.top {
    > ul.nav {
        > li.mystyle1 {
            > a {
                .transition-duration(0s);
                font-size:        22px;
                #gradient > .vertical(#ff9999, #ffffff);
                background-color: #ffffff;

&:hover {
                    #gradient > .vertical(#9999ff, #ffffff);
                    background-color: #ffffff;
                }
            }

&.active {
                > a,
                > a:hover {
                    #gradient > .vertical(#99ff99, #ffffff);
                    background-color: #ffffff;
                }
            }
        }
    }

> .tab-content {
        > .tab-pane.mystyle1 {
            #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, #ccffcc);
        }
    }
}

/* Custom Style: mystyle2 */
.rl_tabs.top {
    > ul.nav {
        > li.mystyle2 {
            > a {
                .transition-duration(1s);
                font-family:         @monoFontFamily;
                .border-radius(0 0 0 0);
                margin-left:         10px;
                margin-right:        10px;
                padding:             8px 20px;
                background-color:    #aaaaaa;
                color:               #ffffff;
                border-color:        #666666;
                border-bottom-color: #dddddd;

&:hover {
                    background-color: #999999;
                    border-color:     #666666;
                }
            }

&.active {
                > a,
                > a:hover {
                    .border-radius(0 30px 0 0);
                    background-color: #666666;
                    border-color:     #666666;
                }
            }
        }
    }

> .tab-content {
        > .tab-pane.mystyle2 {
            font-family:      @monoFontFamily;
            background-color: #666666;
            color:            #ffffff;
        }
    }
}