Userstyles General Thread - Post original KF styles, give feedback, and discuss styling of and relating to the site

[Kokonut Kangs Klan]

.message--post {
    .message-footer { background: inherit; padding: 0px 8px 0px; }
    .reactionsBar { float: left; } /* collapse reactions/actions into one line */
    .actionBar-set.actionBar-set--internal {
        /* dim "report" and move right */
        float: right;
        margin-right: 8px;
        .actionBar-action--report { opacity: 0.2; }
    }
    .reactionsBar-link { padding: 2px !important; }
}

->

 

[Wol]

My Cave Theme has now been updated to use Less as the UserStyle preprocessor to enable the theme to use features like mixins for at least a little bit of deduplicated styling.
The main feature with this update is that the "System" style variation now can respect the user's browser setting for the website appearance (Dark or Light theming) accordingly. I'm going to see what else I can do over time.

If anyone wants to use Less, there are a few things I noticed while I had been trying to adapt the theme:

• Relative color syntax is not supported, at least when assigning to custom properties/cascading variables. Less code seems to not compile/be recognized in some cases, at least extending to when:
  • Relative color arguments are put in a cascading variable and then said variable is wrapped/dereferenced in a color function for a different property (e.g. --x: from white h s calc(l*0.7); --y: hsl(var(--x)) does not prevent compilation and --x will have the correct color).
  • A relative color statement is used in assignment to a normal property, such as the background[-color] property, but not on its own in a cascading variable[?].
• Preprocessing may emit color statements without the alpha component if said color statement does not dereference a cascading variable and is a does not include -a in the color type (e.g. hsl(var(--x), 0.1, 0.1, 0.2) and hsla(0.3, 0.1, 0.1, 0.2) are unaltered; however, hsl(0.3, 0.1, 0.1, 0.2) on its own emits hsl(0.3, 0.1, 0.1).)
  • Having looked at MDN, I found out that hsl(h, s, l, a) is legacy syntax while hsl(h s l / a) is not, so that might have been the problem in terms of support by the less compiler [w/o having looked at the less repo]. There seem to be no style errors when I use the modern syntax, so its probably advisable to use said syntax.

 

[Kokonut Kangs Klan]

I don't like how "show me anyways" disrupts the layout, reveals everything on the page at once, and requires a click. This changes the ignore system by dimming/blurring ignored posts instead of removing them from layout. Disruptive Guests are also automatically ignored. Hover each post to reveal (not for phones). Merging the duplicate blocks wasn't working correctly for some reason.

    .messageNotice--ignored { display: none; }
    .is-ignored {
        display: block !important;
        filter: blur(4px);
        opacity: 0.15;
        &:hover, &:hover .is-ignored {
            filter: blur(0px);
            opacity: 1;
        }
    }
    .message--post:has(.message-userDetails .disruptive-user) {
        display: block !important;
        filter: blur(4px);
        opacity: 0.15;
        &:hover, &:hover .is-ignored {
            filter: blur(0px);
            opacity: 1;
        }
    }

 

[#FF0000]

[data-author="#FF0000"] .userBanner.userBanner--300-member, [data-author="#FF0000"] .userBanner.userBanner--300-member.userBanner--green, [data-author="#FF0000"] .memberTooltip-banners.userBanner.userBanner--300-member, [data-author="#FF0000"] .message-userBanner.userBanner.userBanner--300-member, .memberProfileBanner-u165533-l .memberHeader-banners .userBanner.userBanner--300-member, .memberProfileBanner-u165533-m .userBanner.userBanner--300-member {
    border: 1px solid #FF0000;
    color: #FF0000;
}

[data-author="#FF0000"] .message-userDetails, [data-author="#FF0000"] .comment-user {
    --link-color: #FF0000;
    --xf-linkHoverColor: 0, 100%, calc(50% - (-1 * 17%)), 1;
}

Did some messing around and found a way to make your name (except the white one on your profile page) and T&H banner any color or style you'd like. Change the As in [data-author="AAAAAA"] to your username, and change the 0s in .memberProfileBanner-u000000-l and .memberProfileBanner-u000000-m to your id (which is in the link for your profile page)
There's a lot of user-specific CSS stuff you can do which is neat.

 

[Wol]

My cave theme has updated once again. The major thing is that I updated theme dependent colors to be expressed in the okLch color space.

What prompted this was realizing that the oklch CSS color function is actually included in the CSS spec and that recent versions of major browsers already have it implemented. I had read before that oklch has good perceptual uniformity, meaning other components are almost perceptibly constant if one channel is altered, which revealed to me that I could use it for better representing the hue parameter in the theme. For the most part, I tried to convert the colors w/o respect to hue and did some corrections. Colors at certain hue ranges should no longer be so luminescent or perceptibly dark (as with blues).

In other minor changes, I updated the appearance of post embeds to make it less eye popping, while still keeping it distinct, and updated the gold member badge to have its color be theme/style independent.

 

[Wol]

I updated my theme with a few additions and tweaks, notably including:

• Avatars using the gilded borders should look better, even at different sizes. Additionally, the underlying avatar image is now sized such that it overflows and is clipped by the gilded border, reflecting the intended size for the image.
  • I originally relied on padding to deal with the use of rounded borders for the gilded avatar lining since border-image causes the border for an element to be unrounded regardless of whether it has a non-zero border-radius style property. I eventually found this section in the MDN docs, which helped me to adapt the solution to my style. Since .avatar contains an image as opposed to the example in the linked section, background-clip and background-origin can simply be set to border-box (the first linear gradient in background must then be removed) and padding is unneeded.
• The navbar (.p-nav) and its logo (.logo-default) are now properly colored for the light and dark themes.
• Some navbar text is bolded.

 

[They were once men]

I updated my theme with a few additions and tweaks, notably including:

• Avatars using the gilded borders should look better, even at different sizes. Additionally, the underlying avatar image is now sized such that it overflows and is clipped by the gilded border, reflecting the intended size for the image.
  • I originally relied on padding to deal with the use of rounded borders for the gilded avatar lining since border-image causes the border for an element to be unrounded regardless of whether it has a non-zero border-radius style property. I eventually found this section in the MDN docs, which helped me to adapt the solution to my style. Since .avatar contains an image as opposed to the example in the linked section, background-clip and background-origin can simply be set to border-box (the first linear gradient in background must then be removed) and padding is unneeded.
• The navbar (.p-nav) and its logo (.logo-default) are now properly colored for the light and dark themes.
• Some navbar text is bolded.

I can't install it damn you Null

 

[Instant_Pot_User]

View attachment 8472023
I can't install it damn you Null

me neither

 

[Wol]

View attachment 8472023
I can't install it damn you Null

me neither

If pulling the latest Userstyle update doesn’t work (and likely it won’t), check that the Stylus extension is a version that is either 2.3.17 or 2.3.19 [in Firefox] and not 2.3.18. The 2.3.18 Firefox version apparently had issues, including with the preprocessor, so the current version on addons.mozilla.org (2.3.19) is a rollback to 2.3.17.
The userstyle in its present version is able to be applied with my installed version of 2.3.19 (Firefox).

 

[They were once men]

If pulling the latest Userstyle update doesn’t work (and likely it won’t), check that the Stylus extension is a version that is either 2.3.17 or 2.3.19 [in Firefox] and not 2.3.18. The 2.3.18 Firefox version apparently had issues, including with the preprocessor, so the current version on addons.mozilla.org (2.3.19) is a rollback to 2.3.17.
The userstyle in its present version is able to be applied with my installed version of 2.3.19 (Firefox).

I am on 2.3.19 and still can't install it.

 

[Wol]

I am on 2.3.19 and still can't install it.
View attachment 8473515

It looks like it was an issue with my style after all, specifically due to the blur-body-bg parameter, and it was an easy fix. In its original definition, the "No" option was originally an empty string when it should have been "none" for the property at line 1058. I pushed an update which should fix it.

 

[They were once men]

It looks like it was an issue with my style after all, specifically due to the blur-body-bg parameter, and it was an easy fix. In its original definition, the "No" option was originally an empty string when it should have been "none" for the property at line 1058. I pushed an update which should fix it.

Yes I can install it now thanks.

 

[Wol]

Once again, I've recently done a series of visually significant updates to my theme. Upon updating, one may notice:

• The action buttons (e.g. Like, Quote, Reply, Report, etc.) are now themed such that the buttons appear like buttons, specifically like bottom-aligned tabs on posts in threads or thread-like areas.
  • Profile posts don't have this tab-like theme for the action buttons, but they should still be visually acceptable.
• With the updates to featured content, I've added some fixes to make sure the presentation is consistent with normal posts.
• The True and Honest gold member badge has been restyled to be similar to the sheen on the avatar frame.
• The text editor can be resized via the handle in the bottom right.
• Various fixes and adjustments have been applied.