Sticky Tool by 7happy7
[[div id="u-toc-open" style="display: none;"]]
[[/div]]
[[div class="fixed-controls"]]
[[collapsible hideLocation="bottom"]]
[[a href="{$home}" class="fxc-row {$home}-icon fxc-home"]]
[[span_ class="fa fa-home"]]@<&nbsp;>@[[/span]]
[[/a]]
[[a href="#header" class="fxc-row"]]
[[span_ class="fa fa-arrow-up"]]@<&nbsp;>@[[/span]]
[[/a]]
[[a href="#page-options-container" class="fxc-row"]]
[[span_ class="fa fa-arrow-down"]]@<&nbsp;>@[[/span]]
[[/a]]
[[span class="fxc-row"]]
[[button edit class="fa fa-edit"]]
[[/span]]
[[span class="fxc-row"]]
[[button source class="fa fa-file-code"]]
[[/span]]
[[span class="fxc-row"]]
[[button history class="fa fa-history"]]
[[/span]]
[[span class="fxc-row"]]
[[button files class="fa fa-folder"]]
[[/span]]
[[a href="#u-toc-open" class="fxc-row ontoc fxc-toc"]]
[[span_ class="fa fa-file-alt"]]@<&nbsp;>@[[/span]]
[[/a]]
[[a href="#asap" class="fxc-row offtoc fxc-toc"]]
[[span_ class="fa fa-file-alt"]]@<&nbsp;>@[[/span]]
[[/a]]
[[/collapsible]]
[[/div]]
[[div class="toc-box"]]
[[div class="pseudo-title"]]
[[a href="#asap" style="font-weight: bold; color: #444; font-size: 0.85em;"]]Table of Contents[[/a]]
[[/div]]
----
[[toc]]
[[/div]]

[[module CSS]]
/* 
"Sticky Sandbox Tool"

Author:
7happy7 (http://www.wikidot.com/user:info/7happy7)

Special Thanks to Advice for "the tips box":
Croquembouche (http://www.wikidot.com/user:info/croquembouche)

CC BY-SA 3.0
http://creativecommons.org/licenses/by-sa/3.0/
 */

@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

/* main */
.fixed-controls .fxc-row.false-icon {
  pointer-events: none!important;
}

.fixed-controls .fxc-row.false-icon .fa-home {
  color: #ddd!important;
}

#u-toc-open:target ~ .fixed-controls .collapsible-block-unfolded-link .collapsible-block-link {
  pointer-events: none!important;
  color: #ddd!important;
  background-color:#999;
  transition: color 1s,background-color 1s
}

.fixed-controls + .toc-box {
  right: -220px;
  opacity: 0;
  transition: all 1.5s;
  pointer-events: none;
}

#u-toc-open:target ~ .toc-box{right:-1px;opacity:1;transition:all 1.5s;  pointer-events: auto;}#u-toc-open:target ~ .fixed-controls .ontoc{display:none}.fixed-controls a.offtoc{display:none}#u-toc-open:target ~ .fixed-controls .offtoc{display:block}#u-toc-open:target ~ .fixed-controls{right:220px;transition:all 1.2s}a[name="page-top"][target] + div .fixed-controls a:not(.collapsible-block-link),a[name="page-top"][target] + div .fixed-controls span{pointer-events:none!important;color:#ddd!important;transition:color 1s}a[name="page-top"][target] + div .fixed-controls + .toc-box{right:-220px!important;transition:all 1.5s}a[name="page-top"][target] + div .fixed-controls{right:5px!important;transition:all 1.5s}a[name="page-top"][target] + div .fixed-controls .collapsible-block-link{pointer-events:auto!important;background-color:#444;color:#fff;transition:color 1s,background-color 1s}.fixed-controls .fxc-row,.fixed-controls a{-webkit-tap-highlight-color:rgba(0,0,0,0)}.fixed-controls .collapsible-block-folded,.fixed-controls .collapsible-block-unfolded-link{height:40px;margin-top:10px}.fixed-controls a.collapsible-block-link{display:block!important;height:30px;background-color:#444;text-align:center;color:#fff;border-radius:10%;transition:color 1s,background-color 1s}.fixed-controls .collapsible-block-content{border:#ddd 1px solid;}.fixed-controls a.fa{display:block;width:100%;height:100%;line-height:48.73px}span.fxc-row{padding:0;padding-top:2px}@media (max-width: 767px){a[name="page-top"][target] + div .fixed-controls{right:-60px!important;transition:all 1.5s}}.fixed-controls .fxc-row{position:relative;z-index:2;cursor:pointer}.fixed-controls .fa{font-size:0;color:#444}.fixed-controls .fa:before{font-size:13px}.fixed-controls{font-family: verdana,arial,helvetica,sans-serif!important; position:fixed;z-index:3;bottom:20px;right:5px;margin-top:-100px;width:50px;font-size:0;transition:right 1.5s}.fixed-controls a:hover {animation: blink-2 0.8s ease-in-out infinite alternate;}.fxc-row{display:block;text-align:center;background:#fff;padding:20px 0;border-bottom:1px solid #ececec;color:#444;cursor:pointer}.fixed-controls .fxc-row:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:#272828;margin:0;padding:0;border:none;-webkit-transform:scale(0.01);-moz-transform:scale(0.01);-ms-transform:scale(0.01);transform:scale(0.01)}.fixed-controls .fxc-row > .fa{z-index:3;position:relative;font-weight:400}.fixed-controls .fxc-row:hover > .fa{color:#fff}.fixed-controls .fxc-row:after,.fixed-controls .fxc-row > .fa{-webkit-transition:.15s linear;-ms-transition:.15s linear;-moz-transition:.15s linear;-o-transition:.15s linear;transition:.15s linear}.fixed-controls .fxc-row:hover:after{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa:hover,.fixed-controls a.collapsible-block-link{text-decoration:none}.fa-home:before{content:"\f015"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-edit:before{content:"\f044"}.fa-file-code:before{content:"\f1c9"}.fa-history:before{content:"\f1da"}.fa-folder:before{content:"\f07b"}.fa-print:before{content:"\f02f"}.fixed-controls .collapsible-block-folded a.collapsible-block-link:before{content:"\f204"}.fixed-controls .collapsible-block-unfolded-link a.collapsible-block-link:before{content:"\f205"}.fa-file-alt:before{content:"\f15c"}.fixed-controls a.collapsible-block-link:before{position:relative;top:calc(50% - 10px);font:normal normal normal 14px/1 FontAwesome;font-size:20px;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* toc */
.toc-box #toc-list div[style="margin-left: 3em;"] + div[style="margin-left: 2em;"] {margin-top: 0.3em;}.toc-box #toc-list div[style="margin-left: 5em;"] + div[style="margin-left: 4em;"] {margin-top: 0.2em;}html {scroll-behavior: smooth;}.narrow-box {display: none;}.toc-box #toc-list div[style="margin-left: 3em;"] a:before,.toc-box #toc-list div[style="margin-left: 5em;"] a:before {content: ": ";}.toc-box #toc-list div[style="margin-left: 1em;"] {margin-left: 0em!important; font-weight: bold; margin-top: 0.6em;}.toc-box #toc-list div[style="margin-left: 2em;"] {margin-left: 0.5em!important;}.toc-box #toc-list div[style="margin-left: 3em;"] {font-size: 95%; margin-left: 0.5em!important;}.toc-box #toc-list div[style="margin-left: 4em;"] {font-size: 95%; margin-left: 1.3em!important;}.toc-box #toc-list div[style="margin-left: 5em;"] {font-size: 95%; margin-left: 1.3em!important;}.toc-box #toc-list div[style="margin-left: 6em;"] {font-size: 95%; margin-left: 2.125em!important;}.toc-box #toc-list {height: 374px!important;overflow-y: scroll;}.toc-box {position: fixed;right: 54px;bottom: 57px;padding-left: 0;padding-right: 0; z-index: 9999;}.toc-box .pseudo-title {margin: 0.2em 0;padding: 0 2em;text-align: center;}.toc-box .pseudo-title a:hover {color: #b01!important;}.toc-box hr {margin: 0;padding: 0;background-color: transparent;border: none;border-bottom: 1px solid #ececec;}.toc-box #toc {font-size: 95%;width: 202px;word-break: break-all; border: none!important;margin: 0 auto 0 0; background-image: none!important; background-color: transparent!important;}.toc-box #toc #toc-list a {color: #b01!important;}.toc-box #toc .title,.toc-box #toc #toc-action-bar,.toc-box #toc #toc-action-bar a {display: none!important;}.toc-box {margin: 1em auto 1em 0;padding: 0em 0.5em;border:1px solid #ddd; border-radius: 7px;background:#fff; display: table;}.toc-box .collapsible-block-unfolded-link,.toc-box .collapsible-block-folded {text-align: center;}

/* the tips box */
.fa:hover:after, .fxc-row:hover:before {position: absolute;right: 100%;display: inline-block;height: 16px!important;color: #b01!important;padding-top: 1.5px;font-size: 13px!important;font-weight: bold;text-align: center;text-shadow: #fff 0.5px 0.5px 0, #fff -0.5px -0.5px 0, #fff -0.5px 0.5px 0, #fff 0.5px -0.5px 0, #fff 0px 0.5px 0, #fff  0-0.5px 0, #fff -0.5px 0 0, #fff 0.5px 0 0; pointer-events: none;}
.fxc-home:hover:before {content: "Home"; width: 45px; right: 120%; top: 45%;}
.fa-edit:hover:after {content: "Edit"; width: 40px;}
.fa-file-code:hover:after {content: "Page Source"; width: 100px;}
.fa-history:hover:after {content: "History"; width: 55px; right: 105%;}
.fa-folder:hover:after {content: "Files"; width: 40px;}
.fxc-toc:hover:before {content: "Table of Contents"; width: 130px; right: 110%; top: 45%;}

#u-side-bar-0 .toc-box {
display: none!important;
}

@keyframes blink-2 {
0% {text-shadow: none;}
50%, 100% {text-shadow: -1px 0px 2px rgba(255, 255, 255, 0.83), 1px 0px 2px rgba(255, 255, 255, 0.83)}
}
[[/module]]
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License