CSS Theme Creator by Javascript

Hub » CSS Theme Creator by Javascript

Please sign in to Wikidot…

<!--
author: 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/7happy7:css-theme-creator/2">
    <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> RELOAD THE TOOL</button>
 
<form id="pickCover" style="width: 100%; text-align: center;">
<h1>color picker & sample</h1>
 
<input type="text" id="picker"><button id="lButton" type="button" style="margin-left: 0.2em;"><span class="fa fa-retweet"></span> RELOAD</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">sample <span style="font-style: normal;"><b>color</b> text</span></i></div>
</form>
 
<form id="generalForm1" class="form-block">
<h1>general 1</h1><input type="reset" value="&#xf05e; RESET" 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: sample-counter;"></textarea></li>
<li><span>font:</span><br></li>
<li><span>@import<span> (<a href="https://fonts.google.com/" target="_blank">Google font</a>)</span>:</span>
<textarea id="fontURL" rows="3" placeholder="@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');"></textarea></li>
<li><span>a (link) color:</span></li>
<li><input type="text" id="linkColor" placeholder="#b01"><br><button type="button" name="linkColor"><span class="fa fa-paste"></span> substitute the value of picker</button></li>
</ul>
 
<h2>body</h2>
<ul class="list">
<li><span>background:</span></li>
<li><input type="text" id="backGround" placeholder="#ffffff"><br><button type="button" name="backGround"><span class="fa fa-paste"></span> substitute the value of picker</button></li>
<li><span>text color:</span></li>
<li><input type="text" id="txColor" placeholder="#333333"><br><button type="button" name="txColor"><span class="fa fa-paste"></span> substitute the value of picker</button></li>
<li><span>font-family:</span></li>
<li><textarea id="fontFamily" rows="2" placeholder="'Nanum Gothic'"></textarea></li>
</ul>
</form>
 
<form id="generalForm2" class="form-block">
<h1>general 2</h1><input type="reset" value="&#xf05e; RESET" class="fa">
<h2>heading elements</h2>
<ul class="list">
<li><span>color<span> (<b>h1</b>)</span>:</span></li>
<li><input type="text" id="h1Color" placeholder="#ffffff"><br><button type="button" name="h1Color"><span class="fa fa-paste"></span> substitute the value of picker</button></li>
<li><span>font-family<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>blockquote</h2>
<ul class="list">
<li><span>others:</span></li>
<li><textarea id="blockquoteValue" rows="3" placeholder="border: 1px dashed #999;&#13;&#10;background: #f4f4f4;"></textarea></li>
</ul>
</form>
 
<form id="headerForm" class="form-block">
<h1>header</h1><input type="reset" value="&#xf05e; RESET" class="fa" id="headerReset">
<ul class="list">
<li><span>logo<span> (<b>div#header</b>)</span>:</span></li>
<li><input type="text" id="headerLogo" placeholder="Image URL"><br><span>others:</span><textarea id="logoValue" rows="3" placeholder="background-position: 1em 4em;&#13;&#10;background-size: 88px 88px;"></textarea></li>
<li><span>title<span> (<b>div#header h1 a::before</b>)</span>:</span></li>
<li><input type="text" id="headerH1" placeholder="SCP Foundation"><br><span>color:</span><br><input type="text" id="headerH1Color" placeholder="#eee"><br><button type="button" name="headerH1Color"><span class="fa fa-paste"></span> substitute the value of picker</button><br><span>text-shadow:</span><br><input type="text" id="headerH1Shadow" placeholder="3px 3px 5px #000"></li>
<li><span>sub title<span> (<b>div#header h2 span::before</b>)</span>:</span></li>
<li><input type="text" id="headerH2" placeholder="Secure, Contain, Protect"><br><span>color:</span><br><input type="text" id="headerH2Color" placeholder="#f0f0c0"><br><button type="button" name="headerH2Color"><span class="fa fa-paste"></span> substitute the value of picker</button><br><span>text-shadow:</span><br><input type="text" id="headerH2Shadow" placeholder="1px 1px 1px rgba(0,0,0,.8)"></li>
</ul>
 
<h2>div#container-wrap</h2>
<ul class="list">
<li><span>background:</span></li>
<li><input type="text" id="headerBack" placeholder="Image URL"></li>
</ul>
</form>
 
<form id="sidebarForm" class="form-block">
<h1>sidebar</h1><input type="reset" value="&#xf05e; RESET" class="fa">
<h2>div.side-block</h2>
<ul class="list">
<li><span>background:</span></li>
<li><input type="text" id="sideBackGround" placeholder="#ffffff"><br><button type="button" name="sideBackGround"><span class="fa fa-paste"></span> substitute the value of picker</button></li>
<li><span>border:</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>others:</span></li>
<li><textarea id="sideValue" rows="3" placeholder="border-radius: 5px;"></textarea></li>
</ul>
<h2>div.heading</h2>
<ul class="list">
<li><span>color:</span></li>
<li><input type="text" id="sideHeadColor" placeholder="#660000"><br><button type="button" name="sideHeadColor"><span class="fa fa-paste"></span> substitute the value of picker</button></li>
</ul>
</form>
 
<div id="intForm" class="form-block">
<h1>Interwiki</h1>
<h2>div.scpnet-interwiki-wrapper</h2>
<ul class="list">
<li><span>filter:</span></li>
<li>
<span>hue-rotate<span> [<b>0 - 365</b>]</span>:</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intHueRotate" min="0" max="365">deg</form><br>
<span>saturate:</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intSaturate" min="0">%</form><br>
<span>brightness:</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intBrightness" min="0">%</form><br>
<span>contrast:</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intContrast" min="0">%</form><br>
<span>grayscale<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>sepia<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>invert<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>blur:</span><br><form><input type="reset" value="&#xf05e;" class="fa"><input type="number" id="intBlur" min="0">px</form><br>
<span>opacity<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>drop-shadow:</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 class="side-block"><div class="heading">side-bar sample</div><div class="menu-item"><image src="http://scp-wiki.wdfiles.com/local--files/nav%3Aside/series.png"><a>Series 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>Series 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>Series 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>Series 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>Series 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">Interwiki sample</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="yui-navset" style="clear: both;"><ul class="yui-nav"><li class="selected"><a><em>tab</em></a></li><li><a><em>sample</em></a></li></ul><div class="yui-content"><div><p>text</p><blockquote><h1 style="font-size: 190%!important;">h1</h1></blockquote></div></div></div><br>
 
<div class="table" id="result-table">
<button id="rButton" class="button"><span class="fa fa-retweet"></span> RELOAD</button>
<button id="cButton" class="button"><span class="fa fa-copy"></span> COPY</button><br>
<div id="formOut"></div>
</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)"]
      ]
  });
});
 
$(function(){
 
//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;
}
 
//user name -> "Uname"
var UnamePrev = document.location.hash.substr(1);
var Uname = UnamePrev.replace(/%20/g, ' ');
 
//date -> "year", "month", "day"
var date = new Date();
year = date.getFullYear();
 
//inner HTML (textarea)
var rButton = document.getElementById('rButton');
formOut = document.getElementById("formOut");
rButton.onclick = function(){
 
//infoText
infoText = '/*<br>    Powered by "CSS Theme Creator"<br>    ©2019 7happy7 CC BY-SA 3.0<br>    Special Thanks:<br>    /* Nanimono Demonai [SCP-JP]<br>    /* /* http://scp-jp-sandbox2.wikidot.com/inc:headsubtitle<br>    /* Sekai_s [SCP-CN]<br>    /* /* http://scp-wiki-cn.wikidot.com/css-previewer<br>    /* shu_yabiyabi [SCP-JP]<br>*/<br><br>' + '/*<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 {
        var rootArea = ':root {<br>    ' + document.getElementById('rootArea').value.replace(/\n/g, '\n' + '    ') + '<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 {
        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 {<br>    color: ' + document.getElementById('linkColor').value + ';<br>}<br>';
};
 
//h1Color
if (document.getElementById('h1Color').value == "") {
    h1Color = "";
}
else {
    h1Color = "h1 {<br>    color: " + document.getElementById('h1Color').value + ";<br>}<br>";
};
 
//headingFontFamily
if (document.getElementById('headingFontFamily').value == "") {
    headingFontFamily = "";
}
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 {
        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 = 'none';
            }
            else {
                var headerH1Shadow = headerH1ShadowPrev;
            }
        var headerH1 = 'div#header h1 a {<br>    color: transparent;<br>    text-decoration: none;<br>    text-shadow: none;<br>}<br>div#header h1 a::before {<br>    content: "' + headerH1Prev + '";<br>    color: ' + headerH1Color + ';<br>    text-shadow: ' + 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 {
        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 {
        var headerLogo = '    background: url(' + document.getElementById('headerLogo').value + ') 10px 40px no-repeat;<br>';
};
 
//logoValue
    if (document.getElementById('logoValue').value == "" ) {
        var logoValue = '';
    }
    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 {
        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 {
        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>';
};
 
//test test test
//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
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>';
};
 
//RESULT innerHTML
formOutPre = '<pre>[[module CSS]]<br>' + infoText + fontURL + '<br><br>' + rootArea + bodyAll + linkColor + h1Color + headingFontFamily + blockquoteValue + headerBack + logoAll + headerH1 + headerH2 + sideAll + sideHeadColor + intAll + '<br>[[/module]]</pre>';
 
formOut.innerHTML = formOutPre;
 
//SAMPLE innerHTML
sampleBase = fontURL + rootArea + bodyAll + linkColor + h1Color + headingFontFamily + blockquoteValue + sideAll + intAll + sideHeadColor;
document.getElementById("input-style").innerHTML = sampleBase.replace(/<br>/g, '').replace(/div#side-bar/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>

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;
}
h1 {
    font-size: 140%!important;
}
h2 {
    color: #000000;
    font-size: 105%!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;
}
.sp-dd:before {
    content: "color picker";
    font-size: 10px;
}
.sp-input {
    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 {
    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;
}
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);
}
textarea:disabled, input:disabled {
    background-color: rgb(235, 235, 228);
}
#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: hidden;
}
#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 {
    width: 250px;
    float: left;
    margin-right: 1em;
}
 
div.float-box {
    width: calc(250px + 1em);
    float: none;
}
 
div.float-box .form-block {
    float: left;
}
 
@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;
  }
}
 
/* sample */
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;}

+ show block

Table of Contents

Footnote

1. 1px, 1em…

2. red, green…

Edit this page

page revision: 110, last edited: 19 Feb 2019 21:01

Edit Rate (+2) Tags Discuss (0) History Files Print Site tools + Options

aismallard
djkaktus	Master Administrator
smlt

smlt	since 11 Mar 2018 18:58
Yossipossi	since 12 Mar 2018 10:30
Modulum	since 16 Mar 2018 00:43
Westrin	since 16 Mar 2018 00:44
Varaxous	since 18 Mar 2018 20:26
notgull	since 23 Mar 2018 03:28
Hylius	since 15 Apr 2018 06:26
pamplemousse	since 04 May 2018 10:35
Mr toribio	since 10 Jun 2018 02:21
Emo Squiddy	since 10 Jun 2018 02:21
Uncle Nicolini	since 18 Jul 2018 08:58
BottomOfTheBaarle	since 24 Jul 2018 18:43
incidental_cabbage	since 24 Jul 2018 18:43
HotColes	since 24 Jul 2018 18:43
DrAnnoyingDog	since 29 Jul 2018 20:11
Aplinerly	since 02 Aug 2018 14:25
EldritchHorror	since 14 Aug 2018 22:28
DrZeyphr	since 18 Aug 2018 20:25
JackalRelated	since 19 Aug 2018 20:43
Gekkoguy	since 20 Aug 2018 13:44
Crocket_Lawnchair	since 21 Aug 2018 03:44
magna2s	since 21 Aug 2018 19:00
RockTeethMothEyes	since 21 Aug 2018 20:48
RegularSlambo	since 22 Aug 2018 17:28
fishingenthusiast	since 26 Aug 2018 19:18
MrPines	since 04 Sep 2018 13:49
NewyRose	since 04 Sep 2018 15:26
lingai10010	since 13 Sep 2018 12:39
aforestfullofstars	since 16 Sep 2018 23:21
sam-testings	since 20 Sep 2018 16:46
Boyu12	since 26 Sep 2018 00:53
WaterSphere	since 27 Sep 2018 00:20
7happy7	since 01 Oct 2018 03:19
Ayers	since 02 Oct 2018 20:52
murzei_chaos	since 15 Oct 2018 07:19
Proasek	since 24 Oct 2018 16:58
multizig	since 25 Oct 2018 18:13
Rex Atlas	since 27 Oct 2018 17:05
Drjemin	since 01 Nov 2018 23:36
Alistair Hawks	since 04 Nov 2018 00:40
Dr Lekter	since 06 Nov 2018 22:00
Doctor Scavan	since 06 Nov 2018 22:39
dentixvoxel	since 07 Nov 2018 16:34
BlazingImp77151	since 07 Nov 2018 18:45
macro_au_micro	since 08 Nov 2018 00:09
QIncarnate	since 09 Nov 2018 20:09
MrMcBride	since 10 Nov 2018 09:50
ukwhatn	since 16 Nov 2018 06:04
MrLight	since 22 Nov 2018 18:28
Alecx Ward	since 23 Nov 2018 01:06
JollyChimp	since 25 Nov 2018 00:21
Waxwing-one	since 30 Nov 2018 18:13
The Mad Maniac	since 04 Dec 2018 05:39
commintern	since 06 Dec 2018 07:39
Cosmic Catacalysm	since 07 Dec 2018 02:40
coolguy00	since 15 Dec 2018 00:42
Liberonscien	since 19 Dec 2018 01:20
WXLPMNB	since 31 Dec 2018 16:27
einreb08	since 31 Dec 2018 23:16
ElCongrio	since 08 Jan 2019 17:08
Sekai_s	since 14 Jan 2019 14:27
Infas12	since 14 Jan 2019 15:11
Woedenaz	since 15 Jan 2019 15:05
SonicWave	since 16 Jan 2019 09:46
Yiggly797	since 17 Jan 2019 02:45
AgentDRPN	since 17 Jan 2019 07:06
62ECN	since 18 Jan 2019 16:33
Jochoi	since 18 Jan 2019 16:34
silverIce	since 21 Jan 2019 15:33
Nihil-or-Less	since 22 Jan 2019 01:52
Fomal	since 23 Jan 2019 10:51
Foxhyf	since 23 Jan 2019 13:32
bye jack	since 23 Jan 2019 14:35
Bacon Coinber	since 25 Jan 2019 01:03
Rye Travis	since 27 Jan 2019 02:50
tERaNCarol	since 30 Jan 2019 07:23
BillNyetheSamurai	since 02 Feb 2019 21:12
ssssssz	since 05 Feb 2019 07:15
ratking666	since 06 Feb 2019 22:59
Its a Bad Idea	since 08 Feb 2019 00:24
Kasugai_Kanagu	since 08 Feb 2019 09:06
#ApmV	since 09 Feb 2019 08:35
jack_the_dragon	since 11 Feb 2019 17:08
Darren Knox	since 15 Feb 2019 02:31
DrMeepster	since 19 Feb 2019 17:40
Etinjat	since 22 Feb 2019 12:06
Adl3z_	since 26 Feb 2019 09:18
Cyclin	since 01 Mar 2019 05:37
MoreWorldliness	since 04 Mar 2019 22:58
Karnot	since 15 Mar 2019 10:18
ThomasX	since 15 Mar 2019 11:02
aismallard	since 15 Mar 2019 15:41
Ellie3	since 16 Mar 2019 04:40
UraniumEmpire	since 16 Mar 2019 06:57
Lamentte	since 16 Mar 2019 14:27
ManyMeats	since 16 Mar 2019 14:35
Tyvan Delfar	since 19 Mar 2019 00:44
Rounderhouse	since 20 Mar 2019 14:07
Keflanes	since 22 Mar 2019 16:17
Orbit Ancient	since 24 Mar 2019 19:34

SMLT Container

The SCP Sandbox by Nerds for Nerds.

Please sign in to Wikidot…

text-shadow

border