diff --git a/ProjectSourceCode/src/resources/css/league-pages/league-table.css b/ProjectSourceCode/src/resources/css/league-pages/league-table.css index a3fdb72..f51e27f 100644 --- a/ProjectSourceCode/src/resources/css/league-pages/league-table.css +++ b/ProjectSourceCode/src/resources/css/league-pages/league-table.css @@ -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 { - width: 100%; -} - -#table-stats-container th { - border-bottom: 3px solid red; /* Add red bottom border */ +/* Container for Table */ +#table-stats-container +{ + width: 100%; } /* 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 { - width: 25px; - margin-right: 5px; - cursor: pointer; + /* 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;