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;
  --top-app-bar-padding-vertical: .5rem;
  --footer-height: 3.5rem;

  --safe-area-inset-top: env(safe-area-inset-top);
}

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

img {
  max-width: 100%;
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) transparent;
  }
}

@supports selector(::-webkit-scrollbar) {
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  *::-webkit-scrollbar-track {
    background: none;
    margin: 4px;
  }
  *::-webkit-scrollbar-thumb {
    border: none;
  }
  *::-webkit-scrollbar-thumb:hover,
  *::-webkit-scrollbar-thumb:active {
    background-color: var(--md-sys-color-secondary);
  }
  * {
    scrollbar-width: unset;
    scrollbar-color: unset;
  }
}

.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;
  margin-bottom: 1.75rem;
  border-radius: 28px;
  background-color: var(--md-sys-color-surface);
}
.page-menu {
  height: fit-content;
  padding: 1.25rem 1.75rem;
  border-radius: 28px;
  background-color: var(--md-sys-color-surface);
}
.site-menu > *,
.page-menu > * {
  position: relative;
}
.title {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 22px;
}
.tsd-page-title {
  word-break: break-all;
}
.tsd-page-toolbar {
  padding: 1rem 0;
  background-color: var(--color-background);
  border-bottom: none;
}
.tsd-page-toolbar .tsd-toolbar-icon {
  padding: 20px 0;
}
#tsd-search {
  border-radius: 38px;
}
#tsd-search-input {
  border-radius: 22px;
}
#tsd-search-input:focus-visible {
  background-color: var(--color-accent);
}
#tsd-search-results > li {
  background: none;
}
#tsd-toolbar-menu-trigger,
#tsd-search-trigger {
  border-radius: 50%;
}
html:not(.has-menu) .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 {
  margin-bottom: 0.5rem;
}
.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-accordion .tsd-accordion-summary > svg,
.tsd-index-accordion .tsd-accordion-summary > svg {
  position: absolute;
  right: 1.5rem;
}
.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) {
  .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);
  }
  .site-menu {
    margin-top: 0;
  }
  .page-menu {
    margin-left: 1rem;
  }
  .col-sidebar {
    margin-right: 0;
  }
}