style.css

:root {
  --hue: 264;
  --hue: 270;
  --hue: 268;
  --hue: 266;
  --hue: 260;
  --hue: 262;
  --hue: 254;
  --hue: 256;
  --hue: 258;
  --hue: 264;
  --hue: 271;
  --primary-color: hsl(var(--hue), 76%, 53%);
  /* --primary-color: hsl(var(--hue), 100%, 50%); */
  /* --primary-color: hsl(316, 93%, 63%); */
  /* --primary-color: hsl(var(--hue), 50%, 50%); */
  /* --primary-color: hsl(var(--hue), 20%, 50%); */
  /* --secondary-color: hsl(var(--hue), 100%, 43%); */
  /* --secondary-color: hsl(var(--hue), 100%, 25%); */
  /* --secondary-color: hsl(var(--hue), 100%, 40%); */
  /* --secondary-color: hsl(var(--hue), 100%, 43%); */
  /* --secondary-color: hsl(var(--hue), 100%, 55%); */
  /* --secondary-color: hsl(var(--hue), 100%, 45%); */
  --secondary-color: hsl(var(--hue), 100%, 50%);

  --third-color: hsl(var(--hue), 60%, 50%);

  --hover-row: hsl(var(--hue), 100%, 5%);
  --link-color: hsl(var(--hue), 40%, 86%);
  --link-hover: hsl(var(--hue), 100%, 70%);
  --link-shadow: hsl(var(--hue), 100%, 50%);
  --slider-background: hsl(var(--hue), 100%, 33%);
  --dimmed: hsl(var(--hue), 100%, 40%);

  --link-text-shadow: burlywood;
  --link-text-shadow-hover: hsl(0, 100%, 40%);
  --hover: hsl(var(--hue), 100%, 35%);
  --highlight-color: hsl(0, 0%, 5%);
  --table-border: hsl(0, 0%, 8%);
  --unfocused: hsl(0, 0%, 37%);
 
  --text-color: gainsboro;
  --background: black;
  --background-color: black;
  /* --background: #212121; */
  /* --background: #101010; */
  /* --background: linear-gradient(180deg, rgba(57,57,57,1) 0%, rgba(0,0,0,1) 100%); */
  /* --background: #0c0c0c; */
  /* background: linear-gradient(180deg, rgba(57,57,57,1) 0%, rgba(0,0,0,1) 30%); */

  --bottom-row-one: 2rem;
  --bottom-row-two: 7.5vh;
  /* --bottom-row-one: 3ch; */
  --bottom-row-two: 3.5rem;
  --nav-height: 2.5rem;
  --padding-top: .5rem;
  --margin-top: calc(var(--nav-height) + var(--padding-top));
}

/* class colors */
.death-knight {color:crimson}
.mage {color:lightskyblue}
.shaman {color:hsl(221, 100%, 50%)}
.rogue {color:gold}
.hunter {color:yellowgreen}
.paladin {color:violet}
.priest {color:whitesmoke}
.warrior {color:sienna}
.druid {color:darkorange}
.warlock {color:slateblue}
/* spell colors */
.holy {color:goldenrod}
.fire {color:orangered}
.nature {color:hsl(120, 100%, 35%)}
.frost {color:skyblue}
.shadow {color:darkslateblue}
.arcane {color:mediumpurple}
.froststrike {color:lightgray}
.frostfire {color:indianred}
.shadowstrike {color:rebeccapurple}
.shadowstorm {color:teal}
.shadowfrost {color:slateblue}
.divine {color:violet}
.spellshadow {color:purple}
.firestorm {color:hsl(85, 100%, 40%)}
.shadowlight {color:hsl(40, 75%, 30%)}
.chaos {color:hsl(263, 100%, 30%)}
.holyfire {color:hsl(50, 100%, 80%)}
.froststorm {color:hsl(200, 100%, 85%)}
.spellfire {color:hsl(345, 100%, 50%)}
.stormstrike {color:hsl(120, 100%, 20%)}
.flamestrike {color:hsl(345, 100%, 30%)}

.holystorm,
.holyfrost,
.shadowflame,
.spellstrike,
.spellstorm,
.spellfrost,
.elemental,
.chromatic,
.magic {
  color:hsla(0, 0%, 50%, 0.5);
}

.top100 {color: #e5cc80;}
.top99 {color: #e268a8;}
.top95 {color: #ff8000;}
.top90 {color: #ff3c00;}
.top75 {color: #a335ee;}
.top50 {color: #0070ff;}
.top25 {color: #1eff00;}
.top0 {color: #666666;}

:root {
  color: var(--text-color);
  font-size: 1.6vh;
  background: var(--background-color);
}
@media (orientation: landscape) {
  :root {
    font-size: 2vh;
  }
}
* {
  text-decoration: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  /* font-size: inherit; */
  /* color: inherit; */
}
body {
  position: relative;
  font-family: Ubuntu;
  color: var(--text-color);
  background-color: var(--background);
  margin-top: var(--margin-top);
}

/* Hide scrollbar */
html {
  overflow: none;
  -ms-overflow-style: none; /*IE Edge*/
  scrollbar-width: none;  /*Firefox*/
}
html::-webkit-scrollbar {
  display: none; /*Chrome Safari Opera*/
}

label,
button,
select,
input {
  font-size: inherit;
  color: inherit;
}

a {
  color: var(--text-color);
  text-shadow: 0 .1em .5em var(--secondary-color);
  text-shadow: .1em .1em .5em var(--secondary-color);
  text-shadow: .1em .1em .25em var(--secondary-color);
  text-shadow: .1em .1em 1em var(--secondary-color);
  text-shadow: 0 0 1em var(--link-shadow);
}
a:hover {
  color: var(--link-hover);
  /* text-shadow: 0 0 3rem currentColor, 0 0 1rem currentColor; */
  /* text-shadow: .1em .1em .4em var(--link-text-shadow-hover); */
}
.player-cell > a,
.spell-name > a {
  text-shadow: 0 0 3em currentColor;
}
/* a:not([class]) {
  color: var(--gainsboro);
  text-shadow: 0 .1em .5em var(--link-text-shadow);
  text-shadow: 0 .1em .5em var(--secondary-color);
}

a:not([class]):hover {
  color: var(--link-hover);
  text-shadow: .1em .1em .4em var(--link-text-shadow-hover);
} */

#home-button {
  text-align: center;
  color: var(--third-color);
  padding: 0 1em;
  text-shadow: 0 0 2em silver, 0 0 1em currentColor;
  /* animation-name: homebutton; */
  /* animation-duration: 4s; */
  /* animation-iteration-count: infinite; */
}
/* @keyframes homebutton {
  0%,
  100% {color: var(--third-color);}
  50%  {color: var(--primary-color);}
} */
#home-button:hover {
  text-shadow: .1em .1em .4em var(--link-text-shadow-hover);
}

ul {
  list-style-type: none;
  padding: 0;
}


/* HOME PAGE */
#home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#home-page h1 {
  font-size: 300%;
  color: var(--primary-color);
  text-shadow: .1em .1em .5em var(--link-text-shadow-hover);
}
#home-page h2 {
  font-size: 200%;
}
#home-page h2 span {
  font-size: 40%;
  bottom: 1em;
  position: relative;
}

td:is(.spell-name, .player-cell) img {
  display: inline-block;
  vertical-align: text-bottom;
  max-height: 1.1em;
  max-width: 1.1em;
  min-height: 1.1em;
  min-width: 1.1em;
}

main {
  position: relative;
  margin-bottom: var(--bottom-row-one);
}

nav,
footer {
  position: fixed;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  background-color: var(--background);
  z-index: 20;
}
nav {
  top: 0;
  display: grid;
  font-size: 200%;
}
nav::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: .5rem;
  background-color: var(--background);
}
nav::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  box-shadow:
    inset 0 -.5rem .5rem -.5rem var(--primary-color),
    0 .75rem 1.5rem -.5rem var(--primary-color);
}

#top-nav {
  display: none;
  position: absolute;
  width: 100%;
  text-wrap: nowrap;
}
#top-nav > a {
  text-align: center;
  width: 100%;
}
#top-chkbox {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 1ch;
}

@media (max-aspect-ratio: 3/2) {
  #top-nav {
    top: var(--margin-top);
    background-color: var(--background);
    box-shadow:
      inset 0 -.5rem .5rem -.5rem var(--primary-color),
      0 .75rem 1.5rem -.5rem var(--primary-color);
  }
  #open-top:checked ~ #top-nav {
    display: grid;
  }
}

@media (min-aspect-ratio: 3/2) {
  nav,
  #top-nav {
    display: inline-block;
  }
  #top-chkbox {
    display: none;
  }
  #top-nav > a {
    margin-left: 2vw;
  }
}


footer {
  display: flex;
  align-items: end;
  bottom: 0;
  height: var(--bottom-row-one);
  background-color: var(--background);
}
footer::before {
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow:
  inset 0 .5rem 1rem -.5rem var(--primary-color),
        0 -.75rem 1.5rem -.5rem var(--primary-color);
}

#bot-nav {
  display: none;
  grid-auto-flow: row;
}

#bot-nav > a {
  font-size: 150%;
}

.special-tab {
  color: var(--link-color);
  text-shadow: .1em .1em .5em hsl(20, 100%, 65%);;
}

.special-tab:hover {
  color: var(--link-hover);
  text-shadow: .1em .1em .4em var(--link-text-shadow-hover);
}

#bot-chkbox {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 1ch;
  font-size: 150%;
}
#open-bot:checked ~ #bot-nav {
  display: grid;
  position: absolute;
  left: 0;
  bottom: var(--bottom-row-one);
  width: 100%;
  background-color: var(--background);
  box-shadow: inset 0 .5rem .5rem -.5rem var(--primary-color), 0 -.75rem 1.5rem -.5rem var(--primary-color)
}

@media (min-aspect-ratio: 3/2) {
  footer > ul {
    row-gap: 1rem;
  }
  #bot-nav {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-left: 1rem;
    position: unset;
  }
  footer #report-slice a {
    font-size: 150%;
    /* grid-auto-columns: min-content; */
  }
  #bot-chkbox {
    display: none;
  }
  #slice-name {
    overflow: unset;
  }
}

/* FILTERED SPELLS */
#spells-search {
  font-size: 150%;
  padding-left: .2em;
  padding-right: .2em;
  width: 14ch;
}
#filtered-spells-container {
  position: absolute;
  right: 0;
  bottom: 0;
}
#filtered-spells-wrap {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 1rem;
}
#filtered-spells-container > div {
  display: none;  
  position: absolute;
  width: max-content;
  bottom: 100%;
  right: 0;
  z-index: 1;
  background-color: var(--background);
  box-shadow: inset 0 0 .5em var(--primary-color);
  border-radius: .5em;
}
#filtered-spells-container:focus-within > div {
  display: block;
}
#filtered-spells > a {
  display: table-row;
}
#filtered-spells > a:hover span {
  color: var(--link-hover);
  text-shadow: .1em .1em .5em var(--link-text-shadow-hover);
}
#filtered-spells > a > span {
  display: table-cell;
  font-size: inherit;
  padding-right: 1ch;
  text-align: left;
  min-width: max-content;
}
#filtered-spells > a > span:first-child {
  min-width: 6ch;
  text-align: right;
  }
#filtered-spells > a > span:last-child {
  width: 9em;
}

/* BOSS SEGMENTS */

#top-row-wrap {
  display: flex;
  position: sticky;
  top: var(--margin-top);
  padding-block: var(--padding-top);
  background-color: var(--background);
  flex-direction: column;
  justify-content: space-between;
  gap: .5em;
  z-index: 9;
}
@media (min-aspect-ratio: 5/4) {
  #top-row-wrap {
    flex-direction: row;
  }
}

.fights-container .wipe-link {color: crimson;}
.fights-container .kill-link {color: aquamarine;}

#top-row-wrap {
  max-width: 100%;
}
#report-slice,
#fights-container-wrap {
  max-width: calc(100vw - .25em);

}

#top-row-wrap h1,
#top-row-wrap h2,
#top-row-wrap .fights-dropdown-label {
  font-size: 1.75rem;
  line-height: 1;
}
@media (min-aspect-ratio: 5/4) {
  #top-row-wrap {
    flex-direction: row;
  }
}
#fights-container-wrap {
  display: flex;
  flex-direction: row;
  justify-self: end;
  align-self: end;
  gap: .25em;
}
#fights-container-wrap h1 {
  overflow: hidden;
}
#fights-container-wrap > h1 > a {
  display: block;
  white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  padding: .5em;
  margin: -.5em;
  padding-top: 0;
  margin-top: 0;
}
#report-slice a {
  display: inline-flex;
  gap: .25em;
  max-width: 100%;
}
#report-slice a span {
  text-align: left;
  padding: .25em;
  margin: -.25em;
}
#report-slice a:hover span {
  color: var(--link-hover);
}
#slice-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#slice-dur,
#slice-tries {
  min-width: max-content;
}

.fights-dropdown-label {
  border: 0;
  padding-block: 0;
  min-width: 4rem;
  text-align: center;
  text-shadow: .1em .1em .5em var(--link-text-shadow-hover);
}
.fights-container {
  position: relative;
}
.fights-container .bosses {
  position: absolute;
  right: 5%;
  z-index: 10;
}
.fights-container ul {
  display: none;
  padding: 0;
  min-width: max-content;
  background-color: var(--background);
  box-shadow: 0 0 0 .15rem var(--primary-color);
}
.fights-container a:hover {
  color: var(--link-hover);
  text-shadow: .1em .1em .5em var(--link-text-shadow-hover);
}
.fights-container li {
  position: relative;
}
.fights-container li:hover {
  background-color: var(--highlight-color); 
}
.fights-dropdown-cb:checked ~ .bosses,
.fights-container:hover .bosses, 
.fights-container .bosses li:hover > .diffs,
.fights-container .diffs li:hover > .segments {
  display: block;
}
.fights-container .diffs,
.fights-container .segments {
  position: absolute;
  top: 0;
}
.fights-container .diffs {
  z-index: 15;
}
.fights-container .segments {
  padding-inline: .5rem;
  z-index: 20;
}

@media (orientation: portrait) {
  .fights-container ul:not(.segments) > li::before {
    content: '>';
    box-shadow: inset -.2rem 0 var(--primary-color);
    padding-inline: 2rem;
    font-size: 125%;
  }
  .fights-container .diffs li {
    padding-block: .25rem;
  }
  .fights-container .diffs,
  .fights-container .segments {
    top: 100%;
    left: 5rem;
  }
}
@media (orientation: landscape) {
  .fights-container .diffs {
    transform: translateY(-1rem);
  }
  .fights-container .diffs,
  .fights-container .segments {
    right: 100%;
  }
  .fights-container .diffs li:first-of-type {
    padding-top: 1rem;
  }
  .fights-container li:last-of-type {
    padding-bottom: 1rem;
  }
  .fights-container ul a {
    padding-inline: 1em;
  }
}


#report-main-tables {
  display: grid;
  grid-auto-flow: row;
  justify-content: center;
}
@media (orientation: landscape) {
  #report-main-tables {
    grid-auto-flow: column;
  }
  #report-main-tables > section {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}


caption {
  text-transform: uppercase;
  font-weight: 600;
}
table, tr, th, td {
  border-spacing: 0;
  padding: 0;
}
th, td {
  border: 1px solid var(--table-border);
}

th {
  font-weight: 600;
  background-color: var(--table-border);
  cursor: pointer;
}
tbody > tr:nth-child(odd) > td {
  background-color: hsl(0, 0%, 3%);
}
tbody > tr:hover > td {
  background-color: var(--hover-row);
}
td {
  min-width: 1ch;
  background-color: var(--background);
  background-clip: padding-box;
}


/* TABLE CELLS */
#dmg-taken td {
  min-width: 12ch;
}

.add-player-rank > tbody:not(.table-has-total) tr,
.add-player-rank > tbody.table-has-total tr:nth-child(n+2) {
  counter-increment: rowNumber;
}
.add-player-rank td.player-cell::before {
  content: counter(rowNumber);
  display: inline-block;
  min-width: 2.5ch;
  text-align: right;
}
.add-player-rank .table-has-total tr:first-child .player-cell::before {
  content: '';
}
td.player-cell {
  text-align: left;
}
.boss-cell {
  min-width: 20ch;
}
.total-cell {
  width: 7em;
  min-width: 7em;
  text-align: right;
}
.rectangle-cell {
  min-width: 6rem;
}
.source-name {
  min-width: 15ch;
}
.per-sec-cell {
  width: 6em;
  min-width: 6em;
  text-align: right;
}

.uppestoftime {
  width: 78vw;
}
.buffs {
  display: inline;
  width: 25ch;
}
.buff-count {
  width: 6ch;
  text-align: right;
}
.percentage-cell {
  width: 6ch;
  text-align: right;
}


/* td > img {
  min-height: 1.1em;
  max-height: 1.1em;
  min-width: 1.1em;
  vertical-align: middle;
} */

/* INPUTS */

input[type="text"] {
  background: none;
  color: var(--unfocused);
  border: none;
  border-bottom: 3px solid currentColor;
  outline: none;
}
input[type="text"]:focus {
  color: var(--primary-color);
}

label,
select {
  cursor: pointer;
  display: inline-block;
  padding: 0.2rem;
  padding-bottom: 0;
  border: none;
  background-color: unset;
  color: var(--secondary-color);
  border-bottom: .2rem solid currentColor;
}
select {
  background-color: var(--background);
}
select > option {
  color: var(--text-color);
  font-size: 75%;
}

input:not(:checked) + label {
  color: var(--unfocused);
  color: var(--unfocused);
  border-bottom: .2rem solid currentColor;
}

input:not(:checked) + label:hover {
  color: var(--hover);
}

label:hover {
  text-shadow: 0 0 .5em currentColor;
}
label:hover,
select:hover {
  box-shadow: inset 0 0 .6em currentColor, 0 .1em 1em currentColor;
}

button {
  position: relative;
  cursor: pointer;
  padding: 0 .25em;
  background: var(--background);
  border: none;
  border-radius: .3rem;
}
button:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: inherit;
  box-shadow: inset  .1rem  .1rem .1em var(--primary-color),
              inset -.1rem -.1rem .1em var(--primary-color);
}
button:hover {
  color: var(--primary-color);
  box-shadow: inset 0 0 .4em currentColor, 0 .1em .7em currentColor;
  text-shadow: .1em .1em .4em var(--link-text-shadow-hover);
}

.panel,
input[type="radio"],
input[type="checkbox"],
.target-table td > div {
  display: none;
}

.target-checkbox-label {
  display: inline-block;
  padding-top: .2em;
  padding-bottom: .2em;
  padding-left: .5em;
  padding-right: .5em;
  font-size: 3vmin;
  margin-left: 1em;
  color: var(--unfocused);
  border-bottom: .15em solid;
  border-radius: .3em;
}

.panel > input:checked + label {
  color: hsl(var(--hue-rect), 100%, 25%);
  text-shadow: 0 0 .5em currentColor;
  box-shadow: inset 0 0 .6em currentColor, 0 .1em 1em currentColor;
}

.panel,
.target-table {
  margin-top: 2rem;
  left: 0;
}

.target-uptime {
  position: absolute;
  padding: .15em;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.target-table td:last-child {
  width: 80vw;
  position: relative;
}

.rectangle {  
  background-color: hsl(var(--hue-rect), 100%, 25%);
  height: 1em;
  float: left;
}


.table-players,
.table-damage {
  --min-width: 17ch;
  --max-width: 20ch;
}
.table-spells {
  --min-width: 15ch;
  --max-width: 32ch;
}
.table-wrap {
  --mult: 5;
  --sticky-column-width: clamp(var(--min-width), 20vw, var(--max-width));
  overflow: auto;
  scrollbar-color: var(--secondary-color) var(--background);
  height: 80vh;
  scrollbar-width: thin;
}
.table-wrap thead {
  position: sticky;
  top: 0;
  z-index: 5;
}
.table-wrap tfoot {
  position: sticky;
  bottom: 0;
  z-index: 5;
}
.table-wrap :is(td, th):first-of-type,
.table-wrap .sticky-column {
  position: sticky;
  left: 0;
  min-width: var(--sticky-column-width);
  max-width: var(--sticky-column-width);
  white-space: nowrap;
  overflow: hidden;
  z-index: 2;
}


#aura-controls {
  position: absolute;
  top: 0;
  right: 0;
}
#aura-controls button {
  min-width: unset;
  font-size: 80%;
}

#player .spell-name {
  position: relative;
}

#player label {
  z-index: 5;
}

.rectangle.gray {
  background-color: rgb(112, 128, 144);
}


#player-nav-wrap {
  position: fixed;
  left: 0;
  bottom: var(--bottom-row-one);
  background: var(--background);
  width: 100%;
  z-index: 10;
}
#player-nav {
  display: flex;
}
#player-nav > li {
  text-align: center;
  margin: 0;
  padding-block: .25rem;
  padding-inline: .33rem;
}

@media (orientation: landscape) {
  #player-nav li {
    padding-inline: 1rem;
  }
  #player-nav {
    font-size: 150%;
  }
}

#chart-wrap-wrap {
  font-size: 1.5rem;
}
#chart-wrap-wrap section {
  display: none;
}
#chart-wrap-wrap #controls-wrap {
  gap: 2rem;
  align-items: center;
}
@media (orientation: portrait) {
  #chart-wrap-wrap #controls-wrap {
    gap: .5rem;
  }
}
#chart-wrap-wrap .sliced-control {
  min-width: fit-content;
}
#chart-wrap-wrap .range-values {
  min-width: 14rem;
}
#chart-wrap {
  height: 10rem;
  width: 100%;
}
#chart {
  margin-right: 1rem;
}
#chart-wrap-wrap .controls {
  display: none;
}
#toggle-graph:checked ~ .controls {
  display: inline-block;
}
#toggle-graph:checked ~ #chart-wrap {
  display: block;
}


.progress-bar-wrapper {
  --radius: .5em;
  border-radius: var(--radius);
  position: relative;
  height: 1.25em;
  margin-top: .25em;
  margin-bottom: .25em;
  box-shadow: inset 0 0 var(--radius) var(--dimmed), 0 0 var(--radius) var(--dimmed);
}
.progress-bar {
  position: relative;
  border-radius: var(--radius);
  background-color: var(--secondary-color);
  width: 0;
  height: 100%;
}
#upload-progress-bar-percentage {
  text-align: right;
  position: absolute;
  right: var(--radius);
  bottom: 5%;
}