supabase/studio/styles/react-data-grid-logs.scss

.data-grid--simple-logs {
  .rdg-cell,
  .rdg-cell span {
    @apply text-scale-1100 font-normal #{!important};
    border-left: none;
    border-right: none;
  }

  .rdg-cell:first-child {
    @apply pl-5;
  }
  .rdg-cell:last-child {
    @apply pr-5;
  }

  .rdg-row {
    &.rdg-row--focussed {
      @apply border-r border-brand-900;
      border-right-width: 4px;
    }

    &.rdg-row--focussed .rdg-cell,
    &.rdg-row--focussed .rdg-cell span {
      @apply text-scale-1200 font-semibold #{!important};
    }
  }
}

.data-grid--logs-explorer {
  @apply transition-all overflow-hidden overflow-x-scroll;

  .rdg-cell,
  .rdg-cell span {
    @apply text-scale-1100 font-normal #{!important};
  }

  .rdg-cell:first-child {
    @apply pl-5;
  }
  .rdg-cell:last-child {
    @apply pr-5;
  }

  .rdg-row {
    &.rdg-row--focussed {
      @apply border-r border-brand-900;
      border-right-width: 4px;
    }

    &.rdg-row--focussed .rdg-cell,
    &.rdg-row--focussed .rdg-cell span {
      @apply text-scale-1200 font-semibold #{!important};
    }
  }
}

.syntax-highlight {
  counter-reset: line-numbering;
  font-family: Menlo, Monaco, monospace;
  color: var(--colors-scale10);
  word-break: break-word;
}

.syntax-highlight .line::before {
  content: counter(line-numbering);
  counter-increment: line-numbering;
  padding-right: 0px;
  display: inline-block;
  color: var(--colors-scale8);
  /* space after numbers */
  width: 2rem;
  text-align: left;
}

.logs-shimmering-loader {
  animation: shimmer 1.5s infinite linear;
  background: linear-gradient(
    to right,
    var(--colors-scale2) 0%,
    var(--colors-brand9) 25%,
    var(--colors-brand4) 35%,
    var(--colors-scale2) 45%,
    var(--colors-scale3) 75%
  );
  background-size: 3000px 100%;
}

@keyframes logsShimmer {
  0% {
    background-position: -1000px 0;
  }
  50% {
    background-position: 1000px 0;
  }
}