版式：FWS（Fake Wikidot Standard）

F W S
Fake Wikidot Standard
alpha v0.1.0

这是什么？

这是由Liurd制作的版式，可以直接引用或是用作其它版式的基底，可以正常适配 sigma-9 或黑色标记笔版式的页面元素，但本身是一个独立的代码体系，因此可以单独运行。

FWS现在拥有：

• 经典的 CSS 12列 Grid 布局；
• 使用十六进制的 :root 变量；
• 大量的自定义选项；
• 大量的自定义 Div 元素。

若需要引用此版式，将以下代码引入你的页面：

[[include :scp-wiki-cn:theme:fws]]

自定义

本版式使用的所有 :root 变量如下：

    --header-height:10rem;
    --topbar-height:2rem;
    --sidebar-width: 15rem;
    --background-height: 15rem;
 
    --standard-accent: #005CAD;
    --standard-secondary: #003C75;
    --standard-dark: #00305B;
    --standard-bright: #EFF7FF;
    --standard-light: #BAC8D3;
    --standard-white: #FFFFFF;
    --standard-black: #333333;
    --standard-gray: #D3D3D8;
 
    --standard-background: var(--standard-bright);
    --main-background: var(--standard-white);
    --secondary-background: var(--standard-bright);
    --standard-text-dark: var(--standard-black);
    --standard-text-light: var(--standard-white);
    --standard-link: var(--standard-accent);
    --standard-link-hover: var(--standard-dark);
    --standard-link-new: #999999;
    --standard-link-visited: var(--standard-secondary);
    --standard-h1-color: var(--standard-light);
    --standard-h1-hover: var(--standard-white);
    --standard-h2-color: var(--standard-light);
    --topbar-color: var(--standard-light);
    --topbar-hover: var(--standard-white);
    --dropdown-color: var(--standard-link);
    --dropdown-hover-color: var(--standard-link);
    --dropdown-background: var(--main-background);
    --dropdown-hover-background: var(--secondary-background);
    --scrollbar-track: var(--standard-background);
    --scrollbar-thumb: var(--standard-accent);
    --sidebar-link: var(--standard-link);
    --sidebar-text: var(--standard-secondary);
    --standard-border-color: var(--standard-accent);
    --secondary-border-color: var(--standard-gray);
    --dark-border: var(--standard-dark);
    --table-border-color: var(--standard-border-color);
    --tabview-color: var(--standard-text-dark);
    --tabview-background: var(--main-background);
    --tabview-hover-color: var(--standard-text-dark);
    --tabview-hover-background: var(--secondary-background);
    --tabview-seleted-color: var(--standard-text-light);
    --tabview-seleted-background: var(--standard-accent);
 
    --header-title: 'SCP基金会';
    --header-subtitle: '控制 收容 保护';
    --logo-image: url(https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg);
    --header-background:linear-gradient(var(--standard-secondary) 0,var(--standard-secondary));
 
    --main-font: "Trebuchet MS", Helvetica, sans-serif;
    --mono-font: "Lucida Console", Monaco, monospace;
    --header-font: var(--main-font);
    --title-font: var(--main-font);

通过修改这些变量可以达到改变全局效果的目的。

预设

本版式提供了一些可以在引入版式时一同引入的预设，它们通过在 [[include]] 模块中添加 |value=true 来使用（也就是形如 [[include :scp-wiki-cn:theme:fws |a=true |b=true]] 一样使用）：

+ 展示预设

蓝色模式

使用方法：直接引入版式。

白色模式

使用方法：在 include 模块中添加 |white=true

黑色模式

使用方法：在 include 模块中添加 |black=true

红色模式

使用方法：在 include 模块中添加 |red=true

绿色模式

使用方法：在 include 模块中添加 |green=true

紫色模式

使用方法：在 include 模块中添加 |purple=true

橙色模式

使用方法：在 include 模块中添加 |orange=true

暗色模式

使用方法：在 include 模块中添加 |darkmode=true

控收保模式

使用方法：在 include 模块中添加 |scp=true

顶栏居左

使用方法：在 include 模块中添加 |left-topbar=true

顶栏居中

使用方法：在 include 模块中添加 |centered-topbar=true

顶栏拉伸

使用方法：在 include 模块中添加 |stretch-topbar=true

页眉居中

使用方法：在 include 模块中添加 |centered-header=true

页眉居右

使用方法：在 include 模块中添加 |right-header=true

侧边栏居左

使用方法：在 include 模块中添加 |left-sidebar=true

切换侧边栏

使用方法：在 include 模块中添加 |toggle-sidebar=true

示例

可以通过四到六个“-”来创建分割线¹，一般它会延伸到整个页面宽，除非有什么东西挡着它。

---

通过“+”以创建标题：

一级标题

二级标题

三级

四级

五级

六级

分页示例：

分页1

这是一个分页。

分页2

看看我，我这有更多文字！

可真是古朴风格。

长分页

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

不知道为啥，这个空分页贼拉长。我想知道是咋回事儿？

空分页

空分页

空分页

空分页

空分页

这是一个引用块，在一行字的起始处加上“> ”来创建。
更多文字

---

一条分割线

嵌套块引用²

这是一个	表格
你应该早就	知道怎么
制作它了吧

这些东西是什么我^不用_多说吧³

[[div class="block"]]
这是一个没有任何样式的方块元素
[[/div]]

[[div class="lightblock"]]
这是一个亮色引用块
[[/div]]

[[div class="whiteblock"]]
虽然看不出来，但是这是一个白色方块
[[/div]]

[[div class="darkblock"]]
这是一个暗色方块
这是暗色方块中的链接
[[/div]]

[[div class="darkerblock"]]
这是一个颜色更暗的方块
[[/div]]

[[div class="darkestblock"]]
这是一个非常暗的方块
[[/div]]

[[div class="blackblock"]]
这是一个黑色的方块
[[/div]]

[[div class="styled-quote"]]
这是一个样式化引用块
[[/div]]

[[div class="dark-styled-quote"]]
这是一个暗色样式化引用块
[[/div]]

[[div class="block styled"]]
这是一个加了样式化选项的方块
[[/div]]

[[div class="block styled-r"]]
这是一个加了右侧样式化选项的方块
[[/div]]

[[div class="block styled-u"]]
这是一个加了顶部样式化选项的方块
[[/div]]

[[div class="block styled-b"]]
这是一个加了底部样式化选项的方块
[[/div]]

[[div class="block styled dark-styled"]]
这是一个加了暗色样式化边框的方块
[[/div]]

[[div class="block styled secondary-styled"]]
这是一个加了次强调样式化边框的方块
[[/div]]

[[div class="block border"]]
这是一个有边框的方块
[[/div]]

[[div class="block border bold"]]
这是一个加粗了边框的方块
[[/div]]

[[div class="block border thin"]]
这是一个边框更窄的方块
[[/div]]

[[div class="block border dashed"]]
这是一个边框的虚线的方块
[[/div]]

累了，不想解释了，这个是dotted

groove

ridge

inset - 记得这是边框样式，不是别的

outset - 同理

哈！这个是圆边（rhard）

[[div class="block border wider"]]
这是一个更宽的方块
[[/div]]

[[div class="block border thinner"]]
这个更窄
[[/div]]

[[div class="block shadow"]]
这个有阴影！
[[/div]]

[[div class="block dropshadow"]]
这个有一个更大的阴影！
[[/div]]

[[div class="hoverblock"]]
这是hoverblock，你可以把鼠标放在这里试试！
[[/div]]

[[div class="document"]]
这个方块会类似于…纸堆？
[[/div]]

[[div class="dark-document"]]
暗色的纸堆——真的有什么真实的原型吗？
[[/div]]

这是弹性方块们

你需要先把它们放进[[div class="flex-container"]]

然后在外面套一个[[div class="flex-item"]]

它们会自动填满每一行！

这是gird网格元素，它的用法和弹性元素差不多！

其实我只是不想再讲一遍

就是这样

不过它们不会自动填满每一行。

主要字体是 Trebuchet MS
等宽字体是 Lucida Console

+ 展示代码

/* FWS Theme */
 
/* by Liurd */
 
/* based on wikidot blank */
 
/* BASIC grid layout */
 
div#container {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: auto 1fr auto auto auto;
    max-width:100%;
}
 
#header {
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row-start: 1;
    grid-row-end: 2;
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: auto 3fr 2fr auto;
    height:var(--header-height);
}
 
#content-wrap {
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row-start: 2;
    grid-row-end: 3;
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    max-width:100%;
}
 
#footer {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 3;
    grid-row-end: 4;
    max-width:100%;
}
 
#license-area{
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 4;
    grid-row-end: 5;
    display: grid;
    justify-content:center;
    max-width:100%;
}
 
#header h1 {
    grid-column-start: 2;
    grid-column-end: 9;
    grid-row-start: 2;
    grid-row-end: 3;
    align-self: self-end;
    padding-bottom: 0.5rem;
}
 
#header h2 {
    grid-column-start: 2;
    grid-column-end: 9;
    grid-row-start: 3;
    grid-row-end: 4;
    align-self: start;
    text-align: right;
    max-width: 15rem;
}
 
#search-top-box {
    grid-column-start: 9;
    grid-column-end: 13;
    grid-row-start: 2;
    grid-row-end: 4;
}
 
#login-status {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 2;
}
 
#account-options {
    position: absolute;
}
 
#top-bar {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 4;
    grid-row-end: 5;
    left:0;
    height:var(--topbar-height);
    width:100%;
    max-width:100%;
}
 
div.top-bar {
    display: flex;
    justify-content: flex-end;
}
 
#top-bar ul {
    float: none;
    display: block;
    margin: 0 1rem;
}
 
div.mobile-top-bar {
    display: none;
}
 
#top-bar ul li {
    position: relative;
}
 
#top-bar ul li a {
    padding: 0 0.2rem;
}
 
#top-bar ul li ul {
    width: fit-content;
    flex-direction: column;
    right:0;
}
 
#top-bar li ul li {
    position:relative;
}
 
#side-bar {
    margin:0;
    padding:0;
    width:var(--sidebar-width);
    height:100vh;
    overflow-y:scroll;
    position:sticky;
    top:0;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}
 
#side-bar .menu-item,#side-bar .menu-item p {
    display:flex;
    justify-content: center;
    width:100%;
    max-width:100%;
    font-size:0;
}
 
#side-bar .menu-item a {
    flex-grow:1;
    font-size:1rem;
}
 
#side-bar .menu-item {
    align-items: center;
}
 
#side-bar .menu-item img {
    width: auto;
    height: 0.8rem;
}
 
#main-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1px, 100%));
    grid-template-rows: auto auto auto 1fr auto auto auto auto auto;
    max-width:100%;
    margin-left:0;
    min-height:100vh;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}
 
#page-content {
    max-height: fit-content;
}
 
#edit-page-title {
    width: 100%;
    max-width: 90%;
}
 
.wd-editor-toolbar-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: content-box;
    margin: 0;
    padding: .5rem 0;
    height: 100%;
}
 
#edit-page-comments {
    width: calc(100% - 3rem);
    min-height: 3rem;
    padding: 0 1rem;
    line-height: 1.5;
    resize: both;
    flex-wrap:wrap;
}
 
.page-options-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: fit-content;
}
 
.page-options-bottom a.btn {
    border: 0.1rem solid var(--standard-gray);
    border-left: 0.05rem solid var(--standard-gray);
    border-right: 0.05rem solid var(--standard-gray);
    border-bottom: 0.2rem solid var(--standard-gray);
    background: var(--main-background);
    color: var(--standard-text-dark);
    margin: 0.2rem 0;
    padding: 0.25rem 0.75rem;
    transition: color 0.25s, background 0.25s;
}
 
.page-options-bottom a.btn:first-child {
    border-radius: 0.2rem 0 0 0.2rem;
    border-left: 0.1rem solid var(--standard-gray);
}
 
.page-options-bottom a.btn:last-child {
    border-radius: 0 0.2rem 0.2rem 0;
    border-right: 0.1rem solid var(--standard-gray);
}
 
.page-options-bottom a.btn:hover {
    background: var(--secondary-background);
    color: var(--standard-text-dark);
}
 
/* globar variants */
 
:root{
    --header-height:10rem;
    --topbar-height:2rem;
    --sidebar-width: 15rem;
    --background-height: 15rem;
 
    --standard-accent: #005CAD;
    --standard-secondary: #003C75;
    --standard-dark: #00305B;
    --standard-bright: #EFF7FF;
    --standard-light: #BAC8D3;
    --standard-white: #FFFFFF;
    --standard-black: #333333;
    --standard-gray: #D3D3D8;
 
    --standard-background: var(--standard-bright);
    --main-background: var(--standard-white);
    --secondary-background: var(--standard-bright);
    --standard-text-dark: var(--standard-black);
    --standard-text-light: var(--standard-white);
    --standard-link: var(--standard-accent);
    --standard-link-hover: var(--standard-dark);
    --standard-link-new: #999999;
    --standard-link-visited: var(--standard-secondary);
    --standard-h1-color: var(--standard-light);
    --standard-h1-hover: var(--standard-white);
    --standard-h2-color: var(--standard-light);
    --topbar-color: var(--standard-light);
    --topbar-hover: var(--standard-white);
    --dropdown-color: var(--standard-link);
    --dropdown-hover-color: var(--standard-link);
    --dropdown-background: var(--main-background);
    --dropdown-hover-background: var(--secondary-background);
    --scrollbar-track: var(--standard-background);
    --scrollbar-thumb: var(--standard-accent);
    --sidebar-link: var(--standard-link);
    --sidebar-text: var(--standard-secondary);
    --standard-border-color: var(--standard-accent);
    --secondary-border-color: var(--standard-gray);
    --dark-border: var(--standard-dark);
    --table-border-color: var(--standard-border-color);
    --tabview-color: var(--standard-text-dark);
    --tabview-background: var(--main-background);
    --tabview-hover-color: var(--standard-text-dark);
    --tabview-hover-background: var(--secondary-background);
    --tabview-seleted-color: var(--standard-text-light);
    --tabview-seleted-background: var(--standard-accent);
 
    --header-title: 'SCP基金会';
    --header-subtitle: '控制 收容 保护';
    --logo-image: url(https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg);
    --header-background:linear-gradient(var(--standard-secondary) 0,var(--standard-secondary));
 
    --main-font: "Trebuchet MS", Helvetica, sans-serif;
    --mono-font: "Lucida Console", Monaco, monospace;
    --header-font: var(--main-font);
    --title-font: var(--main-font);
}
 
/* global bg & txt */
 
body {
    background-color:var(--standard-background);
    color:var(--standard-text-dark);
    font-size: 0.9rem;
    font-family: var(--main-font);
}
 
/* skroller bar */
 
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}
 
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
 
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}
 
/* header */
 
#container{
    background-image: var(--header-background);
    background-size:100% var(--background-height);
    background-repeat:no-repeat;
}
 
#header h1 a span, #header h2 span,#header h1 a span:hover {
   font-size: 0;
   font-family: var(--header-font);
}
 
#header h1 a span:before{
    font-size: 2rem;
}
 
#header h2 span:before{
    font-size: 0.9rem;
}
 
#header h1 a span,#header h1 a span:hover{
    color:transparent;
}
 
#header h1 a span:before {
    content: var(--header-title);
    color: var(--standard-h1-color);
    transition:color 0.25s;
}
 
#header h1 a:hover span:before {
    color: var(--standard-h1-hover);
}
 
#header h2 span{
    color:transparent;
}
 
#header h2 span:before {
    content: var(--header-subtitle);
    color: var(--standard-h2-color);
}
 
#header-extra-div-1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: var(--logo-image);
    background-size: auto 15rem;
    background-position: left;
    background-repeat: no-repeat;
    opacity: 0.1;
    content: "";
    z-index: -1;
}
 
/* search & login */
 
#search-top-box-input {
    transition: all 0.25s;
    color: var(--standard-text-light);
    background: var(--standard-secondary);
    border: 2px solid var(--standard-border-color);
    box-shadow: 0 1px 3px var(--standard-dark);
}
 
#search-top-box-input:hover,
#search-top-box-input:focus {
    color: var(--standard-text-dark);
    background: var(--main-background);
}
 
#search-top-box-form input[type=submit] {
    border: solid 2px var(--standard-border-color);
    border-radius: 0;
    color: var(--standard-text-light);
    background-color: var(--standard-secondary);
    box-shadow: 0 1px 3px var(--standard-dark);
    cursor: pointer;
    transition: all 0.25s;
    font-size: inherit;
    padding: 0.1rem 0.5rem;
}
 
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    color: var(--standard-text-light);
    background-color: var(--standard-accent);
}
 
#login-status {
    color: var(--standard-text-light);
}
 
#login-status a {
    background: transparent;
    color: var(--standard-text-light);
}
 
#account-options {
    box-shadow: 0 1px 3px var(--standard-dark);
    border:none;
}
 
#login-status ul a {
    background: var(--dropdown-background);
    color:var(--dropdown-color);
    transition: all 0.25s;
    box-shadow: inset 0.1rem 0 var(--dropdown-background);
}
 
#login-status ul a:hover,
#login-status ul a:focus {
    color:var(--dropdown-hover-color);
    background: var(--dropdown-hover-background);
    box-shadow: inset 0.1rem 0 var(--dropdown-hover-color);
}
 
#account-topbutton {
    border:none;
    background: var(--standard-secondary);
    color: var(--standard-text-light);
}
 
/* top bar */
 
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background:transparent;
}
 
#top-bar ul li a {
    color: var(--topbar-color);
    line-height:var(--topbar-height);
    transition: color 0.25s, background 0.25s;
}
 
#top-bar ul li a:hover {
    color: var(--topbar-hover);
    text-decoration:none;
}
 
#top-bar ul li ul {
    border: none;
    display: block;
    opacity: 0;
    transition: opacity 0.25s ,visibility 0s 0.25s;
    background: var(--dropdown-background);
    box-shadow: 0 1px 3px rgb(0, 0, 0, .2);
}
 
#top-bar ul li.sfhover ul,
#top-bar ul li:hover ul,
#top-bar ul li:active ul,
#top-bar ul li:focus ul {
    display:block;
    transition: opacity 0.25s;
    background: var(--dropdown-background);
    opacity: 1;
}
 
#top-bar ul li ul li a {
    background-color: var(--dropdown-background);
    color: var(--dropdown-color);
    box-shadow: inset 0.1rem 0 var(--dropdown-background);
    text-align: right;
}
 
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a{
    background-color: var(--dropdown-background);
    color: var(--dropdown-color);
    box-shadow: inset 0.1rem 0 var(--dropdown-background);
    transition: color 0.25s, background 0.25s, box-shadow 0.25s;
}
 
#top-bar ul li ul li a:hover{
    background-color: var(--dropdown-hover-background);
    color: var(--dropdown-hover-color);
    box-shadow: inset 0.1rem 0 var(--dropdown-hover-color);
}
 
/* side bar */
 
#side-bar {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;/* for moz */
}
 
#side-bar .side-block {
    margin: 1rem 0;
    padding: 0.2rem 0;
}
 
#side-bar .heading {
    color: var(--sidebar-text);
    border-bottom: 1px solid var(--sidebar-text);
    line-height:1rem;
    font-size: 0.8rem;
    height: 1rem;
}
 
#side-bar .menu-item a:not(.side-block.media a){
    margin-top:0.2rem;
    padding:0.1rem;
    padding-right:0.2rem;
    padding-right:0.2rem;
    color: var(--sidebar-link);
    box-shadow: inset 0 0 var(--sidebar-link);
    transition: all 0.25s;
    font-size: 0.8rem;
}
 
#side-bar .menu-item a:not(.side-block.media a):hover{
    padding-left:0.3rem;
    padding-right: 0rem;
    color: var(--sidebar-link);
    background: var(--secondary-background);
    box-shadow: inset 0.1rem 0 var(--sidebar-link);
}
 
#side-bar .menu-item img:not(.side-block.media img) {
    display: none;
}
 
#side-bar .collapsible-block-link:before {
    display: inline-block;
    content: "▶";
    transition: transform 0.25s;
    margin-right: 0.2rem;
}
 
#side-bar .collapsible-block-link:hover:before,#side-bar .collapsible-block-unfolded-link .collapsible-block-link:before {
    transform: rotate(90deg);
}
 
/* main part or sth else */
 
#content-wrap{
    padding:0.5rem 0;
    background: var(--main-background);
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px 1px rgb(0, 0, 0, .2);
}
 
#main-content {
    padding: 2rem 3rem;
}
 
#page-content {
    padding: 1rem;
}
 
#page-title,
#meta-title {
    border-bottom: 0.2rem solid var(--standard-border-color);
    padding: 0 0.5rem;
    font-family: var(--title-font);
}
 
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--title-font);
}
 
hr {
    margin: 0.2rem 1rem;
    height: 0.1rem;
    color: var(--standard-accent);
    background-color: var(--standard-accent);
}
 
img, embed, video, object, iframe, table {
    max-width: 100%;
}
 
.scp-image-block {
    border: 2px solid var(--secondary-border-color);
    border-radius: 0.5rem;
    transition: border-color 0.25s;
    width: 300px;
}
 
.scp-image-block.block-right {
    float: right;
    clear: right;
    margin: 0 1em 1em 1em;
}
 
.scp-image-block.block-left {
    float: left;
    clear: left;
    margin: 0 1em 1em 0;
}
 
.scp-image-block.block-center {
    margin-right: auto;
    margin-left: auto;
}
 
.scp-image-block img {
    border: 0;
    width: 300px;
    margin-top: 0.5rem;
    border-top: solid 2px var(--secondary-border-color);
    transition: border-color 0.25s;
}
 
.scp-image-block .scp-image-caption {
    border-top: solid 2px var(--secondary-border-color);
    padding: 0.1rem 0;
    font-size:0.8rem;
    text-align: center;
    width: 300px;
    transition: border-color 0.25s;
}
 
.scp-image-block > p {
    margin: 0;
}
 
.scp-image-block .scp-image-caption > p {
    margin: 0;
    padding: 0 10px;
}
 
.scp-image-block:hover,.scp-image-block:hover .scp-image-caption, .scp-image-block:hover img {
    border-color: var(--standard-border-color);
}
 
a {
    color:var(--standard-link);
    background:transparent;
    text-decoration:none;
    transition:color 0.25s;
}
 
a:visited {
    color: var(--standard-link-visited);
}
 
a.newpage {
    color:var(--standard-link-new);
    background:transparent;
}
 
a:hover {
    color:var(--standard-link-hover);
    background:transparent;
}
 
input.text {
  border: 2px solid var(--standard-border-color);
  margin: 0 0.1rem;
  padding: 0.1rem 0.2rem;
  background-color: var(--main-background);
  color: var(--standard-text-dark);
  transition: color 0.25s, background 0.25s;
}
 
div.buttons input, input.button, button, file, a.button {
    border: 0.1rem solid var(--standard-gray);
    border-bottom: 0.2rem solid var(--standard-gray);
    border-radius: 0.2rem;
    background: var(--main-background);
    color: var(--standard-text-dark);
    margin: 0.1rem;
    padding: 0.2rem 0.8rem;
    transition: color 0.25s, background 0.25s;
    cursor: pointer;
}
 
input.text:hover, input.text:focus {
    background-color: var(--secondary-background);
    color: var(--standard-text-dark);
}
 
 div.buttons input:hover, input.button:hover, button:hover, file:hover, a.button:hover, div.buttons input:focus, input.button:focus, button:focus, file:focus, a.button:focus {
  background-color: var(--secondary-background);
  color: var(--standard-text-dark);
}
 
    input,
    textarea,
    select,
    button,
    meter,
    progress,
    textarea,
    input.text,
    input.checkbox,
    div.note,
    #lock-info {
        font-family: var(--main-font);
    }
 
/* rate */
 
#container .page-rate-widget-box {
    font-size: 1rem;
    width: auto;
}
 
#container .rate-points {
    background: transparent;
    color: inherit;
}
 
#container .page-rate-widget-box .btn.btn-default {
    display: inline-flex;
    height:1rem;
    align-items: center;
    justify-content: center;
}
 
#container .page-rate-widget-box a {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    margin: 0.25rem;
    padding: 0.2rem;
    font-size: 1rem;
    text-align: center;
    border: 0.1rem solid var(--standard-gray);
    border-bottom: 0.2rem solid var(--standard-gray);
    border-radius: 0.2rem;
    background: var(--main-background);
    color: var(--standard-text-dark);
    transition: color 0.25s, background 0.25s;
}
 
#container .page-rate-widget-box a:hover {
    background: var(--secondary-background);
    color: var(--standard-text-dark);
}
 
#container .creditRate {
    margin-right:0;
}
 
#container .rate-box-with-credit-button{
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
 
#container .creditButton p a{
    margin-left:0;
}
 
#container a.fa.fa-info {
    height: auto;
    width: 1rem;
    margin: 0.25rem;
    padding: 0.2rem;
    font-size: 1rem;
    text-align: center;
    border: 0.1rem solid var(--standard-gray);
    border-bottom: 0.2rem solid var(--standard-gray);
    border-radius: 0.2rem;
    background: var(--main-background);
    color: var(--standard-text-dark);
    margin: 0.2rem;
    box-shadow: none;
    transition: color 0.25s, background 0.25s;
}
 
#container a.fa.fa-info:hover {
    background: var(--secondary-background);
    color: var(--standard-text-dark);
}
 
a.fa.fa-info:before {
    content: 'i';
    font-weight: bolder;
}
 
#container .rate-box-with-credit-button .fa.fa-info{
    display: inline-flex;
    height:1rem;
    align-items: center;
    justify-content: center;
}
 
a.back{
    color: inherit;
}
 
#container .modalbox {
    opacity: 1;
    border-radius: 0.5rem;
    color: var(--standard-text-dark);
    box-shadow: 0 2px 4px 1px var(--standard-black);
    border: 2px solid var(--secondary-border-color);
    background:linear-gradient(var(--main-background),var(--main-background));
}
 
#page-content .box {
    background: var(--main-background);
    color: var(--standard-text-dark);
}
 
/* TABVIEW */
 
.yui-navset-top .yui-nav, .yui-navset-bottom .yui-nav {
    display: flex;
    flex-wrap: wrap;
    border: none;
}
 
.yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li {
    flex-grow: 1;
    display: flex;
    margin: 0;
}
 
.yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a {
    flex-grow: 2;
    border:none;
    background: var(--tabview-background);
    color: var(--tabview-color);
    padding : 0;
    transition: color 0.25s, background 0.25s;
}
 
.yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em {
    border:none;
}
 
.yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus{
    background: var(--tabview-hover-background);
    color: var(--tabview-hover-color);
}
 
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover{
    background: var(--tabview-seleted-background);
    color: var(--tabview-seleted-color);
}
 
.yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected {
    margin: 0;
}
 
.yui-navset .yui-nav .selected a em {
    padding: 0.25em .75em;
}
 
.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
    border: none;
    border-top: 2px solid var(--standard-border-color);
    border-bottom: 2px solid var(--standard-border-color);
    background: transparent;
}
 
/* table */
 
table.wiki-content-table th {
    border: none;
    padding: 0.2rem 0.5rem;
    background-color: var(--standard-accent);
    color: var(--standard-text-light);
}
 
 table.wiki-content-table td {
    border: none;
    border-bottom: 1px solid var(--standard-border-color);
    padding: 0.2rem 0.5rem;
    background-color: var(--main-background);
    color: var(--standard-text-dark);
}
 
table:not(.wiki-content-table) {
    width: 100%;
}
 
/* hovertip */
 
.hovertip{
    width: 20em;
    max-width: 40vw;
    border: 2px solid var(--standard-border-color)!important;
    background-color: var(--main-background)!important;
    color: var(--standard-text-dark)!important;
}
 
.hovertip .title{
    font-weight: bold;
    padding: 0.2rem 0.5rem;
    font-size: 1.2rem;
}
 
.hovertip .content{
    padding: 0.2rem 0.5rem;
}
 
/* listpage */
 
.pager {
    text-align: right;
}
 
.pager .current {
    border: 0.1rem solid var(--dark-border);
    border-bottom: 0.2rem solid var(--dark-border);
    border-radius: 0.2rem;
    background: var(--standard-accent);
    color: var(--standard-text-light);
    margin: 0.1rem;
    padding: 0.1rem 0.5rem;
}
 
.pager a {
    border: 0.1rem solid var(--standard-gray);
    border-bottom: 0.2rem solid var(--standard-gray);
    border-radius: 0.2rem;
    background: var(--main-background);
    color: var(--standard-text-dark);
    margin: 0.1rem;
    padding: 0.1rem 0.5rem;
    transition: color 0.25s, background 0.25s;
}
 
.pager a:hover {
    color: var(--standard-text-dark);
    background-color: var(--secondary-background);
}
 
/* toc */
 
#toc {
    border: 2px solid var(--standard-border-color);
    padding: 0.1rem 0.5rem;
    margin: 0.1rem 0.5rem;
    background-color: var(--main-background);
}
 
#toc-list a {
    transition: all 0.25s;
}
 
#toc-list a:hover {
    padding: 0 0.3rem;
    box-shadow: 0.1rem 0 inset var(--standard-link-hover);
    background: var(--secondary-background);
}
 
/* mono */
 
pre, pre *, tt, tt *, .code, .code *{
    font-family: var(--mono-font)
}
 
/* divs & spans */
 
blockquote,div.blockquote {
    border: none;
    border-left: 2px solid var(--standard-border-color);
    padding: 0.1rem 0.5rem;
    margin: 0.1rem 0.5rem;
    background-color: var(--secondary-background);
}
 
.code {
    border: none;
    border-left: 2px solid var(--secondary-border-color);
    padding: 0.1rem 0.5rem;
    margin: 0.1rem 0.5rem;
    background-color: var(--main-background);
}
 
.ruby, ruby {
    display: inline-table;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    height: 1em;
    vertical-align: text-bottom;
}
.rt, rt {
    display: table-header-group;
    font-size: 0.6em;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}
 
.keycap {
    padding: 1px 3px;
    font-size: 0.85em;
    white-space: nowrap;
    border: 0.1rem solid var(--standard-gray);
    border-bottom: 0.2rem solid var(--standard-gray);
    border-radius: 0.2rem;
    background: var(--main-background);
    color: var(--standard-text-dark);
}
 
.tags {
    display: inline-block;
    margin: 0 0 0 5px;
    padding: 3px 5px 3px 0;
    height: 13px;
    line-height: 13px;
    font-size: 11px;
    background: var(--standard-light);
    color: var(--standard-black);
    text-decoration: none;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}
.tags::before {
    content: '';
    padding: 0 1px 3px 1px;
    float: left;
    position: relative;
    top: -3px;
    left: -10px;
    width: 0;
    height: 0;
    border-color: transparent var(--standard-light) transparent transparent;
    border-style: solid;
    border-width: 8px 8px 8px 0;
}
.tags::after {
    content: '';
    position: relative;
    top: 4.5px;
    left: -8px;
    float: left;
    width: 4px;
    height: 4px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: var(--standard-light);
    box-shadow: -1px -1px 2px var(--standard-gray);
}
 
.bblock {
    color: var(--standard-black);
    background-color: var(--standard-black);
    transition: 2s;
    text-decoration: none;
}
 
.bblock:hover {
    color: var(--standard-white);
    text-decoration: none;
}
 
.dblock {
    background-color: var(--standard-text-dark);
    transition: 2s;
    text-decoration: none;
}
 
.dblock:hover {
    background-color: transparent;
    text-decoration: none;
}
 
div.sexy-box {
    background: var(--standard-background);
    border: 1px solid var(--standard-border-secondary);
    padding: 0 10px 12px;
    margin: 7px 4px 12px;
    overflow: hidden;
}
 
div.sexy-box div.image-container img {
    margin: 5px;
    padding: 2px;
    border: 1px solid var(--standard-border-color);
}
 
.footer-wikiwalk-nav {
    font-weight: bold;
    font-size: 75%;
}
 
.licensebox .collapsible-block-link {
    margin-left: .25em;
    padding: .25em;
    font-weight: bold;
    opacity: .5;
    color: inherit;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
 
.licensebox .collapsible-block-link:hover,
.licensebox .collapsible-block-link:active {
    opacity: 1;
}
 
div.wiki-note{
    width: auto;
    margin: 0.5rem 2rem;
    border: none;
    border-top: 0.2rem solid var(--standard-secondary);
    background: var(--secondary-background);
    text-align: center;
}
 
.block {
    margin: 0.5rem 1.5rem;
    padding: 0.1rem 0.5rem;
}
 
.lightblock {
    margin: 0.5rem 1.5rem;
    padding: 0.1rem 0.5rem;
    background: var(--standard-background);
}
 
.whiteblock {
    margin: 0.5rem 1.5rem;
    padding: 0.1rem 0.5rem;
    background: var(--standard-white);
    color: var(--standard-black);
}
 
.darkblock {
    margin: 0.5rem 1.5rem;
    padding: 0.1rem 0.5rem;
    background: var(--standard-accent);
    color: var(--standard-text-light);
}
 
.darkblock a {
    color: var(--standard-bright);
}
 
.darkblock a:hover {
    color: var(--standard-light);
}
 
.darkerblock {
    margin: 0.5rem 1.5rem;
    padding: 0.1rem 0.5rem;
    background: var(--standard-secondary);
    color: var(--standard-text-light);
}
 
.darkerblock a {
    color: var(--standard-bright);
}
 
.darkerblock a:hover {
    color: var(--standard-light);
}
 
.darkestblock {
    margin: 0.5rem 1.5rem;
    padding: 0.1rem 0.5rem;
    background: var(--standard-dark);
    color: var(--standard-text-light);
}
 
.darkestblock a {
    color: var(--standard-bright);
}
 
.darkestblock a:hover {
    color: var(--standard-light);
}
 
.blackblock {
    margin: 0.5rem 1.5rem;
    padding: 0.1rem 0.5rem;
    background: var(--standard-black);
    color: var(--standard-text-light);
}
 
.blackblock a {
    color: var(--standard-bright);
}
 
.blackblock a:hover {
    color: var(--standard-light);
}
 
.styled-quote {
    margin: 0.5rem 1.5rem;
    padding: 0.1rem 0.5rem;
    background: var(--standard-background);
    border-left: 0.2rem solid var(--standard-border-color);
}
 
.dark-styled-quote {
    margin: 0.5rem 1.5rem;
    padding: 0.1rem 0.5rem;
    background: var(--standard-accent);
    color: var(--standard-text-light);
    border-left: 0.2rem solid var(--dark-border);
}
 
.dark-styled-quote a {
    color: var(--standard-bright);
}
 
.dark-styled-quote a:hover {
    color: var(--standard-light);
}
 
.styled {
    border-left: 0.2rem solid var(--standard-border-color);
}
 
.dark-styled {
    border-color: var(--dark-border);
}
 
.secondary-styled {
    border-color: var(--secondary-border-color);
}
 
.styled-r {
    border-right: 0.2rem solid var(--standard-border-color);
}
 
.styled-u {
    border-top: 0.2rem solid var(--standard-border-color);
}
 
.styled-b {
    border-bottom: 0.2rem solid var(--standard-border-color);
}
 
.border {
    border: 2px solid var(--standard-border-color);
}
 
.bold {
    border-width: 4px;
}
 
.thin {
    border-width: 1px;
}
 
.dashed {
    border-style: dashed;
}
 
.dotted {
    border-style: dotted;
}
 
.double{
    border-style: double;
}
 
.groove {
    border-style: groove;
}
 
.ridge {
    border-style: ridge;
}
 
.inset {
    border-style: inset;
}
 
.outset {
    border-style: outset;
}
 
.rhard {
    border-radius: 0.5rem;
}
 
.wider {
    margin: 0.2rem 0;
}
 
.thinner {
    margin: 0.2rem 3.5rem;
}
 
.shadow {
    box-shadow: 0 1px 2px rgb(0, 0, 0, .2);
}
 
.dropshadow {
    box-shadow: 0 3px 8px -2px rgb(0, 0, 0, .2);
}
 
.hoverblock {
    transition: all 0.25s;
    margin: 0.5rem 1.5rem;
    padding: 0.1rem 0.5rem;
}
 
.hoverblock:hover {
    box-shadow: 0 3px 8px -2px rgb(0, 0, 0, .2);
    transform: translateY(-0.1rem);
}
 
.document {
    background-color: var(--main-background);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
    margin: 1.5rem;
    padding: 1rem 0.5rem;
}
 
.document:before,
.document:after {
    content: "";
    height: 98%;
    position: absolute;
    width: 100%;
    z-index: -1;
}
 
.document:before {
    background-color: inherit;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    left: -5px;
    top: 4px;
    transform: rotate(-1deg);
}
 
.document:after {
    background-color: inherit;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    right: -3px;
    top: 1px;
    transform: rotate(1deg);
}
 
.dark-document {
    color: var(--standard-text-light);
    background-color: var(--standard-dark);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
    margin: 1.5rem;
    padding: 1rem 0.5rem;
}
 
.dark-document:before,
.dark-document:after {
    content: "";
    height: 98%;
    position: absolute;
    width: 100%;
    z-index: -1;
}
 
.dark-document:before {
    background-color: var(--standard-dark);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    left: -5px;
    top: 4px;
    transform: rotate(-1deg);
}
 
.dark-document:after {
    background-color: var(--standard-dark);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    right: -3px;
    top: 1px;
    transform: rotate(2deg);
}
 
.dark-document a {
    color: var(--standard-bright);
}
 
.dark-document a:hover {
    color: var(--standard-light);
}
 
.flex-container {
    display: flex;
    margin: 1.5rem;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
}
 
.flex-item {
    width: calc(100% / 3 - 1rem);
    flex-grow: 1;
}
 
@media (max-width:900px) {
 
.flex-item {
    width: calc(100% / 2 - 1rem);
}
 
.grid-container {
    grid-template-columns: 1fr 1fr;
}
 
}
 
@media (max-width:768px) {
 
.flex-item {
    width: 100%;
}
 
.grid-container {
    grid-template-columns: 1fr;
}
 
}
 
.grid-container {
    display: grid;
    margin: 1.5rem;
    grid-template-columns: 1fr 1fr 1fr;
}
 
/* footnote */
 
    .bibitem,
    .footnotes-footer,
    .math-equation,
    .owindow .title,
    .page-options-bottom,
    .thread-container .post .long .options {
        height: auto;
    }
 
.bibitems .title, .footnotes-footer .title{
    border-bottom: 2px solid var(--standard-border-color);
}
 
/* bottom */
 
.page-watch-options a:hover {
    text-decoration: none;
}
 
.page-tags span {
    padding-top: 0.1rem;
    border-top: 1px solid var(--standard-border-color);
    font-size: 85%;
}
 
a.action-area-close {
    border: 0.1rem solid var(--standard-gray);
    border-bottom: 0.2rem solid var(--standard-gray);
    border-radius: 0.2rem;
    background: var(--main-background);
    color: var(--standard-text-dark);
    margin: 0.1rem;
    padding: 0.1rem 0.5rem;
    transition: color 0.25s, background 0.25s;
}
 
a.action-area-close:hover {
    background-color: var(--secondary-background);
    color: var(--standard-text-dark);
}
 
.page-source {
    word-break: break-all;
    border-color: var(--standard-border-color);
}
 
/* forum */
 
.forum-group div.head {
    background-color: var(--standard-accent);
    color: var(--standard-text-light);
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    border: 2px solid var(--dark-border);
}
 
.forum-category-box table, .forum-group table {
  max-width: 100%;
  border-spacing: 0;
  border: 1px solid var(--standard-border-color);
}
 
.forum-group table td, .forum-category-box table td {
    border: 1px solid var(--standard-border-color);
}
 
.forum-category-box table tr.head td, .forum-group table tr.head td {
  background-color: var(--standard-accent);
  color: var(--standard-text-light);
}
 
.forum-thread-box .description-block {
  border: 1px solid var(--standard-border-color);
  margin: 1rem;
  padding: 0.5rem;
  background-color: var(--main-background);
  overflow: hidden;
  height: 100%;
}
 
.thread-container .post {
    border-left: 2px solid var(--standard-border-color);
    padding: 0;
    margin: 0.2rem;
}
 
.thread-container .long {
    padding-left: 0.2rem;
}
 
.thread-container .post .short {
    background: var(--standard-background);
    color: var(--standard-text-dark);
    padding: 0.8em 0.5em;
}
 
.thread-container .post .short a.options {
  border: 0.1rem solid var(--secondary-border-color);
  border-bottom: 0.2rem solid var(--secondary-border-color);
  border-radius: 0.2rem;
  background: var(--main-background);
  color: var(--standard-text-dark);
  margin: 0.1rem;
  padding: 0.1rem 0.5rem;
  transition: color 0.25s, background 0.25s;
}
 
.thread-container .post .short a.options:hover {
    background: var(--secondary-background);
    color: var(--standard-text-dark);
}
 
.thread-container .post .head {
    padding: 0.2em 0.5em;
    background-color: var(--standard-accent);
    color: var(--standard-text-light);
}
 
.thread-container .post .head a {
    color: var(--standard-bright);
}
 
.thread-container .post .head a:hover {
    color: var(--standard-light);
}
 
.thread-container .post .options a:hover {
    background: var(--secondary-background);
    color: var(--standard-text-dark);
}
 
.thread-container .post .options a {
    border: 0.1rem solid var(--standard-gray);
    border-bottom: 0.2rem solid var(--standard-gray);
    border-radius: 0.2rem;
    background: var(--main-background);
    color: var(--standard-text-dark);
    margin: 0.1rem;
    padding: 0.1rem 0.5rem;
    transition: color 0.25s, background 0.25s;
}
 
.thread-container .post .long .options {
    padding: 0.25rem;
}
 
div.new-post a {
    border: 0.1rem solid var(--standard-gray);
    border-bottom: 0.2rem solid var(--standard-gray);
    border-radius: 0.2rem;
    background: var(--main-background);
    color: var(--standard-text-dark);
    margin: 0.1rem;
    padding: 0.1rem 0.5rem;
    transition: color 0.25s, background 0.25s;
}
 
div.new-post a:hover {
    background: var(--secondary-background);
    color: var(--standard-text-dark);
}
 
/* edit area */
 
textarea {
    font-size: inherit;
    border: 2px solid var(--standard-border-color);
    background-color: var(--main-background);
    color: var(--standard-text-dark);
}
 
#edit-page-comments{
    background-color: var(--secondary-background);
    border: 2px solid var(--standard-border-color);
    color: var(--standard-text-dark);
}
 
#lock-info {
    background-color: var(--secondary-background);
    border: 2px solid var(--standard-border-color);
    color: var(--standard-text-dark);
}
 
div.buttons.alignleft {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
 
.owindow {
    background-color: var(--main-background);
    width: auto;
    max-width: 80vw;
    margin: auto;
    border: 2px solid var(--dark-border);
    text-align: left;
}
 
.owindow .title {
    cursor: inherit;
    font-size: 1.2rem;
    font-weight: normal;
    padding: 0.2rem 1rem;
    background-color: var(--standard-accent);
    height: auto;
    color: var(--standard-text-light);
}
 
.owindow .button-bar a {
    border: 0.1rem solid var(--standard-gray);
    border-bottom: 0.2rem solid var(--standard-gray);
    border-radius: 0.2rem;
    background: var(--main-background);
    color: var(--standard-text-dark);
    transition: all 0.25s;
}
 
.owindow .button-bar a:hover {
    background-color: var(--secondary-background);
}
 
.owindow.owait .content{
    background: radial-gradient(circle, var(--standard-accent) 50%, transparent 50%),
    radial-gradient(circle, var(--standard-bright) 50%, transparent 50%);
    background-size: 50px 50px;
    background-position: 45% bottom, 55% bottom;
    background-repeat: no-repeat;
    animation: background-position 0.5s alternate infinite;
    padding-bottom: 60px;
}
 
@keyframes background-position{
  0%{
         background-position: 45% bottom, 55% bottom;
  }
  100%{
         background-position: 55% bottom, 45% bottom;
  }
}
 
#license-area {
    color: inherit;
}
 
/* mobile fix */
 
@media (max-width:768px) {
 
#container{
    background-size:100% calc(var(--header-height) + var(--topbar-height));
}
 
#header {
    grid-column-start: 1;
    grid-column-end: 13;
}
 
  #content-wrap {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 2;
    grid-row-end: 3;
    display: grid;
    grid-template-columns:100%;
    grid-template-rows: auto 1fr;
    max-width:100%;
    border-radius: 0;
  }
 
  #side-bar {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    height:0;
    overflow:scroll;
    width:100%;
    transition: height 0.5s;
    position: sticky;
    background: var(--main-background);
  }
 
  #side-bar::before {
    content: '';
    position: sticky;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
  }
 
  #side-bar:target {
    height:30vh;
    width:100%;
    overflow:scroll;
    z-index:10;
    z-index: 100;
    border-bottom: 2px solid var(--standard-border-color);
  }
 
  #side-bar:target a.close-menu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    z-index:-1;
  }
 
#side-bar::-webkit-scrollbar {
    height: 0;
}
 
  #search-top-box-input {
    display:none;
  }
 
  #login-status img.small {
    position: relative;
    top: 4px;
  }
 
  #login-status span.printuser {
    font-size: 0;
  }
 
  #login-status a#my-account {
    display:none;
  }
 
  #header-extra-div-1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: var(--logo-image);
    background-size: auto 15rem;
    background-position: -5rem;
    background-repeat: no-repeat;
    opacity: 0.1;
  }
 
  #top-bar div.top-bar {
    display: none;
  }
 
  div.mobile-top-bar {
    display: flex;
    justify-content: flex-end;
  }
 
#top-bar .open-menu a {
  position: fixed;
  top: 0.5rem;
  left: 0.3rem;
  color: var(--topbar-color);
  font-size: 1.6rem;
  line-height: 2rem;
  border: 0.2rem solid var(--standard-accent);
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  text-align: center;
  background: var(--standard-secondary);
  z-index: 100;
  transition: background-color 0.25s;
}
 
  #top-bar .open-menu a:hover {
    background-color: var(--standard-accent);
    text-decoration: none;
  }
 
#main-content {
     padding: 0;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
 
  #action-area{
    max-width:100%;
  }
}

作者帖

Liurd 12 May 2023 16:44

这是版式的作者帖，也用于展示评论区样式，版式的更新也会放置于此。

---

这个版式没有制作 .content-panel 等元素。

---

2023/5/13： 版式 alpha v0.1.0 发布；

---

有毒，不可食用

Pedder 13 May 2023 01:40

能不能加个有标题的div块
黑光盒引用起来代码好长好累

---

永久の暗闇でも、あなたの場所はわかる。

Footnotes

1. 这不是为了激怒Placeholder McD，这是为了激怒hoah2333。

2. 这是一个脚注！

3. 显而易见这是脚注。