overrides.css

/* This overrides the default theme, so we can use it instead of editing the theme css */

:root {
  font-size: 100% !important;
  accent-color: var(--color-primary);
}

:target {
  scroll-margin-top: calc(var(--header-height) + 20px);
}

/* logo */
#logo {
  display: block;
  letter-spacing: -0.1rem;
  font-size: 3em;
  font-weight: 300;
  line-height: 1;
  padding-bottom: 56px;
}

#logo,
#logo:hover,
#logo:visited,
#logo:hover:visited {
  color: var(--sidebar-fg);
  text-decoration: none;
}

body {
  font-size: 18px;
  font-family: "Poppins", sans-serif;
}

.sidebar-resizing #body-container {
  transition: none !important;
}

/* GRID & Layout */
#body-container {
  min-height: 100vh;
  display: grid;
  grid:
    [row1-start] "header header header header" auto [row1-end]
    [row2-start] "sidebar sidebar-resize menu-bar content" 1fr [row2-end]
    [row3-start] "footer footer footer footer" auto [row3-end]
    / 0 0 auto 1fr;
}

.no-js #body-container {
  display: grid;
  grid:
    [row1-start] "header header header" auto [row1-end]
    [row2-start] "sidebar sidebar-resize menu-bar content" auto [row2-end]
    [row3-start] "footer footer footer" auto [row3-end]
    / 0 0 auto 1fr;
}

#header {
  grid-area: header;
}

#sidebar {
  grid-area: sidebar;
}

#sidebar-resize-handle {
  grid-area: sidebar-resize;
}

#content {
  grid-area: content;
}

#footer {
  grid-area: footer;
}

#menu-bar-mod {
  grid-area: menu-bar;
}

/* sidebar-visible */
#sidebar-toggle-anchor:checked ~ #body-container {
  /* On Mobile, max the width of the sidebar, but always leave room for the menu button */
  grid-template-columns: var(--sidebar-width-mobile) 0 auto minmax(300px, 1fr);
}

/* Desktop sidebar visible */
@media only screen and (min-width: 620px) {
  #sidebar-toggle-anchor:checked ~ #body-container {
    grid-template-columns:
      var(--sidebar-width) 6px auto
      minmax(300px, 1fr);
  }
}

::-webkit-scrollbar {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
}

/* Hide extra things */
.menu-title,
.nav-wide-wrapper,
.right-buttons,
#menu-bar-hover-placeholder {
  display: none;
}

/* Sidebar Overrides */

#sidebar {
  position: relative;
  width: auto;
  background: var(--sidebar-bg);
}

/* No-JS Sidebar */
body#sidebar {
  width: 100%;
}

.sidebar-iframe-outer {
  position: relative;
  width: 100%;
  height: 100vh;
}

.sidebar-iframe-inner {
  font-size: inherit;
}

.sidebar-iframe-inner .chapter li:not(.expanded) + li > ol {
  display: flex;
  flex-direction: column;
}

.sidebar-iframe-inner .chapter li > a.toggle {
  transform: rotate(90deg);
}
/* END No-JS Sidebar */

#sidebar::-webkit-scrollbar {
  background: var(--sidebar-bg);
}

#sidebar::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
}

#sidebar .sidebar-scrollbox {
  display: block;
  position: sticky;
  top: 10px;
  box-sizing: padding-box;
  padding: 0;
  max-height: 100vh;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

#sidebar .sidebar-contents {
  padding: 20px 20px 40px 20px;
}

.chapter {
  line-height: 1;
}

.chapter li.chapter-item {
  margin-block-start: 1em;
}

/* Switch to Chevron */
.chapter li > a.toggle {
  background-color: var(--sidebar-fg);
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="chevron"><polyline points="9 18 15 12 9 6"></polyline></svg>');
  mask-repeat: repeat;
  background-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 1;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0px;
}

.chapter li:hover > a.toggle,
.chapter a.active + a.toggle {
  background-color: var(--sidebar-active);
}

.chapter li > a.toggle div {
  display: none;
}

.chapter li > a.toggle {
  transition: transform 0.5s;
}

.chapter li.expanded > a.toggle {
  transform: rotate(90deg);
}

/* End Switch to Chevron */

/* Resize Handle */

.sidebar-resize-handle {
  cursor: col-resize;
  display: flex;
  align-items: start;
  margin-left: var(--sidebar-resize-indicator-space);
  width: var(--sidebar-resize-indicator-width);
}

.sidebar-resize-handle .sidebar-resize-indicator {
  display: none;
  position: fixed;
  transform: translateY(50vh);
  width: var(--sidebar-resize-indicator-width);
  height: 12px;
  background-color: var(--icons);
  margin-inline-start: 0;
}

.sidebar-resize-handle .sidebar-resize-indicator::after,
.sidebar-resize-handle .sidebar-resize-indicator::before {
  border-left: none !important;
}

@media only screen and (min-width: 620px) {
  .sidebar-resize-handle .sidebar-resize-indicator {
    display: inherit;
  }
}

/* Menu Bar overrides */
#menu-bar-mod {
  position: relative;
  background-color: var(--bg);
}

#menu-bar-mod .left-buttons {
  position: sticky;
  top: var(--header-height);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin: 0;
}

#menu-bar-mod .icon-button {
  display: flex;
  align-items: center;
  justify-items: center;
  position: relative;
  padding: 0 8px;
  width: 50px;
  height: 50px;
  z-index: 10;
  line-height: var(--menu-bar-height);
  cursor: pointer;
  transition: color 0.5s;
}

#menu-bar-mod #theme-list {
  top: 60px;
  left: 36px;
  color: var(--theme-popup-fg);
}

#page-wrapper {
  margin-inline-start: 0 !important;
}

#page-wrapper .page {
  padding: 0;
  margin-block-start: 0;
}

#content {
  overflow-y: auto;
  min-height: 100vh;
  padding: 32px 45px 128px 6px;
}

#content .nav-wrapper {
  padding: 24px;
  display: block;
}

#content .mobile-nav-chapters {
  display: block;
  font-size: 1em;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 9999px;
  background-color: var(--button-nav-bg);
  color: var(--button-nav-fg);
  transition: none;
  margin-bottom: 24px;
  width: auto;
}

#content .mobile-nav-chapters:hover {
  color: var(--button-nav-hover-fg);
  background: var(--button-nav-hover-bg);
  text-decoration: none;
}

#content .mobile-nav-chapters:active {
  color: var(--button-nav-hover-fg);
  background: var(--button-nav-hover-bg);
}

/* General content related overrides */

mark {
  color: var(--fg);
}

h1:target::before {
  display: none;
  margin-inline-start: 0;
}

h2:target::before,
h3:target::before {
  display: inline-block;
  content: "#";
  width: 50px;
  position: relative;
  color: var(--headers);
  margin-inline-start: 0;
}

h4:target::before,
h5:target::before,
h6:target::before {
  display: inline-block;
  content: "#";
  width: 40px;
  position: relative;
  color: var(--headers);
  margin-inline-start: 0;
}

/* Override some colors */

.content .header:link,
.content .header:visited,
.content .header:hover,
.content .header:visited:hover {
  color: var(--headers);
}

#mdbook-help-popup kbd {
  color: var(--bg);
  background-color: var(--fg);
}

.warning {
  padding-left: 30px;
}
.warning:before {
  margin-inline-start: calc(-1.5rem - 30px);
}

/* Table settings */

table thead {
  background: var(--table-header-bg);
  color: var(--table-header-fg);
}
table thead th {
  border: 1px var(--table-header-fg) solid;
}
/* Alternate background colors for rows */
table tbody tr:nth-child(2n) {
  background: var(--table-alternate-bg);
  color: var(--table-alternate-fg);
}

/* Replace Font-Awesome */

.fa.fa-github {
  background-color: var(--sidebar-fg);
  mask: url("data:image/svg+xml,	<svg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 98 96'><path d='M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  height: 1em;
  width: 1em;
  display: inline-block;
}