docs_depin/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.
 */

/* Ensure navbar items and logo are vertically aligned */
.navbar__logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.navbar__logo img {
  max-width: 150px;
  height: auto;
}

/* Align navbar items, such as Docs and Support */
.navbar__item {
  display: flex;
  align-items: center;
}

/* Optional: Adjust padding for navbar items */
.navbar__link {
  padding: 8px 12px;
}

/* Add @font-face declarations for the Inter font */
@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/Inter_28pt-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-weight: 500;
  font-style: normal;
  src: url('/fonts/Inter_28pt-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-weight: 600;
  font-style: normal;
  src: url('/fonts/Inter_28pt-Medium.ttf') format('truetype');
}

/* Apply the Inter font globally */
body {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  background-color: #131213;
  color: #ffffff;
}

/* Header styles */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: #ffffff;
}

/* Paragraph styles */
p {
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  color: #ffffff;
}

/* Theme variables */
:root {
  --ifm-color-primary: #2e83ff;
  --ifm-background-color: #131213;
  --ifm-navbar-background-color: #131213;
  --ifm-footer-background-color: #131213;
  --ifm-color-content: #ffffff;
  --ifm-menu-color: #ffffff;
  --ifm-toc-link-color: #ffffff;
  --ifm-breadcrumb-color-active: #2e83ff;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* Dark mode overrides */
[data-theme='dark'] {
  --ifm-background-color: #131213;
  --ifm-navbar-background-color: #131213;
  --ifm-footer-background-color: #131213;
  --ifm-color-content: #ffffff;
  --ifm-menu-color: #ffffff;
  --ifm-toc-link-color: #ffffff;
  --ifm-link-color: #2e83ff;
  --ifm-breadcrumb-color-active: #2e83ff;
}

/* Layout elements */
.footer {
  background-color: #131213;
}

.footer a,
.footer p,
.footer span,
.footer div {
  color: #ffffff;
}

.navbar {
  background-color: #131213;
}

.navbar__link {
  color: #ffffff;
}

.menu {
  background-color: #131213;
}

.menu__link {
  color: #ffffff;
}

.menu__link:hover {
  color: #2e83ff;
}

.menu__link--active {
  color: #2e83ff;
}

.table-of-contents {
  background-color: #131213;
}

.table-of-contents__link {
  color: #ffffff;
}

.table-of-contents__link:hover,
.table-of-contents__link--active {
  color: #2e83ff;
}

/* Main content area */
.main-wrapper {
  background-color: #131213;
}

aside.theme-doc-sidebar-container {
  background-color: #131213;
  border-right: 1px solid #2a2a2a;
}

.theme-doc-sidebar-menu {
  background-color: #131213;
}

.theme-doc-toc-desktop {
  background-color: #131213;
  border-left: 1px solid #2a2a2a;
}

/* Navigation elements */
.breadcrumbs__link {
  color: #ffffff;
}

.breadcrumbs__link:hover {
  color: #2e83ff;
}

/* Search */
.navbar__search-input {
  color: #ffffff;
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
}

/* Mobile elements */
.navbar__toggle {
  color: #ffffff;
}

.navbar-sidebar {
  background-color: #131213;
}

.navbar-sidebar__brand {
  background-color: #131213;
}

.navbar-sidebar__items {
  background-color: #131213;
}

/* Code blocks */
.theme-code-block {
  background-color: #1a1a1a !important;
}

/* Markdown content */
.markdown {
  color: #ffffff;
}

/* Links */
.markdown a {
  color: #2e83ff;
}

/* Tables */
.markdown table {
  border-color: #2a2a2a;
}

.markdown table tr {
  background-color: #131213;
  border-color: #2a2a2a;
}

.markdown table tr:nth-child(2n) {
  background-color: #1a1a1a;
}

.markdown table th,
.markdown table td {
  border-color: #2a2a2a;
}

/* Blockquotes */
.markdown blockquote {
  border-left-color: #2e83ff;
  background-color: #1a1a1a;
}

/* Horizontal rules */
.markdown hr {
  border-color: #2a2a2a;
}