header.rm-Header { border-bottom: none !important; box-shadow: none !important; } header:has(.rm-LandingPageHeader) [class*="VersionDropdown"] { display: none !important; } /* Hide "Home" link entirely â€” other nav items shift left to fill the gap */ nav[aria-label="Primary navigation"] a[aria-current="page"]:has(> i.icon-landing-page-2) { display: none !important; } /* Hide the active-tab pill when Home is the active link (its position math is now invalid) */ nav[aria-label="Primary navigation"]:has(a[aria-current="page"] > i.icon-landing-page-2) div[class*="Header-subnav-tab_active"] { display: none !important; } /* Hide "Home" link when viewing the API Reference section (any version) â€” also shift left */ nav[aria-label="Primary navigation"]:has(a[aria-current="page"][href*="/reference"]) a:has(> i.icon-landing-page-2) { display: none !important; } /* ========================================================================== Callout banners â€” shared base + color modifiers Usage: Variants: callout-banner--important (red), callout-banner--note (green), callout-banner--neutral (light/grey) ========================================================================== */ .callout-banner { background-color: var(--callout-bg); border: 1px solid var(--callout-border); border-radius: 12px; padding: 20px 24px 20px 20px; margin: 16px 0; display: flex; gap: 12px; transition: background-color 0.2s ease, border-color 0.2s ease; } .callout-banner .callout-icon { font-size: 16px !important; line-height: 1.6 !important; color: var(--callout-icon) !important; } /* If using Font Awesome instead of a unicode character (web-font method) */ .callout-banner .callout-icon i { font-size: inherit; line-height: inherit; color: inherit; } /* If Font Awesome replaces with an inline /
/ elements ReadMe outputs directly. Text color uses the :not(#_) specificity-boost trick because plain `table th`/`table td` + !important was losing to ReadMe's own theme rule (same issue we saw with the row-highlight background earlier). ========================================================================== */ table { width: 100%; border-collapse: collapse !important; margin: 16px 0; } table th:not(#_):not(#_) { text-align: left !important; font-weight: 600 !important; font-size: 15px !important; color: #333333 !important; padding: 12px 16px !important; border: none !important; border-bottom: 1px solid #e0e0e2 !important; background: none !important; background-color: transparent !important; } table td:not(#_):not(#_) { text-align: left !important; font-size: 15px !important; line-height: 1.6 !important; color: #333333 !important; padding: 16px !important; border: none !important; border-bottom: 1px solid #ececee !important; background: none !important; background-color: transparent !important; vertical-align: top !important; } table tr:last-child td:not(#_):not(#_) { border-bottom: none !important; } table a:not(#_):not(#_) { color: #038851 !important; text-decoration: underline; } @media (prefers-color-scheme: dark) { table th:not(#_):not(#_) { color: #d8dae0 !important; border-bottom: 1px solid #34364a !important; } table td:not(#_):not(#_) { color: #d8dae0 !important; border-bottom: 1px solid #2c2e3d !important; } table a:not(#_):not(#_) { color: #4fcb8c !important; } } html[data-color-mode="dark"] table th:not(#_):not(#_), html[data-color-mode="dark"] table th:not(#_):not(#_) { color: #d8dae0 !important; border-bottom: 1px solid #34364a !important; } html[data-color-mode="dark"] table td:not(#_):not(#_), html[data-color-mode="dark"] table td:not(#_):not(#_) { color: #d8dae0 !important; border-bottom: 1px solid #2c2e3d !important; } html[data-color-mode="dark"] table a:not(#_):not(#_), html[data-color-mode="dark"] table a:not(#_):not(#_) { color: #4fcb8c !important; } /* Explicit light-mode override â€” must come after the @media/dark rules above so the site's own light-mode toggle always wins over the OS/browser prefers-color-scheme setting. Without this, a device set to dark mode would show dark-mode table colors even while the site is toggled light. */ html[data-color-mode="light"] table th:not(#_):not(#_), html[data-color-mode="light"] table th:not(#_):not(#_) { color: #333333 !important; border-bottom: 1px solid #e0e0e2 !important; } html[data-color-mode="light"] table td:not(#_):not(#_), html[data-color-mode="light"] table td:not(#_):not(#_) { color: #333333 !important; border-bottom: 1px solid #ececee !important; } html[data-color-mode="light"] table a:not(#_):not(#_), html[data-color-mode="light"] table a:not(#_):not(#_) { color: #038851 !important; } /* ========================================================================== Table row/header highlight killer â€” high-specificity override Uses :not(#_) chaining to beat ReadMe's theme without needing exact class names. Only touches background, nothing else. ========================================================================== */ table thead th:not(#_):not(#_), table th:not(#_):not(#_), table tr:not(#_):not(#_) { background: none !important; background-color: transparent !important; background-image: none !important; } /* ========================================================================== Inline code â€” remove grey background everywhere Applies globally, including inside callouts and tables. ========================================================================== */ code.rdmd-code { background: none !important; background-color: transparent !important; } /* ========================================================================== Doc buttons â€” link-styled as a button Usage: â–¶ Label text ========================================================================== */ a.doc-button { background-color: #3d8c5f; border-radius: 8px; padding: 12px 20px; color: #ffffff !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1; transition: background-color 0.2s ease; } a.doc-button:hover { background-color: #1e5c3a; color: #ffffff !important; } @media (prefers-color-scheme: dark) { a.doc-button { background-color: #4fcb8c; color: #1a2620 !important; } a.doc-button:hover { background-color: #2f9963; color: #ffffff !important; } } html[data-color-mode="dark"] a.doc-button { background-color: #4fcb8c; color: #ffffff !important; } html[data-color-mode="dark"] a.doc-button:hover { background-color: #2f9963; color: #ffffff !important; } /* ========================================================================== Code sample blocks â€” force light background in light mode Targets CodeMirror's material-palenight theme used by both the interactive Try It panel (.rm-PlaygroundRequest) and the static read-only code sample block (.rm-RawEditorRequest). ========================================================================== */ html[data-color-mode="light"] .rm-PlaygroundRequest .CodeMirror.cm-s-material-palenight, html[data-color-mode="light"] .rm-RawEditorRequest .CodeMirror.cm-s-material-palenight, html[data-color-mode="light"] .rm-RawEditorRequest .CodeMirror.cm-s-material-palenight { background-color: #ffffff !important; color: #333333 !important; } html[data-color-mode="light"] .rm-PlaygroundRequest .CodeMirror-gutters, html[data-color-mode="light"] .rm-RawEditorRequest .CodeMirror-gutters, html[data-color-mode="light"] .rm-RawEditorRequest .CodeMirror-gutters { background-color: #ffffff !important; border-right: none !important; } html[data-color-mode="light"] .rm-PlaygroundRequest .CodeMirror-linenumber, html[data-color-mode="light"] .rm-RawEditorRequest .CodeMirror-linenumber, html[data-color-mode="light"] .rm-RawEditorRequest .CodeMirror-linenumber { color: #a0a0a5 !important; } html[data-color-mode="light"] .rm-PlaygroundRequest .cm-builtin, html[data-color-mode="light"] .rm-RawEditorRequest .cm-builtin, html[data-color-mode="light"] .rm-RawEditorRequest .cm-builtin { color: #b5309c !important; } html[data-color-mode="light"] .rm-PlaygroundRequest .cm-attribute, html[data-color-mode="light"] .rm-RawEditorRequest .cm-attribute, html[data-color-mode="light"] .rm-RawEditorRequest .cm-attribute { color: #3654d1 !important; } html[data-color-mode="light"] .rm-PlaygroundRequest .cm-string, html[data-color-mode="light"] .rm-RawEditorRequest .cm-string, html[data-color-mode="light"] .rm-RawEditorRequest .cm-string { color: #038851 !important; } html[data-color-mode="light"] .rm-PlaygroundRequest .cm-comment, html[data-color-mode="light"] .rm-RawEditorRequest .cm-comment, html[data-color-mode="light"] .rm-RawEditorRequest .cm-comment { color: #8a8a90 !important; } html[data-color-mode="light"] .rm-PlaygroundRequest .cm-keyword, html[data-color-mode="light"] .rm-RawEditorRequest .cm-keyword, html[data-color-mode="light"] .rm-RawEditorRequest .cm-keyword { color: #e85a35 !important; } html[data-color-mode="light"] .rm-PlaygroundRequest .cm-number, html[data-color-mode="light"] .rm-RawEditorRequest .cm-number, html[data-color-mode="light"] .rm-RawEditorRequest .cm-number { color: #ff461e !important; } @media (prefers-color-scheme: light) { .rm-PlaygroundRequest .CodeMirror.cm-s-material-palenight, .rm-RawEditorRequest .CodeMirror.cm-s-material-palenight { background-color: #ffffff !important; color: #333333 !important; } .rm-PlaygroundRequest .CodeMirror-gutters, .rm-RawEditorRequest .CodeMirror-gutters { background-color: #ffffff !important; } .rm-PlaygroundRequest .cm-builtin, .rm-RawEditorRequest .cm-builtin { color: #b5309c !important; } .rm-PlaygroundRequest .cm-attribute, .rm-RawEditorRequest .cm-attribute { color: #3654d1 !important; } .rm-PlaygroundRequest .cm-string, .rm-RawEditorRequest .cm-string { color: #038851 !important; } .rm-PlaygroundRequest .cm-comment, .rm-RawEditorRequest .cm-comment { color: #8a8a90 !important; } .rm-PlaygroundRequest .cm-keyword, .rm-RawEditorRequest .cm-keyword { color: #e85a35 !important; } .rm-PlaygroundRequest .cm-number, .rm-RawEditorRequest .cm-number { color: #ff461e !important; } } /* ========================================================================== Code sample block background â€” CSS variable override This is the fix confirmed by manually toggling off: background: var(--APIRequest-bg, var(--gray15)) Overriding the variable itself (rather than fighting the `background` shorthand with !important) is more reliable since it flows down to every descendant that references it â€” header, footer, instructions panel, and the outer card â€” without needing a separate rule per element. ========================================================================== */ html[data-color-mode="light"] .rm-PlaygroundRequest, html[data-color-mode="light"] .rm-RawEditorRequest, html[data-color-mode="light"] .rm-RawEditorRequest { --APIRequest-bg: #f7f7fa; } html[data-color-mode="dark"] .rm-PlaygroundRequest, html[data-color-mode="dark"] .rm-RawEditorRequest, html[data-color-mode="dark"] .rm-RawEditorRequest { --APIRequest-bg: #17181b; } @media (prefers-color-scheme: light) { .rm-PlaygroundRequest, .rm-RawEditorRequest { --APIRequest-bg: #f7f7fa; } } @media (prefers-color-scheme: dark) { .rm-PlaygroundRequest, .rm-RawEditorRequest { --APIRequest-bg: #17181b; } } /* ========================================================================== Code sample header/footer â€” flip chrome to light in light mode, two-tone header/body relationship, mirrored in dark mode ========================================================================== */ html[data-color-mode="light"] .rm-PlaygroundRequest > header, html[data-color-mode="light"] .rm-RawEditorRequest > header, html[data-color-mode="light"] .rm-RawEditorRequest > header { background-color: #f7f7fa !important; color: #6b6b70 !important; } html[data-color-mode="light"] .rm-PlaygroundRequest > footer, html[data-color-mode="light"] .rm-RawEditorRequest > footer, html[data-color-mode="light"] .rm-RawEditorRequest > footer { background-color: #ffffff !important; } @media (prefers-color-scheme: light) { .rm-PlaygroundRequest > header, .rm-RawEditorRequest > header { background-color: #f7f7fa !important; color: #6b6b70 !important; } .rm-PlaygroundRequest > footer, .rm-RawEditorRequest > footer { background-color: #ffffff !important; } } /* Dark mode: header gets a subtly lighter tone than the near-black body */ html[data-color-mode="dark"] .rm-PlaygroundRequest > header, html[data-color-mode="dark"] .rm-RawEditorRequest > header, html[data-color-mode="dark"] .rm-RawEditorRequest > header { background-color: #17181b !important; color: #8a8a90 !important; } html[data-color-mode="dark"] .rm-PlaygroundRequest .CodeMirror.cm-s-material-palenight, html[data-color-mode="dark"] .rm-RawEditorRequest .CodeMirror.cm-s-material-palenight, html[data-color-mode="dark"] .rm-RawEditorRequest .CodeMirror.cm-s-material-palenight { background-color: #0b0c0e !important; } html[data-color-mode="dark"] .rm-PlaygroundRequest > footer, html[data-color-mode="dark"] .rm-RawEditorRequest > footer, html[data-color-mode="dark"] .rm-RawEditorRequest > footer { background-color: #0b0c0e !important; } @media (prefers-color-scheme: dark) { .rm-PlaygroundRequest > header, .rm-RawEditorRequest > header { background-color: #17181b !important; color: #8a8a90 !important; } .rm-PlaygroundRequest .CodeMirror.cm-s-material-palenight, .rm-RawEditorRequest .CodeMirror.cm-s-material-palenight { background-color: #0b0c0e !important; } .rm-PlaygroundRequest > footer, .rm-RawEditorRequest > footer { background-color: #0b0c0e !important; } } /* ========================================================================== Instructions panel header button text â€” light/dark color fix Scoped narrowly to color only, no border changes, to avoid the broader regression caused by an earlier border-color attempt. ========================================================================== */ html[data-color-mode="light"] .rm-PlaygroundRequest [class*="APIRequest-header-button"], html[data-color-mode="light"] .rm-RawEditorRequest [class*="APIRequest-header-button"], html[data-color-mode="light"] .rm-RawEditorRequest [class*="APIRequest-header-button"] { color: #333333 !important; } @media (prefers-color-scheme: light) { .rm-PlaygroundRequest [class*="APIRequest-header-button"], .rm-RawEditorRequest [class*="APIRequest-header-button"] { color: #333333 !important; } } html[data-color-mode="dark"] .rm-PlaygroundRequest [class*="APIRequest-header-button"], html[data-color-mode="dark"] .rm-RawEditorRequest [class*="APIRequest-header-button"], html[data-color-mode="dark"] .rm-RawEditorRequest [class*="APIRequest-header-button"] { color: #d4d4d4 !important; } @media (prefers-color-scheme: dark) { .rm-PlaygroundRequest [class*="APIRequest-header-button"], .rm-RawEditorRequest [class*="APIRequest-header-button"] { color: #d4d4d4 !important; } } /* ========================================================================== Code sample block borders â€” remove leftover dark divider lines Scoped to the outer container + header/footer only (not the instructions-body class, which caused a prior regression). ========================================================================== */ html[data-color-mode="light"] .rm-PlaygroundRequest, html[data-color-mode="light"] .rm-RawEditorRequest, html[data-color-mode="light"] .rm-RawEditorRequest { border-color: #e5e5e7 !important; } html[data-color-mode="light"] .rm-PlaygroundRequest > header, html[data-color-mode="light"] .rm-PlaygroundRequest > footer, html[data-color-mode="light"] .rm-RawEditorRequest > header, html[data-color-mode="light"] .rm-RawEditorRequest > footer, html[data-color-mode="light"] .rm-RawEditorRequest > footer { border-color: #e5e5e7 !important; } @media (prefers-color-scheme: light) { .rm-PlaygroundRequest, .rm-RawEditorRequest { border-color: #e5e5e7 !important; } .rm-PlaygroundRequest > header, .rm-PlaygroundRequest > footer, .rm-RawEditorRequest > header, .rm-RawEditorRequest > footer { border-color: #e5e5e7 !important; } } /* ========================================================================== Numbered step list â€” connected circles with title + description Usage:

1

Title

Description text, can include links.

... repeat, no extra markup needed for the last item ...
========================================================================== */ .step-list { --step-marker-bg: #ececee; --step-marker-text: #333333; --step-line: #e0e0e2; --step-title: #1a1a1a; --step-desc: #6b6b70; --step-link: #038851; margin: 20px 0; } html[data-color-mode="dark"] .step-list { --step-marker-bg: #2c2e33; --step-marker-text: #e5e6eb; --step-line: #3a3a3e; --step-title: #f0f0f2; --step-desc: #9a9aa0; --step-link: #4fcb8c; } @media (prefers-color-scheme: dark) { .step-list { --step-marker-bg: #2c2e33; --step-marker-text: #e5e6eb; --step-line: #3a3a3e; --step-title: #f0f0f2; --step-desc: #9a9aa0; --step-link: #4fcb8c; } } html[data-color-mode="light"] .step-list { --step-marker-bg: #ececee; --step-marker-text: #333333; --step-line: #e0e0e2; --step-title: #1a1a1a; --step-desc: #6b6b70; --step-link: #038851; } .step-list-item { display: flex; gap: 20px; position: relative; } .step-list-marker { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background-color: var(--step-marker-bg); color: var(--step-marker-text); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; position: relative; z-index: 1; } /* Connecting line: drawn on every item except the last */ .step-list-item:not(:last-child) .step-list-marker::after { content: ""; position: absolute; top: 32px; left: 50%; transform: translateX(-50%); width: 1px; height: calc(100% + 20px - 32px); background-color: var(--step-line); } .step-list-content { padding-bottom: 28px; padding-top: 4px; min-width: 0; } .step-list-item:last-child .step-list-content { padding-bottom: 0; } .step-list-title { margin: 0 0 6px 0; color: var(--step-title); font-size: 17px; font-weight: 500; } .step-list-desc { margin: 0; color: var(--step-desc); font-size: 15px; line-height: 1.6; } .step-list-desc a { color: var(--step-link); text-decoration: underline; } .step-list-desc strong { color: var(--step-title); font-weight: 600; } .step-list-desc code { background-color: var(--step-marker-bg); color: var(--step-title); padding: 1px 6px; border-radius: 4px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13.5px; } /* Dot-marker variant â€” for unordered lists of related items/triggers where sequence/order doesn't matter. Same connecting-line structure and marker box size as the numbered variant (so spacing/line math stays consistent), just shows a small dot instead of a number. Usage: add class="step-list--dots" alongside step-list, and use
(no number text) */ .step-list-marker--dot { background-color: transparent; } .step-list-marker--dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background-color: var(--step-link); } /* ========================================================================== Custom nav header link icon â€” "Status Page" ReadMe's "Link URL" custom nav item type has no icon field in the settings UI, so the icon is added via a CSS pseudo-element. Isolated by href (the only stable, unique hook available for this item type â€” no custom class/ID can be attached from the nav settings panel). Uses an inline SVG data URI + mask instead of a webfont/icon-font reference. This site loads Font Awesome via the Kit's SVG+JS method (it scans the DOM for

Loading…

1Pick a language

2Try It!