forked from lucaspatenaude/ScoreSpot
130 lines
2.5 KiB
CSS
130 lines
2.5 KiB
CSS
/*
|
|
=================================
|
|
TABLE ADN HEADER CONTAINER
|
|
=================================
|
|
*/
|
|
|
|
/* Container for table and header */
|
|
#league-table-container
|
|
{
|
|
width: 60%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
margin-right: 30px;
|
|
|
|
transition: transform 0.3s ease; /* Add smooth transition effect */
|
|
}
|
|
|
|
/*
|
|
=================================
|
|
TABLE CONTAINER
|
|
=================================
|
|
*/
|
|
|
|
/* Container for Table */
|
|
#league-table-stats-container
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
/* Table that holds all the standing information */
|
|
#league-standings-table
|
|
{
|
|
width: 100%;
|
|
padding: 15px;
|
|
|
|
/* Table Header Styling */
|
|
th
|
|
{
|
|
border-bottom: 3px solid red; /* Add red bottom border */
|
|
}
|
|
|
|
/* Data in Row Style */
|
|
td
|
|
{
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Every Odd Row in Table Style */
|
|
tbody tr:nth-child(odd)
|
|
{
|
|
background-color: #d2d2d2; /* Light gray for odd rows */
|
|
}
|
|
}
|
|
|
|
/*
|
|
===========================
|
|
TABLE COLUMNS STYLE
|
|
===========================
|
|
*/
|
|
|
|
/* Club Logo Column in Table Style */
|
|
#league-table-club-logo-column {
|
|
width: 25px;
|
|
|
|
/* Club Logo Style */
|
|
#league-table-club-logo
|
|
{
|
|
width: 25px;
|
|
margin-right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
}
|
|
|
|
/* Club Name Column in Table Style */
|
|
#league-table-club-name-column
|
|
{
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Points Column in Table Style */
|
|
#league-table-points-column
|
|
{
|
|
font-weight: bolder;
|
|
}
|
|
|
|
/*
|
|
==============================================================
|
|
HOVER STYLES
|
|
==============================================================
|
|
*/
|
|
|
|
/* Add hover effect to table rows */
|
|
#league-standings-table tbody tr:hover
|
|
{
|
|
/* Create border around row on hover */
|
|
border: 1px solid lightgray;
|
|
border-radius: 10px;
|
|
|
|
/* Make club logo larger on hover */
|
|
#league-table-club-logo
|
|
{
|
|
width: 32px;
|
|
}
|
|
|
|
/* Undeline club name on hover */
|
|
#league-table-club-name-column
|
|
{
|
|
text-decoration: underline; /* Add underline effect */
|
|
}
|
|
}
|
|
|
|
/*
|
|
==============================================================
|
|
DYNAMIC PAGE WIDTH STYLES
|
|
==============================================================
|
|
*/
|
|
|
|
/* Stlye for Screens Smaller than 1230px */
|
|
@media (max-width: 1230px)
|
|
{
|
|
#league-table-container
|
|
{
|
|
align-items: center;
|
|
width: 75%;
|
|
min-width: 580px;
|
|
}
|
|
} |