hexo-theme-next/source/css/_common/outline/sidebar/index.styl

+sidebar() {
  if ($sidebar-toggle-alignment == 'right') {
    .sidebar {
      right: 0 - $sidebar-width-expanded;

      .sidebar-active & {
        right: 0;
      }
    }
  } else {
    .sidebar {
      left: 0 - $sidebar-width-expanded;

      .sidebar-active & {
        left: 0;
      }
    }
  }

  .sidebar {
    background: $black-deep;
    bottom: 0;
    if (not hexo-config('back2top.sidebar')) {
      box-shadow: inset 0 2px 6px black;
    }
    max-height: 100vh;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transition: all $transition-ease-out;
    width: $sidebar-width-expanded;
    z-index: $zindex-2;

    a {
      border-bottom-color: $black-light;
      color: $grey-dark;

      &:hover {
        border-bottom-color: $gainsboro;
        color: $gainsboro;
      }
    }
  }

  .links-of-author {
    &:not(:first-child) {
      margin-top: 15px;
    }

    a {
      border-bottom-color: $black-light;
      display: inline-block;
      margin-bottom: 10px;
      margin-right: 10px;
      vertical-align: middle;

      if (hexo-config('social_icons.transition')) {
        transition: all $transition-ease;
      }

      &::before {
        background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
        display: inline-block;
        margin-right: 3px;
        transform: translateY(-2px);
        round-icon(4px);
      }
    }
  }

  .links-of-blogroll-item {
    if (hexo-config('links_settings.layout') == 'inline') {
      display: inline-block;
    }
    padding: 2px 10px;

    a {
      box-sizing: border-box;
      display: inline-block;
      max-width: 280px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .popular-posts .popular-posts-item .popular-posts-link:hover {
    background: none;
  }

  .sidebar-dimmer {
    background: black;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: visibility .4s, opacity .4s;
    visibility: hidden;
    width: 100%;
    z-index: $zindex-1;

    .sidebar-active & {
      opacity: .7;
      visibility: visible;
    }
  }
}

.sidebar-inner {
  color: $grey-dark;
  padding: $sidebar-padding 10px;
  text-align: center;
  flex-column();
}

.cc-license {
  .cc-opacity {
    border-bottom: 0;
    opacity: .7;

    &:hover {
      opacity: .9;
    }
  }

  img {
    display: inline-block;
  }
}

@import 'sidebar-author';
@import 'sidebar-author-links';
@import 'sidebar-button';
@import 'sidebar-blogroll';
@import 'sidebar-nav';
@import 'sidebar-toggle';
@import 'sidebar-toc';
@import 'site-state';
@import 'related-posts';