query-state-hook/src/app/components/Settings.css

Easily manage the state of your React components via URL query parameters

.query-params__wrapper {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.query-params__container {
  border: 1px solid var(--color-placeholder);
  background-color: var(--color-surface);
  padding: 15px;
  border-radius: 5px;
  cursor: default;
}

.query-params__container--empty {
  color: var(--color-placeholder);
}

.query-params__info {
  background-color: rgba(230, 249, 255, 0.631);
  padding: 10px;
  border-radius: 5px;
}

.query-params__info p {
  color: var(--color-surface);
}

.btn {
  border: none;
  border-radius: 50px;
  padding: 5px 15px;
  color: white;
  cursor: pointer;
}

.input {
  border: none;
  background-color: var(--color-surface);
  color: white;
  border-radius: 50px;
  padding: 10px 20px;
}

.color-btn {
  background-color: var(--color-surface);
  color: white;
}

.color-btn__selected {
  background-color: #00caff8a;
}

.color-btn__remove {
  background-color: #e23232;
  color: white;
}

.color-btn__lime--true {
  background-color: lime;
  color: black;
}

.color-btn__lime:hover {
  background-color: rgb(0, 255, 0, 0.7);
  color: black;
}

.color-btn__orange--true {
  background-color: orange;
  color: black;
}

.color-btn__orange:hover {
  background-color: rgb(255, 165, 0, 0.7);
  color: black;
}

.color-btn__teal--true {
  background-color: teal;
  color: black;
}

.color-btn__teal:hover {
  background-color: rgb(0, 128, 128, 0.7);
  color: black;
}

.color-btn__cornflowerblue--true {
  background-color: cornflowerblue;
  color: black;
}

.color-btn__cornflowerblue:hover {
  background-color: rgb(100, 149, 237, 0.7);
  color: black;
}

.color-btn__cornsilk--true {
  background-color: cornsilk;
  color: black;
}

.color-btn__cornsilk:hover {
  background-color: rgb(255, 248, 220, 0.7);
  color: black;
}