这东西放在这儿是为了让CSS强制更新
[[/code]]
记不记得上次我说我再也不做版式了?你被骗了。
这个版式的作者是来自计算机专业的Sky3,主要的代码实际上都是从
TrailmixNCocoa的M.E.G.版式那儿“偷”来的。如果有一天我要坐在写字楼里办公一整天,没准还能高产点。
搬运者是Ambersight。
想要把这个版式加到你的页面里,随便找个空插入以下代码:
[[include :backrooms-wiki-cn:theme:corporate]]
@import url("https://fonts.googleapis.com/css2?family=Aldrich&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap'); :root { --theme-base: "black-highlighter"; --theme-id: "corporate"; --theme-name: "Corporate Theme"; --logo-image: url("http://backrooms-sandbox-2.wdfiles.com/local--files/sky3theme/corporate-logo"); --header-title: "The Backrooms"; --header-subtitle: "未来空间,近在眼前"; --body-font: 'Aldrich', zcoolwenyiti; --header-font: 'Kdam Thmor Pro', zcoolwenyiti; --title-font: 'Kdam Thmor Pro', zcoolwenyiti; --mono-font: 'Noto Serif SC', sans-serif; --terminal-font: 'VonwaonBitmap 12px', sans-serif; --additional-font: 'Noto Sans SC', sans-serif; --white-monochrome: 47, 63, 76; --text-white-monochrome: 231,254,255; --swatch-text-secondary-color: 231,254,255; --pale-gray-monochrome: 0,115,207; --light-gray-monochrome: 207,236,255; --gray-monochrome: 174,198,207; --black-monochrome: 240, 255, 255; --bright-accent: 240, 248, 255; --medium-accent: 30, 181, 232; --dark-accent: 125, 196, 235; --pale-accent: 69,177,232; --alt-accent: 0, 114, 187; --midnight-blue: 0,2,64; --baby-blue: 161,202,241; --medium-blue: 65,105,225; --darker-blue: 0,3,132; --swatch-topmenu-border-color: var(--medium-accent); --swatch-headerh1-color: 222, 222, 222; --swatch-headerh2-color: 176,196,222; --link-color: 70,150,200; --hover-link-color: 90, 180, 220; --visited-link-color: 162,162,208; --background-gradient-distance: 0rem; --gradient-header: linear-gradient(to top, rgba(var(--medium-accent)) 0%, rgba(var(--medium-accent), 0.90) 0% ); --diagonal-stripes: linear-gradient(transparent 0); } #skrollr-body { background-image: radial-gradient(circle, rgb(var(--medium-accent)) 50%, transparent 0); background-repeat: repeat; background-size: 0.25em 0.25em; width: 100%; height: 7.5rem; } #side-bar .side-block div a img { filter: grayscale(100%); } #container { background-image: radial-gradient(circle, rgb(var(--medium-accent), 0.05) 50%, transparent 0); background-size: 0.25em 0.25em; background-repeat: repeat; background-attachment: fixed; } #top-bar div.mobile-top-bar > ul > li > a, #top-bar div.top-bar > ul > li > a, #top-bar div.mobile-top-bar > ul > li > ul > li > a, #top-bar div.top-bar > ul > li > ul > li > a { color: rgb(var(--bright-accent)); } div#page-options-bottom-2 > a, div#page-options-bottom > a { border-radius: 0em; -moz-border-radius: 0em; border: none; } div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover { border: none; } #header, #top-bar { background-attachment: scroll; } #header { background-image: none; } #header::before { content: ""; position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-image: var(--logo-image); background-size: auto 16rem; background-position: center; background-repeat: no-repeat; opacity: 0.4; } #header h1, #header h1 a { position: absolute; top: 1rem; margin: 0; width: 100%; display: flex; justify-content: center; z-index: 0; font-size: 1.5em; } #header h2, #header h2 span, #header h2 span::before { position: absolute; top: 2rem; margin: 0; width: 100%; display: flex; justify-content: center; font-size: 1em; } #header h1 a::before, #header h2 span::before { text-shadow: .063rem 0.1rem 0.1rem #0c0c0c; } .yui-navset .yui-nav .selected a { color: rgb(var(--bright-accent)) !important; } table.wiki-content-table th { color: rgb(var(--white-monochrome)); } #login-status { color: rgb(var(--bright-accent)); } #login-status a { color: rgb(var(--bright-accent)); } #search-top-box input.empty { color: rgb(var(--bright-accent)); } a.newpage { background: transparent; text-decoration: none } a.newpage { color: rgb(var(--alt-accent)) } blockquote { box-shadow: 0.05rem 0.1rem 0.3rem rgba(90, 20, 20,.25); } blockquote a { color: rgb(var(--light-gray-monochrome)); } .styled-quote { background-color:rgb(var(--black-monochrome)); border-left: 0.5rem solid rgba(var(--midnight-blue)); color:rgb(var(--darker-blue)); padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); } .dark-styled-quote { background-color:rgb(var(--midnight-blue)); border-left: 0.5rem solid rgba(var(--black-monochrome)); color:rgb(var(--text-white-monochrome)); padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); } .lightblock { background-color: rgb(var(--black-monochrome)); color: rgb(var(--darker-blue)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } .block { background-color:rgb(var(--gray-monochrome)); color:rgb(var(--midnight-blue)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } .darkblock { background-color:rgb(var(--midnight-blue)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); color: rgb(var(--text-white-monochrome)); } .titleblock { background-color: rgb(var(--black-monochrome)); color:rgb(var(--midnight-blue)); padding: 0.5rem 1rem 0.10rem; margin: 1.5rem 0rem 0.5rem 0rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5); border: solid rgb(var(--baby-blue)) 2px; } .titlebox{ color: rgb(var(--midnight-blue)); position: relative; top: -1.6rem; background-color: rgb(var(--baby-blue)); padding: 0.25rem 1rem; line-height: 0.1rem; } .dark-titleblock { background-color: rgb(var(--midnight-blue)); color:rgb(var(--text-white-monochrome)); padding: 0.5rem 1rem 0.10rem; margin: 1.5rem 0rem 0.5rem 0rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5); border: solid rgb(var(--baby-blue)) 2px; } .dark-titlebox{ color: rgb(var(--midnight-blue)); position: relative; top: -1.6rem; background-color: rgb(var(--baby-blue)); padding: 0.25rem 1rem; line-height: 0.1rem; } .border-block { background-color:rgb(var(--gray-monochrome)); color:rgb(255, 255, 255); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: solid 0.3rem rgb(var(--gray-monochrome)); } .filetabs .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li { display: inline-block; } .filetabs .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { display: block; } .filetabs .yui-navset .yui-content { border-top-width: 15px; } .filetabs .yui-navset .yui-nav a, .filetabs .yui-navset .yui-navset-top .yui-nav a, .filetabs .yui-navset .yui-nav .selected a, .filetabs .yui-navset .yui-nav a:focus, .filetabs .yui-navset .yui-navset-top .yui-nav a:focus, .filetabs .yui-navset .yui-nav a:hover, .filetabs .yui-navset .yui-navset-top .yui-nav a:hover { background-color: transparent; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no' %3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' preserveAspectRatio='none' viewBox='0 0 150 45' xml:space='preserve'%3E%3Cdesc%3ECreated with Fabric.js 4.6.0%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg transform='matrix(1 0 0 1 74.95 22.39)' id='bC-LIzxo7Tu37zCdkDrqS' %3E%3Cpath style='stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(125, 196, 235); fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' transform=' translate(0, 0)' d='M -74.94856 22.50703 L -60.0064 -12.520110000000003 C -60.0064 -12.520110000000003 -55.89385 -21.849030000000003 -47.235839999999996 -22.281930000000003 C -38.57782999999999 -22.714830000000003 46.87608 -22.39016 46.87608 -22.39016 C 46.87608 -22.39016 56.05659 -23.219710000000003 61.40639 -12.520120000000002 C 66.75618 -1.8205300000000015 74.94856 22.506959999999996 74.94856 22.506959999999996 z' stroke-linecap='round' /%3E%3C/g%3E%3Cg transform='matrix(1 0 0 1 75.18 17.97)' id='E8ePkHu_UUyvFWDAIzFyP' %3E%3Cpath style='stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(125, 196, 235); fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' transform=' translate(0, 0)' d='M -46.15385 12.0108 L -46.15385 -12.01079 L 46.153839999999995 -12.01079 L 46.153839999999995 12.0108 z' stroke-linecap='round' /%3E%3C/g%3E%3C/svg%3E"); background-size: 100% 2.7rem; background-repeat: no-repeat; border-width: 0px; border-top: none; background-position: top; } .filetabs .yui-navset .yui-nav a, .filetabs .yui-navset .yui-navset-top .yui-nav a { padding: 4px 20px 0px 20px; } .filetabs .yui-navset .yui-nav .selected a, .filetabs .yui-navset .yui-nav a:focus, .filetabs .yui-navset .yui-navset-top .yui-nav a:focus, .filetabs .yui-navset .yui-nav .selected a:hover, .filetabs .yui-navset .yui-navset-top .yui-nav .selected a:hover { padding: 8px 20px 0px 20px; } .filetabs .yui-navset .yui-nav a:hover, .filetabs .yui-navset .yui-navset-top .yui-nav a:hover { padding: 6px 20px 0px 20px; } .filetabs .yui-navset .yui-nav, .filetabs .yui-navset .yui-navset-top .yui-nav { border-color: transparent; } .filetabs .yui-navset .yui-nav .selected, .filetabs .yui-navset .yui-navset-top .yui-nav .selected, .filetabs .yui-navset .yui-nav .selected a:active, .filetabs .yui-navset .yui-nav .selected a:focus, .filetabs .yui-navset .yui-nav li, .filetabs .yui-navset .yui-navset-top .yui-nav li { background-color: transparent; } .filetabs .yui-navset .yui-nav li, .filetabs .yui-navset .yui-navset-top .yui-nav li { box-shadow: none; } .filetabs .yui-navset .yui-nav li { margin-right: 36px; } .filetabs .yui-navset .yui-nav .selected a { color: rgb(var(--pale-gray-minochrome)) !important; } .filetabs .yui-navset .yui-nav a:focus, .filetabs .yui-navset .yui-nav a:hover { color: rgb(var(--white-monochrome)); } .filetabs .yui-navset .yui-nav .selected a em, .filetabs .yui-navset .yui-nav .selected a:hover em { position: relative; top: -4px; } .filetabs .yui-navset .yui-nav a:hover em { position: relative; top: -2px; } .filetabs .yui-navset .yui-nav li, .filetabs .yui-navset .yui-navset-top .yui-nav li { border-bottom: solid 1px rgb(var(--black-monochrome)); } .filetabs .yui-navset .yui-nav li.selected, .filetabs .yui-navset .yui-navset-top .yui-nav li.selected { border-bottom: none; z-index: 1; } code, .code { background-color: rgb(var(--darker-blue)); } :root{ --base-color: rgb(34,191,250); --hover-color: rgb(173,216,230); --click-color: rgb(164,221,237); } #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { margin-top: 10px; padding-left: 1rem; padding-right: 1rem; box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px; transition: background 0.1s linear; background: var(--base-color); width: min-content; white-space: nowrap; overflow: hidden; } #page-content .collapsible-block-link { color: white; font-weight: bold; text-decoration: none; } #page-content .collapsible-block-link:hover { text-decoration: none } #page-content .collapsible-block-content { transition: border-top-color 0.2s linear, border-bottom-color 0.2s linear; border-top: solid var(--base-color) 5px; border-bottom: solid var(--base-color) 3px; } #page-content .collapsible-block-folded { max-width: 100%; } #page-content .collapsible-block-unfolded-link{ width: min-content; } #page-content .collapsible-block-folded .collapsible-block-link::before { content: "▷"; border-right: none; padding-right: 0rem; margin-right: 1rem; font-weight: normal; font-family: var(--mono-font); } #page-content .collapsible-block-unfolded .collapsible-block-link::before { content: "▽"; border-right: none; padding-right: 0rem; margin-right: 1rem; font-weight: normal; font-family: var(--mono-font); } #page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover { background: var(--hover-color); max-width: 100%; } #page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content{ border-top-color: var(--hover-color); border-bottom-color: var(--hover-color); } #page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content::after { background: var(--hover-color); } #page-content .collapsible-block-folded:active, #page-content .collapsible-block-unfolded-link:active, #page-content .collapsible-block-unfolded-link:active + .collapsible-block-content::after { transition: background 0s, max-width 0s; background: var(--click-color); max-width: 100%; } #page-content .collapsible-block-unfolded-link:active + .collapsible-block-content { transition: border-top-color 0s, border-bottom-color 0s; border-top-color: var(--click-color); border-bottom-color: var(--click-color); } #page-content .unfolded-collapse { margin-top: 10px; padding-left: 1rem; padding-right: 1rem; box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px; background: var(--base-color); color: white; font-weight: bold; width: min-content; white-space: nowrap; overflow: hidden; } #page-content .unfolded-collapse::before { content: "▽"; border-right: none; padding-right: 0rem; margin-right: 1rem; font-weight: normal; font-family: var(--mono-font); } #page-content .unfolded-collapse-border { display: block; width: 700px; border-top: solid var(--base-color) 5px; } #page-content .center-collapse .collapsible-block-folded, #page-content .center-collapse .collapsible-block-unfolded-link, #page-content .center-collapse .unfolded-collapse{ margin:auto; margin-top: 10px; } #page-content .addendumfooter{ display: block; border-bottom: solid 3px var(--base-color); margin: auto; text-align: center; } #page-content .info-container .collapsible-block { counter-increment: none; } #page-title{ font-family: var(--header-font); border-bottom: 2px solid rgb(var(--pale-accent)); text-align: center; color: rgb(var(--pale-accent)); } #page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link { transition: none; width: 100%; max-width: 100%; margin: 0 auto; padding: 0; box-shadow: none; background: var(--barColour); } #page-content .info-container .collapsible-block-folded::before, #page-content .info-container .collapsible-block-unfolded-link::before { content: ""; display: none; } #page-content .info-container .collapsible-block-content { border-bottom: none; transition: none; border-top: none; } #page-content .info-container .collapsible-block-content::after { display: none; } #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded, #page-content .unfolded-collapse{ line-height: 1.4; } #page-content .collapsible-block-folded .collapsible-block-link::before, #page-content .collapsible-block-unfolded .collapsible-block-link::before, #page-content .unfolded-collapse::before { font-size: 130%; margin-left: -0.4em } .log-top { font-family: var(--header-font); text-align: center; font-size: 2em; color: rgb(var(--medium-blue)); } .presum { font-family: var(--title-font); color: rgb(var(--medium-blue)); } .presumtext { font-family: var(--additional-font); color: rgb(var(--medium-blue)); } table.speak th { font-size: 1.05em; font-weight: bold; border-right: 1px solid #c6d6dd; color: rgb(var(--medium-blue)); padding: 1.1em 1em 0em 1em; } table.speak td { padding: 1.1em 0em 0em 0.9em; } table.speak td.act { font-family: var(--mono-font); color: rgb(var(--darker-blue)); } table.speak td.speech { color: rgb(var(--medium-blue)); } .terminal-top { font-family: var(--header-font); text-align: center; font-size: 2em; color: rgb(var(--bright-accent)); } table.digital { font-family: var(--terminal-font); } table.digital th { font-weight: bold; border: none; padding: 0, 0, 0, 0; vertical-align: top; } table.digital td { padding: 0em 0 0 1em; } table.digital td.response { color: rgb(var(--baby-blue)); } #account-options{ color: rgb(var(--midnight-blue)); }
示例:
欢迎来到你的新家。
使用四个连字符“----”即可创造一条分割线(是的,四个就够了),分割线能够分割整个页面的东西。下面这条就是分割线。
在一行字前添加一到六个“+”即可创造标题。别忘记在“+”后面放个空格。不是开玩笑,不加空格的话你的标题就毁了。你不会想那样的。或许你想。
如果你认识马克·库班,那么你就能明白这份敬意从何而来。如果你不认识,就去看电影“大白鲨”。他的确没有出现在那部电影里,这也应该会让你很迷惑。
Never gonna give you up.
Never gonna let you down.
Never gonna run around and desert you.
Never gonna make you cry.
Never gonna say goodbye.
Never gonna tell a lie and hurt you.
数据损坏。在脸书的要求下删除照片。
等下,这怎么可——
哦,只是懒得写了。有趣的事实:这个页面的作者没心思再去找照片了,所以只打算写一句话糊弄过去。铁FIVE。
这是一个引用块,在一行前加上一个“> ”即可创建。
你染上这蓝色了吗?
我是不是得去跟经理说?
我们是不是要把你炒了?
这是一个 | 表格 |
---|---|
我不觉得 | 有任何人知道 |
怎么做这个 |
脚1
非常普通(一点也不原创)的文本。
读一下这个,签字。
用斜体强调,当然了。
用$6.95/磅的价码来勾引你
有些员工真的对下划线不太上手
喔,好细。
你知道吗?“the”这个词其实是个商标TM。
可能你不知道(C)
我向你保证,这个部门不存在。除非你自己创建了它。
这儿,老板的办公室。
各种框框:
方块:
[[div class="block"]]
[[/div]]
[[div class="darkblock"]]
[[/div]]
[[div class="lightblock"]]
[[/div]]
引用块:
[[div class="styled-quote"]]
[[/div]]
[[div class="dark-styled-quote"]]
[[/div]]
标题块:
插入文本
[[div class="titleblock"]]
[[span class="titlebox"]]插入文本[[/span]]
[[/div]]
插入文本
[[div class="dark-titleblock"]]
[[span class="dark-titlebox"]]插入文本[[/span]]
[[/div]]
特殊的Div
日志:
音频日志
前言:这是从你妈妈的电脑里随便找到的一个文件。
甲: | 你确定这是个好主意吗? |
---|---|
甲紧张地扫视周围。 | |
乙: | 不,所以我才一开始就去试。 |
后话: 乙死了,意料之中。
[[div class="lightblock"]]
[[div class="log-top"]]
这里放日志的标题
[[/div]]
----
[[div class="presum"]]
**前言:** [[span class="presumtext"]]这里放日志的前言。[[/span]]
[[/div]]
----
[[table class="speak"]]
[[row]]
[[hcell]]
这里插入对话者的名字:
[[/hcell]]
他说了什么?
[[/cell]]
[[/row]]
[[row]]
[[hcell]]
[[/hcell]]
[[cell class="act"]]
//额外的动作放在这里。//
[[/cell]]
[[/row]]
[[row]]
[[hcell]]
插入另一个对话者:
[[/hcell]]
[[cell class="speech"]]
她说了什么?
[[/cell]]
[[/row]]
[[/table]]
----
[[div class="presum"]]
**后话** [[span class="presumtext"]]这里写日志的结语/后话。[[/span]]
[[/div]]
[[/div]]
终端:
有趣的终端
> | 输入您的凭证: |
---|---|
/登入 BackroomsUser9193 密码 | |
> | 欢迎,BackroomsUser9193。您在过去一周触摸过青草吗(是/否)? |
/否 | |
> | 那么,您都做了什么?至少,请让我为您打开您的文件(是/否)? |
/是 | |
> | 错误:意外 |
[[div class="darkblock"]]
[[div class="terminal-top"]]
在这里插入终端标题
-----
[[/div]]
[[table class="digital"]]
[[row]]
[[hcell]]
@@>@@
[[/hcell]]
[[cell]]
插入终端消息
[[/cell]]
[[/row]]
[[row]]
[[hcell]]
[[/hcell]]
[[cell class="response"]]
@@ @@插入用户回应
[[/cell]]
[[/row]]
[[/table]]
[[/div]]
版头、标题、正文字体是Kdam Thmor Pro/站酷文艺体
正文字体是Aldrich/站酷文艺体
等宽字体是思源宋体
日志字体是思源黑体
终端字体是凤凰点阵体
作者: Sky3(一个不显眼的链接)
搬运:Ye_zhi_D does not match any existing user name(另一个不显眼的链接)
The logo is a composite of Minimalist Sandbox Icon by Itsquietuptown (CC BY-SA 4.0) and Gear icon svg by MGalloway (CC BY-SA 3.0). The logo made by me is therefore released under CC BY-SA 4.0.
NYC Modern Office by Paintzen is licensed under CC BY 2.0.
Bill Gates July 2014 by Simon Davis/DFID is licensed under CC BY 2.0.
Vin Diesel by Gage Skidmore is licensed under CC BY-SA 2.0.
Tesla Cybertruck outside unveil modB by u/Kruzat is licensed under CC BY-SA 4.0.
Ed Sheeran, 5 2013 by Eva Rinaldi is licensed under CC BY-SA 2.0.
Shark tank at golden nugget by ryan harvey is licensed under CC BY-SA 2.0.
Valve Trumpet in C MET DP-12679-126 by the Metropolitan Museum of Art is under CC0 1.0.
Sam's Club - Fort Wayne, IN( 50979977208) by Ambrosia LeFleur is licensed under CC BY 2.0.