Free CSS, Userscripts, etc

[sc=counters] [/sc] [style] .fillcounter(@collecting,@image,@progress,@goal){.icon:after{content:url(@image)}.icon:before{height:calc(100% - 100*@progress/@goal)}.quantity:before{content:"" + @progress}h3:before{float:left;content:url(@image);padding:4px;background:@col-bg3;border:1px solid @col-border1;border-radius:4px;margin-right:0.5rem}h3{display:block;flex-flow:row wrap;text-align:left;margin-bottom:.8rem}h3:after{font-weight:400;font-size:1rem;display:block;content:@progress + "/" + @goal + "\A " + @collecting}}.counters{position:relative;margin:-2px;display:flex;flex-flow:row wrap;align-items:flex-end;span.bbcode_tooltip{border-bottom:none}.tooltip_content{left:0;bottom:0;transform:translate3d(0,100%,0)}}.counter{position:static !important;text-align:center;margin:0 2px}.counter .icon{background: linear-gradient(to bottom, #77c7d7, #d7ffbf); position:relative;overflow:hidden;display:inline-block;&:before{position:absolute;content:"";top:0;left:0;width:100%;background:rgba(0,0,0,0.75)}}.counter > .quantity{display:block} [/style]

[sc=counters] [sc=counter umbreon][pit="[sc=icon][/sc][sc=quantity][/sc]"][h3]Dark Gems ★[/h3]Mytrhil soon :'D[/pit][/sc] [/sc]

[style] .umbreon { .fillcounter( "Dark Gems", "https://pfq-static.com/img/pkmn/o/d/t.png", [math][inventory=Dark Gem]+10*[inventory=Medium Dark Gem][/math], 100 ) } /*The long block from above goes here*/ [/style]

species = `Skiddo` gender = `f` hatched_sprite = `https://pfq-static.com/img/pkmn/t/u/9/x.png/t=1543796180` gem = 'Grass' pokemon_id = `F8Cgx` /* ----- */ c = pokemon_id a = $(`[data-pid="${c}"]`) b = { gems: `<img src="https://pfq-static.com/img/items/gem_${gem.toLowerCase()}.png/t=1369079719" class="itemsprite" alt="${gem} Gem" data-tooltip/>`, name: `<a class="summarylink" draggable="false" href="/summary/F8CqW" style="width:184px">${species}</a><img src="https://pfq-static.com/img/pkmn/gender_${gender}.png/t=1401213007" title="[F]"/>`, sprite: hatched_sprite, } n = $(`[data-pid="${c}"] > div.pkmn`) e = hatched_sprite v = { cracks : "https://pfq-static.com/img/pkmn/cracks.png", //shiny1 : "https://pfq-static.com/img/particles/shiny1.png", //shiny2 : "https://pfq-static.com/img/particles/shiny2.png", //shiny1 : "https://pfq-static.com/img/particles/albino1.png", //shiny2 : "https://pfq-static.com/img/particles/albino2.png", shiny1 : "https://pfq-static.com/img/particles/melan1.png", shiny2 : "https://pfq-static.com/img/particles/melan2.png", } q = function () { a.find(">.pkmn").html('<div class="pokemon" style="background-image: url(\'' + b.sprite + "')\"></div>"); a.find(">.name").html(b.name); a.find(">.expbar").css("visibility", "hidden"); a.find(">.action").html('<table><tr><td>Egg hatched!<br /><span class="hatchgems">' + b.gems + "</span><button>OK</button></td></tr></table>"); a.find(">.action button").on("click", function () { a.css("opacity", 0); var b = $(this); b.prop("disabled", !0); setTimeout(function () { ajax("summary/load", { id: c, smallberries: !0 }).success(function (b) { b = $(b.html); a.html(b.html()); a.css("opacity", "") }).failure(function () { b.prop("disabled", !1); a.css("opacity", ""); return !0 }) }, 500) }); a.trigger("pfq-hatch") } $.PFQanim.hatch(n,e,v,q)

[sc=tabbed_interface horizontal] [ul] [li]One[/li] [li]Two[/li] [li]Three[/li] [li]Four[/li] [/ul] [sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat tempor felis vitae consequat. Donec at sapien sapien. Nulla lectus ipsum, ultricies id maximus eget, luctus id tellus.[/sc] [sc=tab]Donec pellentesque ligula sit amet purus efficitur suscipit. Nunc nisi arcu, vulputate vel tortor et, volutpat malesuada lorem.[/sc] [sc=tab]Etiam fermentum erat ac ultrices elementum. Ut at nibh justo. Vestibulum odio orci, sodales eu sapien et, consequat viverra risus.[/sc] [sc=tab]Duis posuere sem enim, sit amet iaculis purus accumsan finibus. Proin ante arcu, ullamcorper a neque in, tempor ultricies metus. Donec at ipsum interdum, elementum mauris quis, efficitur dolor.[/sc] [/sc] [style] /* ignore whitespace between elements */ .tabbed_interface { white-space: nowrap; &>ul>li, &>div { white-space: pre-line; } } /* reset styles */ .tabbed_interface, .tabbed_interface > ul, .tabbed_interface > ul > li, .tabbed_interface > div { padding: 0; margin: 0; background: none; box-shadow: none; border: none; border-radius: 0; } .tabbed_interface { --tab-height: 50px; --tab-width: 50px; & > ul { position: relative; min-height: var(--tab-height); /* previous tab */ & > li { position: absolute; height: var(--tab-height); width: var(--tab-width); background: black; color: white; } /* current tab */ & > li.tab-active { display: none; } /* next tab */ & > li.tab-active + li { left: 50px; } /* after the next tab */ & > li.tab-active + li ~ li { display: none; } } } [/style]