褶皱风格版式
在任意wiki上通过下列代码使用：
[[include :scp-wiki-cn:theme:frownstyle]]
这是什么？
褶皱风格是MisterFrown设计的一个艺术版式，主要基于空白风格，狐步舞和Navlastyle。它的设计带有一种未来主义的风格，并且整体而言非常非常忧郁。
这个版式配有多种可选的设定，包括暗色模式，一个居中时视觉效果更好的替代用评分模块，以及一个简短的标题标志的载入动画。更多关于如何采用这些配置的方法如下：
示例
图片模块。
标题1
标题2
标题3
标题4
标题5
标题6
| 测试 | 测试 |
|---|---|
| 这是 | 一个表格 |
| 说实话 | 我 |
| 不怎么 | 使用 |
这是一个引用方块。
嵌套的引用方块
[[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=--]
]]
源代码：
/* 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); }
/* 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); }
/* 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; }
/* 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. 测试