Lukeflix/JellySport
1
0
Fork 0
forked from lucaspatenaude/ScoreSpot
Code Pull Requests Activity

CSS reorganization started to streamline elements on generated pages

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-16 13:48:57 -06:00
parent c5336b6bae
commit f7cc426358
8 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-table.css Normal file
View File

@@ -0,0 +1,124 @@
/*
=================================
TABLE AND 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
=================================
*/
/* 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;
}
}