xrpl-dev-portal/styles/_side-nav.scss

/* Left/right nav color scheme ------------------------------- */
aside li a {
  color: $white;
  text-decoration: none;
  font-size: 1.05rem;
}
aside .sidenav_cat_title {
  color: $white;
}
aside a:hover,
aside .sidenav_cat_title:hover {
  color: $primary;
}

aside a.active,
aside a.active:hover,
aside .active > a,
aside .active > a:hover {
  color: $primary;
  font-weight: 700;
}
aside a.active-parent {
  color: $white;
  font-weight: 700;
}

.sidebar_pagelist {
  border-left: 1px solid $white;
}
.sidebar_pagelist a,
.command-list li a,
.page-toc li a {
  display: block;
  margin-top: 5px;
  margin-left: -17px;
  padding: 4px 15px 4px 35px;
  text-indent: -20px;
  font-size: 0.9rem;
}
.sidebar_pagelist a:hover {
  padding-left: 34px;
  border-left: 1px solid $primary;
}
.sidebar_pagelist .active,
.sidebar_pagelist .active:hover {
  padding-left: 33px;
  border-left: 2px solid $primary;
}
.sidebar_pagelist .subpage {
  margin-left: 0;
  margin-top: 0;
  padding-left: 35px;
  border-left: 1px solid $white;
}
.sidebar_pagelist .subpage:hover {
  padding-left: 35px;
  border-left: 1px solid $primary;
}
.sidebar_pagelist .active.subpage,
.sidebar_pagelist .active.subpage:hover {
  padding-left: 33px;
  border-left: 2px solid $primary;
}
.sidebar_pagelist li a .fa {
  display: inline;
}

.sidenav_cat_toggler {
  background-color: $white;
}
.sidenav_cat_toggler:hover {
  background-color: $primary;
}

#page-toc-wrapper .card-body,
.command-list {
  border-left: 1px solid $white;
}

.sidenav_parent a {
  color: $white;
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 15px 16px 15px 10px;
}

.page-toc .level-1 a {
  color: $white;
}

.page-toc .level-3 {
  padding-left: 16px;
  border-left: 1px solid $white;
  margin-bottom: 0;
  padding-bottom: 5px;
}

.page-toc .level-3 a {
  margin-top: 0;
  padding-bottom: 5px;
}

.command-list li a:hover,
.page-toc li a:hover {
  text-decoration: none;
  border-left: 1px solid $primary;
  padding-left: 34px;
}
.command-list .active a {
  border-left: 2px solid $primary;
  padding-left: 33px;
}

.right-sidebar {
  padding: 44px 0 24px 48px;
}

/* Left navigation ---------------------------------------------------------- */

.sidebar {
  padding: 44px 24px 48px 0;
}

.sidebar_pagelist {
  margin-bottom: 12px;
  margin-left: 24px;
  padding-left: 16px;
  list-style-type: none;
}

#sidenav a,
.sidenav_parent a {
  text-decoration: none;
  line-height: 24px;
}
#sidenav a.active-parent {
  font-weight: 700;
}
#sidenav a:hover,
.sidenav_parent a:hover {
  text-decoration: none;
}

#sidenav .card + .card {
  margin: 0;
}

#sidenav .card {
  border-width: 0;
}

#sidenav .card-body {
  padding: 0;
  padding-left: 15px;
}

#sidenav .card-body-single {
  margin-left: -25px;
}

#sidenav .collapse {
  padding-bottom: 0;
}

#sidenav .card-header {
  padding: 0;
  background-color: transparent;
  border-bottom: 0;
}

#sidenav .card {
  padding: 0;
  border-radius: 0;
}

#sidenav .card:only-child {
  border-top: 0;
  background: none;
}

#sidenav .card-header h5 {
  margin-bottom: 0;
  text-transform: none;
  font-size: 1.05rem;
}

#sidenav .card-header h5 .sidenav_cat_title {
  display: block;
  padding: 11px 10px 11px 40px;
}

#sidenav .card-header .sidenav_cat_toggler {
  position: absolute;
  left: 0;
  padding: 10px 12px 12px 12px;
  line-height: 0;

  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  transition-duration: 0.3s;
}

#sidenav .card-header .sidenav_cat_toggler {
  width: 24px;
  height: 24px;
  display: block;
  -webkit-mask-image: url(../img/icon-arrow.svg);
  mask-image: url(../img/icon-arrow.svg);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  border: 12px solid transparent;
}

#sidenav .card-header .sidenav_cat_toggler.collapsed {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  transition-duration: 0.3s;
}

/* Right navigation --------------------------------------------------------- */

#page-toc-wrapper .card {
  position: sticky;
  max-height: 85vh;
  top: 48px;
  overflow: auto;
  padding: 44px 0 48px 24px;
  border: none;
}
.command-list {
  padding: 16px;
}

#page-toc-wrapper .card-header {
  border-bottom: none;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 0;
}

#page-toc-wrapper .card-header h4 {
  line-height: 20px;
  font-size: 1.2em;
  padding: 0;
  margin: 0;
}

#page-toc-wrapper .card-body {
  padding: 0 0 0 16px;
  list-style-type: none;
}

.page-toc li,
.command-list li {
  list-style-type: none;
  margin-bottom: 8px;
  margin-left: 0;
}

.page-toc .level-1 a,
.command-list .separator {
  font-weight: 700;
  font-family: "Space Mono", monospace;
}
.page-toc .level-2,
.command-list .method {
  margin-left: 0;
}