mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
752 lines
14 KiB
CSS
752 lines
14 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@import url(../pages/launch-week/launchWeek.css);
|
|
|
|
@import './../../../packages/ui/build/css/source/global.css';
|
|
@import './../../../packages/ui/build/css/themes/dark.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;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth !important;
|
|
}
|
|
|
|
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(.overwrite),
|
|
h2:not(.overwrite),
|
|
h3:not(.overwrite),
|
|
h4:not(.overwrite),
|
|
h5:not(.overwrite),
|
|
h6:not(.overwrite) {
|
|
scroll-margin-top: 90px;
|
|
}
|
|
|
|
.h1:not(.prose *):not(.overwrite),
|
|
.h2:not(.prose *):not(.overwrite) {
|
|
line-height: 1.2 !important;
|
|
}
|
|
|
|
.heading-gradient {
|
|
@apply text-[#F4FFFA00] bg-clip-text bg-gradient-to-b from-scale-1200 to-scale-1200 dark:to-scale-1100;
|
|
}
|
|
|
|
.heading-gradient-brand {
|
|
@apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand dark:to-brand-800;
|
|
}
|
|
|
|
.toc-animate {
|
|
@apply !translate-x-1 !text-brand;
|
|
}
|
|
|
|
.prose-toc a {
|
|
transition: all 0.07s ease-in-out;
|
|
}
|
|
|
|
@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 !important;
|
|
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;
|
|
}
|
|
|
|
.section-container {
|
|
position: relative;
|
|
}
|
|
|
|
/* Database page */
|
|
|
|
.dashboard-tabs div[role='separator'] {
|
|
@apply border border-gray-50 dark:border-gray-700;
|
|
}
|
|
|
|
.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 */
|
|
|
|
.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 {
|
|
display: block;
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
grid-column: 1 / -1;
|
|
}
|
|
.next-image--dynamic-fill.wide {
|
|
@apply my-0 max-w-none -mx-8 w-[calc(100%_+_4rem)];
|
|
}
|
|
@media (min-width: 560px) {
|
|
.next-image--dynamic-fill.wide {
|
|
width: calc(100% + 6rem);
|
|
margin: 0 -3rem;
|
|
}
|
|
}
|
|
@media (min-width: 1280px) {
|
|
.next-image--dynamic-fill.wide {
|
|
width: calc(100% + 10rem);
|
|
margin: 0 -5rem;
|
|
}
|
|
}
|
|
@media (min-width: 1535px) {
|
|
.next-image--dynamic-fill.wide {
|
|
width: calc(100% + 14rem);
|
|
margin: 0 -7rem;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/**
|
|
animations
|
|
*/
|
|
|
|
.fade-in-up-2ms {
|
|
opacity: 0;
|
|
transform: translate3d(0, 10px, 0);
|
|
animation: fadeInUp 0.2s cubic-bezier(0.25, 0.25, 0, 1) both;
|
|
}
|
|
|
|
.fade-in-up-4ms {
|
|
opacity: 0;
|
|
transform: translate3d(0, 10px, 0);
|
|
animation: fadeInUp 0.4s cubic-bezier(0.25, 0.25, 0, 1) both;
|
|
}
|
|
|
|
.fade-in-2ms {
|
|
opacity: 0;
|
|
transform: translate3d(0, 10px, 0);
|
|
animation: fadeIn 0.2s cubic-bezier(0.25, 0.25, 0, 1) both;
|
|
}
|
|
|
|
.fade-in-4ms {
|
|
opacity: 0;
|
|
transform: translate3d(0, 10px, 0);
|
|
animation: fadeIn 0.4s cubic-bezier(0.25, 0.25, 0, 1) both;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/**
|
|
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--announcement-bar {
|
|
background: radial-gradient(circle, rgba(51, 68, 60, 1) 0%, rgba(0, 0, 0, 1) 100%);
|
|
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;
|
|
}
|
|
|
|
@media screen and (min-width: 1032px) {
|
|
.launch-week-gradientBg--announcement-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;
|
|
--lw-secondary-color: #8a8f98;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* recharts */
|
|
|
|
.recharts-surface {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Fix inline code block wrapping */
|
|
@media screen and (min-width: 769px) {
|
|
.short-inline-codeblock {
|
|
white-space: pre !important;
|
|
}
|
|
}
|
|
|
|
.gradient-container {
|
|
min-height: 360px;
|
|
position: relative;
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
left: 0;
|
|
right: 0;
|
|
overflow: hidden;
|
|
}
|
|
@media screen and (max-width: 769px) {
|
|
.gradient-container {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.gradient-mask {
|
|
z-index: -10;
|
|
position: absolute;
|
|
min-height: 100%;
|
|
width: 75%;
|
|
margin: 0 auto;
|
|
left: 0;
|
|
right: 0;
|
|
background: radial-gradient(
|
|
circle at 50% -35%,
|
|
rgba(57, 97, 125, 0.32) 0%,
|
|
rgba(57, 97, 125, 0.32) 5%,
|
|
rgba(0, 222, 209, 0.75) 8%,
|
|
#121212 65%,
|
|
#121212 100%
|
|
);
|
|
}
|
|
|
|
@media screen and (max-width: 769px) {
|
|
.gradient-mask {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* The bottom part below the stroke */
|
|
.gradient-mask--masked {
|
|
z-index: -10;
|
|
position: absolute;
|
|
min-height: 100%;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
left: 0;
|
|
right: 0;
|
|
background: radial-gradient(circle at 50% -60%, rgba(255, 255, 255, 0) 0%, #121212 65%);
|
|
}
|
|
|
|
@media screen and (max-width: 769px) {
|
|
.gradient-mask--masked {
|
|
background: radial-gradient(circle at 50% -40%, rgba(255, 255, 255, 0) 0%, #121212 65%);
|
|
}
|
|
}
|
|
|
|
/* The stroke on the circle */
|
|
.flair-mask-a {
|
|
position: absolute;
|
|
background-color: #375965;
|
|
top: 1px;
|
|
width: 180%;
|
|
left: -40%;
|
|
height: 500px;
|
|
-webkit-clip-path: ellipse(52% 135px at 50% 3px);
|
|
clip-path: ellipse(52% 213px at 50% -75px);
|
|
}
|
|
|
|
/* The inside of the circle */
|
|
.flair-mask-b {
|
|
position: absolute;
|
|
background-color: #121212;
|
|
top: 0px;
|
|
width: 182%;
|
|
left: -41%;
|
|
|
|
height: 500px;
|
|
-webkit-clip-path: ellipse(52% 135px at 50% 3px);
|
|
clip-path: ellipse(52% 213px at 50% -75px);
|
|
}
|
|
|
|
@media only screen and (min-width: 600px) {
|
|
.flair-mask-a {
|
|
top: 1px;
|
|
margin: 0 auto;
|
|
width: 140%;
|
|
left: -20%;
|
|
right: 0;
|
|
}
|
|
.flair-mask-b {
|
|
top: 0px;
|
|
margin: 0 auto;
|
|
width: 142%;
|
|
left: -21%;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 960px) {
|
|
.flair-mask-a {
|
|
top: 1px;
|
|
margin: 0 auto;
|
|
width: 120%;
|
|
left: -10%;
|
|
right: 0;
|
|
}
|
|
.flair-mask-b {
|
|
top: 0px;
|
|
margin: 0 auto;
|
|
width: 121%;
|
|
left: -10.5%;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.orbit {
|
|
width: 192px;
|
|
height: 192px;
|
|
border-radius: 50%;
|
|
background: var(--colors-scale2) content-box;
|
|
border: 1px solid gray;
|
|
box-shadow: 0 0 0 50px var(--colors-scale2), 0 0 0 51px gray, 0 0 0 100px var(--colors-scale2),
|
|
0 0 0 101px gray, 0 0 0 150px var(--colors-scale2), 0 0 0 151px gray;
|
|
margin: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.orbit span {
|
|
position: absolute;
|
|
height: 45px;
|
|
width: 45px;
|
|
background: blue;
|
|
border-radius: inherit;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateX(var(--d, 0px));
|
|
}
|
|
|
|
.planet1 {
|
|
--d: 96px;
|
|
--r: -90deg;
|
|
}
|
|
|
|
.planet2 {
|
|
--d: 146px;
|
|
--r: -137deg;
|
|
}
|
|
|
|
.planet3 {
|
|
--d: 196px;
|
|
--r: -45deg;
|
|
}
|
|
|
|
.planet4 {
|
|
--d: 246px;
|
|
--r: -110deg;
|
|
}
|
|
|
|
.radial-mask {
|
|
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
|
|
}
|
|
|
|
/* Text with a gradient background */
|
|
[class*='gradient-text-'] {
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
[class*='gradient-text-']::selection {
|
|
background-color: var(--colors-brand9);
|
|
background-clip: unset;
|
|
-webkit-text-fill-color: white;
|
|
}
|
|
|
|
@layer utilities {
|
|
.gradient-text-brand-100 {
|
|
background-image: linear-gradient(45deg, var(--colors-brand8) 0%, var(--colors-brand9) 100%);
|
|
}
|
|
.gradient-text-brand-500 {
|
|
background-image: linear-gradient(45deg, var(--colors-brand8) 0%, var(--colors-brand9) 100%);
|
|
}
|
|
|
|
.gradient-text-scale-100 {
|
|
background-image: -webkit-linear-gradient(45deg, #fff 0%, var(--colors-green12) 100%);
|
|
}
|
|
|
|
.gradient-text-scale-500 {
|
|
background-image: -webkit-linear-gradient(
|
|
45deg,
|
|
var(--colors-scale10) 0%,
|
|
var(--colors-scale12) 100%
|
|
);
|
|
}
|
|
|
|
.gradient-text-pink-500 {
|
|
@apply text-transparent bg-clip-text bg-gradient-to-br from-[#c867ee] to-[#f6a4f3];
|
|
}
|
|
|
|
.gradient-text-purple-500 {
|
|
@apply text-transparent bg-clip-text bg-gradient-to-br from-[#902DFB] to-[#D87BF5];
|
|
}
|
|
|
|
.gradient-text-purple-800 {
|
|
@apply text-transparent bg-clip-text bg-gradient-to-br from-[#5900EA] to-[#A242E5];
|
|
}
|
|
|
|
.gradient-text-gold-500 {
|
|
background-image: -webkit-linear-gradient(45deg, #e4b641 100%, #f5bf0069 41%);
|
|
}
|
|
|
|
.radial-gradient-text-scale-500 {
|
|
background: radial-gradient(45% 100% at 50% 50%, #fff 30%, hsla(0, 0%, 100%, 0.35) 100%);
|
|
}
|
|
.radial-gradient-text-scale-600 {
|
|
background: radial-gradient(45% 100% at 50% 50%, #fff 30%, hsla(0, 0%, 100%, 0.6) 100%);
|
|
}
|
|
}
|
|
|
|
/* LW7 Tickets Slider */
|
|
.ticket-brick-swiper .swiper-slide {
|
|
width: 230px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.ticket-brick-swiper .swiper-slide {
|
|
width: 450px;
|
|
}
|
|
}
|
|
|
|
.ticket-brick-swiper .swiper-wrapper,
|
|
.swiper-transition-linear .swiper-wrapper {
|
|
transition-timing-function: linear;
|
|
}
|
|
|
|
/* .lw8-particle-handle {
|
|
@apply text-xs bg-black flex items-center justify-center rounded-full py-1 px-2 [&>div]:!relative;
|
|
} */
|
|
|
|
/* dat.GUI */
|
|
|
|
.dg.ac {
|
|
z-index: 9999 !important;
|
|
margin-top: 65px !important;
|
|
}
|