单色型 版式
2021年8月4日
修订 12
核心指标
评分
38
↑ 38
↓ 0
支持率
100%
总票数 38
Wilson 95% 下界
90.8%
在相同票数下更稳健的支持率估计
争议指数
0.000
评分趋势
加载图表中...
最近修订
1 / 5
最近投票
1 / 4
2025-08-23
2025-08-11
2025-07-10
2025-07-10
2025-06-07
2025-05-14
2025-04-06
2025-04-03
2025-01-26
2024-12-28
页面源码
源码字符数 63261文字字数 1554
[[include :scp-wiki:component:croqstyle]]
[[module CSS]]
@import url('https://cdn.scpwiki.com/theme/en/basalt/normalize-min.css');
@import url("https://scp-wiki-cn.wdfiles.com/local--code/theme%3Amonotypical/5");
[[/module]]
[[include :scp-wiki-cn:component:interwiki-style
| priority=1
| type=sidebar
| css=%3Aroot%7B--linkColor%3A%20%23FC8391%3B--secondaryBackgroundColor%3A%20%23EFEFEF%3B--tertiaryBackgroundColor%3A%20%23E0E0E0%3B--borderColor%3A%20%23C6C6C6%3B--textColor%3A%20%230E0E0E%3B--header-font%3A%20'Century%20Gothic'%2C'Quicksand'%2Csans-serif%3B--link-timing%3A%20.125s%20ease-out%3B%7D.side-block%7Bbox-sizing%3A%20border-box%3Bbackground-color%3A%20var(--secondaryBackgroundColor)%3Bbox-shadow%3A%20none%3Bborder%3A%20none%3Bborder-radius%3A%200%3Bpadding%3A%200%3B%7D.side-block%20.menu-item%20%3E%20.image%7Bdisplay%3A%20none%3B%7D.side-block%20.heading%7Bcolor%3A%20var(--textColor)%3Bbackground-color%3A%20var(--tertiaryBackgroundColor)%3Bborder-top%3A%20solid%202px%20var(--borderColor)%3Bborder-bottom%3A%20none%3Bfont-family%3A%20var(--header-font)%3Btext-transform%3A%20uppercase%3Bfont-size%3A%200.9rem%3Bpadding%3A%200.1rem%200.3rem%3Btext-align%3A%20right%3B%7D.side-block%20div.menu-item%2C.side-block%20div.menu-item%20%3E%20p%7Bdisplay%3A%20flex%3Bflex-basis%3A%20auto%3Bflex-wrap%3A%20wrap%3Balign-items%3A%20center%3Bjustify-content%3A%20flex-start%3Bmargin%3A%200%3Bfont-size%3A%200%3B%7D.side-block%20div.menu-item%20a%7Bfont-weight%3A%20normal%3Bcolor%3A%20var(--textColor)%3Btext-decoration%3A%20none%3Bjustify-content%3A%20center%3Bwidth%3A%20auto%3Bpadding%3A%20.2rem%20.4rem%3Bflex-grow%3A%201%3Bfont-size%3A%200.875rem%3Bborder-bottom%3A%20solid%201px%20var(--linkColor)%3Bbackground-image%3A%20linear-gradient(to%20bottom%2Cvar(--linkColor)%200%25%2Cvar(--linkColor)%20100%25)%3Bbackground-size%3A%20100%25%200%3Bbackground-position%3A%200%20100%25%3Bbackground-repeat%3A%20no-repeat%3Btransition%3A%20background-size%20var(--link-timing)%3B%7D.side-block%20div.menu-item%20a%5Bhref%3D%22%2F%22%5D%7Bpadding%3A%20.25rem%3Btext-align%3A%20center%3Bborder-bottom%3A%20none%3B%7D.side-block%20div.menu-item%20a%3Ahover%7Bbackground-size%3a%20100%25%20100%25%3b%20text-decoration%3a%20none%7d
]]
[[div_ id="mono-structure"]]
[[a id="sb-button" href="#container"]]
≡
[[/a]]
[[a id="no-more-menu" href="##"]][[/a]]
[[/div]]
[[iftags +版式]]
[[div class="meta-title"]]
单色型 版式
[[/div]]
[[>]]
**评分：**
[[module Rate]]
**评分模块与著作信息模块：**
[[/>]]
[[include :scp-wiki-cn:credit:start]]
页面信息。
[[include :scp-wiki-cn:credit:more]]
更多页面信息。
[[include :scp-wiki-cn:credit:end]]
这是由 [[*user EstrellaYoshte]] 制作的美学版式，且获得了 [[*user Woedenaz]] 的额外帮助。若需使用此版式，请将以下代码复制到你的文章中：
> {{@@[[include :scp-wiki-cn:theme:monotypical]]@@}}
------
[[include component:image-block name= https://scp-wiki.wikidot.com/local--files/theme:monotypical/mono.png|caption=图像。|width=240px]]
可通过 4 个连字符“@@----@@”[[footnote]]这是用以安抚 [[*user Placeholder McD]] 的。[[/footnote]]创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
@@ @@
~~~~~
[[collapsible show="折叠 - 点击这里" hide="折叠 - 点击这里"]]
+ 1 级标题
++ 2 级标题
+++ 3 级标题
++++ 4 级标题
+++++ 5 级标题
++++++ 6 级标题
[[/collapsible]]
@@ @@
[[tabview]]
[[tab 分页]]
此为分页（tab view）。[[footnote]]此为脚注。[[/footnote]]
[[/tab]]
[[tab 分页]]
看，这有更多文字。
多么精巧绝伦。
[[/tab]]
[[tab 长 Tab]]
这是一个长的 tab，它有很多文字。[[footnote]]这也是一个脚注。[[/footnote]]
这是一个长的 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]]
@@ @@
> 这是一个引用块，在一行字的起始处加上“> ”来创建。
>
> 更多文字
> -----
> 一条分割线
>
>> 嵌套引用块
@@ @@
||~ 这是 ||~ 表格 ||
||你应该老早 || 就知道怎么 ||
||||做这个了吧 ||
|| 1 || 2 ||
|| 3 || 4 ||
|| 谁是这里 || 最厉害的？ ||
|| #十六进制 || #至高无上 ||
@@ @@
[[div class="header-center"]]
+++++* 页眉字体为 Century Gothic / Quicksand。
正文字体为 Ubuntu。
{{等宽字体为 Fira Code / 幼圆。}}
[[/div]]
[[footnoteblock]]
@@ @@
+ 深潜
[[div style="border: solid 1px var(--borderColor); border-radius: var(--radius-adjust); padding: 1rem; margin: 1rem auto;"]]
[[[component:croqstyle|]]] 已被引入到此版式中。
[[/div]]
[[div style="border: solid 1px var(--borderColor); border-radius: var(--radius-adjust); padding: 1rem; margin: 1rem auto;"]]
{{@@[[div class="monoboxical"]]@@}}
[[div class="monoboxical"]]
Hello world!
[[/div]]
[[/div]]
[[div style="border: solid 1px var(--borderColor); border-radius: var(--radius-adjust); padding: 1rem; margin: 1rem auto;"]]
{{@@[[div class="meta-title"]]@@}}
[[div class="meta-title"]]
在此插入标题
[[/div]]
单色型默认隐藏常规标题，所以需要转而使用 {{meta-title}}（假标题）。
[[/div]]
[[div style="border: solid 1px var(--borderColor); border-radius: var(--radius-adjust); padding: 1rem; margin: 1rem auto;"]]
{{@@[[div class="header-center"]]@@}}
[[div class="header-center"]]
+ 1 级居中标题
++ 2 级居中标题
+++++ 5 级居中标题
鉴于此版式中标题的工作机制，其需要被放置在 {{@@header-center@@}} div 块中才能被正确地居中。
这同样能将常规文本居中。
[[/div]]
[[/div]]
[[div style="border: solid 1px var(--borderColor); border-radius: var(--radius-adjust); padding: 1rem; margin: 1rem auto;"]]
{{@@CSS 变量@@}}
单色型的外观由以下变量控制：
[[code type="css"]]
:root {
--linkColor: #FC8391;
--linkColor-newpage: #FC9958;
--primaryBackgroundColor: #F9F9F9;
--secondaryBackgroundColor: #EFEFEF;
--tertiaryBackgroundColor: #E0E0E0;
--borderColor: #C6C6C6;
--shadow: rgba(0,0,0,0.225);
--selectionColor: #FFE419;
--textColor: #0E0E0E;
--textColor-alt: #8E8E8E;
/*----- Technical Variables -----*/
--body-font: 'Ubuntu', sans-serif;
--header-font: 'Century Gothic', 'Quicksand', sans-serif;
--header-title: 'SCP基金会';
--sidebar-width: 15rem;
--sidebar-timing: 0.275s ease-out;
--page-content-width: 954px;
--radius-adjust: 0.95rem;
--link-timing: .125s ease-out;
}
[[/code]]
这里的所有东西都可以修改以改变单色型的默认外观。这里是一些能够放在 {{[[include]]}} 后方的预设：
----
[[=image https://hoah-lab.wikidot.com/local--files/theme:monotypical/mono-nord.png]]
[[div style="font-size: 85%;"]]
[[code type="css"]]
:root {
--linkColor: #88C0D0;
--primaryBackgroundColor: #ECEFF4;
--secondaryBackgroundColor: #E5E9F0;
--tertiaryBackgroundColor: #D8DEE9;
--borderColor: #4C566A;
--shadow: rgba(46,52,64,0.25);
--selectionColor: #EBCB8B;
--textColor: #2E3440;
--textColor-alt: #434C5E;
}
#side-bar, #license-area {
--secondaryBackgroundColor: #2E3440;
--tertiaryBackgroundColor: #434C5E;
--textColor: #D8DEE9;
}
[[/code]]
[[/div]]
----
[[=image https://hoah-lab.wikidot.com/local--files/theme:monotypical/mono-solarized.png]]
[[div style="font-size: 85%;"]]
[[code type="css"]]
:root {
--linkColor: #2aa198;
--primaryBackgroundColor: #fdf6e3;
--secondaryBackgroundColor: #eee8d5;
--tertiaryBackgroundColor: #002b36;
--borderColor: #93a1a1;
--shadow: rgba(0,0,0,0.2);
--selectionColor: #268bd2;
--textColor: #586e75;
--textColor-alt: #C39006;
}
#side-bar .heading, #license-area {
--textColor: #fdf6e3;
}
[[/code]]
[[/div]]
----
[[=image https://hoah-lab.wikidot.com/local--files/theme:monotypical/mono-dracula.png]]
[[div style="font-size: 85%;"]]
[[code type="css"]]
:root {
--linkColor: #FF799A;
--primaryBackgroundColor: #282A36;
--secondaryBackgroundColor: #2F3142;
--tertiaryBackgroundColor: #BD93F9;
--borderColor: #6272A4;
--shadow: rgba(96,213,248,0.3);
--selectionColor: #50FA7B;
--textColor: #F8F8F2;
--textColor-alt: #6272A4;
}
::-webkit-scrollbar-track {
background: var(--secondaryBackgroundColor);
}
[[/code]]
[[/div]]
----
请随意实验自己的颜色配置！
[[/div]]
@@ @@
+ 源代码
[[collapsible show="展开" hide="收起"]]
[[code type="CSS"]]
/*
Monotypical Theme
[2021 Wikidot Theme]
By EstrellaYoshte
Based on:
Paperstack Theme by EstrellaYoshte
Penumbra Theme by EstrellaYoshte
Black Highlighter by Woedenaz
*/
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
/*---- Dismantling and Rebuilding the Structure ----*/
div#container-wrap {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
grid-template-rows: auto 1fr auto auto auto;
overflow: hidden;
background: none;
}
#container, #content-wrap {
display: contents;
}
#header {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 3;
}
#main-content {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 3;
}
#footer {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 3;
}
#license-area {
grid-row-start: 4;
grid-row-end: 5;
grid-column-start: 1;
grid-column-end: 3;
}
#footer-bar {
grid-row-start: 5;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 3;
}
#side-bar {
grid-row-start: 1;
grid-row-end: 5;
grid-column-start: 1;
grid-column-end: 2;
}
/*-------Basic Layout---------*/
#header, #top-bar {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
#main-content {
position: relative;
margin: 0;
max-width: 100%;
}
#footer {
margin-top: 0;
}
#footer-bar {
z-index: 0;
}
#side-bar {
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: var(--sidebar-width);
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
z-index: 0;
}
#side-bar:focus-within { z-index: 99; }
/*--------------------------------------------------------*/
/*--------------------------------------------------------*/
:root {
--linkColor: #FC8391;
--linkColor-newpage: #FC9958;
--primaryBackgroundColor: #F9F9F9;
--secondaryBackgroundColor: #EFEFEF;
--tertiaryBackgroundColor: #E0E0E0;
--borderColor: #C6C6C6;
--shadow: rgba(0,0,0,0.225);
--selectionColor: #FFE419;
--textColor: #0E0E0E;
--textColor-alt: #8E8E8E;
/*----- Technical Variables -----*/
--body-font: 'Ubuntu', sans-serif;
--header-font: 'Century Gothic', 'Quicksand', sans-serif;
--header-title: 'SCP基金会';
--sidebar-width: 15rem;
--sidebar-timing: 0.275s ease-out;
--page-content-width: 954px;
--radius-adjust: 0.95rem;
--link-timing: .125s ease-out;
}
body {
font-family: var(--body-font);
font-size: 0.9675rem;
color: var(--textColor);
background-color: var(--primaryBackgroundColor);
}
body, li, p { line-height: 1.5; }
img {
max-width: 100%;
}
tt {
background-color: var(--secondaryBackgroundColor);
font-size: .925em;
}
code {
font-family: var(--mono-font);
}
#edit-page-textarea, .code pre, .code p, .code, .page-source {
font-size: .95em;
}
#main-content {
background-color: var(--primaryBackgroundColor);
padding: 1em 3em;
}
span.printuser {
display: inline-flex;
align-items: baseline;
}
#main-content span.printuser.deleted img,
.hovertip span.printuser a:first-of-type,
#main-content span.printuser a:first-of-type {
display: inline-block;
height: 1em;
position: relative;
margin-right: 0;
user-select: none;
}
#page-content {
width: 100%;
max-width: var(--page-content-width);
margin: 0 auto 2rem;
min-height: 100vh;
}
#page-content a:not(#u-sb-button, #u-no-more-menu, .page-rate-widget-box a, .creditRate a, .printuser.avatarhover a:first-child, ul.yui-nav a, .scp-image-block a) {
color: var(--textColor);
padding: 0.1em;
text-decoration: none;
border-bottom: solid 2px var(--linkColor);
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#page-content a:not(#u-sb-button, #u-no-more-menu, .page-rate-widget-box a, .creditRate a, .printuser.avatarhover a:first-child, ul.yui-nav a, .scp-image-block a):hover,
#page-content a:not(#u-sb-button, #u-no-more-menu, .page-rate-widget-box a, .creditRate a, .printuser.avatarhover a:first-child, ul.yui-nav a, .scp-image-block a):focus {
background-size: 100% 100%;
}
#page-content a.newpage {
--linkColor: var(--linkColor-newpage);
}
/* adjusting avatar username spacing */
.printuser.avatarhover a:first-child {
margin-left: 0.15em;
}
.printuser.avatarhover a:nth-child(2) {
margin-left: -0.45em;
}
/* ---- SCROLLBAR ---- */
::-webkit-scrollbar {
width: 10px;
background: transparent;
}
::-webkit-scrollbar-track {
background: var(--tertiaryBackgroundColor);
}
::-webkit-scrollbar-thumb {
background: var(--linkColor);
border: none;
border-radius: var(--radius-adjust);
}
/* firefox support */
:root,
#side-bar {
scrollbar-color: var(--linkColor) var(--tertiaryBackgroundColor);
scrollbar-width: thin;
}
/*---- HEADER ----*/
#header {
z-index: 4;
background: var(--primaryBackgroundColor);
}
#page-title,
#header h2 {
display: none;
}
#header h1 {
margin-left: 0;
padding: 0;
float: none;
width: 100%;
}
#header h1 a {
display: block;
width: -moz-fit-content;
width: fit-content;
vertical-align: middle;
font-size: 3.25rem;
padding: 0.5rem 0.5rem 0;
margin: auto;
text-align: center;
text-shadow: none;
color: var(--textColor);
font-family: var(--header-font);
font-weight: lighter;
}
/* Hide the existing text */
#header h1 span { font-size: 0; display: none; }
#header h1 a::before {
content: var(--header-title);
}
#login-status {
position: absolute;
top: 0.4rem;
right: 3.25em;
width: max-content;
font-size: 0.78em;
text-align: center;
z-index: 10;
}
#login-status, #login-status a {
color: var(--textColor);
}
#login-status span.printuser {
font-size: 0;
}
#login-status span.printuser img {
font-size: 0;
transform: translate(6px, 5px);
}
#login-status a#my-account {
display: none;
}
#account-topbutton {
border: none;
margin-left: -0.1rem;
padding: 0 0.5rem;
}
div#account-options {
right: 0;
background-color: var(--primaryBackgroundColor);
width: 10rem;
border: none;
border-radius: calc(var(--radius-adjust)*0.3725);
box-shadow: 0 0 5px 1px var(--shadow);
display: block!important;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
}
#account-topbutton:focus + #account-options,
#account-topbutton:active + #account-options,
#account-options:focus-within {
opacity: 1;
pointer-events: all;
}
/* Without this, touchscreen doesn't work */
@media (pointer: coarse) {
#account-topbutton:hover + #account-options,
#account-options:hover {
opacity: 1;
pointer-events: all;
}
}
div#account-options li a {
color: var(--textColor);
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
padding: 0.25rem 0;
}
div#account-options li a:hover,
div#account-options li a:focus {
text-decoration: none;
background-size: 100% 100%;
color: var(--textColor);
}
div#account-options li:first-of-type a {
border-radius: calc(var(--radius-adjust)*0.3725) calc(var(--radius-adjust)*0.3725) 0 0;
}
div#account-options li:last-of-type a {
border-radius: 0 0 calc(var(--radius-adjust)*0.3725) calc(var(--radius-adjust)*0.3725);
}
div#search-top-box {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 1.6rem;
z-index: 31;
}
div#search-top-box::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0; right: 0.05rem;
background-color: var(--linkColor);
pointer-events: none;
z-index: 32;
-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8' standalone='no'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cmetadata/%3E%3Cpath d='M505 443 405 343c-4-4-10-7-17-7h-16a208 208 0 1 0-36 36v16c0 7 3 13 7 17l100 100c9 9 24 9 34 0l28-28c9-10 9-25 0-34zM208 336a128 128 0 1 1 0-256 128 128 0 0 1 0 256z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8' standalone='no'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cmetadata/%3E%3Cpath d='M505 443 405 343c-4-4-10-7-17-7h-16a208 208 0 1 0-36 36v16c0 7 3 13 7 17l100 100c9 9 24 9 34 0l28-28c9-10 9-25 0-34zM208 336a128 128 0 1 1 0-256 128 128 0 0 1 0 256z'/%3E%3C/svg%3E");
-webkit-mask-size: 1rem;
mask-size: 1rem;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: 1;
transition: opacity 0.25s ease;
}
div#search-top-box:focus-within::before { opacity: 0; }
div#search-top-box form {
display: flex;
justify-content: flex-end;
}
div#search-top-box form input[type="text"]:not(:focus),
div#search-top-box form input[type="text"]:not(:focus):not(:hover) {
position: relative;
color: transparent;
cursor: pointer;
display: inline-block;
font-family: var(--body-font);
width: 1.6rem;
height: 1.6rem;
padding: 0.1em 0.5em;
box-sizing: border-box;
border-radius: var(--radius-adjust);
border: none;
box-shadow: 0 0 2px 1.5px var(--shadow);
}
div#search-top-box form input[type="text"],
div#search-top-box form input[type="text"]:hover,
div#search-top-box form input[type="text"]:focus {
background-color: var(--primaryBackgroundColor)!important;
color: var(--textColor);
display: inline-block;
border: none;
height: 1.6rem;
width: 9rem;
transition: width .25s;
outline: none;
border-radius: var(--radius-adjust);
box-shadow: 0 0 2px 1.5px var(--shadow);
}
div#search-top-box form input[type="submit"] {
display: none;
}
/*------ Top Bar, unfortunately un-reborn -------*/
#top-bar {
z-index: 9;
height: auto;
right: initial;
}
#top-bar .mobile-top-bar .open-menu, #side-bar a.close-menu {
display: none; /* nix the sidebar button in favor of my own */
}
#top-bar div.mobile-top-bar {
display: none;
}
/* Patch for CN Sigma-9 */
#top-bar ul li a {
max-height: unset;
overflow: inherit;
}
#top-bar div[class*=top-bar] {
font-size: 100%;
max-width: var(--page-content-width);
margin: 0 auto;
}
#top-bar div[class*=top-bar] a {
text-decoration: none;
}
#top-bar div[class*=top-bar] ul {
background: transparent;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
text-align: center;
}
#top-bar div[class*=top-bar] > ul > li {
position: relative;
flex-grow: 1;
}
#top-bar div[class*=top-bar] > ul > li > a {
flex-grow: 1;
padding: 0.5rem;
border-radius: calc(var(--radius-adjust)*0.5);
transition: background-color var(--link-timing);
}
#top-bar div[class*=top-bar] > ul > li > a:hover,
#top-bar div[class*=top-bar] > ul > li.sfhover > a,
#top-bar div[class*=top-bar] > ul > li > a:focus,
#top-bar div[class*=top-bar] > ul > li:focus-within > a {
background-color: var(--tertiaryBackgroundColor);
}
#top-bar div[class*=top-bar] > ul > li > ul {
visibility: visible;
z-index: 9;
opacity: 0;
pointer-events: none;
display: flex;
width: max-content;
min-width: 100%;
flex-direction: column;
background: var(--primaryBackgroundColor);
border-radius: calc(var(--radius-adjust)*0.5);
box-shadow: 0 0 6px 2px var(--shadow);
transition: opacity var(--link-timing);
}
#top-bar div[class*=top-bar] > ul > li:hover > ul,
#top-bar div[class*=top-bar] > ul > li > ul:hover,
#top-bar div[class*=top-bar] > ul > li:focus-within > ul,
#top-bar div[class*=top-bar] > ul > li > ul:focus-within {
opacity: 1;
pointer-events: all;
}
#top-bar div[class*=top-bar] ul li ul::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
border-width: 8px;
border-style: solid;
border-color: transparent transparent var(--primaryBackgroundColor) transparent;
}
#top-bar div[class*=top-bar] > ul > li > ul > li {
position: relative;
width: auto;
}
#top-bar div[class*=top-bar] ul > li > ul > li > a,
#top-bar li ul li.sfhover a:hover,
#top-bar li ul li:hover a:hover {
height: auto;
max-height: none;
padding: 0.4rem;
width: auto;
text-align: center;
background: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#top-bar div[class*=top-bar] ul li ul li a:hover,
#top-bar div[class*=top-bar] ul li ul li a:focus {
background-size: 100% 100%;
}
#top-bar div[class*=top-bar] ul li ul li:first-of-type a {
border-top-left-radius: calc(var(--radius-adjust)*0.5);
border-top-right-radius: calc(var(--radius-adjust)*0.5);
}
#top-bar div[class*=top-bar] ul li ul li:last-of-type a {
border-bottom-left-radius: calc(var(--radius-adjust)*0.5);
border-bottom-right-radius: calc(var(--radius-adjust)*0.5);
}
#top-bar div[class*=top-bar] > ul:first-of-type > li:last-of-type > ul {
right: 0;
left: auto;
}
@media only screen and (max-width: 767px) {
#top-bar {
width: 95%;
margin: 0.1rem auto;
}
#top-bar div.mobile-top-bar {
display: block;
}
#top-bar div.top-bar {
display: none;
}
}
/*---- SIDEBAR ----*/
#side-bar {
display: block;
box-sizing: border-box;
background-color: var(--secondaryBackgroundColor);
border-right: solid 2px var(--borderColor);
}
#side-bar::-webkit-scrollbar {
width: 0;
background: transparent;
}
#side-bar .side-block {
box-shadow: none;
border: none;
border-radius: 0;
padding: 0;
}
#side-bar .side-block,
#side-bar .side-block.media,
#side-bar .side-block.resources {
background-color: transparent;
}
#side-bar .side-block.resources > .collapsible-block {
color: var(--textColor);
background-color: var(--tertiaryBackgroundColor);
border-bottom: none;
font-family: var(--header-font);
font-weight: bold;
text-transform: uppercase;
font-size: 0.9rem;
padding: 0.1rem 0.3rem;
text-align: right;
}
#side-bar .side-block.media > * {
display: flex;
justify-content: space-evenly;
}
#side-bar .side-block.media {
border-bottom: solid 2px var(--borderColor);
}
#side-bar .side-block .menu-item > .image {
display: none;
}
#side-bar .heading {
color: var(--textColor);
background-color: var(--tertiaryBackgroundColor);
border-top: solid 2px var(--borderColor);
border-bottom: none;
font-family: var(--header-font);
font-weight: bold;
text-transform: uppercase;
font-size: 0.9rem;
padding: 0.1rem 0.3rem;
margin-top: 0.75rem;
text-align: right;
}
#side-bar .heading p { margin: 0; }
#side-bar div.menu-item, #side-bar div.menu-item > p {
display: flex;
flex-basis: auto;
flex-wrap: wrap;
flex-grow: 1;
align-items: center;
justify-content: flex-start;
margin: 0;
font-size: 0;
}
#side-bar div.menu-item.small { font-size: 0; }
#side-bar div.menu-item.small a { font-size: 0.75rem; }
#side-bar div.menu-item a {
font-weight: normal;
color: var(--textColor);
text-decoration: none;
justify-content: center;
width: auto;
padding: .2rem .4rem;
flex-grow: 1;
font-size: 0.875rem;
border-bottom: solid 1px var(--linkColor);
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#side-bar div.menu-item a[href="/"],
#side-bar div.menu-item a[href*="/forum:start"],
#side-bar div.menu-item a[href*="scp-series"] {
padding: .25rem;
text-align: center;
}
#side-bar div.menu-item a[href="/"],
#side-bar div.menu-item a[href*="/forum:start"] {
border-bottom: none;
padding: 0.25em 0;
font-weight: bold;
margin-top: 0.5rem;
}
#side-bar div.menu-item a:hover,
#side-bar div.menu-item a:focus {
background-size: 100% 100%;
}
iframe.scpnet-interwiki-frame, div.scpnet-interwiki-wrapper {
width: var(--sidebar-width);
margin: 0 auto;
}
/*---- Sidebar Transition Mechanism----*/
#header,
#main-content,
#footer,
#license-area,
#footer-bar {
position: relative;
left: 0;
transition: left var(--sidebar-timing);
}
#container:target #header,
#container:target #main-content,
#container:target #u-sb-button,
#container:target #footer,
#container:target #license-area,
#container:target #footer-bar {
left: var(--sidebar-width);
}
/* Sidebar Toggle */
#u-mono-structure { display: contents; }
#u-mono-structure > br { display: none; }
#u-sb-button {
position: fixed;
z-index: 10;
top: 0; left: 0;
transition: left var(--sidebar-timing);
display: block;
height: 2.6rem;
width: 2.6rem;
background-color: var(--primaryBackgroundColor);
color: var(--textColor);
font-weight: bold;
font-size: 2rem;
line-height: 0.8rem;
text-align: center;
text-decoration: none;
}
#u-no-more-menu {
display: none;
}
#container:target #u-no-more-menu {
display: block;
position: fixed;
width: calc(100% - var(--sidebar-width));
height: 100%;
top: 0;
right: 0;
z-index: 12;
pointer-events: all;
}
/* ---- META-TITLE ---- */
.meta-title {
display: flex;
align-items: center;
text-align: center;
border-bottom: none;
margin: 0.5rem 0;
color: var(--textColor);
font-family: var(--header-font);
font-size: 215%;
}
.meta-title::before,
.meta-title::after {
content: "";
flex-grow: 1;
height: 0.1rem;
margin: auto auto auto 0.65rem;
background-color: var(--borderColor);
}
.meta-title::before {
margin: auto 0.65rem auto auto;
}
/* ---- BREADCRUMBS ---- */
#breadcrumbs, #page-content .pseudocrumbs {
font-size: 0.95em;
line-height: 1.15em;
}
#breadcrumbs a,
#main-content #page-content .pseudocrumbs > a {
color: var(--textColor);
padding: 0.05em;
text-decoration: none;
border-bottom: solid 1px var(--linkColor);
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#breadcrumbs a:hover,
#breadcrumbs a:focus,
#main-content #page-content .pseudocrumbs a:hover,
#main-content #page-content .pseudocrumbs a:focus {
background-size: 100% 100%;
}
#breadcrumbs {
text-align: center;
grid-column: 1 / span 2;
grid-area: page-title;
width: max-content;
margin: 0 auto;
position: relative;
max-width: 100%;
box-sizing: border-box;
}
#page-content .pseudocrumbs { margin: -1.5em 0 -0.15em; }
/* ---- TABS ---- */
/* ---- 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: var(--linkColor);
box-shadow: none;
border-width: 0 1px 2px;
}
.yui-navset .yui-nav a, /* ---- Link Modifier ---- */
.yui-navset .yui-navset-top .yui-nav a {
color: var(--textColor-alt);
/* ---- Tab Background Colour | [UNSELECTED] ---- */
background-color: var(--secondaryBackgroundColor);
border: unset;
box-shadow: none;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
color: var(--textColor)!important;
text-decoration: none;
/* ---- Tab Background Colour | [HOVER] ---- */
background-color: var(--linkColor);
}
.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;
background-color: var(--secondaryBackgroundColor);
border: solid 1px var(--linkColor); border-bottom: none; border-top-width: 2px;
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: var(--linkColor);
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
border: none;
}
.yui-navset .yui-nav .selected a {
width: 100%;
color: var(--textColor);
}
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {
color: var(--textColor);
background-color: var(--linkColor);
}
#page-content .yui-navset .yui-content {
background-color: var(--primaryBackgroundColor);
box-shadow: none;
border: solid 2px var(--borderColor);
}
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
padding: .5em;
border: none;
}
/* ---- AYERS INFO BAR ---- */
.info-container {
--barColour: var(--borderColor);
--linkColour: var(--primaryBackgroundColor);
}
#page-content .info-container > .collapsible-block > .collapsible-block-folded .collapsible-block-link::before,
#page-content .info-container > .collapsible-block > .collapsible-block-unfolded .collapsible-block-link::before {
visibility: hidden;
}
/* ---- INFO PANE ---- */
#page-content .creditRate{
margin: unset;
margin-bottom: 4px;
}
#page-content .rate-box-with-credit-button {
background-color: var(--primaryBackgroundColor);
border: none;
box-shadow: 0 0 3px 1px var(--shadow);
border-radius: var(--radius-adjust);
padding: 0.275rem;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box { border: none; }
#page-content a.fa {
transform: none;
}
#page-content .rate-box-with-credit-button .fa-info {
border: none;
color: var(--textColor);
padding-top: 0.25rem;
padding-bottom: 0.0725rem;
width: 0.9rem;
margin-left: -0.1rem;
margin-right: 0.1rem;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#page-content .rate-box-with-credit-button .fa-info:hover,
#page-content .rate-box-with-credit-button .fa-info:focus {
background-size: 100% 100%;
}
.rate-box-with-credit-button .cancel {
border: solid 1px var(--primaryBackgroundColor);
}
#page-content .creditButtonStandalone {
margin: 0.125rem 0;
}
#page-content .creditButtonStandalone p a {
border-radius: 1rem;
color: var(--textColor);
text-align: center;
background: initial;
box-shadow: 0 0 2px 1px var(--shadow);
padding: 0.24rem;
background: none;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 100% 0;
transition: background-size var(--link-timing);
}
#page-content .creditButtonStandalone p a:hover,
#page-content .creditButtonStandalone p a:hover {
text-decoration: none;
background: none;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* ---- PAGE RATING ---- */
.page-rate-widget-box {
display: inline-block;
box-shadow: none;
margin: unset;
margin-bottom: 4px;
background-color: var(--primaryBackgroundColor);
border-radius: var(--radius-adjust);
box-shadow: 0 0 3px 1px var(--shadow);
padding: 0.275rem;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover,
.page-rate-widget-box .cancel a:hover,
.page-rate-widget-box .rateup a:focus,
.page-rate-widget-box .ratedown a:focus,
.page-rate-widget-box .cancel a:focus {
color: var(--textColor);
background: unset;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 100%;
background-position: 0 100%;
background-repeat: no-repeat;
border-radius: 0;
}
.page-rate-widget-box .rate-points {
background-color: var(--primaryBackgroundColor) !important;
color: var(--textColor) !important;
border: solid 1px var(--primaryBackgroundColor);
border-radius: var(--radius-adjust);
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
background-color: var(--primaryBackgroundColor);
border-top: solid 1px var(--primaryBackgroundColor);
border-bottom: solid 1px var(--primaryBackgroundColor);
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
padding: 0 0.25rem;
margin: 0 0.05rem;
color: var(--textColor);
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
.page-rate-widget-box .cancel {
background-color: var(--primaryBackgroundColor);
border: solid 1px var(--primaryBackgroundColor);
border-radius: var(--radius-adjust);
margin-right: 0.05rem;
text-transform: uppercase;
}
.page-rate-widget-box .cancel a {
color: var(--textColor);
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
/*---- PAGE ELEMENTS ----*/
/* h1 et al. Much of this is by Woedenaz */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--header-font);
color: var(--textColor);
font-weight: bold;
margin-top: 0.6rem;
margin-bottom: 0.6rem;
display: flex;
}
h2, h3, h4, h5, h6 {
letter-spacing: -0.01em;
}
#page-content h1 {font-size: 2em;}
#page-content h2 {font-size: 1.8em;}
#page-content h3 {font-size: 1.6em;}
#page-content h4 {font-size: 1.4em;}
#page-content h5 {font-size: 1.2em;}
#page-content h6 {font-size: 1em;}
#page-content h1 span,
#page-content h2 span,
#page-content h3 span,
#page-content h4 span,
#page-content h5 span,
#page-content h6 span {
padding: 0 0.1em;
display: inline-flex;
}
#page-content h1 span::before,
#page-content h2 span::before,
#page-content h3 span::before,
#page-content h4 span::before,
#page-content h5 span::before,
#page-content h6 span::before {
content: "#";
color: var(--textColor-alt);
font-size: 70%;
font-weight: normal;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-right: 0.1em;
}
#page-content h1::after {
content: "";
flex-grow: 1;
height: 0.1rem;
margin: auto auto auto 0.375rem;
background-color: var(--borderColor);
}
/* horizontal rule */
hr {
margin: 2rem 0;
height: 0.1rem;
background-color: var(--borderColor);
}
/* Collapsibles */
#page-content .collapsible-block {
margin: 0.5em auto;
}
#page-content .collapsible-block-folded .collapsible-block-link::before,
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
content: "> ";
font-weight: bold;
display: inline-block;
margin-right: 0.25em;
color: var(--linkColor);
transition: color var(--link-timing);
}
#page-content .collapsible-block-folded .collapsible-block-link:hover::before,
#page-content .collapsible-block-unfolded .collapsible-block-link:hover::before,
#page-content .collapsible-block-folded .collapsible-block-link:focus::before,
#page-content .collapsible-block-unfolded .collapsible-block-link:focus::before {
color: var(--textColor);
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
animation-name: collapsible-arrow-spin;
animation-duration: 0.15s;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.32,.38,.39,.94);
animation-fill-mode: forwards;
}
@keyframes collapsible-arrow-spin {
from { transform: rotate(0deg); }
to { transform: rotate(90deg); }
}
/* Blockquotes and ToC */
blockquote, div.blockquote {
background-color: transparent;
width: auto;
border: none;
border-left: solid 0.175rem var(--linkColor);
padding: 0.15rem 0.95rem;
margin: 1rem 0;
margin-left: 1.5rem;
}
#toc {
background-color: var(--secondaryBackgroundColor);
border: none;
padding: 0.15rem 0.95rem;
border-radius: calc(var(--radius-adjust)*0.75);
box-shadow: 0 0 4px 1px var(--shadow);
}
/* Image Block */
.scp-image-block {
border: none;
border-radius: var(--radius-adjust);
box-shadow: 0 0 5px 1px var(--shadow);
box-sizing: border-box;
}
.scp-image-block.block-left { float: left; }
.scp-image-block.block-right { float: right; }
.scp-image-block img {
border-radius: var(--radius-adjust) var(--radius-adjust) 0 0;
}
.scp-image-block .scp-image-caption {
background-color: var(--secondaryBackgroundColor);
box-sizing: border-box;
border: none;
border-radius: 0 0 var(--radius-adjust) var(--radius-adjust);
padding: 0.25rem 0.1rem;
color: var(--textColor);
text-align: center;
}
.scp-image-block.block-left { margin-left: 0; margin-right: 1.5rem; }
.scp-image-block.block-right { margin-right: 0; margin-left: 1.5rem; }
@media (max-width: 540px) {
.scp-image-block.block-left, .scp-image-block.block-right {
float: none; clear: both; margin-left: auto; margin-right: auto;
}
}
/* Tables */
#page-content .wiki-content-table tr th {
border: solid 1px var(--borderColor);
color: var(--textColor);
background-color: var(--tertiaryBackgroundColor);
/* set border for table title */
}
#page-content .wiki-content-table tr,
#page-content .wiki-content-table tr td {
border: solid 1px var(--borderColor);
background-color: var(--primaryBackgroundColor);
/* set border for table content */
}
#page-content .wiki-content-table tr:nth-child(2n-1),
#page-content .wiki-content-table tr:nth-child(2n-1) td {
background-color: var(--secondaryBackgroundColor);
}
/* Footnotes (& Bibliography, but no one cares) */
a.footnoteref {
line-height: 0.625rem;
margin: 0 0.15em;
position: relative;
top: -0.625rem;
}
.hovertip {
background-color: var(--primaryBackgroundColor) !important;
border-radius: calc(var(--radius-adjust)*0.625);
border: none !important;
box-shadow: 0 0 5px 1px var(--shadow);
padding: 0.3rem 0.35rem;
}
.hovertip a:not(.printuser.avatarhover a:first-child) {
color: var(--textColor);
padding: 0.1em;
text-decoration: none;
border-bottom: solid 2px var(--linkColor);
}
.footnote .f-heading {
font-family: var(--header-font);
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
display: none;
}
.footnotes-footer, .bibitems {
height: auto;
padding: 0;
margin: 1.5rem 0;
}
.footnotes-footer .title, .bibitems .title {
font-family: var(--header-font);
font-weight: bold;
display: flex;
align-items: center;
text-align: center;
border-bottom: none;
margin: 0.5rem 0;
color: var(--textColor);
}
.footnotes-footer .title::after,
.bibitems .title::after {
content: "";
flex-grow: 1;
height: 0.1rem;
margin: auto auto auto 0.65rem;
background-color: var(--borderColor);
}
.footnote-footer, .bibitem {
margin-bottom: 0.5rem;
line-height: 1.4rem;
height: auto;
}
#main-content #page-content .footnotes-footer .footnote-footer a[href="javascript:;"] {
padding: 0.0625rem;
}
/*---- Outside #page-content elements ----*/
/* Selection */
::selection {
background: var(--selectionColor);
color: var(--textColor);
}
/* .owindow */
#owindow-1 { padding-bottom: 0.25rem; }
.owindow {
background-color: var(--primaryBackgroundColor);
border: none;
box-sizing: border-box;
border-radius: var(--radius-adjust);
max-width: calc(100% - 3rem);
}
.owindow .title {
background-color: var(--secondaryBackgroundColor);
border-radius: var(--radius-adjust) var(--radius-adjust) 0 0;
}
.owindow h1 {
font-family: var(--header-font);
font-weight: bold;
color: var(--textColor);
}
.owindow a:not(.button-bar.modal-footer a, .printuser.avatarhover a:first-child) {
color: var(--textColor);
padding: 0.1em;
text-decoration: none;
border: none;
border-bottom: solid 3px var(--linkColor);
background-color: transparent;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
.owindow a:not(.button-bar.modal-footer a, .printuser.avatarhover a:first-child):hover,
.owindow a:not(.button-bar.modal-footer a, .printuser.avatarhover a:first-child):focus {
background-size: 100% 100%;
background-color: transparent;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body {
width: auto;
height: auto;
margin: 0.25em;
display: grid;
box-sizing: border-box;
grid-template-areas:
"pfp username"
"table table"
"link link";
grid-template-columns: 80px 1fr;
}
/* fallback */
.content.modal-body > * {
grid-column: 1 / span 2;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > img {
float: none!important;
padding: 0!important;
background-color: var(--primaryBackgroundColor)!important;
grid-area: pfp;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > img + h1 {
grid-area: username;
text-align: center;
margin: auto;
word-break: break-all;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > table {
grid-area: table;
margin-top: 1em;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > table tr {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
margin-bottom: 0.25rem;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > div:last-of-type {
grid-area: link;
display: flex;
flex-wrap: wrap;
grid-gap: 0.45em;
text-align: center;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > div:last-of-type a {
flex-grow: 1;
flex-basis: 12rem;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > div:last-of-type > div[style="float:right"] {
display: contents;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > div:last-of-type > div[style="float:right"] a {
order: 4;
}
/* modalbox */
#page-content #u-credit-view,
#page-content #u-credit-otherwise {
max-width: 100vw;
}
#page-content #u-credit-view .modalbox,
#page-content #u-credit-otherwise .modalbox {
background: var(--primaryBackgroundColor);
border-radius: var(--radius-adjust);
border: none;
box-shadow: none;
}
#page-content .modalbox hr {
margin: 1.1rem;
}
#page-content .modalbox h2 span { margin: auto; }
#page-content .modalbox h2 span::before { display: none; }
/* Loading Screen */
.owindow.owait .content {
background-image: none;
padding-top: 0.25rem;
}
.owindow.owait .content::after {
content: " ";
display: block;
width: 1.5rem;
height: 1.5rem;
margin: -0.9rem auto;
margin-top: 0.75rem;
border-radius: 50%;
border: 0.3rem solid black;
border-color: var(--linkColor) transparent;
animation: loading 1.2s linear infinite;
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*---- Bottom areas Grid-ification ----*/
#main-content {
display: grid;
grid-template-areas:
"action-area-top action-area-top"
"page-title page-title"
"page-content page-content"
"page-info-break page-info-break"
"page-tags page-options-container"
"page-tags page-options-container"
"action-area action-area"
"ad ad";
grid-template-columns: 1fr 1fr;
}
#action-area-top {
grid-area: action-area-top;
}
#page-title {
grid-area: page-title;
}
#page-content {
grid-area: page-content;
}
#page-info-break {
grid-area: page-info-break;
}
div.page-tags {
grid-area: page-tags;
}
#page-options-container {
grid-area: page-options-container;
}
#action-area {
grid-area: action-area;
}
#wad-scp-wiki-below-content {
grid-area: ad;
}
/*--------------*/
/* Tags */
#main-content div.page-tags {
padding: 0;
margin: 0 2.5rem 0.5rem 0;
}
#main-content div.page-tags::before {
content: "tags";
color: var(--textColor-alt);
font-size: 80%;
display: block;
padding: 0 0.25em;
margin-bottom: 0.25rem;
}
#main-content .page-tags span {
max-width: 100%;
border-top: none;
display: flex;
flex-wrap: wrap;
}
#main-content .page-tags a {
height: 0.9rem;
width: max-content;
line-height: 0.9rem;
font-size: 0.8rem;
margin: 0.15rem 0.225rem;
padding: 0.25rem 0.1rem;
color: var(--textColor);
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
border-bottom: solid 0.1em var(--linkColor);
transition: background-size var(--link-timing);
}
#main-content .page-tags a:hover,
#main-content .page-tags a:focus {
background-size: 100% 100%;
text-decoration: none;
}
#main-content .page-tags a::before {
content:"/";
display: inline-block;
margin-right: 0.1em;
color: var(--linkColor);
transition: color var(--link-timing);
}
#main-content .page-tags a:hover::before,
#main-content .page-tags a:focus::before {
color: var(--textColor);
}
#page-info {
color: var(--textColor-alt);
margin: 0;
font-size: 80%;
text-align: right;
}
div.page-watch-options {
font-size: 80%;
margin: 0.325rem 0 0.75rem;
line-height: 1.5em;
}
#page-options-container a:not(a#more-options-button),
#action-area a:not(#wd-editor-toolbar-panel a, .printuser.avatarhover a:first-child, a.action-area-close.btn.btn-danger, .page-rate-widget-box a) {
color: var(--textColor);
text-decoration: none;
border-bottom: solid 2px var(--linkColor);
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#page-options-container a { padding: 0.1em; }
#page-options-container a:not(a#more-options-button):hover,
#action-area a:not(#wd-editor-toolbar-panel a, .printuser.avatarhover a:first-child, a.action-area-close.btn.btn-danger, .page-rate-widget-box a):hover {
background-size: 100% 100%;
}
.page-options-bottom {
margin: 0;
text-align: center;
height: auto;
line-height: normal;
width: 100%;
display: flex;
flex-wrap: wrap;
}
#page-options-container .page-options-bottom > a {
flex-grow: 1;
flex-shrink: 1;
min-width: 4rem;
padding: 0.25rem;
margin: 0.25rem 0.2rem;
}
#page-options-container .page-options-bottom > a#more-options-button,
#action-area > a.action-area-close.btn.btn-danger,
#owindow-1 .button-bar.modal-footer a {
box-sizing: border-box;
min-width: 100%;
padding: 0.5rem 1rem;
margin-right: 0;
color: var(--textColor);
background-color: var(--secondaryBackgroundColor);
border: solid 2px var(--borderColor);
border-radius: calc(var(--radius-adjust)*1.5);
font-family: var(--body-font);
transition: background-color var(--link-timing);
}
#page-options-container .page-options-bottom > a#more-options-button:hover,
#action-area > a.action-area-close.btn.btn-danger:hover,
#owindow-1 .button-bar.modal-footer a:hover {
background-color: var(--tertiaryBackgroundColor);
text-decoration: none;
}
#action-area > a.action-area-close.btn.btn-danger {
min-width: unset;
width: max-content;
}
/*-------------------*/
div.buttons input, input.button, button, file, a.button {
margin: 0.1rem;
padding: 0.275em 0.75em;
cursor: pointer;
text-decoration: none;
background-color: var(--secondaryBackgroundColor);
border: solid 2px var(--borderColor);
border-radius: var(--radius-adjust);
color: var(--textColor);
transition: background-color var(--link-timing);
}
div.buttons input:hover, input.button:hover, button:hover, file:hover, a.button:hover {
background-color: var(--tertiaryBackgroundColor);
color: var(--textColor);
}
/*---- EDITBOX ----*/
form#edit-page-form table.form #edit-page-title,
#edit-page-textarea,
#edit-page-comments {
color: var(--textColor);
background-color: var(--primaryBackgroundColor);
border: solid 1px var(--borderColor);
}
table.form td div.sub, form div.sub {
color: var(--textColor-alt);
}
form#edit-page-form {
background-color: var(--primaryBackgroundColor);
box-shadow: 0 0 3px 1px var(--shadow);
padding: 1rem 2rem;
border-radius: var(--radius-adjust);
border: none;
max-width: min(calc(var(--page-content-width) + 4rem), 100%);
margin: 0 auto;
display: grid;
grid-template-areas:
"title title"
"toolbar toolbar"
"txt txt"
"help size"
"bottom bottom"
"hdn hdn"
"button button";
grid-template-columns: 1fr auto;
}
form#edit-page-form table.form { grid-area: title; }
form#edit-page-form #wd-editor-toolbar-panel { grid-area: toolbar; }
form#edit-page-form div:nth-of-type(2) { grid-area: txt; }
form#edit-page-form .change-textarea-size { grid-area: size; }
form#edit-page-form .edit-help-34 { grid-area: help; }
form#edit-page-form table.edit-page-bottomtable { grid-area: bottom; }
form#edit-page-form #edit-page-captcha { grid-area: hdn; }
form#edit-page-form .buttons.alignleft { grid-area: button; }
/* Title area*/
form#edit-page-form table.form {
margin: 0 0 0.5em 0!important;
width: 100%;
font-family: var(--header-font);
font-size: 1.2em;
}
form#edit-page-form table.form tr {
display: flex;
flex-wrap: wrap;
align-items: center;
}
form#edit-page-form table.form td {
text-align: center;
min-width: 6em;
flex-shrink: 1;
flex-grow: 1;
}
form#edit-page-form table.form td:last-of-type {
flex-grow: 2;
}
form#edit-page-form table.form #edit-page-title {
width: 100%;
}
/* Toolbar */
#wd-editor-toolbar-panel {
grid-area: toolbar;
width: 100%;
display: grid;
margin: 1.5em auto 0.75em;
grid-template-columns: repeat(auto-fill, minmax(1.5em, 1fr));
grid-gap: 0.125em;
}
#wd-editor-toolbar-panel > div,
#wd-editor-toolbar-panel > div > ul {
display: contents;
}
.wd-editor-toolbar-panel ul li:hover ul, .wd-editor-toolbar-panel ul li.sfhover ul {
background-color: var(--primaryBackgroundColor);
border: 2px solid var(--borderColor);
}
.wd-editor-toolbar-panel li.hseparator {
background-color: var(--borderColor);
margin: 0 auto;
height: 1.5em;
}
/* Edit area */
form#edit-page-form div:nth-of-type(2) { min-width: 100%; }
form#edit-page-form #edit-page-textarea { min-width: inherit; }
/* Size buttons + help area */
form#edit-page-form .change-textarea-size {
float: none;
padding: 0;
margin-top: 0.25rem;
display: flex;
gap: 0.25rem;
width: 100%;
justify-content: flex-end;
align-items: center;
}
form#edit-page-form .change-textarea-size a {
background-color: var(--primaryBackgroundColor);
border-width: 1px 1px 2px;
border-top-color: var(--borderColor);
border-left-color: var(--borderColor);
border-right-color: var(--borderColor);
padding: 3px;
text-decoration: none;
display: inline-block;
width: 1.2rem;
text-align: center;
}
form#edit-page-form .edit-help-34 {
font-size: 0rem;
display: flex;
align-items: center;
gap: 0.25rem;
flex-wrap: wrap;
margin: 0.25rem 0.5rem 0 0;
}
form#edit-page-form .edit-help-34 a { font-size: 0.625rem; }
/* Bottom area */
form#edit-page-form table.edit-page-bottomtable tr {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--page-content-width)/2.5), 100%), 1fr));
}
form#edit-page-form table.edit-page-bottomtable tr td {
box-sizing: border-box;
}
form#edit-page-form table.edit-page-bottomtable tr td:nth-of-type(2) {
display: flex;
align-items: center;
padding: 0.75rem!important;
}
form#edit-page-form table.edit-page-bottomtable tr td > div {
max-width: 100%;
min-width: 100%;
}
form#edit-page-form table.edit-page-bottomtable tr td > div > #edit-page-comments {
width: 100%!important;
min-height: 6em;
}
form#edit-page-form #lock-info {
background-color: var(--primaryBackgroundColor);
border: none;
padding: 1em;
margin: 0;
border-radius: calc(var(--radius-adjust)*0.5);
border-bottom: solid 0.2rem var(--linkColor);
box-sizing: border-box;
box-shadow: 0 1px 3px 0 var(--shadow);
}
/* Save button area */
div.buttons.alignleft {
text-align: center;
display: flex;
flex-wrap: wrap;
}
.buttons.alignleft > * {
flex-grow: 1;
}
/*-------------------*/
#who-rated-page-area br {
display: none;
}
#who-rated-page-area>div {
grid-gap: 0.25em;
display: grid;
grid-template-columns: repeat(4,1fr auto);
grid-auto-flow: row;
justify-items: end;
max-width: var(--page-content-width);
margin: 0 auto;
}
#who-rated-page-area>div span.printuser.avatarhover {
display: inline-flex;
flex-wrap: nowrap;
justify-content: center;
align-items: baseline;
}
#who-rated-page-area>div span:nth-child(3n-1) {
margin-right: 2rem;
}
/*-------------------*/
#revision-list .pager, .pager {
width: max-content;
margin: 0.75rem auto;
}
#revision-list .pager > *, .pager > * {
padding: 0.125rem 0.25rem;
margin: 0.05rem;
}
#revision-list .pager > * > a, .pager > * > a {
padding: 0.125rem 0.25rem;
}
#revision-list .pager .current {
font-weight: bold;
background-color: var(--tertiaryBackgroundColor);
color: var(--textColor);
border: 1px solid var(--borderColor);
}
#revision-list .pager .target, #revision-list table.page-history td a {
border-top-color: var(--borderColor);
border-left-color: var(--borderColor);
border-right-color: var(--borderColor);
}
#revision-list table.page-history {
width: 100%;
border-collapse: collapse;
}
#revision-list table.page-history td {
padding: 0.375em 0;
}
#revision-list table.page-history tr:nth-child(2n-1),
#revision-list table.page-history tr:nth-child(2n-1) td {
background-color: var(--secondaryBackgroundColor);
}
#revision-list table.page-history tr:nth-child(2n),
#revision-list table.page-history tr:nth-child(2n) td {
background-color: var(--primaryBackgroundColor);
}
#revision-list table.page-history tr td:nth-child(1) {
width: 4em;
min-width: max-content;
text-align: center;
}
#revision-list table.page-history tr td:nth-child(2),
#revision-list table.page-history tr td:nth-child(3) {
width: 5em;
min-width: max-content;
text-align: center;
}
#revision-list table.page-history tr td:nth-child(4) {
min-width: 4em;
}
#revision-list table.page-history tr td:nth-child(5) {
padding: 0 0.5em;
}
#revision-list table.page-history tr td:nth-child(6) {
min-width: 3.25em;
}
#revision-list table.page-history tr:first-child td:last-child {
text-align: center;
}
/*-------------------*/
#action-area .page-source {
border: solid 2px var(--borderColor);
padding: 1.75em;
font-size: 0.85rem;
box-sizing: border-box;
}
/*-------------------*/
#action-area ul[style*="list-style: none"] {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/*---- FOOTER & LICENSE-AREA & FOOTER-BAR----*/
#footer {
display: flex!important;
justify-content: space-between;
background-color: var(--primaryBackgroundColor);
color: var(--textColor-alt);
font-size: 0rem;
padding: 0.15rem 0.35rem;
flex-wrap: wrap;
grid-gap: 0.125rem 1.5rem;
}
#footer a {
color: var(--textColor-alt);
font-size: 0.6rem;
}
#footer a[href*="wikidot.com"]:not(.options a)::before {
content:"Powered by ";
}
#footer .options a:not(:last-of-type) {
padding-right: 0.25rem;
margin-right: 0.25rem;
border-right: solid 1px var(--borderColor);
}
#license-area {
color: var(--textColor);
background-color: var(--tertiaryBackgroundColor);
border-top: solid 2px var(--borderColor);
font-family: var(--header-font);
font-size: 0.75rem;
font-weight: bold;
padding: 0.25rem;
padding-bottom: 0.5rem;
line-height: 0.8rem;
text-align: center;
}
#license-area a {
color: var(--textColor);
border-bottom: solid 3px var(--linkColor);
background-color: transparent;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#license-area a:hover, #license-area a:focus {
background-size: 100% 100%;
text-decoration: none;
}
#footer-bar {
background-color: var(--secondaryBackgroundColor);
width: 100%;
max-width: 100%;
margin: 0;
border-top: solid 2px var(--borderColor);
padding: 0.5em 1em;
box-sizing: border-box;
}
#footer-bar .units {
box-sizing: border-box;
margin: 0 auto;
width: 100%;
display: flex;
}
#footer-bar .units .unit {
flex-grow: 1;
}
#footer-bar .units .unit h3 a {
margin: 0 auto;
color: var(--textColor);
border-bottom: solid 2px var(--linkColor);
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#footer-bar .units .unit h3 a:hover, #footer-bar .units .unit h3 a:focus {
background-size: 100% 100%;
}
/*---- CUSTOM SYNTAX ----*/
.monoboxical {
border-radius: var(--radius-adjust);
padding: 1em 1.5em;
border-bottom: solid 0.25rem var(--linkColor);
box-sizing: border-box;
box-shadow: 0 1px 3px 0 var(--shadow);
margin: 0.75rem 0.1rem;
}
.header-center {
padding: 0;
margin: 0;
text-align: center;
}
.header-center h1 span,
.header-center h2 span,
.header-center h3 span,
.header-center h4 span,
.header-center h5 span,
.header-center h6 span {
margin-left: auto;
margin-right: auto;
}
#page-content .header-center h1::before {
content: "";
flex-grow: 1;
height: 0.1rem;
margin: auto 0.375rem auto auto;
background-color: var(--borderColor);
}
/* author label compatibility */
#page-content .authorlink-wrapper {
margin-top: -0.1rem;
--author-right-adjust: 0.52em;
}
#page-content .authorlink-wrapper .authorbox {
background-color: var(--primaryBackgroundColor);
color: var(--textColor);
}
#page-content .authorlink-wrapper .authorbox::before {
border-bottom-color: var(--primaryBackgroundColor);
}
/*--- Motion Accessibility ---*/
@media (prefers-reduced-motion) {
:root { --link-timing: 0s linear!important; }
}
/*---- MOBILE QUERY ----*/
@media only screen and (max-width: 767px) {
:root {
--link-timing: .05s ease-out;
}
#header h1 a {
font-size: 2.5rem;
padding-top: 1.45rem;
}
.meta-title {
font-size: 200%;
}
#main-content {
padding: 1em 1.5em;
grid-template-areas:
"action-area-top action-area-top"
"page-title page-title"
"page-content page-content"
"page-tags page-tags"
"page-info-break page-info-break"
"page-options-container page-options-container"
"action-area action-area"
"ad ad";
}
#main-content div.page-tags {
margin: 0.5rem 0 1rem;
width: 100%;
}
#page-options-container {
margin-top: 2.5rem; margin-bottom: 2rem;
}
#page-info, div.page-watch-options {
text-align: left;
}
#who-rated-page-area>div {
grid-template-columns: repeat(2,1fr auto);
}
#who-rated-page-area>div span:nth-child(3n-1) {
margin-right: 1rem;
}
#revision-list table.page-history tr td:nth-child(5) .printuser.avatarhover a:last-of-type {
display: none;
}
#revision-list table.page-history tr td:nth-child(5) {
width: max-content!important;
}
#action-area ul[style*="list-style: none"] {
grid-template-columns: repeat(2, 1fr);
}
#revision-list table.page-history tr td:nth-child(1):not(tr:first-child td),
#revision-list table.page-history tr td:nth-child(7):not(tr:first-child td) {
font-size: 80%!important;
padding-left: 0.75em;
}
#revision-list table.page-history tr td:nth-child(6) { display: none; }
}
[[/code]]
[[/collapsible]]
[[/iftags]]