github.com/Racer159/jackal@v0.32.7-0.20240401174413-0bd2339e4f2e/docs-website/src/css/custom.css

/**
 * 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: #7bd5f5;
  --ifm-color-primary-dark: #44a4c2;
  --ifm-color-primary-darker: #44a4c2;
  --ifm-color-primary-darkest: #44a4c2;
  --ifm-color-primary-light: #b0ffff;
  --ifm-color-primary-lighter: #b0ffff;
  --ifm-color-primary-lightest: #b0ffff;
  --ifm-background-color: #0a0e2e;
  --ifm-background-surface-color: #0d133d;
  --ifm-code-font-size: 95%;
  --svg-icon-height: 20px;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
html[data-theme="dark"],
[data-theme="dark"] {
  --text-secondary: #ffffffb3;
  --action-active: #ffffff8f;
  --ifm-background-surface-color: #0d133d;
  --ifm-background-color: #0a0e2e;
  --ifm-color-primary: #4adede;
  --ifm-color-primary-dark: #4adede;
  --ifm-color-primary-darker: #4adede;
  --ifm-color-primary-darkest: #4adede;
  --ifm-color-primary-light: #4adede;
  --ifm-color-primary-lighter: #4adede;
  --ifm-color-primary-lightest: #4adede;
  --ifm-navbar-link-color: var(--text-secondary);
  --ifm-toc-link-color: var(--text-secondary);
  --search-local-highlight-color: #44a4c2;
  --ifm-navbar-search-input-icon: url("images/svg/search-icon-dark.svg");
}

.docusaurus-highlight-code-line {
  background-color: #10184c;
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

[data-theme="dark"] .docusaurus-highlight-code-line {
  background-color: #0a0e2e;
}

/* || SvgIcon */

.svg-icon {
  height: var(--svg-icon-height);
  display: flex;
  align-items: center;
}

.svg-icon-path {
  fill: var(--text-secondary);
  fill-opacity: unset;
}

.svg-link {
  max-width: fit-content;
  border-radius: 50px !important;
  border: solid;
  border-color: transparent;
  padding: 8px;
}

.svg-link:hover {
  background-color: var(--ifm-menu-color-background-active);
}

.svg-link:hover .svg-icon-path {
  fill: var(--ifm-navbar-link-hover-color);
}

/* || SearchBar */

/* Dark themed search-input */
[data-theme="dark"] .navbar__search-input {
  padding-right: 32px;
  padding-left: 44px;
  width: 220px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.23);
  background: var(--ifm-background-surface-color)
    var(--ifm-navbar-search-input-icon) no-repeat 0.75rem center / 1rem 1rem;
}

/*
 * Remove the outline.
 * Highlight on hover and select.
 */
[data-theme="dark"] .navbar__search-input:focus-visible,
[data-theme="dark"] .navbar__search-input:hover {
  outline: transparent;
  border-color: var(--ifm-color-primary);
}

/* Default is hidden */
.mobile-search {
  display: none;
}

/* Hide large search and display icon on small screens */
@media (max-width: 576px) {
  .navbar__search-input {
    display: none;
  }
  .mobile-search {
    display: flex !important;
  }
}

/* Override the .svg-icon dimensions when child of mobile-search */
.mobile-search .svg-icon {
  width: 18px;
  height: 18px;
}

/* || NavBar */

.navbar {
  align-items: center;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12);
}

/* Jackal.dev logo size */
.navbar__logo {
  width: 152px;
  height: 42px;
}

/* Jackal.dev padding and styling */
.navbar__item {
  display: flex;
  font-size: 14px;
  font-weight: 500;
  align-items: center;
}

/* override docusaurus fields at their breakpoint */
@media (max-width: 996px) {
  /* Center the logo on smaller screens */
  .navbar__items .navbar__brand {
    margin-right: auto;
    margin-left: auto;
  }

  /* Shrink the logo on smaller screens */
  .navbar__logo {
    height: 40px;
  }

  /*
   * Restore original functionality from template
   * that was removed to center text and hover state
  */
  .navbar__item {
    display: none;
  }
}

/* Add Selection Line to bottom of selected navbar item */
.navbar__link--active {
  border-bottom: 2px solid var(--ifm-color-primary);
}

/* Add hover state highlighting background to navbar__items */
.navbar__item:hover {
  background-color: var(--ifm-menu-color-background-active);
}

/* Remove Hover state from navbar socials box */
.navbar__item--socials-box:hover {
  background-color: unset;
}

/* Remove Padding from navbar socials box */
.navbar__item--socials-box {
  padding: unset;
}

/* || Mobile Navbar (menu) */

.menu {
  background-color: var(--ifm-background-surface-color);
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12);
}

/* Remove rounded links */
.menu__link {
  border-radius: 0;
}

/* Highlight text on hover */
.menu__link:hover {
  color: var(--ifm-navbar-link-hover-color);
}

/*
 * Customize Main Menu to look like jackal.dev mobile drawer
 * Without effecting the table of contents.
 */
[class="menu__list-item"] .menu__link {
  justify-content: center;
  font-size: x-large;
  font-weight: 300;
  margin-bottom: 16px;
}

/* Underline the active nav item and not the active doc. */
:not(.theme-doc-sidebar-item-link) > [class="menu__link menu__link--active"] {
  border-bottom: 2px solid var(--ifm-color-primary);
}

/* || Footer */

/* Hide the Original Footer */
#__docusaurus > footer {
  display: none;
}

/* Resize and recolor the footer to match doc item. */
.footer {
  margin-top: 2rem;
  margin-bottom: -2rem;
  padding: 32px var(--doc-sidebar-width) 32px 0;
  background-color: var(--ifm-background-color);
}

/* Flex position the footer container */
.footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Override logo size */
.footer__logo {
  height: 47px;
}

/* Override social media icons size */
.footer__link-item .socials-box .svg-link .svg-icon {
  height: 32px;
}

/* Adjust copyright font-size */
.p-copy {
  font-size: 20px;
}

@media (max-width: 996px) {
  .footer {
    padding: unset;
    margin-bottom: 16px;
    margin-top: 4rem;
  }

  .footer .container {
    text-align: center;
    gap: 24px;
    flex-direction: column;
    justify-items: center;
  }
}

/* Remove the margin so they can be centered properly */
.footer__links,
.p-copy,
.footer__logo {
  margin: unset;
}

/* Remove the logo hover styling and center */
.footer > .container > a {
  display: flex;
  opacity: unset;
  transition: none;
  justify-items: center;
}

/* || EditThisPage */

.theme-edit-this-page {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  border-radius: 0px !important;
}

.theme-edit-this-page:hover .svg-icon .svg-icon-path {
  fill: var(--ifm-color-primary);
}

.theme-edit-this-page .svg-icon {
  height: "24px";
}

.theme-edit-this-page:hover {
  text-decoration: none;
}