Share your CSS and JS snippets here

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

As someone very new to this, where does one add this?
- First, install Stylus (chrome/edge, firefox), or Cascadea if you're on safari. Once you've done that, you can open the extension's menu and add a style for kbin.social. To do that in stylus, you just click on its icon, and then click on "kbin.social" under "write style for:". I'm not sure how it works in Cascadea but I'm sure it's a bit simpler.
Is there a way to implement the vote button colors in the custom CSS and JS inputs in the appearance section of the Magazine Panel?
- If you add that to the custom CSS, it should work

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
	}

@Amongog So where do I put this?
- If you already have an active syle, you can edit the code and add this snippet.
  
  However, I made a small style that only has this change and the vote button colors.
  
  So just install this one and you should be good!
  
  https://userstyles.world/style/10361/kbin-small-mods
This sadly doesn't work anymore for me, the boost button doesn't get the active class anymore.

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

I can see that it's running, but it doesn't seem to work for me. :(
- I'm not sure if this is fine but since it wasn't active on every page I've added an asterisk on row 7 like this:
  // @match https://kbin.social/*
  and it seems to work.

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

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.

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.

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;

    &amp;: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 {
    &amp;.dropdown:has(a.login) {
        order: 2;
    }

    &amp;#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 {
    &amp; > .threadLine {
        background-color: hsl(0,0%,40%);
    }

    &amp;: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;
}

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.

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

It should be possible, but it might be kinda difficult. I'll see if I can make something that does that!
- @artillect Yay, thank you!