n8n-docs/docs/_extra/css/extra.css

@font-face {
    font-family: 'Lexend-Regular';
    src: url('./Lexend/Lexend-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


:root {
  --md-text-font: "Lexend-Regular";
  --color-primary: #530092;
  --color-text-base: #58585F;
  --color-text-light: #FDF6EC;
  --color-background-dark: #040506;
  --color-background-light: #FDF6EC;
}

/* This snippet targets the navigation nodes labled as data-md-level = 1 in the HTML.
   These are the first-level headings in each section of the Docs site.
   For example, Getting Started, which is under Using n8n
*/

nav[data-md-level="1"] > .md-nav__list > .md-nav__item {
  border-bottom: 1px solid;
  border-color: #EEEEEE;
  padding-bottom: 1.25em !important;
}

/* light mode */
  
[data-md-color-scheme="light"] {
--md-typeset-color: var(--color-text-base);
--md-typeset-a-color: var(--color-primary);
--md-accent-fg-color: var(--color-primary);
--md-footer-bg-color: var(--color-background-light);
--md-footer-fg-color: var(--color-text-base);
--md-footer-bg-color--dark: var(--color-background-dark);
/* header colors */
--md-primary-bg-color: var(--color-text-light); 
--md-primary-fg-color: var(--color-background-dark);
}

/* Increase heading weight */
[data-md-color-scheme="light"] .md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-weight: 600;
}

/* White color for font in header nav */
[data-md-color-scheme="light"] .md-header, [data-md-color-scheme="light"] .md-tabs {
  color: white;
}

/* Search box */
[data-md-color-scheme="light"] .md-search__input {
  border: 1px solid var(--color-primary);
  background-color: white;
  color: var(--color-text-base);
} 
[data-md-color-scheme="light"] .md-search__input::placeholder, [data-md-color-scheme="light"] .md-search__icon {
  color: var(--color-text-base);
  opacity: 1;
}

/* Optional announcement banner */
.md-banner {
  background-color: var(--color-background-light);
  color: var(--color-text-base);
}

/* footer */
.md-footer {
  border-top: 1px solid var(--color-background-dark);
}

/* font sizes */
.md-typeset {
  font-size: 0.9rem;
}

.md-nav {
  font-size: 0.8rem;
}

.md-tabs__link {
  font-size: 0.8rem;
}

/* preserve the logo and site title on page scroll */
.md-header__topic:first-child {
  font-weight: 500;
}

.md-header__topic, .md-header__topic+.md-header__topic, .md-header__title--active .md-header__topic {
  transform: none;
  transition: none;
  opacity: 1;
}

/* better table behaviour */

.md-typeset table:not([class]) td:first-of-type {
white-space: pre;
}

/* bigger font in table */
.table-without-whitespace-pre td:first-of-type {
white-space: unset;
}

.md-typeset table:not([class]) {
font-size: 0.75rem
}

/* display tables at full width */
.md-typeset__table {
  width: 100%;
}

.md-typeset__table table:not([class]) {
  display: table
}

/* img borders */

.md-typeset img, .md-typeset svg, .md-typeset video {
  border: 1px solid #DBDFE7;
  border-radius: 4px;
}

.md-typeset :is(.emojione,.twemoji,.gemoji) svg {
  border: 0;
}

button:nth-child(1) > svg, button:nth-child(2) > svg
{
  border: 0;
}

.md-content__button > svg {
  border: 0;
}

/* remove lightbox controls so users can't slideshow */
.gnext, .gprev {
  display: none !important;
}

/* reduce padding between title and breadcrumbs */  
.md-content__inner {
  padding-top: 0;
}

/* for beta label */
.md-status--beta::after {
  background-color: var(--color-text-base);
  border-radius: 0.2rem;
  color: white;
  content: "beta";
  font-size: 0.5rem;
  height: auto;		
  padding: 0.1rem 0.2rem;
  -webkit-mask-image: none;
  width: auto;
}

.md-status:hover:after {
  background-color: var(--color-text-base);
} 

/* Style vertical grid cards e.g. on Self-hosting homepage */
.grid-cards-vertical {
  grid-gap: .4rem;
  display: grid;
}

.grid-cards-vertical.cards>:-webkit-any(ul,ol) {
  display: contents;
}

.grid-cards-vertical.cards>:is(ul,ol)>li {
  display: block;
}

 /* n8n classes */

/* The tab links for other n8n sites */
.n8n-other-sites {
	display: flex;
	justify-content: space-between;
}

/* Kapa */
/* Button to open Kapa search */

.n8n-kapa-button {
  background: linear-gradient(180deg, #A13355 0%, #530092 100%);
  border-radius: .1rem;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-size: 1.4em;
  margin-right: 2em;
  padding: 0.5em 0.75em;
}

.n8n-kapa-button > .md-search__icon {
  color: white;
}

.n8n-search-text {
  align-content: center;
  margin-left: 0.5em;
}

/* wraps the Kapa button at the bottom of content pages */
.n8n-wrap-kapa {
  border-top: 1px solid #eee;
  padding: 1em 0 0 0;
  margin-top: 2em;
}

.n8n-wrap-kapa > .n8n-kapa-button {
  justify-content: center;
  width: 100%;
}

.n8n-wrap-kapa > button > span.md-search__icon.md-icon {
align-self: anchor-center;
}

.n8n-wrap-kapa > button > span.md-search__icon.md-icon > svg {
  border: none;
  display: inline;
}

/* new features box on release notes */ 
.n8n-new-features {
  background-color: var(--color-background-light);
  border: 1px solid var(--color-background-dark);
  padding: 1em;
}

.n8n-new-features p {
  margin: 0;
}

.n8n-new-features > h4 {
  margin-top: 0;
}

.n8n-new-features + .n8n-new-features {
  margin-top: 1em;
}

/* Inline images e.g. button icons */
.n8n-inline-image {
  display:inline-block;
  max-width: 25px;
  max-height: 25px;
  vertical-align: middle;
}

.n8n-inline-image > img {
  border: none;
}