pokemon-color-search/nearest.css

:root {
  --highlight: #ddd;
  --background: #222;
  --tile-width: 480px;
}

body {
  width: 99%;
  padding-top: 4px;
  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);
  margin: 8px;
}

math {
  font-size: 12px;
}

.hide {
  display: none !important;
}

/* Toggles */

.toggle-box {
  display: block;
}

.toggle-box > .toggle-off {
  display: block;
}

.toggle-box > .toggle-on {
  display: none;
}

.toggle-box > label > .toggle-off {
  display: block;
}

.toggle-box > label > .toggle-on {
  display: none;
}

.toggle-box > .toggle-button {
  display: none;
}

.toggle-box > .toggle-button:checked ~ .toggle-off {
  display: none;
}

.toggle-box > .toggle-button:checked ~ .toggle-on {
  display: block;
}

.toggle-box > .toggle-button:checked ~ label > .toggle-off {
  display: none;
}

.toggle-box > .toggle-button:checked ~ label > .toggle-on {
  display: block;
}

/* Controls */
.control-grid {
  width: 21em;
  margin-top: 16px;
  display: grid;
  gap: 4px 8px;
  grid:
    "bulb inpt rand"
    "bulb qvec qvec" 2em
    "bulb cspc cspc"
    "sort metr metr"
    "munu munu munu"
    "disp disp disp" 4em
    /5em  8em  auto
  ;
  justify-items: stretch;
  align-items: center;
}

.cluster-grid {
  width: 21em;
  margin-bottom: 16px;
  display: grid;
  gap: 4px 8px;
  grid:
    "albl albl"
    "sort metr"
    "blbl clus"
    "disp disp"
    "slbl scal"
    /10em auto
  ;
  justify-items: stretch;
  align-items: center;
}

/* 
.container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

@media (min-width: 1000px) {
  .container {
    flex-direction: row;
  }
}

.start-justified {
  justify-content: flex-start;
}

.panel {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

@media (min-width: 1500px) {
  .rpanel {
    flex-direction: row;
  }

  .rpanel > :last-child {
    margin-left: 16px;
  }
}

.center-text {
  text-align: center;
}

.config {
  width: 100%;
  margin-bottom: 16px;
}

.dropdown {
  flex: 1;
  justify-content: space-between;
  align-items: center;
}

.dropdown > select {
  margin-top: 8px;
  margin-right: 8px;
  margin-left: 8px;
}

.center-aligned {
  align-items: center;
}

.center-justified {
  justify-content: center;
}

.start-justified {
  justify-content: flex-start;
}

.eqn-label {
  margin-right: 0.5em;
}

#reveal-definitions {
  display: none;
}

#reveal-definitions:checked ~ .definitions {
  display: block;
}

#reveal-definitions:checked ~ * > .definitions {
  display: block;
}

#reveal-definitions:checked ~ #reveal-def-label > #reveal-def-hide {
  display: block;
}

#reveal-definitions:checked ~ #reveal-def-label > #reveal-def-show {
  display: none;
}

#reveal-def-hide {
  display: none;
  margin-bottom: 0.5em;
}

#reveal-def-show {
  display: block;
  margin-bottom: 0.5em;
}

.definitions {
  display: none;
  /* evil trick to allow running into margins /
  max-width: 0px;
  overflow: visible;
}

.math-section {
  border: 2px solid var(--highlight);
  padding: 0.3em;
  margin-bottom: 0.2em;
  align-self: stretch;
}

#obj-fn {
  display: inline-flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.padded {
  padding-left: 16px;
  padding-right: 16px;
}

.title {
  font-weight: 1000;
}

.control {
  height: 32px;
  align-items: flex-end;
}

.control > * {
  flex: 1;
}

.control > button {
  margin-left: 16px;
  margin-right: 16px;
}

.control > input {
  max-width: 10em;
}

#bulba-wrapper {
  display: flex;
  justify-content: center;
}

label {
  white-space: nowrap
}

.hideable_control {
  display: flex;
  flex-flow: row nowrap;
}

.hideable_control--hidden {
  display: none;
}

.pkmn-list {
  display: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-top: 8px;
  margin-left: 8px;
  margin-bottom: 16px;
  width: 100%;
}

.show-list {
  display: none;
}

.show-list:checked ~ .pkmn-list {
  display: block;
}

.show-list-lbl-hide {
  display: none;
}

.show-list:checked ~ * > .show-list-lbl-hide {
  display: block;
}

.show-list-lbl-show {
  display: block;
}

.show-list:checked ~ * > .show-list-lbl-show {
  display: none;
}

#search-space-button {
  width: 3em;
}

#controls {
  width: calc(var(--tile-width) + 32px);
  display: grid;
  gap: 4px 16px;
  grid:
    "bulb inpt rand"
    "liml qvec qvec" 1.5em
    "limt qvec qvec" 1.5em
    "metr objf objf"
    ".    iner coef"
    ".    norm coef"
    "clst scal scal"
    "warn warn warn"
    "srch name btns"
    "rslt rslt rslt"
    "togg togg .   "
    "defs clsd clsd"
    /10em 10em 1fr
  ;
  justify-items: stretch;
  align-items: center;
  margin-right: 32px;
}

/* Pokemon Tile /

.pkmn_tile {
  width: var(--tile-width);
  display: grid;
  gap: 2px 2px;
  margin-top: 4px;
  margin-bottom: 4px;
  grid:
    "img  name name fn" 1.2em
    "img  mu   mu   mu" 1fr
    "tog  mu   mu   mu" 1fr
    ".    k1   k2   k3" auto
    /60px 1fr  1fr 1fr
  ;
}

.pkmn_tile-true_mean {
  grid-area: mu;
  font-size: 12px;
  display: grid;
  grid:
    ".     mu  mus mut"
    ".     in  mud mup"
    /0.1fr 3fr 1fr 1fr
  ;
  gap: 2px 2px;
  align-items: center;
}

.pkmn_tile-true_mean-value {
  grid-area: mu;
  display: grid;
  grid:
    "mul mux muv"
    /2em 6em auto
  ;
  align-items: center;
}

.pkmn_tile-true_mean-inertia {
  grid-area: in;
}

.pkmn_tile-true_mean-mu_label {
  grid-area: mul;
  justify-self: end;
  padding-right: 2px;
}

.pkmn_tile-true_mean-mu_hex {
  grid-area: mux;
}

.pkmn_tile-true_mean-mu_vec {
  grid-area: muv;
}

.pkmn_tile-true_mean-stat {
  margin-left: 8px;
}

.pkmn_tile-true_mean-stat-sigma {
  grid-area: mus;
}

.pkmn_tile-true_mean-stat-theta {
  grid-area: mut;
}

.pkmn_tile-true_mean-stat-delta {
  grid-area: mud;
}

.pkmn_tile-true_mean-stat-phi {
  grid-area: mup;
}

.pkmn_tile-img {
  grid-area: img;
}

.pkmn_tile-name {
  grid-area: name;
  font-weight: 1000;
}

.pkmn_tile-fn {
  grid-area: fn;
  justify-self: end;
}

.pkmn_tile-cluster {
  display: none;

  font-size: 12px;
  grid:
    "lbl  lbl  lbl lbl lbl" 1em
    "mu   mux  mux mux mux"
    "muv  muv  muv muv muv"
    "pi   piv  .   th  thv"
    "dl   dlv  .   ph  phv"
    /2fr  4fr  1fr 2fr 4fr
  ;
  gap: 5px 0px;
  padding-top: 4px;
  padding-bottom: 8px;
}

.pkmn_tile-cluster-top_label {
  font-weight: 1000;
  font-size: 14px;
  justify-self: center;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
}

.pkmn_tile-cluster-stat_label {
  justify-self: end;
  padding-right: 2px;
}

/* Cluster Hiding Logic /

.pkmn_tile-reveal_clusters {
  display: none;
}

.pkmn_tile-reveal_clusters:checked ~ .pkmn_tile-cluster {
  display: grid;
}

.pkmn_tile-reveal_clusters:checked ~ .pkmn_tile-reveal_clusters_label > .pkmn_tile-reveal_clusters_label--closed {
  display: none;
}

.pkmn_tile-reveal_clusters_label--closed {
  display: block;
}

.pkmn_tile-reveal_clusters:checked ~ .pkmn_tile-reveal_clusters_label > .pkmn_tile-reveal_clusters_label--open {
  display: block;
}

.pkmn_tile-reveal_clusters_label--open {
  display: none;
}

.pkmn_tile-reveal_clusters_label {
  font-size: 16px;
  text-align: center;
  grid-area: tog;
}

.pkmn_tile-reveal_clusters--hide {
  display: none;
}

.pkmn_tile-reveal_clusters--show {
  display: block;
} 
*/