Grinch-AP/WebHostLib/static/styles/sc2Tracker.css

*{
  margin: 0;
  font-family: "JuraBook", monospace;
}
body{
  --icon-size: 36px;
  --item-class-padding: 4px;
}
a{
  color: #1ae;
}

/* Section colours */
#player-info{
  background-color: #37a;
}
.player-tracker{
  max-width: 100%;
}
.tracker-section{
  background-color: grey;
}
#terran-items{
  background-color: #3a7;
}
#zerg-items{
  background-color: #d94;
}
#protoss-items{
  background-color: #37a;
}
#nova-items{
  background-color: #777;
}
#kerrigan-items{
  background-color: #a37;
}
#keys{
  background-color: #aa2;
}

/* Sections */
.section-body{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 3px;
}
.section-body-2{
  display: flex;
  flex-direction: column;
}
.tracker-section:has(input.collapse-section[type=checkbox]:checked) .section-body,
.tracker-section:has(input.collapse-section[type=checkbox]:checked) .section-body-2{
  display: none;
}
.section-title{
  position: relative;
  border-bottom: 3px solid black;
  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
input[type="checkbox"]{
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.section-title:hover h2{
  text-shadow: 0 0 4px #ddd;
}
.f {
  display: flex;
  overflow: hidden;
}

/* Acquire item filters */
.tracker-section img{
  height: 100%;
  width: var(--icon-size);
  height: var(--icon-size);
  background-color: black;
}
.unacquired, .lvl-0 .f{
  filter: grayscale(100%) contrast(80%) brightness(42%) blur(0.5px);
}
.spacer{
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Item groups */
.item-class{
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: var(--item-class-padding);
}
.item-class-header{
  display: flex;
  flex-flow: row;
}
.item-class-upgrades{
  /* Note: {display: flex; flex-flow: column wrap} */
  /* just breaks on Firefox (width does not scale to content) */
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
}

/* Subsections */
.section-toc{
  display: flex;
  flex-direction: row;
}
.toc-box{
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}
.toc-box:hover{
  text-shadow: 0 0 7px white;
}
.ss-header{
  position: relative;
  text-align: center;
  writing-mode: sideways-lr;
  user-select: none;
  padding-top: 5px;
  font-size: 115%;
}
.tracker-section:has(input.ss-1-toggle:checked) .ss-1{
  display: none;
}
.tracker-section:has(input.ss-2-toggle:checked) .ss-2{
  display: none;
}
.tracker-section:has(input.ss-3-toggle:checked) .ss-3{
  display: none;
}
.tracker-section:has(input.ss-4-toggle:checked) .ss-4{
  display: none;
}
.tracker-section:has(input.ss-5-toggle:checked) .ss-5{
  display: none;
}
.tracker-section:has(input.ss-6-toggle:checked) .ss-6{
  display: none;
}
.tracker-section:has(input.ss-7-toggle:checked) .ss-7{
  display: none;
}
.tracker-section:has(input.ss-1-toggle:hover) .ss-1{
  background-color: #fff5;
  box-shadow: 0 0 1px 1px white;
}
.tracker-section:has(input.ss-2-toggle:hover) .ss-2{
  background-color: #fff5;
  box-shadow: 0 0 1px 1px white;
}
.tracker-section:has(input.ss-3-toggle:hover) .ss-3{
  background-color: #fff5;
  box-shadow: 0 0 1px 1px white;
}
.tracker-section:has(input.ss-4-toggle:hover) .ss-4{
  background-color: #fff5;
  box-shadow: 0 0 1px 1px white;
}
.tracker-section:has(input.ss-5-toggle:hover) .ss-5{
  background-color: #fff5;
  box-shadow: 0 0 1px 1px white;
}
.tracker-section:has(input.ss-6-toggle:hover) .ss-6{
  background-color: #fff5;
  box-shadow: 0 0 1px 1px white;
}
.tracker-section:has(input.ss-7-toggle:hover) .ss-7{
  background-color: #fff5;
  box-shadow: 0 0 1px 1px white;
}

/* Progressive items */
.progressive{
  max-height: var(--icon-size);
  display: contents;
}

.lvl-0 > :nth-child(2),
.lvl-0 > :nth-child(3),
.lvl-0 > :nth-child(4),
.lvl-0 > :nth-child(5){
  display: none;
}
.lvl-1 > :nth-child(2),
.lvl-1 > :nth-child(3),
.lvl-1 > :nth-child(4),
.lvl-1 > :nth-child(5){
  display: none;
}
.lvl-2 > :nth-child(1),
.lvl-2 > :nth-child(3),
.lvl-2 > :nth-child(4),
.lvl-2 > :nth-child(5){
  display: none;
}
.lvl-3 > :nth-child(1),
.lvl-3 > :nth-child(2),
.lvl-3 > :nth-child(4),
.lvl-3 > :nth-child(5){
  display: none;
}
.lvl-4 > :nth-child(1),
.lvl-4 > :nth-child(2),
.lvl-4 > :nth-child(3),
.lvl-4 > :nth-child(5){
  display: none;
}
.lvl-5 > :nth-child(1),
.lvl-5 > :nth-child(2),
.lvl-5 > :nth-child(3),
.lvl-5 > :nth-child(4){
  display: none;
}

/* Filler item counters */
.item-counter{
  display: table;
  text-align: center;
  padding: var(--item-class-padding);
}
.item-count{
  display: table-cell;
  vertical-align: middle;
  padding-left: 3px;
  padding-right: 15px;
}

/* Hidden items */
.hidden-class:not(:has(img.acquired)){
  display: none;
}
.hidden-item:not(.acquired){
  display:none;
}

/* Keys */
#keys ol, #keys ul{
  columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3;
}
#keys li{
  padding-right: 15pt;
}

/* Locations */
#section-locations{
    padding-left: 5px;
}
@media only screen and (min-width: 120ch){
  #section-locations ul{
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }
}
#locations li.checked{
  list-style-type: "✔ ";
}

/* Allowing scrolling down a little further */
.bottom-padding{
  min-height: 33vh;
}