/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */ #top-bar .open-menu a { position: fixed; top: 0.5em; left: 0.5em; z-index: 5; font-family: 'Nanum Gothic', san-serif; font-size: 30px; font-weight: 700; width: 30px; height: 30px; line-height: 0.9em; text-align: center; border: 0.2em solid #888; background-color: #fff; border-radius: 3em; color: #888; pointer-events: auto; } @media not all and (max-width: 767px) { #top-bar .mobile-top-bar { display: block; pointer-events: none; } #top-bar .mobile-top-bar li { display: none; } #main-content { max-width: 708px; margin: 0 auto; padding: 0; transition: max-width 0.2s ease-in-out; } #side-bar { display: block; position: fixed; top: 0; left: -18rem; width: 15.25rem; height: 100%; margin: 0; overflow-x: hidden; overflow-y: auto; z-index: 10; padding: 1em 1em 0 1em; background-color: rgba(0,0,0,0.1); transition: left 0.4s ease-in-out; scrollbar-width: thin; } #side-bar:target { left: 0; } #side-bar:focus-within:not(:target) { left: 0; } #side-bar:target .close-menu { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; margin-left: 19.75em; opacity: 0; z-index: -1; visibility: visible; } #side-bar:not(:target) .close-menu { display: none; } #top-bar .open-menu a:hover { text-decoration: none; } /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */ @supports (-moz-appearance:none) { #top-bar .open-menu a { pointer-events: none; } #side-bar:not(:target) .close-menu { display: block; pointer-events: none; user-select: none; } /* This pseudo-element is meant to overlay the regular sidebar button so the fixed positioning (top, left, right and/or bottom) has to match */ #side-bar .close-menu::before { content: ""; position: fixed; z-index: 5; display: block; top: 0.5em; left: 0.5em; border: 0.2em solid transparent; width: 30px; height: 30px; font-size: 30px; line-height: 0.9em; pointer-events: all; cursor: pointer; } #side-bar:focus-within { left: 0; } #side-bar:focus-within .close-menu::before { pointer-events: none; } } }
空白风格 CSS |
---|
发布于 2021 年 3 月 |
感谢 |
著作信息
空白风格 CSS
作者:Placeholder McD、
HarryBlank
感谢 stormbreath、
EstrellaYoshte、和
Croquembouche 共同制作了大部分此版式中所引用的代码。特别是 Estrella。
这是什么?
这是空白风格 CSS:由 Placeholder McD 和
HarryBlank 为后者的作品所制作的视觉样式。它的存在使其能轻易地被更新并广泛应用于作品中。它本质上是
EstrellaYoshte 的半影版式的明亮版本,外加一些特有的注意事项。
它几乎肯定不能和其他版式一起使用,尤其是黑色标记笔。除非你知道你在干什么,否则不要使用此版式。
使用方法
在你的作品开头添加如下语法以应用此版式:
[[include :scp-wiki-cn:theme:blankstyle]]
注意此版式包含以下组件:
当你将此版式与著作信息模块一起使用时,将模块置于一个 [[div]] 元素中确保信息栏不会因渐显而延迟显示。
此版式借用了 PeppersGhost 的 Peppo 的插图方块以及 EstrellaYoshte 的代码,以将基础图像和插图方块居中,使它们在更小的屏幕上看起来更美观(见于:移动端)。它还借用了半影版式中 Estrella 的天才 sidebox 技术,大部分代码衍生自纸堆版式。
请前往讨论区参阅补丁说明以了解空白风格 CSS 的一些额外功能。
ACS 色彩表格
以下带有自定义色彩标题格的表格可以通过将表格置于一个 div 元素中来使用,分别名为“table1”至“table5”.注意将一个 SCP 插图方块置于这些 div 元素中会同样地改变其文本框。也注意这是一个“更好的脚注”,它的详细使用方法可参阅上文中的链接。。这些表格对应于 ACS 组件栏的 5 个基础等级。
这是一个普通的表格; |
---|
测试很无趣 |
这是一个绿色表格; |
---|
测试很有趣。 |
这是一个蓝色表格; |
---|
测试也很有趣。 |
这是一个黄色表格; |
---|
测试也很有趣。 |
这是一个橙色表格; |
---|
测试也很有趣。 |
这是一个红色表格; |
---|
测试开始变得无趣。 |
这是一个紫色表格; |
---|
测试就是测试。 |
注意:紫色表格用于描述Thaumiel级的项目,还有需要6级(宇宙绝密)或临时6级(Thaumiel-Proviso)权限才能访问的文件。这种规定顺应了Placeholder McD的通感偏好,以及哈利把自己喜欢的东西放到文章里的愿望。
tableb div 元素也会分离其内部表格的单元格。
这是一个破碎的表格; |
---|
测试特别有趣! |
哈利很长很长时间以来一直手动输入表格的格式。真是个书呆子。
源代码
/* BLANKSTYLE CSS [2021 Wikidot Theme] By Placeholder McD and HarryBlank Based on: Paperstack Theme by EstrellaYoshte Penumbra Theme by EstrellaYoshte */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,800;1,800&display=swap'); #page-content { font-size: 0.8rem; } #main-content { top: -1.6rem; padding: 0.2em; } div#container-wrap { background-image: none; } div#header { background-image: none; } #header h1, #header h2 { margin-left: 0; float: none; text-align: center; } #header h2 { margin-top: 0.45rem; } #header h1 span, #header h2 span { font-size: 0; display: none;} #header h1 a::before, #header h2::before { color: #000; font-family: Montserrat, Simhei, Arial, sans-serif; text-shadow: none; } #header h1 a::before { content: var(--header-title, "R\0026 C SITE-43"); font-weight: 400; font-size: 1.4em; } #header h2::before { content: var(--header-subtitle, "颠覆 常规 模式"); font-weight: 700; font-size: 1.3em; } #login-status, #login-status a { color: #333333; } #page-title { display: none; } #footer, #footer a { background: transparent; color: #333333; } #search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus, #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus { border: none; background: #333333; box-shadow: none; border-radius: 0px; color: #efefef; } #search-top-box input.empty { color: #999999; } #search-top-box { top: 2.3rem!important; right: 8px; } #top-bar { display: flex; justify-content: center; right: 0; top: 7.9rem; } #top-bar, #top-bar a { color: #333333; } h1, h2, h3, h4, h5, h6 { font-family: Montserrat, Simhei, Arial, sans-serif; color: #000; letter-spacing: 1px; } div#extra-div-1 { height: 160px; width: 100%; top: 0; position: absolute; background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ablankstyle/43Head.png'); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; z-index: -1; } body { background-image: linear-gradient( to bottom, #e0e0e0, #e0e0e0 90px, #e0e0e0 90px, #ffffff 200px, #ffffff 200px, #ffffff 100%); background-repeat: no-repeat; } :root { --timeScale: 1.5; --timeDelay: 1.5s; --posX: calc(50% - 358px - 13rem); --fnLinger: 1s; } #page-content tr th { padding: 6px; border: #000 1px solid; } #page-content tr td { padding: 12px; border: #000 1px solid; line-height: 1.4; } #page-content .sidebox tr td, #page-content .sidebox tr th { padding: 0.35em; } #side-bar { border-right: 1px solid #333; background: #DDD; } #side-bar .side-block { border: 1px solid #333; border-radius: 0; box-shadow: none; } #top-bar div.open-menu a { border: 1px solid #333; border-radius: 0; box-shadow: none; } @media (max-width: 767px) { #side-bar:target { border: 1px black; box-shadow: none; } } #side-bar .side-block { border: 1px solid #333; border-radius: 0; box-shadow: none; background-color: #FDF6D7; } #side-bar .side-block[style="background-color: #f0fff6;"] { background-color:#D7EFE7 !important; } #side-bar .side-block[style="background-color: #fff0f0;"] { background-color:#F5D8E0 !important; } #page-content .creditRate{ margin: unset; margin-bottom: 4px; } #page-content .rate-box-with-credit-button { background-color: #ffffff; border: solid 1px #000; box-shadow: none; border-radius: 0; } #page-content .rate-box-with-credit-button .fa-info { border: none; color: #333333; } #page-content .rate-box-with-credit-button .fa-info:hover { background: #333333; color: #ffffff; } .rate-box-with-credit-button .cancel { border: solid 1px #ffffff; } #page-content .creditButtonStandalone p a { background-color: #ffffff; border: solid 1px #000; box-shadow: none; border-radius: 0; color: #333333; } #page-content .creditButtonStandalone p a:hover { background: #333333; color: #ffffff; } /* ---- PAGE RATING ---- */ .page-rate-widget-box { box-shadow: none; border: solid 1px #000; margin: unset; margin-bottom: 4px; border-radius: 0; } .page-rate-widget-box .rate-points { background-color: #ffffff !important; color: #333333 !important; border: none; border-radius: 0; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: #ffffff; border-top: none; border-bottom: none; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { background: transparent; color: #333333; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { background: #333333; color: #ffffff; } .page-rate-widget-box .cancel { background: transparent; background-color: #ffffff; border: none; border-radius: 0; } .page-rate-widget-box .cancel a { color: #333333; } .page-rate-widget-box .cancel a:hover { background: #333333; color: #ffffff; border-radius: 0; } #page-content .rate-box-with-credit-button .page-rate-widget-box { border: none; } .anchor { position: sticky; height:0; top: 0; } .sidebox { padding: .14rem; margin-top: 0; margin-bottom: 8px; width: calc((100vw - 870px)/2); max-height: calc(100vh - 18rem); position: absolute; top: 0; left: 103.5%; z-index: 5; overflow: auto; box-sizing: border-box; } @media (max-width: 1290px) { .sidebox { display: none; visibility:hidden; } } .scp-image-block { box-shadow: none; } /* ---- YUI TAB BASE ---- */ .yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit} /* ---- YUI TAB CUSTOMIZATION ----*/ .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav{ display: flex; flex-wrap: wrap; width: calc(100% - .125rem); margin: 0 auto; border-color: #333333; box-shadow: none; } .yui-navset .yui-nav a, /* ---- Link Modifier ---- */ .yui-navset .yui-navset-top .yui-nav a{ color: #333333; /* ---- Tab Background Colour | [UNSELECTED] ---- */ background-color: #efefef; border: unset; box-shadow: none; box-shadow: none; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus{ color: #ffffff; /* ---- Tab Background Colour | [HOVER] ---- */ background-color: #333333; } .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */ .yui-navset .yui-navset-top .yui-nav li{ position: relative; display: flex; flex-grow: 2; max-width: 100%; margin: 0; padding: 0; color: #ffffff; background-color: #ffffff; border-color: transparent; box-shadow: none; } .yui-navset .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset-bottom .yui-nav li a{ display: flex; align-items: center; justify-content: center; width: 100%; } .yui-navset .yui-nav li em{ border: unset; } .yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em{ padding: .35em .75em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */ .yui-navset .yui-navset-top .yui-nav .selected{ flex-grow: 2; margin: 0; padding: 0; /* ---- Tab Background Colour | [SELECTED] ---- */ background-color: #333333; } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em{ border: none; } .yui-navset .yui-nav .selected a{ width: 100%; color: #ffffff; } .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:active{ color: #ffffff; background-color: #333333; } .yui-navset .yui-content { background-color: #ffffff; box-shadow: none; } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content{ padding: .5em; border: 1px solid #333; box-sizing: border-box; } /*---- SCROLLBAR ----*/ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #FFF; border-left: 1px solid #333; } ::-webkit-scrollbar-thumb { background: #CCC; border: #333 1px solid; } ::-webkit-scrollbar-thumb:hover { background: #EEE; } /*---- CENTER IMAGES ON MOBILE courtesy of EstrellaYoshte and PeppersGhost ----*/ .imagediv { float: right; margin: 15px } @media (max-width: 540px) { .imagediv { float: none; text-align:center; margin: auto; } } @media only screen and (max-width: 600px) { .scp-image-block.block-right{ float: none; margin: 10px auto; } } /*---- ACS-COLORED TABLE DIVS ----*/ #page-content .table1 tr th, #page-content .table1 .scp-image-block .scp-image-caption { background-color: #D7EFE7; } #page-content .table2 tr th, #page-content .table2 .scp-image-block .scp-image-caption { background-color: #D8ECF4; } #page-content .table3 tr th, #page-content .table3 .scp-image-block .scp-image-caption { background-color: #FDF6D7; } #page-content .table4 tr th, #page-content .table4 .scp-image-block .scp-image-caption { background-color: #FFDABF; } #page-content .table5 tr th, #page-content .table5 .scp-image-block .scp-image-caption { background-color: #F5D8E0; } #page-content .table6 tr th, #page-content .table6 .scp-image-block .scp-image-caption { background-color: rgba(146, 0, 255, 0.2); } .tableb .wiki-content-table { border-collapse: separate; border-spacing: 2px; } .tableb .scp-image-block { border: none; } .tableb .scp-image-block img { border: #000 1px solid; box-sizing: border-box; } .tableb .scp-image-block .scp-image-caption { margin-top: 2px; border: #000 1px solid; box-sizing: border-box; } .top-left-box > .item { display: none; } /* ---- WORDS NO LONGER BROKEN, THE CROQUEMBOUCHE HAS SPOKEN ---- */ span, a { word-break: normal !important } .avatar-hover { display: none !important; } #breadcrumbs, .pseudocrumbs { text-align: center; padding-top: 10px; } #main-content .page-tags span { max-width: 100%; } /* -- FANCY THINGS from Woedenaz's Dustjacket Theme -- */ .fancyhr hr { border-top: 2vw solid transparent; background-color: rgba(var(--bright-accent), 0); height: 0; box-sizing: border-box; border-image-source: url('https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_hr.png'); border-image-repeat: round round; background: none; border-image-slice: 80 500 80 500 fill; border-image-width: 10em 80em 10em 80em; } .fancyborder { box-sizing: border-box; border: 2vw solid rgba(0,0,0,0.5); border-image: url('https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_border.png') 600 round; border-image-width: 6; padding: 2vw; }