moth

scoreboard.css

  1/* GHC displays: 1024x1820 */
  2@media screen and (max-aspect-ratio: 4/5) and (min-height: 1600px) {
  3  html {
  4    font-size: 20pt;
  5  }
  6}
  7
  8.location {
  9  color: #acf;
 10  background-color: #0008;
 11  position: fixed;
 12  right: 30vw;
 13  bottom: 0;
 14  padding: 1em;
 15  margin: 0;
 16  font-size: 1.2rem;
 17  font-weight:bold;
 18  text-decoration: underline;
 19}
 20
 21.no-scores {
 22  display: flex;
 23  justify-content: space-around;
 24  align-items: center;
 25  flex-wrap: wrap;
 26  min-height: calc(100vh - 2em);
 27}
 28.no-scores.hidden {
 29  display: none;
 30}
 31.no-scores img {
 32  object-fit: cover;
 33  max-height: 60vh;
 34}
 35
 36/* Only the first child of a rotate class is visible */
 37.rotate > div:nth-child(n + 2) {
 38  display: none;
 39}
 40
 41/** Scoreboard */
 42.rankings.classic {
 43	width: 100%;
 44	position: relative;
 45  background-color: #000c;
 46}
 47.rankings.classic div {
 48  height: 1.2rem;
 49  display: flex;
 50  align-items: center;
 51}
 52.rankings.classic div:nth-child(6n){
 53  background-color: #ccc3;
 54}
 55.rankings.classic div:nth-child(6n+3) {
 56  background-color: #0f03;
 57}
 58
 59.rankings.classic span {
 60  display: inline-block;
 61  overflow: hidden;
 62}
 63.rankings.classic span.category {
 64  font-size: 80%;
 65}
 66.rankings.classic span.teamname {
 67  height: auto;
 68	font-size: inherit;
 69	color: white;
 70  background-color: #000e;
 71  border-radius: 3px;
 72	position: absolute;
 73	right: 0.2em;
 74}
 75.rankings.classic span.teamname:hover,
 76.rankings.classic span.category:hover {
 77  width: inherit;
 78  max-width: 100%;
 79}
 80.topscore::before {
 81  content: "✩";
 82  font-size: 75%;
 83  vertical-align: top;
 84}
 85
 86.rankings.category {
 87  display: flex;
 88  flex-wrap: wrap;
 89  justify-content: space-evenly;
 90}
 91.rankings.category div {
 92  border: solid black 2px;
 93  min-width: 15em;
 94}
 95.rankings.category table {
 96  width: 100%;
 97}
 98.rankings.category td.number {
 99  text-align: right;
100}
101
102@media only screen and (max-width: 450px) {
103  .rankings.classic span.teamname {
104    max-width: 6em;
105    text-overflow: ellipsis;
106  }
107  span.teampoints {
108    max-width: 80%;
109  }
110}
111
112.rankings div * {white-space: nowrap;}
113.cat0, .cat8, .cat16 {background-color: #a6cee3; color: black;}
114.cat1, .cat9, .cat17 {background-color: #1f78b4; color: white;}
115.cat2, .cat10, .cat18 {background-color: #b2df8a; color: black;}
116.cat3, .cat11, .cat19 {background-color: #33a02c; color: white;}
117.cat4, .cat12, .cat20 {background-color: #fb9a99; color: black;}
118.cat5, .cat13, .cat21 {background-color: #e31a1c; color: white;}
119.cat6, .cat14, .cat22 {background-color: #fdbf6f; color: black;}
120.cat7, .cat15, .cat23 {background-color: #ff7f00; color: black;}