pve_stats.css

main {
  position: unset;
}
img {
	min-height: 1em;
	max-height: 1em;
	min-width: 1em;
	max-width: 1em;
	vertical-align: middle;
	margin-bottom: 1px;
  margin-inline: .25em;
}
table {
  width: 100%;
}

#controls {
  font-size: 150%;
}
#select-boss {
  min-width: 26ch;
}
#select-server {grid-area: serv;}
#select-instance {grid-area: inst;}
#select-boss {grid-area: boss;}
#select-mode {grid-area: size;}
#difficulty-label {grid-area: diff;}
#submit-button {grid-area: subm;}
#controls {
  display: grid;
  grid-template-areas:
  'inst inst inst inst inst inst'
  'boss boss boss boss boss boss'
  'serv serv size diff subm subm';
  gap: .5rem;
}
@media (orientation: landscape) {
  #controls {
    margin-inline: 10rem;
    display: flex;
    justify-content: space-between;
    margin-inline: 10rem;
  }
}
@media (orientation: portrait) {
  #select-server {
    max-width: 8em;
  }
}

#stats-section {
  margin-top: 2rem;
}
#table-wrap {
  --left-column: 8rem;
  position: relative;
}
@media (orientation: landscape) {
  #stats-section {
    margin-inline: 5rem;
  }
  #table-wrap {
    --left-column: 13rem;
  }
}

#chart-timeline {
  position: absolute;
  left: var(--left-column);
  top: 0;
  right: 0;
  bottom: 0;
}
.chart-column {
  position: absolute;
  width: .1em;
  left: 1%;
  top: 0;
  bottom: 0;
  background-color: var(--table-border);
  z-index: 1;
  pointer-events: none;
}
.chart-column::after {
	content: attr(data-label);
	position: fixed;
	transform: translate(-40%, -100%);
}
@media (orientation: portrait) {
  .chart-column:nth-child(even):after {
    visibility: hidden;
  }
}

.top100 {color: #e5cc80;}
.top99 {color: #e268a8;}
.top95 {color: #ff8000;}
.top90 {color: #ff3c00;}
.top75 {color: #a335ee;}
.top50 {color: #0070ff;}
.passthrudiv,
.top10 {
  color: inherit;
}
.stats-cell-name {
  min-width: var(--left-column);
  width: var(--left-column);
  max-width: var(--left-column);
  color: inherit;
  text-wrap: nowrap;
}
.stats-cell-data {
  position: relative;
}
.stats-cell-data div {
	position: absolute;
  bottom: 0;
  width: .2em;
	height: 1em;
  z-index: 2;
  background-color: currentColor;
}
.stats-cell-data div::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  box-shadow: inset -.05em 0 black, -.05em 0 currentColor;
}
.stats-cell-data .top10 {
  height: .5em;
  transform: translateY(-50%);
}
.stats-cell-data .passthrudiv {
  height: .2em;
  transform: translateY(-200%);
}


#table-sort {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
@media (max-width: 1600px) {
  #table-sort button {
    font-size: 75%;
  }
}
#table-sort button {
  display: block;
  text-align: center;
}
#table-sort button span {
  display: inline-block;
  height: 1em;
  width: 1em;
  background-color: currentColor;
  margin-right: .5em;
}


#the-tooltip {
  position: absolute;
  width: fit-content;
  background-color: var(--background);
  padding: .5em;
  border-radius: 6px;
  box-shadow: inset 0 0 .25rem .1rem var(--primary-color), 0 0 .5rem .1rem var(--primary-color);
	transform: translateX(-100%);
  z-index: 5;
}
#the-tooltip p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
#the-tooltip .column-names td {
  text-align: center;
}
#the-tooltip .percentile,
#the-tooltip .npoints {
  min-width: 4rem;
  text-align: right;
}
#the-tooltip td:first-of-type {
  min-width: 8ch;
  text-align: left;
}