Stylish forum tweaks

[Diff]

So there's an extension for desktop browsers (and Firefox for Android) called Stylish, it lets you write custom CSS for websites so you can make your own tweaks to their styling. Here's the tweaks I've collected for this place. If you're also my flavor of nerd, feel free to share your snippets.

/* Don't fade profile pics */
.ipsUserPhoto img, .ipsDataItem_lastPoster .ipsUserPhoto, .ipsUserPhoto_large {
   opacity: 1.0;
}

 

/* Don't break Unread Content and Mark Site Read buttons when the title of a topic is too long */
.ipsBreadcrumb {
   align-items: stretch;
}

 

/* Make capitalization consistent in user titles and in Unread Content/Mark Site Read buttons */
[data-role="group"], .ipsBreadcrumb > ul {
    text-transform: capitalize;
}

 

/* Cap signature height to 200px max */
[data-role="memberSignature"] {
    position: relative;
    max-height: 200px;
    overflow: hidden;
    margin-bottom: 1em;
    
    &:before {
        content: '';
        display: block;
        position: absolute;
        top: calc(200px - 1.5em);
        left: 0;
        right: 0;
        height: 1.5em;
        background: linear-gradient(transparent, rgba(255, 242, 211, .9))
    }
}