ScoreSpot/ProjectSourceCode/src/resources/css/league-pages/league-table.css

/*
=================================
    TABLE ADN HEADER CONTAINER
=================================
*/

/* Container for table and header */
#league-table-container 
{
    width: 60%;
    justify-content: center;
    align-items: center;

    margin-right: 20px;

    transition: transform 0.3s ease; /* Add smooth transition effect */
}

/*
=================================
        TABLE CONTAINER
=================================
*/

/* Container for Table */
#table-stats-container 
{
   width: 100%;    
}

/* Table that holds all the standing information */
#standings-table 
{
    width: 100%;
    padding: 15px;

    /* Table Header Styling */
    th 
    {
        border-bottom: 3px solid red; /* Add red bottom border */
    }
}

/* Set the width for the column containing the club logo */
#club-logo-column {
    width: 25px; 

    /* Club Logo Style */
    #table-club-logo 
    {      
        width: 25px;
        margin-right: 5px;
        cursor: pointer;
    }

}

/* Style the club name column */
#club-name-column 
{
    cursor: pointer;
}

#points-column 
{
    font-weight: bolder;
}

/* Style each piece of data in a row */
#standings-table td 
{
    padding: 5px;
}

/* Define styles for odd and even rows */
#standings-table tbody tr:nth-child(odd) 
{
    background-color: #f7c4c475; /* Light gray for odd rows */
}

#standings-table tbody tr:nth-child(even) 
{
    background-color: #ffffff; /* White for even rows */
}

/* Add hover effect to table rows */
#standings-table tbody tr:hover 
{
    border: 1px solid lightgray;
    border-radius: 10px;

    #table-club-logo 
    {
        width: 32px;
    }

    #club-name-column 
    {
        text-decoration: underline; /* Add underline effect */
    }
}

/*
==============================================================
                 DYNAMIC PAGE WIDTH STYLES
==============================================================
*/

@media (max-width: 1230px) 
{
    #league-table-container 
    {
        align-items: center;
        width: 75%;
        min-width: 580px;
    }   
}