侧栏
开发中心 » 侧栏
注意:这是本网站使用的组件页面
组件页面一般通过[[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); }
