this post was submitted on 11 Jun 2023
22 points (100.0% liked)

Kbin Userstyles and Userscripts

4 readers
1 users here now

Custom CSS and JS to help improve your Kbin experience! ### Userscripts Greasy Fork ### Stylesheets UserStyles.world ### Userscript managers

founded 1 year ago
22
Share your CSS and JS snippets here (kbin.social)
submitted 1 year ago by artillect@kbin.social to c/kbinStyles@kbin.social
32 comments fedilink hide all child comments
 

Here's a place to share your little tweaks that you might think aren't big enough to warrant a full post, share away!

you are viewing a single comment's thread
view the rest of the comments
[–] Pamasich@kbin.social 1 points 1 year ago* (last edited 1 year ago)

Several snippets I wrote to customize my experience, which might be useful to others too:

When a comment is too long, the content is truncated in height and a bar is shown that expands the comment when pressed. This snippet makes the bar more narrow and also adds some visual feedback when you hover over it.

.subject .more {
    margin-left: 40%;
    width: 30%;
    border-radius: 15px;

    &:hover {
        filter: opacity(85%);
    }
}

I'm using KES (Kbin Enhancement Script) and it adds this settings button to the rightmost of the header, past the user button. This placement, and the different size of the button, makes it very disorienting for me. This snippet moves the KES button to the left of the user, and makes it look more like the other buttons as well.

#header li {
    &.dropdown:has(a.login) {
        order: 2;
    }

    &#kes-settings #kes-settings-button {
        padding-left: 0px !important;
        padding-right: 0px !important;
        min-width: 0px !important;
    }
}

This snippet requires the :has() selector to function. It's relatively new and only supported out of the box in recent-ish Chromium browser versions, so if you use Firefox check here for how to make it work.

When hovering over menu items on kbin, the item being hovered over has the same white line below it as the active item. This snippet makes it visually distinct by changing the shade a bit.

.options >* a:hover, #header a:hover {
    border-bottom-color: hsl(0,0%,70%) !important;
}

KES adds an OP label with customizable colors, but it enforces that the label has both a foreground and a background color. This snippet removes the background color.

a.user-inline::after {
    background-color: unset !important;
}

KES adds collapsible comments with colored lines. I'm not personally a big fan of the colors, but especially the white line for the first level was bothering me. It just didn't look good to have white on my dark theme. This snippet changes all lines to be gray, matching the theme I'm using. You'll probably have to change the color to match your own theme.

.expando {
    & > .threadLine {
        background-color: hsl(0,0%,40%);
    }

    &:hover > .threadLine {
        background-color: hsl(0,0%,60%);
    }
}

One more for KES's collapsible comments: when a comment is collapsed, you can click on it to uncollapse it. In the version I have, this does not work in the full width of the comment. The right half of comments isn't clickable and doesn't uncollapse the comment. This snippet changes that so you can click in the full width.

.collapsed-comment {
    grid-template-columns: 20px 20px 1fr !important;
}