josh/NHL-Scoreboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove unnecessary comments

Browse Source
This commit is contained in:
Goddard
2024-02-20 01:35:24 -05:00
parent 6abcd2e448
commit 24de212b98
1 changed files with 70 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
app/static/styles.css
View File

@@ -1,7 +1,7 @@
body { body {
background-color: #121212; /* Dark background color */ background-color: #121212;
font-family: Arial, sans-serif; /* Use a common sans-serif font */ font-family: Arial, sans-serif;
color: #fff; /* White text color */ color: #fff;
margin: 0; margin: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@@ -11,7 +11,7 @@ h1 {
text-align: center; text-align: center;
margin-top: 15px; margin-top: 15px;
margin-bottom: 25px; margin-bottom: 25px;
color: #f2f2f2; /* Lighten the text color */ color: #f2f2f2;
} }
.scoreboard { .scoreboard {
@@ -22,13 +22,13 @@ h1 {
} }
.game-box { .game-box {
background-color: #333; /* Dark background color for game boxes */ background-color: #333;
border-radius: 12px; /* Rounded corners */ border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 1%; padding: 1%;
width: 16%; width: 16%;
max-width: 300px; max-width: 300px;
position: relative; /* Position relative for absolute positioning */ position: relative;
margin-left: 1%; margin-left: 1%;
margin-right: 1%; margin-right: 1%;
margin-bottom: 1.15%; margin-bottom: 1.15%;
@@ -38,7 +38,7 @@ h1 {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 2%; margin-bottom: 2%;
margin-top: 9%; /* Added margin-top */ margin-top: 9%;
} }
.team-info-column { .team-info-column {
@@ -77,19 +77,19 @@ h1 {
} }
.team-sog { .team-sog {
font-size: 65%; /* Adjust font size as needed */ font-size: 65%;
color: #ddd; /* Lighter text color */ color: #ddd;
} }
.team-power-play { .team-power-play {
font-size: 12px; /* Adjust font size as needed */ font-size: 12px;
color: red; /* Set color to red */ color: red;
margin-left: 10px; /* Add some margin for spacing */ margin-left: 10px;
} }
.game-info { .game-info {
margin-top: 12px; margin-top: 12px;
color: #aaa; /* Lighten the text color */ color: #aaa;
text-align: center; text-align: center;
font-size: 80%; font-size: 80%;
} }
@@ -111,31 +111,31 @@ h1 {
.pre-state { .pre-state {
position: absolute; position: absolute;
top: 5%; top: 5%;
left: 3%; /* Adjusted left position */ left: 3%;
background-color: #444; /* Darker background color for pre state */ background-color: #444;
padding: 1.5%; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 65%; font-size: 65%;
color: #fff; /* White text color for live state */ color: #fff;
font-weight: bolder; /* Bold text for live state */ font-weight: bolder;
z-index: 1; /* Ensure the live state box is above other content */ z-index: 1;
width: auto; width: auto;
height: 10%; height: 10%;
display: flex; /* Use flexbox */ display: flex;
justify-content: space-evenly; /* Center content horizontally */ justify-content: space-evenly;
align-items: center; /* Center content vertically */ align-items: center;
} }
.final-state { .final-state {
position: absolute; position: absolute;
top: 5%; top: 5%;
left: 3%; /* Adjusted left position */ left: 3%;
background-color: #444; /* Darker background color for final state */ background-color: #444;
padding: 1.5%; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 65%; font-size: 65%;
color: #ddd; /* Lighter text color for final state */ color: #ddd;
z-index: 1; /* Ensure the final state box is above other content */ z-index: 1;
font-weight: bold; font-weight: bold;
width: auto; width: auto;
height: 7.5%; height: 7.5%;
@@ -144,32 +144,31 @@ h1 {
.live-state { .live-state {
position: absolute; position: absolute;
top: 4%; top: 4%;
left: 4%; /* Adjusted left position */ left: 4%;
background-color: #0b6e31; /* Darker green background color for live state */ background-color: #0b6e31;
padding: 1.5%; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 80%; font-size: 80%;
color: #fff; /* White text color for live state */ color: #fff;
font-weight: bolder; /* Bold text for live state */ font-weight: bolder;
z-index: 1; /* Ensure the live state box is above other content */ z-index: 1;
width: 7.2%; width: 7.2%;
height: 7.5%; height: 7.5%;
} }
.live-time { .live-time {
position: absolute; position: absolute;
top: 4%; top: 4%;
left: 16%; /* Adjusted left position */ left: 16%;
background-color: #444; /* Darker background color for time box */ background-color: #444;
padding: 1.5%; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 80%; font-size: 80%;
color: #ddd; /* Lighter text color for time box */ color: #ddd;
z-index: 1; /* Ensure the time box is above other content */ z-index: 1;
display: flex; /* Use flexbox */ display: flex;
justify-content: space-evenly; /* Center content horizontally */ justify-content: space-evenly;
align-items: center; /* Center content vertically */ align-items: center;
width: 12.5%; width: 12.5%;
height: 7.5%; height: 7.5%;
} }
@@ -177,14 +176,14 @@ h1 {
.live-state-intermission { .live-state-intermission {
position: absolute; position: absolute;
top: 5%; top: 5%;
left: 4%; /* Adjusted left position */ left: 4%;
background-color: #444; /* Darker green background color for live state */ background-color: #444;
padding: 1.5%; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 80%; font-size: 80%;
color: #fff; /* White text color for live state */ color: #fff;
font-weight: bolder; /* Bold text for live state */ font-weight: bolder;
z-index: 1; /* Ensure the live state box is above other content */ z-index: 1;
width: 15.5%; width: 15.5%;
height: 7.5%; height: 7.5%;
display: flex; display: flex;
@@ -192,22 +191,21 @@ h1 {
align-items: center; align-items: center;
} }
.live-time-intermission { .live-time-intermission {
position: absolute; position: absolute;
top: 5%; top: 5%;
left: 24%; /* Adjusted left position */ left: 24%;
background-color: #444; /* Darker background color for time box */ background-color: #444;
padding: 1.5%; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 80%; font-size: 80%;
color: #ddd; /* Lighter text color for time box */ color: #ddd;
z-index: 1; /* Ensure the time box is above other content */ z-index: 1;
width: 12.5%; width: 12.5%;
height: 7.5%; height: 7.5%;
display: flex; /* Use flexbox */ display: flex;
justify-content: space-evenly; /* Center content horizontally */ justify-content: space-evenly;
align-items: center; /* Center content vertically */ align-items: center;
} }
#live-games-section { #live-games-section {
@@ -231,8 +229,6 @@ h1 {
justify-content: flex-start; justify-content: flex-start;
} }
/* Existing CSS styles */
/* Add media query for smaller screens */ /* Add media query for smaller screens */
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.scoreboard { .scoreboard {
@@ -250,23 +246,23 @@ h1 {
} }
.team-info { .team-info {
align-items: center; /* Center align items */ align-items: center;
margin-top: 10%; /* Adjust top margin */ margin-top: 10%;
margin-bottom: 2%; /* Adjust bottom margin */ margin-bottom: 2%;
} }
.team-logo { .team-logo {
width: 12%; /* Adjust logo size */ width: 12%;
height: auto; height: auto;
} }
.team-name { .team-name {
font-size: 100%; /* Decrease font size for better readability */ font-size: 100%;
font-weight: bold; font-weight: bold;
} }
.team-score { .team-score {
font-size: 140%; /* Decrease font size for better readability */ font-size: 140%;
font-weight: bold; font-weight: bold;
} }
@@ -275,12 +271,12 @@ h1 {
} }
.game-info { .game-info {
font-size: 90%; /* Decrease font size for better readability */ font-size: 90%;
} }
.live-state { .live-state {
top: 4%; top: 4%;
left: 3%; /* Adjusted left position */ left: 3%;
padding: 1.5%; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 80%; font-size: 80%;
@@ -290,20 +286,20 @@ h1 {
.live-time { .live-time {
top: 4%; top: 4%;
left: 13%; /* Adjusted left position */ left: 13%;
padding: 1.5%; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 80%; font-size: 80%;
display: flex; /* Use flexbox */ display: flex;
justify-content: space-evenly; /* Center content horizontally */ justify-content: space-evenly;
align-items: center; /* Center content vertically */ align-items: center;
width: 7%; width: 7%;
height: 7.2%; height: 7.2%;
} }
.live-state-intermission { .live-state-intermission {
top: 5%; top: 5%;
left: 4%; /* Adjusted left position */ left: 4%;
padding: 1.5%; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 80%; font-size: 80%;
@@ -316,20 +312,20 @@ h1 {
.live-time-intermission { .live-time-intermission {
top: 5%; top: 5%;
left: 24%; /* Adjusted left position */ left: 24%;
padding: 1.5%; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 80%; font-size: 80%;
width: 12.5%; width: 12.5%;
height: 7.5%; height: 7.5%;
display: flex; /* Use flexbox */ display: flex;
justify-content: space-evenly; /* Center content horizontally */ justify-content: space-evenly;
align-items: center; /* Center content vertically */ align-items: center;
} }
.final-state { .final-state {
top: 5%; top: 5%;
left: 4%; /* Adjusted left position */ left: 4%;
padding: 1.5%; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 72%; font-size: 72%;
@@ -339,7 +335,7 @@ h1 {
.pre-state { .pre-state {
top: 4%; top: 4%;
left: 4%; /* Adjusted left position */ left: 4%;
padding: 1.5%; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 80%; font-size: 80%;