galaxy/Inputs/SelfMadeSystem_ancient-goat-9.html

<input type="checkbox" style="display: none;" id="searched" />
<div class="outer">
  <div class="tooltip">
    <div class="a"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="label">
      <div class="c"></div>
      <div class="c"></div>
      <span>Click Search</span>
    </div>
  </div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <label for="text-field" class="label">
    <div class="c"></div>
    <div class="c"></div>
    <label for="searched" class="searched-thing">
      <svg
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        class="search"
      >
        <defs>
          <radialGradient r="1" cy="0" cx="0" id="myGradient">
            <stop stop-color="white" offset="0%"></stop>
            <stop stop-color="#928293" offset="100%"></stop>
          </radialGradient>
        </defs>
        <path
          class="search-path"
          d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
        ></path>
        <path
          class="chevron-path"
          d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
        ></path>
      </svg>
    </label>
    <input
      placeholder="Search..."
      class="text-field"
      name="text"
      type="text"
      id="text-field"
    />
    <button class="filter">
      <div class="filter-outer"></div>
      <div class="filter-inner">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          class="filter-icon"
        >
          <defs>
            <radialGradient r="1.4" cy="1" cx="1" id="myOtherGradient">
              <stop stop-color="white" offset="0%"></stop>
              <stop stop-color="#928293" offset="100%"></stop>
            </radialGradient>
          </defs>
          <path
            d="M15,19.88C15.04,20.18 14.94,20.5 14.71,20.71C14.32,21.1 13.69,21.1 13.3,20.71L9.29,16.7C9.06,16.47 8.96,16.16 9,15.87V10.75L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L15,10.75V19.88M7.04,5L11,10.06V15.58L13,17.58V10.05L16.96,5H7.04Z"
          ></path>
        </svg>
      </div>
    </button>
    <div class="results">
      <div class="result">
        <a href="#" class="link">Cat - Wikipedia</a>
        <div class="description">
          The cat (Felis catus), commonly referred to as the domestic...
        </div>
      </div>
      <div class="result">
        <a href="#" class="link">Cat Definition &amp; Meaning</a>
        <div class="description">
          The meaning of CAT is a carnivorous mammal...
        </div>
      </div>
      <div class="result">
        <a href="#" class="link">CAT | English meaning</a>
        <div class="description">
          CAT definition: 1. a small animal with fur, four legs, a tail, and...
        </div>
      </div>
      <div class="dotdotdot"></div>
    </div>
  </label>
</div>

<style>
/* From Uiverse.io by SelfMadeSystem  - Tags:  */
.outer {
  position: relative;
  border-radius: 0.75rem;
  border: 2px solid #242325;
  width: 17rem;
  --angle: 155deg;
  animation: uwu 5s infinite linear paused;
  height: 3rem;
  transition: height 1s ease;
}

.a {
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    var(--angle),
    #d8b1d9,
    #ff00ff 20%,
    #ff00ff00 30%,
    #5b49d600 70%,
    #3863ff 80%,
    #c2baf8
  );
  border-radius: calc(0.75rem + 2px);
  filter: blur(2px);
}

.b {
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    var(--angle),
    #ff00ff,
    #ff00ff00,
    #5b49d600,
    #3863ff
  );
  border-radius: calc(0.75rem + 0px);
  filter: blur(10px);
  opacity: 0.3;
  transition: opacity 0.5s;
}

.outer:has(input:focus) :is(.b, .c) {
  opacity: 0.75;
}

.label {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #000;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  box-sizing: content-box;
  padding: 0.35rem;
  border-radius: 0.75rem;
}

.c {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  inset: -20px;
  background: linear-gradient(
    var(--angle),
    #ff00ff,
    #ff00ff00,
    #5b49d600,
    #3863ff
  );
  filter: blur(30px);
  opacity: 0.5;
  transition: opacity 0.5s;
}

.text-field {
  background-color: transparent;
  flex-grow: 1;
  border: none;
  outline: 0 !important;
  color: #fff;
  height: 2rem;
  margin: 0 0.5rem;
  min-width: 0;
}

.text-field::placeholder {
  color: #999999;
}

.search {
  fill: url(#myGradient);
}

.searched-thing {
  display: flex;
  align-items: center;
  z-index: 1;
  margin-left: 0.25rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

.searched-thing svg {
  width: 1.5rem;
  height: 1.5rem;
}

.filter {
  z-index: 1;
  background: linear-gradient(#100f1e, #413d54, #100f1e);
  position: relative;
  border: none;
  border-radius: 0.5rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  flex-shrink: 0;
}

.filter-outer {
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  background: linear-gradient(#413d54, #100f1e, #413d54);
  transition: all 0.5s;
}

.filter:active .filter-outer {
  opacity: 0;
}

.filter-inner {
  position: absolute;
  inset: 2px;
  background: linear-gradient(#1c1a3b, #0a071e, #1f1c4d);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(0.5rem - 2px);
  transition: all 0.5s;
}

.filter-icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: url(#myOtherGradient);
}

#searched:checked ~ .outer {
  height: 20rem;
}

:is(.search-path, .filter) {
  transition: opacity 1s;
}

#searched:checked ~ .outer :is(.search-path, .filter) {
  transition: opacity 0.5s;
  opacity: 0;
}

.chevron-path {
  opacity: 0;
  transition: opacity 0.5s;
  fill: #fdf;
}

#searched:checked ~ .outer .chevron-path {
  opacity: 1;
}

.text-field {
  transition: font-size 1s;
}

#searched:checked ~ .outer .text-field {
  transition: font-size 0.5s;
  font-size: large;
}

.results {
  position: absolute;
  opacity: 0;
  top: 3rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  padding: 1rem;
  transition: opacity 0.5s;
  overflow: hidden;
  background: #0004;
  z-index: 1;
  border-radius: 1rem;
}

#searched:checked ~ .outer .results {
  transition: opacity 1s;
  opacity: 1;
}

.link {
  color: #6882e3;
}

.description {
  color: #fffa;
  font-size: small;
}

.dotdotdot,
.dotdotdot::before,
.dotdotdot::after {
  content: "";
  width: 0.25rem;
  height: 0.25rem;
  background-color: #fffa;
  border-radius: 100%;
}

.dotdotdot {
  margin: 1.25rem auto 0 auto;
  left: 50%;
  bottom: 1.4rem;
  transform: translate(-50%, -50%);
}

.dotdotdot::before {
  position: absolute;
  transform: translateY(-200%);
}

.dotdotdot::after {
  position: absolute;
  transform: translateY(200%);
}

.tooltip {
  pointer-events: none;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  top: -6rem;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  opacity: 0;
  transition: top 0.3s ease-in, opacity 0.3s linear;
  background: linear-gradient(
    var(--angle),
    #ff00ff44,
    #ff00ff00,
    #5b49d600,
    #3863ff44
  );
  background-color: #000;
  border-radius: 0.5rem;
  padding: 0.5rem;
  width: 8rem;
  height: 2rem;
}

.tooltip .label {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tooltip .label span {
  transform: rotate(180deg);
}

.tooltip :is(.b, .c) {
  opacity: 0.5 !important;
}

#searched:not(:checked) ~ .outer:hover .tooltip {
  transition: top 0.75s ease, opacity 0.5s linear;
  top: -3.5rem;
  opacity: 1;
}

</style>