褶皱风格版式

评分模块：

在任意wiki上通过下列代码使用：

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

这是什么？

褶皱风格是 MisterFrown设计的一个艺术版式，主要基于空白风格，狐步舞和Navlastyle。它的设计带有一种未来主义的风格，并且整体而言非常非常忧郁。

这个版式配有多种可选的设定，包括暗色模式，一个居中时视觉效果更好的替代用评分模块，以及一个简短的标题标志的载入动画。更多关于如何采用这些配置的方法如下：

示例

图片模块。

一个链接.1

可折叠方块关闭

标题1

标题2

标题3

标题4

标题5

标题6

测试	测试
这是	一个表格
说实话	我
不怎么	使用

这是一个引用方块。

嵌套的引用方块

测试1

测试2

测试3

[[div class="onesideblock"]]

[[div class="twosideblock"]]

设置：

暗色模式：

[[include :scp-wiki-cn:theme:frownstyle
|dark=--]
]]

替换用评分模块：

[[include :scp-wiki-cn:theme:frownstyle
|rate=--]
]]

载入动画：

[[include :scp-wiki-cn:theme:frownstyle
|anim=--]
]]

源代码：

展示源代码隐藏源代码

css



/* Frownstyle Theme by MisterFrown */

/* Fonts */

@import url("https://fonts.googleapis.com/css2?family=Aldrich&family=Electrolize&family=Kdam+Thmor+Pro&family=Odibee+Sans&family=Orbitron:wght@400..900&display=swap");
@import url('https://fonts.googleapis.com/css?family=Lato:400,900|PT+Mono|Poppins:600,800');
@import url('https://fonts.googleapis.com/css2?family=Oxanium&display=swap');

/* Root Block */

:root {

--bright-accent: #0c499c;
--medium-accent: #4169e1;
--dark-accent: #000060;
--ghost-accent: #f0ffff;

--title-font: 'Oxanium', cursive;
--header-font: "Aldrich", sans-serif;
--body-font: 'Lato', sans-serif;

--font-color: #000000;

}

/* ACS Bar */

.top-left-box > .item {

display: none;

}

/* Logo */

div#extra-div-1 {

margin-top: 10px;
opacity: 75%;
height: 140px;
width: 100%;
top: 0;
position: absolute;
background: url('https://cdn.scpwiki.com/theme/en/black-highlighter/img/logo.svg') center no-repeat;
background-size: contain;
background-position: 50% 50%;
z-index: -1;

}

/* Header */

#header h1, #header h2 {

margin-left: 0; float: none; text-align: center;

}

#header h1 span, #header h2 span {

font-size: 0; display: none;

}

#header h2 {

margin-top: 15px;

}

#header h1 a::before, #header h2::before {

color: var(--dark-accent);
font-family: var(--header-font);
text-shadow: none;

}

#header h1 a::before {

content: "SCP基金会";
font-weight: 600;
font-size: 1.3em;

}

#header h2::before {

content: "内部文件存储";
font-weight: 700;
font-size: 1.2em;

}

/* Background */

div#container-wrap, div#header {

background-image: none;

}

body {

background-image: linear-gradient(to bottom, #b4d5df, #e7feff 200px);
font-size: 93%;
font-family: var(--body-font);
color: var(--font-color);

}

/* Title, Header, and Links */

#page-title {

color: var(--bright-accent);
text-align: center;
margin-top: 50px;
font-family: var(--title-font);
font-weight: bold;

}

h1 {

color: var(--bright-accent);

}

h1,
h2,
h3,
h4,
h5,
h6 {

font-family: var(--header-font);

}

a {

color: var(--bright-accent);
text-decoration: none;
background: transparent;

}

a:visited {

color: var(--dark-accent);
text-decoration: none;
background: transparent;

}

a.newpage {

color: var(--medium-accent);
text-decoration: none;
background: transparent;

}

.interwiki_entry a {

color: var(--bright-accent);

}

/* Top Bar */

#top-bar {

margin-top: 15px;
display: flex;
justify-content: center;
font-family: var(--title-font);

}

#top-bar a {

color: var(--dark-accent);

}

#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {

background: var(--ghost-accent);
color: var(--bright-accent);
transition: background 0.25s linear;

}

#top-bar div.open-menu a {

border: 2px solid var(--dark-accent);
color: var(--dark-accent);
background: var(--ghost-accent);
border-radius: 15%;
box-shadow: inset 0px 0px 2px var(--bright-accent);

}

#side-bar {

background: #cacaca45;
color: var(--font-color);

}

#side-bar .side-block,
#side-bar .side-block.resources,
#side-bar .side-block.media {

border: 2px solid var(--dark-accent);
background: var(--ghost-accent);
border-radius: 0;
box-shadow: inset 0px 0px 4px var(--bright-accent);

}

#side-bar .heading,
#interwiki .heading {

color: var(--dark-accent);
border-color: var(--dark-accent);
font-family: var(--title-font);
font-size: 15px;

}

#side-bar a {

color: var(--bright-accent);

}

/* Search Button */

#search-top-box { top: 25px; transform: translate(1%, -7%); }
#search-top-box-form > input[type=text] { display: none; }

#search-top-box-form input[type=submit] {

border: 2px solid var(--dark-accent);
background: var(--ghost-accent);
color: var(--dark-accent);
font-family: var(--title-font);
font-weight: 900;
box-shadow: none;
margin-bottom: 50px;
box-shadow: inset 0px 0px 2px var(--bright-accent);

}

#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {

border: 2px solid var(--dark-accent);
background: #FFFFFF;
color: var(--bright-accent);
font-family: var(--title-font);
font-weight: 900;
box-shadow: 0px 0px 4px var(--bright-accent);

}

/* Image Block */

.image-block,
.scp-image-block {

border: solid 1.8px var(--dark-accent);
box-shadow: none;
box-shadow: 0px 0px 4px var(--bright-accent);

}

:is(div.image-block, div.scp-image-block) :is(.image-caption, .scp-image-caption) {

color: var(--dark-accent);
border-top: solid 1.8px var(--dark-accent);
font-family: var(--title-font);
background: var(--ghost-accent);

}

.scp-image-block.block-right {

margin: 0 0 1rem 2rem;

}

/* Tables */

#page-content tr th {

color: white;
background-color: var(--dark-accent);
border: solid 2px var(--dark-accent);
font-family: var(--title-font);

}

#page-content tr td {

border: solid 2px var(--dark-accent);
background-color: var(--ghost-accent);

}

/* Horizontal Rule */

hr {

background: var(--dark-accent);
height: 2px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
width: 100%;

}

/* Rating Module */

.page-rate-widget-box,
div.page-rate-widget-box .rate-points {

border-radius: 0;
font-family: var(--title-font);
box-shadow: none;
background-color: var(--dark-accent);
border-color: var(--dark-accent);
padding-top: 1px;
padding-bottom: 1px;

}

.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {

background-color: var(--ghost-accent);
padding-top: 1px;
padding-bottom: 1px;
border-color: var(--dark-accent);

}

.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {

color: var(--dark-accent);

}

.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {

background: var(--ghost-accent);
color: var(--bright-accent);
text-decoration: none;

}

.page-rate-widget-box .cancel a {

color: var(--ghost-accent);

}

.page-rate-widget-box .cancel a:hover {

color: var(--bright-accent);
padding-top: 1px;
padding-bottom: 1px;
background-color: var(--dark-accent);
border-color: var(--dark-accent);

}

.page-rate-widget-box {

margin-right: 0;

}

.page-rate-widget-box .cancel {

border-radius: 0 !important;
padding-top: 1px;
padding-bottom: 1px;
background-color: var(--dark-accent);
border-color: var(--dark-accent);

}

#page-content .rate-box-with-credit-button {

background-color: var(--dark-accent);
border-radius: 0;
border-color: var(--dark-accent);
box-shadow: none;

}

/* Login Status + Account Options */

#login-status {

color: var(--dark-accent);
font-family: var(--title-font);
font-weight: bold;
right: calc(10px + 49.3rem);
top: 20px;
flex-grow: 1;
right: initial;

}

#login-status a {

color: var(--dark-accent);

}

#account-topbutton {

border: 2px solid var(--dark-accent);
border-radius: 5px;
background: var(--ghost-accent) !important;
box-shadow: inset 0px 0px 2px var(--bright-accent);
padding-top: 2px;
padding-bottom: 2px;

}

#account-options {

width: 6.25rem;
background: var(--ghost-accent);
border: none;
border: solid 2px var(--dark-accent);
box-shadow: inset 0px 0px 2px var(--bright-accent);
margin-top: 5px;

}

#account-options ul a {

color: var(--bright-accent);

}

/* Hovertip + Buttons */

.hovertip .content {

border: 1.5px solid var(--dark-accent);
background: var(--ghost-accent);
color: var(--dark-accent);
font-family: var(--title-font);
font-weight: 900;
box-shadow: inset 0px 0px 2px var(--bright-accent);

}

.buttons .btn {

border: 2px solid var(--dark-accent);
background: var(--ghost-accent);
color: var(--dark-accent);
box-shadow: inset 0px 0px 2px var(--bright-accent);
font-family: var(--title-font);
font-weight: 900;
padding: 2px 5px 2px 5px;

}

/* Table of Contents */

#toc {

border: 2px solid var(--dark-accent);
background: var(--ghost-accent);
color: var(--dark-accent);
box-shadow: inset 0px 0px 2px var(--bright-accent);
font-family: var(--title-font);
font-weight: 900;

}

/* Footnotes */

.footnotes-footer .title {

font-family: var(--title-font);
color: var(--dark-accent);
text-transform: uppercase !important;
font-size: 20px;
text-align: center;
padding-bottom: 10px;
margin-bottom: 10px;

}

.footnotes-footer {

border-left: solid 3px var(--dark-accent);
border-right: solid 3px var(--dark-accent);
background: var(--ghost-accent);
box-shadow: 0px 0px 2px var(--bright-accent);
margin: 10px;
margin-bottom: 20px;
padding: 10px;

}

/* Footer + License Area */

#footer {

background: transparent;
color: var(--dark-accent);

}

#footer a {

color: var(--bright-accent);

}

#license-area {

color: var(--dark-accent);
background: var(--ghost-accent);
border-top: solid 2px var(--dark-accent);
margin-top: 10px;

}

#license-area a {

color: var(--bright-accent);

}

#license-area a::after {

content: ".";

}

/* Tabs Code from Foxtrot Theme */

.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(--dark-accent);
box-shadow: none;

}

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {

color: var(--dark-accent);
background-color: var(--ghost-accent);
border: solid 1px var(--dark-accent);
box-shadow: none;
box-shadow: none;

}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {

background-color: var(--dark-accent);
color: var(--bright-accent);

}

.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {

position: relative;
display: flex;
flex-grow: 2;
max-width: 100%;
margin: 0;
padding: 0;
color: var(--ghost-accent);
background-color: var(--ghost-accent);
border-color: transparent;
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,
.yui-navset .yui-navset-top .yui-nav .selected {

flex-grow: 2;
margin: 0;
padding: 0;
background-color: var(--dark-accent);

}

.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(--ghost-accent);

}

.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {

color: var(--ghost-accent);
background-color: var(--dark-accent);

}

.yui-navset .yui-content {

background-color: var(--ghost-accent);
box-shadow: none;

}

.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {

padding: .5em;
border: 1px solid var(--dark-accent);
box-sizing: border-box;

}

.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;

}

/* Collapsible Code from Penumbra BHL Theme and DJK Component */

#page-content .info-container .collapsible-block-folded,
#page-content .info-container .collapsible-block-unfolded-link {

width: 100%;
max-width: 100%;
margin: 0 auto;
box-shadow: none;
background: var(--dark-accent);

}

#page-content .info-container .collapsible-block-link {

padding: 0;

}

#page-content .info-container .collapsible-block-link::before,
#page-content .info-container .collapsible-block-unfolded-link::before {

content: " ";
display: none;

}

#page-content .info-container .collapsible-block-content::after {

display: none;

}

#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {

background: transparent;
transition: background 0.25s linear;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
overflow: hidden;
margin: auto;
box-sizing: border-box;

}

#page-content .collapsible-block-folded .collapsible-block-link::before {

content: "▷ ";

}

#page-content .collapsible-block-unfolded .collapsible-block-link::before {

content: "▽ ";

}

#page-content .collapsible-block-link {

display: inline-block;
padding: 0.5rem 1rem;
text-decoration: none;
text-align: center;
color: var(--dark-accent);
font-weight: 700;

}

#page-content .collapsible-block-link:hover {

color: var(--ghost-accent);

}

#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-unfolded-link:hover {

background: var(--bright-accent);
color: var(--ghost-accent);

}

#page-content .collapsible-block-unfolded-link {

box-shadow: 0rem -0.26rem 0rem 0rem var(--bright-accent);

}

#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {

margin: 0;

}

/* Mobile Adjustments */

@media only screen and (max-width: 600px) {

#header h1 a::before {

font-size: 1em;

}

#login-status {

left: 40px;

}

#my-account {

display: none;

}

}

/* Info Bar */

.info-container {

--barColour: var(--dark-accent);
--linkColour: #FFF;

}

/* Divs */

:is(blockquote, div.blockquote, [class*="blockquote"]) {

background-color: var(--ghost-accent);
border: solid 2px var(--dark-accent);
box-shadow: inset 0px 0px 2px var(--bright-accent);

}

.onesideblock {

margin: auto;
background: var(--ghost-accent);
border-left: solid 5px var(--dark-accent);
margin-bottom: 5px;
margin-top: 5px;
padding-right: 15px;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
box-shadow: 0px 0px 2px var(--bright-accent);

}

.twosideblock {

margin-left: auto;
margin-right: auto;
background: var(--ghost-accent);
border-left: solid 2.5px var(--dark-accent);
border-right: solid 2.5px var(--dark-accent);
margin-bottom: 7px;
padding-right: 15px;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
box-shadow: 0px 0px 2px var(--bright-accent);

}

css



/* Dark Mode */

:root {

--bright-accent: #87ceeb;
--medium-accent: #00bfff;
--dark-accent: #abcdef;
--ghost-accent: #cacaca45;

--dark-rate-color: #000060;

--font-color: #f8f8ff;

}

div#extra-div-1 {

opacity: 25%;

}

body {

background-color: #0047ab;
background-image: linear-gradient(180deg, #0047ab 0%, #483d8bA4 80%, #0038a8 100%), url(https://scp-wiki.wdfiles.com/local--files/theme%3Aclock-tower/color-bg.png), linear-gradient(to right, #63D8FF, #63D8FF);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;

}

.hovertip .content {

background: #000060;
color: var(--bright-accent);

}

.buttons .btn {

background: #000060;
color: var(--bright-accent);

}

.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {

background-color: #ffffff;

}

.page-rate-widget-box .cancel a {

color: #ffffff;

}

.page-rate-widget-box,
div.page-rate-widget-box .rate-points {

background-color: var(--dark-rate-color);
border-color: var(--dark-rate-color);

}

.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {

border-color: var(--dark-rate-color);

}

.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {

color: var(--dark-rate-color);

}

.page-rate-widget-box .cancel a:hover {

background-color: var(--dark-rate-color);
border-color: var(--dark-rate-color);

}

.page-rate-widget-box .cancel {

background-color: var(--dark-rate-color);
border-color: var(--dark-rate-color);

}

#page-content .rate-box-with-credit-button {

background-color: var(--dark-rate-color);
border-color: var(--dark-rate-color);

}

#page-content .modalbox {

background: #000060;
border-color: var(--bright-accent);

}

#page-content .collapsible-block-link:hover,
#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-unfolded-link:hover {

color: #ffffff;

}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {

background-color: var(--ghost-accent);
color: #ffffff;

}

.yui-navset .yui-navset-top .yui-nav .selected em,
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {

color: #ffffff;

}

#top-bar div.open-menu a,
#search-top-box-form input[type=submit],
#account-topbutton,
#account-options,
.hovertip .content,
.buttons .btn,
#side-bar .side-block,
#side-bar .side-block.resources,
#side-bar .side-block.media,
.footnotes-footer,
#toc,
.image-block,
.scp-image-block,
:is(blockquote, div.blockquote, [class*="blockquote"]),
.onesideblock,
.twosideblock {

box-shadow: none;

}

#lock-info,
.owindow {

background-color: #000060;
border-color: var(--bright-accent);

}

css



/* Alternate Rating Module */

.page-rate-widget-box,
div.page-rate-widget-box .rate-points {

color: var(--dark-accent);
border-radius: 0;
font-family: var(--title-font);
box-shadow: none;
background-color: var(--ghost-accent);
border-color: var(--dark-accent);
border-width: 2px;
padding-top: 1px;
padding-bottom: 1px;

}

.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {

background-color: var(--ghost-accent);
padding-top: 1px;
padding-bottom: 1px;
border-color: var(--dark-accent);
border-width: 2px;

}

.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {

color: var(--dark-accent);

}

.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {

background: var(--ghost-accent);
color: var(--bright-accent);
text-decoration: none;

}

.page-rate-widget-box .cancel a {

color: var(--bright-accent);
border-color: var(--dark-accent);
border-width: 2px;

}

.page-rate-widget-box .cancel a:hover {

color: var(--bright-accent);
padding-top: 1px;
padding-bottom: 1px;
background-color: var(--ghost-accent);
border-color: var(--dark-accent);
border-width: 2px;

}

.page-rate-widget-box {

margin-right: 0;

}

.page-rate-widget-box .cancel {

border-radius: 0 !important;
padding-top: 1px;
padding-bottom: 1px;
background-color: var(--ghost-accent);
border-color: var(--dark-accent);
border-width: 2px;

}

#page-content .rate-box-with-credit-button {

background-color: var(--ghost-accent);
border: solid 2px var(--dark-accent);
border-radius: 0;
box-shadow: none;

}

#page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points,
#page-content .rate-box-with-credit-button .page-rate-widget-box .rateup,
#page-content .rate-box-with-credit-button .page-rate-widget-box .ratedown,
#page-content .rate-box-with-credit-button .page-rate-widget-box .cancel {

border: none;

}

css



/* Logo Animation */

div#extra-div-1 {

animation: intro, spin cubic-bezier(1,1,1,1);
animation-duration: 1s, .5s;
animation-delay: 0s, 1s;

}

@keyframes intro {

from { scale: .1; }
to { scale: 1; }

}

@keyframes spin {

100% { transform: rotate(360deg); }

}

Footnotes

1.测试

版式

页面版本：⁨0⁩, 最后编辑于: ⁨2025/8/6 13:10:51⁩ (⁨⁨406⁩ 日前⁩), 现时评分: 13

历史附件 + 选项

SCP基金会中文分部