FezVrasta/popper.js

:root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  font-synthesis: none;
  view-transition-name: none;
}

html {
  @apply scroll-pt-20;
}

summary {
  @apply cursor-pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-variable;
}

[data-remove-transitions] * {
  transition: none !important;
}

[data-reach-skip-nav-link]:focus {
  @apply fixed m-3 bg-white/90 text-black backdrop-blur;
  z-index: 2147483647;
}

::selection {
  @apply bg-blue-500 text-white;
}

code ::selection {
  @apply bg-blue-500/20 text-inherit;
}

.not-prose pre {
  @apply overflow-x-auto rounded bg-white p-4 text-[0.9rem] leading-loose;
}

.not-prose :not(pre) > code {
  @apply overflow-x-auto rounded bg-white py-[0.35rem] px-[0.5rem] text-[0.9rem];
}

.DocSearch-Button,
.DocSearch-Button:hover,
.DocSearch-Button:focus {
  @apply m-0 h-8 w-48 min-w-0 bg-white bg-none text-sm font-normal text-black outline-none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.DocSearch-Button:hover,
.DocSearch-Button:focus {
  box-shadow: 0 0 0 1px black;
}

.DocSearch-Button .DocSearch-Search-Icon {
  @apply text-black;
}

.DocSearch-Button:hover .DocSearch-Search-Icon {
  @apply text-black;
}

.DocSearch-Container {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px) saturate(120%);
}

.DocSearch-Button-Keys {
  @apply hidden;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --docsearch-modal-background: #424457;
    --docsearch-footer-background: #424457;
    --docsearch-text-color: var(--tw-prose-invert-body);
    --docsearch-searchbox-focus-background: #22252c;
    --docsearch-hit-background: #22252c;
    --docsearch-modal-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    --docsearch-highlight-color: #a7d0ff;
    --docsearch-logo-color: #9aa0b1;
    --docsearch-key-gradient: none;
    --docsearch-key-shadow: none;
    --docsearch-searchbox-shadow: inset 0 0 0 1px #a7d0ff;
    --docsearch-hit-active-color: black;
    --docsearch-hit-shadow: none;
    --docsearch-hit-color: var(--tw-prose-invert-body);
    --docsearch-footer-shadow: none;
  }

  .cls-1,
  .cls-2 {
    fill: #9aa0b1 !important;
  }

  ::selection {
    @apply bg-blue-500/30 text-inherit;
  }

  code ::selection {
    @apply bg-blue-500/30;
  }

  .DocSearch-Button,
  .DocSearch-Button:hover,
  .DocSearch-Button:focus {
    @apply bg-gray-1000/95 text-purple-200/50 outline-none backdrop-blur-lg;
    box-shadow: 0 0 0 1px rgba(200, 200, 255, 0.15);
  }

  .DocSearch-Container {
    background: rgba(10, 10, 20, 0.2);
  }

  .DocSearch-Button:hover {
    @apply text-purple-200/80 shadow-purple-300/30;
    box-shadow: 0 0 0 1px rgba(200, 200, 255, 0.5);
  }

  .DocSearch-Button .DocSearch-Search-Icon {
    @apply text-inherit;
  }

  .DocSearch-Button:hover .DocSearch-Search-Icon {
    @apply text-inherit;
  }

  .DocSearch-Button:focus .DocSearch-Search-Icon {
    color: rgba(225, 200, 255, 0.8);
  }

  .not-prose :not(pre) > code,
  .not-prose pre {
    @apply bg-gray-700;
  }
}

code[data-theme*=' '],
code[data-theme*=' '] span {
  color: var(--shiki-light);
}

@media (prefers-color-scheme: dark) {
  code[data-theme*=' '],
  code[data-theme*=' '] span {
    color: var(--shiki-dark);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

[data-fade='initial'] {
  animation: fadeIn 0ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

[data-fade='in'] {
  animation: fadeIn 300ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

[data-fade='out'] {
  animation: fadeOut 75ms ease-out forwards;
}