custom.css•38.8 kB
/* stylelint-disable docusaurus/copyright-header */
/* @import "tailwindcss"; but without preflight */
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
@source "../**/*.{js,jsx,ts,tsx}";
@theme {
--color-neutral-white: #ffffff;
--color-neutral-n1: #f6f6f6;
--color-neutral-n2: #f1f1f1;
--color-neutral-n3: #e5e5e5;
--color-neutral-n4: #d7d7d7;
--color-neutral-n5: #c2c2c2;
--color-neutral-n6: #a9a9ac;
--color-neutral-n7: #8b8b8e;
--color-neutral-n8: #6d6d70;
--color-neutral-n9: #4f4f52;
--color-neutral-n10: #38383a;
--color-neutral-n11: #292929;
--color-neutral-n12: #141414;
--color-neutral-n13: #111111;
--color-neutral-black: #000000;
--color-plum-p1: #f4e9f1;
--color-plum-p2: #e3d0df;
--color-plum-p3: #d7b3cf;
--color-plum-p4: #8d2676;
--color-plum-p5: #711e5e;
--color-plum-p6: #47133b;
--color-yellow-y1: #fdefd2;
--color-yellow-y2: #f8d077;
--color-yellow-y3: #f3b01c;
--color-yellow-y4: #e7a71b;
--color-red-r1: #fcd6d5;
--color-red-r2: #f15d59;
--color-red-r3: #ee342f;
--color-red-r4: #d62f2a;
--color-green-g1: #e5f3dc;
--color-green-g2: #72c043;
--color-green-g3: #4fb014;
--color-green-g4: #479e12;
--color-transparent: transparent;
--font-sans: "Inter", "sans-serif";
}
/* Apply the dark mode when [data-theme="dark"] is present */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
@font-face {
font-family: "GT America";
font-weight: 400;
font-display: swap;
src: url(https://docs.convex.dev/fonts/GT-America-Standard-Regular.woff2);
}
@font-face {
font-family: "GT America";
font-weight: 500;
font-display: swap;
src: url(https://docs.convex.dev/fonts/GT-America-Standard-Medium.woff2);
}
@font-face {
font-family: "GT America";
font-weight: 700;
font-display: swap;
src: url(https://docs.convex.dev/fonts/GT-America-Standard-Bold.woff2);
}
@font-face {
font-family: "GT America";
font-weight: 900;
font-display: swap;
src: url(https://docs.convex.dev/fonts/GT-America-Standard-Black.woff2);
}
/* You can override the default Infima variables here. */
:root {
--convex-opaque-background-color: white;
--ifm-color-primary: #8d2676;
--ifm-color-primary-dark: #7f226a;
--ifm-color-primary-darker: #782064;
--ifm-color-primary-darkest: #631b53;
--ifm-color-primary-light: #9b2a82;
--ifm-color-primary-lighter: #a22c88;
--ifm-color-primary-lightest: #b73199;
--ifm-toc-border-color: #e5e5e5;
--docusaurus-highlighted-code-line-bg: #dde8fa;
--convex-docs-logo-font-color: black;
--convex-link-underline-color: #bbb;
--convex-code-border-color: rgba(0, 0, 0, 0.04);
--convex-code-block-header-background-color: #eef2f9;
--doc-sidebar-width: 270px !important; /* Reduced from default 300px */
--ifm-code-padding-horizontal: 0.25rem;
--ifm-global-shadow-lw: none;
--ifm-navbar-shadow: none;
--ifm-navbar-height: 4rem;
--ifm-menu-color-active: var(--ifm-navbar-link-color);
--ifm-menu-color-background-active: rgb(222, 226, 234);
--convex-active-background: rgb(222, 226, 234);
/* Copy of the sidebar chevron/arrow svg to make it smaller and darker */
--ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="-12 -12 48 48"><path fill="rgb(28, 30, 33)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
--convex-sidebar-icon-filter: none;
--convex-toc-background-color: rgba(255, 255, 255, 1);
--ifm-menu-link-padding-vertical: 0.4375rem;
--ifm-menu-link-padding-horizontal: 0.625rem;
--ifm-menu-link-sublist-icon-filter: none;
--ifm-scrollbar-track-background-color: auto;
--ifm-scrollbar-thumb-background-color: auto;
--convex-breadcrumb-font-color: #797979;
--ifm-breadcrumb-padding-horizontal: 0;
--ifm-breadcrumb-padding-vertical: 0;
--ifm-breadcrumb-item-background-active: none;
--ifm-breadcrumb-color-active: var(--convex-breadcrumb-font-color);
--convex-container-padding-horizontal: 0rem;
--ifm-card-border-radius: 6px;
--ifm-code-font-size: 95%;
--ifm-font-weight-semibold: 400;
--ifm-font-family-base: "Inter", system-ui, -apple-system, Segoe UI, Roboto,
Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
/* Footer */
--ifm-footer-background-color: var(--ifm-background-color);
--ifm-footer-color: #6e6e6e;
/* Convex colors */
--color-white: #ffffff;
--color-n1: #f6f6f6;
--color-n2: #f1f1f1;
--color-n3: #e5e5e5;
--color-n4: #d7d7d7;
--color-n5: #c2c2c2;
--color-n6: #adadad;
--color-n7: #939393;
--color-n8: #797979;
--color-n9: #6e6e6e;
--color-n10: #3f3f3f;
--color-n11: #292929;
--color-n12: #141414;
--color-n13: #111111;
--color-black: #000000;
--color-error: #ee342f;
/* Zen of Convex */
--convex-zen-do-color: var(--ifm-color-success-dark);
--convex-zen-do-not-color: var(--ifm-color-warning-dark);
--ifm-font-size-base: 0.9375rem;
--ifm-line-height-base: 1.6;
--ifm-h1-font-size: 2rem;
--ifm-h2-font-size: 1.5rem;
--ifm-h3-font-size: 1.25rem;
--ifm-h4-font-size: 1rem;
--ifm-heading-margin-bottom: 1rem;
--ifm-spacing-vertical: 1rem;
--ifm-paragraph-margin-bottom: 1rem;
}
/* Sets the main top-left logo size */
.navbar__logo {
height: 2.5rem;
margin-right: 0;
}
/* Bring "docs" closer to convex logo */
.navbar__brand {
margin-right: 0;
}
/* Fix the size of the logo when the content on the right is scrolled
and the navbar is hidden, no good classname */
div.convex-sidebar-header img {
height: 2.5rem;
margin-right: 0;
}
/* START: Replicate the "docs" in navbar at the top of the swizzled sidebar
for when the whole page is scrolled down */
.convex-sidebar-header {
display: flex;
font-size: 1.75rem;
align-items: center;
}
.convex-sidebar-header a {
color: var(--convex-docs-logo-font-color);
}
.convex-sidebar-header a:hover {
text-decoration: none;
color: var(--ifm-navbar-link-hover-color);
}
.convex-sidebar-header > a {
margin-right: 0;
}
/* END: Replicate the "docs" in navbar at the top of the swizzled sidebar
for when the whole page is scrolled down */
/* Stylize "docs" in the navbar */
.navbar__items:not(.navbar__items--right) .navbar__item:nth-child(3) {
display: flex;
font-size: 1.75rem;
padding-left: 0;
padding-right: 3rem;
color: var(--convex-docs-logo-font-color);
padding-top: 0;
padding-bottom: 0;
}
.convex-docs-title {
display: none;
}
@media (min-width: 997px) {
.convex-docs-title {
display: block;
width: auto;
height: 2.5rem;
}
}
/* "docs" in the navbar hover */
.navbar__items:not(.navbar__items--right) .navbar__item:nth-child(3):hover {
color: var(--ifm-navbar-link-hover-color);
}
/* Adds border to top navbar (original has drop shadow) */
.navbar {
border-bottom: 1px solid var(--ifm-toc-border-color);
}
/* Customize the search button in nav and modal */
@import url("./search.css");
/* START: Icon links in top nav */
@media (min-width: 997px) {
.navbar__items .convex-icon-link {
width: 1.25rem;
height: 1.5rem;
margin: var(--ifm-navbar-item-padding-vertical)
var(--ifm-navbar-item-padding-horizontal);
display: inline-block;
background-color: var(--ifm-navbar-link-color);
font-size: 0;
}
.convex-icon-link svg {
display: none;
}
.navbar__items .convex-dashboard-button {
border-radius: 6px;
padding: 0.35rem 0.5rem 0.25rem 0.5rem;
background-color: var(--ifm-navbar-link-color);
color: var(--ifm-toc-border-color);
}
.navbar__items .convex-dashboard-button:hover {
background-color: var(--ifm-navbar-link-hover-color);
}
.convex-dashboard-button svg {
display: none;
}
.convex-blog-button {
@apply ml-2;
}
.navbar__items .convex-github-logo {
mask: url("../../static/img/github-logo.svg") no-repeat center;
}
.navbar__items .convex-discord-logo {
mask: url("../../static/img/discord-logo.svg") no-repeat center;
}
.navbar__items .convex-icon-link:hover {
background-color: var(--ifm-navbar-link-hover-color);
}
}
/* END: Icon links in top nav */
/* Fix the padding around the light mode / dark mode switcher
which doesn't have a good class name */
.navbar__items--right > :not(.navbar__item),
.navbar-sidebar__brand :nth-child(2) {
margin: 0 6px;
--ifm-color-emphasis-200: none;
}
/* Light/dark mode switcher hover color to match other icons */
.navbar__items--right > :not(.navbar__item):hover,
.navbar-sidebar__brand :nth-child(2):hover {
color: var(--ifm-navbar-link-hover-color);
}
/* Increases sidebar padding, also to have enough space for scrollbar */
.navbar-sidebar__item {
padding: 0.5rem 1.375rem 0.5rem 1.375rem !important;
}
/* Matches the sidebar badding for the hamburger menu */
nav.menu {
padding: 1rem 1.375rem 1rem 1.375rem !important;
}
/* START: Make the sidebar arrows smaller */
.menu__caret:before {
width: 0.75rem;
}
.menu__link--sublist-caret:after {
min-width: 0.75rem;
width: 0.75rem;
}
/* END: Make the sidebar arrows smaller */
/* Decreases sidebar font-size except for top level */
.theme-doc-sidebar-item-link-level-2,
.theme-doc-sidebar-item-link-level-3,
.theme-doc-sidebar-item-link-level-4,
.theme-doc-sidebar-item-category-level-2,
.theme-doc-sidebar-item-category-level-3,
.theme-doc-sidebar-item-category-level-4 {
font-size: 0.875rem;
}
/* reset padding on container because we added footer inside of it */
main > .container {
padding: 0 !important;
max-width: unset !important;
}
/* Increase the padding on the main text */
main > .container > .row {
padding: 0.75rem var(--convex-container-padding-horizontal) 1.5rem;
margin: 0;
}
/* Increase the padding on the main text - actually increase it on big screens */
@media (min-width: 997px) {
:root {
--convex-container-padding-horizontal: 1rem;
}
}
/* Gray out breadcrumbs */
.breadcrumbs__link {
color: var(--convex-breadcrumb-font-color);
}
/* Gray links in content */
article .markdown a {
--ifm-link-color: auto;
--ifm-link-decoration: underline;
--ifm-link-hover-color: #888;
transition:
color var(--ifm-transition-fast) var(--ifm-transition-timing-default),
text-decoration-color var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
text-underline-position: under;
text-decoration-thickness: 1px;
}
/* Fix underlines to match text color on hover, visually */
article .markdown a:hover {
text-decoration-color: var(--convex-link-underline-color);
}
/* Article is the main container for most content. Use it for container queries */
article {
container-type: inline-size;
}
/* Pushes the links underline lower, looks better */
a {
text-underline-position: under;
}
/* No underline for pagination and other card links */
a.pagination-nav__link,
article .markdown a.card {
--ifm-link-decoration: none;
--ifm-link-hover-decoration: none;
}
/* Nicer style for inline code blocks */
article code {
border-color: var(--convex-code-border-color);
border-width: 1px;
}
/* Nicer header style for code blocks */
.theme-code-block > div:first-child:not(:only-child) {
border-bottom: none;
padding: 0.5rem var(--ifm-pre-padding);
background-color: var(--convex-code-block-header-background-color);
}
/* START: Custom cards implementation */
.cards {
display: grid;
gap: 1rem;
margin: 1.5rem 0 2.5rem;
}
.qs-cards {
display: grid;
gap: 1rem;
margin: 1.5rem 0 2.5rem;
}
.component-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.component-card {
display: block;
padding: 1.5rem;
border-radius: var(--ifm-card-border-radius);
text-decoration: none;
border: 1px solid var(--ifm-toc-border-color);
background: var(--ifm-background-color);
min-height: 130px;
box-shadow: none;
}
.component-card:hover {
box-shadow: none;
background-color: var(--ifm-menu-color-background-active);
color: var(--ifm-font-color-base);
text-decoration: none;
}
.component-card-content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.component-card-header {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--ifm-color-emphasis-600);
}
.component-card-icon {
color: var(--ifm-navbar-link-color);
flex-shrink: 0;
}
.component-card-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
.component-card-title {
margin: 0;
font-size: 1.125rem;
color: var(--ifm-heading-color);
}
.component-card-description {
margin: 0;
color: var(--ifm-color-emphasis-700);
line-height: 1.5;
font-size: 1rem;
}
/* This magic number 462 is the size of the article div container as rendered */
@container (width > 462px) {
.qs-cards {
grid-template-columns: 1fr 1fr;
}
}
/* This magic number 743 is the size of the article div container as rendered */
@container (width > 743px) {
.cards {
grid-template-columns: 1fr 1fr 1fr;
}
.component-cards {
grid-template-columns: 1fr 1fr 1fr;
}
.qs-cards {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
a.card {
box-shadow: none;
padding: 1.25rem 1rem;
border: 1px solid var(--ifm-toc-border-color);
flex-direction: row;
gap: 0.75rem;
align-items: center;
max-width: 550px;
text-decoration: none;
background-color: var(--ifm-background-color);
}
.qs-cards a.card {
padding: 1rem 1rem;
}
a.card > div {
overflow: hidden;
}
a.card svg {
min-width: 40px;
}
a.card:hover {
box-shadow: none;
background-color: var(--ifm-menu-color-background-active);
color: var(--ifm-font-color-base);
text-decoration: none;
}
a.card h2 {
font-size: 0.9375rem;
}
a.card p {
font-size: 0.75rem;
}
a.card h2,
a.card p {
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 400;
}
a.card.convex-hero-card {
margin: 2rem 0 2rem;
position: relative;
padding: 1.5rem;
gap: 1.5rem;
}
a.card.convex-hero-card p {
display: none;
}
@media (min-width: 997px) {
a.card.convex-hero-card h2 {
font-size: 1.25rem;
}
a.card.convex-hero-card {
max-width: 100%;
}
a.card.convex-hero-card::after {
content: "→";
position: absolute;
right: 1.5rem;
font-size: 2rem;
}
}
/* END: Custom cards implementation */
/* No "card" stylization for pagination links */
a.pagination-nav__link {
border-width: 0;
padding-left: 0;
padding-right: 0;
}
/* Pagination "previous"/"next" style */
a.pagination-nav__link .pagination-nav__sublabel {
color: var(--ifm-font-color-base);
font-size: 1rem;
}
/* Pagination doc name style */
a.pagination-nav__link .pagination-nav__label {
color: var(--ifm-color-primary);
font-size: 1.5rem;
font-weight: 400;
}
/* Pagination doc name hover style */
a.pagination-nav__link .pagination-nav__label:hover {
color: var(--ifm-color-primary-darkest);
}
/* START: Swap where arrows are shown in pagination */
.pagination-nav__link--prev .pagination-nav__label::before {
content: none;
}
.pagination-nav__link--prev .pagination-nav__sublabel::before {
content: "← ";
}
.pagination-nav__link--next .pagination-nav__label::after {
content: none;
}
.pagination-nav__link--next .pagination-nav__sublabel::after {
content: " →";
}
/* END: Swap where arrows are shown in pagination */
/* Stylize the top doc headings to match convex.dev */
.markdown h1:first-child {
--ifm-h1-font-size: 2rem;
margin-top: 1.25rem;
--ifm-heading-font-family: "GT America", system-ui, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 700;
letter-spacing: -0.01em;
}
@media (min-width: 997px) {
.markdown h1:first-child {
--ifm-h1-font-size: 2.5rem;
}
}
/* Make other headings less bold */
h1,
h2,
h3,
h4 {
--ifm-heading-font-family: "GT America", system-ui, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 700;
letter-spacing: -0.01em;
}
h2.text--truncate {
font-family:
"Inter",
system-ui,
-apple-system,
Segoe UI,
Roboto,
Ubuntu,
Cantarell,
Noto Sans,
sans-serif,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
letter-spacing: 0;
}
ul.menu__list {
transition: 150ms ease-in-out !important;
}
/* Top level sidebar items have bolder color */
.theme-doc-sidebar-item-link-level-1 > a.menu__link:not(.menu__link--active),
.theme-doc-sidebar-item-category-level-1
> .menu__list-item-collapsible
> a.menu__link:not(.menu__link--active) {
color: var(--ifm-navbar-link-color);
}
/* Active sidebar links have bold text color */
.menu__list-item > .menu__link--active:not(.menu__link--sublist),
.menu__list-item-collapsible--active > .menu__link--active {
font-weight: 600;
}
/* Active sidebar links have distinct background */
.menu__list-item-collapsible--active {
background: var(--ifm-menu-color-background-active);
}
/* Sidebar: Don't change the distinct background on hover for active category links */
.menu__list-item-collapsible--active:hover {
background: var(--ifm-menu-color-background-active);
}
/* Navbar: Hide the default Docusaurus search box */
.navbar__items--right [class*="searchBox_"] {
display: none;
}
/* Fix the active state of categories that forward to an internal page in the category. */
.convex-sidebar-no-category-page > .menu__list-item-collapsible--active {
background: var(--ifm-background-color);
}
.convex-sidebar-no-category-page > .menu__list-item-collapsible--active:hover {
background: var(--ifm-menu-color-background-hover);
}
.convex-sidebar-no-category-page
> .menu__list-item-collapsible--active
> .menu__link--active {
font-weight: 400;
}
/* Sidebar dividers */
.convex-menu-divider {
margin: 1rem 0.625rem;
background-color: var(--ifm-toc-border-color);
}
/* Sidebar headers */
.convex-menu-header {
text-transform: uppercase;
font-weight: 600;
font-size: 0.75rem;
color: var(--color-n8);
padding: 0.5rem 0.75rem;
}
html[data-theme="dark"] .convex-menu-header {
color: var(--color-n6);
}
/* Sidebar: Increase level 2 padding because top level has icons */
.theme-doc-sidebar-item-category-level-1 > ul.menu__list {
padding-left: 1.25rem;
}
.theme-doc-sidebar-menu {
padding-bottom: 2rem;
}
/* Sidebar: Icons styling */
.theme-doc-sidebar-item-link-level-1 > a::before,
.theme-doc-sidebar-item-category-level-1 > div > a::before {
padding-left: 0.125rem;
padding-right: 0.5rem;
padding-top: 0;
width: 1rem;
height: 1.0625rem;
content: var(--convex-icon);
filter: var(--convex-sidebar-icon-filter);
}
.theme-doc-sidebar-item-link-level-2 > a::before,
.theme-doc-sidebar-item-category-level-2 > div > a::before {
padding-left: 0.125rem;
padding-right: 0.5rem;
padding-top: 0;
width: 1rem;
height: 1.0625rem;
content: var(--inner-convex-icon);
filter: var(--convex-sidebar-icon-filter);
}
/* Ensures all menu items are the same height, with or without a submenu. */
.menu__link {
min-height: 1.875rem;
}
/* Sidebar: Hide the button to go to the primary menu on mobile (we use only the secondary menu) */
.navbar-sidebar__back {
display: none;
}
/* Sidebar: Fix the header layout on mobile */
.navbar-sidebar .navbar__brand {
flex: 1;
}
/* Sidebar: Mobile-only items (that are shown in the navbar on larger screens) */
@media (min-width: 997px) {
.convex-sidebar-mobile-only {
display: none;
}
}
/* Sidebar: Move the “external link” icon to the right */
.convex-sidebar-external-link svg {
margin-left: auto;
}
/* START: Icons for each top level item */
.convex-sidebar-home {
--convex-icon: url("../../static/img/sidebar-icons/home.svg");
}
.convex-sidebar-stack {
--convex-icon: url("../../static/img/sidebar-icons/stack.svg");
}
.convex-sidebar-discord {
--convex-icon: url("../../static/img/sidebar-icons/discord.svg");
}
.convex-sidebar-github {
--convex-icon: url("../../static/img/sidebar-icons/github.svg");
}
.convex-sidebar-tutorial {
--convex-icon: url(heroicons/24/outline/academic-cap.svg);
}
.convex-sidebar-quickstart {
--convex-icon: url("../../static/img/sidebar-icons/lightning-bolt.svg");
}
.convex-sidebar-understand {
--convex-icon: url("../../static/img/sidebar-icons/med.svg");
}
.convex-sidebar-functions {
--convex-icon: url("../../static/img/sidebar-icons/code.svg");
}
.convex-sidebar-database {
--convex-icon: url(heroicons/24/outline/circle-stack.svg);
}
.convex-sidebar-file-storage {
--convex-icon: url("../../static/img/sidebar-icons/image.svg");
}
.convex-sidebar-auth {
--convex-icon: url("../../static/img/sidebar-icons/person.svg");
}
.convex-sidebar-scheduling {
--convex-icon: url("../../static/img/sidebar-icons/clock.svg");
}
.convex-sidebar-search {
--convex-icon: url("../../static/img/sidebar-icons/magnifying-glass.svg");
}
.convex-sidebar-self-hosting {
--convex-icon: url("../../static/img/sidebar-icons/server.svg");
}
.convex-sidebar-realtime {
--convex-icon: url("../../static/img/sidebar-icons/lightning-bolt.svg");
}
.convex-sidebar-components {
--convex-icon: url("../../static/img/sidebar-icons/components.svg");
}
.convex-sidebar-ai {
--convex-icon: url("../../static/img/sidebar-icons/magic-wand.svg");
}
.convex-sidebar-ai-agents {
--convex-icon: url("../../static/img/sidebar-icons/bot.svg");
}
.convex-sidebar-platform-apis {
--convex-icon: url("../../static/img/sidebar-icons/grid.svg");
}
.convex-sidebar-chef {
--convex-icon: url("../../static/img/sidebar-icons/chef.svg");
}
.convex-sidebar-production {
--convex-icon: url("../../static/img/sidebar-icons/paper-plane.svg");
}
.convex-sidebar-testing {
--convex-icon: url("../../static/img/sidebar-icons/list-bullet.svg");
}
.convex-sidebar-react {
--convex-icon: url("../../static/img/sidebar-icons/react.svg");
}
.convex-sidebar-react-native {
--convex-icon: url("../../static/img/sidebar-icons/react-native.svg");
}
.convex-sidebar-javascript {
--convex-icon: url("../../static/img/sidebar-icons/javascript.svg");
}
.convex-sidebar-vue {
--convex-icon: url("../../static/img/sidebar-icons/vue.svg");
}
.convex-sidebar-vue {
--inner-convex-icon: url("../../static/img/sidebar-icons/nuxt.svg");
}
.convex-sidebar-open-api {
--convex-icon: url("../../static/img/sidebar-icons/open-api.svg");
}
.convex-sidebar-vue a:after,
.convex-sidebar-nuxt a:after {
font-weight: 400;
font-size: 0.6em;
margin-left: 1em;
content: "Community";
border-radius: 10px;
border: solid 1px gray;
padding: 2px 8px;
float: right;
/* overriding collaps-y caret */
transform: rotateZ(0deg) !important;
}
/* Vue */
.convex-sidebar-vue
.menu__list-item
> .menu__link--active:not(.menu__link--sublist):after,
.convex-sidebar-vue
.menu__list-item-collapsible--active
> .menu__link--active:after {
/* shift left to compensate for text to the left being bold */
margin-left: 0.9em;
}
/* Nuxt */
.convex-sidebar-vue
.theme-doc-sidebar-item-link-level-2
> .menu__link--active:after {
/* shift left to compensate for text to the left being bold */
margin-left: 0.9em;
}
.convex-sidebar-cli .menu__list li:first-child .menu__link:after,
.convex-sidebar-cli .menu__list li:nth-child(2) .menu__link:after {
font-weight: 400;
font-size: 0.6em;
margin-left: 1em;
content: "Beta";
border-radius: 10px;
border: solid 1px gray;
padding: 2px 8px;
float: right;
}
.convex-sidebar-cli .menu__list li:first-child .menu__link--active:after {
/* shift left to compensate for text to the left being bold */
margin-left: 0.7em;
}
.convex-sidebar-cli .menu__list li:nth-child(2) .menu__link--active:after {
/* shift left to compensate for text to the left being bold */
margin-left: 0.8em;
}
.convex-sidebar-eslint .menu__link:after {
font-weight: 400;
font-size: 0.6em;
margin-left: 1em;
content: "Beta";
border-radius: 10px;
border: solid 1px gray;
padding: 2px 8px;
float: right;
}
.convex-sidebar-eslint .menu__link--active:after {
/* shift left to compensate for text to the left being bold */
margin-left: 0.88em;
}
.convex-sidebar-svelte {
--convex-icon: url("../../static/img/sidebar-icons/svelte.svg");
}
.convex-sidebar-nextjs {
--convex-icon: url("../../static/img/sidebar-icons/nextjs.svg");
}
.convex-sidebar-tanstack {
--convex-icon: url("../../static/img/sidebar-icons/tanstack.svg");
}
.convex-sidebar-python {
--convex-icon: url("../../static/img/sidebar-icons/python.svg");
}
.convex-sidebar-rust {
--convex-icon: url("../../static/img/sidebar-icons/rust.svg");
}
.convex-sidebar-android {
--convex-icon: url("../../static/img/sidebar-icons/android.svg");
}
.convex-sidebar-swift {
--convex-icon: url("../../static/img/sidebar-icons/swift.svg");
}
.convex-sidebar-dashboard {
--convex-icon: url("../../static/img/sidebar-icons/dashboard.svg");
}
.convex-sidebar-cli {
--convex-icon: url("../../static/img/sidebar-icons/keyboard.svg");
}
.convex-sidebar-convex-api {
--convex-icon: url(heroicons/24/outline/book-open.svg);
}
.convex-sidebar-generated-code {
--convex-icon: url(heroicons/24/outline/book-open.svg);
}
.convex-sidebar-http-api {
--convex-icon: url(heroicons/24/outline/book-open.svg);
}
.convex-sidebar-eslint {
--convex-icon: url("../../static/img/sidebar-icons/eslint.svg");
}
/* END: Icons for each top level item */
/* Make sure footer is always pushed below fold */
body #__docusaurus .theme-doc-sidebar-container {
min-height: 100vh;
}
/* Footer gets same border as top nav */
footer {
border-top: 1px solid var(--ifm-toc-border-color);
}
/* Drop the arrow icons in footer */
.footer__links svg {
display: none;
}
/* Don't show the dots between footer links */
.footer__link-separator {
display: none;
}
/* Increase footer padding on small screens */
@media (max-width: 996px) {
.footer {
--ifm-footer-padding-horizontal: 1rem;
}
}
/* Make the copyright text smaller */
.footer__copyright {
font-size: 0.75rem;
}
/* Lay out copyright on left and links on right */
footer > .container {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
margin: 0;
max-width: unset;
}
/* Don't add more margin to the footer */
.footer__links {
margin-bottom: 0;
}
/* START: Footer icons */
.footer__links .footer__links {
display: flex;
gap: 1.5rem;
}
.footer__links .convex-icon-link {
width: 1.25rem;
height: 1.5rem;
margin: 0;
display: block;
background-color: var(--ifm-navbar-link-color);
font-size: 0;
}
.footer__links .convex-icon-link:hover {
background-color: var(--ifm-navbar-link-hover-color);
}
.footer__links .convex-github-logo {
mask: url("../../static/img/github-logo.svg") no-repeat center;
}
.footer__links .convex-twitter-logo {
mask: url("../../static/img/twitter-logo.svg") no-repeat center;
}
.footer__links .convex-discord-logo {
mask: url("../../static/img/discord-logo.svg") no-repeat center;
}
/* END: Footer icons */
/* Fix the "Back" button in the sidebar on mobile */
.navbar-sidebar__back {
background: var(--ifm-hover-overlay);
}
/* Mobile Table of Contents dont have targetable classnames, reset their background */
main article > div {
--ifm-menu-color-background-active: var(--ifm-hover-overlay);
}
/* Make sure ToC doesn't just blend with content that overlaps left side of the
content column, like YouTube video players */
.theme-doc-toc-desktop {
background-color: var(--convex-toc-background-color);
}
/* START: StepByStep styling */
.convex-step-by-step {
margin-bottom: 2rem;
}
.convex-step {
margin-bottom: 2rem;
}
@media (min-width: 997px) {
.convex-step-by-step,
.convex-full-width {
width: calc(
min(var(--ifm-container-width-xl), 100vw - var(--doc-sidebar-width)) - 4 *
var(--convex-container-padding-horizontal)
);
z-index: 100;
position: relative;
background: var(--convex-opaque-background-color);
box-shadow: var(--convex-opaque-background-color) 0 0 10px 10px;
/* Fixes a Safari bug where the table of contents would sometimes appear on
top of this element while scrolling. This transform has no visual effect,
but creates a new stacking context to keep things in order.
See: https://linear.app/convex/issue/CX-3830/
*/
-webkit-transform: translate3d(0, 0, 0);
}
.convex-step {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 20px;
margin-bottom: 0;
}
}
.convex-step code {
overflow-x: auto;
}
/* END: StepByStep styling */
/* Ensure that content within the main column can overlap the table of contents. */
main .container .col[class*="docItemCol"] {
z-index: 50;
}
.convex-inline-code-with-copy-button {
display: inline-flex;
line-height: 0.95rem;
padding-top: 0.2rem;
}
.convex-inline-code-copy-button {
line-height: 0;
}
.convex-inline-code-copy-button button {
display: flex;
align-items: center;
background: var(--prism-background-color);
color: var(--prism-color);
padding-left: 0.5rem;
line-height: 0;
transition: opacity 200ms ease-in-out;
opacity: 0.4;
}
.convex-inline-code-copy-button button:hover {
opacity: 1;
}
/* START: TourGuide styling */
.convex-tour-guide {
display: flex;
flex-direction: column;
justify-content: left;
gap: 0.75rem;
padding: 1.25rem;
background-color: var(--ifm-color-info-contrast-background);
border: var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);
border-left-width: var(--ifm-alert-border-left-width);
border-radius: var(--ifm-alert-border-radius);
box-shadow: var(--ifm-alert-shadow);
margin-bottom: 1.5rem;
}
@media (min-width: 997px) {
.convex-tour-guide {
flex-direction: row;
}
.convex-tour-guide > div {
max-width: 50%;
}
}
.markdown .convex-tour-guide li > p {
margin-top: 0;
}
.convex-tour-guide > div > p {
margin-bottom: 0;
}
.convex-tour-guide h5 {
text-transform: uppercase;
}
.convex-tour-guide img {
border: 1px solid var(--ifm-color-info-dark);
border-radius: 8px;
}
.convex-side-by-side {
display: flex;
flex-direction: column;
}
.convex-side-by-side video {
width: 100%;
}
.convex-side-by-side caption {
display: block;
font-style: italic;
}
@media (min-width: 500px) {
.convex-side-by-side video {
max-width: 500px;
}
}
@media (min-width: 997px) {
.convex-side-by-side {
display: grid;
grid-template-columns: 60% auto;
gap: 2rem;
}
.theme-admonition .convex-side-by-side {
gap: 1rem;
}
.convex-side-by-side.convex-balanced {
grid-template-columns: 1fr 1fr;
}
}
/* END: TourGuide styling */
/* START: Zen of Convex styling */
.zen-tip {
margin-bottom: 2.5em;
}
h2.zen-header {
margin-top: 2em;
}
.zen-tip h3,
.zen-header {
display: flex;
gap: 0.3em;
align-items: center;
}
.zen-tip svg,
.zen-header svg {
width: 2rem;
height: 2rem;
}
.zen-do h3 > svg {
color: var(--convex-zen-do-color);
}
.zen-do-not h3 > svg {
color: var(--convex-zen-do-not-color);
}
/* END: Zen styling */
/* Main page hero text */
.convex-hero {
font-size: 1.25rem;
}
/* Helper for centering images */
.center-image {
margin: 0 auto;
}
/* Fix pages should not be too wide, except for all the quick starts and management API docs */
html:not([class*="docs-doc-id-quickstart/"]):not(
[class*="docs-doc-id-management-api/"]
)
main
> .container
> .row
.col {
max-width: 800px !important;
margin: 0 auto;
}
@media (min-width: 997px) {
html:not([class*="docs-doc-id-quickstart/"]):not(
[class*="docs-doc-id-management-api/"]
)
main
> .container
> .row
.col {
margin: unset;
}
}
/* Border for screenshots that are confusing if left on white background */
.screenshot-border {
border-radius: var(--ifm-code-border-radius);
box-shadow: var(--ifm-global-shadow-lw);
}
/* Make space for language selector in code blocks */
.codeblock-header {
display: flex;
justify-content: space-between;
}
@import url("./language-selector.css");
/* FROM HERE ON: Dark mode styles */
html[data-theme="dark"] {
--convex-opaque-background-color: var(--ifm-background-color);
--ifm-color-content: white;
--ifm-background-color: rgb(20, 20, 20);
--ifm-toc-border-color: #3f3f3f;
--ifm-color-primary: #f3b01c;
--ifm-color-primary-darkest: #ae7e15;
--ifm-menu-color: #c2c2c2;
--convex-docs-logo-font-color: white;
--convex-code-border-color: rgba(255, 255, 255, 0.1);
--convex-code-block-header-background-color: rgba(138, 208, 255, 0.1);
--ifm-navbar-background-color: var(--ifm-background-color);
--ifm-card-background-color: #313131;
--ifm-menu-color-active: white;
--ifm-menu-color-background-active: rgb(73, 76, 84);
--convex-active-background: rgb(73, 76, 84);
--convex-sidebar-icon-filter: invert(100%);
--convex-toc-background-color: var(--ifm-background-color);
--ifm-menu-link-sublist-icon-filter: brightness(0) invert(100%);
--convex-link-underline-color: #888;
--convex-zen-do-color: var(--ifm-color-success-lightest);
--convex-zen-do-not-color: var(--ifm-color-warning-lightest);
--color-error: #fca5a5;
}
/* Fixes the highlighted code line background */
html[data-theme="dark"] .theme-code-block-highlighted-line {
--docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.05);
}
/* Custom card icons that were tagged as needing color inversion */
html[data-theme="dark"] a.card.convex-invert-icon svg {
filter: invert(100%);
}
@media (max-width: 996px) {
.navbar__brand {
margin-right: auto;
}
}
.StackPosts {
display: flex;
flex-direction: column;
gap: 1rem;
container-type: inline-size;
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--ifm-toc-border-color);
}
.StackPosts-title {
font-family: "GT America", system-ui, "Segoe UI", Roboto, Helvetica, Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
display: flex;
flex-direction: row;
align-items: center;
gap: 0.375rem;
font-weight: bold;
font-size: 1.25rem;
}
.StackPosts-title-imageLink {
display: flex;
position: relative;
top: -0.125rem;
}
.StackPosts-title-image--dark {
display: none;
}
html[data-theme="dark"] .StackPosts-title-image--light {
display: none;
}
html[data-theme="dark"] .StackPosts-title-image--dark {
display: block;
}
.StackPosts-posts {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
@container (min-width: 45rem) {
.StackPosts-posts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.StackPosts-post {
display: flex;
gap: 1rem;
text-decoration: none;
color: var(--ifm-font-color-base);
}
.StackPosts-post:hover {
text-decoration: none;
color: var(--ifm-font-color-base);
}
.StackPosts-post-image {
border-radius: 0.375rem;
flex-shrink: 0;
border: 1px solid var(--color-n7);
width: 11rem;
height: 6rem;
object-fit: cover;
}
.StackPosts-post-content {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
}
.StackPosts-post-content-title {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
font-size: 1.125rem;
line-height: 1.375rem;
overflow: hidden;
padding-bottom: 0.125rem;
}
.StackPosts-post:hover .StackPosts-post-content-title {
text-decoration: underline;
}
.StackPosts-post-content-author {
display: flex;
align-items: center;
gap: 0.5rem;
}
.StackPosts-post-content-author-image {
border-radius: 50%;
object-fit: cover;
}
.StackPosts-post-content-author-name {
font-size: 0.875rem;
}
/* START: Large cards implementation */
.large-cards {
display: grid;
gap: 1rem;
margin: 1.5rem 0 2.5rem;
}
@container (width > 743px) {
.large-cards {
grid-template-columns: 1fr 1fr;
}
}
a.large-card {
box-shadow: none;
padding: 1.25rem;
border: 1px solid var(--ifm-toc-border-color);
border-radius: var(--ifm-card-border-radius);
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
height: 100%;
min-height: 130px;
text-decoration: none;
background-color: var(--ifm-background-color);
}
a.large-card:hover {
box-shadow: none;
background-color: var(--ifm-menu-color-background-active);
color: var(--ifm-font-color-base);
text-decoration: none;
}
a.large-card h2 {
font-size: 1.125rem;
margin: 0;
}
a.large-card p {
font-size: 1rem;
margin: 0;
color: var(--ifm-color-emphasis-700);
line-height: 1.5;
}
/* END: Large cards implementation */
/* Video link cards */
.video-cards {
display: grid;
gap: 1rem;
margin: 1.5rem 0 2.5rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 997px) {
.video-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
a.video-card {
box-shadow: none;
padding: 1.25rem;
border: 1px solid var(--ifm-toc-border-color);
border-radius: var(--ifm-card-border-radius);
display: flex;
gap: 1rem;
align-items: center;
text-decoration: none;
background-color: var(--ifm-background-color);
}
a.video-card:hover {
box-shadow: none;
background-color: var(--ifm-menu-color-background-active);
color: var(--ifm-font-color-base);
text-decoration: none;
}
a.video-card .play-icon {
color: var(--ifm-font-color-base);
flex-shrink: 0;
}
a.video-card h2 {
font-size: 1rem;
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
font-weight: 400;
font-family: var(--ifm-font-family-base);
letter-spacing: normal;
max-height: 2.4em;
}
/* Hack to hide additional Bearer token headers in OpenAPI endpoints */
.openapi-explorer__details-container:nth-child(2)
> div
> .openapi-explorer__form-item:nth-child(2) {
display: none;
}
.openapi-explorer__details-container:nth-child(2)
> div
> .openapi-explorer__form-item:nth-child(3) {
display: none;
}
.openapi-explorer__details-container:nth-child(2)
> div
> .openapi-explorer__form-item:nth-child(4) {
display: none;
}
.openapi-explorer__details-container:nth-child(2)
> div
> .openapi-explorer__form-item:nth-child(5) {
display: none;
}