932 lines
24 KiB
CSS
932 lines
24 KiB
CSS
@layer theme, base, components, utilities;
|
|
@import 'tailwindcss/theme.css' layer(theme) important;
|
|
@import 'tailwindcss/utilities.css' layer(utilities) important;
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Sora:wght@100..800&display=swap');
|
|
|
|
@custom-variant dark (&:is([data-theme="dark"] *));
|
|
|
|
@layer base {
|
|
/*
|
|
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
|
so we've added these compatibility styles to make sure everything still
|
|
looks the same as it did with Tailwind CSS v3.
|
|
|
|
If we ever want to remove these styles, we need to add an explicit border
|
|
color utility to any element that depends on these defaults.
|
|
*/
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(var(--border)) transparent;
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
:root {
|
|
/* Shadcn Style new-york - slate */
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
--primary: 222.2 47.4% 11.2%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 222.2 84% 4.9%;
|
|
--chart-1: 12 76% 61%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
html[data-theme='dark'] {
|
|
/* Shadcn Style new-york - slate */
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 212.7 26.8% 83.9%;
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
}
|
|
|
|
html {
|
|
font: var(--ifm-font-size-base) / var(--ifm-line-height-base)
|
|
var(--ifm-font-family-base);
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--ifm-font-size-base: 16px;
|
|
--ifm-code-font-size: 90%;
|
|
--ifm-background-color: var(--white);
|
|
--ifm-color-primary: var(--nebula-500);
|
|
--ifm-footer-background-color: var(--grey-100);
|
|
--ifm-menu-color-background-active: var(--ifm-color-emphasis-200);
|
|
--ifm-announcement-bar-background-color: #21243d;
|
|
--ifm-font-family-base: 'Inter', 'sans-serif';
|
|
--foreground: oklch(0.145 0 0);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.145 0 0);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.145 0 0);
|
|
--primary: oklch(0.205 0 0);
|
|
--primary-foreground: oklch(0.985 0 0);
|
|
--secondary: oklch(0.97 0 0);
|
|
--secondary-foreground: oklch(0.205 0 0);
|
|
--muted: oklch(0.97 0 0);
|
|
--muted-foreground: oklch(0.556 0 0);
|
|
--accent: oklch(0.97 0 0);
|
|
--accent-foreground: oklch(0.205 0 0);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--destructive-foreground: oklch(0.577 0.245 27.325);
|
|
--border: oklch(0.922 0 0);
|
|
--input: oklch(0.922 0 0);
|
|
--ring: oklch(0.708 0 0);
|
|
--chart-1: oklch(0.646 0.222 41.116);
|
|
--chart-2: oklch(0.6 0.118 184.704);
|
|
--chart-3: oklch(0.398 0.07 227.392);
|
|
--chart-4: oklch(0.828 0.189 84.429);
|
|
--chart-5: oklch(0.769 0.188 70.08);
|
|
--radius: 0.625rem;
|
|
--sidebar: oklch(0.985 0 0);
|
|
--sidebar-foreground: oklch(0.145 0 0);
|
|
--sidebar-primary: oklch(0.205 0 0);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.97 0 0);
|
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
--sidebar-border: oklch(0.922 0 0);
|
|
--sidebar-ring: oklch(0.708 0 0);
|
|
--transparent: transparent;
|
|
--white: #fff;
|
|
--grey-900: #23263b;
|
|
--grey-800: #36395a;
|
|
--grey-700: #484c7a;
|
|
--grey-600: #5a5e9a;
|
|
--grey-500: #777aaf;
|
|
--grey-400: #9698c3;
|
|
--grey-300: #b6b7d5;
|
|
--grey-200: #d6d6e7;
|
|
--grey-100: #f5f5fa;
|
|
--grey-050: #fcfcfd;
|
|
--grey-000: #fff;
|
|
--pink-900: #59063d;
|
|
--pink-800: #88085c;
|
|
--pink-700: #b80979;
|
|
--pink-600: #e90a96;
|
|
--pink-500: #f82caa;
|
|
--pink-400: #fb5abc;
|
|
--pink-300: #fd89ce;
|
|
--pink-200: #feb9e2;
|
|
--pink-100: #ffeaf6;
|
|
--nebula-900: #141d61;
|
|
--nebula-800: #1e2b8f;
|
|
--nebula-700: #2b3cbb;
|
|
--nebula-600: #3c4fe0;
|
|
--nebula-500: #5468ff;
|
|
--nebula-400: #7c8aff;
|
|
--nebula-300: #a3acff;
|
|
--nebula-200: #cacfff;
|
|
--nebula-100: #f2f3ff;
|
|
--cyan-900: #00526c;
|
|
--cyan-800: #00769b;
|
|
--cyan-700: #009bcb;
|
|
--cyan-600: #0db7eb;
|
|
--cyan-500: #2cc8f7;
|
|
--cyan-400: #5adaff;
|
|
--cyan-300: #89e5ff;
|
|
--cyan-200: #b9efff;
|
|
--cyan-100: #e8faff;
|
|
--green-900: #005e36;
|
|
--green-800: #028950;
|
|
--green-700: #06b66c;
|
|
--green-600: #0de589;
|
|
--green-500: #5feb9e;
|
|
--green-400: #88f0b3;
|
|
--green-300: #aaf4c8;
|
|
--green-200: #c9f8de;
|
|
--green-100: #e6fcf3;
|
|
--orange-900: #963209;
|
|
--orange-800: #bf470a;
|
|
--orange-700: #e8600a;
|
|
--orange-600: #f78125;
|
|
--orange-500: #faa04b;
|
|
--orange-400: #fcbc73;
|
|
--orange-300: #fed59a;
|
|
--orange-200: #ffe9c3;
|
|
--orange-100: #fff9ec;
|
|
--red-900: #83111e;
|
|
--red-800: #ab1325;
|
|
--red-700: #d4142a;
|
|
--red-600: #ee243c;
|
|
--red-500: #f4495d;
|
|
--red-400: #f86e7e;
|
|
--red-300: #fc95a1;
|
|
--red-200: #febdc5;
|
|
--red-100: #ffe6e9;
|
|
}
|
|
|
|
html[data-theme='dark'] {
|
|
--ifm-font-base-color: #dee0f2;
|
|
--ifm-navbar-link-hover-color: #8b9dff;
|
|
--ifm-link-color: #8b9dff;
|
|
--ifm-menu-color-active: #8b9dff;
|
|
--ifm-background-color: #0a141c;
|
|
--ifm-footer-background-color: #0a141c;
|
|
--ifm-navbar-background-color: #21243d;
|
|
--ifm-menu-color-background-active: #21243d;
|
|
--ifm-announcement-bar-background-color: var(--ifm-color-primary);
|
|
--foreground: oklch(0.985 0 0);
|
|
--card: oklch(0.145 0 0);
|
|
--card-foreground: oklch(0.985 0 0);
|
|
--popover: oklch(0.145 0 0);
|
|
--popover-foreground: oklch(0.985 0 0);
|
|
--primary: oklch(0.985 0 0);
|
|
--primary-foreground: oklch(0.205 0 0);
|
|
--secondary: oklch(0.269 0 0);
|
|
--secondary-foreground: oklch(0.985 0 0);
|
|
--muted: oklch(0.269 0 0);
|
|
--muted-foreground: oklch(0.708 0 0);
|
|
--accent: oklch(0.269 0 0);
|
|
--accent-foreground: oklch(0.985 0 0);
|
|
--destructive: oklch(0.396 0.141 25.723);
|
|
--destructive-foreground: oklch(0.637 0.237 25.331);
|
|
--border: oklch(0.269 0 0);
|
|
--input: oklch(0.269 0 0);
|
|
--ring: oklch(0.439 0 0);
|
|
--chart-1: oklch(0.488 0.243 264.376);
|
|
--chart-2: oklch(0.696 0.17 162.48);
|
|
--chart-3: oklch(0.769 0.188 70.08);
|
|
--chart-4: oklch(0.627 0.265 303.9);
|
|
--chart-5: oklch(0.645 0.246 16.439);
|
|
--sidebar: oklch(0.205 0 0);
|
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.269 0 0);
|
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
--sidebar-border: oklch(0.269 0 0);
|
|
--sidebar-ring: oklch(0.439 0 0);
|
|
}
|
|
|
|
@theme inline {
|
|
/* Configure your theme variables here */
|
|
--font-display: 'Inter', 'sans-serif';
|
|
--font-title: 'Sora', 'sans-serif';
|
|
--animate-spotlight: spotlight 2s ease 0.75s 1 forwards;
|
|
--color-primary-500: oklch(0.84 0.18 117.33);
|
|
--spacing: 0.25rem;
|
|
--color-background: var(--ifm-background-color);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
}
|
|
|
|
@keyframes spotlight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-72%, -62%) scale(0.5);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(-50%, -40%) scale(1);
|
|
}
|
|
}
|
|
|
|
html {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* override to fix some logo placement issues due to flex auto */
|
|
.navbar__logo {
|
|
flex: 0 0 100%;
|
|
height: 1.5rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
/* DocSearch x Algolia logo */
|
|
@media (max-width: 565px) {
|
|
.navbar__logo .docsearch-nav-logo {
|
|
width: 15em;
|
|
height: auto;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.theme-announcement-bar {
|
|
font-size: 0.95rem !important;
|
|
padding: 0.5rem 0.5rem !important;
|
|
}
|
|
}
|
|
|
|
/* DocSearch x Algolia logo in sidebar */
|
|
@media (min-width: 997px) {
|
|
.theme-doc-sidebar-container .docsearch-nav-logo {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.docusaurus-highlight-code-line {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
display: block;
|
|
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
|
padding: 0 var(--ifm-pre-padding);
|
|
}
|
|
|
|
html[data-theme='dark'] .docusaurus-highlight-code-line {
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.diagonal-box {
|
|
transform: skewY(-6deg);
|
|
}
|
|
|
|
.diagonal-content {
|
|
transform: skewY(6deg);
|
|
}
|
|
|
|
/* hide on mobile */
|
|
.theme-announcement-bar {
|
|
z-index: 100;
|
|
min-height: 3rem !important;
|
|
font-size: 1.1rem !important;
|
|
font-family: 'Sora', sans-serif !important;
|
|
font-weight: 400 !important;
|
|
line-height: 1.5;
|
|
padding: 0.5rem 1rem !important;
|
|
background-color: var(--ifm-announcement-bar-background-color) !important;
|
|
color: #fff !important;
|
|
white-space: normal !important; /* Allow text to wrap */
|
|
word-break: normal !important; /* Break long words if needed */
|
|
text-align: center;
|
|
}
|
|
|
|
.theme-announcement-bar a {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
text-decoration: none !important;
|
|
border-radius: 0.5rem;
|
|
margin-left: 0.5rem;
|
|
background-color: #fff !important;
|
|
color: #21243d !important;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 0.5rem;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.theme-announcement-bar a:hover {
|
|
background-color: var(--ifm-color-primary);
|
|
color: #fff;
|
|
}
|
|
|
|
.theme-announcement-bar svg {
|
|
color: #fff;
|
|
}
|
|
|
|
.showcase {
|
|
background-color: #fff;
|
|
}
|
|
|
|
html[data-theme='dark'] .showcase {
|
|
background-color: #21243d;
|
|
}
|
|
|
|
.showcase-border {
|
|
border-color: rgba(243, 244, 246, 1);
|
|
}
|
|
|
|
html[data-theme='dark'] .showcase-border {
|
|
border-color: rgba(55, 65, 81, 1);
|
|
}
|
|
|
|
.text-description {
|
|
color: rgba(107, 114, 128, 1);
|
|
}
|
|
|
|
html[data-theme='dark'] .text-description {
|
|
color: rgba(209, 213, 219, 1);
|
|
}
|
|
|
|
.navbar--fixed-top {
|
|
z-index: 20;
|
|
}
|
|
|
|
/* apply */
|
|
#hero-apply {
|
|
z-index: -1;
|
|
background-image: linear-gradient(
|
|
var(--ifm-footer-background-color),
|
|
var(--ifm-navbar-background-color)
|
|
);
|
|
}
|
|
|
|
html[data-theme='dark'] #hero-apply {
|
|
background-image: linear-gradient(
|
|
var(--ifm-navbar-background-color),
|
|
var(--ifm-background-color)
|
|
);
|
|
}
|
|
|
|
html[data-theme='dark'] #hero-apply > div:first-child {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.apply-form {
|
|
background-image: linear-gradient(#fff, #f5f5fa);
|
|
max-width: 600px;
|
|
}
|
|
|
|
html[data-theme='dark'] .apply-form {
|
|
background-image: radial-gradient(
|
|
circle at 50% 0,
|
|
rgb(72, 76, 122),
|
|
rgb(35, 38, 59)
|
|
);
|
|
}
|
|
|
|
.apply-text {
|
|
color: #36395a;
|
|
}
|
|
|
|
html[data-theme='dark'] .apply-text {
|
|
color: #fff;
|
|
}
|
|
|
|
/* index */
|
|
#hero {
|
|
background-image: linear-gradient(
|
|
var(--ifm-footer-background-color),
|
|
var(--ifm-navbar-background-color)
|
|
);
|
|
}
|
|
|
|
html[data-theme='dark'] #hero {
|
|
background-image: linear-gradient(
|
|
var(--ifm-navbar-background-color),
|
|
var(--ifm-background-color)
|
|
);
|
|
}
|
|
|
|
html[data-theme='dark'] #hero > div:first-child {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/**
|
|
* Hero component title overrides to match other heading styles
|
|
*/
|
|
.hero-title {
|
|
color: rgb(28, 30, 33);
|
|
font-family: var(--ifm-heading-font-family);
|
|
}
|
|
|
|
html[data-theme='dark'] .hero-title {
|
|
color: rgb(227, 227, 227);
|
|
}
|
|
|
|
.docsearch-logo {
|
|
color: #21243d;
|
|
}
|
|
|
|
html[data-theme='dark'] .docsearch-logo {
|
|
color: #fff;
|
|
}
|
|
|
|
.apply-button:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
/* GitHub */
|
|
.header-github-link:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.header-github-link::before {
|
|
content: '';
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
|
no-repeat;
|
|
}
|
|
|
|
html[data-theme='dark'] .header-github-link::before {
|
|
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
|
no-repeat;
|
|
}
|
|
|
|
[data-theme='light'] .shiki.github-light {
|
|
display: none;
|
|
}
|
|
|
|
[data-theme='dark'] .shiki.github-dark {
|
|
display: none;
|
|
}
|
|
|
|
/* Images */
|
|
.image-rendering-crisp {
|
|
image-rendering: crisp-edges;
|
|
|
|
/* alias for google chrome */
|
|
image-rendering: -webkit-optimize-contrast;
|
|
}
|
|
|
|
.image-rendering-pixel {
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
/* Tailwindcss */
|
|
|
|
.grain-gradient-bg {
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
/* light theme: vibrant brand gradient */
|
|
background: linear-gradient(
|
|
135deg,
|
|
#5468ff 0%,
|
|
/* lighten brand colour */ color-mix(in srgb, #5468ff 70%, white) 50%,
|
|
/* soft highlight */ color-mix(in srgb, #5468ff 30%, white) 100%
|
|
);
|
|
}
|
|
|
|
.grain-gradient-bg::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='contrast' values='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.8'/%3E%3C/svg%3E");
|
|
background-repeat: repeat;
|
|
background-size: 150px 150px;
|
|
pointer-events: none;
|
|
mix-blend-mode: multiply;
|
|
opacity: 0.75;
|
|
z-index: 1;
|
|
}
|
|
|
|
[data-theme='dark'] .grain-gradient-bg {
|
|
/* dark theme: deeper brand gradient */
|
|
background: linear-gradient(
|
|
135deg,
|
|
/* deep base */ color-mix(in srgb, #5468ff 80%, black) 0%,
|
|
/* mid tone */ color-mix(in srgb, #5468ff 60%, black) 50%,
|
|
/* highlight */ #5468ff 100%
|
|
);
|
|
}
|
|
|
|
[data-theme='dark'] .grain-gradient-bg::before {
|
|
mix-blend-mode: difference;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.grain-gradient-bg > * {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* -- Layout container ---------------------------------------------------- */
|
|
|
|
.keypad {
|
|
position: relative;
|
|
width: clamp(280px, 35vw, 400px); /* responsive */
|
|
aspect-ratio: 400 / 310; /* matches artwork */
|
|
display: flex;
|
|
place-items: center;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
/* -- Base plate ---------------------------------------------------------- */
|
|
|
|
.keypad__base {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.keypad__base img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* -- Shared key styles --------------------------------------------------- */
|
|
|
|
.key {
|
|
--travel: 20; /* how far key travels when “pressed” */
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 0;
|
|
cursor: default;
|
|
position: absolute;
|
|
transform-style: preserve-3d;
|
|
outline: none;
|
|
--hue: 0;
|
|
--saturate: 1;
|
|
--bright: 1;
|
|
}
|
|
|
|
.key__mask,
|
|
.key__content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.key__content {
|
|
transition: translate 0.12s ease-out;
|
|
}
|
|
|
|
.key__text {
|
|
font-family: 'Inter', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-weight: 300;
|
|
position: absolute;
|
|
top: 24%;
|
|
left: 32%;
|
|
translate: -14% -8%;
|
|
width: 100%;
|
|
height: 70%;
|
|
font-size: 2.2rem;
|
|
z-index: 5;
|
|
color: hsl(0 0% 94%);
|
|
text-align: left;
|
|
transform: rotateX(36deg) rotateY(45deg) rotateX(-90deg);
|
|
pointer-events: none;
|
|
mix-blend-mode: normal;
|
|
}
|
|
|
|
.key__text--search {
|
|
left: 24%;
|
|
top: 20%;
|
|
translate: -25% -8%;
|
|
}
|
|
|
|
.key img {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
translate: -50% 1%;
|
|
filter: hue-rotate(calc(var(--hue) * 1deg)) saturate(var(--saturate))
|
|
brightness(var(--bright));
|
|
}
|
|
|
|
/* -- Individual key footprints ------------------------------------------ */
|
|
|
|
/* Small single key */
|
|
.keypad__single {
|
|
width: 40.5%;
|
|
height: 46%;
|
|
bottom: 36%;
|
|
left: 54%;
|
|
clip-path: polygon(
|
|
0 0,
|
|
54% 0,
|
|
89% 24%,
|
|
100% 70%,
|
|
54% 100%,
|
|
46% 100%,
|
|
0 69%,
|
|
12% 23%,
|
|
47% 0%
|
|
);
|
|
mask: url(https://assets.codepen.io/605876/keypad-single.png?format=auto&quality=100)
|
|
50% 50% / 100% 100%;
|
|
}
|
|
|
|
/* Same single key, shifted up/left */
|
|
.keypad__single--left {
|
|
left: 29.3%;
|
|
bottom: 54.2%;
|
|
}
|
|
|
|
.keypad__single .key__text {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
/* Double-width (bottom) key */
|
|
.keypad__double {
|
|
width: 64%;
|
|
height: 65%;
|
|
left: 6%;
|
|
bottom: 17.85%;
|
|
clip-path: polygon(
|
|
34% 0,
|
|
93% 44%,
|
|
101% 78%,
|
|
71% 100%,
|
|
66% 100%,
|
|
0 52%,
|
|
0 44%,
|
|
7% 17%,
|
|
30% 0
|
|
);
|
|
mask: url(https://assets.codepen.io/605876/keypad-double.png?format=auto&quality=100)
|
|
50% 50% / 100% 100%;
|
|
}
|
|
|
|
/* -- Optional “press” effect -------------------------------------------- */
|
|
|
|
/* Add `data-pressed="true"` in JS if you want a visual down-state */
|
|
.key[data-pressed='true'] .key__content,
|
|
.key:active .key__content {
|
|
translate: 0 calc(var(--travel) * 1%);
|
|
}
|
|
|
|
html[data-theme='light'] .shimmer-effect {
|
|
background: linear-gradient(90deg, #3c4fe0 25%, #60a5fa 50%, #3c4fe0 75%);
|
|
background-size: 200% 100%;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: shimmer 2s infinite linear;
|
|
}
|
|
|
|
html[data-theme='dark'] .shimmer-effect {
|
|
background: linear-gradient(90deg, #3c4fe0 25%, #60a5fa 50%, #3c4fe0 75%);
|
|
background-size: 200% 100%;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: shimmer 2s infinite linear;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
@apply bg-neutral-100 dark:bg-zinc-800 py-16 rounded-2xl ring-1 ring-neutral-200 dark:ring-neutral-700 ring-offset-3 dark:ring-offset-neutral-900;
|
|
}
|
|
|
|
/* Make the DocSearch search bar button prominent - desktop only */
|
|
@media (min-width: 769px) {
|
|
.DocSearch-Button {
|
|
position: relative;
|
|
width: 400px !important;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
.DocSearch-Button:focus,
|
|
.DocSearch-Button:hover {
|
|
box-shadow:
|
|
rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
|
|
rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
|
|
rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
|
|
border-color: #2563eb !important;
|
|
}
|
|
|
|
@keyframes search-badge-glow {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 2px 8px #2563eb33;
|
|
}
|
|
50% {
|
|
box-shadow: 0 2px 16px #60a5fa88;
|
|
}
|
|
}
|
|
|
|
.navbar__item svg,
|
|
.menu__link svg,
|
|
.footer__link-item svg {
|
|
display: none;
|
|
}
|
|
|
|
.header-github-link::before {
|
|
content: '';
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
background-color: var(--ifm-navbar-link-color);
|
|
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
|
|
transition: background-color var(--ifm-transition-fast)
|
|
var(--ifm-transition-timing-default);
|
|
}
|
|
|
|
.header-github-link:hover::before {
|
|
background-color: var(--ifm-navbar-link-hover-color);
|
|
}
|
|
|
|
/* Keyboard search keys */
|
|
kbd {
|
|
&[class^='searchHint_'] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--docsearch-key-gradient);
|
|
border: 0;
|
|
border-radius: 3px;
|
|
box-shadow: var(--docsearch-key-shadow);
|
|
color: var(--docsearch-muted-color);
|
|
height: 20px;
|
|
margin-right: 0.4em;
|
|
padding: 0 7px 2px;
|
|
}
|
|
|
|
&.searchHint_btn {
|
|
display: inline-block;
|
|
align-items: unset;
|
|
justify-content: unset;
|
|
height: unset;
|
|
margin-left: 0.4rem;
|
|
padding: 4px 10px;
|
|
}
|
|
}
|
|
|
|
/* Search navbar (local search) */
|
|
.navbar__search-input {
|
|
padding: 0 2rem 0 2.25rem;
|
|
width: 13.5rem;
|
|
}
|
|
|
|
code[class^='codeBlockLines_'] {
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
div[class^='docItemContainer_'] article img {
|
|
display: block;
|
|
margin: auto;
|
|
border-radius: 7px;
|
|
-webkit-border-radius: 7px;
|
|
-moz-border-radius: 7px;
|
|
-ms-border-radius: 7px;
|
|
-o-border-radius: 7px;
|
|
}
|
|
|
|
[class^='title_'] {
|
|
font-size: 2.3rem !important;
|
|
}
|
|
|
|
#__blog-post-container img[class^='img_'] {
|
|
border-radius: 7px;
|
|
-webkit-border-radius: 7px;
|
|
-moz-border-radius: 7px;
|
|
-ms-border-radius: 7px;
|
|
-o-border-radius: 7px;
|
|
}
|
|
|
|
/* Sidebar Method labels */
|
|
.api-method > .menu__link {
|
|
align-items: center;
|
|
justify-content: start;
|
|
}
|
|
|
|
.api-method > .menu__link::before {
|
|
width: 50px;
|
|
height: 20px;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
border-radius: 0.25rem;
|
|
border: 1px solid;
|
|
margin-right: var(--ifm-spacing-horizontal);
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
border-color: transparent;
|
|
color: white;
|
|
}
|
|
|
|
.get > .menu__link::before {
|
|
content: 'get';
|
|
background-color: var(--ifm-color-primary);
|
|
}
|
|
|
|
.put > .menu__link::before {
|
|
content: 'put';
|
|
background-color: var(--openapi-code-blue);
|
|
}
|
|
|
|
.post > .menu__link::before {
|
|
content: 'post';
|
|
background-color: var(--openapi-code-green);
|
|
}
|
|
|
|
.delete > .menu__link::before {
|
|
content: 'del';
|
|
background-color: var(--openapi-code-red);
|
|
}
|
|
|
|
.patch > .menu__link::before {
|
|
content: 'patch';
|
|
background-color: var(--openapi-code-orange);
|
|
}
|
|
|
|
/* Tablet */
|
|
@media screen and (max-width: 991px) {
|
|
/* Search navbar local */
|
|
.navbar__search-input {
|
|
width: 14rem;
|
|
padding: 0 0.5rem 0 2.25rem;
|
|
}
|
|
}
|