mirror of https://github.com/dirtbags/moth.git
Add merged scoreboard.css
This commit is contained in:
parent
34e51848be
commit
b293a9f0e9
|
@ -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 {
|
#chart {
|
||||||
background-color: rgba(0, 0, 0, 0.8);
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue