ultimatedocs/docs/.vitepress/theme/styles/custom.css

@import url(https://fonts.googleapis.com/css?family=Space+Mono:regular,italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Space+Grotesk:regular,italic,700,700italic);
 
:root {
    --vp-c-brand: rgb(67, 64, 255);
    --vp-c-brand-light: rgb(100, 98, 241);
    --vp-c-brand-lighter: rgb(160, 158, 247);
    --vp-c-brand-dark: rgb(54, 51, 252);
    --vp-c-brand-darker: rgb(18, 14, 252);
  
    --vp-c-sponsor: #fd1d7c;
  
      
    --vp-c-gray: #F7F7F7;

    --vp-c-green: #1abc9c;
    --vp-c-green-light: #1dd7b2;
    --vp-c-green-lighter: #28e2bc;
    --vp-c-green-dark: #18b495;
    --vp-c-green-darker: #1abc9c;
    --vp-c-green-dimm-1: rgba(26, 188, 156, 0.05);
    --vp-c-green-dimm-2: rgba(26, 188, 156, 0.2);
    --vp-c-green-dimm-3: rgba(26, 188, 156, 0.5);
  
    --vp-c-blue: #0ea5e9;
    --vp-c-blue-dimm-1: rgba(14, 165, 233, 0.05);
    --vp-c-blue-dimm-2: rgba(14, 165, 233, 0.2);
    --vp-c-blue-dimm-3: rgba(14, 165, 233, 0.5);
  
    --vp-c-yellow: #ecb732;
  
    --vp-custom-block-info-border: var(--vp-c-blue-dimm-2);
    --vp-custom-block-info-bg: var(--vp-c-blue-dimm-1);
    --vp-custom-block-info-text: var(--vp-c-neutral);
  
    --vp-custom-block-tip-border: var(--vp-c-green-dimm-2);
    --vp-custom-block-tip-bg: var(--vp-c-green-dimm-1);
    --vp-custom-block-tip-text: var(--vp-c-neutral);
  
    --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-2);
    --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-1);
    --vp-custom-block-warning-text: var(--vp-c-neutral);
  
    --vp-custom-block-danger-border: var(--vp-c-red-dimm-2);
    --vp-custom-block-danger-bg: var(--vp-c-red-dimm-1);
    --vp-custom-block-danger-text: var(--vp-c-neutral);
  
    --vp-custom-block-details-border: var(--vp-c-divider);
    --vp-custom-block-details-bg: var(--vp-c-bg-soft-up);
  
    --vp-local-search-highlight-bg: transparent;
    --vp-local-search-highlight-text: var(--vp-c-green);
    --vp-local-search-bg: var(--vp-c-bg-soft);
    --vp-local-search-result-bg: var(--vp-c-white);
    --vp-local-search-result-shadow: 0 1px 3px 0 #d4d9e1;
    --vp-local-search-footer-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, .12);
 

    scroll-behavior: smooth;

 /* Code Snippet font */
 --vp-font-family-mono: "Space Mono", Menlo, Monaco, Consolas, "Courier New",
   monospace;
   --vp-layout-max-width: 1680px;
 
  }
 
  dark {
   /* --vp-code-block-bg: var(--vp-c-bg-alt, #161618) !important; */
   --vp-local-search-result-bg: var(--vp-c-bg-soft-mute);
   --vp-local-search-result-shadow: none;
   --vp-local-search-footer-shadow: none;
  }
  
 .VPNavBar .VPNavBarTranslations svg.option-icon {
    margin-right: 2.5em;
    display: none;
}
.VPNavBar .VPNavBarTranslations > .button > .text::after {
    content: 'Language';
    left: 3.5em;
}

.VPNavBar .VPNavBarTranslations .VPMenu .title {
  display: none;
}

  /* Custom Stlye */
.custom-layout {
  background-color: var(--vp-c-bg-soft);
  color: var(--vp-c-text-1);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  min-height: 400px;
  max-width: 1152px;
  margin: 6rem auto 0;
  border-radius: 10px;
}
 
.custom-layout h1 {
  font-size: 2.2rem;
  font-weight: 600;
}
 
.custom-layout .btn {
  background-color: var(--vp-button-brand-bg);
  color: var(--vp-button-brand-text);
  border-radius: 20px;
  padding: 0.5rem 1.4rem;
}




.content-container {
  max-width: 100% !important;
}

/* min-width: 1440px same as original min-width: 960px */
@media (min-width: 1440px) {
  .VPSidebar {
      padding-left: 32px !important;
      width: var(--vp-sidebar-width) !important;
  }
  .VPContent.has-sidebar {
      padding-left: var(--vp-sidebar-width) !important;
      padding-right: 0 !important;
  }
}

/* Add additional min-width: 1680px */
@media (min-width: 1680px) {
  .VPSidebar {
      padding-left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2) !important;
      width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px) !important;
  }
  .VPContent.has-sidebar {
      padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)) !important;
      padding-right: calc((100vw - var(--vp-layout-max-width)) / 2) !important;
  }
}