supabase/studio/styles/ui.scss

.dark .sbui-default-button--dark-white {
  @apply shadow-md text-typography-body-light border-gray-50 bg-white #{!important};
  text-shadow: none !important;
}

/* Brought over from platform to be cleaned if needed */

/* Form panels */

.Form,
.Form button {
  animation: fade 200ms ease-out;
}

.Form .form-control,
.Form select {
  min-width: 250px;
  width: calc(67% - 0.5rem);
  margin-left: 0.5rem;
}

.Form .form-group,
.Form .checkbox {
  @apply w-full;
}

.form-group {
  @apply mb-2 p-0 leading-5 border-0 bg-transparent;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
}

// TO DO: REMOVE
.form-group label {
  @apply inline-block text-scale-1100 text-sm py-2;
  width: 33%;
  align-self: top;
}

.Form .checkbox .form-check-label {
  @apply flex items-center;
}

.Form .checkbox .form-check-label input[type='checkbox'] {
  @apply mr-4;
  width: auto;
}

.Form input[type='checkbox'] {
  min-width: inherit;
  width: inherit;
}

.Form .form-text,
.Form .form-error {
  @apply block text-sm text-scale-900 my-1;
  display: block;
  margin-left: calc(33% + 0.5rem);
  width: 100%;
}

.Form .form-error {
  @apply text-red-400;
}

.Form .text-danger {
  @apply text-red-900;
}

.Form .form-help {
  @apply text-gray-400;
}

.Form hr {
  @apply mt-4 mb-4;
}

.section-block {
  @apply p-0 rounded bg-panel-body-light dark:bg-panel-body-dark border border-panel-border-light dark:border-panel-border-dark;
}

.section-block--header {
  @apply border-b border-panel-border-light dark:border-panel-border-dark;
}

.section-block--header h1,
.section-block--header h2,
.section-block--header h3,
.section-block--header h4 {
  @apply m-0;
}

.section-block--header p {
  @apply text-gray-300;
}

.section-block--footer {
  @apply bg-panel-footer-light dark:bg-panel-footer-dark border-t border-panel-border-light dark:border-panel-border-dark;
}

.section-block--footer button:not(.mr-0) {
  @apply mr-2;
}

/*
  Table
*/

.table-container table {
  @apply w-full;
  border-collapse: separate;
  border-spacing: 0;
}

.table-container table span {
  @apply truncate;
}

.table-container thead th {
  @apply text-scale-1100 font-normal text-sm;
  @apply bg-table-header-light dark:bg-table-header-dark;
  @apply border-t border-b border-table-border-light dark:border-table-border-dark;
}

.table-container thead th:first-child {
  @apply pl-6 rounded rounded-r-none rounded-b-none;
  @apply border-l;
}

.table-container thead th:last-child {
  @apply pr-6 rounded rounded-l-none rounded-b-none;
  @apply border-r;
}

.table-container tbody tr {
  @apply bg-table-body-light dark:bg-table-body-dark;
}

.table-container tbody .tr--link {
  @apply cursor-pointer transition-colors;
}

.table-container tbody .tr--link:hover {
  @apply bg-table-header-light dark:bg-table-header-dark;
}

.table-container tbody td {
  @apply border-b p-3 px-4 text-sm text-gray-1100 border-table-border-light dark:border-table-border-dark;
}

.table-container tbody td:first-child {
  @apply pl-6 border-b border-l border-table-border-light dark:border-table-border-dark;
}

.table-container tbody td:last-child {
  @apply pr-6 border-b border-r border-table-border-light dark:border-table-border-dark;
}

.table-container tbody tr:last-child td:first-child {
  @apply rounded rounded-r-none rounded-t-none;
}

.table-container tbody tr:last-child td:last-child {
  @apply rounded rounded-l-none rounded-t-none;
}

.table-container--borderless thead th {
  border-top: none;
}

.table-container--borderless thead th:first-child {
  border-left: none;
}

.table-container--borderless thead th:last-child {
  border-right: none;
}

.table-container--borderless tbody td:first-child {
  border-left: none;
}

.table-container--borderless tbody td:last-child {
  border-right: none;
}

.table-container--borderless tbody tr:last-child td {
  border-bottom: none;
}

/* Docs */
.Docs {
  &--inner-wrapper {
    background: linear-gradient(
      90deg,
      var(--colors-scale1) 50%,
      var(--colors-scale3) 50%
    ); /* bg-white bg-coolGray-100 */
    width: 100%;
  }

  .dark &--inner-wrapper {
    background: linear-gradient(
      90deg,
      var(--colors-scale3) 50%,
      var(--colors-scale2) 50%
    ); /* bg-gray-700 bg-gray-600 */
  }

  // h1,
  // h2,
  // h3 {
  //   @apply p-4 m-0;
  // }

  .doc-heading {
    @apply text-black dark:text-white capitalize mt-4 px-6 w-1/2;
    hyphens: auto;
    max-width: 50%;
  }

  .doc-section {
    @apply border-b flex border-scale-500;
  }

  .doc-section article:first-child {
    @apply prose prose-docs prose-sm max-w-none;
  }

  .text {
    @apply p-4 px-6 w-1/2;
    max-width: 50%;

    // a:not(.btn-primary):not(.btn-secondary) {
    //   @apply text-green-500;
    // }

    a:hover {
      @apply text-green-600;
    }

    p:last-child {
      padding-bottom: 0;
    }
  }

  .code {
    @apply flex-1 p-2 px-6 w-1/2 pb-4;
    max-width: 50%;

    h4 {
      @apply uppercase font-normal m-1 p-0 text-sm text-scale-1100;
    }

    h4:not(:first-child) {
      @apply mt-6;
    }

    code {
      @apply m-1 p-0;
      background-color: none;
    }

    .is-highlighted {
      @apply text-brand-900;
    }
  }
}

::-moz-selection {
  /* Code for Firefox */
  @apply bg-brand-900;
  color: #333 !important;
}

::selection {
  background-color: #6ee7b7;
  color: #333 !important;
}

.has-hidden-children {
  .visible-child {
    transition: opacity 0.2s ease;
    opacity: 100;
  }
  .hidden-child {
    transition: opacity 0.2s ease;
    opacity: 0;
  }
}

.has-hidden-children:hover {
  .visible-child {
    opacity: 0;
    pointer-events: none;
  }
  .hidden-child {
    opacity: 100;
  }
}

.SQLTabNav {
  overflow-x: auto;
  overflow-y: hidden !important;

  &::-webkit-scrollbar {
    display: none !important;
  }

  // for Firefox
  scrollbar-width: none; // auto | thin | none | <length>;
}

.SQLTabContainer {
  height: calc(100vh - 3rem);
  min-height: calc(100vh - 3rem);
  .gutter {
    cursor: row-resize;
  }
}

.radix-tooltip-arrow {
  polygon {
    @apply fill-scale-100 dark:fill-scale-100;
    // fill: #eeeeee;
  }
}