mirror of
https://github.com/ClickHouse/ClickHouse.git
synced 2026-10-28 16:18:23 +08:00
3936 lines
122 KiB
CSS
3936 lines
122 KiB
CSS
/* No motion anywhere in the documentation. Every state change is instantaneous:
|
|
opening a panel, expanding a sidebar group, hovering a card, revealing the
|
|
navbar. Transitions and animations delay the content the reader asked for and
|
|
make the site feel sluggish, and a transition on a property that is updated
|
|
while dragging (a panel height, for example) makes the element lag behind the
|
|
pointer and re-render continuously.
|
|
|
|
This is a global override rather than a set of local fixes because most of
|
|
the motion comes from Mintlify's own bundle and its Tailwind utility classes
|
|
(`transition-colors`, `animate-*`), which are not ours to edit. Zeroing the
|
|
durations and delays - instead of `transition: none` / `animation: none` -
|
|
keeps every final state intact: an animation still runs and still applies its
|
|
`animation-fill-mode`, it just completes at once, so nothing that fades in
|
|
can get stuck invisible. */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
transition-duration: 0s !important;
|
|
transition-delay: 0s !important;
|
|
animation-duration: 0s !important;
|
|
animation-delay: 0s !important;
|
|
}
|
|
|
|
/* Reserve the scrollbar gutter at all times so nothing shifts when a modal
|
|
locks body scroll and the scrollbar disappears. react-remove-scroll
|
|
compensates with margin-right on body, but that double-compensates when
|
|
the gutter is already reserved — zero it out. */
|
|
/* Hero cards on the home page */
|
|
.dark .ch-hero-card {
|
|
background-color: #191919 !important;
|
|
border-color: #2B2B2B !important;
|
|
}
|
|
/* Light mode: darken stroke only, no background change */
|
|
html:not(.dark) .ch-hero-card:hover {
|
|
border-color: #9ca3af !important;
|
|
}
|
|
.dark .ch-hero-card:hover {
|
|
background-color: #272727 !important;
|
|
border-color: #535353 !important;
|
|
}
|
|
/* Use case section dividers */
|
|
.ch-usecase-divider {
|
|
border: none !important;
|
|
border-top: 1px solid #e5e7eb !important;
|
|
}
|
|
.dark .ch-usecase-divider {
|
|
border-top-color: #2B2B2B !important;
|
|
}
|
|
/* Use case card arrows */
|
|
html:not(.dark) .ch-usecase-arrow {
|
|
color: #2563eb;
|
|
}
|
|
.dark .ch-usecase-arrow {
|
|
color: #FCFF74;
|
|
}
|
|
|
|
/* Restore the layout and appearance of the legacy Docusaurus VersionBadge. */
|
|
.versionBadge {
|
|
background-color: #F6F7FA;
|
|
border-radius: 16px;
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 12px;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.dark .versionBadge {
|
|
background-color: #282828;
|
|
color: white;
|
|
}
|
|
|
|
/* The view selector uses the same full-width outlined control as the rest of
|
|
the page chrome. */
|
|
.multi-view-dropdown-trigger {
|
|
width: 100% !important;
|
|
border: 1px solid #dcdde0 !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
.dark .multi-view-dropdown-trigger {
|
|
border-color: rgba(255, 255, 255, 0.15) !important;
|
|
}
|
|
/* Homepage content hidden until React has mounted and child effects have settled.
|
|
Double-RAF in PageWrapper ensures FullWidthDivider's own RAF fires first. */
|
|
.ch-page-hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.ch-page-visible {
|
|
opacity: 1;
|
|
}
|
|
/* Overlay image drop shadow (hero cards with overlayImg) */
|
|
.ch-overlay-shadow {
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18);
|
|
}
|
|
|
|
/* Preserve the sm/md/lg image hierarchy from the previous docs site.
|
|
Mintlify's content column is narrower, so 480px keeps md visibly distinct
|
|
from a full-width lg image. */
|
|
.ch-image-sm,
|
|
.ch-image-md,
|
|
.ch-image-lg {
|
|
width: 100%;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.ch-image-sm {
|
|
max-width: 300px;
|
|
}
|
|
|
|
.ch-image-md {
|
|
max-width: 480px;
|
|
}
|
|
|
|
.ch-image-lg {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.ch-image-sm img,
|
|
.ch-image-md img,
|
|
.ch-image-lg img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
/* MCP icon — mask-size/repeat extracted from inline style; URL stays inline */
|
|
.ch-mcp-icon {
|
|
-webkit-mask-size: contain;
|
|
mask-size: contain;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
}
|
|
/* Nav logo injected by tab-nav.js */
|
|
#ch-homepage-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
text-decoration: none;
|
|
}
|
|
#ch-hp-logo-light,
|
|
#ch-hp-logo-dark {
|
|
height: 2rem;
|
|
}
|
|
|
|
html {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
/* Override Mintlify prose link color rules for CTA buttons.
|
|
Light: html:not(.dark) .prose a:not(.card):not(.card *) — specificity (0,4,2)
|
|
Dark: .dark .prose a:not(.card):not(.card *) — specificity (0,4,1)
|
|
We beat both by appending .ch-btn-* to the exact same selector → +1 class. */
|
|
|
|
/* Primary — light: white text on black bg; dark: black text on yellow bg */
|
|
html:not(.dark) .prose a.ch-btn-primary:not(.card):not(.card *),
|
|
html .ch-btn-primary { color: #ffffff !important; }
|
|
|
|
html.dark .prose a.ch-btn-primary:not(.card):not(.card *),
|
|
html.dark .ch-btn-primary { color: #1c1c1c !important; }
|
|
|
|
/* Secondary — light: black text; dark: white text */
|
|
html:not(.dark) .prose a.ch-btn-secondary:not(.card):not(.card *),
|
|
html .ch-btn-secondary { color: #1c1c1c !important; }
|
|
|
|
html.dark .prose a.ch-btn-secondary:not(.card):not(.card *),
|
|
html.dark .ch-btn-secondary { color: #ffffff !important; }
|
|
|
|
/* Hover: no underline */
|
|
html:not(.dark) .prose a.ch-btn-primary:not(.card):not(.card *):hover,
|
|
html:not(.dark) .prose a.ch-btn-secondary:not(.card):not(.card *):hover,
|
|
html .ch-btn-primary:hover,
|
|
html .ch-btn-secondary:hover { text-decoration: none !important; }
|
|
|
|
html.dark .prose a.ch-btn-primary:not(.card):not(.card *):hover,
|
|
html.dark .prose a.ch-btn-secondary:not(.card):not(.card *):hover,
|
|
html.dark .ch-btn-primary:hover,
|
|
html.dark .ch-btn-secondary:hover { text-decoration: none !important; }
|
|
|
|
/* Hover: preserve text color (beat prose a:hover color !important rules) */
|
|
html:not(.dark) .prose a.ch-btn-primary:not(.card):not(.card *):hover,
|
|
html .ch-btn-primary:hover { color: #ffffff !important; }
|
|
|
|
html:not(.dark) .prose a.ch-btn-secondary:not(.card):not(.card *):hover,
|
|
html .ch-btn-secondary:hover { color: #1c1c1c !important; }
|
|
|
|
html.dark .prose a.ch-btn-primary:not(.card):not(.card *):hover,
|
|
html.dark .ch-btn-primary:hover { color: #1c1c1c !important; }
|
|
|
|
html.dark .prose a.ch-btn-secondary:not(.card):not(.card *):hover,
|
|
html.dark .ch-btn-secondary:hover { color: #ffffff !important; }
|
|
|
|
body[data-scroll-locked] {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
/* Agent-assisted setup callout, ported from the Docusaurus AgentPrompt
|
|
component. The `ch-` prefix keeps these rules isolated from Mintlify. */
|
|
.ch-agent-prompt-wrapper {
|
|
--agent-accent: #FBFF46;
|
|
--agent-accent-bg: #FFFFE8;
|
|
--agent-text: #161517;
|
|
--agent-text-muted: #696E79;
|
|
--agent-prompt-bg: #FFFFFF;
|
|
--agent-prompt-border: #FCFF74;
|
|
--agent-button-bg: #FBFF46;
|
|
--agent-button-bg-hover: #EEF400;
|
|
--agent-button-text: #161517;
|
|
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin: 1.25rem 0 1.75rem;
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--agent-accent);
|
|
border-radius: 8px;
|
|
background: var(--agent-accent-bg);
|
|
}
|
|
|
|
.ch-agent-prompt-main-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.ch-agent-prompt-left,
|
|
.ch-agent-prompt-copy-button {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ch-agent-prompt-title {
|
|
color: var(--agent-text);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ch-agent-prompt-prompt-area {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--agent-prompt-border);
|
|
border-radius: 6px;
|
|
background: var(--agent-prompt-bg);
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.ch-agent-prompt-prompt-area::-webkit-scrollbar {
|
|
height: 6px;
|
|
}
|
|
|
|
.ch-agent-prompt-prompt-area::-webkit-scrollbar-thumb {
|
|
border-radius: 3px;
|
|
background: #FCFF74;
|
|
}
|
|
|
|
.prose .ch-agent-prompt-prompt-text,
|
|
.ch-agent-prompt-prompt-text {
|
|
display: block;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--agent-text);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
font-size: 0.8125rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ch-agent-prompt-copy-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 7px 12px;
|
|
border: 1px solid var(--agent-accent);
|
|
border-radius: 6px;
|
|
background: var(--agent-button-bg);
|
|
color: var(--agent-button-text);
|
|
cursor: pointer;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ch-agent-prompt-copy-button:hover {
|
|
background: var(--agent-button-bg-hover);
|
|
}
|
|
|
|
.ch-agent-prompt-copy-button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.ch-agent-prompt-copy-button:focus-visible,
|
|
.ch-agent-prompt-outline-summary:focus-visible {
|
|
outline: 2px solid #135BE6;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.ch-agent-prompt-sub-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
padding-left: 2px;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.ch-agent-prompt-description {
|
|
color: var(--agent-text-muted);
|
|
}
|
|
|
|
.prose a.ch-agent-prompt-repository-link,
|
|
.ch-agent-prompt-repository-link {
|
|
color: #135BE6 !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ch-agent-prompt-outline {
|
|
margin-top: 2px;
|
|
padding-top: 8px;
|
|
border-top: 1px dashed var(--agent-prompt-border);
|
|
}
|
|
|
|
.ch-agent-prompt-outline-summary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 2px 0;
|
|
border-radius: 3px;
|
|
color: var(--agent-text);
|
|
cursor: pointer;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
list-style: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.ch-agent-prompt-outline-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.ch-agent-prompt-outline-summary:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.ch-agent-prompt-outline-chevron {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ch-agent-prompt-outline[open] > .ch-agent-prompt-outline-summary > .ch-agent-prompt-outline-chevron {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.prose .ch-agent-prompt-outline-list,
|
|
.ch-agent-prompt-outline-list {
|
|
margin: 8px 0 2px;
|
|
padding-left: 1.4rem;
|
|
color: var(--agent-text-muted);
|
|
font-size: 0.8125rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.prose .ch-agent-prompt-outline-list li,
|
|
.ch-agent-prompt-outline-list li {
|
|
margin: 2px 0;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
.ch-agent-prompt-outline-list li::marker {
|
|
color: var(--agent-text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
html.dark .ch-agent-prompt-wrapper,
|
|
:is(.dark) .ch-agent-prompt-wrapper {
|
|
--agent-accent: #FCFF74;
|
|
--agent-accent-bg: rgba(251, 255, 70, 0.06);
|
|
--agent-text: #FFFFFF;
|
|
--agent-text-muted: #DFDFDF;
|
|
--agent-prompt-bg: #1D1D1D;
|
|
--agent-prompt-border: rgba(251, 255, 70, 0.35);
|
|
--agent-button-bg: #FCFF74;
|
|
--agent-button-bg-hover: #FBFF46;
|
|
--agent-button-text: #151515;
|
|
}
|
|
|
|
html.dark .prose a.ch-agent-prompt-repository-link,
|
|
:is(.dark) .prose a.ch-agent-prompt-repository-link {
|
|
color: #FCFF74 !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.ch-agent-prompt-main-row {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ch-agent-prompt-prompt-area {
|
|
order: 3;
|
|
width: 100%;
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.ch-agent-prompt-copy-button {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.ch-agent-prompt-prompt-text {
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.ch-agent-prompt-sub-row {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
}
|
|
|
|
/* The secondary navbar (`#navbar-transition-maple`) and the fixed sidebar
|
|
(`#sidebar`) both reserve 40px above themselves for the announcement
|
|
banner (Tailwind `lg:mt-10` / `top-10`). The banner is `position: fixed`
|
|
and renders on top, so the reservation is purely visual. On initial load,
|
|
before the banner hydrates, that fixed offset shows as an empty 40px gap
|
|
above each element which visibly "closes" once the banner paints. Pin
|
|
the offsets to `--banner-height` so they track the banner's actual
|
|
presence — no banner, no gap. */
|
|
#navbar-transition-maple {
|
|
margin-top: 0 !important;
|
|
top: var(--banner-height, 0px) !important;
|
|
}
|
|
#sidebar {
|
|
top: var(--banner-height, 0px) !important;
|
|
}
|
|
|
|
/* Visually distinguish the expand/collapse chevron from the group label in the
|
|
sidebar. Each collapsible group is a single <button> whose children are: an
|
|
optional icon div (.shrink-0, first), the label div (no .shrink-0, holds the
|
|
text), and the chevron div (.shrink-0, :last-child). Behavior is unchanged —
|
|
the whole row still toggles — these are visual affordances only.
|
|
|
|
Chevron: floated to the right edge with a hover box so it reads as the
|
|
expand/collapse control. Applies to every collapsible group. */
|
|
#sidebar button[aria-expanded] > div:last-child {
|
|
margin-left: auto;
|
|
padding: 2px 3px;
|
|
border-radius: 6px;
|
|
}
|
|
#sidebar button[aria-expanded] > div:last-child:hover {
|
|
background-color: rgba(15, 23, 42, 0.08);
|
|
}
|
|
.dark #sidebar button[aria-expanded] > div:last-child:hover,
|
|
:is(.dark) #sidebar button[aria-expanded] > div:last-child:hover {
|
|
background-color: rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
/* Label: only groups that have a root (landing) page are navigable. Mintlify
|
|
gives those <li>s an id equal to the root path (e.g. id="/get-started");
|
|
pure container groups have NO id attribute, so we match on id^="/" (must
|
|
start with a slash) rather than :not([id=""]) — the latter also matches the
|
|
id-less container groups. Highlight the label on hover for the navigable
|
|
groups so it reads as a link; container-group labels get no cue (only the
|
|
chevron). Padding is offset by an equal negative margin so the highlight adds
|
|
no layout shift. */
|
|
#sidebar li[id^="/"] > button[aria-expanded] > div:not(.shrink-0) {
|
|
padding: 1px 6px;
|
|
margin: -1px -6px;
|
|
border-radius: 6px;
|
|
}
|
|
#sidebar li[id^="/"] > button[aria-expanded] > div:not(.shrink-0):hover {
|
|
background-color: rgba(15, 23, 42, 0.08);
|
|
}
|
|
.dark #sidebar li[id^="/"] > button[aria-expanded] > div:not(.shrink-0):hover,
|
|
:is(.dark) #sidebar li[id^="/"] > button[aria-expanded] > div:not(.shrink-0):hover {
|
|
background-color: rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
/* `navbar-cta.js` injects the GitHub stars + Get-started button into
|
|
`#navbar-transition-maple` after Mintlify hydrates. The navbar is
|
|
`justify-content: flex-end`, so the inserted children push the existing
|
|
nav tabs left by ~205px, producing a visible flash. Reserve that space
|
|
via padding-right while the CTA is missing — when the CTA appears, the
|
|
padding shrinks back and the CTA fills the freed slot, leaving the tabs
|
|
in the same x position throughout. */
|
|
#navbar-transition-maple:not(:has(#ch-navbar-cta)) {
|
|
padding-right: calc(48px + 206px) !important;
|
|
}
|
|
|
|
/* Hide the navbar on the initial page load (every page) until its injected
|
|
contents — logo (homepage) + CTA + theme toggle (all pages) — have settled,
|
|
then fade in, to mask the layout shift those injections cause.
|
|
|
|
The `html:not(.ch-navbar-revealed)` guard limits the hide to the FIRST load:
|
|
tab-nav.js adds `.ch-navbar-revealed` to <html> the first time the navbar is
|
|
revealed, and since <html> survives SPA navigations the hide never re-applies
|
|
— so there's no fade on every in-app page change (only on real page loads).
|
|
A safety timeout in tab-nav.js adds `.ch-navbar-revealed` once the navbar
|
|
exists, so it can never stay stuck hidden if an injection never completes. */
|
|
html:not(.ch-navbar-revealed) #navbar-transition-maple:not(.ch-navbar-ready) {
|
|
opacity: 0;
|
|
}
|
|
#navbar-transition-maple.ch-navbar-ready {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ============================================
|
|
Global Border Radius
|
|
============================================ */
|
|
|
|
/* Apply smaller border radius globally */
|
|
.card,
|
|
.code-block,
|
|
.accordion,
|
|
.callout {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* The code-block container carries Mintlify's own `rounded-2xl` utility,
|
|
which outranks the non-!important rule above — so its border rendered at
|
|
16px while the inner code surface (forced to 4px further down) did not.
|
|
Force the container to match. */
|
|
.code-block {
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
/* Mintlify's built-in `rounded-t-2xl` (12px) on the accordion summary doesn't
|
|
match the 4px override above on the surrounding `details.accordion`, so on
|
|
hover the summary's wider corner curve produces a visible gap inside the
|
|
parent's tighter clip. Match the summary's top corners to 4px. */
|
|
details.accordion > summary,
|
|
.accordion-group > details > summary {
|
|
border-top-left-radius: 4px !important;
|
|
border-top-right-radius: 4px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Accordion Dark Mode Background
|
|
============================================ */
|
|
|
|
/* Accordion group and individual accordions: use grey instead of codeblock black.
|
|
Page background is #1d1d1d, code blocks are #282828, so #242424 sits between them. */
|
|
.dark .accordion-group,
|
|
:is(.dark) .accordion-group,
|
|
.dark details.accordion,
|
|
:is(.dark) details.accordion {
|
|
background-color: #242424 !important;
|
|
}
|
|
|
|
/* Override the built-in dark:bg-codeblock on accordion elements */
|
|
.dark .accordion-group > details,
|
|
:is(.dark) .accordion-group > details,
|
|
.dark details.accordion.bg-background-light,
|
|
:is(.dark) details.accordion.bg-background-light {
|
|
background-color: #242424 !important;
|
|
}
|
|
|
|
/* Accordion borders in dark mode - outer border and dividers between items */
|
|
.dark .accordion-group,
|
|
:is(.dark) .accordion-group {
|
|
border-color: #3c3c3c !important;
|
|
}
|
|
|
|
.dark .accordion-group > details + details,
|
|
:is(.dark) .accordion-group > details + details {
|
|
border-top-color: #3c3c3c !important;
|
|
}
|
|
|
|
.dark details.accordion,
|
|
:is(.dark) details.accordion {
|
|
border-color: #3c3c3c !important;
|
|
}
|
|
|
|
/* Accordion summary hover and open (selected) state */
|
|
.dark details.accordion > summary:hover,
|
|
:is(.dark) details.accordion > summary:hover,
|
|
.dark .accordion-group > details > summary:hover,
|
|
:is(.dark) .accordion-group > details > summary:hover,
|
|
.dark details.accordion[open] > summary,
|
|
:is(.dark) details.accordion[open] > summary,
|
|
.dark .accordion-group > details[open] > summary,
|
|
:is(.dark) .accordion-group > details[open] > summary {
|
|
background-color: #2a2a2a !important;
|
|
}
|
|
|
|
/* Keep Mintlify's default pagination and hide only the next page's
|
|
description. */
|
|
#pagination > a[rel="next"] [data-component-part="pagination-description"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* "Copy page" split-button group: make the resting state clearly visible
|
|
(matches what the previous hover looked like) and the hover state darker. */
|
|
#page-context-menu-button,
|
|
#page-context-menu-button + button {
|
|
background-color: rgba(0, 0, 0, 0.025) !important;
|
|
}
|
|
#page-context-menu-button:hover,
|
|
#page-context-menu-button + button:hover {
|
|
background-color: rgba(0, 0, 0, 0.06) !important;
|
|
}
|
|
.dark #page-context-menu-button,
|
|
.dark #page-context-menu-button + button,
|
|
:is(.dark) #page-context-menu-button,
|
|
:is(.dark) #page-context-menu-button + button {
|
|
background-color: rgba(255, 255, 255, 0.06) !important;
|
|
border-color: rgba(255, 255, 255, 0.07) !important;
|
|
color: rgb(206, 206, 206) !important;
|
|
}
|
|
.dark #page-context-menu-button:hover,
|
|
.dark #page-context-menu-button + button:hover,
|
|
:is(.dark) #page-context-menu-button:hover,
|
|
:is(.dark) #page-context-menu-button + button:hover {
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
border-color: rgba(255, 255, 255, 0.14) !important;
|
|
}
|
|
|
|
/* "Was this page helpful?" feedback toolbar buttons (Yes / No / Suggest edits /
|
|
Raise issue). Same chrome as the pagination cards / home-page hero cards
|
|
(.ch-hero-card colors). Doesn't render in `mint dev` — verify on a hosted
|
|
deployment. */
|
|
.feedback-toolbar button,
|
|
.feedback-toolbar a {
|
|
background-color: #f9f9f9 !important;
|
|
border-color: #e5e7eb !important;
|
|
border-radius: 0.5rem !important;
|
|
color: #6b7280 !important;
|
|
}
|
|
.feedback-toolbar button:hover,
|
|
.feedback-toolbar a:hover {
|
|
background-color: #f0f0f0 !important;
|
|
border-color: #d1d5db !important;
|
|
}
|
|
.dark .feedback-toolbar button,
|
|
.dark .feedback-toolbar a,
|
|
:is(.dark) .feedback-toolbar button,
|
|
:is(.dark) .feedback-toolbar a {
|
|
background-color: #191919 !important;
|
|
border-color: #2B2B2B !important;
|
|
color: #a1a1aa !important;
|
|
}
|
|
.dark .feedback-toolbar button:hover,
|
|
.dark .feedback-toolbar a:hover,
|
|
:is(.dark) .feedback-toolbar button:hover,
|
|
:is(.dark) .feedback-toolbar a:hover {
|
|
background-color: #272727 !important;
|
|
border-color: #535353 !important;
|
|
}
|
|
|
|
/* Override code block background border radius */
|
|
.code-block-background,
|
|
[data-component-part="code-block-root"],
|
|
.code-block-background.rounded-2xl,
|
|
[data-component-part="code-block-root"].rounded-2xl {
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
/* Code block background color in dark mode */
|
|
.dark .code-block-background,
|
|
.dark [data-component-part="code-block-root"],
|
|
:is(.dark) .code-block-background,
|
|
:is(.dark) [data-component-part="code-block-root"] {
|
|
background-color: #282828 !important;
|
|
--shiki-dark-bg: #282828 !important;
|
|
}
|
|
|
|
/* Override Shiki pre background in dark mode */
|
|
.dark pre.shiki,
|
|
:is(.dark) pre.shiki {
|
|
background-color: #282828 !important;
|
|
--shiki-dark-bg: #282828 !important;
|
|
}
|
|
|
|
/* Highlighted lines in code blocks - dark mode */
|
|
.dark [data-component-part=code-block-root]:not(.has-line-numbers) .line-highlight,
|
|
:is(.dark) [data-component-part=code-block-root]:not(.has-line-numbers) .line-highlight {
|
|
background: #424242 !important;
|
|
}
|
|
|
|
.dark [data-component-part=code-block-root]:not(.has-line-numbers) .line-highlight::before,
|
|
:is(.dark) [data-component-part=code-block-root]:not(.has-line-numbers) .line-highlight::before {
|
|
background-color: #424242 !important;
|
|
border-left-color: #FAFF69 !important;
|
|
}
|
|
|
|
.dark [data-component-part=code-block-root]:not(.has-line-numbers) .line-highlight::after,
|
|
:is(.dark) [data-component-part=code-block-root]:not(.has-line-numbers) .line-highlight::after {
|
|
background-color: #424242 !important;
|
|
}
|
|
|
|
/* Override fade overlay color to match code block background in dark mode */
|
|
.dark [data-fade-overlay="true"],
|
|
:is(.dark) [data-fade-overlay="true"] {
|
|
--fade-color-dark: #282828 !important;
|
|
}
|
|
|
|
/* Copy code button checkmark icon (success state) - yellow in dark mode */
|
|
.dark [data-testid="copy-code-button"] svg[viewBox="0 0 16 11"],
|
|
:is(.dark) [data-testid="copy-code-button"] svg[viewBox="0 0 16 11"] {
|
|
fill: #FAFF69 !important;
|
|
}
|
|
|
|
/* Fix code block horizontal overflow: allow content wider than viewport
|
|
The w-0 min-w-full max-w-full combo constrains container to parent width,
|
|
clipping monospace response blocks. Remove max-w constraint so overflow-x-auto works. */
|
|
[data-component-part="code-block-root"] {
|
|
max-width: none !important;
|
|
}
|
|
|
|
/* Match the monospace stack used by the server's built-in documentation. */
|
|
[data-component-part="code-block-root"] pre.shiki,
|
|
[data-component-part="code-block-root"] code,
|
|
[data-component-part="code-block-root"] .line,
|
|
[data-component-part="code-block-root"] .line span {
|
|
font-family: "DejaVu Sans Mono", "Liberation Mono", "MonoLisa", "Consolas", monospace !important;
|
|
}
|
|
|
|
[data-component-part="code-block-root"] .font-mono {
|
|
font-variant-ligatures: none !important;
|
|
font-feature-settings: "kern" 0 !important;
|
|
font-size: 0.8125rem !important;
|
|
line-height: 1.25 !important;
|
|
}
|
|
|
|
|
|
.nav-logo {
|
|
height: 2rem;
|
|
}
|
|
|
|
/* Dark mode sidebar background */
|
|
.dark #almond-background-color,
|
|
:is(.dark) #almond-background-color {
|
|
background-color: #151515 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Sticky sidebar header (search + Ask AI)
|
|
============================================
|
|
|
|
Mintlify's scroll viewport lives directly inside `#sidebar-content`. The
|
|
viewport's inner wrapper has three children, in order:
|
|
[0] the logo + dark-mode-toggle row (div.flex.justify-between.items-center)
|
|
[1] the search + Ask AI row (div.flex.flex-col.gap-4.mt-6)
|
|
[2] the page navigation (#navigation-items)
|
|
Keep Mintlify's viewport as the scroll container so its visible Base UI
|
|
scrollbar continues to work. Pin the logo and search rows within that
|
|
viewport while the navigation scrolls beneath them.
|
|
`#sidebar` is `hidden lg:flex`, so this only affects the desktop sidebar. */
|
|
#sidebar-content > div[role="presentation"] > div[role="presentation"] > div:first-child,
|
|
#sidebar-content > div[role="presentation"] > div[role="presentation"] > div:nth-child(2) {
|
|
position: sticky;
|
|
z-index: 20;
|
|
background: #ffffff;
|
|
}
|
|
|
|
#sidebar-content > div[role="presentation"] > div[role="presentation"] > div:first-child {
|
|
top: 0;
|
|
z-index: 21;
|
|
}
|
|
|
|
#sidebar-content > div[role="presentation"] > div[role="presentation"] > div:nth-child(2) {
|
|
top: 3.5rem;
|
|
}
|
|
|
|
/* Cover the complete sticky header, including the space above, between, and
|
|
below its two rows, so menu items cannot show through while scrolling. */
|
|
#sidebar-content > div[role="presentation"] > div[role="presentation"] > div:nth-child(2)::before {
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: -5rem;
|
|
right: -1rem;
|
|
bottom: -2rem;
|
|
left: -1.75rem;
|
|
background: #ffffff;
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dark #sidebar-content > div[role="presentation"] > div[role="presentation"] > div:first-child,
|
|
.dark #sidebar-content > div[role="presentation"] > div[role="presentation"] > div:nth-child(2),
|
|
:is(.dark) #sidebar-content > div[role="presentation"] > div[role="presentation"] > div:first-child,
|
|
:is(.dark) #sidebar-content > div[role="presentation"] > div[role="presentation"] > div:nth-child(2) {
|
|
background: #151515;
|
|
}
|
|
|
|
.dark #sidebar-content > div[role="presentation"] > div[role="presentation"] > div:nth-child(2)::before,
|
|
:is(.dark) #sidebar-content > div[role="presentation"] > div[role="presentation"] > div:nth-child(2)::before {
|
|
background: #151515;
|
|
}
|
|
|
|
#sidebar-content #navigation-items {
|
|
/* Mintlify inserts an empty `mt-8` list before the first real menu item.
|
|
Preserve an explicit gap between the sticky controls and the first menu
|
|
item rather than relying on that empty element's collapsed margin. */
|
|
margin-top: 2rem;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #d1d5db transparent;
|
|
}
|
|
|
|
#navigation-items > ul.list-none.mt-8:first-child:empty {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
/* Start Mintlify's scrollbar track at the first navigation item rather than at
|
|
the top of the sticky logo/search header. */
|
|
#sidebar-content > [data-component-part="scroll-area-scrollbar"][data-orientation="vertical"] {
|
|
margin-top: 9.25rem;
|
|
}
|
|
|
|
#navigation-items::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
#navigation-items::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
#navigation-items::-webkit-scrollbar-thumb {
|
|
border-radius: 9999px;
|
|
background: #d1d5db;
|
|
}
|
|
|
|
#navigation-items::-webkit-scrollbar-thumb:hover {
|
|
background: #9ca3af;
|
|
}
|
|
|
|
.dark #navigation-items,
|
|
:is(.dark) #navigation-items {
|
|
scrollbar-color: #52525b transparent;
|
|
}
|
|
|
|
.dark #navigation-items::-webkit-scrollbar-thumb,
|
|
:is(.dark) #navigation-items::-webkit-scrollbar-thumb {
|
|
background: #52525b;
|
|
}
|
|
|
|
.dark #navigation-items::-webkit-scrollbar-thumb:hover,
|
|
:is(.dark) #navigation-items::-webkit-scrollbar-thumb:hover {
|
|
background: #71717a;
|
|
}
|
|
|
|
/* Hide the chat assistant textarea and its floating-input wrapper */
|
|
.chat-assistant-input,
|
|
.chat-assistant-floating-input {
|
|
display: none !important;
|
|
}
|
|
|
|
#assistant-entry {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Right-align top nav items and constrain width to content area */
|
|
#navbar-transition-maple {
|
|
width: calc(100vw - 19rem) !important;
|
|
justify-content: flex-end !important;
|
|
z-index: 30 !important;
|
|
}
|
|
|
|
/* Align quickstarts grid to the left instead of centered */
|
|
.max-w-7xl.mx-auto:has(.mint-sticky) {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
/* Product selector trigger button text size */
|
|
.nav-dropdown-products-selector-trigger .truncate,
|
|
.nav-dropdown-products-selector-trigger span.truncate {
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
/* Use case grid */
|
|
.use-case-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.use-case-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.use-case-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Bottom navigation */
|
|
.gemini-nav {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.gemini-nav-btn {
|
|
padding: 0.75rem 1.5rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: inherit;
|
|
}
|
|
|
|
html:not(.dark) .gemini-nav-btn {
|
|
background: rgba(0, 0, 0, 0.02);
|
|
border-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.gemini-nav-btn:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
html:not(.dark) .gemini-nav-btn:hover {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
border-color: rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.gemini-nav-btn.active {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
html:not(.dark) .gemini-nav-btn.active {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
border-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Reduce padding on hero and sidekick sections on home page */
|
|
.hero {
|
|
padding-top: 5rem !important;
|
|
padding-bottom: 1rem !important;
|
|
padding-left: 8rem !important;
|
|
padding-right: 8rem !important;
|
|
align-items: center !important;
|
|
min-height: auto !important;
|
|
height: auto !important;
|
|
margin-bottom: 0 !important;
|
|
gap: 0 !important;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 2.5rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Tilted Background Effect - matches ClickHouse.com styling */
|
|
.hero h1 .tilted {
|
|
position: relative !important;
|
|
display: inline-block !important;
|
|
isolation: isolate !important;
|
|
margin: 0.25em 0.25em !important;
|
|
white-space: nowrap !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.hero h1 .tilted::before {
|
|
content: '' !important;
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
z-index: -1 !important;
|
|
transform: skewY(-3deg) !important;
|
|
background-color: #FCFF74 !important;
|
|
}
|
|
|
|
.hero h1 .tilted-content {
|
|
position: relative !important;
|
|
display: inline-block !important;
|
|
padding: 0.5rem !important;
|
|
color: #000000 !important;
|
|
}
|
|
|
|
/* Generic Tilted Background Effect - for use anywhere */
|
|
.tilted {
|
|
position: relative;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tilted::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
transform: skewY(-3deg);
|
|
}
|
|
|
|
.tilted-sm::before {
|
|
transform: skewY(-1deg);
|
|
}
|
|
|
|
.tilted-content {
|
|
position: relative;
|
|
padding: 0.3rem 0.35rem;
|
|
}
|
|
|
|
.tilted-yellow {
|
|
color: #1f1f1c;
|
|
}
|
|
|
|
.tilted-yellow::before {
|
|
background-color: #FCFF74;
|
|
}
|
|
|
|
.tilted-black {
|
|
color: #FCFF74;
|
|
}
|
|
|
|
.tilted-black::before {
|
|
background-color: #1a1a1a;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.non-tilted-md::before {
|
|
transform: skewY(0deg);
|
|
}
|
|
}
|
|
|
|
/* Light mode - black text and black tilted background */
|
|
html:not(.dark) .hero h1 {
|
|
color: #000000 !important;
|
|
}
|
|
|
|
html:not(.dark) .hero h1 .tilted::before {
|
|
background-color: #000000 !important;
|
|
}
|
|
|
|
html:not(.dark) .hero h1 .tilted-content {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Light mode override for tilted-yellow */
|
|
html:not(.dark) .tilted-yellow::before {
|
|
background-color: #000000 !important;
|
|
}
|
|
|
|
html:not(.dark) .tilted-yellow .tilted-content {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.hero p {
|
|
margin-bottom: 1rem !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
}
|
|
|
|
.hero-text {
|
|
justify-content: center !important;
|
|
flex: 0 0 33.333% !important;
|
|
max-width: 33.333% !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
.hero-aside {
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
min-height: auto !important;
|
|
height: auto !important;
|
|
padding: 0 !important;
|
|
flex: 0 0 66.667% !important;
|
|
max-width: 66.667% !important;
|
|
}
|
|
|
|
.sidekick.divider {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 1rem !important;
|
|
padding-left: 5rem !important;
|
|
padding-right: 5rem !important;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
border-top: none !important;
|
|
}
|
|
|
|
/* Add spacing between docs tour cards and next section */
|
|
.docs-tour-cards {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Product grid cards background */
|
|
.product-item {
|
|
background-color: #faf9fb !important;
|
|
}
|
|
|
|
.dark .product-item {
|
|
background-color: rgba(255, 255, 255, 0.05) !important;
|
|
}
|
|
|
|
/* Make product grid in hero section compact and square */
|
|
.hero-aside .product-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.hero-aside .product-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem;
|
|
height: 100px;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-aside .product-item img {
|
|
width: 48px !important;
|
|
height: 48px !important;
|
|
min-width: 48px !important;
|
|
max-width: 48px !important;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Invert icons in light mode since we are using dark mode assets */
|
|
html:not(.dark) .hero-aside .product-item img {
|
|
filter: invert(1) hue-rotate(180deg);
|
|
}
|
|
|
|
.hero-aside .product-item h3 {
|
|
font-size: 0.875rem;
|
|
margin: 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Dark mode - white text for product item titles */
|
|
.dark .hero-aside .product-item h3,
|
|
:is(.dark) .hero-aside .product-item h3,
|
|
.dark .hero-aside .product-item h3 {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.hero-aside .product-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.hero-aside .product-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* Global color fixes for product selector - ensure text visibility in all modes */
|
|
/* Light mode - force dark text */
|
|
html:not(.dark) .nav-dropdown-products-selector-item-title,
|
|
html:not(.dark) .nav-dropdown-products-selector-item-title {
|
|
color: #1a1a1a !important;
|
|
}
|
|
|
|
html:not(.dark) .nav-dropdown-products-selector-item-description,
|
|
html:not(.dark) .nav-dropdown-products-selector-item p:last-child,
|
|
html:not(.dark) .nav-dropdown-products-selector-item-description,
|
|
html:not(.dark) .nav-dropdown-products-selector-item p:last-child,
|
|
html:not(.dark) .nav-dropdown-products-selector-item .flex.flex-col p:last-child,
|
|
html:not(.dark) .nav-dropdown-products-selector-item .flex.flex-col p:last-child {
|
|
color: #666666 !important;
|
|
}
|
|
|
|
/* Dark mode color overrides */
|
|
:is(.dark) .nav-dropdown-products-selector-item-title,
|
|
:is(.dark) .nav-dropdown-products-selector-item-title,
|
|
.dark a .nav-dropdown-products-selector-item-title,
|
|
.dark a .nav-dropdown-products-selector-item-title,
|
|
:is(.dark) a .nav-dropdown-products-selector-item-title,
|
|
.dark a .nav-dropdown-products-selector-item p:first-child,
|
|
.dark a .nav-dropdown-products-selector-item p:first-child,
|
|
:is(.dark) a .nav-dropdown-products-selector-item p:first-child {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
:is(.dark) .nav-dropdown-products-selector-item-description,
|
|
:is(.dark) .nav-dropdown-products-selector-item p:last-child,
|
|
:is(.dark) .nav-dropdown-products-selector-item-description,
|
|
:is(.dark) .nav-dropdown-products-selector-item p:last-child,
|
|
:is(.dark) .nav-dropdown-products-selector-item .flex.flex-col p:last-child,
|
|
:is(.dark) .nav-dropdown-products-selector-item .flex.flex-col p:last-child {
|
|
color: #a3a3a3 !important;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
Navigation Link Text Shadow
|
|
============================================ */
|
|
|
|
/* Light mode - remove green, use neutral colors */
|
|
html:not(.dark) a.bg-primary\/10.text-primary {
|
|
text-shadow: -0.2px 0 0 #E6E7E9, 0.2px 0 0 #E6E7E9 !important;
|
|
color: #1f1f1c !important;
|
|
background-color: rgba(31, 31, 28, 0.08) !important;
|
|
}
|
|
|
|
/* Dark mode - remove green, use neutral colors */
|
|
html.dark a.dark\:bg-primary-light\/10.dark\:text-primary-light {
|
|
text-shadow: -0.2px 0 0 #414141, 0.2px 0 0 #414141 !important;
|
|
color: #E6E7E9 !important;
|
|
background-color: rgba(230, 231, 233, 0.1) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Eyebrow Element Color Override
|
|
============================================ */
|
|
|
|
/* Light mode - neutral gray instead of green */
|
|
html:not(.dark) .eyebrow {
|
|
color: #6B7280 !important;
|
|
}
|
|
|
|
/* Dark mode - neutral gray instead of green */
|
|
html.dark .eyebrow {
|
|
color: #9CA3AF !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Text Primary Color Override
|
|
============================================ */
|
|
|
|
/* Light mode - neutral dark gray instead of green */
|
|
html:not(.dark) .text-primary {
|
|
color: #1f1f1c !important;
|
|
}
|
|
|
|
/* Dark mode - neutral light gray instead of green */
|
|
html.dark .text-primary,
|
|
html.dark .dark\:text-primary-light {
|
|
color: #E6E7E9 !important;
|
|
}
|
|
|
|
/* Dark mode hover variants: the CSS var --primary-light resolves to a near-black
|
|
in our theme, so the unpatched `dark:hover:text-primary-light` /
|
|
`dark:hover:bg-primary-light/10` hover styles (used in dropdown items and
|
|
anywhere else) make text invisible on hover. Override both with the
|
|
ClickHouse yellow so hovered items stand out. */
|
|
html.dark .dark\:hover\:text-primary-light:hover {
|
|
color: #FDFF75 !important;
|
|
}
|
|
html.dark .dark\:hover\:bg-primary-light\/10:hover {
|
|
background-color: rgba(253, 255, 117, 0.1) !important;
|
|
}
|
|
|
|
/* Card CTAs use a group-hover dark variant. Keep that CTA readable when the
|
|
card body is hovered instead of allowing the dark theme token to resolve
|
|
to a near-black color. */
|
|
html.dark .card:hover [data-component-part="card-cta"] button,
|
|
:is(.dark) .card:hover [data-component-part="card-cta"] button {
|
|
color: #FDFF75 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Card Icon Color Override
|
|
============================================ */
|
|
|
|
/* Dark mode - ClickHouse yellow */
|
|
html.dark [data-component-part="card-icon"] {
|
|
color: #FDFF75 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Background Primary Light Override
|
|
============================================ */
|
|
|
|
/* Light mode - subtle gray background like sidebar menu items.
|
|
Match only the exact `bg-primary/10` token: a substring matcher like
|
|
[class*="bg-primary/10"] also matches `hover:bg-primary/10`,
|
|
`focus:bg-primary/10`, etc — applying the background unconditionally
|
|
to every dropdown-menu item, not just the hovered/active one. */
|
|
html:not(.dark) .bg-primary\/10 {
|
|
background-color: rgba(31, 31, 28, 0.08) !important;
|
|
}
|
|
|
|
/* Dark mode - ClickHouse yellow background */
|
|
html.dark .dark\:bg-primary-light,
|
|
.dark\:bg-primary-light:is(.dark *) {
|
|
--tw-bg-opacity: 1 !important;
|
|
background-color: #FDFF75 !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ============================================
|
|
Card styling (Light & Dark Mode)
|
|
============================================ */
|
|
|
|
/* Card background - match pagination cards */
|
|
.card {
|
|
background-color: #f7f7f7 !important;
|
|
}
|
|
|
|
/* Featured Cloud card on the installation page. */
|
|
.ch-install-cloud-card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 2.25rem 1rem 1rem;
|
|
border: 1px solid #e6e7e9;
|
|
border-radius: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
background-color: #f7f7f7;
|
|
text-align: center;
|
|
}
|
|
|
|
.ch-install-cloud-badge {
|
|
display: inline-flex;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
align-items: center;
|
|
padding: 0.125rem 0.625rem;
|
|
transform: translate(-50%, -50%);
|
|
border: 1px solid #e6e7e9;
|
|
border-radius: 9999px;
|
|
background-color: #f5f5f5;
|
|
color: #151515;
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
line-height: 1rem;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ch-install-cloud-icon {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
background-color: #1c1c1c;
|
|
-webkit-mask: url('/images/icons/icon-clickhouse-cloud.svg') center / contain no-repeat;
|
|
mask: url('/images/icons/icon-clickhouse-cloud.svg') center / contain no-repeat;
|
|
}
|
|
|
|
.ch-install-cloud-title {
|
|
margin: 0.75rem 0 0.625rem;
|
|
color: #1c1c1c;
|
|
font-size: 1rem;
|
|
font-weight: 650;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
.ch-install-cloud-description {
|
|
max-width: 44rem;
|
|
margin: 0;
|
|
color: #42454a;
|
|
font-size: 0.875rem;
|
|
line-height: 1.375rem;
|
|
}
|
|
|
|
.ch-install-cloud-actions {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.75rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.ch-install-cloud-cta {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid #151515;
|
|
border-radius: 0.25rem;
|
|
background-color: #151515;
|
|
color: #ffffff !important;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
line-height: 1.125rem;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.ch-install-cloud-cta:hover {
|
|
background-color: #151515;
|
|
}
|
|
|
|
.ch-install-cloud-cta-secondary {
|
|
border-color: #151515;
|
|
background-color: #f7f7f7;
|
|
color: #151515 !important;
|
|
}
|
|
|
|
.ch-install-cloud-cta-secondary:hover {
|
|
border-color: #151515;
|
|
background-color: #ececec;
|
|
}
|
|
|
|
html:not(.dark) .prose .ch-install-cloud-card a.ch-install-cloud-cta,
|
|
html:not(.dark) .prose .ch-install-cloud-card a.ch-install-cloud-cta:hover {
|
|
border: 1px solid #151515 !important;
|
|
color: #ffffff !important;
|
|
font-weight: 600 !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
html:not(.dark) .prose .ch-install-cloud-card a.ch-install-cloud-cta-secondary,
|
|
html:not(.dark) .prose .ch-install-cloud-card a.ch-install-cloud-cta-secondary:hover {
|
|
border: 1px solid #151515 !important;
|
|
border-bottom: 1px solid #151515 !important;
|
|
color: #151515 !important;
|
|
}
|
|
|
|
html:not(.dark) body .prose .ch-install-cloud-card .ch-install-cloud-actions a.ch-install-cloud-cta,
|
|
html:not(.dark) body .prose .ch-install-cloud-card .ch-install-cloud-actions a.ch-install-cloud-cta:hover {
|
|
border: 1px solid #151515 !important;
|
|
border-bottom: 1px solid #151515 !important;
|
|
color: #ffffff !important;
|
|
font-weight: 600 !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
html:not(.dark) body .prose .ch-install-cloud-card .ch-install-cloud-actions a.ch-install-cloud-cta-secondary,
|
|
html:not(.dark) body .prose .ch-install-cloud-card .ch-install-cloud-actions a.ch-install-cloud-cta-secondary:hover {
|
|
border: 1px solid #151515 !important;
|
|
border-bottom: 1px solid #151515 !important;
|
|
color: #151515 !important;
|
|
}
|
|
|
|
.ch-install-cloud-cta:focus-visible {
|
|
outline: 2px solid #2563eb;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.dark .ch-install-cloud-card {
|
|
border-color: #7f813d;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.dark .ch-install-cloud-badge {
|
|
border-color: #7f813d;
|
|
background-color: #1b1b1b;
|
|
color: #fdff75;
|
|
}
|
|
|
|
.dark .ch-install-cloud-icon {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.dark .ch-install-cloud-title {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dark .ch-install-cloud-description {
|
|
color: #b7bac0;
|
|
}
|
|
|
|
.dark .ch-install-cloud-cta {
|
|
border-color: #fdff75;
|
|
background-color: #fdff75;
|
|
color: #1c1c1c !important;
|
|
}
|
|
|
|
.dark .ch-install-cloud-cta:hover {
|
|
background-color: #eaec6a;
|
|
}
|
|
|
|
.dark .ch-install-cloud-cta-secondary {
|
|
border-color: #555800;
|
|
background-color: #151515;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.dark .ch-install-cloud-cta-secondary:hover {
|
|
border-color: #7f8300;
|
|
background-color: #1c1c1c;
|
|
}
|
|
|
|
html.dark .prose .ch-install-cloud-card a.ch-install-cloud-cta,
|
|
html.dark .prose .ch-install-cloud-card a.ch-install-cloud-cta:hover {
|
|
border: 1px solid #fdff75 !important;
|
|
color: #1c1c1c !important;
|
|
font-weight: 600 !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
html.dark .prose .ch-install-cloud-card a.ch-install-cloud-cta-secondary,
|
|
html.dark .prose .ch-install-cloud-card a.ch-install-cloud-cta-secondary:hover {
|
|
border: 1px solid #555800 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
html.dark .prose .ch-install-cloud-card a.ch-install-cloud-cta-secondary:hover {
|
|
border-color: #7f8300 !important;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.ch-install-cloud-actions {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.dark .card,
|
|
:is(.dark) .card {
|
|
border-color: rgba(255, 255, 255, 0.15) !important;
|
|
background-color: rgba(255, 255, 255, 0.05) !important;
|
|
}
|
|
|
|
/* Light mode: darken border on hover, no background change */
|
|
html:not(.dark) .card:hover {
|
|
background-color: #f7f7f7 !important;
|
|
border-color: #9ca3af !important;
|
|
}
|
|
|
|
/* Override card hover border color in dark mode */
|
|
.dark .card:hover,
|
|
:is(.dark) .card:hover {
|
|
border-color: #fdff75 !important;
|
|
background-color: rgba(255, 255, 255, 0.08) !important;
|
|
}
|
|
|
|
/* Navbar link styling */
|
|
.navbar-link {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Search bar styling */
|
|
#search-bar-entry {
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
/* Hide the dropdown chevron on sidebar nav groups whose docs.json entry
|
|
has no children (`pages: []` + `root`).
|
|
|
|
Mintlify removes the child <ul> entirely both when a group is configured
|
|
with no pages AND when a populated group is collapsed by the user — so
|
|
purely-structural CSS can't tell those two cases apart. List the empty
|
|
groups by their stable id (the root path Mintlify writes onto the <li>)
|
|
instead. Add new entries here when a `pages: []` + `root` group is
|
|
added to docs.json. */
|
|
li[data-title][id="/integrations/language-clients"] > button svg.transition-transform,
|
|
li[data-title][id="/integrations/language-clients/js"] > button svg.transition-transform,
|
|
li[data-title][id="/integrations/language-clients/csharp/overview"] > button svg.transition-transform,
|
|
li[data-title][id="/integrations/language-clients/rust"] > button svg.transition-transform,
|
|
li[data-title][id="/integrations/language-clients/cpp"] > button svg.transition-transform,
|
|
li[data-title][id="/integrations/language-clients/c"] > button svg.transition-transform{
|
|
display: none !important;
|
|
}
|
|
|
|
/* Light mode: the Ask AI button ships with a blue ring (rgba(147,197,253,0.5),
|
|
≈ Tailwind blue-300/50) that clashes with the search bar's grey ring. Match
|
|
the search bar's ring color so the two controls look like a set. */
|
|
html:not(.dark) #ch-ask-ai-btn,
|
|
html:not(.dark) #home-assistant-entry {
|
|
--tw-ring-color: rgba(159, 159, 159, 0.3) !important;
|
|
--tw-ring-shadow: 0 0 0 1px rgba(159, 159, 159, 0.3) !important;
|
|
}
|
|
html:not(.dark) #ch-ask-ai-btn:hover,
|
|
html:not(.dark) #home-assistant-entry:hover {
|
|
--tw-ring-color: rgba(75, 85, 99, 0.3) !important;
|
|
--tw-ring-shadow: 0 0 0 1px rgba(75, 85, 99, 0.3) !important;
|
|
}
|
|
|
|
/* Suppress the default browser focus outline on the search and Ask AI
|
|
buttons, but keep the resting ring/border in place so the controls don't
|
|
visually disappear when focused. */
|
|
#search-bar-entry:focus,
|
|
#search-bar-entry:focus-visible,
|
|
#ch-ask-ai-btn:focus,
|
|
#ch-ask-ai-btn:focus-visible {
|
|
outline: none !important;
|
|
}
|
|
|
|
/* Homepage controls retain a clear keyboard focus indicator. */
|
|
#home-search-entry:focus-visible,
|
|
#home-assistant-entry:focus-visible {
|
|
outline: 2px solid rgb(59, 130, 246) !important;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Dark-mode contrast bump for the navbar controls (search, Ask AI, theme
|
|
toggle). Mintlify's defaults sit at ~brightness 1.1 of the page bg, which
|
|
on our #1D1D1D background reads as nearly invisible. Lift the surface,
|
|
strengthen the ring, and brighten the foreground so the controls are
|
|
clearly findable. */
|
|
.dark #search-bar-entry,
|
|
:is(.dark) #search-bar-entry,
|
|
.dark #home-search-entry,
|
|
:is(.dark) #home-search-entry,
|
|
.dark #ch-ask-ai-btn,
|
|
:is(.dark) #ch-ask-ai-btn,
|
|
.dark #home-assistant-entry,
|
|
:is(.dark) #home-assistant-entry {
|
|
background-color: rgba(255, 255, 255, 0.06) !important;
|
|
/* Replace Tailwind's box-shadow ring with a real border so it renders
|
|
like the Copy page button. Also clear the brightness filter so the
|
|
border doesn't get washed out against the brightened bg. */
|
|
--tw-ring-shadow: 0 0 0 0 transparent !important;
|
|
box-shadow: none !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.07) !important;
|
|
filter: none !important;
|
|
color: rgb(206, 206, 206) !important;
|
|
}
|
|
|
|
.dark #search-bar-entry:hover,
|
|
:is(.dark) #search-bar-entry:hover,
|
|
.dark #home-search-entry:hover,
|
|
:is(.dark) #home-search-entry:hover,
|
|
.dark #ch-ask-ai-btn:hover,
|
|
:is(.dark) #ch-ask-ai-btn:hover,
|
|
.dark #home-assistant-entry:hover,
|
|
:is(.dark) #home-assistant-entry:hover {
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
border-color: rgba(255, 255, 255, 0.14) !important;
|
|
filter: none !important;
|
|
}
|
|
|
|
/* Search placeholder text and shortcut hint */
|
|
.dark #search-bar-entry,
|
|
.dark #search-bar-entry *,
|
|
:is(.dark) #search-bar-entry,
|
|
:is(.dark) #search-bar-entry *,
|
|
.dark #home-search-entry,
|
|
.dark #home-search-entry *,
|
|
:is(.dark) #home-search-entry,
|
|
:is(.dark) #home-search-entry * {
|
|
color: rgb(206, 206, 206) !important;
|
|
}
|
|
|
|
/* Ask AI icon */
|
|
.dark #ch-ask-ai-btn svg,
|
|
:is(.dark) #ch-ask-ai-btn svg,
|
|
.dark #home-assistant-entry svg,
|
|
:is(.dark) #home-assistant-entry svg {
|
|
color: #fdff75 !important;
|
|
}
|
|
|
|
/* Theme toggle (Toggle dark mode pill) */
|
|
.dark button[aria-label="Toggle dark mode"],
|
|
:is(.dark) button[aria-label="Toggle dark mode"] {
|
|
background-color: rgba(255, 255, 255, 0.06) !important;
|
|
border-color: rgba(255, 255, 255, 0.07) !important;
|
|
color: rgb(206, 206, 206) !important;
|
|
}
|
|
|
|
.dark button[aria-label="Toggle dark mode"]:hover,
|
|
:is(.dark) button[aria-label="Toggle dark mode"]:hover {
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
border-color: rgba(255, 255, 255, 0.14) !important;
|
|
}
|
|
|
|
.dark button[aria-label="Toggle dark mode"] svg,
|
|
:is(.dark) button[aria-label="Toggle dark mode"] svg {
|
|
color: rgb(206, 206, 206) !important;
|
|
stroke: rgb(206, 206, 206) !important;
|
|
}
|
|
|
|
/* Page context menu styling */
|
|
#page-context-menu .rounded-l-xl {
|
|
border-top-left-radius: 4px !important;
|
|
border-bottom-left-radius: 4px !important;
|
|
}
|
|
|
|
#page-context-menu .rounded-r-xl {
|
|
border-top-right-radius: 4px !important;
|
|
border-bottom-right-radius: 4px !important;
|
|
}
|
|
|
|
/* Sidebar navigation links and buttons styling */
|
|
a.rounded-xl,
|
|
button.rounded-xl {
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
/* Match navigation division dropdowns to the sidebar's 4px radius. Mintlify
|
|
uses an arbitrary radius on the trigger and `rounded-2xl` on the menu, so
|
|
neither is covered by the shared `rounded-xl` override above. */
|
|
.nav-dropdown-trigger,
|
|
.nav-dropdown-content {
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
/* Override topbar CTA button styling */
|
|
|
|
#topbar-cta-button {
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
/* Dark mode - #fdff75 background and black text */
|
|
.dark #topbar-cta-button .bg-primary-dark {
|
|
background-color: #fdff75 !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
.dark #topbar-cta-button span,
|
|
.dark #topbar-cta-button svg {
|
|
color: black !important;
|
|
}
|
|
|
|
/* Light mode - #323232 background and white text */
|
|
#topbar-cta-button .bg-primary-dark {
|
|
background-color: #323232 !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
#topbar-cta-button span,
|
|
#topbar-cta-button svg {
|
|
color: white !important;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
Page Title Alignment
|
|
============================================ */
|
|
|
|
/* Page title full-width, context menu on a separate row below */
|
|
#page-title {
|
|
text-align: left !important;
|
|
}
|
|
|
|
:has(> #page-title) {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
align-items: flex-start !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
:has(> #page-title)>#page-title {
|
|
width: 100% !important;
|
|
}
|
|
|
|
:has(> #page-title)>#page-context-menu {
|
|
margin-left: 0 !important;
|
|
margin-top: 8px !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
ClickPipes Page Styling
|
|
============================================ */
|
|
|
|
/* Dark mode image swap for ClickPipes icons */
|
|
:is(.dark) .product-item img[src*="clickpipes-light.svg"] {
|
|
content: url("https://ch-docs-product-selector.s3.eu-central-1.amazonaws.com/clickpipes-dark.svg") !important;
|
|
}
|
|
|
|
/* Kafka nav-group icon is a solid black SVG (fill:#000); invert it to white in
|
|
dark mode so it doesn't disappear against the dark sidebar. Single asset, no
|
|
light/dark swap. */
|
|
.dark #sidebar img[src$="/images/integrations/logos/kafka.svg"] {
|
|
filter: invert(1);
|
|
}
|
|
|
|
/* ============================================
|
|
Menu icon color — cross-browser + site-theme
|
|
============================================ */
|
|
|
|
/* The grey line/fill icons in the navbar dropdowns and cards
|
|
(images/icons/icon-*.svg) set their own colour with an
|
|
`@media (prefers-color-scheme: dark)` block INSIDE the SVG (light rgb(80,80,80)
|
|
-> dark rgb(200,200,200)). Rendered as <img>, that has two bugs: it follows
|
|
the OS appearance rather than the site's theme toggle, and WebKit honours the
|
|
query for <img>-loaded SVGs while Blink ignores it — so the same icon paints a
|
|
different grey in Safari vs Chrome. Force a deterministic grey keyed to the
|
|
SITE theme instead: brightness(0) collapses whatever colour the SVG picked to
|
|
black, then invert() sets an exact grey — identical in every browser. The four
|
|
colourful brand icons (clickhouse, cloud-oss, language-picker, mcp) are not
|
|
part of this grey family and are excluded. */
|
|
img[src*="/images/icons/icon-"]:not([src*="icon-clickhouse.svg"]):not([src*="icon-cloud-oss.svg"]):not([src*="icon-language-picker.svg"]):not([src*="icon-mcp.svg"]) {
|
|
filter: brightness(0) invert(0.31); /* rgb(79,79,79) — matches the SVGs' light value */
|
|
}
|
|
.dark img[src*="/images/icons/icon-"]:not([src*="icon-clickhouse.svg"]):not([src*="icon-cloud-oss.svg"]):not([src*="icon-language-picker.svg"]):not([src*="icon-mcp.svg"]),
|
|
:is(.dark) img[src*="/images/icons/icon-"]:not([src*="icon-clickhouse.svg"]):not([src*="icon-cloud-oss.svg"]):not([src*="icon-language-picker.svg"]):not([src*="icon-mcp.svg"]) {
|
|
filter: brightness(0) invert(0.78); /* rgb(199,199,199) — matches the SVGs' dark value */
|
|
}
|
|
|
|
/* ClickPipes categories grid - 4 columns on desktop, 2 on mobile */
|
|
.clickpipes-categories {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.clickpipes-categories {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.clickpipes-categories {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
ClickPipes Home Page Specific Styling
|
|
============================================ */
|
|
|
|
/* Narrower hero-aside on clickpipes_home page */
|
|
[data-page="clickpipes_home"] .hero-aside,
|
|
body.clickpipes_home .hero-aside {
|
|
flex: 0 0 50% !important;
|
|
max-width: 50% !important;
|
|
}
|
|
|
|
/* Adjust hero-text width to balance the layout */
|
|
[data-page="clickpipes_home"] .hero-text,
|
|
body.clickpipes_home .hero-text {
|
|
flex: 0 0 50% !important;
|
|
max-width: 50% !important;
|
|
}
|
|
|
|
/* Dark mode - white body text for document content */
|
|
.dark .prose,
|
|
.dark .prose,
|
|
:is(.dark) .prose,
|
|
.dark .prose p,
|
|
.dark .prose p,
|
|
:is(.dark) .prose p,
|
|
.dark .prose li,
|
|
.dark .prose li,
|
|
:is(.dark) .prose li,
|
|
.dark .prose td,
|
|
.dark .prose td,
|
|
:is(.dark) .prose td,
|
|
.dark .prose th,
|
|
.dark .prose th,
|
|
:is(.dark) .prose th {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Prose links: colored without underline by default, underline appears on hover.
|
|
Light: #135be6 blue. Dark: ClickHouse yellow #FAFF69. */
|
|
html:not(.dark) .prose a:not(.card):not(.card *) {
|
|
color: #135be6 !important;
|
|
border-bottom: none !important;
|
|
text-decoration: none !important;
|
|
font-weight: normal !important;
|
|
}
|
|
html:not(.dark) .prose a:not(.card):not(.card *):hover {
|
|
color: #135be6 !important;
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
.dark .prose a:not(.card):not(.card *),
|
|
:is(.dark) .prose a:not(.card):not(.card *) {
|
|
color: #FAFF69 !important;
|
|
border-bottom: none !important;
|
|
text-decoration: none !important;
|
|
font-weight: normal !important;
|
|
}
|
|
.dark .prose a:not(.card):not(.card *):hover,
|
|
:is(.dark) .prose a:not(.card):not(.card *):hover {
|
|
color: #FAFF69 !important;
|
|
text-decoration: underline !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Override yellow links for product selector items */
|
|
.dark .product-selector-radio-group a,
|
|
.dark [role="radiogroup"] a,
|
|
.dark .nav-dropdown-products-selector-content a,
|
|
.dark .product-selector-radio-group a,
|
|
.dark [role="radiogroup"] a,
|
|
.dark .nav-dropdown-products-selector-content a,
|
|
:is(.dark) .product-selector-radio-group a,
|
|
:is(.dark) [role="radiogroup"] a,
|
|
:is(.dark) .nav-dropdown-products-selector-content a {
|
|
color: inherit !important;
|
|
}
|
|
|
|
/* Prevent dropdown menu icons from turning yellow on hover */
|
|
.dark .product-selector-radio-group a svg,
|
|
.dark [role="radiogroup"] a svg,
|
|
.dark .nav-dropdown-products-selector-content a svg,
|
|
.dark .nav-dropdown-products-selector-item svg,
|
|
.dark .product-selector-radio-group a svg,
|
|
.dark [role="radiogroup"] a svg,
|
|
.dark .nav-dropdown-products-selector-content a svg,
|
|
.dark .nav-dropdown-products-selector-item svg,
|
|
:is(.dark) .product-selector-radio-group a svg,
|
|
:is(.dark) [role="radiogroup"] a svg,
|
|
:is(.dark) .nav-dropdown-products-selector-content a svg,
|
|
:is(.dark) .nav-dropdown-products-selector-item svg,
|
|
.dark .product-selector-radio-group a:hover svg,
|
|
.dark [role="radiogroup"] a:hover svg,
|
|
.dark .nav-dropdown-products-selector-content a:hover svg,
|
|
.dark .nav-dropdown-products-selector-item:hover svg,
|
|
.dark .product-selector-radio-group a:hover svg,
|
|
.dark [role="radiogroup"] a:hover svg,
|
|
.dark .nav-dropdown-products-selector-content a:hover svg,
|
|
.dark .nav-dropdown-products-selector-item:hover svg,
|
|
:is(.dark) .product-selector-radio-group a:hover svg,
|
|
:is(.dark) [role="radiogroup"] a:hover svg,
|
|
:is(.dark) .nav-dropdown-products-selector-content a:hover svg,
|
|
:is(.dark) .nav-dropdown-products-selector-item:hover svg {
|
|
color: currentColor !important;
|
|
}
|
|
|
|
/* Also prevent the ::before pseudo-elements (product icons) from turning yellow */
|
|
.dark .nav-dropdown-products-selector-item::before,
|
|
.dark .nav-dropdown-products-selector-item::before,
|
|
:is(.dark) .nav-dropdown-products-selector-item::before,
|
|
.dark .nav-dropdown-products-selector-item:hover::before,
|
|
.dark .nav-dropdown-products-selector-item:hover::before,
|
|
:is(.dark) .nav-dropdown-products-selector-item:hover::before {
|
|
color: inherit !important;
|
|
}
|
|
|
|
|
|
/* Beta Badge */
|
|
.betaBadge {
|
|
background-color: #DBEAFE;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 12px;
|
|
color: #1D4ED8;
|
|
display: inline-flex;
|
|
margin-right: 5px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.betaBadge::before {
|
|
content: "β";
|
|
flex: 0 0 auto;
|
|
margin-right: 8px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
}
|
|
|
|
html:not(.dark) .prose a.betaBadge:not(.card):not(.card *),
|
|
a.betaBadge {
|
|
color: #1D4ED8 !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.dark .betaBadge {
|
|
background-color: #1E3A6B;
|
|
color: #93C5FD;
|
|
}
|
|
|
|
html.dark .prose a.betaBadge:not(.card):not(.card *),
|
|
.dark a.betaBadge {
|
|
color: #93C5FD !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
/* ClickHouse Supported Badge */
|
|
.ClickHouseSupportedBadge {
|
|
background-color: #faff69;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 12px;
|
|
color: #161517;
|
|
display: inline-flex;
|
|
margin-right: 5px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.ClickHouseSupportedIcon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.ClickHouseSupportedIcon svg path {
|
|
fill: #282828;
|
|
}
|
|
|
|
.ClickHouseSupportedBadge a {
|
|
color: black;
|
|
}
|
|
|
|
.dark .ClickHouseSupportedBadge {
|
|
background-color: #faff69;
|
|
color: #161517;
|
|
}
|
|
|
|
.dark .ClickHouseSupportedBadge a {
|
|
color: #161517;
|
|
}
|
|
|
|
.dark .ClickHouseSupportedIcon svg path {
|
|
fill: #161517;
|
|
}
|
|
|
|
/* Cloud Not Supported Badge */
|
|
.cloudNotSupportedBadge {
|
|
background-color: #F6E5FF;
|
|
color: #660099;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 12px;
|
|
display: inline-flex;
|
|
margin-right: 5px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.cloudNotSupportedIcon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
html:not(.dark) .prose a.cloudNotSupportedBadge:not(.card):not(.card *),
|
|
a.cloudNotSupportedBadge {
|
|
color: #660099 !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.cloudNotSupportedIcon svg path {
|
|
stroke: #660099;
|
|
}
|
|
|
|
.dark .cloudNotSupportedBadge {
|
|
background-color: #33004D;
|
|
color: #EECCFF;
|
|
}
|
|
|
|
html.dark .prose a.cloudNotSupportedBadge:not(.card):not(.card *),
|
|
.dark a.cloudNotSupportedBadge {
|
|
color: #EECCFF !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.dark .cloudNotSupportedIcon svg path {
|
|
stroke: #EECCFF;
|
|
}
|
|
|
|
/* Cloud Only Badge */
|
|
.cloudBadge {
|
|
background-color: #DAE6FC;
|
|
color: #061D48;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 12px;
|
|
display: inline-flex;
|
|
margin-right: 5px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.dark .cloudBadge {
|
|
background-color: #061D48;
|
|
color: #DAE6FC;
|
|
}
|
|
|
|
.cloudIcon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.cloudIcon svg path {
|
|
stroke: #061D48;
|
|
}
|
|
|
|
.dark .cloudIcon svg path {
|
|
stroke: #DAE6FC;
|
|
}
|
|
|
|
/* Community Maintained Badge */
|
|
.CommunityMaintainedBadge {
|
|
background-color: #69afff;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 12px;
|
|
color: #ffffff;
|
|
display: inline-flex;
|
|
margin-right: 5px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.CommunityMaintainedIcon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.CommunityMaintainedIcon svg path {
|
|
fill: #ffffff;
|
|
stroke: none;
|
|
}
|
|
|
|
.CommunityMaintainedBadge a {
|
|
color: #69afff;
|
|
}
|
|
|
|
.CommunityMaintainedBadge svg path {
|
|
color: #69afff;
|
|
}
|
|
|
|
.dark .CommunityMaintainedBadge {
|
|
background-color: #69afff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dark .CommunityMaintainedBadge a {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dark .CommunityMaintainedIcon svg path {
|
|
fill: #ffffff;
|
|
stroke: none;
|
|
}
|
|
|
|
/* Deprecated Badge */
|
|
.deprecatedBadge {
|
|
background-color: #DFDFDF;
|
|
color: #53575F;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 12px;
|
|
display: inline-flex;
|
|
margin-right: 5px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.deprecatedIcon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.deprecatedBadge a {
|
|
color: inherit;
|
|
}
|
|
|
|
.dark .deprecatedBadge {
|
|
background-color: #414141;
|
|
color: #E6E7E9;
|
|
}
|
|
|
|
.dark .deprecatedBadge a {
|
|
color: inherit;
|
|
}
|
|
|
|
.deprecatedIcon svg path {
|
|
stroke: #53575F;
|
|
}
|
|
|
|
.dark .deprecatedIcon svg path {
|
|
stroke: #E6E7E9;
|
|
}
|
|
|
|
/* Enterprise Plan Feature Badge */
|
|
.enterprisePlanFeatureContainer {
|
|
background-color: #F6F7FA;
|
|
border-radius: 4px;
|
|
border: 1px solid #E6E7E9;
|
|
padding: 12px 16px;
|
|
margin-bottom: 8px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.enterprisePlanFeatureContainer p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.enterprisePlanFeatureBadge {
|
|
background-color: #008A0B;
|
|
border-style: solid;
|
|
border: 1px;
|
|
border-color: #437EEF;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #FFFFFF;
|
|
display: inline-flex;
|
|
padding: 2px 12px;
|
|
margin-bottom: 8px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.dark .enterprisePlanFeatureContainer {
|
|
background-color: #1F1F1C;
|
|
border: 1px solid #414141;
|
|
}
|
|
|
|
.dark .enterprisePlanFeatureBadge {
|
|
background-color: #99FFA1;
|
|
color: #1F1F1C;
|
|
}
|
|
|
|
/* Experimental Badge */
|
|
.experimentalBadge {
|
|
background-color: #F3E8FF;
|
|
border-radius: 16px;
|
|
color: #6D28D9;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 12px;
|
|
display: inline-flex;
|
|
margin-right: 5px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.experimentalIcon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
html:not(.dark) .prose a.experimentalBadge:not(.card):not(.card *),
|
|
a.experimentalBadge {
|
|
color: #6D28D9 !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.dark .experimentalBadge {
|
|
background-color: #3B1D6B;
|
|
color: #D8B4FE;
|
|
}
|
|
|
|
html.dark .prose a.experimentalBadge:not(.card):not(.card *),
|
|
.dark a.experimentalBadge {
|
|
color: #D8B4FE !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.experimentalIcon svg path {
|
|
stroke: #6D28D9;
|
|
}
|
|
|
|
.dark .experimentalIcon svg path {
|
|
stroke: #D8B4FE;
|
|
}
|
|
|
|
/* Partner Badge */
|
|
.PartnerBadge {
|
|
background-color: #990073;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 12px;
|
|
color: #ffffff;
|
|
display: inline-flex;
|
|
margin-right: 5px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.PartnerBadgeIcon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.PartnerBadgeIcon svg path {
|
|
fill: #fbc9ef;
|
|
stroke: #990073;
|
|
}
|
|
|
|
.PartnerBadge a {
|
|
color: #990073;
|
|
}
|
|
|
|
.PartnerBadge svg path {
|
|
color: #990073;
|
|
}
|
|
|
|
.dark .PartnerBadge {
|
|
background-color: #990073;
|
|
color: #fbeff8;
|
|
}
|
|
|
|
.dark .PartnerBadge a {
|
|
color: #fbeff8;
|
|
}
|
|
|
|
.dark .PartnerBadgeIcon svg path {
|
|
fill: #990073;
|
|
stroke: #fbeff8;
|
|
}
|
|
|
|
/* Private Preview Badge */
|
|
.privatePreviewBadge {
|
|
background-color: #FEF3C7;
|
|
color: #B45309;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 12px;
|
|
display: inline-flex;
|
|
margin-right: 5px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.dark .privatePreviewBadge {
|
|
background-color: #4B3410;
|
|
color: #FCD34D;
|
|
}
|
|
|
|
.privatePreviewIcon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.privatePreviewIcon svg path {
|
|
stroke: #B45309;
|
|
}
|
|
|
|
.dark .privatePreviewIcon svg path {
|
|
stroke: #FCD34D;
|
|
}
|
|
|
|
/* Public Preview Badge */
|
|
.publicPreviewBadge {
|
|
background-color: #DBEAFE;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 12px;
|
|
color: #1D4ED8;
|
|
display: inline-flex;
|
|
margin-right: 5px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.dark .publicPreviewBadge {
|
|
background-color: #1E3A6B;
|
|
color: #93C5FD;
|
|
}
|
|
|
|
/* Scale Plan Feature Badge */
|
|
.scalePlanFeatureContainer {
|
|
background-color: #F6F7FA;
|
|
border-radius: 4px;
|
|
border: 1px solid #E6E7E9;
|
|
padding: 12px 16px;
|
|
margin-bottom: 8px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.scalePlanFeatureContainer p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.scalePlanFeatureBadge {
|
|
background-color: #1D64EC;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #FFFFFF;
|
|
display: inline-flex;
|
|
padding: 2px 12px;
|
|
margin-bottom: 8px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.dark .scalePlanFeatureContainer {
|
|
background-color: #1F1F1C;
|
|
border: 1px solid #414141;
|
|
}
|
|
|
|
.dark .scalePlanFeatureBadge {
|
|
background-color: #1D64EC;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* ============================================
|
|
Fix Table of Contents Overlap
|
|
============================================ */
|
|
|
|
/* Reset negative margin on Table of Contents to prevent overlap with description */
|
|
#table-of-contents {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
/* Keep contextual controls visible below long tables of contents */
|
|
#table-of-contents-content {
|
|
max-height: calc(100vh - 22rem);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.ch-cloud-sidebar-ad-slot {
|
|
display: block;
|
|
flex-basis: 100%;
|
|
width: 100%;
|
|
margin-top: 1rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.ch-cloud-sidebar-ad {
|
|
position: relative;
|
|
padding: 1rem;
|
|
border: 1px solid #dedede;
|
|
border-radius: 0.5rem;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.ch-cloud-sidebar-ad-title {
|
|
padding-right: 1.5rem;
|
|
margin: 0 0 0.5rem;
|
|
color: #1c1c1c;
|
|
font-size: 0.875rem;
|
|
font-weight: 650;
|
|
line-height: 1.25rem;
|
|
}
|
|
|
|
.ch-cloud-sidebar-ad-description {
|
|
margin: 0 0 0.875rem;
|
|
color: #5f6368;
|
|
font-size: 0.75rem;
|
|
line-height: 1.125rem;
|
|
}
|
|
|
|
.ch-cloud-sidebar-ad-dismiss {
|
|
position: absolute;
|
|
top: 0.625rem;
|
|
right: 0.625rem;
|
|
display: inline-flex;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 9999px;
|
|
background: transparent;
|
|
color: #6b7280;
|
|
cursor: pointer;
|
|
font-size: 1.125rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ch-cloud-sidebar-ad-dismiss:hover {
|
|
background-color: rgba(0, 0, 0, 0.06);
|
|
color: #1c1c1c;
|
|
}
|
|
|
|
.ch-cloud-sidebar-ad-dismiss:focus-visible,
|
|
.ch-cloud-sidebar-ad-link:focus-visible {
|
|
outline: 2px solid #2563eb;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.ch-cloud-sidebar-ad-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
background-color: #1c1c1c;
|
|
color: #ffffff !important;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
line-height: 1rem;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.ch-cloud-sidebar-ad-link:hover {
|
|
background-color: #333333;
|
|
}
|
|
|
|
.dark .ch-cloud-sidebar-ad {
|
|
border-color: rgba(255, 255, 255, 0.15);
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.dark .ch-cloud-sidebar-ad-title {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dark .ch-cloud-sidebar-ad-description {
|
|
color: #b7bac0;
|
|
}
|
|
|
|
.dark .ch-cloud-sidebar-ad-dismiss {
|
|
color: #b7bac0;
|
|
}
|
|
|
|
.dark .ch-cloud-sidebar-ad-dismiss:hover {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dark .ch-cloud-sidebar-ad-link {
|
|
background-color: #fdff75;
|
|
color: #1c1c1c !important;
|
|
}
|
|
|
|
.dark .ch-cloud-sidebar-ad-link:hover {
|
|
background-color: #eaec6a;
|
|
}
|
|
|
|
/* Fix layout overlap in flex-row-reverse pages (like secure-rds) */
|
|
@media (min-width: 1280px) {
|
|
.flex.flex-row-reverse>.relative.grow {
|
|
max-width: calc(100% - 20rem) !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Hide System Table Description
|
|
============================================ */
|
|
|
|
/* Hide the system table description element */
|
|
div.mt-2.text-lg.prose.prose-gray:has(p:first-child:only-child) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* More specific targeting if the above hides too much */
|
|
div.mt-2.text-lg.prose.prose-gray.dark\:prose-invert {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Hide Language Flag Icons in Localization Selector
|
|
============================================ */
|
|
|
|
/* Flag icons in localization menu items - visible */
|
|
|
|
/* Flag icon in the localization trigger button - visible */
|
|
|
|
/* Remove left padding since flags are hidden */
|
|
[id^="localization-select-item-"] {
|
|
padding-left: 1rem !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Localization Select Positioning
|
|
============================================ */
|
|
|
|
/* Show localization select in its default sidebar position */
|
|
|
|
/* ============================================
|
|
Navigation Group Headers
|
|
============================================ */
|
|
|
|
/* Product docs header */
|
|
.nav-products::before {
|
|
content: "Product docs";
|
|
display: block;
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: 0.75rem 1rem 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
color: currentColor;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Integrations header */
|
|
.nav-integrations::before {
|
|
content: "Integrations";
|
|
display: block;
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: 0.75rem 1rem 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
color: currentColor;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Resources header */
|
|
.nav-resources::before {
|
|
content: "Resources";
|
|
display: block;
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: 0.75rem 1rem 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
color: currentColor;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ============================================
|
|
Compact Navigation Items in Grouped Columns
|
|
============================================ */
|
|
|
|
/* Make navigation items more compact in the grouped columns */
|
|
.nav-user-intents a,
|
|
.nav-products a,
|
|
.nav-integrations a,
|
|
.nav-resources a {
|
|
display: block !important;
|
|
}
|
|
|
|
.nav-user-intents .nav-dropdown-products-selector-item,
|
|
.nav-products .nav-dropdown-products-selector-item,
|
|
.nav-integrations .nav-dropdown-products-selector-item,
|
|
.nav-resources .nav-dropdown-products-selector-item {
|
|
padding: 0.375rem 0.75rem !important;
|
|
min-height: auto !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
/* Hide descriptions in grouped navigation to save space */
|
|
.nav-user-intents .nav-dropdown-products-selector-item-description,
|
|
.nav-products .nav-dropdown-products-selector-item-description,
|
|
.nav-integrations .nav-dropdown-products-selector-item-description,
|
|
.nav-resources .nav-dropdown-products-selector-item-description,
|
|
.nav-user-intents .nav-dropdown-products-selector-item p:last-child,
|
|
.nav-products .nav-dropdown-products-selector-item p:last-child,
|
|
.nav-integrations .nav-dropdown-products-selector-item p:last-child,
|
|
.nav-resources .nav-dropdown-products-selector-item p:last-child {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Adjust title font size for compact display */
|
|
.nav-user-intents .nav-dropdown-products-selector-item-title,
|
|
.nav-products .nav-dropdown-products-selector-item-title,
|
|
.nav-integrations .nav-dropdown-products-selector-item-title,
|
|
.nav-resources .nav-dropdown-products-selector-item-title {
|
|
font-size: 0.875rem !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Sidebar Title Beta Tag Display
|
|
============================================ */
|
|
|
|
/* Make sidebar title display as inline-flex so Beta tag appears to the right */
|
|
h5#sidebar-title {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
gap: 0.375rem !important;
|
|
}
|
|
|
|
/* Sidebar tag colors by release status. */
|
|
.nav-tag-pill-text[data-nav-tag="Beta"] {
|
|
background-color: #1e3a8a !important;
|
|
color: #93c5fd !important;
|
|
}
|
|
|
|
.nav-tag-pill-text[data-nav-tag="Private preview"],
|
|
.nav-tag-pill-text[data-nav-tag="Preview"] {
|
|
background-color: #FEF3C7 !important;
|
|
color: #B45309 !important;
|
|
}
|
|
|
|
.dark .nav-tag-pill-text[data-nav-tag="Private preview"],
|
|
.dark .nav-tag-pill-text[data-nav-tag="Preview"] {
|
|
background-color: #4B3410 !important;
|
|
color: #FCD34D !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Content Area Width & Padding
|
|
============================================ */
|
|
|
|
/* Widen the content area beyond default max-w-xl (576px) */
|
|
#content-area {
|
|
max-width: 48rem !important;
|
|
/* 768px */
|
|
}
|
|
|
|
/* Custom explorers should use the full available width while the sidebar is
|
|
hidden at intermediate tablet sizes; otherwise the 768px prose cap leaves a
|
|
large unused area on the right. */
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
html[data-page-mode="custom"] #content-area {
|
|
max-width: none !important;
|
|
}
|
|
}
|
|
|
|
/* Reduce outer container padding */
|
|
#content-container {
|
|
border-radius: 15px;
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
#content-container {
|
|
padding-left: 2rem !important;
|
|
padding-right: 2rem !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Homepage: no sidebar
|
|
============================================ */
|
|
|
|
/* Hide the sidebar on the homepage.
|
|
data-current-path is set by Mintlify via a blocking <head> script, so this
|
|
fires before any browser paint — preventing the sidebar flash on load. */
|
|
html[data-current-path="/"] #sidebar,
|
|
html[data-current-path="/ar"] #sidebar,
|
|
html[data-current-path="/es"] #sidebar,
|
|
html[data-current-path="/fr"] #sidebar,
|
|
html[data-current-path="/ja"] #sidebar,
|
|
html[data-current-path="/ko"] #sidebar,
|
|
html[data-current-path="/pt-BR"] #sidebar,
|
|
html[data-current-path="/ru"] #sidebar,
|
|
html[data-current-path="/zh"] #sidebar,
|
|
html.ch-homepage #sidebar {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Navbar: full width when sidebar is hidden */
|
|
html[data-current-path="/"] #navbar-transition-maple,
|
|
html[data-current-path="/ar"] #navbar-transition-maple,
|
|
html[data-current-path="/es"] #navbar-transition-maple,
|
|
html[data-current-path="/fr"] #navbar-transition-maple,
|
|
html[data-current-path="/ja"] #navbar-transition-maple,
|
|
html[data-current-path="/ko"] #navbar-transition-maple,
|
|
html[data-current-path="/pt-BR"] #navbar-transition-maple,
|
|
html[data-current-path="/ru"] #navbar-transition-maple,
|
|
html[data-current-path="/zh"] #navbar-transition-maple,
|
|
html.ch-homepage #navbar-transition-maple {
|
|
width: 100vw !important;
|
|
left: 0 !important;
|
|
margin-left: 0 !important;
|
|
/* Match the navbar's own right padding (3rem) so the logo sits as far
|
|
from the left edge as the right-side controls do from the right. */
|
|
padding-left: 3rem !important;
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
/* Stretch content to use the full viewport on homepage */
|
|
/* #content-area caps the prose column at 768px below the xl breakpoint and
|
|
leaves it left-aligned (xl:min-w-full lifts the cap only at >=1280px). The
|
|
homepage has no prose column — its cards span the full padded width — so
|
|
without this the content sits left with a growing gap on the right between
|
|
~800px and 1280px. */
|
|
html.ch-homepage #content-area {
|
|
max-width: none !important;
|
|
}
|
|
@media (min-width: 1024px) {
|
|
html.ch-homepage #content-container {
|
|
margin-left: 0 !important;
|
|
padding-left: max(2rem, calc((100vw - 1000px) / 2)) !important;
|
|
padding-right: max(2rem, calc((100vw - 1000px) / 2)) !important;
|
|
}
|
|
html.ch-homepage #ch-custom-footer {
|
|
padding-left: max(2rem, calc((100vw - 1000px) / 2)) !important;
|
|
padding-right: max(2rem, calc((100vw - 1000px) / 2)) !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Card corner logos
|
|
============================================ */
|
|
|
|
/* White SVG logos (ch, integration) need inversion in light mode
|
|
so they're visible on the white badge background */
|
|
html:not(.dark) .ch-logo-invert {
|
|
filter: invert(1);
|
|
}
|
|
|
|
/* Landing page (mode: "custom"): match content-page side gutters
|
|
so the homepage's left gap from the sidebar equals the right gap from the viewport. */
|
|
@media (min-width: 1024px) {
|
|
html[data-page-mode="custom"] .mint-max-w-6xl.mint-mx-auto {
|
|
max-width: 1104px !important;
|
|
}
|
|
|
|
/* Footer: left edge aligns with prose/card left edge on every page (both share
|
|
the same formula: 19rem + 32px + auto-margin). The right edge differs:
|
|
on landing it matches the card right edge; on doc pages it spans to the
|
|
content-container's right edge so it covers the TOC column too. */
|
|
#ch-custom-footer {
|
|
padding-left: max(calc(19rem + 2rem), calc((100vw - 19rem - 1104px) / 2 + 19rem)) !important;
|
|
}
|
|
/* :not(.ch-homepage): the homepage hides the sidebar and centers its
|
|
content, so it gets symmetric padding from the html.ch-homepage rule
|
|
above — don't let this sidebar-offset rule override its right edge. */
|
|
html[data-page-mode="custom"]:not(.ch-homepage) #ch-custom-footer {
|
|
padding-right: max(2rem, calc((100vw - 19rem - 1104px) / 2)) !important;
|
|
}
|
|
}
|
|
|
|
/* On wide viewports, give the article more room while keeping it aligned with
|
|
content-side-layout (TOC / API request+response panels). Cap #content-container
|
|
at the exact width of content (960) + gap (32) + side-layout (448) + 32px x 2
|
|
padding = 1504px, and center it. The 1824px breakpoint accommodates the
|
|
sidebar (304), the capped container (1504), and a desktop scrollbar, so the
|
|
layout cannot overflow when it takes effect. The footer mirrors the same
|
|
horizontal range so its edges line up with the content block. */
|
|
@media (min-width: 1824px) {
|
|
html:not([data-page-mode="custom"]) #content-area {
|
|
max-width: 60rem !important;
|
|
}
|
|
|
|
html:not([data-page-mode="custom"]) #content-container {
|
|
max-width: 1504px !important;
|
|
margin-left: max(19rem, calc((100vw - 1504px) / 2)) !important;
|
|
margin-right: auto !important;
|
|
}
|
|
|
|
html:not([data-page-mode="custom"]) #ch-custom-footer {
|
|
padding-left: max(calc(19rem + 2rem), calc((100vw - 1504px) / 2 + 2rem)) !important;
|
|
padding-right: min(calc(100vw - 19rem - 1504px + 2rem), calc((100vw - 1504px) / 2 + 2rem)) !important;
|
|
}
|
|
|
|
html:not([data-page-mode="custom"]) #ch-custom-footer [data-inner] {
|
|
max-width: 1440px !important;
|
|
}
|
|
}
|
|
|
|
/* Reduce inner flex gap and left padding */
|
|
#content-container>.flex.flex-row-reverse {
|
|
gap: 2rem !important;
|
|
padding-left: 1rem !important;
|
|
}
|
|
|
|
.dark #content-container {
|
|
border-top: 1px solid !important;
|
|
border-image: linear-gradient(to right, transparent, rgba(250, 255, 105, 0.5) 50%, transparent) 1 0 0 0 !important;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.dark #content-container {
|
|
margin-top: 15px !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Mark Element Styling
|
|
============================================ */
|
|
|
|
/* Dark mode - yellow text without background */
|
|
.dark mark,
|
|
:is(.dark) mark,
|
|
html.dark mark,
|
|
.dark mark b,
|
|
:is(.dark) mark b,
|
|
html.dark mark b {
|
|
background-color: transparent !important;
|
|
color: #FAFF69 !important;
|
|
}
|
|
|
|
/* Light mode - yellow text without background */
|
|
html:not(.dark) mark,
|
|
html:not(.dark) mark b {
|
|
background-color: transparent !important;
|
|
color: #d4a005 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Navigation Dropdown Item Icon Hover
|
|
============================================ */
|
|
|
|
/* Light mode - remove gray-800 text color from nav tabs (let it inherit naturally) */
|
|
html:not(.dark) .nav-tabs button.text-gray-800>div,
|
|
html:not(.dark) button.nav-tabs-item.text-gray-800>div {
|
|
color: inherit;
|
|
}
|
|
|
|
/* Remove focus outline on nav tabs */
|
|
.nav-tabs-item:focus,
|
|
.nav-tabs button:focus,
|
|
button.nav-tabs-item:focus {
|
|
outline: none !important;
|
|
outline-color: transparent !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Use Case Images - Light Grey Background in Light Mode
|
|
============================================ */
|
|
|
|
/* Target use case images specifically by their filenames */
|
|
html:not(.dark) img[src*="rt-analytics"],
|
|
html:not(.dark) img[src*="observability"],
|
|
html:not(.dark) img[src*="data-warehousing"],
|
|
html:not(.dark) img[src*="machine-learning"] {
|
|
background-color: #d1d5db !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Callout Styling
|
|
============================================ */
|
|
|
|
/* Remove callout borders */
|
|
[data-callout-type] {
|
|
border: none !important;
|
|
}
|
|
|
|
/* Center align callout icon vertically */
|
|
[data-component-part="callout-icon"] {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
align-self: center !important;
|
|
}
|
|
|
|
/* Light Mode Callouts */
|
|
|
|
/* Note (Neutral) */
|
|
html:not(.dark) [data-callout-type="note"] {
|
|
background-color: rgb(41.176% 43.137% 47.451% / 0.1);
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="note"] [data-component-part="callout-content"] {
|
|
color: #53575f !important;
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="note"] [data-component-part="callout-icon"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="note"] [data-component-part="callout-icon"] svg {
|
|
color: lch(36.838 5.2307 266.96 / 0.75);
|
|
}
|
|
|
|
/* Info - Blue */
|
|
html:not(.dark) [data-callout-type="info"] {
|
|
background-color: rgb(26.275% 49.412% 93.725% / 0.1);
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="info"] [data-component-part="callout-content"] {
|
|
color: rgb(83, 87, 95) !important;
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="info"] [data-component-part="callout-icon"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="info"] [data-component-part="callout-icon"] svg {
|
|
color: lch(53.426 64.605 278.98 / 0.75);
|
|
}
|
|
|
|
/* Tip/Success/Check - Green */
|
|
html:not(.dark) [data-callout-type="tip"],
|
|
html:not(.dark) [data-callout-type="success"],
|
|
html:not(.dark) [data-callout-type="check"] {
|
|
background-color: rgb(20% 100% 26.667% / 0.1);
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="tip"] [data-component-part="callout-content"],
|
|
html:not(.dark) [data-callout-type="success"] [data-component-part="callout-content"],
|
|
html:not(.dark) [data-callout-type="check"] [data-component-part="callout-content"] {
|
|
color: #008a0b !important;
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="tip"] [data-component-part="callout-icon"],
|
|
html:not(.dark) [data-callout-type="success"] [data-component-part="callout-icon"],
|
|
html:not(.dark) [data-callout-type="check"] [data-component-part="callout-icon"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="tip"] [data-component-part="callout-icon"] svg,
|
|
html:not(.dark) [data-callout-type="success"] [data-component-part="callout-icon"] svg,
|
|
html:not(.dark) [data-callout-type="check"] [data-component-part="callout-icon"] svg {
|
|
color: lch(49.786 70.246 135.31 / 0.75);
|
|
}
|
|
|
|
/* Warning - Orange */
|
|
html:not(.dark) [data-callout-type="warning"] {
|
|
background-color: rgb(100% 46.667% 16.078% / 0.1);
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="warning"] [data-component-part="callout-content"] {
|
|
color: #a33c00 !important;
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="warning"] [data-component-part="callout-icon"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="warning"] [data-component-part="callout-icon"] svg {
|
|
color: lch(40.227 66.602 51.059 / 0.75);
|
|
}
|
|
|
|
/* Danger/Error - Red */
|
|
html:not(.dark) [data-callout-type="danger"],
|
|
html:not(.dark) [data-callout-type="error"] {
|
|
background-color: rgb(100% 13.725% 13.725% / 0.1);
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="danger"] [data-component-part="callout-content"],
|
|
html:not(.dark) [data-callout-type="error"] [data-component-part="callout-content"] {
|
|
color: #c10000 !important;
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="danger"] [data-component-part="callout-icon"],
|
|
html:not(.dark) [data-callout-type="error"] [data-component-part="callout-icon"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
html:not(.dark) [data-callout-type="danger"] [data-component-part="callout-icon"] svg,
|
|
html:not(.dark) [data-callout-type="error"] [data-component-part="callout-icon"] svg {
|
|
color: lch(41.001 86.638 40.858 / 0.75);
|
|
}
|
|
|
|
/* The Ask-AI sticky-bottom overlay's parent is only 26px tall with
|
|
`overflow-hidden`, so the inner pill's 1px border collapses into a thin
|
|
horizontal line that visually appears as a stray border below the
|
|
Previous/Next pagination pill. Suppress the border on the floating input
|
|
so the artifact disappears; the focus-within border still works. */
|
|
.chat-assistant-floating-input > div > div {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
/* Inline code inside callouts (light mode) - tint to match callout color */
|
|
html:not(.dark) [data-callout-type] [data-component-part="callout-content"] code:not(pre code) {
|
|
background-color: rgba(255, 255, 255, 0.6) !important;
|
|
color: inherit !important;
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* Dark Mode Callouts */
|
|
|
|
/* Note (Neutral) */
|
|
.dark [data-callout-type="note"],
|
|
:is(.dark) [data-callout-type="note"] {
|
|
background-color: rgb(62.745% 62.745% 62.745% / 0.2);
|
|
}
|
|
|
|
.dark [data-callout-type="note"] [data-component-part="callout-content"],
|
|
:is(.dark) [data-callout-type="note"] [data-component-part="callout-content"] {
|
|
color: #c0c0c0 !important;
|
|
}
|
|
|
|
.dark [data-callout-type="note"] [data-component-part="callout-icon"],
|
|
:is(.dark) [data-callout-type="note"] [data-component-part="callout-icon"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.dark [data-callout-type="note"] [data-component-part="callout-icon"] svg,
|
|
:is(.dark) [data-callout-type="note"] [data-component-part="callout-icon"] svg {
|
|
color: lch(77.704 0 none / 0.75);
|
|
}
|
|
|
|
/* Info - Blue */
|
|
.dark [data-callout-type="info"],
|
|
:is(.dark) [data-callout-type="info"] {
|
|
background-color: rgb(26.275% 49.412% 93.725% / 0.2);
|
|
}
|
|
|
|
.dark [data-callout-type="info"] [data-component-part="callout-content"],
|
|
:is(.dark) [data-callout-type="info"] [data-component-part="callout-content"] {
|
|
color: #d0dffb !important;
|
|
}
|
|
|
|
.dark [data-callout-type="info"] [data-component-part="callout-icon"],
|
|
:is(.dark) [data-callout-type="info"] [data-component-part="callout-icon"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.dark [data-callout-type="info"] [data-component-part="callout-icon"] svg,
|
|
:is(.dark) [data-callout-type="info"] [data-component-part="callout-icon"] svg {
|
|
color: lch(88.343 15.514 266.4 / 0.75);
|
|
}
|
|
|
|
/* Tip/Success/Check - Green */
|
|
.dark [data-callout-type="tip"],
|
|
.dark [data-callout-type="success"],
|
|
.dark [data-callout-type="check"],
|
|
:is(.dark) [data-callout-type="tip"],
|
|
:is(.dark) [data-callout-type="success"],
|
|
:is(.dark) [data-callout-type="check"] {
|
|
background-color: rgb(20% 100% 26.667% / 0.2);
|
|
}
|
|
|
|
.dark [data-callout-type="tip"] [data-component-part="callout-content"],
|
|
.dark [data-callout-type="success"] [data-component-part="callout-content"],
|
|
.dark [data-callout-type="check"] [data-component-part="callout-content"],
|
|
:is(.dark) [data-callout-type="tip"] [data-component-part="callout-content"],
|
|
:is(.dark) [data-callout-type="success"] [data-component-part="callout-content"],
|
|
:is(.dark) [data-callout-type="check"] [data-component-part="callout-content"] {
|
|
color: #ccffd0 !important;
|
|
}
|
|
|
|
.dark [data-callout-type="tip"] [data-component-part="callout-icon"],
|
|
.dark [data-callout-type="success"] [data-component-part="callout-icon"],
|
|
.dark [data-callout-type="check"] [data-component-part="callout-icon"],
|
|
:is(.dark) [data-callout-type="tip"] [data-component-part="callout-icon"],
|
|
:is(.dark) [data-callout-type="success"] [data-component-part="callout-icon"],
|
|
:is(.dark) [data-callout-type="check"] [data-component-part="callout-icon"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.dark [data-callout-type="tip"] [data-component-part="callout-icon"] svg,
|
|
.dark [data-callout-type="success"] [data-component-part="callout-icon"] svg,
|
|
.dark [data-callout-type="check"] [data-component-part="callout-icon"] svg,
|
|
:is(.dark) [data-callout-type="tip"] [data-component-part="callout-icon"] svg,
|
|
:is(.dark) [data-callout-type="success"] [data-component-part="callout-icon"] svg,
|
|
:is(.dark) [data-callout-type="check"] [data-component-part="callout-icon"] svg {
|
|
color: lch(95.558 28.893 143.93 / 0.75);
|
|
}
|
|
|
|
/* Warning - Orange */
|
|
.dark [data-callout-type="warning"],
|
|
:is(.dark) [data-callout-type="warning"] {
|
|
background-color: rgb(100% 46.667% 16.078% / 0.2);
|
|
}
|
|
|
|
.dark [data-callout-type="warning"] [data-component-part="callout-content"],
|
|
:is(.dark) [data-callout-type="warning"] [data-component-part="callout-content"] {
|
|
color: #ffb88f !important;
|
|
}
|
|
|
|
.dark [data-callout-type="warning"] [data-component-part="callout-icon"],
|
|
:is(.dark) [data-callout-type="warning"] [data-component-part="callout-icon"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.dark [data-callout-type="warning"] [data-component-part="callout-icon"] svg,
|
|
:is(.dark) [data-callout-type="warning"] [data-component-part="callout-icon"] svg {
|
|
color: lch(80.892 39.042 53.918 / 0.75);
|
|
}
|
|
|
|
/* Danger/Error - Red */
|
|
.dark [data-callout-type="danger"],
|
|
.dark [data-callout-type="error"],
|
|
:is(.dark) [data-callout-type="danger"],
|
|
:is(.dark) [data-callout-type="error"] {
|
|
background-color: rgb(100% 13.725% 13.725% / 0.2);
|
|
}
|
|
|
|
.dark [data-callout-type="danger"] [data-component-part="callout-content"],
|
|
.dark [data-callout-type="error"] [data-component-part="callout-content"],
|
|
:is(.dark) [data-callout-type="danger"] [data-component-part="callout-content"],
|
|
:is(.dark) [data-callout-type="error"] [data-component-part="callout-content"] {
|
|
color: #ffbaba !important;
|
|
}
|
|
|
|
.dark [data-callout-type="danger"] [data-component-part="callout-icon"],
|
|
.dark [data-callout-type="error"] [data-component-part="callout-icon"],
|
|
:is(.dark) [data-callout-type="danger"] [data-component-part="callout-icon"],
|
|
:is(.dark) [data-callout-type="error"] [data-component-part="callout-icon"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.dark [data-callout-type="danger"] [data-component-part="callout-icon"] svg,
|
|
.dark [data-callout-type="error"] [data-component-part="callout-icon"] svg,
|
|
:is(.dark) [data-callout-type="danger"] [data-component-part="callout-icon"] svg,
|
|
:is(.dark) [data-callout-type="error"] [data-component-part="callout-icon"] svg {
|
|
color: lch(82.069 27.695 22.026 / 0.75);
|
|
}
|
|
|
|
/* Keep leading brand/mask icons dark on hover in light mode. The trailing SVG
|
|
on external links is an unboxed arrow and must not receive this background. */
|
|
html:not(.dark) .nav-dropdown-item:hover svg:not(.lucide-arrow-up-right):not(:last-child),
|
|
html:not(.dark) a.nav-dropdown-item:hover svg:not(.lucide-arrow-up-right):not(:last-child) {
|
|
background-color: #1a1a1a !important;
|
|
}
|
|
|
|
/* Make leading brand/mask icons yellow on hover in dark mode */
|
|
.dark .nav-dropdown-item:hover svg:not(.lucide-arrow-up-right):not(:last-child),
|
|
.dark a.nav-dropdown-item:hover svg:not(.lucide-arrow-up-right):not(:last-child),
|
|
:is(.dark) .nav-dropdown-item:hover svg:not(.lucide-arrow-up-right):not(:last-child),
|
|
:is(.dark) a.nav-dropdown-item:hover svg:not(.lucide-arrow-up-right):not(:last-child) {
|
|
background-color: #FAFF69 !important;
|
|
}
|
|
|
|
/* Nudge nav dropdown popper down to clear the navbar */
|
|
div[data-radix-popper-content-wrapper]:has([role="menu"] > .nav-dropdown-item) {
|
|
top: 10px !important;
|
|
}
|
|
|
|
/* Match clickhouse.com/clickhouse navbar dropdown panel radius (8px instead
|
|
of Mintlify's default 16px). Targets the panel that wraps `.nav-dropdown-item`. */
|
|
div[data-radix-popper-content-wrapper]:has([role="menu"] > .nav-dropdown-item) > div:not(.nav-dropdown-content) {
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
/* External link arrow on nav dropdown items: black in light, white in dark */
|
|
.nav-dropdown-item .lucide-arrow-up-right {
|
|
color: #000 !important;
|
|
stroke: #000 !important;
|
|
stroke-width: 3 !important;
|
|
}
|
|
.dark .nav-dropdown-item .lucide-arrow-up-right {
|
|
color: #FAFF69 !important;
|
|
stroke: #FAFF69 !important;
|
|
}
|
|
|
|
/* Hide language-picker flag icons. Some country flags (e.g. Russia) are
|
|
politically sensitive given current geopolitics — language choice is not
|
|
meant to imply national affiliation. We hide the wrapper div (not just
|
|
the img) so the 16x16 placeholder doesn't leave a gap. */
|
|
div:has(> img[src*="cloudfront.net/flags/"]) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Pseudo-section headers in the Products dropdown.
|
|
Mintlify has no built-in section divider, so we add placeholder menu items
|
|
with the `section-header.svg` icon and style them as non-clickable labels. */
|
|
/* Match the section labels in clickhouse.com/clickhouse navbar dropdowns:
|
|
text-sm (14px) bold, sentence case, no letter-spacing tweaks, p-2 padding. */
|
|
.nav-dropdown-item:has(img[src$="section-header.svg"]) {
|
|
pointer-events: none;
|
|
cursor: default;
|
|
padding: 8px !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.4 !important;
|
|
font-weight: 700 !important;
|
|
text-transform: none !important;
|
|
letter-spacing: normal !important;
|
|
color: #111827 !important;
|
|
background: transparent !important;
|
|
}
|
|
.dark .nav-dropdown-item:has(img[src$="section-header.svg"]),
|
|
:is(.dark) .nav-dropdown-item:has(img[src$="section-header.svg"]) {
|
|
color: #ffffff !important;
|
|
background: transparent !important;
|
|
}
|
|
/* Hide the placeholder icon and its hover background */
|
|
.nav-dropdown-item:has(img[src$="section-header.svg"]) img,
|
|
.nav-dropdown-item:has(img[src$="section-header.svg"]) svg {
|
|
display: none !important;
|
|
}
|
|
.nav-dropdown-item:has(img[src$="section-header.svg"]):hover {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Two-column layout for the Solutions dropdown. Browsers don't allow
|
|
`:has()` inside `:has()`, so we gate on "menu contains a section-header
|
|
img" — only Solutions has those, so the targeting is unique. Items before
|
|
the second header land in column 1; the second header and everything
|
|
after it land in column 2. Mirrors `clickhouse.com/clickhouse`. */
|
|
[role="menu"]:has(.nav-dropdown-item img[src$="section-header.svg"]) {
|
|
display: grid !important;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: 8px;
|
|
align-content: start;
|
|
grid-auto-flow: dense;
|
|
min-width: 440px;
|
|
/* Vertical separator between columns. The gradient + 50% positioning
|
|
paints a single 1px line down the middle of the gap. */
|
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
|
|
background-size: 1px calc(100% - 24px);
|
|
background-position: 50% 12px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.dark [role="menu"]:has(.nav-dropdown-item img[src$="section-header.svg"]),
|
|
:is(.dark) [role="menu"]:has(.nav-dropdown-item img[src$="section-header.svg"]) {
|
|
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
|
|
}
|
|
[role="menu"]:has(.nav-dropdown-item img[src$="section-header.svg"]) > .nav-dropdown-item {
|
|
grid-column: 2;
|
|
}
|
|
[role="menu"]:has(.nav-dropdown-item img[src$="section-header.svg"]) > .nav-dropdown-item:has(~ .nav-dropdown-item img[src$="section-header.svg"]) {
|
|
grid-column: 1;
|
|
}
|
|
/* Pin the second header (the one with no following header sibling) to row 1
|
|
so column 2 starts at the top of the panel instead of below column 1. */
|
|
[role="menu"]:has(.nav-dropdown-item img[src$="section-header.svg"]) > .nav-dropdown-item:has(img[src$="section-header.svg"]):not(:has(~ .nav-dropdown-item img[src$="section-header.svg"])) {
|
|
grid-row: 1;
|
|
}
|
|
|
|
/* Horizontal separator in the Integrations top-nav dropdown, between the
|
|
"Ecosystem" entry and the section entries (ClickPipes / Language clients /
|
|
Connectors) below it. Mintlify has no built-in divider, so we add a bottom
|
|
border to the first item. The menu is identified uniquely by the connectors
|
|
icon it contains (only the Integrations dropdown has it). */
|
|
[role="menu"]:has(.nav-dropdown-item img[src$="icon-connectors.svg"]) > .nav-dropdown-item:first-child {
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
padding-bottom: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.dark [role="menu"]:has(.nav-dropdown-item img[src$="icon-connectors.svg"]) > .nav-dropdown-item:first-child,
|
|
:is(.dark) [role="menu"]:has(.nav-dropdown-item img[src$="icon-connectors.svg"]) > .nav-dropdown-item:first-child {
|
|
border-bottom-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* ============================================
|
|
Update Component (Changelog) Layout Fix
|
|
============================================ */
|
|
|
|
/* Force two-column layout at lg breakpoint since lg:flex-row is not applied */
|
|
@media (min-width: 1024px) {
|
|
.update-container {
|
|
flex-direction: row !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Banner Styling
|
|
============================================ */
|
|
|
|
/* Mintlify paints the banner text via `[&_*]:text-white/95!`, an `!important`
|
|
utility that lives in Tailwind's `@layer utilities`. For `!important`
|
|
declarations the cascade reverses layer order and treats un-layered styles
|
|
as the lowest-priority (implicit final) layer, so an un-layered override —
|
|
however specific — always loses to that utility and the text stays white.
|
|
Declaring these rules inside `@layer components` (ordered before `utilities`)
|
|
makes our `!important` win, so the banner text takes the colors below. */
|
|
@layer components {
|
|
/* Light mode: black background, white text, yellow link */
|
|
html:not(.dark) #banner {
|
|
background-color: #1a1a1a !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
html:not(.dark) #banner *,
|
|
html:not(.dark) #banner p {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
html:not(.dark) #banner a {
|
|
color: #FAFF69 !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
/* Dark mode: yellow background, black text, black link */
|
|
html.dark #banner,
|
|
:is(.dark) #banner {
|
|
background-color: #FAFF69 !important;
|
|
color: #1a1a1a !important;
|
|
}
|
|
|
|
html.dark #banner *,
|
|
:is(.dark) #banner * {
|
|
color: #1a1a1a !important;
|
|
}
|
|
|
|
html.dark #banner a,
|
|
:is(.dark) #banner a {
|
|
color: #1a1a1a !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Goal Card Link Hover
|
|
============================================ */
|
|
|
|
/* Light mode: links and arrows inside cards are blue */
|
|
html:not(.dark) .goal-card-link {
|
|
color: #2563eb !important;
|
|
}
|
|
|
|
/* Light mode: links inside standard Mintlify cards are blue */
|
|
html:not(.dark) .card a {
|
|
color: #2563eb !important;
|
|
}
|
|
|
|
.goal-card-link:hover span {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* External goal-card links: the arrow rotates to point up-right on hover,
|
|
hinting that the link leaves the docs site */
|
|
.goal-card-link:hover .ch-external-arrow {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
/* Langfuse opens outside the docs site. Replace Mintlify's high-emphasis tile
|
|
with one small, unboxed external-link glyph. */
|
|
a.nav-dropdown-item[href^="https://langfuse.com/docs"],
|
|
a.nav-dropdown-item[href^="https://langfuse.com/docs"]:hover,
|
|
a.nav-dropdown-item[href^="https://langfuse.com/docs"]:focus,
|
|
a.nav-dropdown-item[href^="https://langfuse.com/docs"]:focus-visible {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
a.nav-dropdown-item[href^="https://langfuse.com/docs"] > svg:last-child {
|
|
width: 0.75rem !important;
|
|
height: 0.75rem !important;
|
|
padding: 0 !important;
|
|
border: 0 !important;
|
|
border-radius: 0 !important;
|
|
outline: 0 !important;
|
|
background: none !important;
|
|
box-shadow: none !important;
|
|
fill: none !important;
|
|
color: #9ca3af !important;
|
|
opacity: 0.6 !important;
|
|
}
|
|
|
|
a.nav-dropdown-item[href^="https://langfuse.com/docs"]:hover > svg:last-child,
|
|
a.nav-dropdown-item[href^="https://langfuse.com/docs"]:focus-visible > svg:last-child {
|
|
color: #2563eb !important;
|
|
opacity: 1 !important;
|
|
transform: translate(1px, -1px);
|
|
}
|
|
|
|
.dark a.nav-dropdown-item[href^="https://langfuse.com/docs"] > svg:last-child,
|
|
:is(.dark) a.nav-dropdown-item[href^="https://langfuse.com/docs"] > svg:last-child {
|
|
color: #71717a !important;
|
|
}
|
|
|
|
.dark a.nav-dropdown-item[href^="https://langfuse.com/docs"]:hover > svg:last-child,
|
|
.dark a.nav-dropdown-item[href^="https://langfuse.com/docs"]:focus-visible > svg:last-child,
|
|
:is(.dark) a.nav-dropdown-item[href^="https://langfuse.com/docs"]:hover > svg:last-child,
|
|
:is(.dark) a.nav-dropdown-item[href^="https://langfuse.com/docs"]:focus-visible > svg:last-child {
|
|
color: #fdff75 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Sidebar Section Spacing
|
|
============================================ */
|
|
|
|
/* 24px between sidebar groups */
|
|
#navigation-items>div.mt-6 {
|
|
margin-top: 24px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Single-Item Sidebar Sections (Maple theme)
|
|
============================================ */
|
|
|
|
/* In Maple theme, sections with only flat pages (no sub-groups) render as
|
|
regular sidebar items instead of proper section headers. Fix their
|
|
alignment and color to match the sidebar-group-header style. */
|
|
|
|
/* Remove the left-margin indent and border so the icon aligns with section headers */
|
|
#navigation-items > ul.sidebar-group > li:only-child > button,
|
|
#navigation-items > ul.sidebar-group > li:only-child > a {
|
|
margin-left: 0 !important;
|
|
border-left-color: transparent !important;
|
|
color: #171717 !important;
|
|
}
|
|
|
|
/* Darken the mask-icon to match sidebar-group-header icons (bg-current) */
|
|
#navigation-items > ul.sidebar-group > li:only-child > button > svg.h-4,
|
|
#navigation-items > ul.sidebar-group > li:only-child > a > div:first-child > svg {
|
|
background-color: currentColor !important;
|
|
}
|
|
|
|
/* Dark mode overrides */
|
|
.dark #navigation-items > ul.sidebar-group > li:only-child > button,
|
|
.dark #navigation-items > ul.sidebar-group > li:only-child > a,
|
|
:is(.dark) #navigation-items > ul.sidebar-group > li:only-child > button,
|
|
:is(.dark) #navigation-items > ul.sidebar-group > li:only-child > a {
|
|
color: #e5e5e5 !important;
|
|
}
|
|
|
|
/* Preserve active-page styling (border + text color) when Home is selected */
|
|
#navigation-items > ul.sidebar-group > li:only-child > a.text-primary {
|
|
border-left-color: currentColor !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Sidebar Chevron Alignment
|
|
============================================ */
|
|
|
|
/* Push expandable-group chevrons to the right edge so they all align */
|
|
#sidebar .sidebar-group button > svg.transition-transform {
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
/* 8px text-to-text between menu items (accounting for 6px py-1.5 padding on each item) */
|
|
#navigation-items ul.sidebar-group.space-y-px> :not([hidden])~ :not([hidden]) {
|
|
margin-top: -4px !important;
|
|
}
|
|
/* ============================================
|
|
Callout: Click UI-style inline icon
|
|
============================================
|
|
Matches the Click UI Alert component — tinted background, inline icon
|
|
colored with the state accent, no left bar. */
|
|
|
|
[data-callout-type] {
|
|
padding: 0.75rem !important;
|
|
border-radius: 0.25rem !important;
|
|
overflow: hidden !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Icon: inline in the flex row, not an absolute bar */
|
|
[data-callout-type] [data-component-part="callout-icon"] {
|
|
position: static !important;
|
|
left: auto !important;
|
|
top: auto !important;
|
|
bottom: auto !important;
|
|
width: 1.25rem !important;
|
|
min-width: 1.25rem !important;
|
|
height: 1.25rem !important;
|
|
margin: 0 !important;
|
|
align-self: center !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
[data-callout-type] [data-component-part="callout-icon"] svg {
|
|
width: 1.25rem !important;
|
|
height: 1.25rem !important;
|
|
/* color is set per-state in the light/dark blocks above */
|
|
}
|
|
|
|
[data-callout-type] [data-component-part="callout-content"] {
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Callout links: inherit accent color, underline
|
|
============================================ */
|
|
|
|
html:not(.dark) .prose [data-callout-type] [data-component-part="callout-content"] a,
|
|
html.dark .prose [data-callout-type] [data-component-part="callout-content"] a {
|
|
color: inherit !important;
|
|
text-decoration: underline !important;
|
|
text-decoration-thickness: 2px !important;
|
|
text-underline-offset: 2px !important;
|
|
}
|
|
|
|
html:not(.dark) .prose [data-callout-type] [data-component-part="callout-content"] a:hover {
|
|
filter: brightness(0.6) !important;
|
|
text-decoration-thickness: 2px !important;
|
|
text-underline-offset: 2px !important;
|
|
}
|
|
|
|
html.dark .prose [data-callout-type] [data-component-part="callout-content"] a:hover {
|
|
filter: brightness(1.4) !important;
|
|
text-decoration-thickness: 2px !important;
|
|
text-underline-offset: 2px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Code-snippet "Report incorrect code" popover
|
|
============================================ */
|
|
|
|
/* The earlier global `a.rounded-xl, button.rounded-xl { border-radius: 4px }`
|
|
is intended for sidebar nav but also flattens the Cancel/Submit buttons
|
|
inside the code-feedback popover, leaving 4px corners inside a 16px card.
|
|
Restore Tailwind's `rounded-xl` (12px) here. */
|
|
.code-snippet-feedback-popover-content button.rounded-xl,
|
|
.code-snippet-feedback-form button.rounded-xl {
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
/* Submit button: the markup wraps a `<span class="text-white">` inside a
|
|
`<button class="bg-primary dark:bg-primary-dark">`. In dark mode the
|
|
background resolves to the brand yellow (#fdff75) and the white label
|
|
is unreadable. Force the label dark on the yellow pill. */
|
|
.dark .code-snippet-feedback-form-submit-button,
|
|
.dark .code-snippet-feedback-form-submit-button span,
|
|
:is(.dark) .code-snippet-feedback-form-submit-button,
|
|
:is(.dark) .code-snippet-feedback-form-submit-button span {
|
|
color: #1c1c1c !important;
|
|
}
|
|
|
|
/* Match the popover background to the code-block background (#282828) so
|
|
the widget reads as a continuation of the code block it's reporting on,
|
|
instead of as a near-black card floating in space. Also give it a real
|
|
drop shadow — `shadow-md` (rgba(0,0,0,0.1)) is invisible against the
|
|
#1d1d1d page background in dark mode. Border moves to #3c3c3c to match
|
|
the accordion border treatment used elsewhere on #1d1d1d surfaces. */
|
|
.dark .code-snippet-feedback-popover-content,
|
|
:is(.dark) .code-snippet-feedback-popover-content {
|
|
background-color: #282828 !important;
|
|
border-color: #3c3c3c !important;
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6),
|
|
0 6px 12px -6px rgba(0, 0, 0, 0.5) !important;
|
|
}
|
|
|
|
/* With the popover now at #282828, the textarea and Cancel button (both
|
|
shipped at `dark:bg-background-dark` = #1d1d1d) drop to the page
|
|
background color, reading as recessed surfaces against the lighter
|
|
popover. Lift their borders to #3c3c3c so they remain visible. */
|
|
.dark .code-snippet-feedback-popover-content textarea,
|
|
.dark .code-snippet-feedback-popover-content button:not(.code-snippet-feedback-form-submit-button),
|
|
:is(.dark) .code-snippet-feedback-popover-content textarea,
|
|
:is(.dark) .code-snippet-feedback-popover-content button:not(.code-snippet-feedback-form-submit-button) {
|
|
background-color: #1d1d1d !important;
|
|
border-color: #3c3c3c !important;
|
|
}
|
|
|
|
/* The textarea ships with `focus:outline-0` + `dark:focus:border-gray-700`
|
|
(#374151). With the baseline border now at #3c3c3c, that focus color
|
|
is *darker* than the resting border, so focusing produces no visible
|
|
change. Use the brand yellow (same as the Submit button next to it)
|
|
for the focus border, plus a faint matching ring. */
|
|
.dark .code-snippet-feedback-popover-content textarea:focus,
|
|
.dark .code-snippet-feedback-popover-content textarea:focus-visible,
|
|
:is(.dark) .code-snippet-feedback-popover-content textarea:focus,
|
|
:is(.dark) .code-snippet-feedback-popover-content textarea:focus-visible {
|
|
border-color: #fdff75 !important;
|
|
box-shadow: 0 0 0 2px rgba(253, 255, 117, 0.25) !important;
|
|
}
|
|
|
|
/* Language picker: prepend a translate icon (images/icons/icon-language-picker.svg)
|
|
to the navbar locale dropdown trigger. The trigger is `flex items-center
|
|
gap-2`, so a ::before pseudo-element slots in left of the label with
|
|
correct spacing for free. The icon is applied as an alpha mask over a
|
|
currentColor fill so it tracks the button's light/dark text color. */
|
|
button#localization-select-trigger::before {
|
|
content: "";
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
flex-shrink: 0;
|
|
background-color: currentColor;
|
|
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48cmVjdCB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgZmlsbD0ibm9uZSIvPjxwb2x5bGluZSBwb2ludHM9IjI0MCAyMTYgMTg0IDEwNCAxMjggMjE2IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE2Ii8+PGxpbmUgeDE9IjE0NCIgeTE9IjE4NCIgeDI9IjIyNCIgeTI9IjE4NCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNiIvPjxsaW5lIHgxPSI5NiIgeTE9IjMyIiB4Mj0iOTYiIHkyPSI1NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNiIvPjxsaW5lIHgxPSIzMiIgeTE9IjU2IiB4Mj0iMTYwIiB5Mj0iNTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMTYiLz48cGF0aCBkPSJNMTI4LDU2YTk2LDk2LDAsMCwxLTk2LDk2IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE2Ii8+PHBhdGggZD0iTTY5LjQ3LDg4QTk2LDk2LDAsMCwwLDE2MCwxNTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMTYiLz48L3N2Zz4=") no-repeat center / contain;
|
|
mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48cmVjdCB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgZmlsbD0ibm9uZSIvPjxwb2x5bGluZSBwb2ludHM9IjI0MCAyMTYgMTg0IDEwNCAxMjggMjE2IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE2Ii8+PGxpbmUgeDE9IjE0NCIgeTE9IjE4NCIgeDI9IjIyNCIgeTI9IjE4NCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNiIvPjxsaW5lIHgxPSI5NiIgeTE9IjMyIiB4Mj0iOTYiIHkyPSI1NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNiIvPjxsaW5lIHgxPSIzMiIgeTE9IjU2IiB4Mj0iMTYwIiB5Mj0iNTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMTYiLz48cGF0aCBkPSJNMTI4LDU2YTk2LDk2LDAsMCwxLTk2LDk2IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE2Ii8+PHBhdGggZD0iTTY5LjQ3LDg4QTk2LDk2LDAsMCwwLDE2MCwxNTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMTYiLz48L3N2Zz4=") no-repeat center / contain;
|
|
}
|
|
|
|
/* ============================================
|
|
Hide ClickHouse Private from navigation
|
|
(desktop dropdown + mobile nav only)
|
|
============================================ */
|
|
|
|
/* Desktop Solutions dropdown item — $= (ends-with) works regardless of /docs basePath */
|
|
a.nav-dropdown-item[href$="/products/clickhouse-private"],
|
|
a[role="menuitem"][href$="/products/clickhouse-private"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Mobile nav item */
|
|
a.mobile-nav-tabs-item[href$="/products/clickhouse-private"],
|
|
a.mobile-nav-tabs-item[href$="/products/clickhouse-private/index"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Sidebar maturity badges before the entry text
|
|
============================================ */
|
|
|
|
/* API reference sidebar entries carry maturity pills — `tag` frontmatter
|
|
(Beta / Private preview, rendered as .nav-tag-pill) and `deprecated`
|
|
frontmatter (a plain pill div). Both are div wrappers that follow the
|
|
title <span> inside the entry's flex-wrap container; the title is the
|
|
only non-div child there, so ordering div children first moves every
|
|
pill in front of the text without touching the METHOD pill (which
|
|
lives outside this container, as a direct child of the <a>). */
|
|
#sidebar a .flex-wrap > div {
|
|
order: -1;
|
|
}
|
|
|
|
/* Cross out the sidebar entry text of deprecated endpoints (matching the
|
|
Swagger convention). The deprecated pill rendered from `deprecated: true`
|
|
frontmatter carries no semantic class or data attribute — the only stable
|
|
hook is Mintlify's hard-coded pill background utility (light `bg-[#FDEAD8]`,
|
|
always present in the class list even in dark mode). The title is the
|
|
.break-words span; the METHOD pill spans carry no .break-words. */
|
|
#sidebar a:has(div.bg-\[\#FDEAD8\]) span.break-words {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* ============================================
|
|
Endpoint maturity pill next to the page title
|
|
============================================ */
|
|
|
|
/* Generated Cloud API reference pages carry their maturity badge as body
|
|
content (`[data-endpoint-badge]`, written by
|
|
`ci/jobs/scripts/docs/generate_cloud_api_reference.py`). Mintlify shows
|
|
the `deprecated` pill next to the page title but has nothing equivalent
|
|
for `tag` badges, so a pseudo-element paints the pill in that slot from
|
|
pure CSS — present at first paint, no hydration shift (a custom-JS clone
|
|
was tried and popped in visibly). The in-body badge is hidden here; it
|
|
stays in the MDX for contexts without this stylesheet (markdown exports). */
|
|
#content-area:has(.mdx-content [data-endpoint-badge]) #page-title::after {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-left: 0.75rem;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.75rem;
|
|
line-height: 1rem;
|
|
font-weight: 600;
|
|
color: #2563EB;
|
|
background-color: rgba(37, 99, 235, 0.1);
|
|
}
|
|
.dark #content-area:has(.mdx-content [data-endpoint-badge]) #page-title::after,
|
|
:is(.dark) #content-area:has(.mdx-content [data-endpoint-badge]) #page-title::after {
|
|
color: #60A5FA;
|
|
background-color: rgba(96, 165, 250, 0.14);
|
|
}
|
|
#content-area:has(.mdx-content [data-endpoint-badge="Beta"]) #page-title::after {
|
|
content: "Beta";
|
|
}
|
|
#content-area:has(.mdx-content [data-endpoint-badge="Private preview"]) #page-title::after {
|
|
content: "Private preview";
|
|
color: #9333EA;
|
|
background-color: rgba(147, 51, 234, 0.1);
|
|
}
|
|
.dark #content-area:has(.mdx-content [data-endpoint-badge="Private preview"]) #page-title::after,
|
|
:is(.dark) #content-area:has(.mdx-content [data-endpoint-badge="Private preview"]) #page-title::after {
|
|
color: #C084FC;
|
|
background-color: rgba(192, 132, 252, 0.14);
|
|
}
|
|
.mdx-content [data-endpoint-badge] {
|
|
display: none;
|
|
}
|
|
|
|
/* ============================================
|
|
Compact integration table logos
|
|
============================================ */
|
|
|
|
.integration-table-logo {
|
|
display: inline-block;
|
|
width: 1.5rem !important;
|
|
height: 1.5rem !important;
|
|
max-width: 1.5rem !important;
|
|
margin: 0 0.5rem 0 0 !important;
|
|
padding: 0.2rem;
|
|
vertical-align: middle;
|
|
object-fit: contain;
|
|
background: #fff;
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
border-radius: 0.375rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
td:has(> .integration-table-logo) {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Ask AI is a separate docs-assistant action rather than a second search
|
|
control. The gradient edge originates at the top left and gets one short
|
|
sheen after the control is inserted. */
|
|
:root {
|
|
--ch-ai-fill: #f5f5f6;
|
|
--ch-ai-hover-fill: #f0f1f3;
|
|
--ch-ai-border-start: #c4ca00;
|
|
--ch-ai-border-end: #e1e2e5;
|
|
--ch-ai-border-hover-start: #a9ae00;
|
|
--ch-ai-border-hover-end: #c9cbd1;
|
|
--ch-ai-text: #161517;
|
|
--ch-ai-muted: #696e79;
|
|
--ch-ai-icon: #161517;
|
|
--ch-ai-sheen: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
.dark {
|
|
--ch-ai-fill: #232323;
|
|
--ch-ai-hover-fill: #2c2c2c;
|
|
--ch-ai-border-start: #faff69;
|
|
--ch-ai-border-end: #2e2e2e;
|
|
--ch-ai-border-hover-start: #fcff9e;
|
|
--ch-ai-border-hover-end: #4a4a4a;
|
|
--ch-ai-text: #f3f3f3;
|
|
--ch-ai-muted: #9f9f9f;
|
|
--ch-ai-icon: #faff69;
|
|
--ch-ai-sheen: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
#ch-ask-ai-row {
|
|
display: block;
|
|
width: 100%;
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.ch-ask-ai-button {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
background:
|
|
linear-gradient(var(--ch-ai-fill), var(--ch-ai-fill)) padding-box,
|
|
radial-gradient(70% 130% at 0 0, var(--ch-ai-border-start), var(--ch-ai-border-end)) border-box;
|
|
color: var(--ch-ai-text);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
transition: background 150ms ease, color 150ms ease;
|
|
}
|
|
|
|
.ch-ask-ai-button > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ch-ask-ai-button::after {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
width: 60%;
|
|
background: linear-gradient(105deg, transparent, var(--ch-ai-sheen), transparent);
|
|
content: "";
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translateX(-180%) skewX(-12deg);
|
|
animation: ch-ask-ai-sheen 900ms ease-in-out 600ms both;
|
|
}
|
|
|
|
/* A faint glint travels along the gradient outline after the fill reflection.
|
|
It is masked to the one-pixel border so the content remains still. */
|
|
.ch-ask-ai-button::before {
|
|
position: absolute;
|
|
inset: -1px;
|
|
z-index: 2;
|
|
padding: 1px;
|
|
border-radius: inherit;
|
|
background: linear-gradient(105deg, transparent 42%, #fff 50%, transparent 58%)
|
|
150% 0 / 300% 100% no-repeat;
|
|
content: "";
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
mask-composite: exclude;
|
|
animation: ch-ask-ai-gleam 900ms ease-in-out 600ms both;
|
|
}
|
|
|
|
.ch-ask-ai-button:hover {
|
|
background:
|
|
linear-gradient(var(--ch-ai-hover-fill), var(--ch-ai-hover-fill)) padding-box,
|
|
radial-gradient(70% 130% at 0 0, var(--ch-ai-border-hover-start), var(--ch-ai-border-hover-end)) border-box;
|
|
}
|
|
|
|
/* These rules supersede the previous combined Search/Ask AI styling. The
|
|
explicit important flag is required because that legacy dark selector uses
|
|
an ID and important longhand background declarations. */
|
|
.dark #ch-ask-ai-btn,
|
|
:is(.dark) #ch-ask-ai-btn {
|
|
background:
|
|
linear-gradient(var(--ch-ai-fill), var(--ch-ai-fill)) padding-box,
|
|
radial-gradient(70% 130% at 0 0, var(--ch-ai-border-start), var(--ch-ai-border-end)) border-box !important;
|
|
border-color: transparent !important;
|
|
color: var(--ch-ai-text) !important;
|
|
}
|
|
|
|
.dark #ch-ask-ai-btn:hover,
|
|
:is(.dark) #ch-ask-ai-btn:hover {
|
|
background:
|
|
linear-gradient(var(--ch-ai-hover-fill), var(--ch-ai-hover-fill)) padding-box,
|
|
radial-gradient(70% 130% at 0 0, var(--ch-ai-border-hover-start), var(--ch-ai-border-hover-end)) border-box !important;
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.ch-ask-ai-button:hover::before,
|
|
.ch-ask-ai-button:hover::after {
|
|
animation: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
.ch-ask-ai-button:focus-visible {
|
|
outline: 2px solid #161517 !important;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.dark .ch-ask-ai-button:focus-visible {
|
|
outline-color: #faff69 !important;
|
|
}
|
|
|
|
#ch-ask-ai-btn:focus-visible,
|
|
#ch-page-ask-btn:focus-visible {
|
|
outline: 2px solid #161517 !important;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.dark #ch-ask-ai-btn:focus-visible,
|
|
.dark #ch-page-ask-btn:focus-visible {
|
|
outline-color: #faff69 !important;
|
|
}
|
|
|
|
/* Kapa restores focus to the triggering control when it closes. A pointer
|
|
activation should not suddenly acquire the keyboard-only yellow outline. */
|
|
.ch-ask-ai-button[data-ch-ask-ai-pointer-trigger]:focus-visible,
|
|
#home-assistant-entry[data-ch-ask-ai-pointer-trigger]:focus-visible,
|
|
#ch-ask-ai-btn[data-ch-ask-ai-pointer-trigger]:focus-visible,
|
|
#ch-page-ask-btn[data-ch-ask-ai-pointer-trigger]:focus-visible {
|
|
outline: none !important;
|
|
}
|
|
|
|
.ch-ask-ai-button .ch-ai-icon {
|
|
color: var(--ch-ai-icon) !important;
|
|
}
|
|
|
|
#ch-ask-ai-btn {
|
|
width: 100%;
|
|
height: 40px;
|
|
justify-content: flex-start;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
#ch-ask-ai-btn .ch-ask-ai-label {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
#ch-ask-ai-btn small,
|
|
#ch-ask-ai-btn kbd {
|
|
color: var(--ch-ai-muted);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#ch-ask-ai-btn kbd {
|
|
margin-left: auto;
|
|
min-width: 20px;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
text-align: right;
|
|
}
|
|
|
|
.ch-ask-ai-mobile-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.ch-ask-ai-mobile-button .ch-ask-ai-label {
|
|
display: none;
|
|
}
|
|
|
|
#ch-page-ask-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
#ch-page-ask-row:has(> #page-title) {
|
|
flex-direction: row !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
#ch-page-ask-row > h1,
|
|
#ch-page-ask-row:has(> #page-title) > #page-title {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
width: auto !important;
|
|
}
|
|
|
|
#ch-page-ask-btn {
|
|
flex: 0 0 auto;
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#ch-page-ask-btn::before,
|
|
#ch-page-ask-btn::after {
|
|
animation-delay: 950ms;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#ch-page-ask-row {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
@keyframes ch-ask-ai-sheen {
|
|
0% { opacity: 1; transform: translateX(-180%) skewX(-12deg); }
|
|
99% { opacity: 1; transform: translateX(260%) skewX(-12deg); }
|
|
100% { opacity: 0; transform: translateX(260%) skewX(-12deg); }
|
|
}
|
|
|
|
@keyframes ch-ask-ai-gleam {
|
|
0% { background-position: 150% 0; opacity: 1; }
|
|
99% { background-position: -50% 0; opacity: 1; }
|
|
100% { background-position: -50% 0; opacity: 0; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ch-ask-ai-button::before,
|
|
.ch-ask-ai-button::after { animation: none; }
|
|
}
|