Share your CSS, discuss themes/styles/the site's default look/whatever.
I just picked random elements and edited them until it worked, because I couldn't take this GNOMEd infinite whitespace new reddit look even for 30 minutes. My CSS is garbage, relies on a 1080p desktop browser, is probably full of code that does nothing or doesn't need to be as specific, might actually break one or two site functions, etc. but at least it doesn't violate my eyes anymore.
There is a list of defined colors (like --primary-dark1) that comes from the theme, but I don't see how to change them manually except one by one using more CSS. I use the default ("TheMotte") one.
Keep in mind, de gustibus non est disputandum. I'm mostly posting this so others can iterate faster and make proper good-looking themes. If you want to have slim text without the cringe inconsistent layout/color changes and are in a hurry, reading the comments and deleting the sections you don't want should most likely work.
/*unbold buttons*/
.btn {
font-weight: 400 !important;
}
/*hide "is a reply to comment by" link on every single subcomment*/
div > .ml-2 {
display: none !important;
}
/*reorder upvote buttons / userinfo / contents*/
.comment-anchor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0px 8px;
padding: 1px;
}
.comment-anchor div:nth-child(1) {
order: 1;
}
.comment-anchor div:nth-child(2) {
order: 3;
flex: 1 100%;
}
.comment-anchor div:nth-child(3) {
order: 2;
}
/*colors*/
body > .container {
background-color: #C0C0C8 !important;
}
#thread, #userpage {
background-color: #C0C0C8;
}
.comment-section {
background-color: #F0F0F8;
}
/*add borders, make slim*/
.comment {
margin-top: 0.1rem !important;
border: 1px solid var(--primary-dark1);
margin-bottom: 1px;
}
.comment .comment-collapse-desktop {
padding-right: 8px !important;
border-left: 1px solid var(--primary-dark1) !important;
}
/*small gap between comments for readability*/
.comment-section > .comment {
margin-bottom: 5px;
}
/*smaller font, spacing, limit post width*/
p {
font-size: 12px;
margin-top: 0.4rem;
margin-bottom: 0.4rem;
max-width: 900px;
}
/*misc whitespace removal*/
body > .container {
max-width: 1850px;
}
.comment-collapse-icon {
margin-left: -2px;
}
.upvote-button, .downvote-button {
padding-left: 1px !important;
padding-right: 1px !important;
}
.user-info {
margin-bottom: 0 !important;
}
.comment .comment-body .comment-text {
margin-bottom: 0.1rem;
padding-right: 1px !important;
padding-top: 1px !important;
}
blockquote {
padding-top: 0;
padding-bottom: 0;
padding-left: 0.3rem;
}
blockquote > p {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.comment-body > .comment-anchor {
padding: 1px;
}
.comment-actions {
padding: 1px;
margin: -3px;
}
Jump in the discussion.
No email address required.
Notes -
Thank you. The site is now actually usable.
More options
Context Copy link