mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55:06 +03:00
Francisco MazzoniandRamiro Nuñez Dosio
b981e25a71
* content storm first pass * fix orbit svg, add users constellations * theme fixes, link logic * fix avatar placement, sizes, use last names, new links * remove user description * Updated copy. * mobile glow, avatar placement * fix crescent issues * fix colors, links for avatars * fix inline svg for links Co-authored-by: Ramiro Nuñez Dosio <ramiro@supabase.io>
662 lines
15 KiB
CSS
662 lines
15 KiB
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;
|
|
}
|
|
|
|
.section-container {
|
|
position: relative;
|
|
/* z-index: 1; */
|
|
/* display: flex;
|
|
justify-content: center; */
|
|
}
|
|
|
|
/* Database page */
|
|
|
|
.dashboard-tabs div[role='separator'] {
|
|
@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--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;
|
|
/* background: radial-gradient(
|
|
circle at 50% -150%,
|
|
#39617d 0%,
|
|
#00ded1 30%,
|
|
#121212 80%,
|
|
#121212 100%
|
|
); */
|
|
}
|
|
@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%
|
|
);
|
|
}
|
|
|
|
.light .gradient-mask {
|
|
background: radial-gradient(
|
|
circle at 50% -35%,
|
|
rgba(57, 97, 125, 0.32) 0%,
|
|
rgba(57, 97, 125, 0.32) 5%,
|
|
rgb(113 191 187 / 75%) 8%,
|
|
#ffffff 65%,
|
|
#ffffff 100%
|
|
);
|
|
}
|
|
|
|
@media screen and (max-width: 769px) {
|
|
.gradient-mask {
|
|
width: 100%;
|
|
}
|
|
|
|
.light .gradient-mask {
|
|
background: radial-gradient(
|
|
circle at 50% -35%,
|
|
rgba(57, 97, 125, 0.32) 0%,
|
|
rgba(57, 97, 125, 0.32) 5%,
|
|
rgb(155 246 241 / 75%) 8%,
|
|
#90cebd 65%,
|
|
#67eae8 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%);
|
|
}
|
|
|
|
.light .gradient-mask--masked {
|
|
background: radial-gradient(circle at 50% -60%, rgba(255, 255, 255, 0) 0%, #fff 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%);
|
|
}
|
|
|
|
.light .gradient-mask--masked {
|
|
background: radial-gradient(circle at 50% -40%, rgba(255, 255, 255, 0) 0%, #fff 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);
|
|
}
|
|
|
|
.light .flair-mask-a {
|
|
background-color: #d7d7d7;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
.light .flair-mask-b {
|
|
background-color: #fff;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
/* @media only screen and (min-width: 1024px) {
|
|
.flair-mask-a {
|
|
width: 69.5%;
|
|
}
|
|
.flair-mask-b {
|
|
width: 70%;
|
|
}
|
|
} */
|
|
|
|
.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: conic-gradient(
|
|
from 0deg at 45% 47%,
|
|
#ffffffff 0%,
|
|
#000000ff 25%,
|
|
#000000ff 50%,
|
|
#000000ff 75%,
|
|
#ffffffff 100%
|
|
);
|
|
mask-image: conic-gradient(
|
|
from 0deg at 45% 47%,
|
|
#ffffffff 0%,
|
|
#000000ff 25%,
|
|
#000000ff 50%,
|
|
#000000ff 75%,
|
|
#ffffffff 100%
|
|
); */
|
|
|
|
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
|
|
}
|