oopsy_live.css

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-button {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: #666;
  border: 4px solid #202020;
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background: #f0f4ce;
  border: 1px inset #ddd391;
  border-radius: 0;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

:root {
  --text-shadow-color: #217aa2;
  --damage-shadow-color: rgb(217 255 0 / 20%);
  --live-list-max-width: 500px;
}

::-webkit-scrollbar-thumb:hover {
  background: #f0f4ce;
}

::-webkit-scrollbar-thumb:active {
  background: #f0f4ce;
}

::-webkit-scrollbar-track:hover {
  background: #666;
}

::-webkit-scrollbar-track:active {
  background: #333;
}

.resize-helper {
  display: none;
}

.resize-handle .resize-helper {
  display: inline-block;
}

.flexcontainer {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.livelist {
  min-width: 300px;
  max-width: var(--live-list-max-width);
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.resize-helper .livelist {
  width: var(--live-list-max-width);
}

.livelist-shadow {
  box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
  margin: 5px;
}

.out-of-combat .livelist-shadow {
  box-shadow: 0 0 5px 2px rgb(200 200 70 / 30%);
}

div {
  font-family: Meiryo, sans-serif;
  font-size: 12;
  text-shadow:
    -1px 0 3px var(--text-shadow-color),
    0 1px 3px var(--text-shadow-color),
    1px 0 3px var(--text-shadow-color),
    0 -1px 3px var(--text-shadow-color);
  font-weight: 300;
  color: #e2ebf5;
}

.mistake-row {
  justify-content: space-between;
}

.mistake-row:nth-child(even) {
  background-color: rgb(20 20 20 / 30%);
}

.mistake-row:nth-child(odd) {
  background-color: rgb(50 50 50 / 30%);
}

.mistake-row > div {
  height: 100%;
  display: flex;
  align-items: center;
  user-select: none;
}

.mistake-icon {
  flex: 0 0 auto;
  order: 1;
  justify-content: center;
}

.mistake-text {
  flex: 1 1 auto;
  order: 2;
}

.mistake-time {
  align-self: flex-end;
  padding-right: 3px;
  order: 3;
}

.resize-handle .hide-if-resizing {
  display: none;
}

.death-report {
  width: 300px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.death-report > div {
  padding: 5px;
  background-color: rgb(20 20 20 / 30%);
}

.death-title {
  display: flex;
  margin-bottom: 5px;
}

.death-title div {
  font-size: 18px;
}

.death-title-icon {
  flex: 0 0 auto;
  order: 1;
}

.death-title-text {
  flex: 1 1 auto;
  order: 2;
}

.death-title-close {
  align-self: flex-end;
  order: 3;
  width: 25px;
  height: 20px;
}

.death-details {
  display: grid;
  grid-template-columns: max-content minmax(50px, max-content) minmax(10px, max-content) auto auto;
}

.death-row-hp {
  text-align: right;
}

.death-row-amount {
  text-align: right;
}

.death-details .damage {
  color: rgb(255 0 0);
  font-weight: bold;

  /* blue text shadow looks really weird, and I can't find a shadow combination with red
     that doesn't make it look washed out */
  text-shadow: none;
}

.death-details .heal {
  color: rgb(125 250 125);
}

.death-row-icon.mistake-icon {
  order: unset;
}

.death-row-text {
  text-align: left;
}

.death-row-time {
  text-align: right;
}

/* by default the report is on the left */
.report-side-right .flexcontainer {
  flex-direction: row-reverse;
}

.report-side-disabled .death-report {
  display: none;
}

@keyframes fade-out {
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.copied-msg {
  /* width/height set programatically */
  display: flex;
  justify-content: center;
  position: absolute;
  margin: 0 auto;
  color: white;
  box-shadow: 0 0 5px 2px rgb(70 115 200 / 30%);
  background-color: rgb(50 50 50 / 50%);
  pointer-events: none;
  animation: 1s fade-out;
  animation-fill-mode: forwards;
}

.icons {
  display: none;
  margin-top: 5px;
}

.out-of-combat .icons {
  display: flex;
  flex-direction: column;
}

.icons.hide {
  display: none;
}

.icon-close {
  color: rgb(230 230 230);
}

.icon-close::before {
  content: "\f00d";
}

.icon-summary {
  color: rgb(230 230 230);
}

.icon-summary::before {
  content: "\f35d";
}

.icon-entry {
  width: 20px;
  height: 20px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-entry:hover {
  color: rgb(247 255 129);
}