custom.css 3.17 KB
/**
 * 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.
 */

/* FootfallCam-inspired color scheme */
:root {
  --ifm-color-primary: #166bff;
  --ifm-color-primary-dark: #0055e6;
  --ifm-color-primary-darker: #0050d9;
  --ifm-color-primary-darkest: #0042b3;
  --ifm-color-primary-light: #3d85ff;
  --ifm-color-primary-lighter: #4a8cff;
  --ifm-color-primary-lightest: #7aafff;
  --ifm-font-family-base: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ifm-heading-font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ifm-code-font-size: 95%;
  --ifm-navbar-background-color: #fff;
  --ifm-navbar-shadow: 0 0.8px 0 #d9d9d9;
  --ifm-footer-background-color: #fff;
  --ifm-footer-color: #999;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] {
  --ifm-color-primary: #4a8cff;
  --ifm-color-primary-dark: #2d78ff;
  --ifm-color-primary-darker: #1f6eff;
  --ifm-color-primary-darkest: #0055e6;
  --ifm-color-primary-light: #67a0ff;
  --ifm-color-primary-lighter: #75a8ff;
  --ifm-color-primary-lightest: #a3c8ff;
  --ifm-navbar-background-color: #1a1a2e;
  --ifm-footer-background-color: #1a1a2e;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* Navbar styling */
.navbar {
  border-bottom: 0.8px solid #d9d9d9;
  box-shadow: none;
  height: 52px;
}
.navbar__title {
  font-weight: 500;
  font-size: 18px;
  color: #323232;
}
.navbar__item {
  font-size: 15px;
  color: #666;
}

/* Footer - minimal like FootfallCam */
.footer {
  border-top: 0.8px solid #e8e8e8;
  padding: 24px 0;
}
.footer__copyright {
  font-size: 14px;
  color: #999;
}
.footer__link-item {
  color: #166bff;
}

/* Docs sidebar */
.menu__link {
  font-size: 14px;
  color: #666;
}
.menu__link--active {
  color: #166bff;
  font-weight: 500;
}

/* Doc content */
.markdown h1 {
  font-size: 26px;
  font-weight: 500;
  color: #323232;
}
.markdown h2 {
  font-size: 20px;
  font-weight: 500;
  color: #323232;
}
.markdown h3 {
  font-size: 17px;
  font-weight: 500;
  color: #323232;
}
/**
 * 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. */
:root {
  --ifm-color-primary: #2e8555;
  --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}