超速度版式-超级模式使用说明

版式 CSS 代码

/* Basic Mode */
 
:root {
    /* Basic Colors */
    --background-color: 237, 237, 255;
    --text-color: 20, 20, 33;
 
    /* Deco Colors */
    --light-color-1: var(--background-color);
    --light-color-2: 255, 255, 255;
    --dark-color-1: 135, 170, 230;
    --dark-color-2: 0, 53, 145;
    --dark-color-3: 70, 100, 180;
    --dark-color-4: 48, 48, 79;
 
    /* Link Colors */
    --link-color: var(--dark-color-2);
    --hover-link-color: var(--dark-color-1);
    --visited-link-color: var(--dark-color-3);
    --newpage-color: 160, 100, 180;
 
    /* Select Colors */
    --selected-background-color: var(--dark-color-1), .5;
 
    /* Scrollbar Colors */
    --scrollbar-color: var(--dark-color-3), 0.75;
 
    /* Note Colors */
    --note-background-color: var(--light-color-1), .75;
    --note-text-color: var(--text-color);
    --note-border-color: var(--dark-color-2);
 
    /* General Colors */
    --general-dark-border-color: var(--dark-color-2);
 
    /* Topbar Colors */
    --topbar-hover-border-color: var(--dark-color-1), 0.5;
 
    /* User Account Colors */
    --header-username-color: var(--dark-color-1);
    --account-button-text-color: var(--general-dark-text-color);
    --account-button-hover-text-color: var(--general-medium-text-color);
    --account-button-background-color: var(--general-medium-background-color);
    --account-button-hover-background-color: var(--general-dark-background-color);
    --account-drop-text-color: var(--general-dark-text-color);
    --account-drop-background-color: var(--general-medium-background-color);
    --account-drop-hover-background-color: var(--general-dark-background-color);
    --account-drop-border-color: var(--general-medium-border-color);
 
    /* Page Tag Colors */
    --page-tag-hover-background-color: var(--general-medium-background-color);
 
    /* Footer Colors */
    --license-background-color: var(--general-medium-background-color);
    --license-text-color: var(--general-medium-text-color);
 
    /* Sidebar Colors */
    --sidebar-handle-background-color: var(--general-medium-background-color);
    --sidebar-media-background-color: var(--text-color), 0;
    --sidebar-media-icon-color: var(--dark-color-2);
    --sidebar-title-background-color: var(--general-medium-background-color);
 
    /* Image Block Colors */
    --imageblock-caption-background-color: var(--general-medium-background-color);
    --imageblock-caption-text-color: var(--general-dark-text-color);
    --imageblock-border-color: var(--general-dark-border-color);
 
    /* Header & Horizon Colors */
    --hr-color: var(--dark-color-2);
 
    /* Tabview Colors */
    --tabview-hover-button-background-color: var(--general-dark-background-color);
    --tabview-selected-button-background-color: var(--general-medium-background-color);
 
    /* Tabel Colors */
    --table-border-color: var(--general-dark-border-color);
    --table-background-color: var(--light-color-2);
 
    /* Blockquote Colors */
    --blockquote-background-color: var(--light-color-1), .75;
    --blockquote-border-color: var(--general-dark-border-color);
 
    /* Rating Module Colors */
    --rating-background-color: var(--light-color-1);
    --rating-cancel-color: var(--dark-color-2);
 
    /* Popups Colors */
    --popup-title-background-color: var(--general-medium-background-color);
 
    /* Thread Colors */
    --thread-accent-color: var(--light-color-1);
 
    /* The 4 */
    --darkblock-background-color: var(--general-medium-background-color);
    --dark-styled-quote-background-color: var(--general-medium-background-color);
 
    /* Header Vs */
    --main-header-height-on-mobile: 10rem;
    --logo-image: url(https://backrooms-wiki-cn.wikidot.com/local--files/theme:speednoclippers/noclipb);
    --header-title: "速切玩家";
    --header-subtitle: "只为更快，只为通关";
    --header-title-font-size-on-mobile: 1.8rem;
    --header-subtitle-font-size-on-mobile: 0.8rem;
 
    /* Content Vs */
    --body-width: 54rem;
    --body-margin: max(calc((100% - var(--body-width)) / 2), 0rem);
 
    /* Popup Vs */
    --popup-loading-content: "速切玩家祈祷中……";
}
 
html {
    background: unset;
}
 
body {
    background-image: repeating-linear-gradient(135deg, rgb(var(--light-color-1)) 0, rgb(var(--light-color-1)) 2rem, rgba(var(--light-color-2), .2) 2rem,rgba(var(--light-color-2), .4) 4rem);
    background-attachment: fixed;
}
 
#header {
    background: unset;
}
 
#header::before {
    background-image: none;
}
 
#extra-div-1 {
    display: block;
    width: 100%;
    position: absolute;
    height: 17.5rem;
    left: 0;
    top: 0;
    background-color: rgb(var(--dark-color-4));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6.5rem), 0 100%);
    z-index: -3;
}
 
#extra-div-2 {
    display: block;
    width: 100%;
    position: absolute;
    height: 15.5rem;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom right, rgb(var(--dark-color-4)), rgb(var(--dark-color-2)));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5rem), 0 100%);
    z-index: -2;
}
 
#extra-div-3 {
    display: block;
    width: 100%;
    position: absolute;
    height: 5rem;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom, rgb(var(--dark-color-3)), rgb(var(--dark-color-2)));
    position: absolute;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
    z-index: -1;
}
 
#extra-div-4 {
    display: block;
    width: 100%;
    position: absolute;
    height: 10.5rem;
    left: 0;
    bottom: 0;
    background-color: rgb(var(--dark-color-2));
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 5rem);
    z-index: -1;
}
 
#extra-div-5 {
    display: block;
    width: 100%;
    position: absolute;
    height: 12.5rem;
    left: 0;
    bottom: 0;
    background-color: rgb(var(--dark-color-4));
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 6rem);
    z-index: -2;
}
 
a#account-topbutton, #search-top-box-form .button {
    box-shadow: 0 0 0.5rem rgba(var(--text-color), .4);
}
 
#header h1 a {
    perspective: 50rem;
}
 
#header h1 a span {
    width: fit-content;
    margin: auto;
    justify-content: flex-start;
    transform: rotateY(10deg) translate3d(3.5rem, 2rem, 15rem);
    padding: 0;
}
 
#header h2 span {
    perspective: 10rem;
    filter: drop-shadow(-0.5rem 0 0 rgba(var(--dark-color-3), .9)) drop-shadow(-0.5rem 0 0 rgba(var(--dark-color-1), .9));
}
 
#header h2 span::before {
    background-size: 100% auto;
    background-position: center -2.5rem;
    opacity: 1;
    width: 15rem;
    height: 9.5rem;
    margin: auto;
    display: block;
    transform: rotateY(10deg) translate3d(-6rem, 0rem, 2rem);
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 95%,60% 85%, 60% 83%, 0 100%);
}
 
@media only screen and (max-width: 1024px) {
  #header h1 a span {
    justify-content: center;
    transform: rotateY(10deg) translate3d(2rem, 0.5rem, 12.5rem);
    padding: 0;
  }
 
  #header h2 span::before {
    width: 12.5rem;
    clip-path: unset;
    transform: rotateY(10deg) translate3d(-5rem, 1rem, 2rem);
  }
}
 
#top-bar {
    background: linear-gradient(150deg, rgb(var(--dark-color-4)), rgb(var(--dark-color-2)));
    box-shadow: 0 0 0.5rem rgba(var(--text-color), .4);
}
 
#main-content {
    margin-top: 1rem;
    padding: 1rem;
    background: rgb(var(--general-light-background-color));
    box-shadow: 0 0 0.5rem rgba(var(--text-color), .4);
}
 
@media only screen and (max-width: 1024px) {
  #main-content {
    margin-top: 0;
  }
}
 
div.rate-box-with-credit-button, div.page-rate-widget-box, div.creditButtonStandalone, .yui-navset, table.wiki-content-table, .scp-image-block, blockquote, .blockquote, .lightblock, .darkblock, .styled-quote, .dark-styled-quote, div.wiki-note, div[id*=page-options-bottom] > a, #wd-editor-toolbar-panel a, .edit-help-34 a, .change-textarea-size a, #lock-info, div.buttons input, input.button, button, file, a.button, a.action-area-close, #view-diff-div > p > a {
    box-shadow: 0 0 0.5rem rgba(var(--text-color), .4);
}
 
div.rate-box-with-credit-button, div.page-rate-widget-box, div.creditButtonStandalone {
    border: rgba(var(--rating-border-color)) solid 0.15rem;
}
 
div.creditBottomRate div.page-rate-widget-box {
    border-bottom: rgba(var(--rating-border-color)) solid 0.15rem;
}
 
.darkblock {
    --link-color: var(--dark-color-1);
}
 
.styled-quote-d {
    background: rgba(var(--styled-quote-background-color));
    color: rgba(var(--styled-quote-text-color));
    border-left: rgba(var(--styled-quote-border-color)) solid 0.6rem;
    border-right: rgba(var(--styled-quote-border-color)) solid 0.6rem;
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    box-shadow: 0 0 0.5rem rgba(var(--text-color), .4);
}
 
.dark-styled-quote-d {
    --h1-color: var(--dark-styled-quote-text-color);
    --h2-color: var(--dark-styled-quote-text-color);
    --h3-color: var(--dark-styled-quote-text-color);
    --h4-color: var(--dark-styled-quote-text-color);
    --h5-color: var(--dark-styled-quote-text-color);
    --h6-color: var(--dark-styled-quote-text-color);
    --link-color: var(--dark-color-1);
    background: rgba(var(--dark-styled-quote-background-color));
    color: rgba(var(--dark-styled-quote-text-color));
    border-left: rgba(var(--dark-styled-quote-border-color)) solid 0.6rem;
    border-right: rgba(var(--dark-styled-quote-border-color)) solid 0.6rem;
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    box-shadow: 0 0 0.5rem rgba(var(--text-color), .4);
}
 
.borderblock {
    background: rgba(var(--styled-quote-background-color));
    color: rgba(var(--styled-quote-text-color));
    border: rgba(var(--styled-quote-border-color)) solid 0.3rem;
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    box-shadow: 0 0 0.5rem rgba(var(--text-color), .4);
}
 
.dark-borderblock {
    --h1-color: var(--dark-styled-quote-text-color);
    --h2-color: var(--dark-styled-quote-text-color);
    --h3-color: var(--dark-styled-quote-text-color);
    --h4-color: var(--dark-styled-quote-text-color);
    --h5-color: var(--dark-styled-quote-text-color);
    --h6-color: var(--dark-styled-quote-text-color);
    --link-color: var(--dark-color-1);
    background: rgba(var(--dark-styled-quote-background-color));
    color: rgba(var(--dark-styled-quote-text-color));
    border: rgba(var(--dark-styled-quote-border-color)) solid 0.3rem;
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    box-shadow: 0 0 0.5rem rgba(var(--text-color), .4);
}
 
.logoblock {
    position: relative;
}
 
.logoblock::after {
    content: "";
    background-image: url(https://backroomssandboxcn.wikidot.com/local--files/collab:theme:speednoclippers/speednoclippers.svg);
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    pointer-events: none;
}
 
.noclipblock {
    position: relative;
}
 
.noclipblock::after {
    content: "";
    background-image: url(https://backrooms-wiki-cn.wikidot.com/local--files/theme:speednoclippers/noclipb);
    background-position: -7.5vh center;
    background-size: auto 250%;
    background-repeat: no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    pointer-events: none;
}
 
.darkblock.noclipblock::after {
    background-image: url(https://backrooms-wiki-cn.wikidot.com/local--files/theme:speednoclippers/noclipw);
}
 
.noclipblock.r::after {
    background-position: calc(100% + 7.5vh) center;
}
 
.shadowblock {
    background: rgba(var(--light-color-1));
    color: rgba(var(--styled-quote-text-color));
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    box-shadow: 0.5rem 0.5rem rgb(var(--dark-color-2));
}
 
.inset-shadowblock {
    background: rgba(var(--styled-quote-background-color));
    color: rgba(var(--styled-quote-text-color));
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    box-shadow: inset 4.5rem 1rem rgba(var(--dark-color-1),.5), inset 8rem 2rem rgba(var(--dark-color-1),.5), 0 0 0.5rem rgba(var(--text-color), .4);
}
 
.nchr {
    height: 2rem;
    background-image: url("http://backrooms-wiki-cn.wikidot.com/local--files/theme:speednoclippers/noclipb");
    background-size: 2rem;
    background-position: center;
    margin: 1.5rem;
    background-repeat: no-repeat;
}
 
.pager {
    border-bottom: rgba(var(--general-button-background-color)) solid 0.2rem;
}
 
.pager a:is(:hover, :active, :focus, :focus-within) {
    background: rgba(var(--general-hover-button-background-color));
}
 
.pager .current {
    background: rgba(var(--general-button-background-color));
}
 
#new-post-form {
    background-color: rgba(var(--edit-area-background-color));
    color: rgba(var(--edit-area-text-color));
    padding: 1rem;
}
 
#new-post-form .form {
    margin: 0 !important;
    width: 100%;
}
 
#new-post-form .form td:first-child {
    display: none;
}
 
#new-post-form .form td:last-child {
    padding: 0;
}
 
#new-post-div input.text {
    border: none;
    color: rgba(var(--edit-area-textarea-text-color));
    background: rgba(var(--edit-area-textarea-background-color));
    margin: 0;
    padding: 0.2em 0.5em;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: box-shadow var(--general-transition-time-slow);
    font-weight: 900;
}
 
#new-post-div textarea#np-text {
    width: 100% !important;
    color: rgba(var(--edit-area-textarea-text-color));
    background: rgba(var(--edit-area-textarea-background-color));
    font-size: 0.95rem;
    outline: none;
    box-sizing: border-box;
    border: none;
    transition: box-shadow var(--general-transition-time-slow);
}
 
#new-post-div input.text:focus-visible,
#new-post-div textarea#np-text:focus-visible {
    box-shadow: 2px 2px 0 rgba(var(--edit-area-textarea-border-color)), -2px 2px 0 rgba(var(--edit-area-textarea-border-color)), -2px -2px 0 rgba(var(--edit-area-textarea-border-color)), 2px -2px 0 rgba(var(--edit-area-textarea-border-color));
}
 
.wd-editor-toolbar-panel {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    grid-gap: 0.5rem;
}
 
.wd-editor-toolbar-panel div {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 0.5rem;
    width: 100%;
    justify-content: center;
    height: auto;
}
 
.wd-editor-toolbar-panel div > ul {
    display: contents;
}
 
.wd-editor-toolbar-panel div > ul li {
    display: block;
    width: 2rem;
    height: 2rem;
}
 
.wd-editor-toolbar-panel div > ul > li.hseparator {
    display: none;
}
 
.wd-editor-toolbar-panel ul li:hover ul {
    border: 2px solid rgba(var(--edit-area-hover-button-background-color));
}
 
.wd-editor-toolbar-panel ul li a {
    width: 100%;
    height: 100%;
    background: rgba(var(--edit-area-button-background-color));
    transition: background var(--general-transition-time-fast);
    box-shadow: 0 0 0.5rem rgba(var(--text-color), .4);
}
 
.wd-editor-toolbar-panel ul li a:is(:hover, :active, :focus, :focus-within) {
    background: rgba(var(--edit-area-hover-button-background-color));
}
 
.wd-editor-toolbar-panel ul li a::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    -webkit-mask-image: var(--edit-area-toolbar-icon-mask);
            mask-image: var(--edit-area-toolbar-icon-mask);
    background: rgba(var(--edit-area-button-text-color));
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 75%;
            mask-size: 75%;
}
 
.wd-editor-toolbar-panel ul li a:is(:hover, :active, :focus, :focus-within)::before {
    background: rgba(var(--edit-area-hover-button-text-color));
}
 
::-moz-selection {
    color: inherit;
}
 
::selection {
    color: inherit;
}
 
#edit-page-textarea {
    padding: 0;
}
 
.owindow.owait .content {
 
    transform: skewX(15deg);
 
}

这是超速度版式的超级模式！

你可以通过在本版式的 [[include]] 模块中加入 ultra-speed=a 来启用它！

然后使用这些代码来创建一个讨论串：

[[div class="styled-quote-d fake-head"]]
[!-- 这是最外侧的边框，其中“styled-quote-d” 也可以换成其它诸如“lightblock”“styled-quote”之类，但不建议换成深色 div 类——可能会导致一些问题。 --]

[[div class="fake-topic" data-title="此处填写帖文主题"]]
[[/div]]

[[div class="fake-num fannounce" data-title="此处填写帖文编号"]]
[[/div]]
[!-- 帖文主题无需填写“主题：”，编号亦无需填写“主题帖等” --]
[!-- “fannounce”是公告帖、“fnormal”是主题帖、“ftalk”是闲聊帖 --]

[[/div]]

速切玩家协会会长，有需要请私信。

---

之后再在讨论串模块里面添加这些代码来创建一个帖文楼层：

[[div class="fake-wrapper"]]

[[div class="fake-avator" data-title="用户名"]]
[[image 用户头像的 url 地址]]
[[/div]]

[[div class="fake-content"]]

帖文正文

[[/div]]

[[/div]]

[[div class="fake-foot"]]

[[div_ class="fake-sign"]]
用户签名档
[[/div]]

[[div_ class="fake-wrapper"]]

[[div_ class="fake-time" data-title="发布日期"]]
[[/div]]

[[div_ class="fake-ip" data-title="IP属地"]]
[[/div]]

[[/div]]

[[/div]]

记得在两个楼层之间添加分割线“-----”！

2 / 1 = 1

---

一些忘记说了的东西：如果用户是论坛管理员，记得在头像后面加上 [[div class="admin"]]，就像这样：

[[div class="fake-avator" data-title="Beginnners"]]
[[image 头像的url]]
[[div class="admin"]]
[[/div]]
[[/div]]

同理，认证用户则使用 vip 来标注！

另外，如果你没有头像或者单纯像我一样不想用头像，就直接在 fake-avator 的 div 块里面用 [[div class="initava"]] 替换 {{[[image]]}} 来使用默认头像！

[[div class="fake-avator" data-title="MIDPOINT"]]
[[div class="initava"]]
[[/div]]
[[div class="admin"]]
[[/div]]

代码示例奉上——！

2 / 1 = 1

---

这些更新很不错，但是代码太复杂了，我可不可以不使用它们？

哦对了，如果你想像我一样整点花里胡哨的就在 fake-content 这个块里面死命堆点div。

炮决！统统炮决！

---

当然可以！毕竟超级模式的本质只是取消了 #main-content 的背景，外加一大堆 CSS 代码而已，不使用它们的完全可以的！

不过还是建议尽量将内容包裹在各式引用块中以避免背景带来的不良观感。

2 / 1 = 1

---

你说得对，但是《速切之神》是由后室中文维基自主研发的一款全新开放世界冒险游戏。游戏发生在一个被称作「后室」的幻想世界，在这里被密钥师选中的酥皮将被授予「通行」，引导速切之力。你将扮演一位名为「SuperCuteCat」的神秘角色，在自由的层级中邂逅性格各异、能力独特的速切玩家们，和它们一起击败铁拳，找回密钥师的同时，逐步发掘「速切」的真相。

因为一直被沟槽的0null封禁导致我非常的红温，所以我决定在我的签名档里面使用一大堆废话来撑爆速切玩家中文论坛。

---

请勿在重要公告下发布无意义信息。另外，在 fake-avator 后添加 banned 表示已封禁用户，像这样：

[[div class="fake-avator banned" data-title="fljlus"]]

---

单击 此链接 以返回原版式页面。

‡ 授权 / 引用

请按如下方式引用此页：

“超速度版式-超级模式使用说明”，作者 Liurd，来自后室中文维基。原文链接：http://backrooms-wiki-cn.wikidot.com/how-2-use-ultra-speed。遵循 CC BY-SA 3.0 协议。

---

judgeclippers.png 系本人制作，发布于 CC-BY-SA 3.0 协议下。

000000 请参考 “落舟湾” 中的版权声明。

dove-3426187_1280.jpg 请参考 布里吉塔·罗丝 中的版权声明。

更多授权相关信息，请查阅授权指导。

---