From cacaa9d9f078a9a9c1f64d17117ffb3980f0e14f Mon Sep 17 00:00:00 2001 From: alexander-sei Date: Tue, 15 Sep 2026 16:29:24 +0200 Subject: [PATCH 1/5] fix(styles): restore symmetric article gutters and retarget overrides to Mintlify's current DOM Mintlify renamed the Tailwind classes our layout overrides keyed on (lg:pl-[23.7rem] -> lg:pl-[5.7rem], max-w-[984px] -> max-w-246, ...), so most of them silently stopped matching. The leftovers gave the article a 91px gutter on the left but 4px on the right, pinned the footer to a 984px left-aligned block and indented the tabs 48px while the logo sat at 16px. Rewrite the layout block around Mintlify's stable ids (#sidebar, #content-area, #content-side-layout, #table-of-contents-layout, #navbar, #footer) plus :has(), driven by tokens (--sei-page-px, --sei-sidebar-w, --sei-gutter, --sei-toc-w, --sei-layout-max). Logo, tabs, sidebar text, TOC edge and footer now share one 24px page margin, the article gets the same 40px gutter on both sides, and the whole layout centres above 1536px instead of stretching prose lines indefinitely. While retargeting, restore the Sei treatment for components whose selectors were also dead: callouts (via data-callout-type, with neutral body copy and gold/maroon/blue/green bars), sidebar group labels (h3.sidebar-title mono eyebrows) and step indicators. Fix two sidebar bugs: the whole expanded group was tinted because [data-active="true"] also matches the group
  • , and nested pages lost their indent because padding-left: 8px !important overrode Mintlify's depth padding. Theme fixes: selected tabs were maroon-100 on the always-dark code header (1.4:1 in light mode); the dark search focus outline was near-invisible. Drop rules that no longer match anything (callout-* and blockquote variants, mintlify-card/card_, step-number, ml-4 border-l, nav-anchor, sidebar search, --color-primary overrides) and make the title divider an explicit rule instead of an accidental `header` match. Co-authored-by: Cursor --- style.css | 642 ++++++++++++++++++++++++------------------------------ 1 file changed, 281 insertions(+), 361 deletions(-) diff --git a/style.css b/style.css index d31c7cf..835c941 100644 --- a/style.css +++ b/style.css @@ -160,15 +160,22 @@ --sei-page-bg-light: #f5f5f7; --sei-page-bg-dark: #000000; + + /* Page layout — see PAGE LAYOUT below */ + --sei-page-px: 24px; /* page margin: navbar, sidebar text, TOC right edge, footer */ + --sei-sidebar-w: 220px; /* left nav column */ + --sei-gutter: 40px; /* article ↔ sidebar AND article ↔ TOC — identical on both sides */ + --sei-toc-w: 180px; /* right "On this page" column */ + --sei-layout-max: 1536px; /* above this the whole layout centres instead of stretching + (fluid on 13"–14" MacBooks: 1440/1470/1512 px) */ } -.dark, -[data-theme="dark"] { +.dark { color-scheme: dark; } /* -------------------------------------------------------------------------- - Base typography — Inter for body, JetBrains Mono for code + Base typography -------------------------------------------------------------------------- */ html, @@ -242,58 +249,39 @@ h2, } /* -------------------------------------------------------------------------- - CARDS — sharp corners, left-aligned icon square, maroon hover - Targets Mintlify's components broadly via class name patterns. + CARDS — sharp corners, maroon hover + Mintlify renders as `.card` (div or a). The icon is a CSS-mask svg + painted with Mintlify's own `bg-primary` / `dark:bg-primary-light`, i.e. + the docs.json brand colours, so it needs no override here. -------------------------------------------------------------------------- */ -/* Card container */ -a[class*="card"], -div[class*="Card"]:not([class*="CardGroup"]):not([class*="group"]), -.card, -[class*="mintlify-card"], -[class^="card_"] { +.card { border-radius: var(--sei-radius-sm) !important; border: 1px solid var(--sei-card-border-light) !important; background: var(--sei-card-bg-light) !important; transition: background-color 0.15s ease, - border-color 0.15s ease, - transform 0.15s ease !important; + border-color 0.15s ease !important; position: relative; overflow: hidden; } -.dark a[class*="card"], -.dark div[class*="Card"]:not([class*="CardGroup"]):not([class*="group"]), -.dark .card, -.dark [class*="mintlify-card"], -.dark [class^="card_"] { +.dark .card { border-color: var(--sei-card-border-dark) !important; background: var(--sei-card-bg-dark) !important; } -/* Hover: subtle maroon tint + border shift */ -a[class*="card"]:hover, -.card:hover, -[class*="mintlify-card"]:hover, -[class^="card_"]:hover { +.card:hover { border-color: rgba(96, 0, 20, 0.35) !important; background: rgba(96, 0, 20, 0.02) !important; } -.dark a[class*="card"]:hover, -.dark .card:hover, -.dark [class*="mintlify-card"]:hover, -.dark [class^="card_"]:hover { +.dark .card:hover { border-color: rgba(185, 155, 161, 0.25) !important; background: rgba(96, 0, 20, 0.08) !important; } /* Card title — tight, bold */ -[class*="card"] h2, -[class*="card"] h3, -[class*="card"] h4, -[class*="card"] [class*="title"], .card h2, .card h3, .card h4 { @@ -301,71 +289,23 @@ a[class*="card"]:hover, font-weight: 700 !important; } -/* Card icon: small maroon square instead of outlined/centered glyph. - Works by targeting the typical svg icon slot Mintlify places at the top. */ -[class*="card"] > svg:first-child, -.card > svg:first-child, -[class*="card"] [class*="icon"] svg, -.card [class*="icon"] svg { - color: var(--sei-maroon-100) !important; -} - -.dark [class*="card"] > svg:first-child, -.dark .card > svg:first-child, -.dark [class*="card"] [class*="icon"] svg, -.dark .card [class*="icon"] svg { - color: var(--sei-maroon-25) !important; -} - -/* Keep Mintlify's own icon container but re-skin it to the Sei square look */ -[class*="card"] [class*="icon"], -.card [class*="icon"] { - border-radius: var(--sei-radius-sm) !important; -} - -/* Card description text tone */ -[class*="card"] p, -.card p { - color: var(--sei-grey-200); - font-size: 14px; - line-height: 1.5; -} - -.dark [class*="card"] p, -.dark .card p { - color: var(--sei-grey-75); -} - -/* -------------------------------------------------------------------------- - CARD GROUPS — tight gaps, grid-frame look - -------------------------------------------------------------------------- */ - -[class*="CardGroup"], -[class*="card-group"], -[class*="cards-grid"], -.card-group { - gap: 12px !important; -} - -/* Columns component — same spacing */ -[class*="Columns"], +/* / — tight gaps, grid-frame look */ +.card-group, .columns { gap: 12px !important; } /* -------------------------------------------------------------------------- - CALLOUTS — Info / Note / Tip / Warning / Check / Danger - Thin accent left border, sharp corners + CALLOUTS — Info / Note / Tip / Warning / Danger / Check + Thin accent left border, sharp corners, Sei palette. Mintlify tags every + callout with `data-callout-type`, which is the only stable hook (the + colour utility classes on the element change between releases). + info → neutral grey note → blue + tip → green ("live") check → green + warning → gold danger → maroon -------------------------------------------------------------------------- */ -[class*="callout"], -.callout, -blockquote[class*="info"], -blockquote[class*="warning"], -blockquote[class*="note"], -blockquote[class*="tip"], -blockquote[class*="danger"], -blockquote[class*="check"] { +.callout { border-radius: var(--sei-radius-sm) !important; border-width: 1px !important; border-left-width: 3px !important; @@ -374,77 +314,108 @@ blockquote[class*="check"] { line-height: 1.55 !important; } -/* Info — neutral grey with slight blue tint */ -[class*="callout-info"], -[class*="info-callout"], -.callout.info, -blockquote.info { - background: rgba(59, 130, 246, 0.04) !important; - border-color: rgba(59, 130, 246, 0.14) !important; - border-left-color: rgba(59, 130, 246, 0.55) !important; +/* Body copy stays neutral (Mintlify tints it yellow/red/blue per type, which + clashes with the gold/maroon bars); the type colour lives in bar + icon. */ +.callout > div:not([data-component-part="callout-icon"]) { + color: var(--sei-grey-600) !important; +} + +.dark .callout > div:not([data-component-part="callout-icon"]) { + color: var(--sei-grey-25) !important; } -.dark [class*="callout-info"], -.dark [class*="info-callout"], -.dark .callout.info, -.dark blockquote.info { - background: rgba(59, 130, 246, 0.07) !important; - border-color: rgba(147, 197, 253, 0.14) !important; - border-left-color: rgba(147, 197, 253, 0.45) !important; +/* Info — neutral */ +.callout[data-callout-type="info"] { + background: rgba(128, 128, 128, 0.06) !important; + border-color: rgba(128, 128, 128, 0.18) !important; + border-left-color: var(--sei-grey-200) !important; +} +.callout[data-callout-type="info"] [data-component-part="callout-icon"] svg { + color: var(--sei-grey-200) !important; +} +.dark .callout[data-callout-type="info"] { + background: rgba(128, 128, 128, 0.09) !important; + border-color: rgba(128, 128, 128, 0.2) !important; + border-left-color: var(--sei-grey-75) !important; +} +.dark .callout[data-callout-type="info"] [data-component-part="callout-icon"] svg { + color: var(--sei-grey-75) !important; } -/* Warning — gold/amber */ -[class*="callout-warning"], -[class*="warning-callout"], -.callout.warning, -blockquote.warning { +/* Note — blue */ +.callout[data-callout-type="note"] { + background: rgba(59, 130, 246, 0.05) !important; + border-color: rgba(59, 130, 246, 0.16) !important; + border-left-color: rgb(37, 99, 235) !important; +} +.callout[data-callout-type="note"] [data-component-part="callout-icon"] svg { + color: rgb(37, 99, 235) !important; +} +.dark .callout[data-callout-type="note"] { + background: rgba(59, 130, 246, 0.08) !important; + border-color: rgba(147, 197, 253, 0.16) !important; + border-left-color: rgb(147, 197, 253) !important; +} +.dark .callout[data-callout-type="note"] [data-component-part="callout-icon"] svg { + color: rgb(147, 197, 253) !important; +} + +/* Tip / Check — green */ +.callout[data-callout-type="tip"], +.callout[data-callout-type="check"] { + background: rgba(56, 223, 0, 0.05) !important; + border-color: rgba(56, 223, 0, 0.2) !important; + border-left-color: #1a7a00 !important; +} +.callout[data-callout-type="tip"] [data-component-part="callout-icon"] svg, +.callout[data-callout-type="check"] [data-component-part="callout-icon"] svg { + color: #1a7a00 !important; +} +.dark .callout[data-callout-type="tip"], +.dark .callout[data-callout-type="check"] { + background: rgba(56, 223, 0, 0.07) !important; + border-color: rgba(56, 223, 0, 0.18) !important; + border-left-color: var(--sei-live) !important; +} +.dark .callout[data-callout-type="tip"] [data-component-part="callout-icon"] svg, +.dark .callout[data-callout-type="check"] [data-component-part="callout-icon"] svg { + color: var(--sei-live) !important; +} + +/* Warning — gold */ +.callout[data-callout-type="warning"] { background: rgba(150, 111, 34, 0.06) !important; border-color: rgba(150, 111, 34, 0.2) !important; border-left-color: var(--sei-gold-100) !important; } - -.dark [class*="callout-warning"], -.dark [class*="warning-callout"], -.dark .callout.warning, -.dark blockquote.warning { +.callout[data-callout-type="warning"] [data-component-part="callout-icon"] svg { + color: var(--sei-gold-100) !important; +} +.dark .callout[data-callout-type="warning"] { background: rgba(214, 201, 172, 0.06) !important; border-color: rgba(214, 201, 172, 0.15) !important; border-left-color: var(--sei-gold-25) !important; } +.dark .callout[data-callout-type="warning"] [data-component-part="callout-icon"] svg { + color: var(--sei-gold-25) !important; +} /* Danger — maroon */ -[class*="callout-danger"], -[class*="danger-callout"], -.callout.danger, -blockquote.danger { +.callout[data-callout-type="danger"] { background: rgba(96, 0, 20, 0.05) !important; border-color: rgba(96, 0, 20, 0.18) !important; border-left-color: var(--sei-maroon-100) !important; } - -.dark [class*="callout-danger"], -.dark [class*="danger-callout"], -.dark .callout.danger, -.dark blockquote.danger { +.callout[data-callout-type="danger"] [data-component-part="callout-icon"] svg { + color: var(--sei-maroon-100) !important; +} +.dark .callout[data-callout-type="danger"] { background: rgba(96, 0, 20, 0.12) !important; border-color: rgba(185, 155, 161, 0.18) !important; border-left-color: var(--sei-maroon-25) !important; } - -/* Check — green */ -[class*="callout-check"], -.callout.check { - background: rgba(56, 223, 0, 0.04) !important; - border-color: rgba(56, 223, 0, 0.14) !important; - border-left-color: rgba(56, 223, 0, 0.55) !important; -} - -/* Tip — cream/gold */ -[class*="callout-tip"], -.callout.tip { - background: rgba(214, 201, 172, 0.08) !important; - border-color: rgba(214, 201, 172, 0.18) !important; - border-left-color: var(--sei-cream) !important; +.dark .callout[data-callout-type="danger"] [data-component-part="callout-icon"] svg { + color: var(--sei-maroon-25) !important; } /* -------------------------------------------------------------------------- @@ -522,7 +493,8 @@ table td code, .dark .prose td code, .dark article td code, -.dark table td code { +.dark table td code, +.dark .prose th code { background: rgba(185, 155, 161, 0.1) !important; border-color: rgba(185, 155, 161, 0.15) !important; color: var(--sei-cream) !important; @@ -562,7 +534,9 @@ article :not(pre) > code { } /* -------------------------------------------------------------------------- - CODE BLOCKS (Shiki) — sharp corners, grey-600 bg in dark + CODE BLOCKS (Shiki) — sharp corners, grey-600 bg in dark. + docs.json sets `styling.codeblocks: "dark"`, so code surfaces are dark in + BOTH themes; anything that sits on them must use the dark-mode accent. -------------------------------------------------------------------------- */ .prose pre, @@ -658,22 +632,26 @@ article a:not([class*="card"]):not([class*="button"]):hover { border-bottom-color: var(--sei-cream); } +/* Heading anchor links — Mintlify handles the hover reveal; just make sure the + prose link underline above never shows on them. */ +.prose h1 a[href^="#"], +.prose h2 a[href^="#"], +.prose h3 a[href^="#"], +.prose h4 a[href^="#"] { + border-bottom: none !important; +} + /* -------------------------------------------------------------------------- - STEPS — Sei maroon step indicators + STEPS — Sei maroon step indicators (Mintlify: .steps > .step > …step-indicator) -------------------------------------------------------------------------- */ -[class*="steps"] [class*="step-number"], -[class*="Step"] [class*="number"], -.steps li::before, -ol.steps li::marker { +.steps [class*="step-indicator"] { background-color: var(--sei-maroon-100) !important; color: var(--sei-white) !important; border-radius: var(--sei-radius-sm) !important; } -.dark [class*="steps"] [class*="step-number"], -.dark [class*="Step"] [class*="number"], -.dark .steps li::before { +.dark .steps [class*="step-indicator"] { background-color: var(--sei-maroon-200) !important; color: var(--sei-cream) !important; } @@ -683,148 +661,169 @@ ol.steps li::marker { -------------------------------------------------------------------------- */ [role="tab"][aria-selected="true"], -[role="tab"][data-state="active"], -button[aria-selected="true"][role="tab"] { +[role="tab"][data-state="active"] { color: var(--sei-maroon-100) !important; border-color: var(--sei-maroon-100) !important; } .dark [role="tab"][aria-selected="true"], -.dark [role="tab"][data-state="active"], -.dark button[aria-selected="true"][role="tab"] { +.dark [role="tab"][data-state="active"] { + color: var(--sei-maroon-25) !important; + border-color: var(--sei-maroon-25) !important; +} + +/* tabs sit on the code header, which is dark in BOTH themes. + Maroon-100 on that #0b0c0e header is 1.4:1 in light mode, so always use the + dark-mode accent there. */ +.code-group [role="tab"][aria-selected="true"], +.code-group [role="tab"][data-state="active"], +.codeblock-dark [role="tab"][aria-selected="true"], +.codeblock-dark [role="tab"][data-state="active"] { color: var(--sei-maroon-25) !important; border-color: var(--sei-maroon-25) !important; } /* -------------------------------------------------------------------------- - SIDEBAR — dense, narrow, Sei-styled active state - Mintlify hardcodes w-[19rem] (304px). We narrow the sidebar, sync the - main-content offset, and ensure the footer spans the full page width. + PAGE LAYOUT — sidebar | gutter | article | gutter | TOC + -------------------------------------------------------------------------- + Mintlify's mint theme renders this on desktop (≥1024px): + + div[lg:flex] wrapper: max-w-8xl mx-auto lg:px-8 + ├─ nav#sidebar sticky, w-[18rem] + └─ main#content-container flex-1 + └─ div.flex-row-reverse.gap-12 + ├─ div#content-side-layout TOC column (≥1280px only) + │ └─ div#table-of-contents-layout pl-10 w-[19rem] + └─ div#content-area px-1 lg:pl-[5.7rem] lg:-ml-12 xl:w-[calc(100%-28rem)] + footer#footer > div px-8, capped at 984px, centred + + Only hook onto the stable ids (#sidebar, #content-container, #content-area, + #content-side-layout, #table-of-contents-layout, #navbar, #footer) and + structural `:has()` selectors. Mintlify renames its arbitrary-value + Tailwind classes between releases (lg:pl-[23.7rem] → lg:pl-[5.7rem], + max-w-[984px] → max-w-246, …), which silently broke earlier class-keyed + overrides and left a 91px gutter on the left of the article but 4px on + the right. Dimensions are the `--sei-page-px` … `--sei-layout-max` tokens. -------------------------------------------------------------------------- */ -/* 1. The sidebar column itself */ -#sidebar { - width: 220px !important; - left: 0 !important; - margin-left: 0 !important; -} - -/* 2. Main content wrapper — align with our 220px sidebar. - Mintlify adds `lg:pl-[23.7rem]` (≈379px, sized for its 19rem/304px sidebar) - together with `lg:-ml-12` (-48px) on #content-area. That pushes text far - past our narrower sidebar and leaves a huge blank gutter on the right. - We reset the negative margin and shrink the padding to `sidebar + gutter`. */ @media (min-width: 1024px) { - [class*="peer-[.is-not-custom]:peer-[.is-not-center]:max-w-8xl"][class*="peer-[.is-not-custom]:px-4"][class*="peer-[.is-not-custom]:mx-auto"] { - max-width: none !important; - margin-left: 0 !important; - margin-right: 0 !important; + /* 1. Wrapper holding sidebar + content: flush left, capped and centred on + very wide screens so article lines never grow unreadably long. */ + div:has(> #sidebar) { + max-width: var(--sei-layout-max) !important; + margin-left: auto !important; + margin-right: auto !important; padding-left: 0 !important; + padding-right: var(--sei-page-px) !important; } - #content-area[class*="lg:pl-[23.7rem]"], - div[class*="lg:pl-[23.7rem]"] { - padding-left: 252px !important; /* 220px sidebar + 32px gutter */ - padding-right: 32px !important; + /* 2. Sidebar column */ + #sidebar { + width: var(--sei-sidebar-w) !important; + min-width: var(--sei-sidebar-w) !important; + left: 0 !important; + margin-left: 0 !important; } - div[class*="lg:-ml-12"] { + /* 3. Article column — one gutter each side, no negative margin, and let it + take whatever the TOC leaves over (Mintlify's xl:w-[calc(100%-28rem)] + assumes its own 28rem side column). */ + #content-area { + flex: 1 1 0% !important; + width: auto !important; + min-width: 0 !important; margin-left: 0 !important; + margin-right: 0 !important; + padding-left: var(--sei-gutter) !important; + padding-right: var(--sei-gutter) !important; } - /* Legacy selectors kept for older Mintlify builds */ - div[class*="lg:ml-[19rem]"]:not(#footer):not(.advanced-footer) { - margin-left: 220px !important; - } - div[class*="lg:pl-16"] { - padding-left: 32px !important; + /* 4. Row holding TOC + article: the gutter is #content-area's padding, so + drop Mintlify's extra gap-12 (48px) that only applied on the TOC side. */ + #content-container > div:has(> #content-area) { + gap: 0 !important; } } -/* 3. Article width override — wide pages have no TOC, so the `calc(100%-Nrem)` - width (that reserves TOC space) would leave the column narrow and, - together with `mx-auto`, centered with blank space on the right. Let it - fill the full width of its flex parent instead. */ @media (min-width: 1280px) { - div[class*="xl:w-[calc(100%-19rem)]"], - div[class*="xl:w-[calc(100%-28rem)]"] { - width: 100% !important; - } - - /* 3a. Symmetrical content/TOC gutter. - Mintlify stacks three pieces of horizontal space between the article - text and the TOC text: (a) the content-area's own `padding-right: 32px` - (set above), (b) a `gap-12` (48px) on the flex row between content and - TOC, and (c) a `pl-10` (40px) inside the TOC layout. That totals 120px - on the right while the left gutter (sidebar edge → article text) is - only 32px. Collapse (b) and (c) so the right-hand gap matches the left. */ - #content-container > div[class*="flex-row-reverse"][class*="gap-12"] { - gap: 0 !important; + /* 5. TOC column — fixed width, no inner left padding (pl-10) since the + gutter already comes from #content-area. Width lives on the column + (a row flex item); the inner layout just fills it. */ + #content-side-layout { + flex: 0 0 var(--sei-toc-w) !important; + width: var(--sei-toc-w) !important; + min-width: var(--sei-toc-w) !important; + max-width: var(--sei-toc-w) !important; } - div[class*="pl-10"][class*="w-[19rem]"], #table-of-contents-layout { + width: 100% !important; + min-width: 0 !important; + max-width: none !important; padding-left: 0 !important; } - - /* 3b. TOC width — Mintlify hardcodes w-[19rem] (304px), which dwarfs the - article column on standard laptop widths. Shrink to ~60% so the - article gets the space it needs. */ - div[class*="pl-10"][class*="w-[19rem]"], - div[class*="w-[19rem]"]:has(#table-of-contents-layout), - #table-of-contents-layout { - width: 180px !important; - min-width: 180px !important; - max-width: 180px !important; - flex: 0 0 180px !important; - } } -/* 4. Footer — span the full page width. - Mintlify renders `