quihi

Yesterday, I came across this userscript for a floating comment box on AO3, so you can work on comments as you go. My first thought was, "Can I do it with a site skin?" And you can! It's not exactly the same, it looks a little odd where the comment box usually is, and it can't save to local storage or anything, but it's completely possible to have the comment box hovering to write while you read or scroll back through. All it takes is this bit of code in a site skin.

Floating Comment Box Code

textarea.comment_form.observe_textlength {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 50%;
  z-index: 10;
  opacity: 5%;
}

textarea.comment_form.observe_textlength:hover {
  opacity: 20%;
}

textarea.comment_form.observe_textlength:focus {
  opacity: 90%;
}

Separate Mobile Skins

Instructions for Mobile Skins

My next question was: can I format it differently on my phone? One of the reasons I generally prefer site skins to userscripts is that they apply on my phone, too. I know I saw a reference to using a different skin on my phone, and it turns out it's simple.

To create a separate skin on mobile, you need to have two skins: the "regular" skin and the mobile-specific skin. The mobile skin is the one that you have "in use", and its parent skin should be the regular skin. Then, you select "only screen and (max-width: 42em)" for "Media", and those settings will be used only on mobile.

Anything that you want on desktop should go in the regular skin. Anything you want only on a phone, or settings you need to add to "revert" the desktop changes goes in the mobile skin. The mobile skin is essentially appended to the desktop skin, so it will take priority on mobile devices.

Personally, I like a larger font size so I can read stories on my phone more easily:

#workskin p {
  font-size: large;
  line-height: 1.3;
}

I prefer the floating comment box to look a little different on mobile. This stays translucent on hover, because I'm always "hovering" when I scroll. It also goes across the whole width of the screen, because half the screen is very narrow on a phone.

Mobile Floating Comment Box Code

textarea.comment_form.observe_textlength {
  left: 10px;
  right: 10px;
  width: auto;
}

textarea.comment_form.observe_textlength:hover {
  opacity: 5%;
}

textarea.comment_form.observe_textlength:focus {
  opacity: 90%;
}

Site skins are great!

I also just discovered how AO3 allows you to search for specific tags that are synned to other tags by simply typing them into the "Additional Tags" box and hitting enter, even if it doesn't auto-complete.