CSS主题制作工具
指导中心 » CSS主题制作工具
开始你的梦中南柯C S S之旅……
用这东西你就能够弄出简单的CSS主题了。如果你想要学习更多的维基语法魔术，可以看看以下的文章：
- 你与高级格式
— 由DrMagnus 撰写
- SCP格式资源
— 由Shaggydredlocks 撰写
- Listpages 魔法与你
— 由Croquembouche 和
Rounderhouse 撰写
- 维基语法
— 由ghostchibi 撰写
著作信息
CSS主题制作工具
作者：7happy7
特别鸣谢（以字母顺序排列）：Boyu12,
C-take,
Dr Devan,
Etinjat,
MrPines,
Nanimono Demonai,
physicslike,
Sekai_s,
shu_yabiyabi,
Zyn
<!-- 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=" 重设" class="fa"> <ul class="list"> <li><span>:root: 根选项</span><br></li> <li><textarea id="rootArea" rows="3" placeholder="--themeColor: #aa0; --accentColor: #fbfbf0; counter-reset: counter 0;"></textarea></li> <li><span>@keyframes 或 @media:</span><br></li> <li><textarea id="keyframes" rows="5" placeholder="@keyframes c-change { from {color: #b01;} to {color: #000;} }"></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; 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=" 重设" 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; 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=" 重设" 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=" 重设" 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="" class="fa"><input type="number" id="intHueRotate">deg</form><br> <span>饱和度：</span><br><form><input type="reset" value="" class="fa"><input type="number" id="intSaturate" min="0">%</form><br> <span>亮度：</span><br><form><input type="reset" value="" class="fa"><input type="number" id="intBrightness" min="0">%</form><br> <span>对比度：</span><br><form><input type="reset" value="" 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="" 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="" 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="" class="fa"><input type="number" id="intInvert" min="0" max="100">%</form><br> <span>模糊效果：</span><br><form><input type="reset" value="" 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="" class="fa"><input type="number" id="intOpacity" min="0" max="100">%</form><br> <span>整体阴影：</span><br><form><input type="reset" value="" 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=" 重设" 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">评分: <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>
::-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://www.scp-wiki.net/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; }
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;}
<!-- 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>
