hoppscotch/packages/hoppscotch-app/assets/scss/styles.scss

* {
  @apply backface-hidden;
  @apply before:backface-hidden;
  @apply after:backface-hidden;
  @apply selection:bg-accentDark;
  @apply selection:text-accentContrast;
}

:root {
  @apply antialiased;

  accent-color: var(--accent-color);
  font-variant-ligatures: common-ligatures;
}

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

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

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

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

input::placeholder,
textarea::placeholder,
.cm-placeholder {
  @apply text-secondary;
  @apply opacity-35;
}

input,
textarea {
  @apply text-secondaryDark;
  @apply font-medium;
}

html {
  scroll-behavior: smooth;
}

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

  animation: fade 300ms forwards;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

@keyframes fade {
  0% {
    @apply opacity-0;
  }

  100% {
    @apply opacity-100;
  }
}

.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 {
  @apply flex-shrink-0;
  @apply overflow-hidden;

  font-size: var(--line-height-body) !important;
  width: var(--line-height-body);
}

.svg-icons {
  @apply flex-shrink-0;
  @apply overflow-hidden;

  height: var(--line-height-body);
  width: var(--line-height-body);
}

a {
  @apply inline-flex;
  @apply text-current;
  @apply no-underline;
  @apply outline-none;
  @apply transition;
  @apply text-body;
  @apply leading-body;

  &.link {
    @apply items-center;
    @apply py-0.5 px-1;
    @apply -my-0.5 -mx-1;
    @apply text-accent;
    @apply rounded;
    @apply hover:text-accentDark;
    @apply focus-visible:ring;
    @apply focus-visible:ring-accent;
  }
}

.cm-tooltip {
  .tooltip-theme {
    @apply fixed;
    @apply -mt-6;
  }
}

.tooltip-theme {
  @apply bg-tooltip;
  @apply text-primary;
  @apply font-semibold;
  @apply py-1 px-2;
  @apply rounded;
  @apply truncate;
  @apply shadow;
  @apply leading-body;

  font-size: 86%;

  xmp {
    @apply hidden;
    @apply sm:inline-flex;
    @apply font-sans;
    @apply bg-gray-500;
    @apply bg-opacity-45;
    @apply text-primaryLight;
    @apply rounded-sm;
    @apply px-1;
    @apply ml-1;
    @apply my-0;
    @apply truncate;

    &.expand-loop {
      @apply bg-error;
      @apply text-accentContrast;
    }
  }
}

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

  .tippy-roundarrow svg {
    @apply fill-popover;
  }
}

[interactive] > div {
  @apply flex;
  @apply flex-1;
  @apply h-full;
}

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

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

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

.input,
.select,
.textarea {
  @apply flex;
  @apply w-full;
  @apply py-2 px-4;
  @apply bg-transparent;
  @apply rounded;
  @apply text-secondaryDark;
  @apply border border-divider;
  @apply focus-visible:border-dividerDark;
}

input,
select,
textarea,
button {
  @apply truncate;
  @apply transition;
  @apply text-body;
  @apply leading-body;
  @apply focus:outline-none;
  @apply disabled:cursor-not-allowed;
}

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

.floating-input ~ label {
  @apply py-0.5;
  @apply px-2;
  @apply m-2;
  @apply rounded;
  @apply transition;
  @apply absolute;
  @apply origin-top-left;
}

.floating-input:focus-within ~ label,
.floating-input:not(:placeholder-shown) ~ label {
  @apply bg-primary;
  @apply transform;
  @apply origin-top-left;
  @apply scale-75;
  @apply -translate-y-4;
  @apply translate-x-1;
}

.floating-input:focus-within ~ label {
  @apply text-secondaryDark;
}

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

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

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

.select-wrapper {
  @apply flex flex-1;
  @apply relative;

  &::after {
    @apply absolute;
    @apply flex;
    @apply inset-y-0;
    @apply items-center;
    @apply justify-center;
    @apply pointer-events-none;
    @apply font-icon;
    @apply text-secondaryLight;
    @apply right-3;

    content: "\e313";
  }
}

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

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

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

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

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

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

.toasted-container {
  @apply max-w-md;

  .toasted {
    &.toasted-primary {
      @apply bg-tooltip;
      @apply text-primary;
      @apply justify-between;
      @apply shadow;
      @apply font-medium;
      @apply transition;
      @apply text-body;
      @apply leading-body;

      .action {
        @apply bg-gray-500;
        @apply px-4;
        @apply bg-opacity-10;
        @apply ml-auto;
        @apply last:ml-4;
        @apply sm:ml-8;
        @apply rounded;
        @apply text-current;
        @apply normal-case;
        @apply font-medium;
        @apply text-body;
        @apply leading-body;
        @apply hover:bg-opacity-20;
        @apply hover:no-underline;
      }
    }

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

    &.error {
      @apply !bg-red-200;
      @apply !text-red-800;
    }

    &.success {
      @apply !bg-green-200;
      @apply !text-green-800;
    }
  }
}

.smart-splitter .splitpanes__splitter {
  @apply relative;
  @apply bg-primaryLight;
}

.no-splitter .splitpanes__splitter {
  @apply relative;
  @apply bg-primaryLight;
}

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

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

.no-splitter.splitpanes--vertical > .splitpanes__splitter {
  @apply w-0.5;
  @apply pointer-events-none;
}

.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
  @apply h-0.5;
  @apply pointer-events-none;
}

.smart-splitter .splitpanes__splitter::before {
  @apply absolute;
  @apply inset-0;
  @apply bg-accentLight;
  @apply opacity-0;
  @apply z-20;
  @apply transition;

  content: "";
}

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

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

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

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

.smart-splitter.splitpanes--vertical > .splitpanes__splitter::before {
  @apply -left-0.5;
  @apply -right-0.5;
  @apply h-full;
}

.smart-splitter.splitpanes--horizontal > .splitpanes__splitter::before {
  @apply -top-0.5;
  @apply -bottom-0.5;
  @apply w-full;
}

.cm-focused {
  @apply select-auto;
  @apply !outline-none;

  .cm-activeLine {
    @apply bg-primaryLight;
  }

  .cm-activeLineGutter {
    @apply bg-primaryDark;
  }
}

.cm-editor {
  .cm-line::selection {
    background-color: var(--accent-dark-color) !important;
    color: var(--accent-contrast-color) !important;
  }
  .cm-line ::selection {
    background-color: var(--accent-dark-color) !important;
    color: var(--accent-contrast-color) !important;
  }
}

.shortcut-key {
  @apply inline-flex;
  @apply font-sans;
  @apply text-tiny;
  @apply bg-divider;
  @apply rounded;
  @apply ml-2;
  @apply px-1;
  @apply transition;
}

.capitalize-first {
  @apply first-letter:capitalize;
}

details summary::-webkit-details-marker {
  @apply hidden;
}

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

.env-highlight {
  * {
    @apply text-accentContrast;
  }
}