Kbin Userstyles and Userscripts

Stylesheet tweaks

Change vote colors

/* Change vote colors to match reddit */
.vote .active.vote__up button  {
  color: #ff8f65;
}

.vote .active.vote__down button  {
  color: #9494ff;
}

Get rid of margins on left and right side to match layout of old reddit

/* Get rid of margins */
.kbin-container {
  max-width: none;
}

Make post creation UI wider

/* Make post creator wider */
.page-entry-create .container {
    max-width: none;
}

Stylesheet tweaks

Change boost button color when pressed

        /* Change boost color when pressed */
	.comment menu > a.active,
	.comment menu > li button.active {
		color: #53ffa6
	}

	.entry footer menu > a.active,
	.entry footer menu > li button.active {
		color: #53ffa6
	}

tampermonkey script to automatically hide voted (upvoted or downvoted) posts. Keep your feed always fresh.

// ==UserScript==
// @name hide voted posts
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://kbin.social/
// @match https://kbin.social/?p=*
// @icon https://www.google.com/s2/favicons?sz=64&domain=kbin.social
// @grant none
// ==/UserScript==
//(function() {

//})();
var $ = window.jQuery;

window.setInterval(clearVoted, 1000);

function clearVoted() {
'use strict';
var votedPosts = $('.vote__up.active') || $('.vote__down.active');
votedPosts.each(function() {
$(this).closest('.entry').css({'display':'none'});
});
}

/ Change comment padding to be more compact /
.comment {
grid-gap: 0rem 0.6rem;
}

/ Front page list padding more compact /
.entry {
padding: 0.5rem 0.5rem 0.1rem 0.5rem;
}

Would it be possible to highlight the username of people you follow?

I don't like the scrollable UI on the user page, so I wrote some css to instead display all options in multiple rows:

.page-user {
    & .options__title > h2 {
        display: none;
    }
    & aside.options {
        display: block;
        height: unset;
        padding-left: 10px;
    }
    & menu.options__main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        & li {
            padding-left: 5px;
        }
    }   
}

This CSS snippet:

• changes the profile menu items to be displayed in multiple rows rather than a scrollable container
• hides the name from the menu as it's already in the sidebar or the overview
• adds some space between the menu items as a personal preference

If you don't want the username to be hidden, remove the 'h2' part. Though the other changes mean the name will be displayed in the upper right of the container instead of where it was before.

If you don't want the spacing between the menu items, remove the 'li' part.

Note that your browser needs to have support for css nesting for this to work as-is. You can see here which browsers have support and from which version onwards.

I tried writing some css to display the text on the profile next to a user's avatar rather than below. Doesn't work for every profile for me in its current version, but figured I'll post it here anyway.

.user-box > .with-avatar {
    & .user-main {
        display: inline-block;
    }
    & .about {
        display: inline-block;
    }
}

Should save some vertical space on PC on profiles it works on.

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;
}

CSS, Change user color based on domain.
Just add more lines if you want to color more domains.

a.user-inline[title*="exploding-heads.com"] {
color: red;
}

@blobcat put in the work and posted a great css theme that I edited a bit. It's a bit darker, cleaner. Here's the link to my edit if anyone wants it.