- SCP系列
- 故事
- 图书馆
- SCP-CN系列
- SCP国际
- 背景资料
- 指导
- SCP系列
- 故事
- 图书馆
- 背景资料
- 指导
单色型 版式
这是由 EstrellaYoshte 制作的美学版式,且获得了
Woedenaz 的额外帮助。若需使用此版式,请将以下代码复制到你的文章中:
[[include :scp-wiki-cn:theme:monotypical]]

图像。
可通过 4 个连字符“----”1创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
此为分页(tab view)。2
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。3
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧 | |
1 | 2 |
3 | 4 |
谁是这里 | 最厉害的? |
#十六进制 | #至高无上 |
页眉字体为 Century Gothic / Quicksand。
正文字体为 Ubuntu。
等宽字体为 Fira Code / 幼圆。
深潜
component:croqstyle 已被引入到此版式中。
[[div class="monoboxical"]]
Hello world!
[[div class="meta-title"]]
在此插入标题
单色型默认隐藏常规标题,所以需要转而使用 meta-title(假标题)。
[[div class="header-center"]]
1 级居中标题
2 级居中标题
5 级居中标题
鉴于此版式中标题的工作机制,其需要被放置在 header-center div 块中才能被正确地居中。
这同样能将常规文本居中。
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; --header-height: 3.5rem; --page-content-width: 954px; --radius-adjust: 0.95rem; --link-timing: .125s ease-out; }
这里的所有东西都可以修改以改变单色型的默认外观。这里是一些能够放在 [[include]] 后方的预设:

[[module 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;
}
[[/module]]

[[module 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;
}
[[/module]]

[[module 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);
}
[[/module]]
请随意实验自己的颜色配置!
源代码
/* 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: var(--header-height) 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 { 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; --header-height: 3.5rem; --page-content-width: 954px; --radius-adjust: 0.95rem; --link-timing: .125s ease-out; } body { font-family: var(--body-font); font-size: 0.95rem; color: var(--textColor); } tt { background-color: var(--secondaryBackgroundColor); font-size: 90%; } code { font-family: var(--mono-font); } #edit-page-textarea, .code pre, .code p, .code, .page-source { font-size: 95%; } #main-content { background-color: var(--primaryBackgroundColor); padding: 1em 3em; } #page-content { width: 100%; max-width: var(--page-content-width); margin: 0 auto 2rem; } #page-content a:not(div[class*=top-bar] a, #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(div[class*=top-bar] a, #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(div[class*=top-bar] a, #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: 2; height: var(--header-height); background: var(--primaryBackgroundColor); } #top-bar, #page-title, #header h2 { display: none; } #header h1 { margin-left: 0; padding: 0; float: none; max-height: 4rem; width: 100%; } #header h1 a { display: block; width: fit-content; vertical-align: middle; padding: 1rem; line-height: 3.5rem; 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; } #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; } div#account-options { background-color: var(--primaryBackgroundColor); 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); } 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 { 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,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%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; } div#search-top-box form input[type="submit"] { display: none; } /*---- SIDEBAR ----*/ /*---- Adaptive Change by hoah2333 ----*/ #side-bar { 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, #side-bar .side-block[style*=background-color] { background-color: transparent !important; } #side-bar .collapsible-block-folded { background: none; } #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, #side-bar .collapsible-block-folded, #side-bar .collapsible-block-link, #side-bar .collapsible-block-unfolded-link, #side-bar .collapsible-block-unfolded-link .collapsible-block-link { color: var(--textColor); background-color: var(--tertiaryBackgroundColor); border-top: solid 2px var(--borderColor); border-bottom: none; font-family: var(--header-font); text-transform: uppercase; font-size: 0.9rem; padding: 0.1rem 0.3rem; text-align: right; } #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover { color: var(--textColor); text-decoration: underline } #side-bar div.menu-item, #side-bar div.menu-item > p { display: flex; flex-basis: auto; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin: 0; font-size: 0; } #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*="scp-series"] { padding: .25rem; text-align: center; } #side-bar div.menu-item a[href="/"] { border-bottom: none; } #side-bar div.menu-item a:hover, #side-bar div.menu-item a:focus { background-size: 100% 100%; } #side-bar .side-block div span { color: var(--textColor); } /*---- 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-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; cursor-events: all; } /*------ Top Bar, reborn -------*/ #page-content div[class*=top-bar] { font-size: 100%; z-index: 9; } #page-content div[class*=top-bar] a { text-decoration: none; } #page-content 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; } #page-content div[class*=top-bar] ul > li { flex-grow: 1; border-radius: calc(var(--radius-adjust)*0.5); } #page-content div[class*=top-bar] li { color: var(--textColor); background: transparent; display: block; float: left; padding: 0.5rem; position: relative; text-decoration: none; transition: background-color var(--link-timing); } #page-content div[class*=top-bar] > ul > li:hover, #page-content div[class*=top-bar] > ul > li:focus-within { background: var(--tertiaryBackgroundColor); cursor: pointer; } #page-content div[class*=top-bar] li a { color: var(--textColor); display: block; width: max-content; height: 100%; margin: auto; } #page-content div[class*=top-bar] ul li ul { background: var(--primaryBackgroundColor); box-sizing: border-box; min-width: 100%; position: absolute; margin-top: 0.5rem; border-radius: calc(var(--radius-adjust)*0.5); box-shadow: 0 0 6px 2px var(--shadow); left: 0; display: block; transition: opacity var(--link-timing); opacity: 0; pointer-events: none; } #page-content div[class*=top-bar] ul li:hover > ul, #page-content div[class*=top-bar] ul li:focus-within > ul, #page-content div[class*=top-bar] ul li ul:hover, #page-content div[class*=top-bar] ul li ul:focus { opacity: 1; z-index: 9; pointer-events: all; } #page-content 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; } #page-content div[class*=top-bar] ul li ul li { clear: both; width: 100%; position: relative; display: flex; padding: 0; } #page-content 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); } #page-content 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); } #page-content div[class*=top-bar] ul li ul li a { width: max-content; height: 100%; flex-grow: 1; align-self: center; padding: 0.4rem; text-align: center; 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 div[class*=top-bar] ul li ul li a:hover, #page-content div[class*=top-bar] ul li ul li a:focus { background-size: 100% 100%; } #page-content div[class*=top-bar]>ul:first-of-type>li:last-of-type>ul { right: 0; left: auto; } #page-content .mobile-top-bar { position: relative; left: 0; width: 100%; max-width: 100%; } #page-content .mobile-top-bar .open-menu { display: none; } /* ---- 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.85em; line-height: 1.25em; } #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.25em auto 0; padding: 0.65em 0.75em 0.225em; position: relative; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } #breadcrumbs::before, #breadcrumbs::after { content: ""; position: absolute; top: 0; } #breadcrumbs::before { left: 0; width: 100%; height: 3px; border-radius: var(--radius-adjust); background-color: var(--textColor); } #breadcrumbs::after { left: 50%; margin-left: -8px; border-width: 8px; border-style: solid; border-color: var(--textColor) transparent transparent transparent; } #breadcrumbs:hover, #breadcrumbs:focus-within { max-height: 1rem; } #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:focus { 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 { 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: 0; } .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 { 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: 0; } .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: 200%;} #page-content h2 {font-size: 180%;} #page-content h3 {font-size: 160%;} #page-content h4 {font-size: 140%;} #page-content h5 {font-size: 120%;} #page-content h6 {font-size: 100%;} #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 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.35rem 0.1rem; color: var(--textColor); } .scp-image-block.block-left { margin-left: 0; } .scp-image-block.block-right { margin-right: 0; } @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.5rem; margin: 0 0.15em; } .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); } .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; } #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 > div:last-of-type { grid-area: link; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0.45em; text-align: center; } #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 .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 { margin: 0 2.5rem 0.5rem 0; } #main-content div.page-tags::before { content: "标签"; 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; } #main-content .page-tags a { height: 0.9rem; 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%; } 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 .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 { background-color: var(--primaryBackgroundColor); color: var(--textColor-alt); font-size: 65%; } #footer a { color: var(--textColor-alt); } #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); } #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; } #page-content div[class*=top-bar] ul li ul::after { left: calc(1% + 9vw); } #page-content div[class*=top-bar]>ul:first-of-type>li:last-of-type>ul::after { right: calc(1% + 9vw); left: auto; } .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; } } }