diff --git a/css/styles.css b/css/styles.css index f24f217c52..2c02de16e7 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1 @@ -:root{--background-light:251 250 248;--background-dark:26 29 36;--primary-foreground:217 13% 19%;--page-texture:url("/css/assets/light-dots.png")}:root{--color-page-bg:#FBFAF8;--color-card-hover:#FFFFFF;--color-stroke:#DFE0E2;--color-sidebar-bg:#F9F7F3;--color-sidebar-hover:#F5EDE1;--color-card-rest:#FBFAF8;--color-card-active:#FFFFFF;--color-icon:#D4870D;--color-button:#FCBC32;--color-button-fg:#2B3038;--color-text-primary:#2B3038;--color-text-secondary:#4B535C}.dark{--color-page-bg:#1A1D24;--color-card-hover:#363C44;--color-stroke:#2B3038;--color-sidebar-bg:#20242B;--color-sidebar-hover:#2B3038;--color-card-rest:#1A1D24;--color-card-active:#2B3038;--color-icon:#D4870D;--color-button:#FCBC32;--color-text-primary:#E8E8E9;--color-text-secondary:#C5C7CC;--page-texture:url("/css/assets/dark-dots.png")}:root{--font-serif:"Source Serif 4","Times New Roman",serif;--font-sans:"Source Sans 3",Calibri,sans-serif;--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:650;--font-size-xs:0.75rem;--font-size-sm:0.9375rem;--font-size-md:1rem;--font-size-xm:1.125rem;--font-size-lg:1.5rem;--font-size-xl:2.5rem}body{font-family:var(--font-sans)}h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);font-weight:var(--font-weight-medium)!important;color:var(--color-text-primary)!important}h1{font-size:var(--font-size-xl)}b,strong{font-weight:var(--font-weight-bold)!important;font-synthesis-weight:auto}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.banner-body,.banner-body *,.banner-title{color:#e8e8e9!important}body,html{background-color:var(--color-page-bg)!important;background-image:var(--page-texture)!important;background-repeat:no-repeat!important;background-size:500px auto!important;background-position:calc(100% + 375px) 200px!important;background-attachment:fixed!important}main{background-color:transparent!important}#background-color{background-color:transparent!important}span[style*=radial-gradient]{background:0 0!important}img.nav-logo{height:62px!important;min-height:62px!important;max-height:62px!important;width:233px!important;min-width:233px!important;max-width:233px!important;flex-shrink:0!important;flex-grow:0!important}a:has(> img.nav-logo){flex-shrink:0;min-width:233px}a.nav-tabs-item.font-medium:not([data-active=true]),button.nav-tabs-item:not(.text-primary)>div:first-child{color:var(--color-text-secondary)}button.nav-tabs-item.text-primary>div:first-child svg,button.nav-tabs-item:hover>div:first-child svg{color:var(--color-text-primary)!important}.nav-tabs-item{font-size:var(--font-size-md)}[data-active=true].hover\:text-primary:hover,[data-active=true].text-primary{color:var(--color-text-primary);text-shadow:none;font-weight:var(--font-weight-bold)}button.nav-tabs-item.text-primary,button.nav-tabs-item.text-primary>div:first-child{color:var(--color-text-primary)!important;font-weight:var(--font-weight-bold)!important}.nav-tabs-item .bg-primary{background-color:var(--color-text-primary);height:2px}.nav-dropdown-item:has(.text-primary){background-color:var(--color-sidebar-hover)}.nav-dropdown-item .text-primary{color:var(--color-text-primary);font-weight:var(--font-weight-medium)}.nav-dropdown-item.group:hover .group-hover\:text-primary{color:var(--color-text-primary)}#assistant-entry,#assistant-entry span,#localization-select-trigger,#localization-select-trigger span,#search-bar-entry,#search-bar-entry>div>div,#topbar-cta-button a,#topbar-cta-button a span,.topbar-right-container nav,.topbar-right-container nav a{font-size:var(--font-size-sm)}#topbar-cta-button a,#topbar-cta-button a span,#topbar-cta-button a svg{color:var(--color-button-fg)}#assistant-entry{background-color:var(--color-button)!important}#assistant-entry:hover{background-color:var(--color-button)!important;opacity:.9}#assistant-entry,#assistant-entry span,#assistant-entry svg{color:var(--color-button-fg)!important}#banner,#banner *{color:var(--color-button-fg)!important}button[aria-label="Dismiss banner"] svg{stroke:var(--color-button-fg)!important}#sidebar,#sidebar-content{background-color:var(--color-sidebar-bg)}.sidebar-group-header,.sidebar-group-header>h5{font-family:var(--font-sans)!important;font-size:var(--font-size-md);font-weight:var(--font-weight-medium)!important}.sidebar-group a,.sidebar-group button{font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}#sidebar-content a.text-primary{color:var(--color-text-primary);background-color:var(--color-sidebar-hover);text-shadow:none}.nav-tag-pill-text{color:var(--color-text-secondary)}#sidebar-content .sidebar-group a .justify-end{flex:none}.toc-item[data-active=true]>a,.toc-item[data-active=true]>a:hover{color:var(--color-text-primary);border-color:var(--color-text-primary)}.colab-link,.github-source-link,.try-product-link{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 14px;border:1px solid color-mix(in srgb,var(--color-stroke) 70%,transparent);border-radius:12px;font-size:var(--font-size-md);font-weight:var(--font-weight-regular);font-family:var(--font-sans);color:var(--color-text-secondary);background-color:color-mix(in srgb,var(--color-card-hover) 50%,transparent);text-decoration:none;line-height:24px;cursor:pointer;transition:all .2s ease;margin-bottom:1.5rem;width:fit-content;min-width:fit-content}.colab-link:hover,.github-source-link:hover,.try-product-link:hover{background-color:color-mix(in srgb,var(--color-card-hover) 80%,transparent);border-color:var(--color-stroke)}.dark .colab-link,.dark .github-source-link,.dark .try-product-link{color:var(--color-text-primary)}.source-link{float:right;display:inline-block;padding:2px 8px;border:1px solid color-mix(in srgb,var(--color-stroke) 70%,transparent);border-radius:6px;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);background-color:color-mix(in srgb,var(--color-card-hover) 50%,transparent);text-decoration:none;transition:all .15s ease}.source-link:hover{background-color:color-mix(in srgb,var(--color-card-hover) 80%,transparent);border-color:var(--color-stroke);text-decoration:none}.dark .source-link{color:var(--color-text-primary)}button[type=submit].bg-primary.mint-text-white{color:var(--color-button-fg)!important}button[type=submit].bg-primary.mint-text-white [fill=white]{fill:currentColor!important}button[type=submit].bg-primary.mint-text-white [stroke=white]{stroke:currentColor!important}button[type=submit].bg-primary.mint-text-white svg{color:var(--color-button-fg)!important}div:has(> div > textarea.chat-assistant-input):not(#chat-assistant-sheet *){box-shadow:0 8px 24px #00000026}div:has(> .chat-assistant-floating-input){overflow:visible!important}textarea.chat-assistant-input{min-height:2.5rem!important;max-height:2.5rem!important}button.chat-assistant-send-button{background-color:var(--color-button)!important}button.chat-assistant-send-button svg{color:var(--color-button-fg)!important}.product-card{background-color:var(--color-card-rest);border:1px solid var(--color-stroke)}.product-card:hover{background-color:var(--color-card-active)}.product-card-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium)!important;margin-top:0}.home-h3,.product-card-subtitle{font-family:var(--font-sans)!important;font-size:var(--font-size-xm);font-weight:var(--font-weight-regular);color:var(--color-text-primary)}.product-card-body{font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-secondary)}.card.block{background-color:var(--color-card-rest)!important;border-color:var(--color-stroke)!important}.card.block:hover{background-color:var(--color-card-active)!important;border-color:var(--color-stroke)!important}.card.block h1,.card.block h2,.card.block h3,.card.block h4,.card.block h5,.card.block h6{font-family:var(--font-sans);font-weight:var(--font-weight-bold)!important}#pagination>a{background-color:var(--color-card-rest);border-color:var(--color-stroke)}#pagination>a:hover{background-color:var(--color-card-active);border-color:var(--color-stroke)}[data-component-part=update-label]{color:var(--color-text-secondary)}[data-badge=true][data-color=orange]{--color-bg:color-mix(in srgb, var(--color-button) 20%, transparent);--color-text:var(--color-icon);--color-bg-disabled:color-mix(in srgb, var(--color-button) 8%, transparent);--color-text-disabled:color-mix(in srgb, var(--color-icon) 50%, transparent)}[data-badge=true] a,[data-badge=true] a:hover{text-decoration:none!important;border-bottom:0!important}.dark [data-badge=true][data-color=orange]{--color-text:var(--color-button);--color-text-disabled:color-mix(in srgb, var(--color-button) 50%, transparent)} \ No newline at end of file +:root{--background-light:251 250 248;--background-dark:26 29 36;--primary-foreground:217 13% 19%;--page-texture:url("/css/assets/light-dots.png")}:root{--color-page-bg:#FBFAF8;--color-card-hover:#FFFFFF;--color-stroke:#DFE0E2;--color-sidebar-bg:#F9F7F3;--color-sidebar-hover:#F5EDE1;--color-card-rest:#FBFAF8;--color-card-active:#FFFFFF;--color-icon:#D4870D;--color-button:#FCBC32;--color-button-fg:#2B3038;--color-text-primary:#2B3038;--color-text-secondary:#4B535C}.dark{--color-page-bg:#1A1D24;--color-card-hover:#363C44;--color-stroke:#2B3038;--color-sidebar-bg:#20242B;--color-sidebar-hover:#2B3038;--color-card-rest:#1A1D24;--color-card-active:#2B3038;--color-icon:#D4870D;--color-button:#FCBC32;--color-text-primary:#E8E8E9;--color-text-secondary:#C5C7CC;--page-texture:url("/css/assets/dark-dots.png")}:root{--font-serif:"Source Serif 4","Times New Roman",serif;--font-sans:"Source Sans 3",Calibri,sans-serif;--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:650;--font-size-xs:0.75rem;--font-size-sm:0.9375rem;--font-size-md:1rem;--font-size-xm:1.125rem;--font-size-lg:1.5rem;--font-size-xl:2.5rem}body{font-family:var(--font-sans)}h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);font-weight:var(--font-weight-medium)!important;color:var(--color-text-primary)!important}h1{font-size:var(--font-size-xl)}b,strong{font-weight:var(--font-weight-bold)!important;font-synthesis-weight:auto}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.banner-body,.banner-body *,.banner-title{color:#e8e8e9!important}body,html{background-color:var(--color-page-bg)!important;background-image:var(--page-texture)!important;background-repeat:no-repeat!important;background-size:500px auto!important;background-position:calc(100% + 375px) 200px!important;background-attachment:fixed!important}main{background-color:transparent!important}#background-color{background-color:transparent!important}span[style*=radial-gradient]{background:0 0!important}img.nav-logo{height:62px!important;min-height:62px!important;max-height:62px!important;width:233px!important;min-width:233px!important;max-width:233px!important;flex-shrink:0!important;flex-grow:0!important}a:has(> img.nav-logo){flex-shrink:0;min-width:233px}a.nav-tabs-item.font-medium:not([data-active=true]),button.nav-tabs-item:not(.text-primary)>div:first-child{color:var(--color-text-secondary)}button.nav-tabs-item.text-primary>div:first-child svg,button.nav-tabs-item:hover>div:first-child svg{color:var(--color-text-primary)!important}.nav-tabs-item{font-size:var(--font-size-md)}[data-active=true].hover\:text-primary:hover,[data-active=true].text-primary{color:var(--color-text-primary);text-shadow:none;font-weight:var(--font-weight-bold)}button.nav-tabs-item.text-primary,button.nav-tabs-item.text-primary>div:first-child{color:var(--color-text-primary)!important;font-weight:var(--font-weight-bold)!important}.nav-tabs-item .bg-primary{background-color:var(--color-text-primary);height:2px}.nav-dropdown-item:has(.text-primary){background-color:var(--color-sidebar-hover)}.nav-dropdown-item .text-primary{color:var(--color-text-primary);font-weight:var(--font-weight-medium)}.nav-dropdown-item.group:hover .group-hover\:text-primary{color:var(--color-text-primary)}#assistant-entry,#assistant-entry span,#localization-select-trigger,#localization-select-trigger span,#search-bar-entry,#search-bar-entry>div>div,#topbar-cta-button a,#topbar-cta-button a span,.topbar-right-container nav,.topbar-right-container nav a{font-size:var(--font-size-sm)}#topbar-cta-button a,#topbar-cta-button a span,#topbar-cta-button a svg{color:var(--color-button-fg)}#assistant-entry{background-color:var(--color-button)!important}#assistant-entry:hover{background-color:var(--color-button)!important;opacity:.9}#assistant-entry,#assistant-entry span,#assistant-entry svg{color:var(--color-button-fg)!important}#banner,#banner *{color:var(--color-button-fg)!important}button[aria-label="Dismiss banner"] svg{stroke:var(--color-button-fg)!important}#sidebar,#sidebar-content{background-color:var(--color-sidebar-bg)}.sidebar-group-header,.sidebar-group-header>h5{font-family:var(--font-sans)!important;font-size:var(--font-size-md);font-weight:var(--font-weight-medium)!important}.sidebar-group a,.sidebar-group button{font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}#sidebar-content a.text-primary{color:var(--color-text-primary);background-color:var(--color-sidebar-hover);text-shadow:none}.nav-tag-pill-text{color:var(--color-text-secondary)}#sidebar-content .sidebar-group a .justify-end{flex:none}.toc-item[data-active=true]>a,.toc-item[data-active=true]>a:hover{color:var(--color-text-primary);border-color:var(--color-text-primary)}.colab-link,.github-source-link,.try-product-link{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 14px;border:1px solid color-mix(in srgb,var(--color-stroke) 70%,transparent);border-radius:12px;font-size:var(--font-size-md);font-weight:var(--font-weight-regular);font-family:var(--font-sans);color:var(--color-text-secondary);background-color:color-mix(in srgb,var(--color-card-hover) 50%,transparent);text-decoration:none;line-height:24px;cursor:pointer;transition:all .2s ease;margin-bottom:1.5rem;width:fit-content;min-width:fit-content}.colab-link:hover,.github-source-link:hover,.try-product-link:hover{background-color:color-mix(in srgb,var(--color-card-hover) 80%,transparent);border-color:var(--color-stroke)}.dark .colab-link,.dark .github-source-link,.dark .try-product-link{color:var(--color-text-primary)}.source-link{float:right;display:inline-block;padding:2px 8px;border:1px solid color-mix(in srgb,var(--color-stroke) 70%,transparent);border-radius:6px;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);background-color:color-mix(in srgb,var(--color-card-hover) 50%,transparent);text-decoration:none;transition:all .15s ease}.source-link:hover{background-color:color-mix(in srgb,var(--color-card-hover) 80%,transparent);border-color:var(--color-stroke);text-decoration:none}.dark .source-link{color:var(--color-text-primary)}button[type=submit].bg-primary.mint-text-white{color:var(--color-button-fg)!important}button[type=submit].bg-primary.mint-text-white [fill=white]{fill:currentColor!important}button[type=submit].bg-primary.mint-text-white [stroke=white]{stroke:currentColor!important}button[type=submit].bg-primary.mint-text-white svg{color:var(--color-button-fg)!important}div:has(> div > textarea.chat-assistant-input):not(#chat-assistant-sheet *){box-shadow:0 8px 24px #00000026}div:has(> .chat-assistant-floating-input){overflow:visible!important}textarea.chat-assistant-input{min-height:2.5rem!important;max-height:2.5rem!important}button.chat-assistant-send-button{background-color:var(--color-button)!important}button.chat-assistant-send-button svg{color:var(--color-button-fg)!important}.product-card{background-color:var(--color-card-rest);border:1px solid var(--color-stroke)}.product-card:hover{background-color:var(--color-card-active)}.product-card-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium)!important;margin-top:0}.home-h3,.product-card-subtitle{font-family:var(--font-sans)!important;font-size:var(--font-size-xm);font-weight:var(--font-weight-regular);color:var(--color-text-primary)}.product-card-body{font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-secondary)}.card.block{background-color:var(--color-card-rest)!important;border-color:var(--color-stroke)!important}.card.block:hover{background-color:var(--color-card-active)!important;border-color:var(--color-stroke)!important}.card.block h1,.card.block h2,.card.block h3,.card.block h4,.card.block h5,.card.block h6{font-family:var(--font-sans);font-weight:var(--font-weight-bold)!important}.tab-container{border:1px solid var(--color-stroke);border-radius:12px;background-color:var(--color-card-rest);overflow:hidden;margin-bottom:2rem}.tab-container [role=tablist]{margin-bottom:0;padding:2px 20px 0;gap:0;overflow-y:hidden}.tab-container [data-component-part=tab-button]{padding-left:16px;padding-right:16px}.tab-container [role=tab]:first-child [data-component-part=tab-button]{padding-left:0}.tab-container [role=tab]{position:relative}.tab-container [role=tab]+[role=tab]::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:20px;background-color:var(--color-stroke)}.tab-container [role=tabpanel]{padding:16px 20px}#pagination>a{background-color:var(--color-card-rest);border-color:var(--color-stroke)}#pagination>a:hover{background-color:var(--color-card-active);border-color:var(--color-stroke)}[data-component-part=update-label]{color:var(--color-text-secondary)}[data-badge=true][data-color=orange]{--color-bg:color-mix(in srgb, var(--color-button) 20%, transparent);--color-text:var(--color-icon);--color-bg-disabled:color-mix(in srgb, var(--color-button) 8%, transparent);--color-text-disabled:color-mix(in srgb, var(--color-icon) 50%, transparent)}[data-badge=true] a,[data-badge=true] a:hover{text-decoration:none!important;border-bottom:0!important}.dark [data-badge=true][data-color=orange]{--color-text:var(--color-button);--color-text-disabled:color-mix(in srgb, var(--color-button) 50%, transparent)} \ No newline at end of file diff --git a/scripts/css-minify/cards.css b/scripts/css-minify/cards.css index d190c5c54e..a7775bfe35 100644 --- a/scripts/css-minify/cards.css +++ b/scripts/css-minify/cards.css @@ -93,6 +93,99 @@ } +/* -------------------------------------------------------------------------- + Content tabs (/) — Mintlify renders the block as +
+
    the tab strip (each
  • + holds a [data-component-part= + "tab-button"] with its own active + underline) +
    …
    the active panel + Out of the box the component is borderless — only the strip's bottom rule + and the active tab's underline hint at it. Wrap the whole block in the + same card chrome used by .product-card / .card.block (1px --color-stroke + border, 12px radius, --color-card-rest fill) so each tabbed section reads + as one outlined region. The strip's existing border-b then becomes the + divider between the tab header and the panel body. + -------------------------------------------------------------------------- */ + +.tab-container { + border: 1px solid var(--color-stroke); + border-radius: 12px; + background-color: var(--color-card-rest); + overflow: hidden; /* clip the strip + panel to the rounded corners */ + /* Open up the gap to whatever follows the tabbed block. The box ships with + margin-bottom:0, so the only separation was the next element's ~20px top + margin; bump to 2rem so the outlined block doesn't crowd the next + paragraph/heading. (overflow:hidden gives the box its own block + formatting context, so this margin can't collapse into the panel body.) */ + margin-bottom: 2rem; +} + +/* Tab strip — kill Mintlify's mb-6 (24px) gap below the strip so the panel + sits close under the divider, and inset the tabs horizontally so they line + up with the padded panel. gap:0 lets thin vertical rules (below) sit + between the tabs instead of empty space; the tabs stay plain text and keep + Mintlify's -mb-px / border-b active underline, which connects to the + strip's own full-width border-b. */ +.tab-container [role="tablist"] { + margin-bottom: 0; + padding: 2px 20px 0; + gap: 0; + /* Mintlify sets overflow:auto on the strip so many tabs scroll horizontally + on narrow screens. But each tab button uses a -mb-px / border-b overlap + that leaves the strip's scroll height 1px taller than its client height, + which makes overflow:auto paint a stray vertical scrollbar in the tab + title row. Pin the y-axis to hidden (keeps horizontal scrolling) to kill + it. Higher specificity than Mintlify's .overflow-auto, so only overflow-y + is overridden; overflow-x stays auto. */ + overflow-y: hidden; +} + +/* Tab labels — plain text (no chip). Just add horizontal breathing room so the + dividers below have space on either side. Mintlify's own bottom underline + (border-b, transparent when idle / border-current when active) stays as the + understated active indicator, so nothing else is needed here. */ +.tab-container [data-component-part="tab-button"] { + padding-left: 16px; + padding-right: 16px; +} + +/* First tab sits flush with the strip's left inset — no leading pad, and it's + :first-child so it gets no divider (dividers are drawn before each tab that + follows another one, below). */ +.tab-container [role="tab"]:first-child [data-component-part="tab-button"] { + padding-left: 0; +} + +/* Divider between tabs — a short, vertically-centered 1px --color-stroke rule + drawn on every tab that follows another. Absolutely positioned at the tab's + left edge (the parent
  • is relative) and kept to 20px tall so it reads as + a light separator rather than a full-height boxy border — the classier look. + overflow-x:auto on the strip clips nothing here since the rule sits inside + the tab's own box. */ +.tab-container [role="tab"] { + position: relative; +} +.tab-container [role="tab"] + [role="tab"]::before { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 1px; + height: 20px; + background-color: var(--color-stroke); +} + +/* Panel body — pad the active panel inside the box. Mintlify already zeroes + the first child's top margin (prose [&>:first-child…]:mt-0), so 16px top + reads evenly against the divider above. */ +.tab-container [role="tabpanel"] { + padding: 16px 20px; +} + + /* -------------------------------------------------------------------------- Page footer prev/next links — Mintlify wraps the prev/next anchors in a