Comments to league-table.css to make idetifying each element more clear

This commit is contained in:
Lucas Patenaude
2024-04-15 01:15:44 -06:00
parent 0db13be52f
commit 3a4c6c7e97

View File

@@ -1,11 +1,12 @@
/*
=================================
LEAGUE TABLE CONTAINER
TABLE ADN HEADER CONTAINER
=================================
*/
/* Container for all table elements */
#league-table-container {
/* Container for table and header */
#league-table-container
{
width: 60%;
justify-content: center;
align-items: center;
@@ -15,72 +16,100 @@
transition: transform 0.3s ease; /* Add smooth transition effect */
}
/*
=================================
TABLE CONTAINER
=================================
*/
#table-stats-container {
/* Container for Table */
#table-stats-container
{
width: 100%;
}
#table-stats-container th {
border-bottom: 3px solid red; /* Add red bottom border */
}
/* Table that holds all the standing information */
#standings-table {
#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;
}
#table-club-logo {
/* Club Logo Style */
#table-club-logo
{
width: 25px;
margin-right: 5px;
cursor: pointer;
}
}
#club-name-column {
/* Style the club name column */
#club-name-column
{
cursor: pointer;
}
#standings-table td {
#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) {
#standings-table tbody tr:nth-child(odd)
{
background-color: #f7c4c475; /* Light gray for odd rows */
}
#standings-table tbody tr:nth-child(even) {
#standings-table tbody tr:nth-child(even)
{
background-color: #ffffff; /* White for even rows */
}
#points-column {
font-weight: bolder;
}
/* Add hover effect to table rows */
#standings-table tbody tr:hover {
#standings-table tbody tr:hover
{
border: 1px solid lightgray;
border-radius: 10px;
#table-club-logo {
#table-club-logo
{
width: 32px;
}
#club-name-column {
#club-name-column
{
text-decoration: underline; /* Add underline effect */
}
}
@media (max-width: 1230px) {
#league-table-container {
/*
==============================================================
DYNAMIC PAGE WIDTH STYLES
==============================================================
*/
@media (max-width: 1230px)
{
#league-table-container
{
align-items: center;
width: 75%;
min-width: 580px;