Endings/styles.css

/* wip */

/* table of orbs and endings */
.endings {
  table-layout: fixed !important;
  overflow: hidden;
}
.wikitable.endings th,
.wikitable.endings td {
  min-width: 20px;
  min-width: 20px;
  min-width: calc(100vw/34);
  max-width: calc(100vw/34);
  border-left-width: 1px;
  border-right-width: 0;
  border-top-width: 1px;
  border-bottom-width: 0;
}
.wikitable.endings tr:last-child th, 
.wikitable.endings tr:last-child td {
  border-bottom-width: 1px;
}
.wikitable.endings th:last-child,
.wikitable.endings td:last-child {
  border-right-width: 1px;
}
.skin-vector table.wikitable.endings td:first-child {
  max-width: 30px;
}

.unusual, .gold, .plus, .pure, .tox {
  font-size: 0.6em;
  line-height: 0;
  padding: 0;
}
.unusual.unusual.unusual {
  background-color: #a7410f;
}

.gold.gold.gold {
  background-color: gold;
  color: yellow;
  border-top-color: yellow;
  border-bottom-color: yellow;
}
.gold.gold.gold:nth-child(n+2) {
  border-left-color: yellow;
}
.gold.gold.gold:nth-last-child(n+2) {
  border-right-color: yellow;
}

.plus.plus.plus {
  background-color: blue;
  color: cyan;
}
.plus.plus.plus ~ .plus.plus.plus {
  border-left-color: cyan;
  border-right-width: 0;
}

.pure.pure.pure {
  background-color: blueviolet;
  border-top-color: blueviolet;
  border-bottom-color: blueviolet;
}

.tox.tox.tox {
  color: transparent;
  image-rendering: pixelated;
  background-color: #354e115c;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ+Ih5AAAAKlBMVEUAAAASQw9ws20CAwILFQpll2Rnm2VXjlVPg01poWdKe0hVplQWKxUwZC6uAZemAAAAAXRSTlMAQObYZgAAAGVJREFUeF5NyDEOQEAQheGROICVkChNuMBsR6NwgU3mArpt1OIC4gbbcwStwzGzBX/zvjz4lRgTUe5bpoef/SSolhBWufKT7KGwvaWI+1IU2FErSBGxAYGra1awYwWMzANEvfv1ADwqD0ePPRVeAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 80%;
}
.tox.tox.tox:nth-child(n+2) {
  border-left-color: #354e11;
}
.tox.tox.tox:nth-last-child(n+2) {
  border-right-color: #354e11;
}
.plus.plus.plus + .tox.tox.tox {
  border-left-color: red;
}
.tox.tox.tox + .plus.plus.plus {
  border-left-color: red;
}