supabase/apps/docs/styles/main.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@import './../../../packages/ui/build/css/source/global.css';
@import './../../../packages/ui/build/css/themes/dark-combined.css';
@import './../../../packages/ui/build/css/themes/light.css';

@font-face {
  font-family: 'custom-font';
  src:
    url(../../../packages/common/assets/fonts/CustomFont-Book.woff2) format('woff2'),
    url(../../../packages/common/assets/fonts/CustomFont-Book.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'custom-font';
  src:
    url(../../../packages/common/assets/fonts/CustomFont-Medium.woff2) format('woff2'),
    url(../../../packages/common/assets/fonts/CustomFont-Medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --sidebar-width: 300px;
  --header-height: 50px;
}

body {
  @apply bg-background text-foreground;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

// a {
//   text-decoration: none !important;
// }

article h1 {
  // margin-bottom: 2rem !important;
  // font-size: 3rem !important;
  // font-weight: 400 !important;
}

.thin-scrollbar {
  scrollbar-width: thin;
}

.sidebar-width {
  width: var(--sidebar-width);
}

.docs-width {
  max-width: calc(100% - var(--sidebar-width));

  @media screen and (max-width: 1024px) {
    max-width: none;
  }
}

.width-full {
  width: 100% !important;
}

.p:not(.prose *):not(.overwrite) {
  @apply text-foreground-light;
  margin-bottom: 16px;
}

.small:not(.prose *):not(.overwrite) {
  @apply text-foreground-muted text-xs;
}

.prose :where(p):not(:where([class~='not-prose'] *)) {
  white-space: pre-line;
}

code[class*='language-'],
pre[class*='language-'] {
  text-shadow: none !important;
}

// Spec doc specifics ported from docusaurus
// @TODO these should be converted to Tailwind classes

.method-list-item {
  @apply border-t border-gray-400;
  .method-list-item-label {
    @apply flex items-center gap-1;
  }
  .method-list-item-label-name {
    @apply font-mono font-bold text-sm py-2;
  }
  .method-list-item-label-badge {
    @apply font-mono text-xs px-1;
    overflow-wrap: anywhere;
  }
  .method-list-item-validation {
    @apply flex flex-wrap gap-2 items-center;
  }
  .method-list-item-description {
    @apply text-sm space-y-2;
  }
}

.method-list-title-isChild {
  font-family: var(--custom-font-size-xs);
  & h5 {
    font-weight: 200;
  }
}

.method-list-item-validation {
  code {
    @apply text-xs bg-control rounded;
    padding: 1px 6px;
  }
}

.method-list-group {
  @apply p-0 m-0 list-none border-b;
}

.method-list-group .method-list-group {
  @apply border border-overlay rounded-md;
  margin-bottom: 20px;
  max-width: 600px;
}

.method-list-group .method-list-group li {
  margin-top: 0;
  padding: 12px;
  border-bottom: none;
}
.method-list-title {
  margin: 0;
  padding: 6px 12px;
}
.method-list-group .method-list-group li div,
.method-list-group .method-list-group li h4,
.method-list-group .method-list-group li p {
  padding: 0;
  margin: 0;
}
.method-list-group .method-list-group li h4 {
  margin-bottom: 4px;
}

// These should move to their own components
// wasn't able to get an import path working
.parent-menu-toggle.active {
  svg {
    transform: rotate(90deg);
  }
}

// ToC styles
.toc__menu-item--active {
  color: hsl(var(--brand-default)) !important;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

.admonition-content > p {
  @apply m-0;
}

// format <code> inside <p>
h2 code,
h3 code,
h4 code {
  word-break: keep-all !important;
  white-space: nowrap !important;
  padding: 0.1rem 0.35rem !important;

  &:before {
    display: none;
  }
  &::after {
    display: none;
  }
}

// code inside admonitions
.admonition-content p code {
  @apply bg-control;
  word-break: keep-all !important;
  white-space: nowrap !important;
}

article p strong {
  color: inherit !important;
}

// fix box shadow when <code> is inside <a>
a:has(code) {
  box-shadow: none !important;
}

// fix code line wrapping
// need to set this to happen from medium onwards, otherwise the would cause horizontal scroll
article p code {
  &::before,
  &::after {
    display: none !important;
  }
}

.short-inline-codeblock {
  word-wrap: break-word;
  @media screen and (min-width: 769px) {
    white-space: pre !important;
  }
}

// fix firefox issue with li wrapping
.doc-content-container ul li div.relative {
  display: inline-block;
}

// fix ToC links when they have <code> inside
.toc-menu li a code {
  background: none;
  border: none;
}

/*
* sets the image in @Next/Image components
* to respect the height of the content
*
*/
.next-image--dynamic-fill {
  width: 100%;
  grid-column: 1 / -1;
}
.next-image--dynamic-fill > span {
  position: relative !important;
}
.next-image--dynamic-fill img {
  object-fit: contain;
  width: 100% !important;
  position: relative !important;
  height: unset !important;
}

#docs-content-container #introduction {
  @apply scroll-mt-60;
}

/* dat.GUI */

.dg.ac {
  z-index: 9999 !important;
}

/* tables */

th code {
  @apply text-nowrap;
}

/* 
 * Prevents very long code lines (checksums, URLs, etc., from breaking table
 * widths
 */
.prose :where(td) code {
  @apply break-all;
}

/* Zoomable image */

[data-rmiz-modal]:focus,
[data-rmiz-modal-overlay]:focus {
  outline: none !important;
}

[data-rmiz-modal-overlay],
[data-rmiz-modal-img] {
  transition-timing-function: cubic-bezier(0.24, 0.25, 0.05, 1) !important;
}
[data-rmiz-modal-overlay='visible'] {
  background-color: hsl(var(--background-default)) !important;
  opacity: 0.8;
}
[data-rmiz-modal-img] {
  image-rendering: high-quality;
}

/* Loaders */

.shimmering-loader {
  animation: shimmer 2s infinite linear;
  background: linear-gradient(
    to right,
    hsl(var(--border-default)) 4%,
    hsl(var(--background-surface-200)) 25%,
    hsl(var(--border-default)) 36%
  );
  background-size: 1000px 100%;
}

.dark .shimmering-loader {
  animation: shimmer 2s infinite linear;
  background: linear-gradient(
    to right,
    hsl(var(--border-default)) 4%,
    hsl(var(--border-control)) 25%,
    hsl(var(--border-default)) 36%
  );
  background-size: 1000px 100%;
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skip-link {
  @apply sr-only;
}
.skip-link:focus {
  @apply not-sr-only;
}