侧栏

注意：这是本网站使用的组件页面

组件页面一般通过[[include]]方式使用。

请不要随意编辑此页面以免造成不必要的崩溃。

如果你需要报告错误，请前往页面讨论区。

---

测试文本

+ 显示代码

@keyframes respire {
    0% { border-bottom: 1px solid rgb(var(--highlight-primary-color), 0.3);}
    100% { border-bottom: 1px solid rgb(var(--highlight-primary-color), 1);}
}
#interwiki div.menu-item img, #side-bar div.menu-item br, #side-bar div.menu-item img {
    display: none;
}
#side-bar {
    display: grid;
    width: var(--sidebar-width-on-desktop);
    height: 100vh;
    float: left;
    padding-right: 1em;
    clear: left;
    position: fixed;
    left: 0;
    top: 3em;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    z-index: 12;
    direction: rtl;
}
div#side-bar:before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: inherit;
    -webkit-backdrop-filter: blur(.5em);
    backdrop-filter: blur(.5em);
    mask: var(--feather-mask);
    -webkit-mask: var(--feather-mask);
    z-index: -1;
    transform: scale(1.2);
}
#side-bar a {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
    -webkit-box-pack: start;
    flex-direction: row;
    flex-grow: 2;
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    background-clip: border-box;
    width: fit-content;
    margin: 0;
    padding: 4px 0 4px 4px;
    border: none;
    font-size: 100%;
    color: rgb(var(--sidebar-link-color));
    box-shadow: inset -1px 0 0 0 rgb(var(--bright-secondary-color),.5);
    background: none;
    transition: all .4 ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
}
#side-bar div.menu-item a:before {
    --base-font-size: 0.9375rem;
    --clip-path: polygon(0 0,0 0,0 100%,0 100%);
    clip-path: var(--clip-path)
    calc(100% + var(--base-font-size)*.93333);
    content:"";
    transition: all 0.2s ease-out;
    -moz-transition: all all 0.2s ease-out;
    -webkit-transition: all all 0.2s ease-out;
    width: 1%;
    height: 100%;
    background: rgb(var(--scale-8),0);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#side-bar div.menu-item a:hover:before {
    background: rgb(var(--bright-primary-color));
    width: 100%;
}
 
#side-bar a:hover {
    color: rgb(var(--lowlight-primary-color)) !important;
    background: rgb(var(--bright-primary-color),.25) !important;
    text-decoration: none;
    text-shadow: none !important;
    transition: all .4 ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
}
#side-bar a:hover:active {
    filter: brightness(1.1);
    overflow: hidden !important;
}
#side-bar .side-block {
    display: grid;
    background-color: rgb(var(--sideblock-bg-color));
    padding: 0;
    box-shadow: 0 1px 5px rgb(var(--plain-third-color),.77);
    align-content: center;
    align-items: center;
    justify-items: center;
    direction: ltr;
}
 
#side-bar .side-block .heading {
    font-family: "Source Han Serif", "Source Han Serif CN", Songti SC, serif !important;
    display: flex;
    width: 100%;
    text-indent: .5rem;
    color: rgb(var(--title-color));
    letter-spacing: calc(-.2em - .5rem);
    font-size: calc(var(--base-font-size)*8/7);
    font-weight: 900;
    border-bottom: 2px solid rgb(var(--highlight-primary-color));
}
 
#side-bar .side-block .menu-item {
    display: flex;
    flex-shrink: 0;
    flex-basis: 100%;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    margin-top: -1px;
    width: 100%;
    margin-left: 0px;
    animation: respire 4s linear;
    -moz-animation: respire 4s linear;
    -webkit-animation: respire 4s linear;
    -o-animation: respire 4s linear;
    animation-direction: alternate-reverse;
    animation-iteration-count: infinite;
}
 
#side-bar .side-block .menu-item:first-child {
    display: flex;
    flex-shrink: 0;
    flex-basis: 100%;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    animation: respire 4s linear;
    -moz-animation: respire 4s linear;
    -webkit-animation: respire 4s linear;
    -o-animation: respire 4s linear;
    animation-direction: alternate-reverse;
    animation-iteration-count: infinite;
    margin-top: -1px;
    width: 100%;
    margin-left: -14px;
}
.subt:nth-child(odd) {
    display: inline-block;
    transform: skewY(10deg) translateY(-.5px);
    -ms-transform: skewY(10deg) translateY(-.5px);
    -moz-transform: skewY(10deg) translateY(-.5px);
    -webkit-transform: skewY(10deg) translateY(-.5px);
    -o-transform: skewY(10deg) translateY(-.5px);
}
 
.subt:nth-child(even) {
    display: inline-block;
    transform: skewY(10deg) translateY(.5px);
    -ms-transform: skewY(10deg) translateY(.5px);
    -moz-transform: skewY(10deg) translateY(.5px);
    -webkit-transform: skewY(10deg) translateY(.5px);
    -o-transform: skewY(10deg) translateY(.5px);
}