索引总结图片-来自网图
$li-margin-bottom = 0.8rem
$post-tool-button-width = 2.5rem
.post-tools-container {
padding-top var(--component-gap)
.post-tools-list {
li {
margin-bottom $li-margin-bottom
&:last-child {
margin-bottom 0
}
}
li.tools-item {
position relative
box-sizing border-box
width $post-tool-button-width
height $post-tool-button-width
color var(--text-color-3)
font-size 1.2rem
background var(--background-color-1)
border-radius 50%
box-shadow 2px 2px 5px var(--shadow-color)
cursor pointer
&:hover {
box-shadow 2px 2px 8px var(--shadow-hover-color)
}
i {
color var(--text-color-3)
}
&:hover {
color var(--background-color-1)
background var(--primary-color)
i {
color var(--background-color-1) !important
}
}
&.toggle-show-toc {
display none
}
&.go-to-comments {
.post-comments-count {
position absolute
top 0
right -1rem
display none
align-items center
justify-content center
box-sizing border-box
min-width 1.1rem
height 1.1rem
padding 0 0.2rem
color var(--badge-color)
font-size 12px
background var(--badge-background-color)
border-radius 0.4rem
+keep-tablet() {
display none !important
}
}
}
}
li.status-item {
width $post-tool-button-width
height $post-tool-button-width
color var(--text-color-3)
font-size 1.6rem
cursor pointer
&.post-lock {
cursor default
.fa-lock-open {
display none
color var(--keep-success-color)
}
&.decrypt {
cursor pointer
.fa-lock-open {
display block
}
.fa-lock {
display none
}
}
}
}
}
}