pokemon-color-search/styles.css

:root {
  --highlight: #ddd;
  --background: #222;
  --highlight-border: 1px solid var(--highlight);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: var(--highlight);
  background-color: var(--background);
  accent-color: var(--highlight);
  transition: accent-color 250ms, color 250ms, background-color 250ms;
}

select:disabled {
  display: none;
}

.center {
  text-align: center;
}

.pkmn {
  margin: 0.25rem;
  padding: 0.25rem;
  display: grid;
  gap: 0.25rem;
  grid-template-columns: 48px 1fr 14ch;
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
    "img name  cls4"
    "img score cls3"
    "... total cls2"
    "... total cls1";
  align-items: center;
  border: var(--highlight-border);
}

.pkmn > img {
  grid-area: img;
  justify-self: center;
}

.pkmn > .pkmn-name {
  grid-area: name;
  font-weight: 800;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pkmn > .pkmn-total {
  position: relative;
  border: var(--highlight-border);
  border-radius: 100vmax;
  grid-area: total;
  height: 100%;
  display: inline-flex;
  align-items: center;
  padding-inline-end: 1ch;
}

.pkmn > .pkmn-score {
  grid-area: score;
  padding-inline-start: 4ch;
}

.pkmn > .pkmn-cls {
  position: relative;
  border: var(--highlight-border);
  border-radius: 100vmax;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.125rem;
  padding-inline-end: 0.5ch;
  display: flex;
  justify-content: space-between;
}

.pkmn > :is(.pkmn-total, .pkmn-cls):hover {
  outline: var(--highlight-border);
}

.pkmn > :is(.pkmn-total, .pkmn-cls)::before {
  display: inline-block;
  content: "";
  font-size: 80%;
  width: 1ch;
  margin-inline: 0.25ch;
}

.pkmn-total-selected > .pkmn-total::before,
.pkmn-cls1-selected > .pkmn-cls1::before,
.pkmn-cls2-selected > .pkmn-cls2::before,
.pkmn-cls3-selected > .pkmn-cls3::before,
.pkmn-cls4-selected > .pkmn-cls4::before {
  content: "▸";
}

.pkmn > .pkmn-cls1 {
  grid-area: cls1;
}

.pkmn > .pkmn-cls2 {
  grid-area: cls2;
}

.pkmn > .pkmn-cls3 {
  grid-area: cls3;
}

.pkmn > .pkmn-cls4 {
  grid-area: cls4;
}

.pkmn-data {
  z-index: 2;
  color: var(--highlight);
  background-color: var(--background);
}

.pkmn-data > hr {
  color: var(--highlight);
}

.pkmn-total > .pkmn-data {
  left: 100%;
  margin-inline-start: 0.5ch;
}

.pkmn-cls > .pkmn-data {
  font-weight: 400;
  transform: translateY(-50%) translateX(-105%);
}

#color-results,
#name-results {
  min-width: fit-content;
  max-width: 50vw;
}

.fn-part {
  display: inline-flex;
  width: 3ch;
  justify-content: center;
  align-items: flex-end;

  padding-block-end: 0.125rem;
  padding-inline: 0.375ch;
  margin-inline: 0.125ch;
  border: var(--highlight-border);
  border-radius: 100vmax;

  color: var(--background);
  background-color: var(--highlight);
  transition: opacity 250ms, color 250ms, background-color 250ms;

  cursor: pointer;
  user-select: none;
}

.fn-part--fixed {
  cursor: not-allowed;
}

/*
pls hurry up mozilla 
.fn-part:not(:has(input:checked)),
*/
.fn-part--disabled {
  color: var(--highlight);
  background-color: var(--background);
  opacity: 50%;
}

.fn-part > input {
  display: none;
}

.fn-part sup {
  font-size: 0.75rem;
  align-self: flex-start;
}

.fn-minmax {
  min-width: 3.5ch;
  text-align: center;
  padding-inline-end: 0.25ch;

  cursor: pointer;
  user-select: none;
}

.fn-minmax--wide {
  min-width: 6.5ch;
}

.fn-group {
  display: flex;
  align-items: center;
}

.fn-bracket {
  font-weight: 300;
  font-size: 2rem;
  align-self: flex-start;
  padding-block-end: 0.125rem;
}

.fn-minmax-toggle {
  display: flex;
  flex-direction: column;
  padding-block-end: 0.25rem;
  position: relative;
}

.fn-minmax-toggle::before {
  content: "";
  background-color: var(--highlight);
  border-radius: 100vmax;

  position: absolute;
  top: 5%;
  left: 0px;
  right: 0px;
  height: 45%;
  transition: top 250ms;
  z-index: -1;
}

input:checked + .fn-minmax-toggle::before {
  top: 50%;
}

.fn-minmax-toggle > span {
  opacity: 50%;
  transition: opacity 250ms, color 250ms;
}

input:not(:checked) + .fn-minmax-toggle > span:first-child {
  opacity: 100%;
  color: var(--background);
}

input:checked + .fn-minmax-toggle > span:last-child {
  opacity: 100%;
  color: var(--background);
}

.main-container {
  display: grid;
  margin-inline: 2ch;
  margin-block-end: 2rem;
  gap: 0.25rem;
  grid-template-columns: 1fr 1fr minmax(min-content, 12ch);
  grid-template-rows: 3rem min-content 1.5rem min-content min-content;
  grid-auto-rows: 1fr;
  grid-template-areas:
    "fun1 fun2 targ"
    "met1 met2 targ"
    "lbl1 lbl2 srch"
    "res1 res2 srch"
    "res1 res2 spac"
    "res1 res2 prev";
  justify-content: space-between;
  justify-items: start;
  align-items: start;
}

#sortFunction {
  grid-area: fun1;
  justify-self: end;
  align-self: end;
}

.fade {
  opacity: 25%;
}

#clusterFunction {
  grid-area: fun2;
  align-self: end;
  transition: opacity 250ms;
}

#sortMetric {
  grid-area: met1;
  justify-self: end;
}

#clusterMetric {
  grid-area: met2;
  transition: opacity 250ms;
}

#colorSelect {
  grid-area: targ;
  justify-self: end;
  align-self: stretch;

  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0.25rem;
  justify-items: stretch;
  align-items: stretch;

  border: var(--highlight-border);
  padding: 0.125rem;
  width: fit-content;
}

#colorSelect label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#colorSelect input {
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
}

#sortControl {
  justify-self: end;
  grid-area: spac;
  padding-block-start: 0.5rem;
  padding-inline: 1ch;
}

#color-results-label {
  grid-area: lbl1;
}

#name-results-label {
  grid-area: lbl2;
}

#color-results {
  grid-area: res1;
  width: 100%;
}

#name-results {
  grid-area: res2;
  width: 100%;
}

#name-search-container {
  grid-area: srch;
  justify-self: end;

  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0.25rem;
  justify-items: stretch;
  align-items: stretch;

  border: var(--highlight-border);
  padding: 0.125rem;
  width: fit-content;

  text-align: center;
}

#name-search {
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
}

#prev-colors-container {
  padding-block-start: 1rem;
  grid-area: prev;
}

.metric-select-fieldset {
  width: 24ch;
  display: grid;
  row-gap: 0.125rem;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}

@media screen and (width <= 920px) {
  .main-container {
    grid-template-columns: min-content min-content 1fr min-content;
    grid-template-rows: unset;
    grid-auto-rows: min-content;
    grid-template-areas:
      "fun1 fun1 lbl1 prev"
      "fun1 fun1 res1 prev"
      "met1 met1 res1 prev"
      "fun2 fun2 res1 prev"
      "met2 met2 res1 prev"
      "targ spac res1 prev"
      ".... .... res1 prev"
      "srch srch lbl2 prev"
      "srch srch res2 prev";
  }

  #sortFunction,
  #clusterFunction,
  #sortMetric,
  #clusterMetric,
  #colorSelect,
  #sortControl,
  #name-search-container {
    justify-self: center;
    align-self: start;
    padding: 0;
  }

  #prev-colors-container {
    padding-block: 0;
    padding-inline: 1ch;
    text-align: center;
  }
}

@media screen and (width <= 800px) {
  .main-container {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    grid-template-areas:
      "fun1 fun1"
      "fun2 fun2"
      "met1 met2"
      "targ spac"
      "lbl1 lbl1"
      "res1 res1"
      "srch srch"
      "lbl2 lbl2"
      "res2 res2"
      "prev prev";
  }

  #color-results,
  #name-results {
    max-width: unset;
  }
}

@media screen and (width >= 1400px) {
  .main-container {
    grid-template-columns: repeat(6, min-content) 1fr 1fr min-content;
    grid-template-rows: unset;
    grid-auto-rows: min-content;
    grid-template-areas:
      "fun1 fun1 fun1 fun1 fun1 fun1 lbl1 lbl2 prev"
      "fun2 fun2 fun2 fun2 fun2 fun2 res1 res2 prev"
      "met1 met1 met1 met2 met2 met2 res1 res2 prev"
      "targ targ spac spac srch srch res1 res2 prev"
      ".... .... .... .... .... .... res1 res2 prev";
  }

  #sortFunction,
  #clusterFunction,
  #sortMetric,
  #clusterMetric,
  #colorSelect,
  #sortControl,
  #name-search-container {
    justify-self: center;
    align-self: stretch;
    padding: 0;
  }

  #prev-colors-container {
    padding-block: 0;
    padding-inline: 1ch;
    text-align: center;
  }
}