github.com/kubeshop/testkube@v1.17.23/docs/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. */

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");

:root {
  --ifm-font-family-base: "Roboto";
  --ifm-font-size-base: 16px;
  --ifm-color-primary: #818cf8;
  --ifm-color-secondary: #c8cdff;
  --ifm-color-third: #EFEDFF;
  --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-color-gray-1000: #0f172a;
  --ifm-color-gray-900: #0f172a;
  --ifm-color-gray-800: #1e293b;
  --ifm-color-gray-700: #334155;
  --ifm-color-gray-600: #64748b;
  --ifm-color-gray-500: #94a3b8;
  --ifm-color-gray-400: #cbd5e1;
  --ifm-color-gray-300: #e2e8f0;
  --ifm-color-gray-200: #f1f5f9;
  --ifm-color-gray-100: #f8fafc;
  --ifm-color-badge-border: #454fad;
  --ifm-color-badge: #c8cdff;
  /* --ifm-menu-link-sublist-icon:  */
  --ifm-code-font-size: 90%; /*95%;*/
  --ifm-line-height-base: 1.45; /* Instead of 1.5 */
  --ifm-leading-desktop: 1.85; /* Instead of 1.5 */
  --ifm-list-margin: var(--ifm-leading); /* Keep consistent with the leading */

  --ifm-menu-color-background-active: transparent;
  --ifm-card-background-color: transparent;
  --ifm-card-border-radius: 4px;
  --ifm-background-surface-color: #f8fafc;
  --ifm-background-surface-color-hover: #f8fafc90;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.05);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme="dark"] {
  --ifm-color-primary: #818cf8;
  --ifm-color-secondary: #6660f6;
  --ifm-color-third: #1e293b;
  --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;
  --ifm-color-badge-border: #0EA5E9;
  --ifm-color-badge: #0C4A6E;
  --docusaurus-highlighted-code-line-bg: var(var(--ifm-color-gray-1000));
}

html[data-theme="dark"] {
  --ifm-background-color: #0f172a;
  --ifm-footer-background-color: #0f172a;
  --ifm-background-surface-color: #1e293b;
  --ifm-background-surface-color-hover: #1e293b50;

  --ifm-hover-overlay: rgba(255, 255, 255, 0.05);

  --ifm-heading-color: #f1f5f9;
  --ifm-color-content: #cbd5e1;
  --ifm-color-content-secondary: #94a3b8;

  --ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%)
    hue-rotate(149deg) brightness(99%) contrast(95%);

  --ifm-code-background: #1e293b;

  --ifm-pre-background: #1e293b;
  --prism-background-color: #1e293b;

  --ifm-scrollbar-track-background-color: #444444;
  --ifm-scrollbar-thumb-background-color: #686868;
  --ifm-scrollbar-thumb-hover-background-color: #7a7a7a;

  --ifm-table-stripe-background: rgba(255, 255, 255, 0.07);

  --ifm-toc-border-color: var(--ifm-color-emphasis-200);

  --ifm-alert-border-color: #db2777;
  --ifm-alert-foreground-color: #fbcfe8;
  --ifm-alert-background-color: #831843;
  --ifm-alert-background-color-highlight: #831843;

  --ifm-color-primary-contrast-background: rgb(16, 36, 69);
  --ifm-color-primary-contrast-foreground: rgb(235, 242, 252);
  --ifm-color-secondary-contrast-background: rgb(71, 71, 72);
  --ifm-color-secondary-contrast-foreground: rgb(253, 253, 254);
  --ifm-color-success-contrast-background: #65a30d;
  --ifm-color-success-contrast-foreground: #f7fee7;
  --ifm-color-success-dark: #a3e635;
  --ifm-color-info-contrast-background: rgb(25, 60, 71);
  --ifm-color-info-contrast-foreground: rgb(238, 249, 253);
  --ifm-color-warning-contrast-background: #78350f;
  --ifm-color-warning-contrast-foreground: #fffbeb;
  --ifm-color-warning-dark: #fbbf24;
  --ifm-color-danger-contrast-background: #be185d;
  --ifm-color-danger-contrast-foreground: #fdf2f8;
  --ifm-color-danger-dark: #ec4899;
}

[data-theme="dark"] .DocSearch {
  --docsearch-searchbox-background: var(--ifm-background-surface-color);
}

.navbar__logo {
  width: 120px;
}

.navbar__items {
  flex-grow: 1;
  flex: 1 auto;
  justify-content: space-between;
}
.navbar__items--right {
  justify-content: flex-end !important;
}

.DocSearch-Button {
  border-radius: 4px !important;
  min-width: 200px;
  max-width: 400px;
  width: 25vw;
}

.DocSearch-Button .DocSearch-Search-Icon {
  transform: scale(0.75);
  color: var(--ifm-color-gray-600) !important;
}

.card {
  box-shadow: none !important;
}

.pagination-nav__link {
  background-color: var(--ifm-background-surface-color);
  border: none;
}
.pagination-nav__link:hover {
  background-color: var(--ifm-background-surface-color-hover);
}
.navbar {
  padding: 12px 40px 12px 40px;
  background: var(--ifm-background-color) AA;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ifm-background-surface-color);
}
.menu {
  padding: 20px !important;
  background-color: var(--ifm-background-surface-color-hover);
}
.menu__link {
  color: var(--ifm-color-content-secondary);
  padding: 8px 12px 8px 12px;
}
.theme-doc-sidebar-item-link-level-2 .menu__link,
.theme-doc-sidebar-item-category-level-2 .menu__link {
  padding: 4px 0 4px 4px;
}
.menu__link:hover,
.menu__link--active,
.menu__list-item-collapsible:hover {
  color: var(--ifm-heading-color);
  background-color: transparent;
}
.menu__link--active {
  color: var(--ifm-color-primary);
}
.menu__caret,
.menu__link--sublist-caret:after {
  transform: scale(0.5);
}

.menu__list-item--collapsed .menu__link--sublist:after {
  transform: scale(0.5) rotateZ(90deg);
}

.table-of-contents__link:hover {
  color: var(--ifm-heading-color);
}

.theme-doc-sidebar-container {
  border-right: none !important;
  font-size: 14px !important;
}

.sidebar-item-link-level-2 a {
  font-size: 13px !important;
}

.theme-doc-sidebar-item-category-level-1,
.theme-doc-sidebar-item-link-level-1 {
  border-bottom: 1px solid var(--ifm-background-surface-color);
  padding-bottom: 8px;
}

.theme-doc-sidebar-item-category-level-1 .menu__list {
  margin-bottom: 18px;
}

.markdown h1:first-child {
  --ifm-h1-font-size: 2rem;
  margin-bottom: 1rem;
}

.markdown > h2 {
  --ifm-h2-font-size: 1.5rem;
  margin: 1rem 0 1rem 0;
}

.markdown > h3 {
  --ifm-h2-font-size: 1.25rem;
  margin: 1rem 0 1rem 0;
}

pre code {
  background: var(--ifm-background-surface-color);
}

.breadcrumbs {
  display: none;
}

.footer--dark {
  --ifm-footer-background-color: var(--ifm-color-gray-1000);
}

p:hover,
ol:hover,
ul:hover {
  color: var(--ifm-heading-color);
}

.category__card {
  --ifm-link-color: var(--ifm-color-emphasis-800);
  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
  --ifm-link-hover-decoration: none;
  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
  border: 1px solid var(--ifm-color-emphasis-300);
  transition: all var(--ifm-transition-fast) ease;
  transition-property: border, box-shadow;
  padding: 28px;
  border-radius: 4px;
}
.category__card h2 {
  display: flex;
  align-items: center;
}
.category__card p {
  color: var(--ifm-color-content-secondary);
  margin-bottom: 0;
}
.category__card:hover {
  border-color: var(--ifm-color-primary);
}
.category__card:hover p {
  color: var(--ifm-color-content);
}

.intro__card {
  background-color: var(--ifm-background-surface-color-hover);
  box-shadow: 0 1.5px 5px 0 rgb(0 0 0 / 20%);
  border-radius: 5px;
  margin: 10px 15px 10px 0;
  width: 100%;
}
.intro__card h2 {
  white-space: unset;
  font-size: 1rem;
}
.intro__card p {
  white-space: unset;
}
.intro__card:hover {
  transition: 200ms;
}

.intro--index {
  margin-top: -1.9rem;
}

.nopadding {
  padding: 0 !important;
}

.indent--min {
  margin-left: 5px;
}

.tools__card {
  position: relative;
  background-color: var(--ifm-background-surface-color-hover);
  box-shadow: 0 1.5px 5px 0 rgb(0 0 0 / 20%);
  border-radius: 4px;
  margin: 0 15px 10px 0;
  width: 6em;
}
.tools__card img {
  position: relative;
  top: 15%;
  width: 100%;

}
.tools__card::before {
  position: absolute;
  content: "";
  top: 70%;
  width: 100%;
  height: 30%;
  background-color: var(--ifm-color-secondary);
  border-end-end-radius: 4px;
  border-end-start-radius: 4px;
}
.tools__card p {
  position: relative;
  top: 15%;
  font-size: 0.8rem;
  font-weight: bold;
  z-index: 1;
  text-align: center;
}

.theme-admonition-info {
  background-color: var(--ifm-color-third);
  border-left-color: var(--ifm-color-primary);
}
.theme-admonition-info ul {
  margin: 1ch;
}
/* article {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
} */

.navbar-sidebar--show {
  backdrop-filter: none !important;
}

.pro-badge {
  width: fit-content;
  background-color: var(--ifm-color-badge);
  border: 1px var(--ifm-color-badge-border) solid;
  border-radius: 4px;

  color: var(--ifm-color-badge-border);
  font-size: 75%;

  padding: 0.3rem;
  margin-top: -10px;
}

@media screen and (max-width: 996px) {
  :root {
    --ifm-font-size-base: 18px;
  }
  article header h1 {
    font-size: 1.5rem !important;
  }
  .hero .hero__title {
    font-size: 2.5rem !important;
  }
}

@media screen and (min-width: 997px) {
  :root {
    --ifm-font-size-base: 17px;
  }
  header h1 {
    font-size: 2rem !important;
  }
}

@media screen and (max-width: 768px) {
  .DocSearch-Button {
    width: 36px;
    min-width: 36px;
  }
}