Stylus & Pillowfort

[queer_scribbling]

Archival note (31 December 2023): It's kind of a thing to use Stylus and tweak things on Pillowfort. I'm honestly not sure if it started out as a DIY version to get a Dark Mode before the official Dark Mode was released [in 2022] or not. It's also possible that people who missed theme customisation available on other sites wanted to have fun. However, I don't really want to copy over every post about various Stylus tweaks here on Dreamwidth.

There are holdovers from pre-Dark Mode, on the off chance that it gets turned off for whatever reason. This first section is for the sidebar when viewing the Home Feed.

.sidebar-num {
color: #FFF
}

[Holdover: This makes the Inbox and Notification number white.]

.sidebar-bottom-num {
display: none;
}

[Holdover: This gets rid of all the numbers in the bottom sidebar (follower, following, and mutual count).]

body.dark-theme .site-sidebar .sidebar-num {
color: #6F96BC;
}

[This makes the Inbox and Notification numbers match the Dark Mode light blue.]

div.sidebar-bottom.sidebar-expanded .sidebar-bottom-left > a {
color: #6F96BC !important;
}

div.sidebar-bottom.sidebar-expanded .sidebar-bottom-left > a:hover {
color: #F377B3 !important;
}

[This makes the 'About & Contact' line match the rest of the bottom sidebar; the text is light blue and turns pink when you hover over it. Specifying the "div.sidebar-bottom.sidebar-expanded" in the front is a new addition in order to keep a different sidebar tweak from overlapping here.]

body.dark-theme .site-sidebar .donate-link {
color: #6F96BC;
}

[This makes the 'Donate!' line match the rest of the bottom sidebar's light blue, but it doesn't turn pink when hovered over.]

This section is for the sidebar when viewing my fort.

.user-sidebar .expanded-bar-show {
background-color: #5E5E5E;
}

[This turns the background of the top portion that lists my username a medium grey, so the black font of my username can be read.]

.user-sidebar .sidebar-bottom-left {
background-color: #5E5E5E;
}

[This turns the background of the bottom portion that lists my Original Posts, Reblogs, and Page Style a medium grey.]

.sidebar-bottom-left > a {
color: #000 !important;
}

.sidebar-bottom-left > a:hover {
color: #6F96BC !important;
}

[This turns the lines for Original Posts, Reblogs, and their numbers black. When 'Original Posts' and 'Reblogs' are hovered over, the links turn the Dark Mode light blue.]

.user-sidebar .style-button {
color: #000;
}

[This turns the 'Page Style' black. It's not a link, so there's no hover color change.]

This section is miscellaneous.

body.dark-theme img.svg-pink-light, body.dark-theme img.svg-pink-dark, body.dark-theme img.svg-pink-light:hover, body.dark-theme img.svg-pink-dark:hover {
filter: invert(51%) sepia(94%) saturate(392%) hue-rotate(70deg) brightness(93%) contrast(93%);
}

[This changes the areas where pink are used in Dark Mode to a certain green. I used a Hex Color To CSS Filter Converter for the green that's #36B534. I specifically did this in order to have a green heart when I use the Like/heart button, so I'm not sure if I'm keeping this change forever. Keep in mind that it affects certain other pink stuff as well, such as the link symbols on the Notifications page [that take you to said link if clicked], certain privacy icons at the top of posts [for the different view-lock settings], and the symbols on the Create A Post page for different post types.]

.comment .header .comment-subheader a {
font-size: 1em;
color: #000;
}

[Holdover: This increases the size of usernames in the comments and turns the font black.]

body.dark-theme .comment .header .comment-subheader a {
font-size: 1.1em;
color: #6F96BC;
}

[In Dark Mode, this turns the usernames the light blue used throughout this theme. The font size is a little larger than non-Dark Mode.]

blockquote {
color: #808080
}

[Sort Of Holdover: When Dark Mode was originally released, this turned the font of blockquotes in the comments a light grey. An update to fix the original font color issue - which does not work while previewing posts on my own fort - currently overrides this.]

body.dark-theme .post .tags .tag-title {
color: #AEAEAE;
}

[When browsing my own fort, the 'Tags' title at the start of the tag section is not currently visible. This turns the font color a light grey. Note that it does seem to also apply when browsing the rest of the site.]

This section increases the size of different things.

div.reblog-success-container {
font-size: 20px;
}

[The 'Reblog Submitted' line when you've successfully reblogged something. Originally 16px or 18px.]

.post .timestamp2 {
font-size: 16px;
}

[The timestamp at the top right of posts. Originally 10px or 12px.]

.post .tags {
font-size: 16px;
}

[The size of the font of tags at the bottom of posts. Originally 14px.]

.post .header {
font-size: 16px;
}

[The header is the 'username' or 'username reblogged by username' bit in the top left of posts. Originally 14px.]

.post .post-nav .tag-text {
font-size: 16px;
}

[The numbers for comments/reblogs/likes section at the bottom left of posts. Originally 14px.]

.post .post-nav .edit-img {
min-width: 25px;
min-height: 25px;
}

[The size of the edit icon at the bottom right of posts. Originally 18px in both width and height.]

.post .post-nav .report-img {
height: 25px;
width: 25px;
}

[The size of both the 'delete'/bin and 'report'/flag icons at the bottom right of posts. Originally 18px in both height and width.]

#notifs-dashboard .header .comment-buttons img {
width: 20px;
}

[The size of the Notifications page link symbol. Originally 18px.]

.post .link_post img {
height: 20px;
}

[The size of the link symbols at the top right of posts. Originally 18px.]

.post .priv-svg {
height: 22px;
}

[Privacy icons in the top right of the post. Originally 18px.]

.post .hidden-reblogs-icon {
height: 22px;
}

[The three dots you hover over to see redundant reblogs. Originally 15px.