lucaspatenaude/ScoreSpot
1
0
Fork 0
Code Projects 1 Releases 1 Wiki Activity

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

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-15 01:15:44 -06:00
parent 0db13be52f
commit 3a4c6c7e97
1 changed files with 59 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
ProjectSourceCode/src/resources/css/league-pages/league-table.css
View File

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