style.css

/* Custom styles for Teable documentation */

/* Reserve the Mintlify navigation logo's rendered size before the image loads. */
.nav-logo {
  width: 108px;
  height: 28px;
  object-fit: contain;
}

/* Hide changelog left date column, expand content */
[data-continuous-changelog] > [data-changelog-footer],
[data-changelog-year] > a { display: none !important; }

.changelog-year summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.75rem;
}
.changelog-year summary::-webkit-details-marker { display: none; }
.changelog-year summary::marker { content: ""; }
.changelog-year summary svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.changelog-year[open] summary svg { transform: rotate(90deg); }
.changelog-year summary, .changelog-year a { color: #374151; }
.dark .changelog-year summary, .dark .changelog-year a { color: #9ca3af; }
.changelog-year summary:hover, .changelog-year a:hover { color: #111827; }
.dark .changelog-year summary:hover, .dark .changelog-year a:hover { color: #d1d5db; }
.changelog-year summary:focus-visible, .changelog-year a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.changelog-year ul { list-style: none; padding: 0; margin: 0; }
.changelog-year a {
  display: block;
  margin-block: 0.125rem;
  padding: 0.375rem 1rem 0.375rem 2rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
}
.changelog-year a:hover, .changelog-year summary:hover { background: rgb(156 163 175 / 8%); }
.changelog-year a[aria-current] {
  color: rgb(var(--primary));
  background: rgb(var(--primary) / 10%);
  text-shadow: -0.2px 0 0 currentColor, 0.2px 0 0 currentColor;
}
.changelog-year a[aria-busy] { opacity: 0.5; }
.changelog-next-month { display: block; padding-block: 2rem; }
.changelog-next-month[hidden] { display: none; }
.update-container { scroll-margin-top: 180px; }
.update-container[hidden], .toc-item[hidden] { display: none !important; }
.changelog-title-anchor { display: block; scroll-margin-top: 180px; }
#content[data-continuous-changelog] { display: flex; flex-direction: column; }
#changelog-month-stream { display: contents; }
.changelog-next-month { order: 1; }

.update-container > div:first-child {
  display: none !important;
}

/* Mintlify's native heading link sits in the left gutter. */
.update-container > div:has(> [data-component-part="update-content"]) {
  overflow: visible;
  min-width: 0;
}

#content .changelog-heading-link {
  color: inherit;
  font: inherit;
  text-decoration: none;
  border: 0;
}
#content .changelog-heading-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Hide sidebar collapse button */
:has(> svg[style*="arrow-left-from-line"]) {
  display: none !important;
}

/* Hide eyebrow label above page title */
.eyebrow {
  display: none !important;
}

/* Native links keep Card destinations discoverable and the entire card clickable. */
.docs-card-link {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
}

.docs-card-link .card {
  cursor: pointer;
}

.docs-card-link:hover .card,
.docs-card-link:focus-visible .card {
  border-color: rgb(var(--primary)) !important;
}

/* Keep the page H1 accessible without repeating the navigation title visually. */
#header:has(~ #content[data-page-href*="/changelog"]) #page-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#header:has(~ #content[data-page-href*="/changelog"]) {
  position: relative;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#header:has(~ #content[data-page-href*="/changelog"]) > * {
  margin: 0 !important;
}

#header:has(~ #content[data-page-href*="/changelog"]) .prose {
  display: none;
}

#header:has(~ #content[data-page-href*="/changelog"]) #page-context-menu {
  position: absolute !important;
  right: 0;
  top: 0;
  z-index: 10;
}

#content[data-page-href*="/changelog"] {
  margin-top: 0 !important;
}

#content[data-page-href*="/changelog"] > .update-container:first-of-type {
  padding-top: 0 !important;
}

/* Presentation is shared by manual and automated releases, independent of date. */
#content[data-page-href*="/changelog"] [data-component-part="update-content"] > h2:first-of-type {
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-inline-end: 2.5rem;
}

#content[data-page-href*="/changelog"] [data-component-part="update-content"] > h3 {
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 600;
}

@media (width < 640px) {
  #content[data-page-href*="/changelog"] [data-component-part="update-content"] > h2:first-of-type {
    font-size: 1.75rem;
  }
}

/* Monochrome refinements with mode-specific tone */
html:not(.dark) {
  --primary: 19 20 21;
  --primary-light: 19 20 21;
  --primary-dark: 19 20 21;
}

.dark {
  --primary: 249 250 251;
  --primary-light: 249 250 251;
  --primary-dark: 249 250 251;
}

#banner {
  background: rgb(var(--primary)) !important;
}

@layer utilities {
  html:not(.dark) #banner,
  html:not(.dark) #banner * {
    color: rgb(249, 250, 251) !important;
  }

  html:not(.dark) #banner a {
    color: rgb(249, 250, 251) !important;
    text-decoration-color: rgba(249, 250, 251, 0.7) !important;
  }

  .dark #banner,
  .dark #banner * {
    color: rgb(19, 20, 21) !important;
  }

  .dark #banner a {
    color: rgb(19, 20, 21) !important;
    text-decoration-color: rgba(19, 20, 21, 0.35) !important;
  }
}

[data-component-part="update-label"] {
  background: rgba(17, 17, 17, 0.08) !important;
  color: #111111 !important;
  border: 1px solid rgba(17, 17, 17, 0.18);
}

.dark [data-component-part="update-label"] {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f3f4f6 !important;
  border-color: rgba(255, 255, 255, 0.25);
}

/* Changelog: make the active right-side table of contents item visible */
html[data-current-path*="/changelog"] #table-of-contents .toc-item[data-changelog-active="true"] > a,
html[data-current-path*="/changelog"] #table-of-contents .toc-item[data-active] > a,
html[data-current-path*="/changelog"] #table-of-contents .toc-item[data-active-deepest] > a {
  color: rgb(var(--primary)) !important;
  font-weight: 600;
}

html[data-current-path*="/changelog"] #table-of-contents .toc-item[data-changelog-active="true"]::before,
html[data-current-path*="/changelog"] #table-of-contents .toc-item[data-active]::before,
html[data-current-path*="/changelog"] #table-of-contents .toc-item[data-active-deepest]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 999px;
  background: rgb(var(--primary));
}

html.dark[data-current-path*="/changelog"] #table-of-contents .toc-item[data-changelog-active="true"] > a,
html.dark[data-current-path*="/changelog"] #table-of-contents .toc-item[data-active] > a,
html.dark[data-current-path*="/changelog"] #table-of-contents .toc-item[data-active-deepest] > a {
  color: rgb(var(--primary)) !important;
}

/* Restore blue informational callouts */
.callout[data-callout-type="note"] {
  border-color: rgba(96, 165, 250, 0.45) !important;
  background: rgba(239, 246, 255, 0.9) !important;
}

.callout[data-callout-type="note"] [data-component-part="callout-icon"] svg {
  color: rgb(59, 130, 246) !important;
}

.callout[data-callout-type="note"] [data-component-part="callout-content"] {
  color: rgb(30, 64, 175) !important;
}

.callout[data-callout-type="note"] [data-component-part="callout-content"] strong,
.callout[data-callout-type="note"] [data-component-part="callout-content"] a,
.callout[data-callout-type="note"] [data-component-part="callout-content"] code,
.callout[data-callout-type="note"] [data-component-part="callout-content"] p,
.callout[data-callout-type="note"] [data-component-part="callout-content"] li,
.callout[data-callout-type="note"] [data-component-part="callout-content"] span {
  color: inherit !important;
}

.dark .callout[data-callout-type="note"] {
  border-color: rgba(96, 165, 250, 0.35) !important;
  background: rgba(30, 58, 138, 0.22) !important;
}

.dark .callout[data-callout-type="note"] [data-component-part="callout-icon"] svg {
  color: rgb(147, 197, 253) !important;
}

.dark .callout[data-callout-type="note"] [data-component-part="callout-content"] {
  color: rgb(219, 234, 254) !important;
}

/* Help-center screenshot cards */
.docs-screenshot {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 1.5rem auto;
  overflow: hidden;
  vertical-align: middle;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  width: auto;
}

.dark .docs-screenshot {
  border-color: rgba(255, 255, 255, 0.12);
}

.docs-inline-icon {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  margin: 0 0.1em;
  vertical-align: -0.35em;
}

.dark .docs-inline-icon {
  filter: invert(1);
}

@media (max-width: 640px) {
  .docs-screenshot {
    margin: 1.25rem auto;
    border-radius: 12px;
  }
}

/* Move language selector to bottom-right on desktop only */
@media (min-width: 1024px) {
  #localization-select-trigger {
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
    z-index: 50 !important;
  }
}