@jsprismarine/typedoc-material-theme/assets/style.css

A TypeDoc theme based on Material 3.

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --font-sans: "Space Grotesk", sans-serif;
  --font-mono: "Space Mono", monospace;

  --color-background: var(--md-sys-color-surface-container);
  --color-background-secondary: var(--md-sys-color-surface-container-high);
  --color-background-warning: var(--md-sys-color-error-container);
  --color-warning-text: var(--md-sys-color-on-error-container);
  --color-icon-background: var(--md-sys-color-on-primary);
  --color-accent: var(--md-sys-color-secondary-container);
  --color-active-menu-item: var(--md-sys-color-surface-container-highest);
  --color-text: var(--md-sys-color-on-surface);
  --color-text-aside: var(--md-sys-color-on-surface-variant);
  --color-link: var(--md-sys-color-primary);

  --color-ts-project: var(--md-sys-color-secondary);
  --color-ts-module: var(--color-ts-project);
  --color-ts-namespace: var(--color-ts-project);

  --color-ts-enum: var(--md-sys-color-tertiary);
  --color-ts-enum-member: var(--color-ts-enum);

  --color-ts-variable: var(--md-sys-color-primary);
  --color-ts-function: var(--md-sys-color-secondary);
  --color-ts-class: var(--md-sys-color-tertiary);
  --color-ts-interface: var(--md-sys-color-tertiary);

  --color-ts-constructor: var(--md-sys-color-inverse-primary);

  --color-ts-property: var(--md-sys-color-on-background);
  --color-ts-method: var(--color-ts-function);

  --color-ts-call-signature: var(--color-ts-method);
  --color-ts-index-signature: var(--color-ts-property); /* ? */
  --color-ts-constructor-signature: var(--color-ts-function);
  --color-ts-parameter: var(--md-sys-color-primary);

  --color-ts-type-parameter: var(--md-sys-color-tertiary);
  --color-ts-accessor: var(--color-ts-property);
  --color-ts-get-signature: var(--color-ts-accessor);
  --color-ts-set-signature: var(--color-ts-accessor);
  --color-ts-type-alias: var(--md-sys-color-tertiary);

  /* --external-icon: var(--md-sys-external-icon);
  --color-scheme: var(--md-sys-color-scheme); */

  --top-app-bar-height: 4.5rem;
  --footer-height: 3.5rem;
}

body {
  font-family: var(--font-sans);
}
code,
pre {
  font-family: var(--font-mono);
}

img {
  max-width: 100%;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: none;
}
*::-webkit-scrollbar-thumb {
  border: none;
}

.container-main {
  min-height: calc(100vh - var(--top-app-bar-height) - var(--footer-height));
}
.col-content {
  overflow: hidden;
  box-sizing: border-box;
  padding: 1.75rem;
  border-radius: 28px;
  background-color: var(--md-sys-color-surface);
}
.page-menu {
  height: fit-content;
  padding: 0.75rem 1.75rem;
  border-radius: 28px;
  background-color: var(--md-sys-color-surface);
}
.site-menu > *,
.page-menu > * {
  position: relative;
}
.title {
  display: block;
  max-width: calc(100% - 5rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 22px;
}

.tsd-page-toolbar {
  padding: 8px 0;
  height: calc(var(--top-app-bar-height) - 16px);
  background-color: var(--color-background);
  border-bottom: none;
}
.tsd-page-toolbar .tsd-toolbar-contents {
  height: 56px;
}
.tsd-page-toolbar .table-cell {
  height: 56px;
  margin-left: 1.5rem;
}
.tsd-page-toolbar .tsd-toolbar-icon {
  padding: 20px 0;
}
#tsd-search {
  line-height: 56px;
  border-radius: 22px;
}
#tsd-search .results {
  z-index: -1;
  top: calc(56px - 22px);
  padding-top: 22px;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.125);
  background-color: var(--color-background-secondary);
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  overflow: hidden;
}
#tsd-search .results li {
  background: none;
}
#tsd-search .results a {
  padding: 1rem 0.25rem;
}
.col-sidebar {
  padding-top: 0;
  margin-right: 1rem;
}

.tsd-signature {
  padding: 1rem 1.5rem;
  border-radius: 24px;
  background-color: var(--md-sys-color-surface-container);
}

.tsd-page-navigation ul {
  padding-left: 0.44rem;
}
.tsd-navigation a,
.tsd-navigation summary > span,
.tsd-page-navigation a {
  padding: 0.88rem;
  border-radius: 24px;
}
.tsd-navigation a:hover,
.tsd-page-navigation a:hover {
  text-decoration: none;
  background-color: var(--md-sys-color-surface-container-high);
}
.page-menu .tsd-accordion-summary svg {
  position: absolute;
  right: 0;
}
.site-menu .tsd-navigation .tsd-accordion-summary {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
}

.tsd-small-nested-navigation {
  margin-left: 1rem;
}
.tsd-nested-navigation {
  margin-left: 2.5rem;
}
.tsd-nested-navigation > li > a,
.tsd-nested-navigation > li > span {
  width: 100%;
}
.tsd-navigation > a,
.tsd-navigation .tsd-accordion-summary {
  width: 100%;
}
.tsd-index-accordion .tsd-accordion-summary > svg {
  position: absolute;
  right: 1.5rem;
  margin-top: 1rem;
}
.tsd-accordion-summary .tsd-kind-icon ~ span {
  margin-right: 2.5rem;
}
.tsd-accordion-summary .tsd-nested-navigation > li > a,
.tsd-nested-navigation > li > span {
  width: calc(100% - 0.44rem);
}
.tsd-kind-icon ~ span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tsd-generator {
  padding: 0;
  border-top: none;
  height: var(--footer-height);
  line-height: var(--footer-height);
}
.tsd-generator > p {
  padding: 0 2rem;
}

@media (max-width: 769px) {
  .container {
    padding: 1rem;
  }
  .col-sidebar {
    margin-right: 0;
  }
}
@media (min-width: 770px) {
  .container-main {
    margin: 0 auto;
  }
  .site-menu {
    margin-right: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .page-menu,
  .site-menu {
    max-height: calc(100vh - var(--footer-height) - var(--top-app-bar-height));
    top: var(--top-app-bar-height);
  }
  .page-menu {
    margin-left: 1rem;
  }
  .col-sidebar {
    margin-right: 0;
  }
}