pokemon-color-search/web/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);
}

.full-grid-row {
  grid-column: 1 / -1;
}

.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;
}

input.pill-shape {
  text-align: center;
  padding: 0.25rem 1ch;
}

.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 7rem;
}

body > * + :not(:last-child) {
  border-inline-end: 1px solid var(--highlight);
}

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

button,
select,
label,
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}

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 {
  color: var(--highlight);
  background-color: var(--background);
}

button.color-select:hover {
  box-shadow: 0px 0px 4px 2px var(--shadow), inset 100vmax 100vmax rgb(255 255 255 / 0.2);
}

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

.color-inputs input[type="text"] {
  min-width: 0px;
}

.color-inputs input[type="color"] {
  flex: 0 0 2rem;
}

.color-inputs input[type="radio"] {
  display: none;
}

#cls-title,
#cls-fn,
#cls-metric-mount {
  transition: opacity 200ms;
}

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

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

.toggle-label {
  padding: 0 0.625ch 0.125rem;
  opacity: 50%;
  transition: opacity 200ms, color 200ms, border-color 200ms, background-color 200ms;
}

:is(input[type="checkbox"], input[type="radio"]):checked + .toggle-label {
  opacity: 100%;
  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 .ellipsis {
  overflow: visible;
  width: fit-content;
  background-color: var(--background);
  box-shadow: 0px 0px 2px 4px var(--background);
}

.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 {
  position: relative;
  --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-included="true"] {
  position: relative;
}

.pkmn-tile button[data-included="true"]::before {
  position: absolute;
  content: "▸";
  inset: 50% auto auto 1ch;
  /* slightly nicer than a normal vertical centering */
  transform: translateY(-55%);
}

.pkmn-tile :is(.cluster-info, .total-info) {
  visibility: hidden;
  position: absolute;
  opacity: 0%;
  transition: visibility 200ms, opacity 200ms ease-out, transform 200ms ease-out;
  font-size: 0.75rem;

  grid-template-columns: repeat(2, 1fr);
  column-gap: 0.5ch;

  padding: var(--tile-block-padding) 0.5ch;
  border-radius: var(--tile-border-radius);
  border: 1px solid var(--background);
  box-shadow: 2px 2px 2px var(--shadow);
  background-color: var(--highlight);
  color: var(--background);
}

.pkmn-tile .cluster-info {
  inset: 50% auto auto calc(100% + var(--tile-block-padding));
  transform: translateY(-50%);
}

.pkmn-tile .total-info {
  inset: 100% auto auto 50%;
  transform: translateX(-50%);
}

.pkmn-tile button:hover + :is(.cluster-info, .total-info),
:is(.cluster-info, .total-info):hover {
  visibility: visible;
  opacity: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .pkmn-tile:hover {
    transform: scale(105%) translateX(-3%) translateY(-5%);
    z-index: 10;
  }

  .pkmn-tile button:hover + .total-info {
    transform: translateX(-50%) translateY(5%);
  }

  .pkmn-tile button:hover + .cluster-info:nth-child(2) {
    transform: translateX(1ch) translateY(-80%);
  }

  .pkmn-tile button:hover + .cluster-info:nth-child(4) {
    transform: translateX(1ch) translateY(-60%);
  }

  .pkmn-tile button:hover + .cluster-info:nth-child(6) {
    transform: translateX(1ch) translateY(-40%);
  }

  .pkmn-tile button:hover + .cluster-info:nth-child(8) {
    transform: translateX(1ch) translateY(-20%);
  }
}

/* Sort Function Controls */

.fn-control .fn-minmax label span {
  padding: 0.125rem 0.75ch;
}

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

.fn-control :is(input[type="checkbox"], input[type="radio"]) {
  display: none;
}

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

.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(select:disabled, input[type="radio"]) {
  display: none;
}

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