报纸 版式
2021年4月4日
修订 4
评分
8
↑ 8
↓ 0
支持率
100%
总票数 8
Wilson 95% 下界
67.6%
在相同票数下更稳健的支持率估计
争议指数
0.000
评分趋势
按周聚合 加载图表中...
最近修订
1 / 2
最近投票
1 / 1
2025-01-25
2024-09-03
2024-09-03
2022-10-23
2022-05-24
2022-05-24
2022-05-24
2022-05-24
相关页面
暂无推荐
页面源码
[[include :scp-wiki:component:toggle-sidebar]]
[[include :scp-wiki:component:croqstyle]]
[[module CSS]]
@import url('https://scp-wiki-cn.wdfiles.com/local--code/theme%3Anewspaper/8');
[[/module]]
[[div_ style="display:none"]]
[[embed]]
<iframe src="http://scp-wiki-cn.wdfiles.com/local--files/nav%3Aside/styleFrame.html?%3Aroot%7B--accentColor%3A%20%23542429%3B%7D.side-block%7Bborder%3A%20transparent%3Bborder-radius%3A%200%3Bbox-shadow%3A%20none%3Bbackground-color%3A%20%23d6d6d6%3B%7D.side-block%20.heading%7Bcolor%3A%20%23242424%3Bfont-family%3A%20'Courier%20Prime'%2C'%E5%8D%8E%E6%96%87%E4%B8%AD%E5%AE%8B'%2Cmonospace%3Bfont-size%3A%200.94rem%3Bborder-bottom%3A%20solid%201px%20%23d6d6d6%3B%7D.side-block%20div.menu-item%20img%7Bdisplay%3A%20none%3B%7D.side-block%20div.menu-item%20a%7Bcolor%3A%20%23782121%3Btransition%3A%20color%200.15s%20linear%3B%7D.side-block%20div.menu-item%20a%3Ahover%7Bcolor%3A%20%23ffffff%3Btext-decoration%3A%20none%3Bbackground-color%3A%20var(--accentColor)%3B%7D" name="styleFrame"></iframe>
[[/embed]]
[[/div]]
[[iftags +版式]]
[[toc]]
+ 版权归属
{{报纸版式}}由 [[*user MalyceGraves]] 所制作，随后由 [[*user EstrellaYoshte]] 在网站新闻内部使用。
介于 [[*user MalyceGraves]] 大体上而言已不再是职员或网站的活跃成员，此版式的所有权将归网站新闻的负责人所有。
[[collapsible show="图像归属" hide="图像归属"]]
**SCPN 标志**
> **来源链接：**[https://openclipart.org/detail/259959/transmission-2 Open Clipart]
> **授权协议：**CC BY-SA 3.0（原 PD）
> **文件名：**SCPN_logo.png
> **图像作者：**[https://openclipart.org/artist/rygle rygle]，并由 [[*user MalyceGraves]] & [[*user drkens]] 编辑
> **发布年份：**2016 / 2021
**新闻推送页眉**
> **来源链接：**[https://www.flickr.com/photos/68618467@N03/47043328492 Flickr]
> **授权协议：**PD
> **文件名：**SCPN_header.png
> **图像作者：**[https://www.flickr.com/photos/ntsb/ 国家运输安全委员会]
> **发布年份：**2019
SCP 标志本身是 SCP 基金会维基的产物，适用 CC BY-SA 3.0 授权协议
[[/collapsible]]
-----
+ 页面元素：
[[collapsible show="折叠 - 点击这里" hide="折叠 - 点击这里"]]
+* 1 级标题
++* 2 级标题
+++* 3 级标题
++++* 4 级标题
+++++* 5 级标题
++++++* 6 级标题
[[span class="s-title"]]s-title span[[/span]]
[[span class="placard"]]placard span[[/span]]
[[include component:image-block name= https://scp-wiki.wdfiles.com/local--files/theme%3Anewspaper/newslogo.png|caption=图像。|width=240px]]
[[/collapsible]]
~~~~~
@@ @@
[[tabview]]
[[tab 分页]]
此为分页（tab view）。
[[/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]]
@@ @@
> 这是一个引用块，在一行字的起始处加上“> ”来创建。
>
> 更多文字
> -----
> 一条分割线
>
>> 嵌套引用块
@@ @@
||~ 这是 ||~ 表格 ||
|| 你应该老早 || 就知道怎么 ||
|||| 做这个了吧 ||
------
+ 自定义块
[[div class="section-header"]]
+* 大节段标题
[[/div]]
[[code]]
[[div class="section-header"]]
+ 大节段标题
[[/div]]
[[/code]]
@@ @@
[[div class="gallery-frame"]]
[[image https://scp-wiki.wdfiles.com/local--files/news-07-2021/13th_Anniversary.png]]
[[/div]]
[[code]]
[[div class="gallery-frame"]]
[[image 图片]]
[[/div]]
[[/code]]
@@ @@
[[=]]
[[span class="hover"]][[span]]//S. D. Locke 的提案 - 破晓之时//[[/span]][[image https://olicus.wdfiles.com/local--files/items/001_whenDayBreaks.PNG link="https://scp-wiki.wikidot.com/olicus-art" style="width:48.5%;"]][[/span]]
[[/=]]
[[code]]
[[span class="hover"]][[span]]悬停文本[[/span]][[image 图片]][[/span]]
[[/code]]
@@ @@
[[div class="f-flex"]]
[[div class="f-con"]]
[[=]]
++++ 本月最佳 SCP
[[/=]]
a
[[/div]]
[[div class="f-con"]]
[[=]]
++++ 本月最佳非 SCP
[[/=]]
b
[[/div]]
[[/div]]
[[code]]
[[div class="f-flex"]]
[[div class="f-con"]]
++++ 4 级标题
a
[[/div]]
[[/div]]
[[/code]]
@@ @@
[[div class="f-flex three"]]
[[div class="f-con"]]
[[=]]
++++ SCP 文章
[[/=]]
1
[[/div]]
[[div class="f-con"]]
[[=]]
++++ 故事
[[/=]]
2
[[/div]]
[[div class="f-con"]]
[[=]]
++++ GoI 格式
[[/=]]
3
[[/div]]
[[/div]]
[[code]]
[[div class="f-flex three"]]
[[div class="f-con"]]
++++ 4 级标题
最大宽度的三列
[[/div]]
[[/div]]
[[/code]]
@@ @@
[[div class="f-flex data"]]
[[div]]
1
[[/div]]
[[div]]
2
[[/div]]
[[div]]
3
[[/div]]
[[div]]
4
[[/div]]
[[/div]]
[[code]]
[[div class="f-flex data"]]
[[div]]
减少间距以更佳地显示数据
[[/div]]
[[/div]]
[[/code]]
++ 粘性内容列表设定
[[code]]
[[div class="anchor"]]
[[div class="tocbox"]]
[[div class="toc-u"]]
[[toc]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/code]]
@@ @@
[[=]]
+++ 页眉字体为 DM Serif Display / 华文中宋。
正文字体为 Kulim Park。
@@ @@
{{等宽字为 Fira Code / 幼圆。}}
[[/=]]
@@ @@
[[footnoteblock]]
------
@@ @@
++ 源代码
[[code type="CSS"]]
/*
Newspaper Theme
[2021 Wikidot Theme]
By MalyceGraves and EstrellaYoshte
Based on:
Penumbra Theme by EstrellaYoshte
Paperstack Theme by EstrellaYoshte
Ad Astra Theme by NatVoltaic and stormbreath
Inkblot Theme by Croquembouche
Anderson Robotics Theme by Croquembouche
BHL Style Collapsible by Monkatraz
Monotypical Theme by EstrellaYoshte
*/
@import url('https://fonts.googleapis.com/css2?family=Kulim+Park&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
:root {
--accentColor: #E5062B;
--visitedColor: #BF0524;
--lgurl: url("https://scp-wiki.wdfiles.com/local--files/theme%3Anewspaper/newslogo.png");
--bgurl: url("https://scp-wiki.wdfiles.com/local--files/theme%3Anewspaper/newshead.png");
--primaryBackgroundColor: #f3f3f3;
--textColor: #090B0C;
--headerColor: #161B33;
--selectionColor: #FFE419;
--header-font: 'DM Serif Display', '华文中宋', serif;
--link-timing: 0.125s ease-out;
}
#content-wrap {
margin: 0.65em auto 0;
box-sizing: border-box;
}
#page-content { font-size: 1rem; }
body {
font-family: 'Kulim Park', sans-serif;
color: var(--textColor);
background-color: #FFF4E9;
background-image: none;
background-repeat: no-repeat;
}
tt {
background-color: var(--primaryBackgroundColor);
}
code {
font-family: var(--mono-font);
}
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source {
font-size: 90%;
}
a:not(.rate-box-with-credit-button a, .page-rate-widget-box a, yui-nav a) {
color: var(--accentColor);
}
a:not(.rate-box-with-credit-button a, .page-rate-widget-box a, yui-nav a):visited {
color: var(--visitedColor);
}
#page-content div {
clear: unset;
}
/* Selection */
::selection {
background: var(--selectionColor);
color: var(--textColor);
}
/* ---- HEADER ---- */
div#container-wrap {
background-image: none;
}
div#header {
background-image: none;
height: 240px;
}
div#header-extra-div-1 {
height: 164px;
width: 100%;
top: 0;
position: absolute;
background: var(--lgurl);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
opacity: 1;
z-index: -1;
}
div#extra-div-1 {
height: 164px;
width: 100%;
top: 0;
position: absolute;
background: var(--bgurl);
background-size: cover;
background-repeat: no-repeat;
background-position: center 0;
z-index: -2;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%);
}
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
#header h1 a {
padding-top: 174px;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
}
#header h2 {
margin-top: 6.5rem;
font-size: 0.75rem;
font-style: italic;
}
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; display: none; }
/* Style the new text */
#header h1 a::before, #header h2::before {
color: var(--headerColor);
font-family: var(--header-font);
text-shadow: none;
}
#header h2::before { color: var(--textColor); }
/* Set the new text's content from variable */
#header h1 a::before {
content: var(--header-title, "SCP 基金会新闻");
font-weight: 300;
font-size: 1.3em;
}
#header h2::before {
content: var(--header-subtitle, "官方 SCPN 月刊");
font-weight: 600;
font-size: 1.22em;
}
#login-status {
color: var(--textColor);
background-color: #FEFBF8;
padding: 0.3rem 0.25rem 0.4rem 0.5rem;
border-radius: 0 0 0.5rem 0.5rem;
box-shadow: 0 0 3px 1px rgba(0,0,0,0.2);
top: 0;
}
#login-status a {
color: var(--accentColor);
}
#account-topbutton {
border: none;
margin-left: -0.1rem;
}
div#account-options {
background-color: var(--primaryBackgroundColor);
border: none;
border-radius: 0.35rem;
box-shadow: 0 0 4px 1px rgba(0,0,0,0.25);
top: 1.85rem;
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;
}
}
#account-options li a,
#account-options li a:hover {
color: var(--accentColor);
}
/* ---- SEARCH ---- */
div#search-top-box {
top: 2.25rem;
right: 0.5rem;
width: 1.6rem;
}
div#search-top-box::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0; right: 0.05rem;
background-color: var(--accentColor);
pointer-events: none;
z-index: 2;
-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: 0.35rem;
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;
}
/* ---- TOP BAR ---- */
#top-bar {
top: 14.6rem;
display: flex;
justify-content: center;
right: 0;
}
@media (max-width: 768px) {
.mobile-top-bar {
display: flex;
justify-content: center;
max-width: 100%;
width: 100%;
left: 0;
}
}
/* div[class*=top-bar] is to select both regular and mobile top bar that exist in #top-bar */
#top-bar div[class*=top-bar] > ul > li > a {
color: var(--textColor);
}
#top-bar div[class*=top-bar] ul li ul li a {
color: var(--accentColor);
}
#top-bar div[class*=top-bar] > ul > li > a:hover,
#top-bar div[class*=top-bar] > ul > li.sfhover > a {
background-color: transparent;
background: none;
}
#top-bar div[class*=top-bar] > ul > li,
#top-bar div[class*=top-bar] > ul > li.sfhover {
background-color: transparent;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 0 100%;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#top-bar div[class*=top-bar] > ul > li:hover,
#top-bar div[class*=top-bar] > ul > li:focus-within {
background-color: transparent;
background-size: 100% 100%;
}
#top-bar div[class*=top-bar] ul li ul {
background-color: var(--primaryBackgroundColor);
border: none;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
border-radius: 0.5rem;
}
#top-bar div[class*=top-bar] ul li ul li:first-of-type a {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
#top-bar div[class*=top-bar] ul li ul li:last-of-type a {
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
#top-bar div[class*=top-bar] ul li ul li,
#top-bar div[class*=top-bar] ul li ul li a {
background: transparent;
border: none;
}
#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-color: #FEFBF8;
}
/* keyboard navigation compatibility */
#top-bar div[class*=top-bar] ul > li > ul > li > a {
height: auto;
max-height: none;
line-height: 1.5!important;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
#top-bar div[class*=top-bar] > ul > li > ul {
visibility: visible;
opacity: 0;
pointer-events: none;
}
#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;
}
/* ---- SIDE BAR ---- */
div#side-bar{
background: #FEFBF8;
clear: both;
padding: .8em;
border: none;
border-radius: 0;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
overflow-x: hidden;
}
#side-bar .heading{
color: var(--headerColor);
font-family: var(--header-font);
font-size: 0.94rem;
border-bottom: solid 1px var(--headerColor);
border-top: solid 1px var(--headerColor);
margin-top: 1.35rem;
padding-left: 0;
text-align: center;
}
#side-bar .side-block {
border: transparent;
border-radius: 0;
box-shadow: none;
background-color: #FEFBF8;
}
#side-bar .side-block.media {
background-color:#FEFBF8;
}
#side-bar .side-block.media > * {
display: flex;
justify-content: space-evenly;
}
#side-bar .side-block.resources {
background-color:#FEFBF8;
}
.side-block .menu-item > .image {
display: none;
}
#side-bar div.menu-item a {
color: var(--accentColor);
}
#top-bar div.open-menu a {
border-radius: 0.35rem;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
color: var(--accentColor);
background-color: #FEFBF8;
border: none;
padding: 0.15rem;
user-select: none;
}
/* ---- MAIN CONTENT ---- */
#main-content {
background-color: #FEFBF8;
padding: 0.5em 2em 0.75em;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
width: 100%;
max-width: 880px;
margin: -0.4rem auto 0;
border-radius: 0;
box-sizing: border-box;
}
/* ---- PAGE TITLE ---- */
#page-title, .meta-title {
color: var(--headerColor);
font-family: var(--header-font);
font-size: 3em;
text-align: center;
display: flex;
align-items: center;
text-align: center;
border-bottom: none;
margin: 0.25rem 0;
padding-bottom: 0;
}
#page-title::before,
#page-title::after,
.meta-title::before,
.meta-title::after {
content: "";
flex-grow: 1;
height: 0.25rem;
margin: auto auto auto 0.65rem;
background-color: transparent;
border-top: solid 0.125rem var(--headerColor);
border-bottom: solid 0.125rem var(--headerColor);
}
#page-title::before,
.meta-title::before {
margin: auto 0.65rem auto auto;
}
/* ---- BREADCRUMBS ---- */
#breadcrumbs, #page-content .pseudocrumbs {
font-size: 0.85rem;
font-family: var(--header-font);
margin-top: -1.05em;
}
#page-content .pseudocrumbs * { text-decoration-color: var(--accentColor)!important; }
/* ---- 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-width: 0;
box-shadow: none;
}
.yui-navset .yui-nav a, /* ---- Link Modifier ---- */
.yui-navset .yui-navset-top .yui-nav a{
color: var(--textColor);
font-weight: bold;
/* ---- Tab Background Colour | [UNSELECTED] ---- */
background-color: transparent;
border: unset;
box-shadow: none;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 0 100% ;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus{
/* ---- Tab Background Colour | [HOVER] ---- */
background-color: transparent;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 100% ;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
.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.25rem;
padding: 0;
color: #d6d6d6;
background-color: var(--primaryBackgroundColor);
border-color: transparent;
border-radius: 0.35rem;
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%;
border-radius: 0.35rem;
}
.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;
border-radius: 0.35rem;
/* ---- Tab Background Colour | [SELECTED] ---- */
background-color: var(--accentColor);
color: var(--primaryBackgroundColor);
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em{
border: none;
}
.yui-navset .yui-nav .selected a{
width: 100%;
color: #ffffff;
font-weight: bold;
}
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active{
color: #ffffff;
background-color: var(--accentColor);
}
.yui-navset .yui-content {
border: none;
background-color: transparent;
box-shadow: none;
margin-top: 0.25rem;
box-sizing: border-box;
border-radius: 1rem;
padding: 0.35rem 0;
border-top: solid 0.2rem var(--accentColor);
border-bottom: solid 0.2rem var(--accentColor);
}
/* ---- INFO PANE ---- */
:root {
--linkColor: var(--selectionColor);
--radius-adjust: 0.325rem;
--shadow: rgba(0,0,0,0.2);
}
#page-content .creditRate{
margin: unset;
margin-bottom: 1rem;
}
#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: 0 100% ;
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: 0 100%;
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: 1rem;
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 .rateup a:focus,
.page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .ratedown a:focus,
.page-rate-widget-box .cancel a:hover, .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: 0 100%;
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: 0 100%;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
/* ---- PAGE ELEMENTS ---- */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--headerColor);
font-family: var(--header-font);
font-weight: normal;
margin: 0.45em 0;
}
h1 { font-size: 2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.45em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
hr {
height: 0.25rem;
margin: 1.75rem 0;
background-color: transparent;
border-top: solid 0.125rem var(--headerColor);
border-bottom: solid 0.125rem var(--headerColor);
clear: both;
}
blockquote,
div.blockquote {
background-color: var(--primaryBackgroundColor);
border: none;
border-left: solid 0.2rem var(--headerColor);
padding: 0.1rem 1rem;
box-shadow: 0 0 3px rgba(0,0,0,0.25);
position: relative;
}
blockquote::before, blockquote::after,
div.blockquote::before, div.blockquote::after {
content: "";
display: block;
height: 0.5rem; width: 0.5rem;
position: absolute;
left: 0;
background-color: var(--headerColor);
}
blockquote::before, div.blockquote::before {
top: 0;
transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
blockquote::after, div.blockquote::after {
bottom: 0;
transform: translate(calc(-50% - 0.1rem),50%) rotate(45deg);
}
#toc {
display: block;
background-color: #FEFBF8;
border: none;
padding: 0.1rem 1rem;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
border-right: solid 0.2rem var(--headerColor);
padding: 0.75em;
position: relative;
}
#toc::before, #toc::after {
content: "";
display: block;
height: 0.5rem; width: 0.5rem;
position: absolute;
right: 0;
background-color: var(--headerColor);
}
#toc::before {
top: 0;
transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg);
}
#toc::after {
bottom: 0;
transform: translate(calc(0.1rem + 50%),50%) rotate(45deg);
}
#toc-list {
font-family: var(--header-font);
}
#toc-list > div { position: relative; }
#toc-list > div:not([style*="margin-left: 1em;"], [style*="margin-left: 2em;"]) { display: none; }
#toc-list > div[style*="margin-left: 1em;"] { margin-left: 0.5em!important; }
#toc-list > div[style*="1em"]::before {
content: "•";
display: inline-block;
position: absolute;
left: -0.75em;
color: var(--accentColor);
}
#toc-list > div[style*="margin-left: 2em;"] { margin-left: 1.5em!important; font-size: 95%; }
#toc-list > div[style*="2em"]::before {
content: "┖";
display: inline-block;
position: absolute;
left: -1.25em;
color: var(--accentColor);
transform: scaleY(1.5);
}
.scp-image-block {
border: solid 8px var(--primaryBackgroundColor);
box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
box-sizing: border-box;
position: relative;
z-index: 0;
}
.scp-image-block::before, .scp-image-block::after {
content:'';
position: absolute;
pointer-events: none;
border: solid 0.25rem var(--headerColor);
transform: rotate(25deg);
}
.scp-image-block::before {
right: -0.135rem;
height: 36px;
width: 9px;
top: -14.25px;
border-radius: 0 0 2rem 2rem;
border-top: none;
}
.scp-image-block::after {
top: -25px;
right: -0.94rem;
height: 16px;
width: 14px;
border-radius: 2rem 2rem 0 0;
border-bottom: solid 0.55rem transparent;
z-index: -1;
}
.scp-image-block .scp-image-caption {
background-color: var(--primaryBackgroundColor);
border-top: solid 4px var(--primaryBackgroundColor);
color: var(--textColor);
}
.scp-image-block.block-left,
.scp-image-block.block-right {
margin: 0.25rem 2rem 0.625rem;
}
.scp-image-block.block-left { margin-left: 0.5rem; }
.scp-image-block.block-right { margin-right: 0.5rem; }
@media (max-width: 640px) {
.scp-image-block.block-left, .scp-image-block.block-right {
float: none; clear: both; margin-left: auto; margin-right: auto;
}
}
#page-content .wiki-content-table tr th {
border: solid 1px var(--headerColor);
color: var(--headerColor);
background-color: var(--primaryBackgroundColor);
/* set border for table title */
}
#page-content .wiki-content-table tr td {
border: solid 1px var(--headerColor);
/* set border for table content */
}
/* fancy collapsible */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
background-color: var(--primaryBackgroundColor);
border-radius: 0.35rem;
width: min-content;
white-space: nowrap;
overflow: hidden;
margin: auto;
}
#page-content .collapsible-block-folded {
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 0 100% ;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-folded:focus-within {
background-size: 100% 100% ;
transition: background-size var(--link-timing);
}
#page-content .collapsible-block-unfolded-link {
background-color: var(--accentColor);
box-shadow: 0 0 0 0.2rem var(--accentColor);
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
margin-top: 10px;
margin-bottom: 10px;
}
#page-content .collapsible-block-link {
display: inline-flex;
padding: 0.5rem 1rem;
text-decoration: none;
color: var(--textColor);
font-weight: bold;
}
#page-content .collapsible-block-unfolded-link .collapsible-block-link {
color: var(--primaryBackgroundColor);
}
/* Footnotes */
a.footnoteref {
padding: 0 0.25em 1px;
margin-left: -0.15em;
}
.hovertip {
font-size: 1.25em;
background-color: #FEFBF8 !important;
border: none !important;
border-left: solid 0.2rem var(--accentColor)!important;
color: var(--textColor) !important;
border-radius: 0 1rem;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
padding: 0.35rem;
box-sizing: border-box;
width: min(24rem, 60vw)!important;
top: initial!important;
left: initial!important;
position: fixed! important;
display: block!important;
bottom: 2rem;
right: -25rem;
transition: right 0.45s cubic-bezier(.6,.18,.27,.88);
transition-delay: 0.455s;
z-index: 29;
}
.hovertip::before {
content: "";
display: block;
height: 0.5rem;
width: 0.5rem;
position: absolute;
left: 0;
top: 0;
background-color: var(--accentColor);
transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
div[id$="button-hovertip"] { transition-delay: 0s; }
.hovertip[style*="display: block"],
.hovertip:hover {
z-index: 30;
right: 1rem;
transition-delay: 0s;
}
.footnote .f-heading {
font-family: var(--header-font);
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
display: none;
}
.footnotes-footer {
border: none;
border-left: solid 0.2rem var(--accentColor);
padding: 0.1rem 1rem 1rem 1.25rem;
position: relative;
border-radius: 0 1.25rem;
}
.footnotes-footer::before {
content: "";
display: block;
height: 0.5rem; width: 0.5rem;
position: absolute;
left: 0; top: 0;
background-color: var(--accentColor);
transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
.footnotes-footer .title {
color: var(--textColor);
font-family: var(--header-font);
margin: 0 0 0.625rem 0;
}
/*-- tags --*/
#main-content .page-tags a {
height: 0.8125rem;
font-size: 0.6875rem;
background-color: var(--primaryBackgroundColor);
color: var(--textColor);
border-radius: 0.35rem;
margin: .25rem .2rem;
padding: 0.21rem 0.35rem 0.22rem 0.3rem;
box-shadow: 0 0 3px rgba(0,0,0,0.25);
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 0 100%;
background-position: 0 100%;
background-repeat: no-repeat;
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: "⬤";
font-size: 4px;
padding-right: 0.2rem;
display: inline-block;
}
.page-tags span {
border-top: solid 0.125rem var(--primaryBackgroundColor);
}
/* Pop-Up Windows */
.owindow {
background-color: var(--primaryBackgroundColor);
border: none;
}
.owindow .modal-header {
background-color: transparent;
}
.owindow .modal-body img {
background-color: transparent !important;
}
.owindow .title {
background-color: transparent;
color: var(--headerColor);
border-bottom: 1px solid var(--headerColor);
}
.owindow .button-bar a {
background-color: var(--primaryBackgroundColor);
border-color: var(--accentColor);
color: var(--accentColor);
}
.owindow .button-bar a:hover {
background-color: var(--accentColor);
color: var(--primaryBackgroundColor);
}
#page-content .modalbox {
background: #FEFBF8;
border: none;
border-radius: 0;
box-shadow: 0 0 10px rgba(0,0,0,0.35);
}
#page-content .modalbox hr { margin: 0.75rem 1rem; }
/* Edit Buttons */
.buttons .btn {
background-color: var(--primaryBackgroundColor);
border-color: var(--accentColor);
color: var(--accentColor);
padding: 3px 5px;
}
.buttons .btn:hover {
background-color: var(--accentColor);
color: var(--primaryBackgroundColor);
}
/* Close Button for Page Source, Rating, Etc */
a.action-area-close:hover {
background-color: var(--accentColor);
color: var(--primaryBackgroundColor);
}
/* Page-History Current */
.pager .current {
background-color: var(--accentColor);
border-color: var(--primaryBackgroundColor);
}
/* ---- CUSTOM SYNTAX ----*/
#page-content .section-header {
display: flex;
align-items: center;
text-align: center;
margin-top: 3.5rem;
margin-bottom: 0.75rem;
clear: both;
}
#page-content .breaker + .section-header {
margin-top: 1.5rem;
}
.section-header::before, .section-header::after {
content: "";
flex-grow: 1;
height: 0.175rem;
margin: auto -0.625rem auto auto;
background-color: var(--primaryBackgroundColor);
}
.section-header::after {
margin: auto auto auto -0.625rem;
}
.section-header h1 {
width: max-content;
margin: 0 auto;
text-align: center;
padding: 0.05rem 1.5rem;
border-radius: 0rem 0.875rem;
border-bottom: solid 0.2rem var(--accentColor);
border-top: solid 0.2rem var(--accentColor);
position: relative;
}
.section-header h1::before {
content: "";
background-color: var(--accentColor);
display: block;
width: 0.6rem; height: 0.6rem;
position: absolute;
top: 0;
left: 0;
transform: translate(-0.3rem, -0.4rem) rotate(45deg);
}
.section-header h1::after {
content: "";
background-color: var(--accentColor);
display: block;
width: 0.6rem; height: 0.6rem;
position: absolute;
bottom: 0;
right: 0;
transform: translate(0.3rem, 0.4rem) rotate(45deg) ;
}
.section-header h1 span {
width: max-content;
margin: auto;
}
/*-----------------*/
.s-title {
font-size: 110%;
font-weight: bold;
display: inline;
padding: 0 0.15em;
padding-bottom: 0.1em;
border-bottom: solid 0.1rem currentColor;
border-top: solid 0.1rem currentColor;
}
.gallery-frame {
box-sizing: border-box;
background-color: #FFF4E9;
padding: 0.75rem;
border: inset 0.325rem var(--headerColor);
box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
margin: auto;
}
.gallery-frame > img { box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); }
.hover:hover {
text-decoration: none;
}
.hover span { display: none; }
.hover:hover span {
position: absolute;
display: inline;
height: auto;
max-width: 25%;
background-color: var(--headerColor);
color: #FEFBF8;
font-weight: bold;
padding: 0.5em 1.5em;
border-bottom-right-radius: 1rem;
}
.f-flex {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.f-flex > div {
flex-basis: 18rem;
flex-grow: 1;
}
.f-flex.three > div {
flex-basis: 13rem;
flex-grow: 1;
}
.f-flex.data > div {
padding: 0.65rem 0.375rem;
}
.f-flex.data > div:hover {
z-index: 9;
}
.f-con {
border: none;
padding: 0.15rem 0.75rem;
margin: 0.85rem;
position: relative;
border-radius: 0 1.25rem;
background-color: #FFF4E9;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
#page-content .f-flex .f-con { max-width: 25rem; }
.f-con h4 {
background-color: var(--headerColor);
color: #FEFBF8;
padding: 0.1rem 0;
border-radius: 0 0.625rem;
}
.placard {
display: inline-block;
position: relative;
padding: 0.45rem 0.65rem;
margin: -1.05rem -0.5rem -1.3rem;
border: solid 1em transparent;
background: var(--primaryBackgroundColor) padding-box;
clip-path: polygon(0 3em, 3em 0, 100% 0, 100% calc(100% - 3em), calc(100% - 3em) 100%, 0 100%);
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.placard::before, .placard::after {
position: absolute;
width: 3em;
height: .35em;
background: radial-gradient(at 50% 0, rgba(0,0,0,0.17), rgba(0,0,0,0) 65%);
content: "";
}
.placard::before {
top: 0.45em;
left: -0.95em;
transform: rotate(-45deg);
}
.placard::after {
bottom: 0.45em;
right: -0.95em;
transform: rotate(135deg);
}
/*---- Side ToC setup ----*/
.anchor {
position: sticky;
height:0;
top: 0.5rem;
z-index: 4;
}
.tocbox {
margin-top: 0;
position: absolute;
top: 0;
right: max(-18.75rem, -17vw);
z-index: 4;
box-sizing: border-box;
width: max-content;
pointer-events: none;
}
#page-content .tocbox .toc-u {
padding: 0.5rem;
background-color: #FEFBF8;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
border-right: solid 0.2rem var(--headerColor);
position: relative;
width: 15rem;
max-height: calc(98vh - 2rem);
max-width: calc((30vw - 50% - 6rem)/1.2);
margin-right: 0; margin-left: auto;
pointer-events: all;
}
.toc-u #toc::before, .toc-u #toc::after { display: none; }
.toc-u::before, .toc-u::after {
content: "";
display: block;
height: 0.5rem; width: 0.5rem;
position: absolute;
right: 0;
background-color: var(--headerColor);
}
.toc-u::before {
top: 0;
transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg);
}
.toc-u::after {
bottom: 0;
transform: translate(calc(0.1rem + 50%),50%) rotate(45deg);
}
#page-content .tocbox .toc-u #toc-list {
overflow-y: auto;
overflow-x: hidden;
max-height: 84vh;
padding: 0 0.5em 1em;
scrollbar-width: thin;
}
#page-content .tocbox .toc-u #toc-list::-webkit-scrollbar {
width: 6px;
}
.tocbox table,
.tocbox tbody,
.tocbox tr,
.tocbox td,
.tocbox #toc {
display: contents;
}
@media (max-width: 1340px) {
.anchor {
filter: none;
transition: filter 0.2s ease-out;
}
.tocbox {
right: -1rem;
width: unset;
}
.tocbox::before {
content: "";
display: block;
position: absolute;
background-color: transparent;
width: 1.5rem; height: 100%;
top: 0; right: -0.25rem;
pointer-events: all;
}
.tocbox::after {
content: "";
display: block;
position: absolute;
background-color: transparent;
width: 0; height: 0;
border: solid 1rem transparent;
border-left-width: 0.5rem;
border-right-color: var(--headerColor);
top: calc(50% - 1rem); right: 0;
pointer-events: all;
transition: border-right-width 0.15s ease-out;
}
#page-content .tocbox .toc-u {
width: -moz-fit-content;
width: fit-content;
max-width: 60vw;
box-shadow: none;
clip-path: inset(-0.5rem -0.5rem -0.5rem calc(100% - 0.65rem));
transition: clip-path 0.2s ease-out;
pointer-events: none;
}
.anchor:hover { filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2)); }
.tocbox:hover {
pointer-events: all;
}
.tocbox:hover::after {
border-right-width: 0;
}
#page-content .tocbox:hover .toc-u {
pointer-events: all;
clip-path: inset(-0.5rem -0.5rem -0.5rem -0.35rem);
}
}
/* ---- FOOTER & LICENSE AREA ---- */
#footer, #license-area {
background-color: #FFF4E9;
color: var(--textColor);
}
#footer a { color: var(--accentColor); }
#footer {
padding-top: 1rem;
}
#license-area {
padding-top: 0;
}
/* ---- MOBiLE QUERY ---- */
@media (max-width: 767px) {
div#header, div#top-bar {
width: 100%;
max-width: 100%;
}
#login-status {
padding-top: 0rem;
padding-left: 0.3rem;
}
#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;
}
#main-content {
padding: 0.5em 1.75em 0.75em;
}
#side-bar .close-menu {
opacity: 0;
margin-left: 18.75em;
}
#side-bar:target .close-menu:hover {
background: unset;
}
:root {
--header-title: "SCPF 新闻";
}
#page-title, .meta-title { font-size: 2.4em; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.05em; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.8em; }
}
[[/code]]
[[/iftags]]