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;
}

::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;
}

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

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

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

.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;
  }
}

button {
  @apply font-medium;
  @apply outline-none;
  @apply focus-visible:ring;
  @apply focus-visible:ring-inset;
  @apply focus-visible:ring-accent;
}

.tippy-popper {
  .tooltip-theme {
    @apply bg-secondary;
    @apply text-primaryLight;
    @apply text-xs;
    @apply font-semibold;
    @apply px-2;
    @apply px-4;
    @apply shadow;
  }

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

  &[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-divider;
}

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

input {
  @apply truncate;
}

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

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

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

  pre,
  input {
    @apply cursor-pointer;
  }

  .trigger {
    @apply w-full;
  }

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

    content: "\e313";
    top: 16px;
    right: 16px;
  }
}

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

  // height: 40px;

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

option {
  @apply bg-primary;
}

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;
  }
}

.error:not(input),
.disabled:not(input),
[disabled] {
  @apply bg-error;
  @apply text-secondaryLight;
  @apply fill-current;
  @apply cursor-not-allowed;

  &.icon {
    @apply text-error;
    @apply fill-current;
  }
}

.row-wrapper {
  @apply flex flex-1 flex-row;
  @apply items-center;
  @apply justify-between;

  span,
  div {
    @apply inline-flex;
    @apply flex-nowrap;
    @apply items-center;
    @apply justify-center;
  }
}

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

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

.redir-response {
  @apply text-pink-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;
  }
}

#send {
  @apply whitespace-nowrap;
  @apply outline-none;
  @apply border-none;

  &.show {
    @apply flex;
    @apply fixed;
    @apply shadow-lg;
    @apply rounded-lg;

    bottom: 86px;
    left: 50%;
    z-index: 10001;
    transform: translateX(-50%);
  }
}

section {
  @apply flex;
  @apply rounded-lg;
  @apply w-full;
}

.toasted-container .toasted {
  justify-content: space-between !important;
}

.toasted.info {
  background-color: var(--accent-color) !important;
  color: var(--primary-color) !important;
  font-weight: 700 !important;
}

.toasted.bubble .action {
  color: inherit !important;
}

.toasted .action {
  margin-left: auto !important;
}

.page-columns {
  @apply flex flex-1 flex-col;
}

.inner-left {
  @apply flex;
  @apply order-1;
}

.inner-right {
  --width: 33%;
  --ml: 1rem;
  @apply flex;
  @apply order-2;

  margin-left: var(--ml);
  width: var(--width);
}

@media (max-width: 767px) {
  .content,
  .columns {
    @apply flex-col;
  }

  main {
    padding: 0 8px 68px;
    margin-bottom: env(safe-area-inset-bottom);
  }

  ul,
  ol {
    @apply flex-col flex-nowrap;
  }

  ul li,
  ol li {
    @apply flex;
  }

  .hide-on-small-screen {
    @apply !hidden;
  }

  .sticky-inner {
    @apply relative;
    @apply w-full;
  }

  .inner-left {
    order: 0;
  }

  .inner-right {
    --ml: 0;
  }

  .toasted-container {
    margin-bottom: 68px;
  }
}

.toasted-ad {
  @apply bg-gray-50;
  @apply text-gray-900 text-sm;
  @apply font-bold;
  @apply rounded-lg;
  @apply shadow-lg;

  padding: 16px !important;

  .action {
    @apply bg-gray-50;
    @apply text-gray-900;
    @apply rounded-lg;
    @apply font-bold;

    text-transform: none !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    margin-left: 8px !important;
  }
}