Add merged scoreboard.css

This commit is contained in:
Neale Pickett 2023-09-27 17:15:51 -06:00
parent 34e51848be
commit b293a9f0e9
1 changed files with 110 additions and 0 deletions

View File

@ -5,6 +5,116 @@
}
}
#rankings span {
font-size: 75%;
display: inline-block;
overflow: hidden;
height: 1.7em;
}
#rankings span.teamname {
font-size: inherit;
color: white;
text-shadow: 0 0 3px black;
opacity: 0.8;
position: absolute;
right: 0.2em;
background-color: #292929;
background-blend-mode: darken;
padding: 0em 0.2em;
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
margin:0em;
height: 1.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition-property: max-width;
transition-duration: 2s;
transition-delay: 0s;
}
#rankings span.teamname:hover {
max-width: 100%;
}
#rankings span.teampoints {
font-size:100%;
height:1.2em;
margin:0em;
padding:0em;
width:99%;
}
/* Responsive design */
/* Defaults */
#rankings span.teampoints {
max-width:89%;
}
#rankings span.teamname {
max-width:10%;
}
/* Monitors with large enough screens to do side by side */
@media only screen and (min-width: 170em) {
#chart, #rankings {
width: 49%;
display:inline-block;
vertical-align:middle;
}
}
/* Monitor
@media only screen and (max-width: 130em) {
#chart, #rankings {
width: 49%;
display:inline-block;
vertical-align: middle;
}
#rankings span.teampoints {
max-width:89%;
}
#rankings span.teamname {
max-width:10%;
}
}
/* Laptop size screen */
@media only screen and (max-width: 100em) {
#rankings span.teampoints {
max-width:84%;
}
#rankings span.teamname {
max-width:15%;
}
}
/* Roughly Tablet size */
@media only screen and (max-width: 70em) {
#rankings span.teampoints {
max-width:79%;
}
#rankings span.teamname {
max-width:20%;
}
}
/* Small screens phone size */
@media only screen and (max-width: 40em) {
#rankings span.teampoints {
max-width:65%;
}
#rankings span.teamname {
max-width:34%;
}
}
#chart {
background-color: rgba(0, 0, 0, 0.8);
}