Side Tooltest Encode
[[div id="u-side-bar-0"]]
[[div class="side-block" style="background-color: #fff0f0;"]]
[[collapsible show="Useful Pages" hide="Useful Pages" hideLocation="both"]]
[[div class="menu-item"]]
[http://www.scp-wiki.net/advanced-formatting-and-you Advanced Formatting and You]
[http://www.scp-wiki.net/photoshopping-your-scp Photoshopping Your SCP]
[http://www.scp-wiki.net/scp-style-resource SCP Style Resource]
[http://www.wikidot.com/doc-wiki-syntax:start Wiki Syntax]
[[/div]]
[[/collapsible]]
[[/div]]
[[div class="side-block"]]
[[=]]
[[div class="heading"]]
++++* STANDALONE BUTTONS
[[size 70%]]//※DON'T CLICK THESE BUTTONS WHEN "__THE EDIT PAGE FORM__" IS DISPLAYED.//[[/size]]
[[/div]]
[[/=]]
[[table class="ocbutton-wrap"]]
[[row]]
[[cell class="ocbutton"]]
[[button edit text="Edit"]]
[[/cell]]
[[cell class="ocbutton"]]
[[button source text="Page Source"]]
[[/cell]]
[[/row]]
[[row]]
[[cell class="ocbutton"]]
[[button history text="History"]]
[[/cell]]
[[cell class="ocbutton"]]
[[button files text="Files"]]
[[/cell]]
[[/row]]
[[/table]]
_
[[/div]]
[[div class="side-block toc-wrap"]]
[[collapsible show="Table of Contents" hide="fold" hideLocation="both"]]
[[div class="toc-box"]]
[[toc]]
[[/div]]
[[/collapsible]]
[[/div]]
[[div class="side-block"]]
[[collapsible show="★COPY TOOLS★" hide="★COPY TOOLS★" hideLocation="both"]]
[[div class="octool"]]
[[div class="heading"]]
collapsible
[[/div]]
[[html]]
<head>
<script type="text/javascript">
var clipboardCopy = function(){
var urltext = document.getElementById("url");
urltext.select();
document.execCommand("copy");
}
</script>
</head>
<body>
<style type="text/css">
input[type="button" i] {
transition-duration: 1.5s;
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
input[type="button" i]:hover {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
input[type="button" i]:active {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
</style>
<textarea type="text" id="url" rows="1" cols="10">
[[collapsible show="+ open" hide="- close"]]
text
[[/collapsible]]</textarea>
<br>
<input type="button" value="Copy" onclick="clipboardCopy()">
</body>
[[/html]]
[[div class="heading"]]
ruby
[[/div]]
[[html]]
<head>
<script type="text/javascript">
var clipboardCopy = function(){
var urltext = document.getElementById("url");
urltext.select();
document.execCommand("copy");
}
</script>
</head>
<body>
<style type="text/css">
input[type="button" i] {
transition-duration: 1.5s;
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
input[type="button" i]:hover {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
input[type="button" i]:active {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
</style>
<textarea type="text" id="url" rows="1" cols="10">
[[span class="ruby"]]word[[span class="rt"]]ruby[[/span]][[/span]]</textarea>
<br>
<input type="button" value="Copy" onclick="clipboardCopy()">
</body>
[[/html]]
[[div class="heading"]]
tabs
[[/div]]
[[html]]
<head>
<script type="text/javascript">
var clipboardCopy = function(){
var urltext = document.getElementById("url");
urltext.select();
document.execCommand("copy");
}
</script>
</head>
<body>
<style type="text/css">
input[type="button" i] {
transition-duration: 1.5s;
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
input[type="button" i]:hover {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
input[type="button" i]:active {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
</style>
<textarea type="text" id="url" rows="1" cols="10">
[[tabview]]
[[tab Title 1]]
Text goes here. Pretend this is a draft.
[[/tab]]
[[tab Title 2]]
More text in another tab! You can add lots of tabs.
[[/tab]]
[[/tabview]]</textarea>
<br>
<input type="button" value="Copy" onclick="clipboardCopy()">
</body>
[[/html]]
[[div class="heading"]]
picture
[[/div]]
[[html]]
<head>
<script type="text/javascript">
var clipboardCopy = function(){
var urltext = document.getElementById("url");
urltext.select();
document.execCommand("copy");
}
</script>
</head>
<body>
<style type="text/css">
input[type="button" i] {
transition-duration: 1.5s;
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
input[type="button" i]:hover {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
input[type="button" i]:active {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
</style>
<textarea type="text" id="url" rows="1" cols="10">
[[div class="scp-image-block block-right" style="width:300px;"]]
[[image FileID style="width:300px;" link=#]]
[[div class="scp-image-caption" style="width:300px;"]]
text
[[/div]]
[[/div]]</textarea>
<br>
<input type="button" value="Copy" onclick="clipboardCopy()">
</body>
[[/html]]
[[div class="heading"]]
footnote
[[/div]]
[[html]]
<head>
<script type="text/javascript">
var clipboardCopy = function(){
var urltext = document.getElementById("url");
urltext.select();
document.execCommand("copy");
}
</script>
</head>
<body>
<style type="text/css">
input[type="button" i] {
transition-duration: 1.5s;
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
input[type="button" i]:hover {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
input[type="button" i]:active {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
</style>
<textarea type="text" id="url" rows="1" cols="10">
[[footnote]]text[[/footnote]]</textarea>
<br>
<input type="button" value="Copy" onclick="clipboardCopy()">
</body>
[[/html]]
[[div class="heading"]]
table
[[/div]]
[[html]]
<head>
<script type="text/javascript">
var clipboardCopy = function(){
var urltext = document.getElementById("url");
urltext.select();
document.execCommand("copy");
}
</script>
</head>
<body>
<style type="text/css">
input[type="button" i] {
transition-duration: 1.5s;
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
input[type="button" i]:hover {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
input[type="button" i]:active {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
</style>
<textarea type="text" id="url" rows="1" cols="10">
||~ head 1 ||~ head 2 ||~ head 3 ||
|| cell 1 || cell 2 || cell 3 ||
|||| long cell 4 || cell 5 ||
||cell 6 |||| long cell 7 ||
|||||| looong cell 8||</textarea>
<br>
<input type="button" value="Copy" onclick="clipboardCopy()">
</body>
[[/html]]
[[div class="heading"]]
blackbox (█)
[[/div]]
[[html]]
<head>
<script type="text/javascript">
var clipboardCopy = function(){
var urltext = document.getElementById("url");
urltext.select();
document.execCommand("copy");
}
</script>
</head>
<body>
<style type="text/css">
input[type="button" i] {
transition-duration: 1.5s;
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
input[type="button" i]:hover {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
input[type="button" i]:active {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
</style>
<textarea type="text" id="url" rows="1" cols="10">
████</textarea>
<br>
<input type="button" value="Copy" onclick="clipboardCopy()">
</body>
[[/html]]
[[div class="heading"]]
color
[[/div]]
[[html]]
<head>
<script type="text/javascript">
var clipboardCopy = function(){
var urltext = document.getElementById("url");
urltext.select();
document.execCommand("copy");
}
</script>
</head>
<body>
<style type="text/css">
input[type="button" i] {
transition-duration: 1.5s;
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
input[type="button" i]:hover {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
input[type="button" i]:active {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
</style>
<textarea type="text" id="url" rows="1" cols="10">
##333|text##</textarea>
<br>
<input type="button" value="Copy" onclick="clipboardCopy()">
</body>
[[/html]]
[[div class="heading"]]
module CSS
[[/div]]
[[html]]
<head>
<script type="text/javascript">
var clipboardCopy = function(){
var urltext = document.getElementById("url");
urltext.select();
document.execCommand("copy");
}
</script>
</head>
<body>
<style type="text/css">
input[type="button" i] {
transition-duration: 1.5s;
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
input[type="button" i]:hover {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
input[type="button" i]:active {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
</style>
<textarea type="text" id="url" rows="1" cols="10">
[[module CSS]]
[[/module]]</textarea>
<br>
<input type="button" value="Copy" onclick="clipboardCopy()">
</body>
[[/html]]
[[div class="heading"]]
Equations
[[/div]]
[[html]]
<head>
<script type="text/javascript">
var clipboardCopy = function(){
var urltext = document.getElementById("url");
urltext.select();
document.execCommand("copy");
}
</script>
</head>
<body>
<style type="text/css">
input[type="button" i] {
transition-duration: 1.5s;
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
input[type="button" i]:hover {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
input[type="button" i]:active {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
</style>
<textarea type="text" id="url" rows="1" cols="10">
[[math]]
\begin{align}
E = mc^2
\end{align}
[[/math]]</textarea>
<br>
<input type="button" value="Copy" onclick="clipboardCopy()">
</body>
[[/html]]
[[div class="heading"]]
Inline math
[[/div]]
[[html]]
<head>
<script type="text/javascript">
var clipboardCopy = function(){
var urltext = document.getElementById("url");
urltext.select();
document.execCommand("copy");
}
</script>
</head>
<body>
<style type="text/css">
input[type="button" i] {
transition-duration: 1.5s;
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
input[type="button" i]:hover {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
input[type="button" i]:active {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
</style>
<textarea type="text" id="url" rows="1" cols="10">
[[$ E = mc^2 $]]</textarea>
<br>
<input type="button" value="Copy" onclick="clipboardCopy()">
</body>
[[/html]]
[[div class="heading"]]
SCP
[[/div]]
[[html]]
<head>
<script type="text/javascript">
var clipboardCopy = function(){
var urltext = document.getElementById("url");
urltext.select();
document.execCommand("copy");
}
</script>
</head>
<body>
<style type="text/css">
input[type="button" i] {
transition-duration: 1.5s;
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
input[type="button" i]:hover {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
input[type="button" i]:active {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
</style>
<textarea type="text" id="url" rows="1" cols="10">
[[>]]
[[module Rate]]
[[/>]]
**Item #:** SCP-XXXX
**Object Class:** Safe/Euclid/Keter (indicate which class)
**Special Containment Procedures:** [Paragraphs explaining the procedures]
**Description:** [Paragraphs explaining the description]
**Addendum:** [Optional additional paragraphs]</textarea>
<br>
<input type="button" value="Copy" onclick="clipboardCopy()">
</body>
[[/html]]
[[/div]]
//[[size 80%]]Please reload the page if the tool doesn't be displayed. [[/size]]//
[[/collapsible]]
[[/div]]
[[div class="side-block" style="background-color: #fff0f0;"]]
[[collapsible show="About this" hide="About this" hideLocation="both"]]
[[div class="aboutbox"]]
[[size 80%]]**Author:** [[*user 7happy7]][[/size]]
[[size 80%]]**Adviser:** [[*user C-take]][[/size]]
[[size 80%]]**License:** CC BY-SA 3.0[[/size]]
[[/div]]
[[div_ class="heading"]]
Reference materials
[[/div]]
[[div class="aboutbox"]]
[[size 80%]]**Title:** サイドバー[[/size]]
[[size 80%]]**Source:** [http://scp-jp-sandbox2.wikidot.com/nav:side SCP-JPサンドボックスII][[/size]]
[[size 80%]]**Author:** UNKNOWN, [http://ja.scp-wiki.net/ SCP-JPwiki][[/size]]
[[size 80%]]**License:** CC BY-SA 3.0[[/size]]
[[/div]]
[[div class="aboutbox"]]
[[size 80%]]**Title:** Cocoonist's Sidebar[[/size]]
[[size 80%]]**Source:** [http://shitake-crude-production.wikidot.com/cocoonist-s-sidebar 椎茸天然製造][[/size]]
[[size 80%]]**Author:** [[*user Cocoonist]][[/size]]
[[size 80%]][[span style="color: transparent;"]]**Author:**[[/span]] [[*user Dr Devan]][[/size]]
[[size 80%]]**License:** CC BY-SA 3.0[[/size]]
[[/div]]
[[div_ class="heading"]]
How to introduce this tool.
[[/div]][[size 80%]]Copy the following code and paste it in your sandbox page.[[/size]]
_
[[html]]
<head>
<script type="text/javascript">
var clipboardCopy = function(){
var urltext = document.getElementById("url");
urltext.select();
document.execCommand("copy");
}
</script>
</head>
<body>
<style type="text/css">
input[type="button" i] {
transition-duration: 1.5s;
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
input[type="button" i]:hover {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
input[type="button" i]:active {
cursor: pointer;
padding: 0.3em 0.6em;
font-weight: normal;
color: #666;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #f58282;
text-decoration: underline;
}
</style>
<textarea type="text" id="url" rows="1" cols="20">
[[include :scp-sandbox-3:component:usefultool-module]]</textarea>
<br>
<input type="button" value="Copy" onclick="clipboardCopy()">
</body>
[[/html]]
[[/collapsible]]
[[/div]]
[[module css]]
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');
/* FAKE SIDE MENU */
#u-side-bar-0 {
font-family: Montserrat,sans-serif;
clear: none;
float: none;
position: fixed;
width: 229.6px;
bottom: 0.7em;
right: 3.8em;
width: 17em;
padding: 0;
border: none;
display: block;
color: #333;
}
#u-side-bar-0 a {
color: #b01;
}
#u-side-bar-0 .side-block {
padding: 10px;
border: 1px solid #660000;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(102,0,0,.5);
background: #fff;
margin-bottom: 15px;
}
#u-side-bar-0 .side-area {
padding: 10px;
}
#u-side-bar-0 .heading {
color: #600!important;
border-bottom: solid 1px #600;
padding-right: 15px;
margin-top: 10px;
margin-bottom: 5px;
font-size: 8pt;
font-weight: bold;
}
#u-side-bar-0 .heading h4 {
color: #600!important;
}
#u-side-bar-0 p {
margin: 0;
}
#u-side-bar-0 div.menu-item {
margin: 2px 0;
font-size: 85%;
}
#u-side-bar-0 div.menu-item img {
width: 13px;
height: 13px;
border: 0;
margin-right: 2px;
position: relative;
bottom: -2px;
}
#u-side-bar-0 div.menu-item a {
font-weight: bold;
}
#u-side-bar-0 div.menu-item.inactive img {
opacity: 0.25;
}
#u-side-bar-0 div.menu-item.inactive a {
color: #999;
}
#u-side-bar-0 div.menu-item .sub-text {
font-size: 80%;
color: #666;
}
#u-side-bar-0 div.menu-item.sub-item {
}
#u-side-bar-0 .collapsible-block-link {
margin-right: 15px;
font-weight: bold;
}
#u-side-bar-0 .collapsible-block-unfolded-link {
border-bottom: solid 1px #600;
}
#u-side-bar-0 .collapsible-block-unfolded-link .collapsible-block-link {
margin-top: 10px;
margin-bottom: 5px;
font-size: 8pt;
color: #600;
}
#u-side-bar-0 .collapsible-block-unfolded-link .collapsible-block-link:hover {
color: #b01;
text-decoration: none;
}
#u-side-bar-0 ul{
list-style-type: none;
padding: 0 5px 0;
}
.open-menu a {
display: none !important;
pointer-events: none !important;
}
.open-menu a:hover {
display: none !important;
pointer-events: none !important;
}
@media (max-width: 1025px) {
#u-side-bar-0 {
width: 80%;
position: relative;
}
}
/* /////// */
@media (max-width: 1025px) {
#main-content {
margin: 0 5%;
}
}
@media (max-width: 1025px) {
.open-menu-0 a:hover {
text-decoration: none !important;
-webkit-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
-moz-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
-ms-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
-o-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
}
/* Special thanks for Cocoonist and Dr Devan */
/* Erase it when deleted original side-bar opening/closing style */
.open-menu, .close-menu{display:none !important;}
#side-bar {
position: fixed;
width: 229.6px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
top: 0;
left: -30em;
display: block !important;
background-color: rgba(184, 134, 134, 0.8);
z-index: 50;
-webkit-transition:left 0.5s ease-in-out 0.1s;
-moz-transition:left 0.5s ease-in-out 0.1s;
-ms-transition:left 0.5s ease-in-out 0.1s;
-o-transition:left 0.5s ease-in-out 0.1s;
transition:left 0.5s ease-in-out 0.1s;
transition-duration: 0.7s;
}
#side-bar ~ #main-content:after {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
content: '';
z-index: 40;
}
#side-bar:hover ~ #main-content:after {
visibility: visible;
opacity: 1;
transition: opacity 500ms;
}
#side-bar:before {
content: url(http://unofficial-scp-sandbox-jp.wikidot.com/local--files/nav:side-tooltest/sidebar-logo1_50px.png);
position: fixed;
left: 20px;
bottom: 10px;
width: 40px;
height: 40px;
background-color: transparent !important;
transition-duration: 0.7s;
}
#side-bar:hover {
position: fixed;
margin-left: 0;
left: 0 !important;
transition-duration: 0.5s;
}
#side-bar:hover:before {
text-decoration: none !important;
-webkit-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
-moz-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
-ms-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
-o-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
visibility: hidden;
border-radius: 50%;
transition: visibility 0.5s ease 0.1s;
transition-duration: 1s;
}
#side-bar .side-block {
padding: 1em;
margin: 1em 0.5em;
}
}
/* /////// */
@media (max-width: 1400px) {
#u-side-bar-0 {
position: fixed;
width: 229.6px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
top: 0;
right: -30em;
display: block !important;
z-index: 50;
-webkit-transition:right 0.5s ease-in-out 0.1s;
-moz-transition:right 0.5s ease-in-out 0.1s;
-ms-transition:right 0.5s ease-in-out 0.1s;
-o-transition:right 0.5s ease-in-out 0.1s;
transition:right 0.5s ease-in-out 0.1s;
transition-duration: 0.7s;
background-color: rgba(248,221,222,0.5);
}
#u-side-bar-0 ~ #main-content:after {
position: fixed;
right: 0;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
content: '';
z-index: 40;
}
#u-side-bar-0:hover ~ #main-content:after {
visibility: visible;
opacity: 1;
transition: opacity 500ms;
}
#u-side-bar-0:before {
content: url(http://unofficial-scp-sandbox-jp.wikidot.com/local--files/nav:side-tooltest/logosb3.png);
position: fixed;
right: 20px;
bottom: 10px;
width: 40px;
height: 40px;
background-color: transparent !important;
transition-duration: 0.5s;
}
/*
#u-side-bar-0:after {
content: "Hover\Ame!";
text-align: center;
white-space: pre;
color: #666;
font-family: BauhausLTDemi, 'Nanum Gothic', Arial, sans-serif;
font-size: 150%;
position: fixed;
right: 20px;
bottom: 60px;
}
*/
#u-side-bar-0:hover {
position: fixed;
margin-right: 0;
right: 0 !important;
transition-duration: 0.7s;
}
#u-side-bar-0:hover:before {
text-decoration: none !important;
-webkit-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
-moz-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
-ms-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
-o-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
visibility: hidden;
border-radius: 50%;
transition: visibility 0.5s ease 0.1s;
transition-duration: 1s;
}
/*
#u-side-bar-0:hover:after {
text-shadow: 2px 2px 11px #99e;
color: #779;
visibility: hidden;
transition: visibility 0.5s ease 0.1s;
transition-duration: 1s;
}
*/
#u-side-bar-0 .side-block {
padding: 1em;
margin: 1em 0.5em;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
}
.useful-pages,
.octool {
border: 1px solid #aaa293;
background: #fff;
margin-bottom: 2px;
}
.aboutbox {
background: #fff;
margin: 6px 0;
}
.ocbutton {
width: 50%;
text-align: center;
}
.ocbutton a {
transition-duration: 1.5s;
display: inline-block;
width: 75px;
white-space: nowrap;
padding: 0.3em 0.6em;
font-weight: normal;
font-size: 90%;
color: #666!important;
border: 1px solid #aaa293;
border-radius: 3px;
background-color: #fff3b8;
}
.ocbutton a:hover,
.ocbutton a:active {
background-color: #f58282;
}
.ocbutton-wrap {
margin-top: 10px;
padding: 0;
border: none;
width: 100%;
max-width: 100% !important;
}
.ocinfo {
cursor: default;
font-size: 170%;
font-weight: normal;
color: rgba(105, 95, 135, 0.73);
text-shadow: 0 0 5px rgba(55, 55, 55, 0.73);
}
.ocinfo ~ .ocinfo-box {
display: none;
}
.ocinfo:hover ~ .ocinfo-box {
position: absolute;
display: inline;
margin: 0px 0px;
height: auto;
width: auto;
background: #fff;
border: 1px solid #000;
color: initial;
font-size: 0.8em;
text-shadow: none;
padding: 1em;
}
#u-side-bar-0 .octool .heading {
width: 60%;
text-align: center;
}
#u-side-bar-0 .octool iframe {
width: 50%;
}
#u-side-bar-0 ::-webkit-scrollbar {
width: 7px;
}
#u-side-bar-0 ::-webkit-scrollbar-track {
background: transparent;
border: none;
box-shadow: none;
}
#u-side-bar-0 ::-webkit-scrollbar-thumb {
background: rgba(250,240,250,0.6);
border-radius: 7px;
box-shadow: inset 0 0 4px rgba(60,60,60,0.4);
}
@media (min-width: 768px) {
.octool {
height: 400px;
overflow-y: scroll;
overflow-x: visible;
}
.useful-pages {
height: 300px;
overflow-y: scroll;
overflow-x: visible;
}
}
.error-block {
display: none !important;
padding: 1em;
margin: 1em;
border: 1px solid #FAA;
}
.toc-box {
padding: 0;
}
.toc-box #toc {
font-size: 90%;
min-width: 80px;
max-width: 210px;
max-height: 300px;
overflow-y: scroll;
word-break: break-all;
border: none!important;
background-color: transparent;
}
.toc-box #toc #toc-list {
max-height: 300px!important;
overflow-y: scroll;
}
.toc-box #toc #toc-action-bar,
.toc-box #toc #toc-action-bar a {
display: none!important;
}
.toc-box {
margin: 0;
padding: 0;
display: table;
}#u-side-bar-0 .toc-wrap .collapsible-block-unfolded-link {border-bottom: none;}#u-side-bar-0 .toc-wrap .collapsible-block-unfolded-link .collapsible-block-link {color: #b01;}
[[/module]]
[[/div]]
Seiten Revision: 1, zuletzt bearbeitet: 30 Oct 2018 13:04