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
  );
  --color-transition: 200ms ease-in;
}

/* Font */

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

/* Composition */

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

.iflex {
  display: inline-flex;
}

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

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

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

[data-flexGap="none"] {
  --gap: 0px;
}

[data-flexGap="normal"] {
  --gap: 1rem;
}

[data-flexGap="smaller"] {
  --gap: 0.125rem;
}

[data-flexGap="small"] {
  --gap: 0.5rem;
}

[data-flexGap="big"] {
  --gap: 1.5rem;
}

[data-flowSpace="small"] {
  --flow-space: 0.5rem;
}

.section {
  padding-block-start: 0.5rem;
  padding-inline: 1ch;
}

/* Utility */

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

.smaller {
  font-size: 0.875rem;
}

.smallest {
  font-size: 0.75rem;
}

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

.aspect-even {
  height: auto;
  width: auto;
  aspect-ratio: 1 / 1;
}

.aspect-tall {
  height: auto;
  width: auto;
  aspect-ratio: 1 / 3;
}

.aspect-wide {
  height: auto;
  width: auto;
  aspect-ratio: 3 / 1;
}

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Math&display=swap");
.math-font {
  font-family: "Noto Sans Math", sans-serif;
}

/* Block */

@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap");
body {
  font-family: "Nanum Gothic", sans-serif;

  color: var(--highlight);
  background-color: var(--background);
  accent-color: var(--highlight);
  transition: accent-color var(--color-transition), color var(--color-transition),
    background-color var(--color-transition);

  display: grid;
  grid-template-columns: 1fr 12ch;
}

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: none;
  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;
}

#cls-fn {
  overflow: hidden;
  transition: max-width 400ms ease-in-out, opacity 500ms, visibility 500ms;
}

[data-faded="true"] {
  opacity: 0;
  max-width: 0;
  visibility: hidden;
}

[data-faded="false"] {
  opacity: 1;
  max-width: 50ch;
  visibility: visible;
}

.toggle-label {
  white-space: nowrap;
  padding: 0 0.625ch;
  opacity: 50%;
  transition: opacity 200ms, color var(--color-transition),
    border-color var(--color-transition), background-color var(--color-transition);
}

: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 {
  position: relative;
  width: 31ch;
  --tile-block-padding: 0.25rem;
  --tile-border-radius: 8px;
  transition: transform 100ms linear;
}

.pkmn-tile:hover {
  z-index: 10;
}

@media (prefers-reduced-motion: no-preference) {
  .pkmn-tile:hover {
    transform: scale(107%) translateX(3%) translateY(5%);
    transition: transform 200ms ease-out;
  }
}

.pkmn-tile .pkmn-title {
  justify-content: space-between;
}

.pkmn-tile .pkmn-info-icon {
  cursor: default;
}

.pkmn-tile:hover .ellipsis {
  overflow: visible;
  width: fit-content;
  background-color: transparent;
}

.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);
  height: 100%;
}

.pkmn-tile:hover .pkmn-info {
  /* set this explicitly to force non-transparent bg, 
     but otherwise leave off so it transitions with 
     the page automatically */
  background-color: var(--background);
}

.pkmn-tile .pkmn-info-main {
  flex: 1;
}

.pkmn-tile .cluster-buttons {
  /* 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: var(--gap) 0.25ch;
  border-radius: var(--tile-border-radius);
  background-color: var(--shadow);
  box-shadow: 0px 0px 8px var(--shadow);
}

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

.pkmn-tile img {
  max-height: 100%;
}

.pkmn-tile .pkmn-score-row {
  flex-wrap: wrap;
  justify-content: space-around;
}

.pkmn-tile button {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 1ch 0.125rem 2ch;
  white-space: nowrap;
  flex: 1;
}

.pkmn-tile button[data-included="true"] {
  position: relative;
}

.pkmn-tile button[data-included="true"]::before {
  position: absolute;
  content: "·";
  inset: 50% auto auto 0.375ch;
  font-size: 1.5rem;
  /* slightly nicer than a normal vertical centering */
  transform: translateY(-48%);
}

.pkmn-tile .color-select[hidden] + .pkmn-info-icon {
  display: none;
}

.pkmn-tile .pkmn-info-detail {
  position: absolute;
  inset: 100% 50% auto auto;
  visibility: hidden;
  opacity: 0%;
  transform: translateX(45%);
  transition: visibility 200ms, opacity 200ms ease-out, transform 200ms ease-out;
  font-size: 0.75rem;

  width: 32ch;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  column-gap: 0.5ch;
  row-gap: 0.125rem;

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

.pkmn-info-detail:not(:empty):hover,
.pkmn-tile[data-info="show-infoHover"] .pkmn-info-detail:not(:empty):nth-child(1),
.pkmn-tile[data-info="show-infoHover1"] .pkmn-info-detail:not(:empty):nth-child(2),
.pkmn-tile[data-info="show-infoHover2"] .pkmn-info-detail:not(:empty):nth-child(3),
.pkmn-tile[data-info="show-infoHover3"] .pkmn-info-detail:not(:empty):nth-child(4),
.pkmn-tile[data-info="show-infoHover4"] .pkmn-info-detail:not(:empty):nth-child(5) {
  visibility: visible;
  opacity: 100%;
  transform: translateX(50%) translateY(5%);
}

.pkmn-tile .pkmn-data-separator {
  height: 1px;
  background-color: var(--background);
}

.pkmn-tile .pkmn-data-wide {
  grid-column: 1 / 3;
}

/* Sort Controls */

button[name="moreResults"],
button[name="lessResults"],
button[name="random"],
button[name="clear"] {
  width: 2rem;
}

.control-group {
  padding: 0.25rem 1ch;
  background-color: var(--shadow);
  border-radius: 8px;
}

#color-inputs {
  /* fragile - would be nice to replace it at some point */
  border-radius: 36px 8px 8px 36px;
  padding-inline-start: 0.5ch;
}

#color-inputs > button + div > :first-child {
  justify-content: flex-end;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#color-inputs button[name="randomColor"] {
  width: 4rem;
  font-size: 2.5rem;
  border: none;
  --rotate-time: 0.25s;
  animation: spin var(--rotate-time) infinite linear paused;
  transition: rotate calc(var(--rotate-time) * 3) ease-out;
  rotate: 360deg;
}

@media (prefers-reduced-motion: no-preference) {
  #color-inputs button[name="randomColor"]:hover {
    animation-play-state: running;
    rotate: 0deg;
  }
}

#color-inputs input {
  height: 2rem;
  border: none;
}

#color-inputs output {
  text-align: right;
}

#name-search-controls {
  align-items: stretch;
}

#name-search-controls :is(button[name="all"], button[name="team"]) {
  padding-inline: 1ch;
}

/* Sort Function Controls */

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

.fn-control .fn-body {
  --gap: 0.25ch;
}

.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: 18ch;
  align-self: stretch;
  padding-inline: 1ch;
}

/* Other Controls */

:is(input[name="allowRepeatDexNum"], input[name="hideNoStart"], input[name="allowNFE"])
  + span {
  padding: 0.125rem 1ch;
}