黑标切换侧边栏
注意
此页为于 SCP 维基内部使用的"组件"页。用于在其他页面中引用。
未经组件作者或工作人员允许,请勿修改此页的内容。
[フレーム]
这是干什么用的
使侧边栏默认隐藏并通过角落的一个按钮来切换,与网站的移动端版本类似。
- 不能用于 Sigma-9。这只能用于黑色标记笔。
- 如果你想用 Sigma-9,请使用由 EstrellaYoshte 制作的这个组件。
- 如果你喜欢的话,也有兼容黑标和 Sigma-9 两者的可折叠侧边栏组件。
可折叠侧边栏通过悬停而不是点击来显示菜单,而且比起切换侧边栏稍稍更醒目一些。
使用方法
1. 复制以下代码。
2. 粘贴至黑色标记笔及其他版式 include 之后。
[[include :scp-wiki:component:toggle-sidebar-bhl]]
3. (可选项)使用版式时自定义切换按钮样式。
如果需要的话,还有 5 个 CSS 变量可以用来自定义按钮样式。
对于颜色,强烈推荐你使用现有的黑标颜色变量,见于此处。
:root {
--toggle-button-bg: hex/rgb/hsl 颜色;
--toggle-border-color: hex/rgb/hsl 颜色;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl 颜色;
--toggle-roundness: 百分比;
}
@supports(display: grid) { :root{ --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19); --body-width-on-desktop:45.75rem; } @mediaonlyscreenand (min-width:56.25rem) { #side-bar .close-menu { display: block; position:fixed; top:0.25rem; left:0.5rem; width:3rem; opacity:1; pointer-events:all; z-index: -1; }#side-bar.close-menuimg{color:transparent; }#side-bar.close-menu::before, #side-bar.close-menu::after{content: ""; box-sizing: border-box; position:fixed; display:block; top:0.25rem; left:0.5rem; width:3rem; height:3rem; padding:0; margin:0; text-align:center; pointer-events:all; cursor:pointer; transition: opacity var(--sidebar-transition-timing); }#side-bar.close-menu::before{ --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='003232' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.102-.92-2s-.9-2-2-2H4c-1.10-2.9-22s.9222zm24 4H4c-1.10-2.9-22s.9222h24c1.102-.92-2s-.9-2-2-2zm0 8H4c-1.10-2.9-22s.9222h24c1.102-.92-2s-.9-2-2-2z'/%3E%3C/svg%3E"); z-index: -1; background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:50%50%; mask-position:50%50%; -webkit-mask-size:60%; mask-size:60%; }#side-bar.close-menu::after{z-index: -2; background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important; border-radius: var(--toggle-roundness, 50%); border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid; }#side-bar:focus-within.close-menu::before, #side-bar:focus-within.close-menu::after{opacity:0; }#side-bar{display:block; position:fixed; top:0; left: calc(var(--sidebar-width-on-desktop)*-1); z-index:10; transition:left500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; height:100%; overflow-y:auto; overflow-x:hidden; margin-top:0; }#side-bar:focus-within{left:0; }#side-bar.side-block{margin-top:1rem; background-color: rgb(0, 0, 0, 0); border-radius:0; border-left-width:0px; border-right-width:0px; }#main-content::before{content: ""; display:block; position:fixed; top:0; right:0; z-index: -1; opacity:0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; margin-left: var(--sidebar-width-on-desktop); background: rgba(var(--swatch-menubg-black-color), .3) 1px1pxrepeat; padding-right:0; width:100%; height:100vh; pointer-events:none; z-index:99; }#side-bar:focus-within~#main-content::before{width: calc(100% - var(--sidebar-width-on-desktop)); opacity:1; pointer-events:all; }#content-wrap{display: flex; flex-direction: row; width: calc(100vw - (100vw - 100%)); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); flex-grow:2; height:auto; position:relative; margin:0auto; max-width:inherit; }#main-content{width:100%; position: initial; max-height:100%; padding:2rem 1rem; width: var(--body-width-on-desktop, 45.75rem); max-width: var(--body-width-on-desktop, 45.75rem); margin:0auto; }#page-content{max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); }@medianotalland (-webkit-min-device-pixel-ratio:0), notalland (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { #side-bar { transition: left500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; padding-right:0; background-color: rgb(0, 0, 0, 0); pointer-events:all; overflow-x:visible; overflow-y:visible; z-index:999; }#side-bar::-webkit-scrollbar{opacity:0; -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; }#side-bar.close-menu::before{z-index:999; }#side-bar.close-menu::after{z-index:998; }#side-bar:hover.close-menu::before{opacity:0; }#side-bar:hover{left:0; background-color: rgba(var(--swatch-menubg-color), 1); padding-right:0; }#side-bar:hover::-webkit-scrollbar{opacity:1; }#side-bar:hover~#main-content::before{width: calc(100% - var(--sidebar-width-on-desktop)); opacity:1; pointer-events:all; } } } } }
页面版本: 8, 最后编辑于: 30 May 2022 18:00