SOYA-001版式

[[div id="u-side" style="position:fixed;display:none;"]] [[/div]] [[div class="close-ex"]] [[a href="#e" style="background-color: rgba(0, 0, 0, .5);font-size: 0;position: fixed; top: 0; left: 0; height: 100vh; width: 100vw;"]]close[[/a]] [[/div]] [[div class="c-side"]] [[include :scp-wiki-cn:nav:side]] [[/div]] [[div class="u-sidebar"]] [[a href="#u-side"]]≡[[/a]] [[/div]] [[module css]] @import url(https://rtas.wdfiles.com/local--code/n-theme:soya-001a/1); .c-side .menu-item>a:not(:first-of-type):not(:last-of-type), .c-side .menu-item>a:first-of-type:not(:last-of-type), .c-side .menu-item>a:last-of-type:not(:first-of-type) {   flex-grow: 0; } .c-side .menu-item a:before {   content: none !important; } [[/module]] [[iftags +版式]] [[include :scp-wiki-cn:credit:start-standalone]] **题目：**SOYA-001 Theme **作者：**©[[*user SOYA-001]] **搬运：**[[*user Backlight SH]] **原地址：** *http://rtas.wikidot.com/n-theme:soya-001a [[include :scp-wiki-cn:credit:end-standalone]] [[=]] + 主题颜色 [[/=]] [[div_ class="colors_container"]] [[div_ class="colors"]] [[div_ class="color one"]] [[div_ class="color sub"]] Crimson [[span class="css-variable"]]@@crimson-accent@@[[/span]][[span class="css-variable"]]@@(139, 17, 41)@@[[/span]] [[/div]] [[/div]] [[div_ class="color two"]] [[div_ class="color sub"]] Gray [[span class="css-variable"]]@@gray-accent@@[[/span]][[span class="css-variable"]]@@(238, 238, 238)@@[[/span]] [[/div]] [[/div]] [[/div]] [[div_ class="subcolors"]] [[div_ class="color one"]] [[div_ class="color sub"]] Light Gray [[span class="css-variable"]]@@lighter-gray-color@@[[/span]][[span class="css-variable"]]@@(236, 236, 236)@@[[/span]] [[/div]] [[/div]] [[div_ class="color two"]] [[div_ class="color sub"]] Dark Gray [[span class="css-variable"]]@@dark-gray-color@@[[/span]][[span class="css-variable"]]@@(195, 195, 195)@@[[/span]] [[/div]] [[/div]] [[div_ class="color three"]] [[div_ class="color sub"]] Darker Gray [[span class="css-variable"]]@@darker-gray-color@@[[/span]][[span class="css-variable"]]@@(198,198,198)@@[[/span]] [[/div]] [[/div]] [[/div]] [[/div]] 在你的作品开头添加如下语法以应用此版式： [[div class="code"]] @@[[include :scp-wiki-cn:theme:soya-001a]]@@ [[/div]] + 示例 可通过五个连字符“@@-----@@”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。 ----- 标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。 [[collapsible show="+ 标题" hide="- 标题"]] + 1 级标题 ++ 2 级标题 +++ 3 级标题 ++++ 4 级标题 +++++ 5 级标题 ++++++ 6 级标题 [[/collapsible]] @@ @@ [[tabview]] [[tab 分页]] 此为分页（tab view）。 [[/tab]] [[tab 分页]] 看，这有更多文字。 多么精巧绝伦。 [[/tab]] [[tab 长 Tab]] 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 这个空Tab的标题很长很长。为什么呢？真奇怪。]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[/tabview]] > 这是一个引用块，在一行字的起始处加上“> ”来创建，或使用 {{@@[[div class="blockquote"]]@@}}。 > > 更多文字 > ----- > 一条分割线 > >> 嵌套引用块[[footnote]]这里是脚注！[[/footnote]] [[div class="soya-block"]] soya block [[/div]] ||~ 这是 ||~ 表格 || || 你应该老早 || 就知道怎么 || |||| 做这个了吧 || [# 假链接] rgb(242, 119, 25) [[a class="newpage"]]尚不存在的链接[[/a]] rgb(229, 171, 42) [[include component:image-block name=http://rtas.wikidot.com/local--files/n-theme:soya-001a/soya.png|caption=这是一个图片框。|width=200px]] [[module css]] .rateBox:nth-child(2), .heritage-rating-module {   display: none; } .colors_container {     width: 100%;     display: -webkit-box;     display: -webkit-flex;     display: -moz-box;     display: -ms-flexbox;     display: flex;     -webkit-box-orient: vertical;     -webkit-box-direction: normal;     -webkit-flex-direction: column;        -moz-box-orient: vertical;        -moz-box-direction: normal;         -ms-flex-direction: column;             flex-direction: column;     margin: 0 auto;     font-weight: 700; } .colors_container > .colors, .colors_container > .subcolors {     width: 100%;     -webkit-flex-shrink: 0;         -ms-flex-negative: 0;             flex-shrink: 0;     display: -webkit-box;     display: -webkit-flex;     display: -moz-box;     display: -ms-flexbox;     display: flex;     -webkit-flex-wrap: wrap;         -ms-flex-wrap: wrap;             flex-wrap: wrap; } .colors > .color, .subcolors > .color {     display: -webkit-box;     display: -webkit-flex;     display: -moz-box;     display: -ms-flexbox;     display: flex;     -webkit-box-orient: horizontal;     -webkit-box-direction: normal;     -webkit-flex-direction: row;        -moz-box-orient: horizontal;        -moz-box-direction: normal;         -ms-flex-direction: row;             flex-direction: row;     -webkit-box-flex: 2;     -webkit-flex-grow: 2;        -moz-box-flex: 2;         -ms-flex-positive: 2;             flex-grow: 2;     -webkit-box-pack: center;     -webkit-justify-content: center;        -moz-box-pack: center;         -ms-flex-pack: center;             justify-content: center;     -webkit-box-align: end;     -webkit-align-items: flex-end;        -moz-box-align: end;         -ms-flex-align: end;             align-items: flex-end;     padding: 0.5rem;     margin: 0.5rem; } .colors > .color > .sub, .subcolors > .color > .sub, .colors > .color > .sub > .css-variable, .subcolors > .color > .sub > .css-variable {     display: -webkit-box;     display: -webkit-flex;     display: -moz-box;     display: -ms-flexbox;     display: flex;     -webkit-box-orient: vertical;     -webkit-box-direction: normal;     -webkit-flex-direction: column;        -moz-box-orient: vertical;        -moz-box-direction: normal;         -ms-flex-direction: column;             flex-direction: column;     -webkit-box-pack: center;     -webkit-justify-content: center;        -moz-box-pack: center;         -ms-flex-pack: center;             justify-content: center;     -webkit-box-align: center;     -webkit-align-items: center;        -moz-box-align: center;         -ms-flex-align: center;             align-items: center;     width: 100%; } .colors > .color {     height: 7rem;     -webkit-flex-basis: -webkit-calc((100%/2) - 2rem);         -ms-flex-preferred-size: calc((100%/2) - 2rem);             flex-basis: -moz-calc((100%/2) - 2rem);             flex-basis: calc((100%/2) - 2rem); } .colors > .color.one {     background-color: rgba(var(--crimson-accent), 1); } .colors > .color.two {     background-color: rgba(var(--gray-accent), 1); } .subcolors > .color {     height: 4rem;     font-size: 75%;     text-align: center;     -webkit-flex-basis: -webkit-calc((100%/6) - 2rem);         -ms-flex-preferred-size: calc((100%/6) - 2rem);             flex-basis: -moz-calc((100%/6) - 2rem);             flex-basis: calc((100%/6) - 2rem); } .colors > .color.one{     color: #eee; } .colors > .color.two {     color: #000; } .subcolors > .color.one, .subcolors > .color.two, .subcolors > .color.three {     color: #000; } .subcolors > .color.one {     background-color: rgba(var(--lighter-gray-color), 1); } .subcolors > .color.two {     background-color: rgba(var(--dark-gray-color), 1); } .subcolors > .color.three{     background-color: rgba(var(--darker-gray-color), 1); } [[/module]] [[/iftags]]