Widget:TestTabs: Difference between revisions

From Unforgotten Realms Wiki
Jump to navigationJump to search
← Older edit
Spooky (talk | contribs)
Bureaucrats, Interface administrators, Administrators
3,787 edits
VisualWikitext
imported>Pillowkeeper
No edit summary
m Add test pages tracking category
 
(93 intermediate revisions by one other user not shown)
Line 1: Line 1:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<script src="https://unpkg.com/tippy.js@1.3.0/dist/tippy.js"></script>
<script>
tippy('.tltp')
</script>
 
<style>
<style>
#charPanel button {
.tippy-touch{cursor:pointer!important}.tippy-notransition{-webkit-transition:none!important;transition:none!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:9999;outline:0;-webkit-transition-timing-function:cubic-bezier(.165,.84,.44,1);transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none}.tippy-popper.html-template{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] [x-arrow]{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 9px}.tippy-popper[x-placement^=top] [x-arrow].arrow-small{border-top:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;bottom:-5px}.tippy-popper[x-placement^=top] [x-arrow].arrow-big{border-top:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.tippy-popper[x-placement^=top] [x-circle]{-webkit-transform-origin:0 33%;transform-origin:0 33%}.tippy-popper[x-placement^=top] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%);opacity:1}.tippy-popper[x-placement^=top] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow]{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-top:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow]{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-top:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-top:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(90deg);transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] [x-arrow]{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 9px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small{border-bottom:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;top:-5px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big{border-bottom:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;top:-10px}.tippy-popper[x-placement^=bottom] [x-circle]{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%);opacity:1}.tippy-popper[x-placement^=bottom] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-5%);transform:scale(.15) translate(-50%,-5%);opacity:0}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow]{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-bottom:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-bottom:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow]{border-bottom:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-bottom:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-bottom:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(10px) rotateX(0);transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(-90deg);transform:translateY(0) rotateX(-90deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=left] [x-arrow]{border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;margin:6px 0}.tippy-popper[x-placement^=left] [x-arrow].arrow-small{border-left:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;right:-5px}.tippy-popper[x-placement^=left] [x-arrow].arrow-big{border-left:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;right:-10px}.tippy-popper[x-placement^=left] [x-circle]{-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=left] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=left] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow]{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-left:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-left:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow]{border-left:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-left:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-left:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(-10px) rotateY(0);transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(-90deg);transform:translateX(0) rotateY(-90deg)}.tippy-popper[x-placement^=left] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper[x-placement^=right] [x-arrow]{border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;margin:6px 0}.tippy-popper[x-placement^=right] [x-arrow].arrow-small{border-right:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;left:-5px}.tippy-popper[x-placement^=right] [x-arrow].arrow-big{border-right:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;left:-10px}.tippy-popper[x-placement^=right] [x-circle]{-webkit-transform-origin:-50% 0;transform-origin:-50% 0}.tippy-popper[x-placement^=right] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=right] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow]{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-right:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow]{border-right:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-right:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-right:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(10px) rotateY(0);transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(90deg);transform:translateX(0) rotateY(90deg)}.tippy-popper[x-placement^=right] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper .tippy-tooltip.transparent-theme{background-color:rgba(0,0,0,.7)}.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill]{background-color:transparent}.tippy-popper .tippy-tooltip.light-theme{color:#26323d;box-shadow:0 4px 20px 4px rgba(0,20,60,.1),0 4px 80px -8px rgba(0,20,60,.2);background-color:#fff}.tippy-popper .tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.95rem;padding:.4rem .8rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip--small{padding:.25rem .5rem;font-size:.8rem}.tippy-tooltip--big{padding:.6rem 1.2rem;font-size:1.2rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-interactive]{pointer-events:auto}.tippy-tooltip[data-inertia]{-webkit-transition-timing-function:cubic-bezier(.53,1,.36,.85);transition-timing-function:cubic-bezier(.53,2,.36,.85)}.tippy-tooltip [x-arrow]{position:absolute;width:0;height:0}.tippy-tooltip [x-circle]{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:130%;width:calc(110% + 2rem);left:50%;top:50%;z-index:-1;overflow:hidden;-webkit-transition:all ease;transition:all ease}.tippy-tooltip [x-circle]:before{content:"";padding-top:90%;float:left}@media (max-width:450px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}}
        background-color: #b36e14;
        border: 1px solid #64320d;
        outline: none;
        cursor: pointer;
        padding: 0px 10px;
        transition: 0.3s;
        display: inline;
        color: white;
        height: 25px;
    }
#breaker {
        display: block;
        text-align: left;
        font-size: 20px;
        font-weight: bold;
        padding: 5px;
    }
 
div.charFilter select{
border: 1px solid #000;
    color: #fff;
    background: #444;
    position: relative;
    width: 150px;
    float: left;
    height: 25px;
    margin-right: 5px;
}
div.charFilter{
display: inline-block;
    padding-left: 15px;
padding-right: 15px;
    width: 100%;
}
div.filterLeft{
float: left;
}
div.filterRight{
float: right;
}
div.charBox {
        display: inline-block;
    padding: 3px;
    position: relative;
    width: calc((100% / 6) - 3px);
    border: 2px solid rgba(0,0,0,0.0);
    filter: opacity(70%);
    transition: filter .6s;
border-radius:7px;
overflow: hidden;
    margin-bottom:-6px;
}
.charBox:hover .charName, .charBox.hovered .charName {
    display: block;
}
div#charPanel {
    text-align: center;
  background: rgba(68,68,68,0.2);
  border-radius: 15px;
  border: 2px solid #8b4513;
  padding: 10px;
}
 
div.charBox a{
display: block;
    height: 100%;
    color: #F9E4CA;
}
.charBox.hovered {
    filter: opacity(100%);
 
}
 
.charBox:hover {
border-color:#F9E4CA;
    filter: opacity(100%);
}
 
div.charName{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: bold;
    display: none;
    background: rgba(15,15,15,0.7);
    padding: 3px;
  font-family: "Cinzel Decorative";
 
}
 
div.charBox img {
width:150px;
}
</style>
</style>
 
[[Category:Test Pages]]
<div id="charPanel">
<img id="loading" src="/images/4/42/Loading.gif">
<div id="charHolder"></div>
</div>
 
<script>
$(window).on("load", function() {
$("#loading").remove();
$("#charHolder").show();
$(".charFilter").show();
console.log("hi");
});
$("#charHolder").hide();
 
var series = [];
 
<!--{foreach from=$character key=key item=data}-->
var obj = {};
  obj["name"] = "<!--{$data.name|escape:'javascript'}-->";
  obj["image"] = "<!--{$data.image}-->";
  obj["link"] = "<!--{$data.link|escape:'javascript'}-->";
  obj["campaigns"] = <!--{$data.campaigns}-->;
  series.push(obj);
<!--{/foreach}-->
for(var i = 0; i < series.length; i++){
var campaigns = "";
for(var j = 0; j < series[i].campaigns.length; j++){
campaigns = campaigns + " " + series[i].campaigns[j];
}
campaigns = campaigns.substring(1);
$("div#charHolder").append("<div class='charBox' data-campaigns='" + campaigns + "' data-name='" + series[i].name + "'><a class='charLink' href='" + series[i].link +"'> <img src='" + series[i].image + "'> <div class='charName'>" + series[i].name + "</div></a></div>");
 
}
$("div#charPanel").prepend("<div class='charFilter'><div class='filterLeft'></div> <div class='filterRight'></div></div>");
$("div.filterLeft").append("<select id='mainFilter'><option>Season 1</option><option>Season 2</option><option>Season 3</option>");
$("div.filterRight").append("<select id='seasonFilter-s1'><option>Season 1 Characters</option><option>Band of Thieves</option> <option>Porc Hunters</option> <option>The Jewel of the Dingo Isles</option> <option>The Sunswords</option> <option>The Unseen Rogues</option> <option>Kobold Headhunters</option> <option>Zarlin Catacombs</option> <option>The New Crew</option> <option>Silvermine Mountains</option><option>Guild of Explorers</option><option>Battle of the Bards</option><option>The Blood Snake Queen</option><option>The Death of Virgo</option><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option></select> <select id='seasonFilter-s2'><option>Season 2 Characters</option> <option>Woodcarvers</option> <option>Okagnoma Guild Hall</option> <option>Murder Bros</option> <option>The Cobblers</option> <option>The Tower of Ultimate Wizardry: Chapter One</option> <option>Unexpected Discovery</option> <option>Buckeroos</option> <option>Fall of Dundinborough</option> <option>Den of Devils</option> <option>The Skeleton King</option><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option></select> <select id='seasonFilter-s3'><option>The Grand Paladin Order</option></select>");
$("#mainFilter").after("<button id='nametoggle' onclick='toggleNames(this)'>Toggle Names</button>");
$(".charFilter").hide();
$("div.charBox").hide();
/* Default */
var allS1 = $(".charBox[data-campaigns*='s1c']");
var allS2 = $(".charBox[data-campaigns*='s2c']");
var allS3 = $(".charBox[data-campaigns*='s3c']");
$("div.filterRight select:not(#seasonFilter-s1)").hide();
$(".charBox:not([data-campaigns*='s1c'])").hide();
 
$("#mainFilter").change(function() {
$("div.filterRight select").hide();
if ($(this).val() == "Season 1") {
$("#seasonFilter-s1").show();
$('div.filterRight select:not(#seasonFilter-s1)').prop('selectedIndex', 0);
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);
}
$("div.charBox[data-campaigns*='s1'").show();
}
if ($(this).val() == "Season 2") {
$("#seasonFilter-s2").show();
$('div.filterRight select:not(#seasonFilter-s2)').prop('selectedIndex', 0);
$("#charHolder").empty();
for(var i = 0; i < allS2.length; i++){
$("#charHolder").append(allS2[i]);
}
$("div.charBox[data-campaigns*='s2'").show();
}
if ($(this).val() == "Season 3") {
$("#seasonFilter-s3").show();
$('div.filterRight select:not(#seasonFilter-s3)').prop('selectedIndex', 0);
$("#charHolder").empty();
for(var i = 0; i < allS3.length; i++){
$("#charHolder").append(allS3[i]);
}
$("div.charBox[data-campaigns*='s3'").show();
}
});
 
$("#seasonFilter-s1").change(function() {
$("div.charBox").hide();
$("span#breaker").remove();
if ($(this).val() == "Season 1 Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);
}
$("div.charBox[data-campaigns*='s1'").show();}
if ($(this).val() == "Band of Thieves") {
$("div.charBox[data-campaigns*='s1c1-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c1-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c1-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c1-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Porc Hunters") {
$("div.charBox[data-campaigns*='s1c2-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c2-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c2-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c2-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Jewel of the Dingo Isles") {
$("div.charBox[data-campaigns*='s1c3-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c3-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c3-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c3-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Sunswords") {
$("div.charBox[data-campaigns*='s1c5-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c5-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c5-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c5-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Unseen Rogues") {
$("div.charBox[data-campaigns*='s1c6-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c6-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c6-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c6-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Kobold Headhunters") {
$("div.charBox[data-campaigns*='s1c7-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c7-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c7-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c7-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Zarlin Catacombs") {
$("div.charBox[data-campaigns*='s1c8-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c8-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c8-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c8-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The New Crew") {
$("div.charBox[data-campaigns*='s1c9-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c9-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c9-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c9-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Silvermine Mountains") {
$("div.charBox[data-campaigns*='s1c10-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c10-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c10-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c10-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Guild of Explorers") {
$("div.charBox[data-campaigns*='s1c11-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c11-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c11-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c11-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Battle of the Bards") {
$("div.charBox[data-campaigns*='s1c12-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c12-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c12-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c12-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Blood Snake Queen") {
$("div.charBox[data-campaigns*='s1c13-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c13-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c13-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c13-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Death of Virgo") {
$("div.charBox[data-campaigns*='s1c14-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c14-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c14-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c14-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Player Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 14; i++){
$("div.charBox[data-campaigns*='s1c" + i + "-p']").show();}
}
if ($(this).val() == "NPC Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 14; i++){
$("div.charBox[data-campaigns*='s1c" + i + "-n']").show();}
}
if ($(this).val() == "Minor Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 14; i++){
$("div.charBox[data-campaigns*='s1c']").show();}
$("div.charBox a:not([href*='Minor_Characters'])").parent().hide();
}
});
 
$("#seasonFilter-s2").change(function() {
$("div.charBox").hide();
$("span#breaker").remove();
if ($(this).val() == "Season 2 Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS2.length; i++){
$("#charHolder").append(allS2[i]);
}
$("div.charBox[data-campaigns*='s2'").show();}
if ($(this).val() == "Woodcarvers") {
$("div.charBox[data-campaigns*='s2c1-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c1-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c1-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c1-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Okagnoma Guild Hall") {
$("div.charBox[data-campaigns*='s2c2-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c2-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c2-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c2-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Murder Bros") {
$("div.charBox[data-campaigns*='s2c3-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c3-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c3-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c3-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Cobblers") {
$("div.charBox[data-campaigns*='s2c4-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c4-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c4-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c4-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Tower of Ultimate Wizardry: Chapter One") {
$("div.charBox[data-campaigns*='s2c5-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c5-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c5-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c5-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Unexpected Discovery") {
$("div.charBox[data-campaigns*='s2c6-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c6-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c6-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c6-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Buckeroos") {
$("div.charBox[data-campaigns*='s2c7-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c7-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c7-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c7-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Fall of Dundinborough") {
$("div.charBox[data-campaigns*='s2c8-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c8-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c8-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c8-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Den of Devils") {
$("div.charBox[data-campaigns*='s2c9-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c9-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c9-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c9-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Skeleton King") {
$("div.charBox[data-campaigns*='s2c10-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c10-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c10-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c10-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Player Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS2.length; i++){
$("#charHolder").append(allS2[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 10; i++){
$("div.charBox[data-campaigns*='s2c" + i + "-p']").show();}
}
if ($(this).val() == "NPC Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS2.length; i++){
$("#charHolder").append(allS2[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 10; i++){
$("div.charBox[data-campaigns*='s2c" + i + "-n']").show();}
}
if ($(this).val() == "Minor Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS2.length; i++){
$("#charHolder").append(allS2[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 10; i++){
$("div.charBox[data-campaigns*='s2c']").show();}
$("div.charBox a:not([href*='Minor_Characters'])").parent().hide();
}
 
});
 
function toggleNames(val){
if(val.id = "nametoggle"){
        if($(val).css("background-color") == "rgb(179, 110, 20)"){
            $(".charName").css("display", "block");
            $(".charBox").css('filter', 'opacity(100%)');
            $("#nametoggle").css('background-color', '#89540F');
        } else {
            $(".charName").css("display", "");
            $(".charBox").css("filter", "");
            $("#nametoggle").css('background-color', '#b36e14');
              }
}
}
 
</script>

Latest revision as of 16:01, 28 April 2026

<script src="https://unpkg.com/tippy.js@1.3.0/dist/tippy.js"></script> <script> tippy('.tltp') </script>

<style> .tippy-touch{cursor:pointer!important}.tippy-notransition{-webkit-transition:none!important;transition:none!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:9999;outline:0;-webkit-transition-timing-function:cubic-bezier(.165,.84,.44,1);transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none}.tippy-popper.html-template{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] [x-arrow]{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 9px}.tippy-popper[x-placement^=top] [x-arrow].arrow-small{border-top:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;bottom:-5px}.tippy-popper[x-placement^=top] [x-arrow].arrow-big{border-top:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.tippy-popper[x-placement^=top] [x-circle]{-webkit-transform-origin:0 33%;transform-origin:0 33%}.tippy-popper[x-placement^=top] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%);opacity:1}.tippy-popper[x-placement^=top] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow]{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-top:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow]{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-top:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-top:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(90deg);transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] [x-arrow]{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 9px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small{border-bottom:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;top:-5px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big{border-bottom:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;top:-10px}.tippy-popper[x-placement^=bottom] [x-circle]{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%);opacity:1}.tippy-popper[x-placement^=bottom] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-5%);transform:scale(.15) translate(-50%,-5%);opacity:0}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow]{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-bottom:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-bottom:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow]{border-bottom:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-bottom:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-bottom:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(10px) rotateX(0);transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(-90deg);transform:translateY(0) rotateX(-90deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=left] [x-arrow]{border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;margin:6px 0}.tippy-popper[x-placement^=left] [x-arrow].arrow-small{border-left:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;right:-5px}.tippy-popper[x-placement^=left] [x-arrow].arrow-big{border-left:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;right:-10px}.tippy-popper[x-placement^=left] [x-circle]{-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=left] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=left] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow]{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-left:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-left:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow]{border-left:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-left:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-left:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(-10px) rotateY(0);transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(-90deg);transform:translateX(0) rotateY(-90deg)}.tippy-popper[x-placement^=left] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper[x-placement^=right] [x-arrow]{border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;margin:6px 0}.tippy-popper[x-placement^=right] [x-arrow].arrow-small{border-right:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;left:-5px}.tippy-popper[x-placement^=right] [x-arrow].arrow-big{border-right:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;left:-10px}.tippy-popper[x-placement^=right] [x-circle]{-webkit-transform-origin:-50% 0;transform-origin:-50% 0}.tippy-popper[x-placement^=right] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=right] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow]{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-right:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow]{border-right:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-right:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-right:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(10px) rotateY(0);transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(90deg);transform:translateX(0) rotateY(90deg)}.tippy-popper[x-placement^=right] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper .tippy-tooltip.transparent-theme{background-color:rgba(0,0,0,.7)}.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill]{background-color:transparent}.tippy-popper .tippy-tooltip.light-theme{color:#26323d;box-shadow:0 4px 20px 4px rgba(0,20,60,.1),0 4px 80px -8px rgba(0,20,60,.2);background-color:#fff}.tippy-popper .tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.95rem;padding:.4rem .8rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip--small{padding:.25rem .5rem;font-size:.8rem}.tippy-tooltip--big{padding:.6rem 1.2rem;font-size:1.2rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-interactive]{pointer-events:auto}.tippy-tooltip[data-inertia]{-webkit-transition-timing-function:cubic-bezier(.53,1,.36,.85);transition-timing-function:cubic-bezier(.53,2,.36,.85)}.tippy-tooltip [x-arrow]{position:absolute;width:0;height:0}.tippy-tooltip [x-circle]{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:130%;width:calc(110% + 2rem);left:50%;top:50%;z-index:-1;overflow:hidden;-webkit-transition:all ease;transition:all ease}.tippy-tooltip [x-circle]:before{content:"";padding-top:90%;float:left}@media (max-width:450px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}} </style>

Retrieved from "https://URwiki.phijkchu.com/index.php?title=Widget:TestTabs&oldid=54188"