CSS主题制作工具

开始你的梦中南柯C S S之旅......

用这东西你就能够弄出简单的CSS主题了。如果你想要学习更多的维基语法魔术，可以看看以下的文章：

advanced-formatting-and-you
— 由 DrMagnus 撰写
scp-style-resource
— 由 Shaggydredlocks 撰写
listpages-magic-and-you
— 由 Croquembouche 和 Rounderhouse 撰写
wiki-syntax
— 由 ghostchibi 撰写

著作信息

CSS主题制作工具

作者：7happy7

特别鸣谢（以字母顺序排列）：Boyu12, C-take, Dr Devan, Etinjat, MrPines, Nanimono Demonai, physicslike, Sekai_s, shu_yabiyabi, Zyn

列表暂不可用： 此 ListPages 查询尚未由只读迁移站支持。

[[iftags]]====

CSS主题制作工具

“我想要找到的选项在哪里？”

提示1：text-shadow 文字阴影

提示2：box-shadow 边框阴影

提示3：border 边缘

提示4：Interwiki filter 跨维基滤镜

CSS主题制作工具

如何使用？关闭

如何使用？

[[div class="scp-image-block block-right" style="width:280px
;"]]
[[image htu1.png
link=#]]

(1) 输入数值

[[/div]]

[[div class="scp-image-block block-right" style="width:300px
;"]]
[[image htu2.png
link=#]]

(2) 点击 重新载入

[[/div]]

[[div class="scp-image-block block-right" style="width:300px
;"]]
[[image htu3.png
link=#]]

(3) 点击复制

[[/div]][[div class="scp-image-block block-right" style="width:300px
;"]]
[[image htu4.png
link=#]]

(4) …然后粘贴！

[[/div]]

你在寻找更多资讯吗？去看看 “
我想要找到的选项在哪里？”！

模块暂不可用： 此动态功能尚未由只读迁移站支持。

请先登入Wikidot…

这个工具是为那些想要为自己页面更改主题的人而设的。你想要试试吗？那就让我们立即开始吧！

Table of Contents

选择你想要使用的颜色。
将页面版头标题从 “SCP基金会” 改变
将页面版头副标题从 “控制，收容，保护” 改变
将页面版头标志从　改变
将页面版头背景从　改变
改变链接颜色
改变字体颜色
改变标准背景颜色
改变内容标题颜色
改变标准字体
改变内容标题的字体
改变侧边栏颜色
改变侧边栏标题颜色
改变移动端侧边栏按钮颜色
改变 tab 背景颜色
改变 tab 选择器颜色
改变跨维基颜色
改变评分模块颜色

回到目录

选择你想要使用的颜色。

» 颜色选择器与例子

"颜色选择器与例子" 可以为你准备自定颜色。
请跟从下列步骤：

[[div class="scp-image-block block-right" style="width:300px
;"]]
[[image color1.png
link=#]]

(1) “这是我想要的颜色！”

[[div class="scp-image-block block-right" style="width:400px
;"]]
[[image color2.png
link=#]]

(2) 点击 重新载入

[[/div]]

[[div class="scp-image-block block-right" style="width:400px
;"]]
[[image color3.png
link=#]]

(3) 点选列表上的 以选择器数值取代

[[/div]]
[[/div]]

回到目录

将页面版头标题从 “SCP基金会” 改变

» 版头 » 伪标题 » 标题 (div#header h1 a:before)

备注： 当此栏未被填写，“颜色” 和 “字体阴影” 栏将不会起作用。

回到目录

将页面版头副标题从 “控制，收容，保护” 改变

» 版头 » 伪标题 » 副标题 (div#header h2 span:before)

备注： 当此栏未被填写时，“颜色” 和 “字体阴影” 栏将不会起作用。

回到目录

将页面版头标志从　改变

» 版头 » 标志 (div#header)

回到目录

将页面版头背景从　改变

» 版头 » div#container-wrap

回到目录

改变链接颜色

» 一般选项 » 链接颜色

回到目录

改变字体颜色

» 一般选项 » 内容 » 字体颜色

回到目录

改变标准背景颜色

» 一般选项 » 内容 » 背景

回到目录

改变内容标题颜色

» 一般选项 » 内容标题 » 颜色

备注： 你可以选择 “只对 h1 有效” 或 “对所有内容标题有效”（h1, h2, h3, h4, h5, h6）。

回到目录

改变标准字体

: » 一般选项 » 字体 » @import （谷歌字体）
: » 一般选项 » 内容 » 字体

备注：“1.” 到 “3.” 因谷歌字体在大陆被墙而禁用。

+ open block- hide block

1. 去 https://fonts.google.com/。

2. 选择想用的字体。

[[div class="scp-image-block block-right" style="width:300px
;"]]
[[image font1.png
link=#]]

选择想用的字体

[[/div]]

3. 复制 "@import url('‘`https://``fonts.googleapis.com/css?family=XXXXX’);" 并粘贴至 "α".

[[div class="scp-image-block block-right" style="width:300px
;"]]
[[image font2.png
link=#]]

不要复制 “<style>” 和 “</style>”

[[/div]]

4. 复制 "'<你的字体>', <字体关键词>1" 至 "β".

[[div class="scp-image-block block-right" style="width:300px
;"]]
[[image font3.png
link=#]]

不要复制 "font-family:" 和 ";"

[[/div]]

回到目录

改变内容标题的字体

» 一般选项 » 字体 » @import (谷歌字体)
» 一般选项 » 内容标题元素 » 字体

备注： 请浏览 “改变标准字体” (4.)。

回到目录

改变侧边栏颜色

» 侧边栏 » div.side-block » 背景

回到目录

改变侧边栏标题颜色

» 侧边栏 » div.side-block » 颜色 (div.side-block div.heading)

回到目录

改变移动端侧边栏按钮颜色

» 侧边栏 » open-menu（打开列表） » 颜色

回到目录

改变 tab 背景颜色

» tab » div.yui-content » 背景

回到目录

改变 tab 选择器颜色

» tab » 普通选择器
» tab » 悬浮选择器
» tab » 已选选择器

[[div class="scp-image-block block-right" style="width:300px
;"]]
[[image tab1.png
link=#]]

已选/悬浮/普通选择器

[[/div]]

回到目录

改变跨维基颜色

» 跨维基 » div.scpnet-interwiki-wrapper » 滤镜

备注： 更多资讯请参见 " 提示4：Interwiki filter 跨维基滤镜"。

回到目录

改变评分模块颜色

» 评分模块 » 背景
» 评分模块 » 颜色

α. : » 一般选项 » 字体 » @import (Google font)

β. : » 一般选项 » 内容 » font-family

[[embed]]
<iframe src="/local—code/css-theme-preparation-tool/4" style="width: 100%; height: 200px; border: none;"></iframe>
[[/embed]]

H	S	V
355deg	100%	73%
色调偏移度	饱和度	/
0deg	0%	100%
/	/	亮度
…
…
滤镜：	hue-rotate(0deg) saturate(100%) —

[[div class="scp-image-block block-left

" style="width:300px;"]]
[[image interwiki1.png

link=#]]

"如何更改跨维基板块颜色？"

[[/div]]

a

备注1： 使用上面的工具只能计算出大概数值。
备注2： 如果侧边栏 side-block 的颜色并非单色（#ffffff, #DCDCDC 等等），那么这个方法的效果并不会如同 “第三定律版式” （#E2E4E7）那样好。
备注3： 色调偏移度(-70deg) = 色调偏移度(290deg)

基本的例子

[[include :smlt:7happy7:sample-int |class=none
|link=默认主题 (Sigma-9)

由 Aelanna 制作

|hex=#bb0011|h=355|s=100|v=73

|bg=false|h2=0|s2=0|v2=100

|style=

]]

WikiJump include 未展开： 跨站引用未启用（:smlt:7happy7:sample-int）

[[include :smlt:7happy7:sample-int |class=spc

|link=SPC 主题版式

由 PeppersGhost 制作

|hex=#0c499c|h=214|s=92|v=61

|bg=false|h2=0|s2=0|v2=100

|style=

]]

WikiJump include 未展开： 跨站引用未启用（:smlt:7happy7:sample-int）

例外

终结的方式版式由 djkaktus 制作
	颜色代码	H	S	V
链接	~~#e80e0e~~	~~0deg~~	~~93%~~	~~90%~~
链接	~~#e80e0e~~	---5deg—	~~93%~~	/
侧边栏背景	~~#161616~~	~~0deg~~	0%	8%
侧边栏背景	~~#161616~~	/	/	8%
侧边栏样本
跨维基样本 Esperanto tlhIngan Hol Na'vi Qenya
滤镜：	反转效果(92%)4 色调偏移(189deg)5 饱和度(1200%)

IJAMEA 版式主题由 Dr Solo 制作
	颜色代码	H	S	V
链接	#000000	0deg	0%	0%
链接	#000000	/	/	/
侧边栏背景	#FFFFFF	0deg	0%	100%
侧边栏背景	#FFFFFF	/	/	/
侧边栏样本
跨维基样本 Esperanto tlhIngan Hol Na'vi Qenya
滤镜：	灰阶(100%) 整体阴影(0 1px 1px #000000)

a

[[note]]
检视原始码
[[/note]]

Footnote

1.sans-serif, serif, cursive, fantasy, monospace…

2.1px, 1em… （1像素，1點數等等）

3.red, green… （红色，绿色等等）

4.100% - 8% = 92%

5.-5deg - (180deg * 0.92)_[invert] + 360deg = 189.4 ≒ 189deg

====

原始码

[[note]]
回到工具页
[[/note]]

html

<!-- 7happy7
license: CC BY-SA 3.0
-->
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/i18n/jquery.spectrum-en.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
    <link rel="stylesheet" type="text/css" href="/local--code/css-theme-preparation-tool/2">
    <link rel="stylesheet" type="text/css" href="/local--code/css-theme-preparation-tool/3">
    <link rel="stylesheet" type="text/css" href="http://scp-jp.wdfiles.com/local--theme/scp-sigma-9-off-canvas/style.css">
    <style id="input-style"></style>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
</head>

<body>
<div id="tool-content">

<button onclick="window.location.reload(false)" type="button"><span class="fa fa-retweet"></span> 重新载入工具</button>

<form id="pickCover" style="width: 100%; text-align: center;">
<h1>颜色选择器与例子</h1>

<input type="text" id="picker"><button id="lButton" type="button" style="margin-left: 0.2em;"><span class="fa fa-retweet"></span> 重新载入</button><br>
<input type="text" id="cKey" onkeyup="getValue();" value="rgba(200, 100, 50, 0.5)" style="margin-top: 0.5em;"><br>
<div id="cView" style="border: 2px solid #333333; background-color: #ffffff; height: 3em; margin: 1em; padding-top: 1.5em; text-align: center;"><i style="padding: 1em; background-color: #ffffff; border: 2px solid #333333;" id="cViewText">斜体 <span style="font-style: normal;"><b>粗体</b> 正常</span></i></div>
</form>

<div class="view-label-wrap-wrap">
<h1>选项</h1>
<span class="view-label-wrap">
<!--generalForm-->
<input type="radio" id="viewGeneral" checked="checked" name="vCheck" onclick="viewGeneral()">
<label for="viewGeneral">一般选项</label>
<!--headerForm-->
<input type="radio" id="viewHeader" name="vCheck" onclick="viewHeader()">
<label for="viewHeader">版头</label>
<!--sidebarForm-->
<input type="radio" id="viewSidebar" name="vCheck" onclick="viewSidebar()">
<label for="viewSidebar">侧边栏</label>
<!--yuiForm-->
<input type="radio" id="viewYui" name="vCheck" onclick="viewYui()">
<label for="viewYui">tab</label>
<!--intForm-->
<input type="radio" id="viewInt" name="vCheck" onclick="viewInt()">
<label for="viewInt">跨维基</label>
<!--rateForm-->
<input type="radio" id="viewRate" name="vCheck" onclick="viewRate()">
<label for="viewRate">评分模块</label>
</span>
</div>

<div id="formWrap">
<form id="generalForm" class="form-block only-view">

<div class="genWrap">
<h1>一般选项</h1><input type="reset" value="&#xf05e; 重设" class="fa">
<ul class="list">
<li><span>:root: 根选项</span><br></li>
<li><textarea id="rootArea" rows="3" placeholder="--themeColor: #aa0;&#13;&#10;--accentColor: #fbfbf0;&#13;&#10;counter-reset: counter 0;"></textarea></li>
<li><span>@keyframes 或 @media:</span><br></li>
<li><textarea id="keyframes" rows="5" placeholder="@keyframes c-change {&#13;&#10;from {color: #b01;}&#13;&#10;to {color: #000;}&#13;&#10;}"></textarea></li>
<li><span>字体：</span><br></li>
<li><span>@import<span> (<a href="https://fonts.google.com/" target="_blank">谷歌字体</a>)</span>：</span>
<textarea id="fontURL" rows="3" placeholder="此功能因谷歌字体在大陆被墙而禁用。" disabled></textarea>

<!-- Note for translator: In EN, site-members are prohibited to use Google Fonts. If your site doesn't prohibit to use it, remove the above text area and replace the following textarea. -->

<!--
<textarea id="fontURL" rows="3" placeholder="@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');"></textarea>
-->

</li>
<li><span>链接颜色：</span></li>
<li><input type="text" id="linkColor" placeholder="#b01"><br><button type="button" name="linkColor"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
</ul>
</div>

<div class="genWrap" style="margin-top: 1em;">
<h2>内容</h2>
<ul class="list">
<li><span>背景：</span></li>
<li><input type="text" id="backGround" placeholder="#ffffff"><br><button type="button" name="backGround"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
<li><span>文字颜色：</span></li>
<li><input type="text" id="txColor" placeholder="#333333"><br><button type="button" name="txColor"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
<li><span>字体：</span></li>
<li><textarea id="fontFamily" rows="2" placeholder="'Nanum Gothic'"></textarea></li>
</ul>

<h2>内容标题元素</h2>
<ul class="list">
<li><span>颜色：</span></li>
<li><span class="label-wrap"><input type="radio" id="hOnly" checked="checked" name="hCheck"><label for="hOnly">只对h1有效</label><input type="radio" id="hAll" name="hCheck"><label for="hAll">对所有内容标题有效</label></span><br><input type="text" id="h1Color" placeholder="#ffffff"><br><button type="button" name="h1Color"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
<li><span>字体<span> (<b>h1, h2, h3, h4, h5, h6</b>)</span>：</span></li>
<li><textarea id="headingFontFamily" rows="2" placeholder="'Nanum Gothic'"></textarea></li>
</ul>

<h2>引用块</h2>
<ul class="list">
<li><span>其他：</span></li>
<li><textarea id="blockquoteValue" rows="4" placeholder="border（边框）: 1px dashed #999;&#13;&#10;background（背景颜色）: #f4f4f4;"></textarea></li>
</ul>
</div>

<span style="width: 100%; display: inline-block;"></span>
</form>

<form id="headerForm" class="form-block others">
<div class="genWrap">
<h1>版头</h1><input type="reset" value="&#xf05e; 重设" class="fa" id="headerReset">
<ul class="list">
<li><span>标志<span> (<b>div#header</b>)</span>：</span></li>
<li><input type="text" id="headerLogo" placeholder="Image URL"><br><span>其他：</span><textarea id="logoValue" rows="3" placeholder="background-position（标志位置）: 1em 4em;&#13;&#10;background-size（标志大小）: 88px 88px;"></textarea></li>
</ul>
<h2>div#container-wrap</h2>
<ul class="list">
<li><span>背景图：</span></li>
<li><input type="text" id="headerBack" placeholder="图片网址"></li>
</ul>
</div>

<div class="genWrap" style="margin-top: 1em;">
<h2>伪标题：</h2>
<ul class="list">
<li><span>标题<span> (<b>div#header h1 a:before</b>)</span>：</span></li>
<li><input type="text" id="headerH1" placeholder="SCP基金会"><br><span>颜色：</span><br><input type="text" id="headerH1Color" placeholder="#eee"><br><button type="button" name="headerH1Color"><span class="fa fa-paste"></span> 以选择器数值取代</button><br><span>text-shadow（文字阴影）：</span><br><input type="text" id="headerH1Shadow" placeholder="3px 3px 5px #000"></li>
<li><span>副标题<span> (<b>div#header h2 span:before</b>)</span>：</span></li>
<li><input type="text" id="headerH2" placeholder="控制，收容，保护"><br><span>颜色：</span><br><input type="text" id="headerH2Color" placeholder="#f0f0c0"><br><button type="button" name="headerH2Color"><span class="fa fa-paste"></span> 以选择器数值取代</button><br><span>text-shadow（文字阴影）：</span><br><input type="text" id="headerH2Shadow" placeholder="1px 1px 1px rgba(0,0,0,.8)"></li>
</ul>
</div>
</form>

<form id="sidebarForm" class="form-block others">
<div class="genWrap">
<h1>侧边栏</h1><input type="reset" value="&#xf05e; 重设" class="fa">
<h2>div.side-block</h2>
<ul class="list">
<li><span>背景颜色：</span></li>
<li><input type="text" id="sideBackGround" placeholder="#ffffff"><br><button type="button" name="sideBackGround"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
<li><span>边框：</span></li>
<li><input type="text" id="sideBorder" placeholder="1px solid #333333"></li>
<li><span>box-shadow（边框阴影）：</span></li>
<li><input type="text" id="sideShadow" placeholder="0 2px 6px rgba(102,0,0,0.5)"></li>
<li><span>其他：</span></li>
<li><textarea id="sideValue" rows="2" placeholder="border-radius: 5px;"></textarea></li>
<li><span>文字颜色<span> (<b>div.side-block div.heading</b>)</span>：</span></li>
<li><input type="text" id="sideHeadColor" placeholder="#660000"><br><button type="button" name="sideHeadColor"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
</ul>
<h2>open-menu（打开列表）</h2>
<ul class="list">
<li><span>文字颜色：</span></li>
<li><input type="text" id="openMenuColor" placeholder="#888888"><br><button type="button" name="openMenuColor"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
</ul>
</div>
</form>

<form id="yuiForm" class="form-block others">
<div class="genWrap">
<h1>tab</h1><input type="reset" value="&#xf05e; 重设" class="fa">
<h2>div.yui-content</h2>
<ul class="list">
<li><span>内容背景颜色：</span></li>
<li><input type="text" id="yuiContentBackGround" placeholder="#f5f5f5"><br><button type="button" name="yuiContentBackGround"><span class="fa fa-paste"></span>以选择器数值取代</button></li>
</ul>

<h2>普通选择器</h2>
<ul class="list">
<li><span>背景颜色：</span></li>
<li><input type="text" id="yuiSelectorNormalBg" placeholder="#d8d8d8"><br><button type="button" name="yuiSelectorNormalBg"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
<li><span>文字颜色：</span></li>
<li><input type="text" id="yuiSelectorNormalColor" placeholder="#000000"><br><button type="button" name="yuiSelectorNormalColor"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
<li><span>边框：</span></li>
<li><input type="text" id="yuiSelectorNormalBorder" placeholder="solid #a3a3a3"></li>
</ul>
</div>

<div class="genWrap" style="margin-top: 1em;">
<h2>悬浮选择器：</h2>
<ul class="list">
<li><span>背景颜色：</span></li>
<li><input type="text" id="yuiSelectorHoveredBg" placeholder="#dd8888"><br><button type="button" name="yuiSelectorHoveredBg"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
<li><span>文字颜色：</span></li>
<li><input type="text" id="yuiSelectorHoveredColor" placeholder="#000000"><br><button type="button" name="yuiSelectorHoveredColor"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
</ul>

<h2>已选选择器</h2>
<ul class="list">
<li><span>背景颜色：</span></li>
<li><input type="text" id="yuiSelectorSelectedBg" placeholder="#770000"><br><button type="button" name="yuiSelectorSelectedBg"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
<li><span>文字颜色：</span></li>
<li><input type="text" id="yuiSelectorSelectedColor" placeholder="#ffffff"><br><button type="button" name="yuiSelectorSelectedColor"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
<li><span>边框：</span></li>
<li><input type="text" id="yuiSelectorSelectedBorder" placeholder="solid #243356"></li>
</ul>
</div>
</form>

<div id="intForm" class="form-block others">
<div class="genWrap">
<h1>跨维基</h1>
<h2>div.scpnet-interwiki-wrapper</h2>
<ul class="list">
<li><span>滤镜：</span></li>
<li>
<span>色调偏移<span> [<b>0 - 360</b>]</span>：</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intHueRotate">deg</form><br>
<span>饱和度：</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intSaturate" min="0">%</form><br>
<span>亮度：</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intBrightness" min="0">%</form><br>
<span>对比度：</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intContrast" min="0">%</form><br>
<span>灰阶<span> [<b>0 - 100</b>]</span>：</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intGrayscale" min="0" max="100">%</form><br>
<span>怀旧效果<span> [<b>0 - 100</b>]</span>：</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intSepia" min="0" max="100">%</form><br>
<span>反转效果<span> [<b>0 - 100</b>]</span>：</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intInvert" min="0" max="100">%</form><br>
<span>模糊效果：</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intBlur" min="0">px</form><br>
<span>透明度<span> [<b>0 - 100</b>]</span>：</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intOpacity" min="0" max="100">%</form><br>
<span>整体阴影：</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="text" id="intDropShadow" placeholder="0 2px 6px rgba(0,0,0,0.5)"></form>
</li>
</ul>
</div>
</div>

<form id="rateForm" class="form-block others">
<div class="genWrap">
<h1>评分模块</h1><input type="reset" value="&#xf05e; 重设" class="fa">

<ul class="list">
<li><span>分数背景颜色：</span></li>
<li><input type="text" id="rateBg" placeholder="#dd8888"><br><button type="button" name="rateBg"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
<li><span>分数文字颜色：</span></li>
<li><input type="text" id="rateColor" placeholder="#000000"><br><button type="button" name="rateColor"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
</ul>

<h2>up/down（+/-）</h2>
<ul class="list">
<li><span>打分选项背景颜色：</span></li>
<li><input type="text" id="rateSwitchBg" placeholder="#dd8888"><br><button type="button" name="rateSwitchBg"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
<li><span>打分选项文字颜色：</span></li>
<li><input type="text" id="rateSwitchColor" placeholder="#000000"><br><button type="button" name="rateSwitchColor"><span class="fa fa-paste"></span> 以选择器数值取代</button></li>
</ul>
</div>
</form>
</div>

<hr style="clear: both;">
<div class="table" id="result-table">
<h1 style="margin: 0.5em;">结果</h1>
<button id="rButton" class="button"><span class="fa fa-retweet"></span> 重新载入</button>
<button id="cButton" class="button"><span class="fa fa-copy"></span> 复制</button><br>
<div id="formOut"></div>
<br>
</div>

<hr style="clear: both;">
<div style="text-align: center;">
<h1>样本区域</h1>
<span class="label-wrap">
<input type="radio" id="sView" name="sCheck" onclick="sView()">
<label for="sView">显示样本</label>
<input type="radio" id="sHide" checked="checked" name="sCheck" onclick="sHide()">
<label for="sHide">隐藏样本</label>
</span>
</div>
<div class="sample" id="sampleArea" style="width: 100%; display: none;">

<h2>如果不能达到预期的效果，上面填写表格时里面可能有写错的地方。</h2>
<div class="side-block"><div class="heading">侧边栏样本</div><div class="menu-item"><image src="http://scp-wiki.wdfiles.com/local--files/nav%3Aside/series.png"><a>系列 V</a><span style="font-size: 80%;color: #666;">(4000-4999)</span></div><div class="menu-item"><image src="http://scp-wiki.wdfiles.com/local--files/nav%3Aside/series.png"><a>系列 IV</a><span style="font-size: 80%;color: #666;">(3000-3999)</span></div><div class="menu-item"><image src="http://scp-wiki.wdfiles.com/local--files/nav%3Aside/series.png"><a>系列 III</a><span style="font-size: 80%;color: #666;">(2000-2999)</span></div><div class="menu-item"><image src="http://scp-wiki.wdfiles.com/local--files/nav%3Aside/series.png"><a>系列 II</a><span style="font-size: 80%;color: #666;">(1000-1999)</span></div><div class="menu-item"><image src="http://scp-wiki.wdfiles.com/local--files/nav%3Aside/series.png"><a>系列 I</a><span style="font-size: 80%;color: #666;">(001-999)</span></div></div>

<div class="scpnet-interwiki-wrapper"><div class="interwiki"><div class="interwiki__title">跨维基样本</div><div class="interwiki__entry"><a>Esperanto</a></div><div class="interwiki__entry"><a>tlhIngan Hol</a></div><div class="interwiki__entry"><a>Na'vi</a></div><div class="interwiki__entry"><a>Qenya</a></div></div></div>

<div class="open-menu"><p><a>≡</a></p></div>

<div class="yui-navset" style="clear: both;"><ul class="yui-nav"><li class="selected"><a><em>tab</em></a></li><li><a><em>样本</em></a></li><li><a id="ios" class="hover"><em>悬浮选择器（iPhone）</em></a></li></ul><div class="yui-content"><div><p>文字 <a>链接</a></p>
<div class="page-rate-widget-box"><span class="rate-points">评分:&nbsp;<span class="number">±0</span></span><span class="rateup btn btn-default"><a>+</a></span><span class="ratedown btn btn-default"><a>–</a></span><span class="cancel btn btn-default"><a>x</a></span></div>
<blockquote><h1 style="font-size: 190%!important;">h1</h1><h2 style="font-size: 150%!important;">h2</h2></blockquote></div></div></div><br>
</div>

</div>

<script type="text/javascript">

jQuery(function($){
  $("#picker").spectrum({
      allowEmpty:true,
      color: "rgba(200, 100, 50, 0.5)",
      showInput: true,
      containerClassName: "full-spectrum",
      showInitial: true,
      showPalette: true,
      showSelectionPalette: true,
      showAlpha: true,
      maxPaletteSize: 10,
      preferredFormat: "hex",
      localStorageKey: "spectrum.demo",
      move: function (color) {
      },
      show: function () {
      },
      beforeShow: function () {
      },
      hide: function (color) {
      },
      palette: [
          ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", 
          "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
          ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
          "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
          ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
          "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
          "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
          "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
          "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
          "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
          "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
          "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
          "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
          "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
      ]
  });
});

//view mode
function viewGeneral() {
    document.getElementById("generalForm").classList.remove('others');
    document.getElementById("headerForm").classList.remove('only-view');
    document.getElementById("sidebarForm").classList.remove('only-view');
    document.getElementById("yuiForm").classList.remove('only-view');
    document.getElementById("intForm").classList.remove('only-view');
    document.getElementById("rateForm").classList.remove('only-view');

    document.getElementById("generalForm").classList.add('only-view');
    document.getElementById("headerForm").classList.add('others');
    document.getElementById("sidebarForm").classList.add('others');
    document.getElementById("yuiForm").classList.add('others');
    document.getElementById("intForm").classList.add('others');
    document.getElementById("rateForm").classList.add('others');
}
function viewHeader() {
    document.getElementById("generalForm").classList.remove('only-view');
    document.getElementById("headerForm").classList.remove('others');
    document.getElementById("sidebarForm").classList.remove('only-view');
    document.getElementById("yuiForm").classList.remove('only-view');
    document.getElementById("intForm").classList.remove('only-view');
    document.getElementById("rateForm").classList.remove('only-view');

    document.getElementById("generalForm").classList.add('others');
    document.getElementById("headerForm").classList.add('only-view');
    document.getElementById("sidebarForm").classList.add('others');
    document.getElementById("yuiForm").classList.add('others');
    document.getElementById("intForm").classList.add('others');
    document.getElementById("rateForm").classList.add('others');
}
function viewSidebar() {
    document.getElementById("generalForm").classList.remove('only-view');
    document.getElementById("headerForm").classList.remove('only-view');
    document.getElementById("sidebarForm").classList.remove('others');
    document.getElementById("yuiForm").classList.remove('only-view');
    document.getElementById("intForm").classList.remove('only-view');
    document.getElementById("rateForm").classList.remove('only-view');

    document.getElementById("generalForm").classList.add('others');
    document.getElementById("headerForm").classList.add('others');
    document.getElementById("sidebarForm").classList.add('only-view');
    document.getElementById("yuiForm").classList.add('others');
    document.getElementById("intForm").classList.add('others');
    document.getElementById("rateForm").classList.add('others');
}
function viewYui() {
    document.getElementById("generalForm").classList.remove('only-view');
    document.getElementById("headerForm").classList.remove('only-view');
    document.getElementById("sidebarForm").classList.remove('only-view');
    document.getElementById("yuiForm").classList.remove('others');
    document.getElementById("intForm").classList.remove('only-view');
    document.getElementById("rateForm").classList.remove('only-view');

    document.getElementById("generalForm").classList.add('others');
    document.getElementById("headerForm").classList.add('others');
    document.getElementById("sidebarForm").classList.add('others');
    document.getElementById("yuiForm").classList.add('only-view');
    document.getElementById("intForm").classList.add('others');
    document.getElementById("rateForm").classList.add('others');
}
function viewInt() {
    document.getElementById("generalForm").classList.remove('only-view');
    document.getElementById("headerForm").classList.remove('only-view');
    document.getElementById("sidebarForm").classList.remove('only-view');
    document.getElementById("yuiForm").classList.remove('only-view');
    document.getElementById("intForm").classList.remove('others');
    document.getElementById("rateForm").classList.remove('only-view');

    document.getElementById("generalForm").classList.add('others');
    document.getElementById("headerForm").classList.add('others');
    document.getElementById("sidebarForm").classList.add('others');
    document.getElementById("yuiForm").classList.add('others');
    document.getElementById("intForm").classList.add('only-view');
    document.getElementById("rateForm").classList.add('others');
}
function viewRate() {
    document.getElementById("generalForm").classList.remove('only-view');
    document.getElementById("headerForm").classList.remove('only-view');
    document.getElementById("sidebarForm").classList.remove('only-view');
    document.getElementById("yuiForm").classList.remove('only-view');
    document.getElementById("intForm").classList.remove('only-view');
    document.getElementById("rateForm").classList.remove('others');

    document.getElementById("generalForm").classList.add('others');
    document.getElementById("headerForm").classList.add('others');
    document.getElementById("sidebarForm").classList.add('others');
    document.getElementById("yuiForm").classList.add('others');
    document.getElementById("intForm").classList.add('others');
    document.getElementById("rateForm").classList.add('only-view');
}
function sView() {
    document.getElementById("sampleArea").style.display = 'block';
}
function sHide() {
    document.getElementById("sampleArea").style.display = 'none';
}

$(function(){

//sample display for iOS
var ua = window.navigator.userAgent.toLowerCase();
        if (ua.indexOf('iphone') !== -1 || ua.indexOf('ipod') !== -1 ) {document.getElementById("ios").style.display='block';};
        if (ua.indexOf('ipad') !== -1) {document.getElementById("ios").style.display='block';};

//color
function colorSampleTag(tag) {
  var elm = document.getElementsByTagName(tag);
  for(var i = 0; i < elm.length; i++) {
    var text = elm[i].innerHTML;
    text = text.replace(/((#[0-9a-f]{3})([^0-9a-f]|$))/gi, '<span style="display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:.5em;margin-bottom:.5em;border-left:1px solid #000;border-bottom:1px solid #000;background-color:$2"></span>$1');
    text = text.replace(/(#[0-9a-f]{6})/gi, '<span style="display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:.5em;margin-bottom:.5em;border-left:1px solid #000;border-bottom:1px solid #000;background-color:$1"></span>$1');
    text = text.replace(/(rgb\s*\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\))/gi, '<span style="display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:.5em;margin-bottom:.5em;border-left:1px solid #000;border-bottom:1px solid #000;background-color:$1"></span>$1');
    text = text.replace(/(rgba\s*\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*(1|0)?\.?[0-9]+\s*\))/gi, '<span style="display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:.5em;margin-bottom:.5em;border-left:1px solid #000;border-bottom:1px solid #000;background-color:$1"></span>$1');
    elm[i].innerHTML = text;
  }
}

//color picker
      document.getElementById('cView').style.backgroundColor = 'rgba(200, 100, 50, 0.5)';
      document.getElementById('cViewText').style.color = 'rgba(200, 100, 50, 0.5)';

var cpResult = document.getElementById("cKey");
var lButton = document.getElementById('lButton');
lButton.onclick = function(){
cpResult.value = window.getComputedStyle(document.getElementById("pickCover").getElementsByClassName("sp-preview-inner")[0], '').backgroundColor;

//color sample
  try{
    var cSample = document.getElementById("cKey").value;
    var regex = new RegExp(/(#[a-fA-F0-9]{3}|#[a-fA-F0-9]{6})|(rgb\s*\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\))|(rgba\s*\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*(1|0)?\.?[0-9]+\s*\))/);
    if (regex.test(cSample)){
      document.getElementById('cView').style.backgroundColor = cSample;
      document.getElementById('cViewText').style.color = cSample;
    }else{
      document.getElementById('cView').style.backgroundColor = '#ffffff';
      document.getElementById('cViewText').style.color = '#333333';
    }
  }catch(e){
      document.getElementById('cView').style.backgroundColor = '#ffffff';
      document.getElementById('cViewText').style.color = '#333333';
  }
}
//substitute the value of color picker
document.getElementsByName("linkColor")[0].onclick = function() {
document.getElementById("linkColor").value = document.getElementById("cKey").value;
}
document.getElementsByName("backGround")[0].onclick = function() {
document.getElementById("backGround").value = document.getElementById("cKey").value;
}
document.getElementsByName("txColor")[0].onclick = function() {
document.getElementById("txColor").value = document.getElementById("cKey").value;
}
document.getElementsByName("h1Color")[0].onclick = function() {
document.getElementById("h1Color").value = document.getElementById("cKey").value;
}
document.getElementsByName("headerH1Color")[0].onclick = function() {
document.getElementById("headerH1Color").value = document.getElementById("cKey").value;
}
document.getElementsByName("headerH2Color")[0].onclick = function() {
document.getElementById("headerH2Color").value = document.getElementById("cKey").value;
}
document.getElementsByName("sideBackGround")[0].onclick = function() {
document.getElementById("sideBackGround").value = document.getElementById("cKey").value;
}
document.getElementsByName("sideHeadColor")[0].onclick = function() {
document.getElementById("sideHeadColor").value = document.getElementById("cKey").value;
}
document.getElementsByName("yuiContentBackGround")[0].onclick = function() {
document.getElementById("yuiContentBackGround").value = document.getElementById("cKey").value;
}
document.getElementsByName("yuiSelectorNormalBg")[0].onclick = function() {
document.getElementById("yuiSelectorNormalBg").value = document.getElementById("cKey").value;
}
document.getElementsByName("yuiSelectorNormalColor")[0].onclick = function() {
document.getElementById("yuiSelectorNormalColor").value = document.getElementById("cKey").value;
}
document.getElementsByName("yuiSelectorHoveredBg")[0].onclick = function() {
document.getElementById("yuiSelectorHoveredBg").value = document.getElementById("cKey").value;
}
document.getElementsByName("yuiSelectorHoveredColor")[0].onclick = function() {
document.getElementById("yuiSelectorHoveredColor").value = document.getElementById("cKey").value;
}
document.getElementsByName("yuiSelectorSelectedBg")[0].onclick = function() {
document.getElementById("yuiSelectorSelectedBg").value = document.getElementById("cKey").value;
}
document.getElementsByName("yuiSelectorSelectedColor")[0].onclick = function() {
document.getElementById("yuiSelectorSelectedColor").value = document.getElementById("cKey").value;
}
document.getElementsByName("rateBg")[0].onclick = function() {
document.getElementById("rateBg").value = document.getElementById("cKey").value;
}
document.getElementsByName("rateColor")[0].onclick = function() {
document.getElementById("rateColor").value = document.getElementById("cKey").value;
}
document.getElementsByName("rateSwitchBg")[0].onclick = function() {
document.getElementById("rateSwitchBg").value = document.getElementById("cKey").value;
}
document.getElementsByName("rateSwitchColor")[0].onclick = function() {
document.getElementById("rateSwitchColor").value = document.getElementById("cKey").value;
}
document.getElementsByName("openMenuColor")[0].onclick = function() {
document.getElementById("openMenuColor").value = document.getElementById("cKey").value;
}

//user name -> "Uname"
var UnamePrev = document.location.hash.substr(1);
var Uname = UnamePrev.replace(/%20/g, ' ');

//inner HTML (textarea)
var rButton = document.getElementById('rButton');
formOut = document.getElementById("formOut");
rButton.onclick = function(){

//date -> "year", "month", "day"
var date = new Date();
var year = date.getFullYear();
var monthPre = date.getMonth()+1;
if (monthPre < 10) {var month = "0" + monthPre;}else {var month = monthPre;}
var dayPre = date.getDate();
if (dayPre < 10) {var day = "0" + dayPre;}else {var day = dayPre;}
var hourPre = date.getHours();
if (hourPre < 10) {var hour = "0" + hourPre;}else {var hour = hourPre;}
var minutePre = date.getMinutes();
if (minutePre < 10) {var minute = "0" + minutePre;}else {var minute = minutePre;}
var secondPre = date.getSeconds();
if (secondPre < 10) {var second = "0" + secondPre;}else {var second = secondPre;}

//infoText
infoText = '/*<br>    Powered on ' + year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second + '<br>    [' + year + ' Wikidot Theme]<br>    Created by ' + Uname + '<br>    CC BY-SA 3.0<br>*/<br><br>';

//rootArea
    if (document.getElementById('rootArea').value == "" ) {
        var rootArea = '';
    }
    else {
        if (document.getElementById('rootArea').value.match(/https?:/g)) {
            alert('general options > :root:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('rootArea').value = "";
        }
        else {
            var rootArea = ':root {<br>    ' + document.getElementById('rootArea').value.replace(/\n/g, '\n' + '    ') + '<br>}<br>';
        }
};

//keyframes
    if (document.getElementById('keyframes').value == "" ) {
        var keyframes = '';
    }
    else {
        if (document.getElementById('keyframes').value.match(/https?:/g)) {
            alert('general options > @keyframes or @media:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('keyframes').value = "";
        }
        else {
            var keyframes = '<br>' + document.getElementById('keyframes').value.replace(/\n/g, '\n' + '    ').replace(/    }/g, '}') + '<br><br>';
        }

};

//fontURL
    if (document.getElementById('fontURL').value == "" ) {
        var fontURL = '';
    }
    else {
        var fontURL = document.getElementById('fontURL').value;
};

//bodyAll
    if (document.getElementById('backGround').value == "") {
        backGround = "";
    }
    else {
        if (document.getElementById('backGround').value.match(/https?:/g)) {
            alert('general options > body > background:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('backGround').value = "";
        }
        else {
            backGround = "    background: " + document.getElementById('backGround').value + ";<br>";
        }
    };
    if (document.getElementById('txColor').value == "") {
        txColor = "";
    }
    else {
        txColor = "    color: " + document.getElementById('txColor').value + ";<br>";
    };
    if (document.getElementById('fontFamily').value == "") {
        fontFamily = "";
    }
    else {
        fontFamily = "    font-family: " + document.getElementById('fontFamily').value + ";<br>";
    };

if (document.getElementById('backGround').value == "" && document.getElementById('txColor').value == "" && document.getElementById('fontFamily').value == "") {
    bodyAll = "";
}
else {
    bodyAll = "body {<br>" + backGround + txColor + fontFamily + "}<br>";
};

//linkColor
    if (document.getElementById('linkColor').value == "") {
        var linkColor = '';
    }
    else {
        var linkColor = 'a,a:visited {<br>    color: ' + document.getElementById('linkColor').value + ';<br>}<br>';
};

//h1Color
if (document.getElementById('h1Color').value == "") {
    h1Color = "";
}
else {
    if (document.getElementById("hOnly").checked) {
        h1Color = "h1 {<br>    color: " + document.getElementById('h1Color').value + ";<br>}<br>";
    }
    else {
        if (document.getElementById('headingFontFamily').value == "") {
            h1Color = "h1,h2,h3,h4,h5,h6 {<br>    color: " + document.getElementById('h1Color').value + ";<br>}<br>";
        }else {
            h1Color = "h1,h2,h3,h4,h5,h6 {<br>    color: " + document.getElementById('h1Color').value + ";<br>";
        }
    }
};

//headingFontFamily
if (document.getElementById('headingFontFamily').value == "") {
    headingFontFamily = "";
}
else {
    if (document.getElementById("hAll").checked && !document.getElementById('h1Color').value == "") {
    headingFontFamily = "    font-family: " + document.getElementById('headingFontFamily').value + ";<br>}<br>";
    }else {
    headingFontFamily = "h1,h2,h3,h4,h5,h6 {<br>    font-family: " + document.getElementById('headingFontFamily').value + ";<br>}<br>";
    }
};

//blockquoteValue
    if (document.getElementById('blockquoteValue').value == "" ) {
        var blockquoteValue = '';
    }
    else {
        if (document.getElementById('blockquoteValue').value.match(/https?:/g)) {
            alert('general options > blockquote > others:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('blockquoteValue').value = "";
        }
        else {
            var blockquoteValue = 'blockquote {<br>    ' + document.getElementById('blockquoteValue').value.replace(/\n/g, '\n' + '    ') + '<br>}<br>';
        }
};

//headerH1
var headerH1Prev = document.getElementById('headerH1').value;
    if (headerH1Prev == "" ) {
        var headerH1 = '';
    }
    else {
        var headerH1ColorPrev = document.getElementById('headerH1Color').value;
            if (headerH1ColorPrev == "" ) {
                var headerH1Color = '#eee';
            }
            else {
                var headerH1Color = headerH1ColorPrev;
            }
        var headerH1ShadowPrev = document.getElementById('headerH1Shadow').value;
            if (headerH1ShadowPrev == "" ) {
                var headerH1Shadow = '';
            }
            else {
                var headerH1Shadow = 'text-shadow: ' + headerH1ShadowPrev + ';';
            }
        var headerH1 = 'div#header h1 a span {<br>    font-size: 0px;<br>}<br>div#header h1 a:before {<br>    content: "' + headerH1Prev + '";<br>    color: ' + headerH1Color + ';<br>    ' + headerH1Shadow + '<br>}<br>'
    };

//headerH2
var headerH2Prev = document.getElementById('headerH2').value;
    if (headerH2Prev == "" ) {
        var headerH2 = '';
    }
    else {
        var headerH2ColorPrev = document.getElementById('headerH2Color').value;
            if (headerH2ColorPrev == "" ) {
                var headerH2Color = '#f0f0c0';
            }
            else {
                var headerH2Color = headerH2ColorPrev;
            }
        headerH2ShadowPrev = document.getElementById('headerH2Shadow').value;
            if (headerH2ShadowPrev == "" ) {
                var headerH2Shadow = '1px 1px 1px rgba(0, 0, 0, .8)';
            }
            else {
                var headerH2Shadow = headerH2ShadowPrev;
            }

        var headerH2 = 'div#header h2 span {<br>    font-size:0px;<br>    padding: 4px;<br>}<br>div#header h2:after {<br>    content: "' + headerH2Prev + '";<br>    font-weight: bold;<br>    color: ' + headerH2Color + ';<br>    padding: 19px 0;<br>    text-shadow: ' + headerH2Shadow + ';<br>    white-space: pre;<br>}<br>'
    };

//headerBack
    if (document.getElementById('headerBack').value == "" ) {
        var headerBack = '';
    }
    else {
        if (document.getElementById('headerBack').value.match(/https?:/g)) {
            alert('header > div#container-wrap > background:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('headerBack').value = "";
        }
        else {
            var headerBack = 'div#container-wrap {<br>    background: url(' + document.getElementById('headerBack').value + ') top left repeat-x;<br>}<br>';
        }
    };

//logoAll
//headerLogo
    if (document.getElementById('headerLogo').value == "" ) {
        var headerLogo = '';
    }
    else {
        if (document.getElementById('headerLogo').value.match(/https?:/g)) {
            alert('header > logo (div#header):\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('headerLogo').value = "";
        }
        else {
        var headerLogo = '    background: url(' + document.getElementById('headerLogo').value + ') 10px 40px no-repeat;<br>';
        }
    };

//logoValue
    if (document.getElementById('logoValue').value == "" ) {
        var logoValue = '';
    }
    else {
        if (document.getElementById('logoValue').value.match(/https?:/g)) {
            alert('header > others:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('logoValue').value = "";
        }
        else {
            var logoValue = '    ' + document.getElementById('logoValue').value.replace(/\n/g, '\n' + '    ') + '<br>';
        }
};

if (document.getElementById('headerLogo').value == "" && document.getElementById('logoValue').value == "") {
    logoAll = "";
}
else {
    logoAll = 'div#header {<br>' + headerLogo + logoValue + '}<br>'
};

//sideAll
//sideBackGround
    if (document.getElementById('sideBackGround').value == "" ) {
        var sideBackGround = '';
    }
    else {
        if (document.getElementById('sideBackGround').value.match(/https?:/g)) {
            alert('sidebar > div.side-block > background:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('sideBackGround').value = "";
        }
        else {
            var sideBackGround = '    background: ' + document.getElementById('sideBackGround').value + ';<br>';
        }
};

//sideBorder
    if (document.getElementById('sideBorder').value == "" ) {
        var sideBorder = '';
    }
    else {
        var sideBorder = '    border: ' + document.getElementById('sideBorder').value + ';<br>';
};

//sideShadow
    if (document.getElementById('sideShadow').value == "" ) {
        var sideShadow = '';
    }
    else {
        var sideShadow = '    box-shadow: ' + document.getElementById('sideShadow').value + ';<br>';
};

//sideValue
    if (document.getElementById('sideValue').value == "" ) {
        var sideValue = '';
    }
    else {
        if (document.getElementById('sideValue').value.match(/https?:/g)) {
            alert('sidebar > div.side-block > others:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('sideValue').value = "";
        }
        else {
            var sideValue = '    ' + document.getElementById('sideValue').value.replace(/\n/g, '\n' + '    ') + '<br>';
        }
};

if (document.getElementById('sideBackGround').value == "" && document.getElementById('sideBorder').value == "" && document.getElementById('sideShadow').value == "" && document.getElementById('sideValue').value == "") {
    sideAll = "";
}
else {
    sideAll = 'div#side-bar div.side-block {<br>' + sideBackGround + sideBorder + sideShadow + sideValue + '}<br>'
};

//sideHeadColor
    if (document.getElementById('sideHeadColor').value == "") {
        var sideHeadColor = '';
    }
    else {
        var sideHeadColor = 'div#side-bar div.side-block div.heading,<br>div#side-bar div.collapsible-block-unfolded-link,<br>div#side-bar div.collapsible-block-unfolded-link div.collapsible-block-link {<br>    color: ' + document.getElementById('sideHeadColor').value + ';<br>    border-color: ' + document.getElementById('sideHeadColor').value + ';<br>}<br>';
};

//openMenuColor
    if (document.getElementById('openMenuColor').value == "") {
        var openMenuColor = '';
    }
    else {
        var openMenuColor = 'div.open-menu a {<br>    color: ' + document.getElementById('openMenuColor').value + '!important;<br>    border-color: ' + document.getElementById('openMenuColor').value + '!important;<br>}<br>';
};

//rateAll
    if (document.getElementById('rateBg').value == "") {
        rateBg = "";
    }
    else {
        if (document.getElementById('rateBg').value.match(/https?:/g)) {
            alert('Rate module > background:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('rateBg').value = "";
        }
        else {
            rateBg = "div.page-rate-widget-box,<br>div.page-rate-widget-box span.rate-points,<br>div.page-rate-widget-box span.cancel {<br>    background-color: " + document.getElementById('rateBg').value + "!important;<br>    border: solid " + document.getElementById('rateBg').value + " 1px!important;<br>}<br>" + "div.page-rate-widget-box span.rateup,<br>div.page-rate-widget-box span.ratedown {<br>    border: solid " + document.getElementById('rateBg').value + "!important;<br>    border-width: 1px 0!important;<br>}<br>";
        }
    };
    if (document.getElementById('rateColor').value == "") {
        rateColor = "";
    }
    else {
        rateColor = "div.page-rate-widget-box span.rate-points,<br>div.page-rate-widget-box span.cancel a,<br>div.page-rate-widget-box span.cancel a:hover {<br>    color: " + document.getElementById('rateColor').value + ";<br>}<br>";
    };
    if (document.getElementById('rateSwitchBg').value == "") {
        rateSwitchBg = "";
    }
    else {
        if (document.getElementById('rateSwitchBg').value.match(/https?:/g)) {
            alert('Rate module > up/down > background:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('rateSwitchBg').value = "";
        }
        else {
            rateSwitchBg = "div.page-rate-widget-box span.rateup,<br>div.page-rate-widget-box span.ratedown {<br>    background-color: " + document.getElementById('rateSwitchBg').value + "!important;<br>}<br>";
        }
    };
    if (document.getElementById('rateSwitchColor').value == "") {
        rateSwitchColor = "";
    }
    else {
        rateSwitchColor = "div.page-rate-widget-box span.rateup a,<br>div.page-rate-widget-box span.ratedown a {<br>    color: " + document.getElementById('rateSwitchColor').value + "!important;<br>}<br>";
    };

if (document.getElementById('rateBg').value == "" && document.getElementById('rateColor').value == "" && document.getElementById('rateSwitchBg').value == "" && document.getElementById('rateSwitchColor').value == "") {
    rateAll = "";
}
else {
    rateAll = rateBg + rateColor + rateSwitchBg + rateSwitchColor + "div.page-rate-widget-box span.cancel a:hover,<br>div.page-rate-widget-box span.rateup a:hover,<br>div.page-rate-widget-box span.ratedown a:hover {<br>    background: transparent!important;<br>    color: transparent!important;<br>}<br>";
};

//intAll
//intHueRotate
    if (document.getElementById('intHueRotate').value == "") {
        intHueRotate = "";
    }
    else {
        intHueRotate = ' hue-rotate(' + document.getElementById('intHueRotate').value + 'deg)';
    };

//intSaturate
    if (document.getElementById('intSaturate').value == "") {
        intSaturate = "";
    }
    else {
        intSaturate = ' saturate(' + document.getElementById('intSaturate').value + '%)';
    };

//intBrightness
    if (document.getElementById('intBrightness').value == "") {
        intBrightness = "";
    }
    else {
        intBrightness = ' brightness(' + document.getElementById('intBrightness').value + '%)';
    };

//intContrast
    if (document.getElementById('intContrast').value == "") {
        intContrast = "";
    }
    else {
        intContrast = ' contrast(' + document.getElementById('intContrast').value + '%)';
    };

//intGrayscale
    if (document.getElementById('intGrayscale').value == "") {
        intGrayscale = "";
    }
    else {
        intGrayscale = ' grayscale(' + document.getElementById('intGrayscale').value + '%)';
    };

//intSepia
    if (document.getElementById('intSepia').value == "") {
        intSepia = "";
    }
    else {
        intSepia = ' sepia(' + document.getElementById('intSepia').value + '%)';
    };

//intInvert
    if (document.getElementById('intInvert').value == "") {
        intInvert = "";
    }
    else {
        intInvert = ' invert(' + document.getElementById('intInvert').value + '%)';
    };

//intBlur
    if (document.getElementById('intBlur').value == "") {
        intBlur = "";
    }
    else {
        intBlur = ' blur(' + document.getElementById('intBlur').value + 'px)';
    };

//intOpacity
    if (document.getElementById('intOpacity').value == "") {
        intOpacity = "";
    }
    else {
        intOpacity = ' opacity(' + document.getElementById('intOpacity').value + '%)';
    };

//intDropShadow
    if (document.getElementById('intDropShadow').value == "") {
        intDropShadow = "";
    }
    else {
        intDropShadow = ' drop-shadow(' + document.getElementById('intDropShadow').value + '%)';
    };

//intAll result
if (document.getElementById('intHueRotate').value == "" && document.getElementById('intSaturate').value == "" && document.getElementById('intBrightness').value == "" && document.getElementById('intContrast').value == "" && document.getElementById('intGrayscale').value == "" && document.getElementById('intSepia').value == "" && document.getElementById('intInvert').value == "" && document.getElementById('intBlur').value == "" && document.getElementById('intOpacity').value == "" && document.getElementById('intDropShadow').value == "") {
    intAll = "";
}
else {
    intAll = 'div.scpnet-interwiki-wrapper {<br>    filter:' + intHueRotate + intSaturate + intBrightness + intContrast + intGrayscale + intSepia + intInvert + intBlur + intOpacity + intDropShadow + ';<br>}<br>';
};

//yuiTab
//yuiContentBackGround
if (document.getElementById('yuiContentBackGround').value == "") {
    var yuiContentBackGround = '';
}
else {
    if (document.getElementById('yuiContentBackGround').value.match(/https?:/g)) {
        alert('tab > div.yui-content:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
        document.getElementById('yuiContentBackGround').value = "";
    }
    else {
        var yuiContentBackGround = 'div.yui-navset div.yui-content {<br>    background: ' + document.getElementById('yuiContentBackGround').value + ';<br>}<br>';
    }
};

//yuiSelectorNormal 
    if (document.getElementById('yuiSelectorNormalBg').value == "") {
        var yuiSelectorNormalBg = '';
    }
    else {
        if (document.getElementById('yuiSelectorNormalBg').value.match(/https?:/g)) {
            alert('tab > normal selector:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('yuiSelectorNormalBg').value = "";
        }
        else {
            var yuiSelectorNormalBg = '    background: ' + document.getElementById('yuiSelectorNormalBg').value + ';<br>';
        }
    };

    if (document.getElementById('yuiSelectorNormalColor').value == "") {
        var yuiSelectorNormalColor = '';
    }
    else {
        var yuiSelectorNormalColor = '    color: ' + document.getElementById('yuiSelectorNormalColor').value + ';<br>';
    };

    if (document.getElementById('yuiSelectorNormalBorder').value == "") {
        var yuiSelectorNormalBorder = '';
    }
    else {
        var yuiSelectorNormalBorder = '    border: ' + document.getElementById('yuiSelectorNormalBorder').value + ';<br>';
    };

if (document.getElementById('yuiSelectorNormalBg').value == "" && document.getElementById('yuiSelectorNormalColor').value == "" && document.getElementById('yuiSelectorNormalBorder').value == "") {
    yuiSelectorNormal = "";
}
else {
    yuiSelectorNormal = "div.yui-navset ul.yui-nav a,<br>div.yui-navset div.yui-navset-top ul.yui-nav a {<br>" + yuiSelectorNormalBg + yuiSelectorNormalColor + yuiSelectorNormalBorder + "}<br>";
};

//yuiSelectorHovered 
    if (document.getElementById('yuiSelectorHoveredBg').value == "") {
        var yuiSelectorHoveredBg = '';
    }
    else {
        if (document.getElementById('yuiSelectorHoveredBg').value.match(/https?:/g)) {
            alert('tab > hovered selector:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('yuiSelectorHoveredBg').value = "";
        }
        else {
            var yuiSelectorHoveredBg = '    background: ' + document.getElementById('yuiSelectorHoveredBg').value + ';<br>';
        }
    };

    if (document.getElementById('yuiSelectorHoveredColor').value == "") {
        var yuiSelectorHoveredColor = '';
    }
    else {
        var yuiSelectorHoveredColor = '    color: ' + document.getElementById('yuiSelectorHoveredColor').value + ';<br>';
    };

if (document.getElementById('yuiSelectorHoveredBg').value == "" && document.getElementById('yuiSelectorHoveredColor').value == "") {
    yuiSelectorHovered = "";
}
else {
    yuiSelectorHovered = "div.yui-navset ul.yui-nav a:hover,<br>div.yui-navset ul.yui-nav a:focus {<br>" + yuiSelectorHoveredBg + yuiSelectorHoveredColor + "}<br>";
};

//yuiSelectorSelected 
    if (document.getElementById('yuiSelectorSelectedBg').value == "") {
        var yuiSelectorSelectedBg = '';
    }
    else {
        if (document.getElementById('yuiSelectorSelectedBg').value.match(/https?:/g)) {
            alert('tab > active selector:\nHotlinking is prohibited. You can use only relative pathname.\ne.g.\n"/local--files/<page-name>/<file-name>"\n"../<file-name>"');
            document.getElementById('yuiSelectorSelectedBg').value = "";
        }
        else {
            var yuiSelectorSelectedBg = '    background: ' + document.getElementById('yuiSelectorSelectedBg').value + ';<br>';
        }
    };

    if (document.getElementById('yuiSelectorSelectedColor').value == "") {
        var yuiSelectorSelectedColor = '';
    }
    else {
        var yuiSelectorSelectedColor = '    color: ' + document.getElementById('yuiSelectorSelectedColor').value + ';<br>';
    };

    if (document.getElementById('yuiSelectorSelectedBorder').value == "") {
        var yuiSelectorSelectedBorder = '';
    }
    else {
        var yuiSelectorSelectedBorder = '    border: ' + document.getElementById('yuiSelectorSelectedBorder').value + ';<br>';
    };

if (document.getElementById('yuiSelectorSelectedBg').value == "" && document.getElementById('yuiSelectorSelectedColor').value == "" && document.getElementById('yuiSelectorSelectedBorder').value == "") {
    yuiSelectorSelected = "";
}
else {
    yuiSelectorSelected = "div.yui-navset ul.yui-nav .selected a,<br>div.yui-navset ul.yui-nav .selected a:focus,<br>div.yui-navset ul.yui-nav .selected a:hover {<br>" + yuiSelectorSelectedBg + yuiSelectorSelectedColor + yuiSelectorSelectedBorder + "}<br>";
};

//yuiTab result
yuiTab = yuiContentBackGround + yuiSelectorNormal + yuiSelectorHovered + yuiSelectorSelected;

//RESULT innerHTML
formOutPre = '<pre>[[module CSS]]<br>' + infoText + fontURL + '<br><br>' + rootArea + bodyAll + linkColor + h1Color + headingFontFamily + blockquoteValue + headerBack + logoAll + headerH1 + headerH2 + sideAll + sideHeadColor + intAll + yuiTab + rateAll + openMenuColor + keyframes + '<br>[[/module]]</pre>';

formOut.innerHTML = formOutPre;

//SAMPLE innerHTML
sampleBase = fontURL + rootArea + keyframes + bodyAll + linkColor + h1Color + headingFontFamily + blockquoteValue + sideAll + intAll + yuiTab + rateAll + sideHeadColor + openMenuColor;
document.getElementById("input-style").innerHTML = sampleBase.replace(/<br>/g, '').replace(/div#side-bar/g, '').replace(/  /g, '').replace(/ul.yui-nav a:hover/g, 'ul.yui-nav a.hover').replace(/body/g, '.sample').replace(/a,a:visited/g, '.sample a,.sample a:visited') + yuiSelectorHovered.replace(/<br>/g, '').replace(/  /g, '');

colorSampleTag("pre");
};

//headerh1 headerh2 disabled
$("#headerH1").on({
    "input" : function(e) {
        if (document.getElementById('headerH1').value == "" ) {
            document.getElementById("headerH1Color").disabled = true;
            document.getElementById("headerH1Shadow").disabled = true;
        }
        else {
            document.getElementById("headerH1Color").disabled = false;
            document.getElementById("headerH1Shadow").disabled = false;
        }
    }
});
$("#headerH2").on({
    "input" : function(e) {
        if (document.getElementById('headerH2').value == "" ) {
            document.getElementById("headerH2Color").disabled = true;
            document.getElementById("headerH2Shadow").disabled = true;
        }
        else {
            document.getElementById("headerH2Color").disabled = false;
            document.getElementById("headerH2Shadow").disabled = false;
        }
    }
});
    document.getElementById("headerH1Color").disabled = true;
    document.getElementById("headerH1Shadow").disabled = true;
    document.getElementById("headerH2Color").disabled = true;
    document.getElementById("headerH2Shadow").disabled = true;
document.getElementById('headerReset').onclick = function(){
    document.getElementById("headerH1Color").disabled = true;
    document.getElementById("headerH1Shadow").disabled = true;
    document.getElementById("headerH2Color").disabled = true;
    document.getElementById("headerH2Shadow").disabled = true;
}

//copying
function copyMessage () {
  var a = document.querySelector('#formOut');
  if (!a) {
    return false;
  }
  var range = document.createRange();
  range.selectNode(a);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand('copy');
  return false;
}
document.querySelector('#cButton').addEventListener('click', copyMessage, false);

});
</script>

</body>

css

::-webkit-scrollbar {
    width: 4px!important;
}
::-webkit-scrollbar-thumb {
    background: #901!important;
}
body {
    overflow-x: hidden;
    font-family: verdana,arial,helvetica,sans-serif;
}
#tool-content {
    padding: 0 2.5%;
}
#tool-content:before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80%;
    height: 100%;
    margin: auto;
    background-image: url("http://scp-wiki.wikidot.com/local--files/scp-style-resource/scp_trans.png");
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    pointer-events:none;
    opacity:0.2;
    max-height: 60%;
    z-index: 100;
}
h1,h2 {
    font-family:"Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica;
}
.form-block h1,.form-block h2 {
    font-family:"Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica!important;
}
h1 {
    font-size: 155%!important;
}
h2 {
    color: #000000;
    font-size: 105%!important;
}
.form-block h1 {
    color: #901!important;
}
.form-block h2 {
    color: #000000!important;
}
.form-block {
    color: #333!important;
    font-family: verdana,arial,helvetica,sans-serif!important;
}
.form-block a {
    color: #b01!important;
}
.table {
    display: block;
    font-size: 12px;
    text-align: center;
    clear: both;
}
#cViewText {
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.sp-preview {
    width: 100%;
    height: 1.5em;
    border: none;
}
.sp-dd {
    font-size: 0!important;
    font: normal normal normal 14px/1 FontAwesome;
    font-weight: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
.sp-dd:before {
    content: "颜色选择器\00a0\f05b";
    font-size: 11px;
}
.sp-input,.sp-cancel {
    display: none;
}
textarea {
    width: 95%!important;
    font-family: verdana, arial, helvetica, 'Meiryo', 'Nanum Gothic', sans-serif;
}
button,input[type="reset"],.sp-replacer,.sp-replacer:hover,.sp-replacer.sp-active,.view-label-wrap label {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #f7f7f7;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-left: solid 6px #901;
    border-radius: 0;
    color: #901;
    font-size: 10px;
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    cursor: pointer;
    -webkit-appearance:none;
    white-space: nowrap;
}
.view-label-wrap label {
    font-weight: normal;
    color: #bbb;
}
button:active,input[type="reset"]:active,.sp-replacer.sp-active {
    box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
    transform: translateY(2px);
}
input[type="radio"] {
    display: none;
}
.label-wrap {
    display: inline-block;
    margin: 0 0 0.25em;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-left: solid 6px #901;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    background: #f7f7f7;
    font-size: 0.75em;
    cursor: pointer;
}
.label-wrap label {
    display: block;
    float: left;
    cursor: pointer;
    margin: 1px 0;
    padding: 0.5em 1em;
    background: #f7f7f7;
    color: #bbb;
    border-width: 0 1px 0;
    border-style: solid;
    border-color: #f7f7f7;
    text-align: center;
    line-height: 1;
    transition: .2s;
    -webkit-appearance:none;
}
input[type="radio"]:checked + label {
    color: #fff!important;
    background-color: #901!important;
}
textarea:disabled, input:disabled {
    background-color: rgb(235, 235, 228);
}
.view-label-wrap-wrap,
#formOut {
    width: 99%;
    max-width: 100%;
    text-align: left;
    font-size: 0.8em;
    background-color: #ffffff;
    color: #333333;
    padding: 0.5em;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-left: solid 6px #901;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    overflow-x: scroll;
}
.view-label-wrap-wrap {
    font-size: 1em;
    text-align: center;
    overflow: visible!important;
    margin: auto 1em auto 0;
    padding: 0.25em;
}
#formOut pre {
    font-family: Courier, monospace;
}
ul.list {
    font-size: 0.9em;
    padding-inline-start: 0;
}
ul.list li {
    list-style: none;
}
ul.list > li:nth-child(even) {
    border-left: 7px #901 solid;
    padding: 0 0 0.5em 0.5em;
}
ul.list li span {
    font-size: 0.85em;
}

#intForm input[type="number"] {
    width: 6em;
}
#intForm form {
    display: inline;
    margin: 0;
}
#intForm form input[type="reset"] {
    margin-right: 0.2em;
    height: 2.2em;
}
#intForm form input:not([type="reset"]) {
    padding: 0.7em 0;
    height: 1.7em;
}

.form-block {
    left: initial;
    width: initial;
}
.genWrap {
    position: relative;
    width: 250px;
    margin-right: 1em;
    float: left;
}
#generalForm .genWrap {
    left: initial;
}

@media (max-width: 420px) {
#formOut {
    font-size: 0.7em;
}
}
/* For iPhone Retina 4, 4S, 5, 5s, 5c, iPod touch 4, 5 */
/* Portrait */
@media only screen and (min-device-width: 280px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
#formOut  {
    max-width: 260px !important;
  }
}

/* Landscape */
@media only screen and (min-device-width: 480px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
#formOut  {
    max-width: 450px !important;
  }
}
.open-menu a {
    display: inline-block;
    position: relative!important;
    bottom: 0!important;
    left: 0!important;
    z-index: 15;
    font-family: san-serif;
    font-size: 30px;
    font-weight: 700;
    width: 30px;
    height: 30px;
    line-height: 0.9em;
    text-align: center;
    border: 0.2em solid #888 !important;
    background-color: #fff !important;
    border-radius: 3em;
    color: #888 !important;
}
.open-menu a:hover {
    text-decoration: none !important;
    box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
}

    @keyframes vis {to {opacity: 1; transform: scale(1);}}
    @keyframes hid {60% {max-width: 0; max-height: 0;}100% {opacity: 0; transform: scale(0); max-width: 0; max-height: 0;}}
    .only-view {
        transform: scale(0);
        opacity: 0;
        animation: vis 0.5s ease-in-out both;
        pointer-events: auto;
    }
    .others {
        opacity: 1;
        animation: hid 0.5s ease-in-out both;
        pointer-events: none;
        overflow: hidden!important;
        margin: 0!important;
    }
    .blank {
        transform: scale(0);
        opacity: 0;
        animation: vis 0.5s ease-in-out both;
        pointer-events: auto;
    }

css

body * {
    -webkit-overflow-scrolling: touch;
}

/* sample */
div.sample a {
    cursor: pointer;
}
div.side-block,
div.interwiki {
    width: 16.5em;
    float: left;
    margin-right: 1em;
    padding: 10px;
    border: 1px solid #660000;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(102,0,0,.5);
    background: #fff;
    margin-bottom: 15px;
}
div.side-block div.menu-item,
.interwiki__entry {
    margin: 2px 0;
}
div.side-block div.menu-item a {
    font-weight: bold;
}
div.side-block div.menu-item img {
    width: 13px;
    height: 13px;
    border: 0;
    margin-right: 2px;
    position: relative;
    bottom: -2px;
}
div.side-block div.heading,
div.interwiki__title {
    color: #600;
    border-bottom: solid 1px #600;
    padding-left: 15px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 8pt;
    font-weight: bold;
}
div.interwiki__entry:before {
    content: "■";
    font-size: 7px;
    color: #b01;
    position: relative;
    margin: 0 7px 0 5px;
    bottom: 3px;
}
div.interwiki__entry a, div.interwiki__entry a:visited {
    color: #b01;
    font-weight: bold;
    text-decoration: none;
}
div.interwiki__entry a:hover {
    text-decoration: underline;
}

blockquote{
    border: 1px dashed #999;
    padding: 0 1em;
    background-color: #f4f4f4;
}
/* tab */
.yui-nav,.yui-nav li {margin:0;padding:0;list-style:none;}.yui-navset .yui-nav li em {font-style:normal;}.yui-navset .yui-nav li {display:inline-block;vertical-align:bottom; cursor:pointer; }.yui-navset .yui-nav li a {display:inline-block;vertical-align:bottom;}.yui-navset .yui-nav li a em {display:block;}.yui-navset .yui-nav {border:solid #2647a0;border-width:0 0 5px;}.yui-navset .yui-nav li {margin:0 0.16em 0 0;padding:1px 0 0;}.yui-navset .yui-nav .selected { margin:0 0.16em -1px 0;}.yui-navset .yui-nav a {color: #000;border:solid #a3a3a3;border-width:0 1px;text-decoration:none;}.yui-navset .yui-nav a em {border:solid #a3a3a3;border-width:1px 0 0;cursor: pointer;padding:0.25em .75em;left:0; right: 0; bottom: 0;top:-1px;position:relative;}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover {color:#fff;}.yui-navset .yui-nav .selected a em {padding:0.35em 0.75em;}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a em {border-color:#243356;}.yui-navset .yui-content {background:#f4f5ff;}.yui-navset .yui-content {border:1px solid #808080;border-top-color:#243356;padding:0.25em 0.5em;}.yui-navset .yui-nav a.hover {background: #d88 url(http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png) repeat-x left -1300px; display: none;}

html

<!--
author: 7happy7
license: CC BY-SA 3.0

reference material:
https://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93
by ja.wikipedia Contributors (https://ja.wikipedia.org/w/index.php?title=HSV%E8%89%B2%E7%A9%BA%E9%96%93&action=history)
(English) https://en.wikipedia.org/wiki/HSL_and_HSV
CC BY-SA 3.0
-->
<head>
<style>
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}input[type="number"] {-moz-appearance:textfield;}
</style>
</head>
<body style="margin: 0; padding: 0;">
<table style="width:100%;font-size:13px;">
<tbody>
<tr>
<td>color code: <input type="text" id="cCode" size="7" oninput="CodeToRGB()" onchange="CodeToRGB()" value="#ff0000"></td>
<td rowspan="2" id="thisColor" style="background-color: rgb(255,0,0); padding: 1em; text-align: center; width: 40%;">
<div  style="background-color: #fff; padding: 1em; margin: 0.5em;border: 4px solid #000;">
<span id="hsvValue"></span>
</div>
</td>
</tr>
<tr>
<td style="width:40%;">
R: <input type="number" id="rNum" min="0" max="255" onKeyUp="keyRGB()" value="255"><input type="range" step="1" oninput="funcRGB()" 
onchange="funcRGB()" min="0" max="255" id="vR" value="255"><br>
G: <input type="number" id="gNum" min="0" max="255" onKeyUp="keyRGB()" value="0"><input type="range" step="1" oninput="funcRGB()" onchange="funcRGB()" min="0" max="255" id="vG" value="0"><br>
B: <input type="number" id="bNum" min="0" max="255" onKeyUp="keyRGB()" value="0"><input type="range" step="1" oninput="funcRGB()" onchange="funcRGB()" min="0" max="255" id="vB" value="0">
</td>
</tr>
</tbody>
</table>

<!-- value of HSV rounding off -->
<div style="display:none;">
<!-- H [0-360]: --><input type="range" step="1" id="vH" max="360"><br>
<!-- S [0-100]: --><input type="range" step="1" id="vS"><br>
<!-- V [0-100]: --><input type="range" step="1" id="vV">
</div>
</body>

<script type="text/javascript">
var vR = document.getElementById("vR");
var vG = document.getElementById("vG");
var vB = document.getElementById("vB");

var vH = document.getElementById("vH");
var vS = document.getElementById("vS");
var vV = document.getElementById("vV");

var thisColor = document.getElementById("thisColor");
var hsvValue = document.getElementById("hsvValue");

var rNum = document.getElementById("rNum");
var gNum = document.getElementById("gNum");
var bNum = document.getElementById("bNum");

hsvValue.innerHTML = "hsv(0deg,100%,100%)";

var rgb6 = new RegExp(/^#[a-fA-F0-9]{6}$/);
//note: following regexp is now unfunctional due to "color-code generator"
var rgb3 = new RegExp(/^#[a-fA-F0-9]{3}$/);

function CodeToRGB() {
if (rgb3.test(document.getElementById("cCode").value)){
    vR.value = parseInt(document.getElementById("cCode").value.substring(1,2) + document.getElementById("cCode").value.substring(1,2), 16);
    vG.value = parseInt(document.getElementById("cCode").value.substring(2,3) + document.getElementById("cCode").value.substring(2,3), 16);
    vB.value = parseInt(document.getElementById("cCode").value.substring(3,4) + document.getElementById("cCode").value.substring(3,4), 16);
}else if (rgb6.test(document.getElementById("cCode").value)){
    vR.value = parseInt(document.getElementById("cCode").value.substring(1,3), 16);
    vG.value = parseInt(document.getElementById("cCode").value.substring(3,5), 16);
    vB.value = parseInt(document.getElementById("cCode").value.substring(5,7), 16); 
}
rNum.value = vR.value;
gNum.value = vG.value;
bNum.value = vB.value;
funcRGB();
}
//color-code generator
function CodeToRGBother(rgb) {
    return "#" + rgb.map(function (value) {
        return ("0" + Number(value).toString(16)).slice(-2) ;
    }).join("") ;
}

function keyRGB() {
vR.value = rNum.value;
vG.value = gNum.value;
vB.value = bNum.value;
funcRGB();
}

function funcRGB() {
var r = vR.value, g = vG.value, b = vB.value, hsv;
hsv = RGBtoHSV(r, g, b);
vH.value = hsv.h;
vS.value = hsv.s * 100 / 255;
vV.value = hsv.v * 100 / 255;

rNum.value = vR.value;
gNum.value = vG.value;
bNum.value = vB.value;

document.getElementById("cCode").value = CodeToRGBother( [vR.value, vG.value, vB.value] );

hsvValue.innerHTML = "hsv(" + vH.value + "deg," + vS.value + "%," + vV.value + "%)";
thisColor.style.backgroundColor = "rgb(" + vR.value + "," + vG.value + "," + vB.value + ")";
}

function RGBtoHSV (r, g, b, coneModel) {
var h, s, v, max = Math.max(Math.max(r, g), b), min = Math.min(Math.min(r, g), b);
// calc hue-rotate(H)
if (max == min) {
    h = 0;
} else if (max == r) {
    h = 60 * (g - b) / (max - min) + 0;
} else if (max == g) {
    h = (60 * (b - r) / (max - min)) + 120;
} else {
    h = (60 * (r - g) / (max - min)) + 240;
}
while (h < 0) {
    h += 360;
}
// calc saturation(S)
s = (max == 0)
    ? 0
    : (max - min) / max * 255;
// calc value(V)
v = max;
// submit
return {'h': h, 's': s, 'v': v};
}
</script>

====
[[/iftags]]

文章

页面版本：⁨0⁩, 最后编辑于: ⁨2019/3/23 15:54:13⁩ (⁨⁨2734⁩ 日前⁩), 现时评分: 113

历史附件 + 选项

SCP基金会中文分部

著作信息

CSS主题制作工具

如何使用？

你在寻找更多资讯吗？去看看 “我想要找到的选项在哪里？”！

请先登入Wikidot…

选择你想要使用的颜色。

将页面版头标题从 “SCP基金会” 改变

将页面版头副标题从 “控制，收容，保护” 改变

将页面版头标志从 改变

将页面版头背景从 改变

改变链接颜色

改变字体颜色

改变标准背景颜色

改变内容标题颜色

改变标准字体

备注：“1.” 到 “3.” 因谷歌字体在大陆被墙而禁用。

1. 去 https://fonts.google.com/。

2. 选择想用的字体。

3. 复制 "@import url('‘`https://``fonts.googleapis.com/css?family=XXXXX’);" 并粘贴至 "α".

4. 复制 "'<你的字体>', <字体关键词>1Reference 1.sans-serif, serif, cursive, fantasy, monospace…" 至 "β".

改变内容标题的字体

改变侧边栏颜色

改变侧边栏标题颜色

改变移动端侧边栏按钮颜色

改变 tab 背景颜色

改变 tab 选择器颜色

改变跨维基颜色

改变评分模块颜色

text-shadow 文字阴影

box-shadow 边框阴影

border

a

基本的例子

例外

a

你在寻找更多资讯吗？去看看 “
我想要找到的选项在哪里？”！

将页面版头标志从　改变

将页面版头背景从　改变

4. 复制 "'<你的字体>', <字体关键词>1" 至 "β".