hoppscotch/assets/scss/styles.scss

*,
*::before,
*::after {
  @apply backface-hidden;
}

:root {
  @apply antialiased;

  font-variant-ligatures: common-ligatures;
}

::-webkit-scrollbar-track {
  @apply bg-transparent;
}

::-webkit-scrollbar-thumb {
  @apply bg-divider;
  @apply rounded-full;
  @apply border-solid;
  @apply border-4;
  @apply border-transparent;
  @apply bg-clip-content;

  &:hover {
    @apply bg-dividerDark;
    @apply bg-clip-content;
  }
}

::-webkit-scrollbar {
  @apply w-4;
  @apply h-4;
}

.hide-scrollbar::-webkit-scrollbar {
  @apply hidden;
}

::selection {
  @apply bg-accent;
  @apply text-primary;
}

::placeholder {
  @apply text-secondaryLight;
  @apply opacity-25;
}

html {
  scroll-behavior: smooth;
}

body {
  @apply bg-primary;
  @apply text-secondary;
  @apply !text-sm;
  @apply font-medium;
  @apply select-none;
  @apply overflow-x-hidden;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.fade-enter-active,
.fade-leave-active,
.page-enter-active,
.page-leave-active,
.layout-enter-active,
.layout-leave-active {
  @apply transition-opacity;
}

.fade-enter,
.fade-leave-to .page-enter,
.page-leave-to,
.layout-enter,
.layout-leave-to {
  @apply opacity-0;
}

.material-icons {
  font-size: 1.25rem !important;
}

.svg-icons {
  @apply inline-flex;
  @apply flex-shrink-0;
  @apply h-5;
  @apply w-5;
}

a {
  @apply inline-flex;
  @apply text-current;
  @apply no-underline;
  @apply outline-none;
  @apply focus-visible:ring;
  @apply focus-visible:ring-inset;
  @apply focus-visible:ring-accent;

  &.link {
    @apply items-center;
    @apply text-accent;
    @apply hover:text-accent;
    @apply focus:text-accent;
  }
}

.tippy-popper {
  .tooltip-theme {
    @apply bg-tooltip;
    @apply text-primaryLight;
    @apply text-xs;
    @apply font-semibold;
    @apply py-1;
    @apply px-2;
    @apply shadow;

    kbd {
      @apply first:ml-2;
      @apply last:-mr-1;
      @apply font-sans;
      @apply bg-secondaryDark;
      @apply text-primaryDark;
      @apply rounded;
      @apply px-1;
      @apply ml-1;
    }
  }

  .popover-theme {
    @apply bg-primary;
    @apply text-secondary;
    @apply p-2;
    @apply shadow-lg;
    @apply focus:outline-none;
  }

  &[x-placement^="top"] .tippy-tooltip .tippy-arrow {
    border-top-color: var(--primary-color);
  }

  &[x-placement^="bottom"] .tippy-tooltip .tippy-arrow {
    border-bottom-color: var(--primary-color);
  }

  &[x-placement^="left"] .tippy-tooltip .tippy-arrow {
    border-left-color: var(--primary-color);
  }

  &[x-placement^="right"] .tippy-tooltip .tippy-arrow {
    border-right-color: var(--primary-color);
  }
}

.tippy-content > div {
  @apply flex;
  @apply flex-col;
  @apply max-h-64;
  @apply overflow-y-auto;
  @apply items-stretch;
}

hr {
  @apply border-b;
  @apply border-dividerLight;
}

.heading {
  @apply font-bold;
  @apply text-secondaryDark;
  @apply text-lg;
}

.input,
.select {
  @apply flex;
  @apply flex-1;
  @apply w-full;
  @apply px-4;
  @apply py-2;
  @apply bg-primary;
  @apply truncate;
  @apply rounded-lg;
  @apply font-semibold;
  @apply font-mono;
  @apply text-xs;
  @apply border;
  @apply border-divider;
  @apply transition;
  @apply focus:outline-none;
  @apply focus:border-accent;
}

.input[type="file"],
.input[type="radio"],
#installPWA {
  @apply hidden;
}

pre.ace_editor {
  @apply font-mono;
  @apply z-0;
  @apply resize-none;
}

select {
  @apply cursor-pointer;
  @apply appearance-none;

  &::-ms-expand {
    @apply hidden;
  }
}

.select-wrapper {
  @apply relative;
  @apply w-full;

  &::after {
    @apply inline-block;
    @apply absolute;
    @apply pointer-events-none;
    @apply font-icon;
    @apply text-secondaryLight;
    @apply top-3;
    @apply right-3;

    content: "\e313";
  }
}

input[type="checkbox"] {
  @apply hidden;

  &,
  & + label {
    @apply align-middle;
    @apply cursor-pointer;

    &::before {
      @apply border;
      @apply border-secondary;
      @apply rounded-lg;
      @apply inline-flex;
      @apply items-center;
      @apply justify-center;
      @apply text-transparent;

      content: "\2714";
      height: 16px;
      width: 16px;
      margin: 8px 8px 8px 0;
    }
  }

  &:checked + label::before {
    @apply bg-accent;
    @apply border-accent;
    @apply text-primary;
  }
}

.info-response {
  @apply text-pink-400;
}

.success-response {
  @apply text-green-400;
}

.redir-response {
  @apply text-yellow-400;
}

.cl-error-response {
  @apply text-red-400;
}

.sv-error-response {
  @apply text-red-600;
}

.missing-data-response {
  @apply text-secondaryLight;
}

#response-details-wrapper {
  @apply relative;

  textarea {
    @apply m-0;
    @apply w-full;

    line-height: 1;
  }

  .covers-response {
    @apply absolute;
    @apply inset-0;
    @apply bg-white;
    @apply h-full;
    @apply w-full;
  }
}

.toasted-container {
  .toasted {
    &.toasted-primary {
      @apply px-6;
      @apply py-1;
      @apply bg-tooltip;
      @apply text-primary;
      @apply text-xs;
      @apply !font-semibold;

      .material-icons {
        @apply !text-md;
      }

      .action {
        @apply transition;
        @apply text-current;
        @apply text-xs;
        @apply hover:opacity-75;
        @apply hover:no-underline;
      }
    }

    &.info {
      @apply !bg-accent;
      @apply !text-primary;
    }
  }
}

@media (max-width: 767px) {
  main {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

.splitpanes__splitter {
  @apply relative;
  @apply bg-primaryLight;
  @apply transition;
}

.splitpanes--vertical > .splitpanes__splitter {
  @apply w-1;
}

.splitpanes--horizontal > .splitpanes__splitter {
  @apply h-1;
}

.splitpanes__splitter::before {
  @apply absolute;
  @apply inset-0;
  @apply bg-dividerLight;
  @apply opacity-0;
  @apply z-1;
  @apply transition;

  content: "";
}

.splitpanes__splitter::after {
  @apply absolute;
  @apply inset-0;
  @apply z-1;
  @apply transition;
  @apply flex;
  @apply items-center;
  @apply justify-center;
  @apply text-dividerDark;
  @apply font-icon;
}

.splitpanes--vertical > .splitpanes__splitter::after {
  content: "\e5d4";
}

.splitpanes--horizontal > .splitpanes__splitter::after {
  content: "\e5d3";
}

.splitpanes__splitter:hover::before {
  @apply opacity-100;
}

.splitpanes--vertical > .splitpanes__splitter::before {
  left: -2px;
  right: -2px;
  height: 100%;
}

.splitpanes--horizontal > .splitpanes__splitter::before {
  top: -2px;
  bottom: -2px;
  width: 100%;
}