Free CSS, Userscripts, etc

Of course, it's alright! There was misunderstanding, and I didn't expect an apology from you at all. That's very kind! Thank you again

Hi drwho!! I love your block feature!! Is there anyway to incorporate a way to hide the person you blocked profile picture? Keep up the great work!!

Hi Terabbit, thank you so much!! Sounds like a great idea. update: done I'll test all the features tomorrow, then ask for an update on the site. thank you! Edit: it has been updated on site, thank you!

I wrote a little script today. It adds a button to your PM convos It walks through your conversation and shows you your 20 most used words with that person. To install/upgrade the script click here: https://gitlab.com/alythal/pfq-stuff/-/raw/master/messageHistory.user.js The source code is best viewed here: https://gitlab.com/alythal/pfq-stuff/-/blob/master/messageHistory.user.ts The script has to load all the pages and waits 1s between each page load to avoid making too many requests. So if you have 80 pages of conversation it'll take at least 80 seconds to finish. Have fun! Feedback welcome as usual! TBH this sounded like a fun idea at first but I found the results less impressive. Anyway here it is and I'll let you make up your own mind.

I dug through some PMs from 4-5 years ago. After cringing at some of the stuff I wrote, I actually found this template which is mobile friendly! It's a clone of the Pokedex look and I'm posting it here as F2U. VT323 font by Peter Hull on Google Fonts Sableye image hosted by Bulbapedia Pastebin link

Amazing scripts as always!

Thank you so much Katie! ^_^ I found another old script and converted it to a userscript! It adds a button to the page where you create a new skin. It lets you clone another user's skin so you can have your own copy to edit! Set the skin you want to clone as your active skin, go to create a new skin and use the button! > Tampermonkey install/upgrade link > Create a new skin

How to make an analog clock clock with BBCode+CSS

This post explains how you can make an analog clock using CSS3 animations and BBCode. I highly recommend the MDN article Using CSS animations which gives you all the tools you need to work with animations. But this clock depends on some PFQ-specific quirks so I'm making a post about it! Here's the code for the whole thing if you prefer to learn by looking at code. Feel free to customise it and make your own clocks! F2U with no restrictions or attribution required.

Part one: @keyframes

As the MDN article explains, @keyframes is the at-rule which describes the appearance of the animation. Do we want the thing to spin? To shift left or right? The bad news is if you try to write your own @keyframes in your post or about me, they get eaten by the PFQ parser. The good news is, some stylesheets are loaded in every PFQ page, the stylesheets responsible for PFQ's default appearance! The rules in this stylesheets are accessible on every page, so this lets us use things like [sc=tabbed_interface][/sc] and PFQ's own keyframes. For convenience I put all the keyframes you can use in this file! keyframes.css

Part two: the clock

The keyframe we want to use for the clock is the spin animation. Here you can see it in keyframes.css. It describes a thing spinning in a circle.. just like a clock hand! This is the clock without any CSS to animate it - The initial position of the second hand is at 0 or 12. Now let's animate the second hand!

• transform-origin: bottom center; This sets the origin for the spinning movement at the bottom center of the clock hand - like a real clock hand is pinned at its bottom center.
• animation-name: spin. This gives the clock hand the spinning animation defined by @keyframes spin { ... }
• animation-timing-function: steps(60,jump-end); This makes the animated hand move in 60 steps, so it jumps from second to second. You can also have a smooth movement if you prefer! Again I recommend the MDN article for details^^
• animation-iteration-count: infinite; This makes the hand spin forever
• animation-delay: -[datetime=s]now[/datetime]s; Now this part is interesting, because it is used to wind the clock. animation-delay describes how much long you should wait when the hand first appears for the animation to start. But this can also be a negative value, meaning how many seconds we are into the animation when it first loads! So, we ask how many seconds have elapsed since the hand was at its initial position? The BBCode -[datetime=s]now[/datetime]s; returns the current second. So if PFQ time is 20:46:12 this returns just the 12 as a number.

Part three: Adding more hands

I reorganised the code a bit so you have some properties shared by some hands, and sepcific properties for each of the second, minute and hour hand. For the minute hand you have to change the properties of animation-delay. How long should it take for the minute hand to make a full trip? 60*60 = 3600s. We must also change the animation-delay property, the winding of the hand. If the time is x:46:12, how many seconds have elapsed since the minute hand was at 0 or 12? 60s*46+12s, which you can write as a BBCode expression. That's basically it and you arrive at the full code which is at the top of this post. Have fun!^^

A little trick - I'm sure some of you know about this already but I only just figured it out. When your scourers are tired, do you ever change the action to 'End mission'? And when you send out new scourers, that option is still the default and you accidentally end the mission early? Instead you can retrieve all your scourers without changing the dropdown Refresh the page And when your new scourers finish, the default option is still 'Same Mission!

nice! Thanks!