sportsfi-custom-styling.js

$(document).ready(function () {
    var navbar = $('.navbar');
    var navbara = $('.navbar a:not([href="~/"])');
    var navbarh1 = $('.navbar h1');
    var footer = $('.footer-bottom');
    var footerp = $('.footer-bottom p');
    var inputGroupInput = $('.input-group input');
    var buttonGroupButton = $('.input-group-btn:last-child>.btn');
    var button = $('button, a.btn, a.btn-submit, input[type="button"], input[type="submit"]');
    var inputText = $('input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], input[type="range"], input[type="file"], input[type="image"], input[type="reset"], input[type="button"], input[type="submit"], textarea');
    var text = $('.row p, .row h1, label');

    var mainColor = '#4f46e5';
    var secondaryColor = '#FFFFFF';
    var tertiaryColor = '#C0C0C0';
    var quaternaryColor = '#666666';

    // style text
    text.css({
        'color': quaternaryColor
    });

    navbarh1.css({
        'color': secondaryColor
    });

    navbar.css({
        'color': secondaryColor,
        'background-color': mainColor
    });

    navbara.css({
        'color': secondaryColor,
        'text-decoration': 'none'
    });

    // hover effect for navbar a
    navbara.mouseenter(function () {
        $(this).css({
            'color': mainColor,
            'border-radius': '5px',
            'background-color': secondaryColor
        });
    });

    // hover out effect for navbar a
    navbara.mouseleave(function () {
        $(this).css({
            'border-radius': '0px',
            'color': secondaryColor,
            'background-color': mainColor
        });
    });

    footer.css({
        'background-color': mainColor
    });

    footerp.css({
        'color': secondaryColor
    });

    // style input text
    inputText.css({
        'outline': 'none',
        'padding': '5px',
        'border-radius': '5px',
        'border-color': tertiaryColor
    });

    // style input group
    inputGroupInput.css({
        'border-radius': '5px 0px 0px 5px',
    });

    buttonGroupButton.css({
        'border-radius': '0px 5px 5px 0px',
    });

    // change button css to look good with hover effect
    button.css({
        'cursor': 'pointer',
        'border-radius': '5px',
        'color': secondaryColor,
        'background-color': mainColor,
        'border': `1px solid ${mainColor}`,
    });

    // add hover effect
    button.mouseenter(function () {
        $(this).css({
            'color': mainColor,
            'background-color': secondaryColor
        });
    });


    // add hover out effect
    button.mouseleave(function () {
        $(this).css({
            'color': secondaryColor,
            'background-color': mainColor
        });
    });

    setTimeout(() => {
        var table = $('table');
        var theadh = $('thead th');
        var theada = $('thead th a');

        // round the table corners
        table.css({
            'border-radius': '5px',
            'overflow': 'hidden',
            'outline': 'none'
        });

        theadh.css({
            'background-color': mainColor
        });

        theada.css({
            'color': secondaryColor
        });
    }, 0);
});