supabase/apps/www/styles/index.css

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

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

html {
  scroll-behavior: smooth;
}

body {
  @apply bg-scale-200;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* h1,
h2,
h3,
h4,
h5,
h6 { */
/*
  Typography
*/

.h1:not(.prose *):not(.overwrite),
.h2:not(.prose *):not(.overwrite),
.h3:not(.prose *):not(.overwrite),
.h4:not(.prose *):not(.overwrite),
.h5:not(.prose *):not(.overwrite),
.h6:not(.prose *):not(.overwrite) {
  @apply text-scale-1200;
  margin-bottom: 16px;
}

.h1:not(.prose *):not(.overwrite) {
  @apply text-4xl;
}

.h2:not(.prose *):not(.overwrite) {
  @apply text-3xl;
}

.h3:not(.prose *):not(.overwrite) {
  @apply text-2xl;
}

.h4:not(.prose *):not(.overwrite) {
  @apply text-xl;
}

.h5:not(.prose *):not(.overwrite) {
  @apply text-xl;
}

.h1:not(.prose *):not(.overwrite),
.h2:not(.prose *):not(.overwrite) {
  line-height: 1.2 !important;
}

@media only screen and (max-width: 960px) {
  .h1:not(.prose *):not(.overwrite) {
    font-size: 2.2rem !important;
  }
  .h2:not(.prose *):not(.overwrite) {
    font-size: 2rem !important;
  }
}

@media only screen and (max-width: 720px) {
  .h1:not(.prose *):not(.overwrite) {
    font-size: 2rem !important;
  }
  .h2:not(.prose *):not(.overwrite) {
    font-size: 1.8rem !important;
  }
}

@media only screen and (max-width: 520px) {
  .h1:not(.prose *):not(.overwrite) {
    font-size: 1.8rem !important;
  }
  .h2:not(.prose *):not(.overwrite) {
    font-size: 1.6rem !important;
  }
}

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

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

.sbui-border-fix select {
  @apply border-solid;
  border-width: 1px;
}

.section--masked {
  /* overflow: hidden; */
}

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

.section--bg-masked {
  position: absolute;
  width: 100%;
  height: 100%;
  /* overflow: visible; */
}

.section--bg {
  @apply bg-scale-100 dark:bg-scale-200;
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform-origin: 100% 0;
  transform: skewY(-2deg);
  overflow: hidden;
  /* transform-origin: var(--sectionTransformOrigin);
    transform: skewY(var(--sectionAngle));
    background: var(--backgroundColor);
    overflow: 
    hidden; */
}

.section-container {
  position: relative;
  /* z-index: 1; */
  /* display: flex;
  justify-content: center; */
}

/* Database page */

.dashboard-tabs div[role='seperator'] {
  @apply border border-gray-50 dark:border-gray-700;
}

/* a {
  @apply hover:text-black dark:hover:text-white;
} */

.sbui-tabs--alt div[role='tablist'] .sbui-btn-primary {
  @apply dark:bg-scale-300 bg-gray-800 text-white dark:text-white;
  text-shadow: none;
  font-weight: 400;
}
.sbui-tabs--alt div[role='tablist'] .sbui-btn-text {
  @apply dark:text-gray-400;
  font-weight: 400;
  shadow: none;
}

.sbui-tabs--underline-alt div[role='tablist'] .sbui-tab-button-underline--active {
  @apply border-gray-900 dark:border-white;
}
/* override position of tabs  */
.dashboard-tabs > div > div {
  justify-content: center;
}

/* Auth page */

/* .auth-container > div:nth-child(2) {
  width: 420px;
} */

/* .auth-container {
  @apply rounded;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23edebf0' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.dark .auth-container {
  background-color: #181818;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23313131' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
} */

.dark .header--light {
  display: none;
}

.header--dark {
  display: none;
}

.dark .header--dark {
  display: block;
}

table {
  margin-top: 1em;
  border-collapse: collapse;
}

.sbui-typography-container thead {
  @apply text-gray-500 dark:text-gray-200;
}

.sbui-typography a {
  @apply break-words;
}

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

.line-clamp {
  display: -webkit-box;
  margin: 0 auto;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/**
launch week
*/

.launch-week-timeline-border--approaching {
  border-image: linear-gradient(to bottom, var(--colors-brand9), var(--colors-purple7)) 1 100%;
}

.launch-week-gradientBg {
  background-image: url('/images/launchweek/supabase-launch-week-5-bg--light.jpg');
  background-color: var(--colors-scale2);
  width: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100%;
  background-position: bottom;
  background-position-y: -820px;
  background-size: 1929px 1170px;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 0;
}

.dark .launch-week-gradientBg {
  background-image: url('/images/launchweek/supabase-launch-week-5-bg.jpg');
  background-color: #1c1c1c;
}

@media screen and (min-width: 1032px) {
  .launch-week-gradientBg {
    background-position-y: -780px;
  }
}

.launch-week-gradientBg--anouncement-bar {
  background-image: url('/images/launchweek/supabase-launch-week-5-bg.jpg');
  background-color: hsl(0, 0%, 11%);
  width: 100%;
  clear: both;
  background-position: bottom;
  background-position-y: -820px;
  background-size: 1929px 1170px;
  background-repeat: no-repeat;
}

.dark .launch-week-gradientBg--anouncement-bar {
  background-image: url('/images/launchweek/supabase-launch-week-5-bg.jpg');
  background-color: #1c1c1c;
}

@media screen and (min-width: 1032px) {
  .launch-week-gradientBg--anouncement-bar {
    background-position-y: -780px;
  }
}

.video-container {
  @apply overflow-hidden rounded-xl border;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.all-unset {
  all: unset;
}

.auth-container {
  background: linear-gradient(270deg, #71fb8e, #acecbc);
  background-size: 400% 400%;

  -webkit-animation: AnimationName 14s ease infinite;
  -moz-animation: AnimationName 14s ease infinite;
  animation: AnimationName 14s ease infinite;
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@property --rotate {
  syntax: '<angle>';
  initial-value: 132deg;
  inherits: false;
}

:root {
  --auth-ui-card-height: 50vh;
}

.glow-area {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: transparent;
  z-index: -1;
  cursor: pointer;
}

.glow-area::after {
  position: absolute;
  content: '';
  top: calc(var(--auth-ui-card-height) / 8);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.75);
  filter: blur(calc(var(--auth-ui-card-height) / 6));
  background-image: linear-gradient(
    var(--rotate),
    var(--colors-brand),
    #3c67e3 43%,
    var(--colors-brand)
  );
  opacity: 1;
  transition: opacity 0.5s;
  animation: spin 8s linear infinite;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}