CHOMPStation2/html/statbrowser.css

.light:root {
  --color-base: #ffffff;
  --scrollbar-base: #f2f2f2;
  --scrollbar-thumb: #a7a7a7;
}

html,
body {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-base);
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

a {
  color: #003399;
  text-decoration: none;
}

a:hover {
  color: #007fff;
}

h3 {
  margin: 0 -0.5em 0.5em;
  padding: 1em 0.66em 0.5em;
  border-bottom: 0.1667em solid;
}

img {
  image-rendering: pixelated;
}

.stat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#menu {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25em 0.25em 0;
  background-color: #ffffff;
}

.menu-wrap {
  flex-wrap: wrap-reverse;
}

#menu.tabs-classic {
  padding: 0.15em;
}

#menu.tabs-classic .button {
  min-width: 2em;
  margin: 0.1em;
  padding: 0.25em 0.4em;
  border: 0;
  border-radius: 0.25em;
}

#menu.tabs-classic .button.active {
  background-color: #0668b8;
  color: white;
}

.button {
  display: inline-table;
  cursor: pointer;
  user-select: none;
  text-align: center;
  font-size: 1em;
  min-width: 2.9em;
  padding: 0.5em 0.5em 0.4em;
  background-color: transparent;
  color: rgba(0, 0, 0, 0.5);
  border: 0;
  border-bottom: 0.1667em solid transparent;
  border-radius: 0.25em 0.25em 0 0;
}

.button:hover {
  background-color: #ececec;
}

.button.active {
  cursor: default;
  background-color: #dfdfdf;
  color: black;
  border-bottom-color: #000000;
}

#under-menu {
  height: 0.5em;
  background-color: #eeeeee;
}

#under-content {
  height: calc(0.5em - 4px);
  background-color: #eeeeee;
}

#statcontent {
  flex: 1;
  padding: 0.75em 0.5em;
  overflow-y: auto;
  overflow-x: hidden;
}

.grid-container {
  margin: -0.25em;
}

.grid-item {
  display: inline-flex;
  position: relative;
  user-select: none;
  width: 100%;
  max-height: 1.85em;
  text-decoration: none;
  background-color: transparent;
  color: black;
}

.grid-item:hover,
.grid-item:active {
  color: #003399;
  z-index: 1;
}

.grid-item-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  width: 100%;
  padding: 0.33em 0.5em;
  border-radius: 0.25em;
}

.grid-item:hover .grid-item-text {
  height: 100%;
  overflow: visible;
  white-space: normal;
  background-color: #ececec;
}

.grid-item:active .grid-item-text {
  background-color: #dfdfdf;
}

@media only screen and (min-width: 300px) {
  .grid-item {
    width: 50%;
  }
}

@media only screen and (min-width: 430px) {
  .grid-item {
    width: 33%;
  }
}

@media only screen and (min-width: 560px) {
  .grid-item {
    width: 25%;
  }
}

@media only screen and (min-width: 770px) {
  .grid-item {
    width: 20%;
  }
}

.status-info {
  margin: 0 0.33em 0.25em;
}

.interview_panel_stats,
.interview_panel_controls {
  margin-bottom: 1em;
}

/**
 * MARK: Dark theme colors
 */
.dark:root {
  --color-base: #151515;
  --scrollbar-base: #151515;
  --scrollbar-thumb: #363636;
}

body.dark {
  background-color: #151515;
  color: #b2c4dd;
}

.dark a {
  color: #6699ff;
}

.dark a:hover,
.dark .grid-item:hover,
.dark .grid-item:active {
  color: #80bfff;
}

.dark #menu {
  background-color: #151515;
}

.dark #menu.tabs-classic .button.active {
  background-color: #20b142;
}

.dark .button {
  color: rgba(255, 255, 255, 0.5);
}

.dark .button:hover {
  background-color: #252525;
}

.dark .button.active {
  background-color: #313131;
  color: #d4dfec;
  border-bottom-color: #d4dfec;
}

.dark #under-menu,
.dark #under-content {
  background-color: #202020;
}

.dark .grid-item {
  color: #b2c4dd;
}

.dark .grid-item:hover .grid-item-text {
  background-color: #252525;
}

.dark .grid-item:active .grid-item-text {
  background-color: #313131;
}

/* required for alt click menu */
.link {
  display: inline;
  background: none;
  border: none;
  padding: 7px 14px;
  color: black;
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  margin: 2px 2px;
}

.linkelem {
  display: inline;
  background: none;
  border: none;
  padding: 0px 14px;
  color: black;
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  margin: 2px 2px;
}

.dark .link {
  color: #abc6ec;
}

.dark .linkelem {
  color: #abc6ec;
}

.link:hover {
  text-decoration: underline;
}

.linkelem:hover {
  text-decoration: underline;
}

.spoiler {
  background-color: gray;
  color: transparent;
  user-select: none;
}

.spoiler:hover {
  background-color: inherit;
  color: inherit;
}