Stellar文章目录个人向美化

前言

用习惯之前的无银百两网站目录, 很想念.
那就改成熟悉的样子!

思路

好像没什么好说的, 关于目录一共就两个文件, 纯Stylus硬改了.
就是不能变成css引入式覆盖有点可惜, 还是得改主题文件(有什么能覆盖的引入方法请务必告诉我).
需要的看着修改即可.

代码

替换位置1

stellar/source/css/_layout/widgets/toc_common.styl

.widget-wrapper.toc .widget-header
  margin-top: 1rem

.widget-wrapper.toc .widget-header
  font-weight: 500
  font-size: $fs-12
  >span
    margin: 0.5rem 0

.widget-wrapper.toc.single .widget-body
  margin-top: 0
  border-left: 2.5px dashed var(--block-hover)
  ul ul, ul ol
    padding-left: 0
  ol ul, ol ol
    padding-left: 0

  .doc-tree
    margin: 4px 0
    margin-left: 10.5px
  .toc
    padding: 0
    margin: 0
    //padding-left: 0.25rem
    .toc-item .toc-link
      //padding: 0.5rem
      font-weight: 500
      font-size: $fs-13
      color: var(--text-p2)
    .toc-child .toc-item .toc-link
      padding: 0.25rem 0.5rem 0.25rem 1.3rem
      font-weight: 400
      color: var(--text-p2)
    .toc-child .toc-child .toc-item .toc-link
      padding-left: 2.1rem
      font-size: $fs-12
      color: var(--text-p3)
    .toc-child .toc-child .toc-child .toc-item .toc-link
      padding-left: 2.9rem

.widget-wrapper.toc.single .toc-item span
  display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
.widget-wrapper.toc .toc-item
  color: var(--text-p2)
  font-size: $fs-12
  padding: 0
  list-style: ''
  //ul样式
  &:has(> a.toc-link)
    &::marker
      content: '🌸'
      color: #E9979C17
  &:has(> a.toc-link:hover)
    &::marker
      content: '🌸'
      color: #E9979C5C
  &:has(> a.toc-link.active)
    &::marker
      content: '🌸' !important
      color: #f1404b !important
  
  

.widget-wrapper.toc.single .toc-item

  &.active
    color: #fff;
    background: #f1404b;
    margin-top: 2px;
    margin-bottom: 2px;
    -webkit-box-shadow: 0 8px 15px rgb(240 65 76 / 30%);
    box-shadow: 0 8px 15px rgb(240 65 76 / 30%);
  .toc-child .toc-item
    padding: 0
  &:after
    content: none
// 二级目录颜色加深
.toc-level-2
    &::marker
      content: '🌸'
      color: #E9979C5C !important
.widget-wrapper.toc.single a.toc-link
  position:relative;
  color:#738192;
  background:transparent;
  line-height:20px;
  border-radius:10px;
  display:inline-grid;
  padding:4px 20px 4px 10px;
  margin:-2px 0 -2px 12px;
  text-decoration:none;
  transition:.3s;
  margin-left :0
  left: 10px;
  &:before
    content:"";
    position:absolute;
    transition:.3s;
    border-right:0px solid transparent;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    top: 8px;
    left:0px;
  &:hover
    color:#fff !important;
    background:#f1404bBF;
    margin-top:2px;
    margin-bottom:2px;
    -webkit-box-shadow:0 8px 15px rgba(240,65,76,0.3) !important;
    box-shadow:0 8px 15px rgba(240,65,76,0.3) !important;
    &::before
      border-right:6px solid #f1404bBF !important;left:-6px;
  &.active
    color:#fff !important;
    background:#f1404b !important;
    margin-top:2px;
    margin-bottom:2px;
    -webkit-box-shadow:0 8px 15px rgba(240,65,76,0.3) !important;
    box-shadow:0 8px 15px rgba(240,65,76,0.3) !important;
    &:before
      border-right:6px solid #f1404b !important;left:-6px;

//激活上级目录时显示子目录
.toc-item a.toc-link+ol
  display: none
.toc a.toc-link.active+ol
  display: block
ol:has(> .toc-item a.active)
  display: block
.doc-tree:hover a.toc-link+ol
  display: block


// wiki样式保持
.widget-wrapper.toc.multi .widget-body
  margin-top: 0
  ul ul, ul ol
    padding-left: 0
  ol ul, ol ol
    padding-left: 0

  .doc-tree
    margin: 4px 0
  .toc
    padding: 0
    margin: 0
    padding-left: 0.25rem
    .toc-item .toc-link
      padding: 0.5rem
      font-weight: 500
      font-size: $fs-13
      color: var(--text-p2)
    .toc-child .toc-item .toc-link
      padding: 0.25rem 0.5rem 0.25rem 1.3rem
      font-weight: 400
      color: var(--text-p2)
    .toc-child .toc-child .toc-item .toc-link
      padding-left: 2.1rem
      font-size: $fs-12
      color: var(--text-p3)
    .toc-child .toc-child .toc-child .toc-item .toc-link
      padding-left: 2.9rem


.widget-wrapper.toc.multi .toc-item
  color: var(--text-p2)
  font-size: $fs-12
  padding: 0
  list-style: none
  &.active
    color: $color-theme
    border-left-color: @color
  .toc-child .toc-item
    padding: 0
.widget-wrapper.toc.multi a.toc-link
  color: inherit
  display: block
  line-height: 1.2
  border-radius: 4px
  position: relative
  &:before
    content: ''
    position: absolute
    left: -6px
    top: 'calc(50% - %s)' % 6px
    bottom: 'calc(50% - %s)' % 6px
    width: 2px
    border-radius: 2px
    background: $color-theme
    visibility: hidden
  &:hover
    background: var(--block-hover)
  &.active
    color: $color-theme !important
    &:before
      visibility: visible