pokemon-color-search/styles.css

/* Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark light;
}

body {
  min-height: 100vh;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

/* Colors */

:root {
  --color-dark: #1f2123;
  --color-light: #e8e6e3;
}

:root {
  /* separated since these are used by the actual script */
  --highlight: var(--color-light);
  --background: var(--color-dark);
  --shadow-component: 255;
  --shadow: rgb(
    var(--shadow-component),
    var(--shadow-component),
    var(--shadow-component),
    0.2
  );
}

/* Font */

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Composition */

.flex {
  display: flex;
  gap: var(--gap, 1rem);
}

.even {
  justify-content: space-between;
  align-items: stretch;
}

.wrap {
  flex-wrap: wrap;
}

.col {
  flex-direction: column;
}

.grid {
  display: grid;
  gap: var(--gap, 1rem);
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1rem);
}

.no-gap {
  --gap: 0px;
}

.small-gap {
  --gap: 0.5rem;
}

.big-gap {
  --gap: 1.5rem;
}

.small-flow-space {
  --flow-space: 0.5rem;
}

.section {
  padding-block-start: var(--flow-space, 1rem);
  padding-inline: var(--flow-space-inline, 1ch);
}

/* Utility */

.emphasis {
  font-size: 1.125rem;
  font-weight: 600;
}

.center {
  text-align: center;
  margin-inline: auto;
}

.block-center {
  margin-block: auto;
}

.right {
  text-align: end;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.margin-after {
  margin-block-end: 0.5rem;
}

.pill-shape {
  border-radius: 100vmax;
}

.highlight-border {
  border: 1px solid var(--highlight);
}

/* Block */

body {
  color: var(--highlight);
  background-color: var(--background);
  accent-color: var(--highlight);
  transition: accent-color 250ms, color 250ms, background-color 250ms;

  display: grid;
  grid-template-columns: 14rem 1fr 8rem;
}

body > * + :not(#sidebar) {
  border-inline-start: 1px solid var(--highlight);
}

hr {
  color: var(--highlight);
}

button {
  border-radius: 100vmax;
  padding-block: 0.25rem;
  border: 1px solid var(--highlight);
  transition: background-color 100ms;
}

button:hover {
  box-shadow: 0 0 4px 2px var(--shadow);
}

button.color-select {
  background-color: var(--button-bg);
}

button.color-select:hover {
  background-color: var(--button-bg-hover);
}

#prevColors button {
  width: 100%;
  margin-block-end: 0.5ch;
}

#targetSelect input[type="text"] {
  text-align: center;
  min-width: 0px;
}

#targetSelect input[type="color"] {
  flex: 0 0 2rem;
}

:is(#cls-fn-mount, #cls-metric-mount) form {
  transition: opacity 200ms;
}

[data-faded="true"] {
  opacity: 25%;
}

#color-results {
  margin-inline-start: 1ch;
}

#nameSearch input {
  text-align: center;
  padding-block: 0.5ch;
}

.toggle-label {
  padding: 0 0.625ch 0.125rem;
  color: var(--shadow);
  border-color: var(--shadow);
  transition: color 200ms, border-color 200ms, background-color 200ms;
}

:is(input[type="checkbox"], input[type="radio"]):checked + .toggle-label {
  background-color: var(--highlight);
  color: var(--background);
  border-color: var(--highlight);
}

/* Pokemon Tiles */

.pkmn-tile {
  max-width: 24ch;
  padding-inline: 0.5ch;
  --tile-block-padding: 0.25rem;
  --tile-border-radius: 8px;
  transition: transform 250ms ease-out;
}

.pkmn-tile:hover {
  transform: scale(105%) translateX(-3%) translateY(-5%);
}

.pkmn-tile .pkmn-info {
  /* no block-start padding here, this makes the 
     images look like they go right up to the border */
  padding: 0 0.5ch var(--tile-block-padding);
  border-radius: var(--tile-border-radius);
  box-shadow: 4px 4px 2px var(--shadow);
  margin-block-start: 0.25rem;
}

.pkmn-tile .cluster-buttons {
  --gap: 0.125rem;
  justify-content: center;

  /* but here we put the block-start padding back to
     fix the vertical centering of the cluster buttons */
  margin-block-start: var(--tile-block-padding);
  margin-inline-start: 0.5ch;
  padding-inline: 0.25ch;
  border-radius: var(--tile-border-radius);
  background-color: var(--shadow);
  box-shadow: 0px 0px 8px var(--shadow);
}

.pkmn-tile img {
  height: 64px;
}

.pkmn-tile button {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 12ch;
}

.pkmn-tile button[data-best="true"]::before {
  content: "▸";
  display: inline-block;
  width: 1ch;
  margin-inline: 0.25ch;
}

/* Sort Function Controls */

.fn-control .fn-minmax {
  padding: 0.25rem 0.5ch;
  display: inline-flex;
  justify-content: center;
  background-color: var(--shadow);
  /* TODO might want to bring back that shifting pill */
}

.fn-control .fn-minmax span {
  text-transform: capitalize;
}

.fn-control .fn-body {
  --gap: 0.25ch;
  margin-block: 0.5rem;
  justify-content: center;
  align-items: center;
}

.fn-control input[type="checkbox"] {
  display: none;
}

.fn-control .toggle-label:first-child {
  /* only affects the fake label on the cluster function */
  color: inherit;
  background-color: inherit;
  border: none;
}

.fn-fraction > *:first-child {
  /* this feels a little fragile */
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-block-end: 1px solid var(--highlight);
}

/* Metric Controls */

.metric-fields {
  border: none;
}

.metric-fields :is(legend, select:disabled, input[type="radio"]) {
  display: none;
}

.metric-fields select {
  width: 100%;
  padding: 0.25rem 1ch;
}