黑标切换侧边栏

注意


此页为于 SCP 维基内部使用的"组件"页。用于在其他页面中引用。

未经组件作者或工作人员允许,请勿修改此页的内容。


这是干什么用的

使侧边栏默认隐藏并通过角落的一个按钮来切换,与网站的移动端版本类似。


使用方法

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
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License
点击编辑本页内容。
点击显示页面各部分的编辑按钮(如果可能)。 在标题边会出现"编辑"按钮。
在不编辑全部页面源代码的情况下添加内容。
查看本页过去是如何沿革的。
若您想要讨论本页内容,这是最简单的方法。
检视并管理本页附件。
管理网站的实用工具。
变更页面名称(及 URL 地址,或许会影响分类)。
在不编辑的情形下检视维基源代码。
检视 / 设定父页面(用以建立浏览足迹与结构化​​配置)。
向管理员举报本页有令人反感的内容。
事情不如预期?看看您可以做些什么。
通用的 Wikidot.com 文件与说明。
Wikidot.com 服务条款 — 您可以做的事,您不该做的事之类的。
Wikidot.com 隐私政策。

AltStyle によって変換されたページ (->オリジナル) /