|
|
|
|
@ -51,18 +51,23 @@ header { |
|
|
|
|
a { |
|
|
|
|
color: #707070; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
a:hover { |
|
|
|
|
color: #f39200; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
nav { |
|
|
|
|
display: flex; /* Use flexbox */ |
|
|
|
|
flex-wrap: wrap; /* Allow items to wrap onto multiple lines */ |
|
|
|
|
justify-content: flex-start; /* Align items to the start */ |
|
|
|
|
display: flex; |
|
|
|
|
/* Use flexbox */ |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
/* Allow items to wrap onto multiple lines */ |
|
|
|
|
justify-content: flex-start; |
|
|
|
|
/* Align items to the start */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
nav a { |
|
|
|
|
margin-right: 6px; /* Adjust the horizontal spacing between <a> elements */ |
|
|
|
|
margin-right: 6px; |
|
|
|
|
/* Adjust the horizontal spacing between <a> elements */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* a { |
|
|
|
|
@ -83,7 +88,9 @@ nav a { |
|
|
|
|
.wrapper { |
|
|
|
|
margin: 0px 10px; |
|
|
|
|
} |
|
|
|
|
@media print, screen and (min-width: 40em) { |
|
|
|
|
|
|
|
|
|
@media print, |
|
|
|
|
screen and (min-width: 40em) { |
|
|
|
|
.wrapper { |
|
|
|
|
margin: 0px 40px; |
|
|
|
|
} |
|
|
|
|
@ -159,6 +166,7 @@ tr { |
|
|
|
|
font-size: 1.2em; |
|
|
|
|
/* color: #707070; */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.semibold { |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
@ -191,9 +199,11 @@ tr { |
|
|
|
|
.padding-bottom-small { |
|
|
|
|
padding-bottom: 4px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.padding-bottom { |
|
|
|
|
padding-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.padding-top-small { |
|
|
|
|
padding-top: 4px; |
|
|
|
|
} |
|
|
|
|
@ -201,6 +211,7 @@ tr { |
|
|
|
|
.names { |
|
|
|
|
/* width: 70%; */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.team-names-box { |
|
|
|
|
height: 60px; |
|
|
|
|
} |
|
|
|
|
@ -214,29 +225,32 @@ tr { |
|
|
|
|
.player { |
|
|
|
|
flex: 1; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; /* Stack player names vertically */ |
|
|
|
|
flex-direction: column; |
|
|
|
|
/* Stack player names vertically */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.scores { |
|
|
|
|
display: flex; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.scores span { |
|
|
|
|
/* .score-span { |
|
|
|
|
width: 30px; /* Fixed width for each score cell */ |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.separator { |
|
|
|
|
*/ .separator { |
|
|
|
|
height: 1px; |
|
|
|
|
background-color: #707070; |
|
|
|
|
margin: 5px 0px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.score { |
|
|
|
|
display: inline-block; |
|
|
|
|
|
|
|
|
|
font-size: 1.4em; |
|
|
|
|
vertical-align: middle; |
|
|
|
|
text-align: center; |
|
|
|
|
padding: 0px 5px; |
|
|
|
|
/* width: 30px; */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.winner { |
|
|
|
|
@ -307,15 +321,19 @@ svg { |
|
|
|
|
.horizontal-padding { |
|
|
|
|
padding: 0px 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.horizontal-margin { |
|
|
|
|
margin: 0px 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.hpadding10 { |
|
|
|
|
padding: 0px 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.margin10 { |
|
|
|
|
margin: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.left-margin { |
|
|
|
|
margin-left: 10px; |
|
|
|
|
} |
|
|
|
|
@ -374,6 +392,7 @@ svg { |
|
|
|
|
.top-margin { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.top-margin20 { |
|
|
|
|
margin-top: 20px; |
|
|
|
|
} |
|
|
|
|
@ -400,12 +419,15 @@ svg { |
|
|
|
|
.vertical-padding { |
|
|
|
|
padding: 8px 0px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.topmargin5 { |
|
|
|
|
margin-top: 5px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.topmargin10 { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.topmargin20 { |
|
|
|
|
margin-top: 20px; |
|
|
|
|
} |
|
|
|
|
@ -440,6 +462,7 @@ svg { |
|
|
|
|
flex-grow: 1; |
|
|
|
|
text-align: right; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.team_image { |
|
|
|
|
height: 40px; |
|
|
|
|
width: 40px; |
|
|
|
|
@ -448,30 +471,39 @@ svg { |
|
|
|
|
.w15 { |
|
|
|
|
width: 15%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w20 { |
|
|
|
|
width: 20%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w25 { |
|
|
|
|
width: 25%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w30 { |
|
|
|
|
width: 30%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w40 { |
|
|
|
|
width: 40%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w50 { |
|
|
|
|
width: 50%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w60 { |
|
|
|
|
width: 60%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w70 { |
|
|
|
|
width: 70%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w80 { |
|
|
|
|
width: 80%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w100 { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
@ -479,18 +511,27 @@ svg { |
|
|
|
|
.w20px { |
|
|
|
|
width: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w30px { |
|
|
|
|
width: 30px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w40px { |
|
|
|
|
width: 40px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w60px { |
|
|
|
|
width: 60px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w70px { |
|
|
|
|
width: 7px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w80px { |
|
|
|
|
width: 80px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w100px { |
|
|
|
|
width: 100px; |
|
|
|
|
} |
|
|
|
|
@ -498,35 +539,44 @@ svg { |
|
|
|
|
.table-row-2-colums { |
|
|
|
|
display: grid; |
|
|
|
|
grid-template-columns: 2fr 60px; |
|
|
|
|
align-items: center; /* Vertically center the content within each column */ |
|
|
|
|
align-items: center; |
|
|
|
|
/* Vertically center the content within each column */ |
|
|
|
|
padding: 5px 0px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.table-row-2-colums-test { |
|
|
|
|
display: grid; |
|
|
|
|
grid-template-columns: 1px auto 100px; |
|
|
|
|
align-items: center; /* Vertically center the content within each column */ |
|
|
|
|
align-items: center; |
|
|
|
|
/* Vertically center the content within each column */ |
|
|
|
|
padding: 5px 0px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.table-row-3-colums { |
|
|
|
|
display: grid; |
|
|
|
|
grid-template-columns: auto 1fr auto; |
|
|
|
|
align-items: center; /* Vertically center the content within each column */ |
|
|
|
|
align-items: center; |
|
|
|
|
/* Vertically center the content within each column */ |
|
|
|
|
padding: 5px 0px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.table-row-4-colums { |
|
|
|
|
display: grid; |
|
|
|
|
grid-template-columns: 1px auto 50px 70px 100px; /* first column is a hack */ |
|
|
|
|
align-items: center; /* Vertically center the content within each column */ |
|
|
|
|
grid-template-columns: 1px auto 50px 70px 100px; |
|
|
|
|
/* first column is a hack */ |
|
|
|
|
align-items: center; |
|
|
|
|
/* Vertically center the content within each column */ |
|
|
|
|
padding: 5px 0px; |
|
|
|
|
} |
|
|
|
|
@media print, screen and (min-width: 80em) { |
|
|
|
|
|
|
|
|
|
@media print, |
|
|
|
|
screen and (min-width: 80em) { |
|
|
|
|
.table-row-4-colums { |
|
|
|
|
display: grid; |
|
|
|
|
grid-template-columns: 1px auto 50px 70px 180px; /* first column is a hack */ |
|
|
|
|
align-items: center; /* Vertically center the content within each column */ |
|
|
|
|
grid-template-columns: 1px auto 50px 70px 180px; |
|
|
|
|
/* first column is a hack */ |
|
|
|
|
align-items: center; |
|
|
|
|
/* Vertically center the content within each column */ |
|
|
|
|
padding: 5px 0px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -534,7 +584,8 @@ svg { |
|
|
|
|
.table-row-5-colums { |
|
|
|
|
display: grid; |
|
|
|
|
grid-template-columns: 60px auto 50px 70px 130px; |
|
|
|
|
align-items: center; /* Vertically center the content within each column */ |
|
|
|
|
align-items: center; |
|
|
|
|
/* Vertically center the content within each column */ |
|
|
|
|
padding: 5px 0px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -545,7 +596,8 @@ svg { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.table-cell-large { |
|
|
|
|
grid-column: 2 / span 1; /* Center column spans from column 2 to column 3 */ |
|
|
|
|
grid-column: 2 / span 1; |
|
|
|
|
/* Center column spans from column 2 to column 3 */ |
|
|
|
|
text-align: left; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -553,7 +605,8 @@ svg { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
height: 100vh; /*the height will need to be customized*/ |
|
|
|
|
height: 100vh; |
|
|
|
|
/*the height will need to be customized*/ |
|
|
|
|
width: 50px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|