blog/themes/next/source/css/_common/outline/sidebar/index.styl

116 lines
2.2 KiB
Stylus

+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: $transition-ease-out;
transition-property: left, right;
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 {
padding: 0 5px;
}
.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();
}
@import 'sidebar-toggle';
@import 'sidebar-nav';
@import 'sidebar-toc';
@import 'sidebar-author';
@import 'site-state';
@import 'sidebar-button';
@import 'sidebar-author-links';
@import 'sidebar-copyright';
@import 'sidebar-blogroll';
@import 'related-posts';