kodadot/nft-gallery

@use 'sass:meta';

html {
  height: 100%;
  background-color: $white;
  // code mardkown style
  @include meta.load-css('prism-themes/themes/prism-one-light.css');
  &.dark {
    background-color: $scheme-main;
    // code mardkown style
    @include meta.load-css('prism-themes/themes/prism-one-dark.css');
  }
}

body,
div#__nuxt,
div#__layout,
main {
  // without this, footer image is above main contents
  // block hover, click events
  z-index: 100;
}

main {
  background-color: unset !important;
}

body {

  @apply text-text-color;

  a {
    @apply text-text-color hover:text-link-hover;
  }

  strong,
  .title,
  .subtitle,
  .card-header-title {
    @include ktheme() {
      color: theme('text-color');
    }
  }

  .input,
  select {
    @include ktheme() {
      background-color: theme('background-color') !important;
      color: theme('text-color') !important;
      &::placeholder {
        color: theme('placeholder-color') !important;
      }
    }
  }

  .field {
    .input {
      @include ktheme() {
        border-radius: 0;
        border: 1px solid theme('k-grey-fix');
        background-color: theme('background-color');
        color: theme('text-color');

        &:focus {
          border: 1px solid theme('text-color');
        }
      }
    }
  }

  .select {
    &:not(.is-multiple):not(.is-loading)::after {
      @include ktheme() {
        border-color: theme('text-color');
      }
    }
  }

  .select select[disabled] {
    @include ktheme() {
      background-color: theme('disabled') !important;
      color: theme('placeholder-color') !important;
    }
  }

  .label {
    color: $primary;
    text-transform: uppercase;
  }

  .orientation {
    perspective: 30em;
  }

  .money-cursor,
  .money-cursor .button {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' class='text-2xl' style='fill:black;'><text y='50%'>💸</text></svg>"),
      auto;
  }

  .message.is-primary .message-body {
    color: $primary;
  }
}

.container.is-fluid {
  padding-left: $fluid-container-padding;
  padding-right: $fluid-container-padding;
}

@include mobile {
  .column-padding {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 0 -12px !important;
  }
  .container.is-fluid {
    padding-left: $fluid-container-padding-mobile;
    padding-right: $fluid-container-padding-mobile;
  }
}

/* move to global */
.is-ellipsis {
  @apply overflow-hidden whitespace-nowrap text-ellipsis;
}

.collapseHidden {
  .collapse-trigger {
    display: none;
  }
}

.image-outline {
  @include ktheme() {
    border: 1px solid theme('border-color');
  }
  border-radius: 50%;
}

.box {
  .box-container {
    @media screen and (max-width: 768px) {
      flex-direction: column-reverse;
    }
  }
}

.chain-logo {
  aspect-ratio: 127 / 42;
}

.instance {
  &:last-child {
    border-bottom: none !important;
  }
  @include ktheme() {
    border-bottom: 1px solid theme('border-color');
  }
}

hr {
  height: 1px;
  @include ktheme() {
    background: theme('k-shade');
  }
}

.snackbar {
  @apply text-text-color bg-background-color border border-border-color shadow-primary;

  .button {
    @apply bg-k-accent-light-2 text-text-color;
  }
}

// global table css

.table {
  @apply bg-background-color text-text-color;

  &.is-hoverable tbody tr:not(.is-selected):hover {
    @apply bg-background-color;
  }

  th {
    @apply text-text-color bg-background-color;
  }
}

.fluid-padding-left {
  padding-left: $fluid-container-padding;
}

//shadow

.k-shadow {
  @include ktheme() {
    box-shadow: theme('primary-shadow');
  }
}

.modal {
  .modal-content {
    border: none !important;
    box-shadow: none !important;
  }
  .modal-background {
    background-color: rgba(0, 0, 0, 0.17) !important;
  }
}

// Transak
.transak_modal-overlay {
  @apply z-[999] #{!important};
}

.transak_modal {
  @apply z-[1000] max-h-[600px] #{!important};
}

#transakOnOffRampWidget {
  height: 100% !important;
}

.has-accent-blur {
  position: relative;
  .blur {
    position: absolute !important;
    top: 0;
    left: 0;
  }
}

.inverse-text {
  letter-spacing: -0.02em;
  @include ktheme() {
    color: theme('text-color-inverse');
    text-shadow:
      1px 1px 0 theme('text-color'),
      1px -1px 0 theme('text-color'),
      -1px 1px 0 theme('text-color'),
      -1px -1px 0 theme('text-color'),
      1px 0px 0 theme('text-color'),
      0px 1px 0 theme('text-color'),
      -1px 0px 0 theme('text-color'),
      0px -1px 0 theme('text-color'),
      4px 4px theme('text-color');
  }
}