zitadel/docs/src/css/custom.css

/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
@import url('https://fonts.googleapis.com/css2?family=Lato');

:root {
  --ifm-color-primary: #556cd1;
  --ifm-color-primary-dark: #3e58cb;
  --ifm-color-primary-darker: #3550c5;
  --ifm-color-primary-darkest: #2c42a2;
  --ifm-color-primary-light: #6c80d7;
  --ifm-color-primary-lighter: #788ada;
  --ifm-color-primary-lightest: #9aa8e4;
  --ifm-code-font-size: 95%;
  --ifm-font-family-base: 'Lato', sans-serif;
  --ifm-hero-background-color: var(--ifm-color-primary);
  --ifm-hero-text-color: var(--ifm-font-color-base-inverse);
  --get-started: #FF2069;
  --get-started-bg-hover: var(--ifm-hero-background-color);
}

:root[data-theme="dark"] {
  --ifm-background-color: #141735;
  --ifm-hero-background-color: #0F1022;
  --ifm-hero-text-color: var(--ifm-font-color-base);
  --get-started-bg: --ifm-font-color-base;
}

.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

.get-started {
  border: 2px solid var(--get-started);
  background-color: var(--get-started);
  color: var(--ifm-hero-text-color);
}

.get-started:hover {
  background-color: var(--get-started-bg-hover);
  color: var(--ifm-hero-text-color);
}

.docs-link a {
  text-decoration: none;
  color: inherit;
}

.docs-link a:hover {
  color: var(--ifm-color-primary);
}

.docs-link img {
  margin: 40px;
}