More CSS clean-up to remove redundant styling and streamline elements
This commit is contained in:
Lucas Patenaude
@@ -89,7 +89,7 @@
|
|||||||
=============================================
|
=============================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Styling for Standings and Top Scorers Cards */
|
/* Styling for All Card Containers on Generated Pages */
|
||||||
.card-container
|
.card-container
|
||||||
{
|
{
|
||||||
/* --- POSITION CONTAINER --- */
|
/* --- POSITION CONTAINER --- */
|
||||||
@@ -105,15 +105,61 @@
|
|||||||
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
|
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Styling for All Tables on Generated Pages */
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styling for All Tables Designated to Alternate on Generated Pages */
|
||||||
|
.alternating-table tbody tr:nth-child(odd)
|
||||||
|
{
|
||||||
|
/* Every Odd Row in Table Style */
|
||||||
|
background-color: #d2d2d2; /* Light gray for odd rows */
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
==============================================================
|
==============================================================
|
||||||
HOVER STYLES
|
HOVER STYLES
|
||||||
==============================================================
|
==============================================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Hover Styling for Standings and Top Scorers Cards */
|
/* Hover Styling for All Card Containers on Generated Pages */
|
||||||
.card-container:hover
|
.card-container:hover
|
||||||
{
|
{
|
||||||
transform: scale(1.01); /* Scale the row by 1.1 on hover */
|
transform: scale(1.01); /* Scale the row by 1.1 on hover */
|
||||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
|
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Hover Styling for All Tables Designated to Alternate on Generated Pages */
|
||||||
|
.alternating-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 */
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
#club-information-container {
|
|
||||||
height: fit-content;
|
|
||||||
width: 20%;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
@@ -1,9 +1,3 @@
|
|||||||
/*
|
|
||||||
=============================================
|
|
||||||
CARDS IN PAGE BODY
|
|
||||||
=============================================
|
|
||||||
*/
|
|
||||||
|
|
||||||
#club-page-contents-container {
|
#club-page-contents-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|||||||
@@ -2,33 +2,3 @@
|
|||||||
#club-stats-and-players-container {
|
#club-stats-and-players-container {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
=================================
|
|
||||||
PLAYER TABLE CONTAINER
|
|
||||||
=================================
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Table containing player information */
|
|
||||||
#club-players-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 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
/*
|
/*
|
||||||
=================================
|
=================================
|
||||||
TABLE AND HEADER CONTAINER
|
LEAGUE TABLE CONTAINER
|
||||||
=================================
|
=================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -8,102 +8,40 @@
|
|||||||
#league-table-container
|
#league-table-container
|
||||||
{
|
{
|
||||||
width: 60%;
|
width: 60%;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
|
|
||||||
transition: transform 0.3s ease; /* Add smooth transition effect */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
=================================
|
============================================
|
||||||
TABLE CONTAINER
|
LEAGUE TABLE COLUMNS STYLE
|
||||||
=================================
|
============================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Table that holds all the standing information */
|
/* Club Logo Column in Table Style */
|
||||||
#league-standings-table
|
#league-table-club-logo-column {
|
||||||
{
|
width: 25px;
|
||||||
width: 100%;
|
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
/* Table Header Styling */
|
/* Club Logo Style */
|
||||||
th
|
#league-table-club-logo
|
||||||
{
|
{
|
||||||
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;
|
width: 25px;
|
||||||
|
margin-right: 5px;
|
||||||
/* 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;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Points Column in Table Style */
|
}
|
||||||
#league-table-points-column
|
|
||||||
{
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/* Club Name Column in Table Style */
|
||||||
==============================================================
|
#league-table-club-name-column
|
||||||
HOVER STYLES
|
|
||||||
==============================================================
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Add hover effect to table rows */
|
|
||||||
#league-standings-table tbody tr:hover
|
|
||||||
{
|
{
|
||||||
/* Create border around row on hover */
|
font-weight: 500;
|
||||||
border: 1px solid lightgray;
|
cursor: pointer;
|
||||||
border-radius: 10px;
|
}
|
||||||
|
|
||||||
/* Make club logo larger on hover */
|
/* Points Column in Table Style */
|
||||||
#league-table-club-logo
|
#league-table-points-column
|
||||||
{
|
{
|
||||||
width: 32px;
|
font-weight: bolder;
|
||||||
}
|
|
||||||
|
|
||||||
/* Undeline club name on hover */
|
|
||||||
#league-table-club-name-column
|
|
||||||
{
|
|
||||||
text-decoration: underline; /* Add underline effect */
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|||||||
@@ -9,58 +9,38 @@
|
|||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#league-top-scorers-stats-container {
|
/*
|
||||||
|
===========================
|
||||||
|
TABLE COLUMNS STYLE
|
||||||
|
===========================
|
||||||
|
*/
|
||||||
|
|
||||||
/* Table Header Styling */
|
#league-top-scorers-goals-column
|
||||||
th
|
{
|
||||||
{
|
text-align: center;
|
||||||
border-bottom: 3px solid red; /* Add red bottom border */
|
font-size: 20px;
|
||||||
}
|
font-weight: bolder;
|
||||||
|
|
||||||
tr
|
|
||||||
{
|
|
||||||
padding: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Data in Row Style */
|
|
||||||
td
|
|
||||||
{
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
#league-top-scorers-logo
|
||||||
===========================
|
{
|
||||||
TABLE COLUMNS STYLE
|
width: 25px;
|
||||||
===========================
|
margin: 0 15px;
|
||||||
*/
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
#league-top-scorers-goals-column
|
#league-top-scorers-player-name-column
|
||||||
{
|
{
|
||||||
text-align: center;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
#league-top-scorers-logo
|
font-size: 14px;
|
||||||
{
|
font-weight: bold;
|
||||||
width: 25px;
|
padding-right: 15px;
|
||||||
margin: 0 15px;
|
}
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#league-top-scorers-player-name-column
|
#league-top-scorers-club-name-column
|
||||||
{
|
{
|
||||||
|
padding-right: 15px;
|
||||||
font-size: 14px;
|
}
|
||||||
font-weight: bold;
|
|
||||||
padding-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#league-top-scorers-club-name-column
|
|
||||||
{
|
|
||||||
padding-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
==============================================================
|
==============================================================
|
||||||
|
|||||||
@@ -93,7 +93,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="club-players-table-container" class="card-container">
|
<div id="club-players-table-container" class="card-container">
|
||||||
<table id="club-players-table">
|
<table id="club-players-table" class="alternating-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
<!-- Container containing all league table stats -->
|
<!-- Container containing all league table stats -->
|
||||||
<div id="league-table-stats-container" class="card-container">
|
<div id="league-table-stats-container" class="card-container">
|
||||||
<table id="league-standings-table">
|
<table id="league-standings-table" class="alternating-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th>#</th>
|
||||||
|
|||||||
Reference in New Issue
Block a user